/* Fachivo 2.0 — visual system, premium panels and commerce */
:root {
  --fx-ink: #07163f;
  --fx-blue: #0d4df0;
  --fx-blue-2: #173bc4;
  --fx-lime: #b8ff17;
  --fx-cyan: #eaf2ff;
  --fx-mist: #f5f8ff;
  --fx-line: #dce5f2;
  --fx-muted: #62708d;
  --fx-shadow: 0 22px 60px rgba(15, 42, 96, .12);
  --fx-radius: 24px;
}

html { scroll-behavior: smooth; }
body { background: #fff; color: var(--fx-ink); }
.bi { line-height: 1; }
.btn { gap: .55rem; }
.btn .bi { font-size: 1.05em; }
.panel-card {
  border-color: rgba(170, 187, 215, .42);
  box-shadow: 0 14px 38px rgba(16, 40, 88, .065);
}
.panel-card:hover { border-color: rgba(113, 143, 195, .42); }
.eyebrow { letter-spacing: .11em; }

/* Public experience */
.site-header {
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(217,226,240,.75);
  backdrop-filter: blur(18px);
}
.brand span { box-shadow: 0 8px 24px rgba(13,77,240,.22); }
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 35%, rgba(184,255,23,.14), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(34,101,255,.12), transparent 35%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -44% 52%;
  height: 80%;
  background: url('../images/tools-workbench.webp') center/cover no-repeat;
  opacity: .055;
  filter: saturate(.75);
  mask-image: linear-gradient(to top, #000, transparent 88%);
}
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.hero-copy h1 { letter-spacing: -.055em; }
.eyebrow-pill { box-shadow: inset 0 0 0 1px rgba(13,77,240,.1); }
.hero-search {
  border-color: rgba(159,177,208,.44);
  box-shadow: 0 20px 50px rgba(16,45,101,.12);
}
.hero-search label:focus-within { background: #f4f8ff; }
.hero-search .field-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; color: #fff; background: var(--fx-blue);
}
.hero-visual::before {
  content: ""; position: absolute; inset: 4% 7% 6% 11%;
  border-radius: 42% 20% 44% 18%;
  background: linear-gradient(135deg,rgba(13,77,240,.94),rgba(22,87,243,.62)),url('../images/craftsman-workshop.webp') center/cover;
  background-blend-mode: multiply;
  box-shadow: 0 32px 80px rgba(10,55,170,.2);
}
.verified-card, .offer-card, .rating-card, .privacy-card { backdrop-filter: blur(15px); }
.verified-card { box-shadow: 0 24px 60px rgba(3,43,161,.25); }
.category-section { position: relative; }
.category-tile { overflow: hidden; }
.category-tile i {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 17px; color: var(--fx-blue); background: #edf3ff;
  font-size: 1.65rem; transition: .24s ease;
}
.category-tile:hover i { color: var(--fx-ink); background: var(--fx-lime); transform: translateY(-3px) rotate(-2deg); }
.steps-grid article i {
  display: grid; place-items: center; margin-inline: auto;
  width: 66px; height: 66px; border-radius: 20px;
  background: linear-gradient(145deg,#eff4ff,#fff); color: var(--fx-blue);
  box-shadow: 0 12px 30px rgba(13,77,240,.1);
}
.steps-grid article:hover i { background: var(--fx-blue); color: #fff; }
.featured-section {
  position: relative;
  background:
    linear-gradient(90deg,rgba(246,249,255,.98),rgba(246,249,255,.9)),
    url('../images/modern-interior.webp') center/cover fixed;
}
.pro-section, .contractor-cta, .cta-band { position: relative; overflow: hidden; }
.pro-section::before, .contractor-cta::before {
  content: ""; position: absolute; inset: 0 50% 0 0;
  background: linear-gradient(90deg,rgba(5,20,62,.97),rgba(5,20,62,.38)),url('../images/renovation-room.webp') center/cover;
  opacity: .16; pointer-events: none;
}
.contractor-card { box-shadow: 0 14px 38px rgba(9,36,89,.07); }
.contractor-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(9,36,89,.13); }
.trust-grid article i, .feature-grid article i, .benefit-grid article i {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 15px; color: var(--fx-blue); background: #edf3ff;
}

/* Auth and content pages */
.auth-page, .auth-shell { position: relative; }
.auth-page::before, .auth-shell::before {
  content: ""; position: fixed; z-index: -1; inset: 0 50% 0 0;
  background: linear-gradient(125deg,rgba(5,27,88,.96),rgba(13,77,240,.72)),url('../images/craftsman-workshop.webp') center/cover;
}
.auth-card { box-shadow: var(--fx-shadow); }
.content-page .content-hero, .page-hero {
  background:
    linear-gradient(110deg,rgba(7,22,63,.97),rgba(13,77,240,.84)),
    url('../images/tools-workbench.webp') center 55%/cover;
}

/* Dashboard atmosphere */
.dashboard-body {
  background:
    radial-gradient(circle at 94% 1%,rgba(13,77,240,.09),transparent 24rem),
    linear-gradient(180deg,#f7faff 0,#f4f7fc 100%);
}
.dashboard-shell { position: relative; }
.dashboard-shell::before {
  content: ""; position: fixed; z-index: -1; right: 0; top: 76px;
  width: min(42vw,640px); height: 280px;
  background: linear-gradient(to left,rgba(246,249,255,.34),#f6f9ff),url('../images/modern-interior.webp') center/cover;
  opacity: .13; mask-image: linear-gradient(to bottom,#000,transparent);
}
.sidebar {
  background: linear-gradient(165deg,#061846,#08112d 76%);
  border: 0; box-shadow: 0 24px 70px rgba(5,20,60,.24);
}
.sidebar::after {
  content: ""; position: absolute; inset: auto 0 0; height: 145px;
  background: linear-gradient(to top,rgba(3,13,38,.84),transparent),url('../images/tools-workbench.webp') center/cover;
  opacity: .12; border-radius: inherit; pointer-events: none;
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar-user { border-color: rgba(255,255,255,.11); }
.sidebar-user > span { background: var(--fx-lime); color: var(--fx-ink); }
.sidebar nav a { color: rgba(255,255,255,.72); border: 1px solid transparent; }
.sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar nav a.active { color: #fff; background: linear-gradient(100deg,rgba(38,98,255,.9),rgba(22,78,225,.68)); border-color: rgba(255,255,255,.1); }
.sidebar nav a i, .sidebar-logout i { width: 25px; font-size: 1.1rem; text-align: center; }
.sidebar-logout { color: rgba(255,255,255,.65); }
.dashboard-heading {
  min-height: 116px; padding: 25px 28px; margin-bottom: 22px;
  border: 1px solid rgba(177,193,219,.38); border-radius: var(--fx-radius);
  background: linear-gradient(105deg,rgba(255,255,255,.98),rgba(243,248,255,.89));
  box-shadow: 0 12px 35px rgba(19,48,102,.06);
}
.dashboard-heading h1 { letter-spacing: -.035em; }
.dashboard-quick { box-shadow: 0 10px 26px rgba(13,77,240,.18); }
.stat-card > i, .dashboard-stat > i, .empty-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 15px; background: #edf3ff; color: var(--fx-blue); font-style: normal;
}
.table-wrap thead { background: #f3f7ff; }
.table-wrap tbody tr:hover { background: #f8fbff; }
.notification-list > a > i, .chat-empty i, .success-card > i {
  display: grid; place-items: center; color: var(--fx-blue); background: #edf3ff;
}
.premium-wallet-bar {
  display: flex; align-items: center; gap: 14px; margin: -2px 0 20px;
  padding: 14px 18px; border-radius: 17px;
  color: #fff; background: linear-gradient(110deg,#08215c,#0d4df0);
  box-shadow: 0 14px 34px rgba(13,77,240,.18);
}
.premium-wallet-bar > i { font-size: 1.55rem; color: var(--fx-lime); }
.premium-wallet-bar div { display: flex; gap: 8px; align-items: baseline; flex: 1; }
.premium-wallet-bar small { color: rgba(255,255,255,.7); }
.premium-wallet-bar a { color: var(--fx-ink); background: var(--fx-lime); padding: 8px 13px; border-radius: 10px; font-weight: 800; }

/* Point wallet */
.wallet-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-bottom: 26px; padding: 30px;
  border-radius: 28px; color: #fff;
  background:
    radial-gradient(circle at 82% 10%,rgba(184,255,23,.3),transparent 23%),
    linear-gradient(118deg,#06163f,#0d4df0 72%);
  box-shadow: 0 24px 55px rgba(13,63,185,.2);
}
.wallet-hero > div:first-child { display: flex; align-items: center; gap: 20px; }
.wallet-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; color: var(--fx-ink); background: var(--fx-lime); font-size: 1.85rem; }
.wallet-hero small,.wallet-hero p { color: rgba(255,255,255,.68); }
.wallet-hero strong { display: block; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.05em; }
.wallet-hero p { margin: 3px 0 0; }
.wallet-stats { display: flex; gap: 12px; }
.wallet-stats span { min-width: 115px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.08); }
.wallet-stats b { display: block; margin-top: 4px; font-size: 1.3rem; }
.points-section { margin: 30px 0; }
.points-packages { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 22px; }
.point-package {
  position: relative; display: flex; flex-direction: column; min-height: 435px;
  padding: 27px; border: 1px solid var(--fx-line); border-radius: 24px;
  background: #fff; box-shadow: 0 15px 40px rgba(14,40,89,.07); transition: .25s ease;
}
.point-package:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(14,40,89,.12); }
.point-package.featured { color: #fff; border-color: #0d4df0; background: linear-gradient(150deg,#0d4df0,#071a4f); transform: translateY(-7px); }
.point-package.featured:hover { transform: translateY(-11px); }
.package-ribbon { position: absolute; top: 17px; right: 17px; padding: 6px 9px; border-radius: 99px; color: var(--fx-ink); background: var(--fx-lime); font-size: .72rem; font-weight: 900; }
.package-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--fx-blue); background: #edf3ff; font-size: 1.35rem; }
.featured .package-icon { color: var(--fx-ink); background: var(--fx-lime); }
.point-package > p { color: var(--fx-muted); margin: 24px 0 4px; }
.featured > p,.featured .package-price small { color: rgba(255,255,255,.68); }
.point-package h3 { margin: 0; font-size: 1.15rem; }
.package-points { display: flex; gap: 8px; align-items: baseline; margin-top: 18px; }
.package-points strong { font-size: 3.1rem; line-height: 1; letter-spacing: -.06em; }
.bonus-pill { align-self: flex-start; margin-top: 12px; padding: 6px 10px; border-radius: 99px; color: #345600; background: #eaffbb; font-size: .78rem; font-weight: 800; }
.package-price { margin: auto 0 18px; padding-top: 26px; }
.package-price b { display: block; font-size: 1.65rem; }
.package-price small { color: var(--fx-muted); }
.points-history > div { display: grid; grid-template-columns: 38px 1fr auto 90px; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid #edf1f7; }
.points-history > div:last-child { border: 0; }
.points-history > div > i { font-size: 1.3rem; color: var(--fx-blue); }
.points-history small,.points-history span { display: block; color: var(--fx-muted); font-size: .8rem; }
.points-history .positive { color: #168b52; }.points-history .negative { color: #c24d4d; }

/* Checkout */
.premium-checkout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 22px; align-items: start; }
.checkout-main { padding: 30px; }
.checkout-secure { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid #e6ecf5; }
.checkout-secure > i { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: #18794e; background: #e8f8ef; font-size: 1.25rem; }
.checkout-secure small { display: block; color: var(--fx-muted); }
.payment-methods { display: grid; gap: 12px; margin: 18px 0; }
.payment-methods label { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 17px; border: 1.5px solid var(--fx-line); border-radius: 17px; cursor: pointer; transition: .2s; }
.payment-methods label:has(input:checked) { border-color: var(--fx-blue); box-shadow: 0 0 0 3px rgba(13,77,240,.08); background: #f8faff; }
.payment-methods input { position: absolute; opacity: 0; }
.payment-methods small { display: block; margin-top: 2px; color: var(--fx-muted); }
.payment-methods label > i { color: #b7c2d5; }.payment-methods label:has(input:checked) > i { color: var(--fx-blue); }
.payment-logo { display: grid; place-items: center; width: 52px; height: 40px; border-radius: 11px; font-weight: 950; letter-spacing: -.08em; }
.payment-logo.p24 { color: #fff; background: #d81636; }.payment-logo.paypo { color: #1d2150; background: #f7e72c; letter-spacing: -.04em; }
.checkout-note { display: flex; gap: 10px; margin: 14px 0; padding: 13px; border-radius: 13px; color: #554a06; background: #fff9d9; font-size: .88rem; }
.checkout-terms { margin: 20px 0; }
.checkout-submit { min-height: 54px; }
.order-summary { padding: 25px; }
.order-summary h3 { margin: 6px 0; font-size: 1.3rem; }
.order-summary > p { color: var(--fx-muted); }
.order-row,.order-total { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid #edf1f7; }
.order-total { margin-top: 4px; font-size: 1.17rem; }
.wallet-mini { display: flex; gap: 9px; margin-top: 14px; padding: 13px; border-radius: 13px; color: #24436f; background: #eef4ff; font-size: .83rem; }
.trust-checks { display: grid; gap: 9px; padding: 16px 6px; color: var(--fx-muted); font-size: .82rem; }
.trust-checks i { color: #168b52; margin-right: 5px; }

/* Unlock lead */
.unlock-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 22px; align-items: start; }
.unlock-card { padding: 34px; }
.unlock-icon { float: right; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: var(--fx-blue); background: #edf3ff; font-size: 1.55rem; }
.unlock-value { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 15px; padding: 16px; border-radius: 15px; background: #f3f7ff; }
.unlock-value strong { font-size: 1.5rem; }
.wallet-side { padding: 25px; border-radius: 22px; color: #fff; background: linear-gradient(140deg,#0d4df0,#07163f); }
.wallet-side small,.wallet-side span { color: rgba(255,255,255,.7); }.wallet-side strong { display: block; margin: 8px 0; font-size: 2.2rem; }

/* Administration and payment result */
.payment-admin-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; align-items: start; margin-bottom: 22px; }
.payment-admin-grid form { padding: 28px; }
.integration-status { display: inline-flex; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 99px; font-size: .78rem; font-weight: 800; }
.integration-status.ready { color: #137548; background: #e7f8ee; }.integration-status.not-ready { color: #9a6511; background: #fff3d4; }
.callback-card { padding: 23px; margin-bottom: 15px; }
.callback-card > i { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: var(--fx-blue); background: #edf3ff; font-size: 1.25rem; }
.callback-card code { display: block; overflow-wrap: anywhere; margin: 12px 0; padding: 10px; border-radius: 10px; background: #f4f7fb; }
.success-card > i { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; font-size: 2rem; }
.success-card.paid > i { color: #14784b; background: #e7f8ef; }

/* Maintenance requested by owner */
.maintenance-minimal { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #fff; }
.maintenance-minimal main { text-align: center; }
.maintenance-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 13px; color: #fff; background: var(--fx-blue); font-size: 1.35rem; font-weight: 950; box-shadow: 0 12px 30px rgba(13,77,240,.22); }
.maintenance-minimal h1 { margin: 0; font-size: clamp(1.2rem,4vw,1.65rem); letter-spacing: -.03em; }
.maintenance-minimal p { margin: 8px 0 0; color: var(--fx-muted); font-size: .92rem; }

@media (max-width: 980px) {
  .points-packages { grid-template-columns: 1fr; }
  .point-package { min-height: auto; }.point-package.featured { transform: none; }
  .package-price { margin-top: 22px; }
  .premium-checkout,.unlock-layout,.payment-admin-grid { grid-template-columns: 1fr; }
  .wallet-hero { align-items: flex-start; flex-direction: column; }
  .auth-page::before,.auth-shell::before { display: none; }
}
@media (max-width: 720px) {
  .dashboard-heading { min-height: auto; padding: 20px; }
  .premium-wallet-bar { align-items: flex-start; flex-wrap: wrap; }
  .premium-wallet-bar div { display: block; min-width: calc(100% - 55px); }
  .wallet-stats { width: 100%; }.wallet-stats span { flex: 1; min-width: 0; }
  .wallet-hero { padding: 23px; }.wallet-hero > div:first-child { align-items: flex-start; }
  .points-history > div { grid-template-columns: 30px 1fr auto; }
  .points-history > div > span { grid-column: 2 / 4; }
  .checkout-main,.unlock-card { padding: 22px; }
  .payment-methods label { grid-template-columns: auto 1fr; }.payment-methods label > i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}