/* ===== Font ===== */
@font-face{
  font-family:Vazirmatn;
  src:url("fonts/vazirmatn-var.woff2") format("woff2-variations"),
      url("fonts/vazirmatn-var.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --bg:#f6f7f5;
  --surface:#ffffff;
  --surface-2:#fbfcfb;
  --surface-3:#eff3f0;
  --border:#e3e8e4;
  --border-strong:#cfd8d2;
  --text:#12211c;
  --text-2:#55655e;
  --text-3:#5f736c;
  --primary:#0e7a5f;
  --primary-600:#0a6350;
  --primary-50:#e7f4ef;
  --primary-100:#cdeadf;
  --accent:#eaa53c;
  --accent-50:#fdf3e2;
  --danger:#c0392b;
  --danger-50:#fdeceb;
  --success:#0e7a5f;
  --info:#2a5bd7;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-full:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --fs-xs:.78rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.15rem;
  --fs-xl:1.4rem; --fs-2xl:1.75rem; --fs-3xl:clamp(1.8rem,3.4vw,2.65rem);

  --shadow-1:0 1px 2px rgb(16 33 27 / .05), 0 1px 3px rgb(16 33 27 / .04);
  --shadow-2:0 14px 34px -18px rgb(16 33 27 / .28), 0 2px 8px rgb(16 33 27 / .05);
  --shadow-3:0 24px 60px -24px rgb(16 33 27 / .35);

  --ease:cubic-bezier(.2,0,0,1);
  --header-h:68px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1512;
    --surface:#121f1a;
    --surface-2:#16261f;
    --surface-3:#1b2e26;
    --border:#223a31;
    --border-strong:#2f4d41;
    --text:#e9f2ee;
    --text-2:#a8beb4;
    --text-3:#7f968c;
    --primary:#37c99f;
    --primary-600:#2bb08a;
    --primary-50:#12332a;
    --primary-100:#1a463a;
    --accent:#f0b45a;
    --accent-50:#2e2415;
    --danger:#ef8072;
    --danger-50:#331915;
    --info:#8aabf5;
    --shadow-1:0 1px 2px rgb(0 0 0 / .3);
    --shadow-2:0 16px 40px -20px rgb(0 0 0 / .7);
    --shadow-3:0 24px 60px -24px rgb(0 0 0 / .8);
  }
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c1512;
  --surface:#121f1a;
  --surface-2:#16261f;
  --surface-3:#1b2e26;
  --border:#223a31;
  --border-strong:#2f4d41;
  --text:#e9f2ee;
  --text-2:#a8beb4;
  --text-3:#7f968c;
  --primary:#37c99f;
  --primary-600:#2bb08a;
  --primary-50:#12332a;
  --primary-100:#1a463a;
  --accent:#f0b45a;
  --accent-50:#2e2415;
  --danger:#ef8072;
  --danger-50:#331915;
  --info:#8aabf5;
  --shadow-1:0 1px 2px rgb(0 0 0 / .3);
  --shadow-2:0 16px 40px -20px rgb(0 0 0 / .7);
  --shadow-3:0 24px 60px -24px rgb(0 0 0 / .8);
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"] .btn-primary{color:#04241c}
html[data-theme="dark"] .date-chip[aria-pressed="true"],
html[data-theme="dark"] .chip[aria-pressed="true"],
html[data-theme="dark"] .ws.is-active b{color:#04241c}
html[data-theme="dark"] .date-chip[aria-pressed="true"] small{color:rgb(4 36 28 / .7)}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  font-size:var(--fs-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800;letter-spacing:-.2px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
::selection{background:var(--primary-100);color:var(--text)}
hr{border:0;border-top:1px solid var(--border);margin:var(--s6) 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;inset-block-start:-60px;inset-inline-start:16px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-md) var(--r-md);transition:top .15s}
.skip:focus{inset-block-start:0;top:0}
.muted{color:var(--text-2)}
.small{font-size:var(--fs-sm)}
.tiny{font-size:var(--fs-xs)}
.strong{font-weight:700}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-3{margin-block-start:var(--s3)}
.mt-4{margin-block-start:var(--s4)}
.mt-5{margin-block-start:var(--s5)}
.mb-4{margin-block-end:var(--s4)}
.full{width:100%}
.pkg-feat{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-xs);color:var(--text-2)}
.pkg-feat svg{flex:0 0 auto;margin-block-start:3px;stroke:var(--primary);fill:none;stroke-width:2.4}
.stack{display:grid;gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.wrap{flex-wrap:wrap}

.container{width:min(1200px,100% - 32px);margin-inline:auto}
.section{padding-block:var(--s10)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s4);margin-block-end:var(--s5);flex-wrap:wrap}
.section-title{font-size:var(--fs-xl)}
.section-sub{color:var(--text-2);font-size:var(--fs-sm)}
main{min-height:60vh}
main:focus{outline:none}

/* ===== Header ===== */
.header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-block-end:1px solid var(--border);
}
.header-in{display:flex;align-items:center;gap:var(--s3);height:var(--header-h);width:min(1200px,100% - 32px);margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.brand-mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--primary),#0a5b47);
  box-shadow:0 4px 12px -4px rgb(14 122 95 / .55);
}
.brand-name{font-weight:800;font-size:1.1rem;letter-spacing:-.3px}
.city-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding-inline:var(--s3);
  border:1px solid var(--border);border-radius:var(--r-full);color:var(--text-2);
  font-size:var(--fs-sm);background:var(--surface);transition:.18s var(--ease);white-space:nowrap;
}
.city-btn:hover{border-color:var(--border-strong);color:var(--text)}
.city-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.hsearch{position:relative;flex:1 1 auto;max-width:420px}
.hsearch input{
  width:100%;height:42px;padding-inline:42px var(--s4);
  background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-full);
  font-size:var(--fs-sm);transition:.18s var(--ease);
}
.hsearch input::placeholder{color:var(--text-3)}
.hsearch input:focus{background:var(--surface);border-color:var(--primary);outline:none;box-shadow:0 0 0 4px var(--primary-50)}
.hsearch .hsearch-icon{position:absolute;inset-inline-start:14px;inset-block-start:50%;translate:0 -50%;width:18px;height:18px;stroke:var(--text-3);fill:none;stroke-width:1.8;pointer-events:none}
.suggest{
  position:absolute;inset-inline:0;inset-block-start:calc(100% + 8px);z-index:50;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:6px;max-height:60vh;overflow:auto;
}
.suggest a{display:flex;align-items:center;gap:var(--s3);padding:10px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.suggest a:hover,.suggest a.is-active{background:var(--surface-3)}
.suggest .s-cat{margin-inline-start:auto;color:var(--text-3);font-size:var(--fs-xs)}
.suggest .s-empty{padding:12px;color:var(--text-2);font-size:var(--fs-sm)}

.hnav{display:flex;align-items:center;gap:var(--s1);margin-inline-start:auto}
.hnav a{
  padding:8px 12px;border-radius:var(--r-full);font-size:var(--fs-sm);color:var(--text-2);
  transition:.15s var(--ease)
}
.hnav a:hover{background:var(--surface-3);color:var(--text)}
.hnav a[aria-current="page"]{color:var(--primary);background:var(--primary-50);font-weight:700}

.hactions{display:flex;align-items:center;gap:var(--s1);flex:0 0 auto}
.icon-btn{
  position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-full);
  color:var(--text-2);border:1px solid transparent;transition:.15s var(--ease)
}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dot-badge{
  position:absolute;inset-block-start:6px;inset-inline-end:6px;min-width:17px;height:17px;padding-inline:4px;
  display:grid;place-items:center;background:var(--danger);color:#fff;border-radius:var(--r-full);
  font-size:10px;font-weight:700;line-height:1;border:2px solid var(--surface)
}
.user-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:6px 12px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);font-size:var(--fs-sm)}
.user-btn:hover{border-color:var(--border-strong)}
.user-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.avatar{
  width:30px;height:30px;border-radius:var(--r-full);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--primary),#0a5b47);color:#fff;font-size:var(--fs-xs);font-weight:800;
}
.pop{
  position:absolute;inset-block-start:calc(100% - 6px);inset-inline-end:16px;z-index:60;
  width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden;
}
.pop[hidden]{display:none}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-block-end:1px solid var(--border)}
.pop-body{max-height:52vh;overflow:auto}
.pop-foot{padding:var(--s2) var(--s4);border-block-start:1px solid var(--border);text-align:center}
.pop-foot a{font-size:var(--fs-sm);color:var(--primary);font-weight:700}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 var(--s5);border-radius:var(--r-md);
  font-weight:700;font-size:var(--fs-sm);border:1px solid transparent;
  transition:.18s var(--ease);white-space:nowrap;
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px -10px rgb(14 122 95 / .8)}
.btn-primary:hover{background:var(--primary-600);translate:0 -1px}
.btn-primary:active{translate:0 0}
.btn-ghost{border-color:var(--border);background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-soft{background:var(--primary-50);color:var(--primary)}
.btn-soft:hover{background:var(--primary-100)}
.btn-danger{background:var(--danger-50);color:var(--danger)}
.btn-block{width:100%}
.btn-lg{min-height:52px;font-size:var(--fs-base);border-radius:var(--r-md)}
.btn-sm{min-height:38px;padding-inline:var(--s4);font-size:var(--fs-xs)}
.btn[disabled]{opacity:.55;cursor:not-allowed;translate:0 0}
.btn.is-loading{color:transparent;position:relative}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{rotate:360deg}}

/* ===== Chips / badges ===== */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding-inline:var(--s3);
  border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);
  font-size:var(--fs-sm);color:var(--text-2);transition:.15s var(--ease);white-space:nowrap
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;line-height:1.6}
.badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.badge--green{background:var(--primary-50);color:var(--primary)}
.badge--accent{background:var(--accent-50);color:#a06a12}
.badge--muted{background:var(--surface-3);color:var(--text-2)}
.badge--danger{background:var(--danger-50);color:var(--danger)}
.badge--info{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}
html[data-theme="dark"] .badge--accent{color:var(--accent)}

.rating{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:700}
.rating svg{width:15px;height:15px;fill:var(--accent);stroke:none}
.rating .count{font-weight:400;color:var(--text-3)}

.verified{display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-size:var(--fs-xs);font-weight:700}
.verified svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ===== Cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card-pad{padding:var(--s5)}
.icon-tile{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--primary-50);color:var(--primary);
}
.icon-tile svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-tile--accent{background:var(--accent-50);color:#b8791a}
html[data-theme="dark"] .icon-tile--accent{color:var(--accent)}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--r-xl);
  padding:clamp(28px,5vw,64px);margin-block-start:var(--s5);
  background:linear-gradient(150deg,#0e7a5f 0%,#0a6350 55%,#074b3a 100%);
  isolation:isolate;
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;z-index:-1;filter:blur(2px)}
.hero::before{width:420px;height:420px;background:radial-gradient(circle,rgb(255 255 255 / .18),transparent 70%);inset-block-start:-160px;inset-inline-end:-80px}
.hero::after{width:340px;height:340px;background:radial-gradient(circle,rgb(234 165 60 / .28),transparent 70%);inset-block-end:-180px;inset-inline-start:-60px}
.hero-in{position:relative;max-width:720px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .22);padding:6px 14px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;backdrop-filter:blur(6px)}
.hero h1{font-size:var(--fs-3xl);margin-block:var(--s4) var(--s3);line-height:1.3}
.hero h1 em{font-style:normal;color:#ffe0a8}
.hero p.lead{color:rgb(255 255 255 / .82);font-size:var(--fs-lg);max-width:52ch}

.searchbar{
  display:flex;align-items:stretch;gap:var(--s2);margin-block-start:var(--s6);
  background:#fff;border-radius:var(--r-lg);padding:7px;box-shadow:0 18px 40px -20px rgb(0 0 0 / .45);
  position:relative;
}
.searchbar .sb-city{
  display:flex;align-items:center;gap:6px;padding-inline:var(--s3);color:#55655e;
  font-size:var(--fs-sm);border-inline-end:1px solid #e3e8e4;white-space:nowrap;border-radius:var(--r-md)
}
.searchbar .sb-city:hover{background:#f4f7f5}
.searchbar .sb-field{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.searchbar .sb-field svg{position:absolute;inset-inline-start:10px;width:18px;height:18px;stroke:#819590;fill:none;stroke-width:1.9}
.searchbar input{
  width:100%;height:50px;border:0;background:transparent;padding-inline:36px 8px;
  color:#12211c;font-size:var(--fs-sm);min-width:0
}
.searchbar input:focus{outline:none}
.searchbar .btn{min-height:50px;padding-inline:var(--s6)}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s6);margin-block-start:var(--s6)}
.hero-stat b{display:block;font-size:var(--fs-xl);font-weight:800}
.hero-stat span{font-size:var(--fs-xs);color:rgb(255 255 255 / .75)}

@media (max-width:640px){
  .searchbar{flex-wrap:wrap;padding:var(--s2)}
  .searchbar .sb-city{border:0;padding:8px;order:2;flex:1;justify-content:center}
  .searchbar .sb-field{order:1;width:100%;flex:1 0 100%;background:#f4f7f5;border-radius:var(--r-md)}
  .searchbar .btn{order:3;flex:1;min-height:44px}
}

/* ===== Category grid ===== */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.cat{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);transition:.18s var(--ease);
}
.cat:hover{border-color:var(--primary);box-shadow:var(--shadow-2);translate:0 -2px}
.cat b{display:block;font-size:.95rem}
.cat small{color:var(--text-3);font-size:var(--fs-xs)}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ===== Promo ===== */
.promo-row{display:grid;grid-template-columns:2fr 1fr;gap:var(--s3)}
.promo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--s6);color:#fff;
  background:linear-gradient(120deg,#123a2f,#0e7a5f);display:flex;flex-direction:column;justify-content:center;gap:var(--s2)
}
.promo--accent{background:linear-gradient(120deg,#8a5a11,#eaa53c)}
.promo h3{font-size:var(--fs-lg)}
.promo p{font-size:var(--fs-sm);color:rgb(255 255 255 / .82);max-width:34ch}
.promo .btn{margin-block-start:var(--s2);align-self:start;background:#fff;color:#0a6350}
.promo--accent .btn{color:#7a4d0c}
@media (max-width:800px){.promo-row{grid-template-columns:1fr}}

/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.step{position:relative;padding:var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.step-num{
  width:34px;height:34px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--primary-50);color:var(--primary);font-weight:800;margin-block-end:var(--s3)
}
.step b{display:block;margin-block-end:4px}
.step p{font-size:var(--fs-sm);color:var(--text-2)}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* ===== Service / expert cards ===== */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s3)}
.svc{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);transition:.18s var(--ease)}
.svc:hover{box-shadow:var(--shadow-2);translate:0 -2px;border-color:var(--border-strong)}
.svc-top{display:flex;align-items:flex-start;gap:var(--s3)}
.svc-title{font-weight:700;font-size:.98rem}
.svc-sub{font-size:var(--fs-xs);color:var(--text-3)}
.svc-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-block-start:auto;padding-block-start:var(--s2);border-block-start:1px dashed var(--border)}
.svc-price b{font-size:1rem;color:var(--text)}
.svc-price small{color:var(--text-3);font-size:var(--fs-xs)}

.expert{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.expert-head{display:flex;align-items:center;gap:var(--s3)}
.expert-avatar{
  width:52px;height:52px;border-radius:var(--r-full);display:grid;place-items:center;flex:0 0 auto;
  color:#fff;font-weight:800;font-size:1rem;letter-spacing:.5px;box-shadow:var(--shadow-1)
}
.expert-name{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.expert-meta{font-size:var(--fs-xs);color:var(--text-3)}
.expert-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block-start:var(--s2);border-block-start:1px solid var(--border);margin-block-start:auto}
.expert-skills{display:flex;flex-wrap:wrap;gap:6px}

/* ===== Page head ===== */
.page-head{padding-block:var(--s6) var(--s4)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-3);margin-block-end:var(--s3)}
.crumbs a:hover{color:var(--primary)}
.crumbs svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;rotate:180deg}
.page-title{font-size:var(--fs-2xl)}
.page-lead{color:var(--text-2);font-size:var(--fs-sm);margin-block-start:4px}

.toolbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding-block:var(--s3);position:sticky;top:var(--header-h);z-index:20;background:var(--bg);border-block-end:1px solid transparent}
.toolbar .spacer{flex:1}
.select{
  height:40px;padding-inline:var(--s3) var(--s8);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23819590' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
  background-size:16px;background-position:left 10px center;font-size:var(--fs-sm);appearance:none;min-width:150px
}
@media (max-width:760px){.toolbar{position:static}}

/* ===== Service detail ===== */
.detail{display:grid;grid-template-columns:1.6fr .9fr;gap:var(--s5);align-items:start;padding-block-end:var(--s10)}
.pkg{
  display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4);border:1.5px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:.16s var(--ease)
}
.pkg:hover{border-color:var(--border-strong)}
.pkg.is-selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px var(--primary-50)}
.pkg input{appearance:none;width:20px;height:20px;border:2px solid var(--border-strong);border-radius:50%;margin-block-start:3px;flex:0 0 auto;transition:.15s}
.pkg input:checked{border:6px solid var(--primary)}
.pkg-main{flex:1;min-width:0}
.pkg-name{display:flex;align-items:center;gap:8px;font-weight:700}
.pkg-features{margin-block-start:var(--s2);display:grid;gap:5px}
.pkg-features li{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-xs);color:var(--text-2)}
.pkg-features svg{width:14px;height:14px;flex:0 0 auto;margin-block-start:3px;stroke:var(--primary);fill:none;stroke-width:2.4}
.pkg-price{text-align:end;flex:0 0 auto}
.pkg-price b{display:block;font-size:1.05rem}
.pkg-price small{color:var(--text-3);font-size:var(--fs-xs)}

.aside{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:var(--s3)}
.summary{padding:var(--s5)}
.summary .price-big{font-size:1.6rem;font-weight:800;letter-spacing:-.5px}
.summary .price-note{font-size:var(--fs-xs);color:var(--text-3)}
.trust-list{display:grid;gap:var(--s2);margin-block-start:var(--s4);padding-block-start:var(--s4);border-block-start:1px solid var(--border)}
.trust-list li{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-2)}
.trust-list svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:2}

.review{padding:var(--s4);border-block-end:1px solid var(--border)}
.review:last-child{border:0}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-block-end:6px}
.review p{font-size:var(--fs-sm);color:var(--text-2)}


/* ===== Wizard / order ===== */
.wizard{display:grid;grid-template-columns:1.5fr .9fr;gap:var(--s5);align-items:start;padding-block-end:var(--s10)}
.wizard-steps{display:flex;align-items:center;gap:var(--s2);margin-block-end:var(--s5);flex-wrap:wrap}
.ws{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-3)}
.ws b{
  width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;font-size:var(--fs-xs);
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);transition:.2s
}
.ws.is-active{color:var(--text);font-weight:700}
.ws.is-active b{background:var(--primary);color:#fff;border-color:var(--primary)}
.ws.is-done b{background:var(--primary-50);color:var(--primary);border-color:var(--primary-100)}
.ws-sep{flex:1;min-width:16px;height:2px;background:var(--border);border-radius:2px}
.ws-sep.is-done{background:var(--primary-100)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{display:grid;gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-size:var(--fs-sm);font-weight:700}
.field .hint{font-size:var(--fs-xs);color:var(--text-3)}
.input,.textarea{
  width:100%;min-height:48px;padding:10px var(--s3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);transition:.15s var(--ease);font-size:var(--fs-sm)
}
.textarea{min-height:96px;resize:vertical;line-height:1.7}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-50)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-50)}
.err{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--danger);font-weight:600}
.err svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.field-ok{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--primary);font-weight:600}

.date-chips{display:flex;gap:var(--s2);overflow-x:auto;padding-block:4px;scrollbar-width:thin}
.date-chip{
  flex:0 0 auto;min-width:88px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);text-align:center;transition:.15s var(--ease)
}
.date-chip b{display:block;font-size:.95rem}
.date-chip small{font-size:var(--fs-xs);color:var(--text-3)}
.date-chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:#fff}
.date-chip[aria-pressed="true"] small{color:rgb(255 255 255 / .8)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s2)}
.slot{padding:12px;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);transition:.15s}
.slot[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-50);color:var(--primary);font-weight:700}
.slot small{display:block;font-size:var(--fs-xs);color:var(--text-3);font-weight:400}
.slot:disabled{opacity:.45;text-decoration:line-through}

.pay-opt{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;background:var(--surface)}
.pay-opt.is-selected{border-color:var(--primary);background:var(--primary-50)}
.pay-opt input{appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);flex:0 0 auto}
.pay-opt input:checked{border:6px solid var(--primary)}
.pay-opt b{display:block;font-size:var(--fs-sm)}
.pay-opt small{font-size:var(--fs-xs);color:var(--text-3)}

.sum-rows{display:grid;gap:var(--s2);font-size:var(--fs-sm)}
.sum-rows .r{display:flex;justify-content:space-between;gap:var(--s3)}
.sum-rows .r span:first-child{color:var(--text-2)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-block-start:var(--s3);margin-block-start:var(--s3);border-block-start:1px dashed var(--border);font-weight:800}

/* ===== Orders ===== */
.order{padding:var(--s4) var(--s5);display:grid;gap:var(--s3)}
.order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.order-id{font-size:var(--fs-xs);color:var(--text-3)}
.order-title{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.order-meta{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-xs);color:var(--text-2)}
.order-meta span{display:inline-flex;align-items:center;gap:5px}
.order-meta svg{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:1.8}
.timeline{display:flex;gap:0;margin-block:var(--s2);overflow-x:auto}
.tl{flex:1;min-width:90px;position:relative;padding-block-start:18px;font-size:var(--fs-xs);color:var(--text-3);text-align:center}
.tl::before{content:"";position:absolute;inset-block-start:5px;inset-inline:0;height:2px;background:var(--border)}
.tl::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;translate:-50% 0;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.tl:first-child::before{inset-inline-start:50%}
.tl:last-child::before{inset-inline-end:50%}
.tl.is-done{color:var(--text);font-weight:700}
.tl.is-done::before{background:var(--primary-100)}
.tl.is-done::after{background:var(--primary);border-color:var(--primary)}
.order-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block-start:var(--s3);border-block-start:1px solid var(--border)}

/* ===== Login ===== */
.auth{max-width:460px;margin:var(--s10) auto;padding-inline:var(--s4)}
.auth-card{padding:var(--s6);border-radius:var(--r-xl)}
.auth-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary);margin-block-end:var(--s4)}
.auth-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth h1{font-size:var(--fs-xl)}
.auth p.sub{color:var(--text-2);font-size:var(--fs-sm);margin-block:6px var(--s5)}
.otp{
  width:100%;height:56px;text-align:center;letter-spacing:.55em;font-size:1.25rem;font-weight:800;
  border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);direction:ltr;
  padding-inline-start:.55em
}
.otp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-50)}
.demo-note{
  margin-block-start:var(--s4);padding:var(--s3);border:1px dashed var(--border-strong);
  border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-xs);color:var(--text-2)
}
.demo-note b{color:var(--text);letter-spacing:.2em;direction:ltr;display:inline-block}
.auth-alt{margin-block-start:var(--s5);text-align:center;font-size:var(--fs-xs);color:var(--text-3)}

/* ===== Notifications ===== */
.notif{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-block-end:1px solid var(--border);position:relative}
.notif:last-child{border:0}
.notif.is-unread{background:color-mix(in srgb,var(--primary-50) 55%,transparent)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:0 0 auto;margin-block-start:9px}
.notif-main{flex:1;min-width:0}
.notif-title{font-weight:700;font-size:var(--fs-sm);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notif-body{font-size:var(--fs-sm);color:var(--text-2);margin-block-start:2px}
.notif-time{font-size:var(--fs-xs);color:var(--text-3);margin-block-start:6px;display:block}
.notif-x{color:var(--text-3);padding:6px;border-radius:8px}
.notif-x:hover{background:var(--surface-3);color:var(--text)}
.notif-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.pop .notif{padding:var(--s3) var(--s4)}

/* ===== Empty / misc ===== */
.empty{text-align:center;padding:var(--s12) var(--s5);display:grid;gap:var(--s3);justify-items:center}
.empty-icon{width:64px;height:64px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--surface-3);color:var(--text-3)}
.empty-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty h3{font-size:var(--fs-lg)}
.empty p{color:var(--text-2);font-size:var(--fs-sm);max-width:44ch}

.cities-strip{display:flex;flex-wrap:wrap;gap:var(--s2)}
.city-pill{padding:8px 14px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-2)}
.city-pill:hover{border-color:var(--primary);color:var(--primary)}
.city-pill.is-active{border-color:var(--primary);background:var(--primary-50);color:var(--primary);font-weight:700}

.progress{height:6px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width .4s var(--ease)}

/* ===== Footer ===== */
.footer{border-block-start:1px solid var(--border);background:var(--surface);margin-block-start:var(--s12);padding-block:var(--s8) var(--s6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8)}
.footer-h{font-size:var(--fs-sm);margin-block-end:var(--s3)}
.footer-list{display:grid;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-2)}
.footer-list a:hover{color:var(--primary)}
.brand--footer{margin-block-end:var(--s3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-block-start:var(--s8);padding-block-start:var(--s4);border-block-start:1px solid var(--border);color:var(--text-3)}
.footer-badges{display:flex;gap:var(--s2);flex-wrap:wrap}
.trust-pill{font-size:var(--fs-xs);padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid > div:first-child{grid-column:1 / -1}}

/* ===== Tabbar ===== */
.tabbar{
  display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:45;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
  border-block-start:1px solid var(--border);padding-block:6px calc(6px + env(safe-area-inset-bottom));
}
.tabbar a{display:grid;justify-items:center;gap:2px;padding:4px 0;font-size:10px;color:var(--text-3);position:relative}
.tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current="page"]{color:var(--primary);font-weight:700}
.tabbar a[aria-current="page"] svg{stroke-width:2.2}
@media (max-width:860px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr)}
  body{padding-block-end:64px}
  .hnav,.hsearch{display:none}
  .header-in{gap:var(--s2)}
  .header .brand-name{display:none}
  .hactions{margin-inline-start:auto}
}

@media (max-width:460px){
  .header-in{gap:4px}
  .hactions .btn-sm{padding-inline:10px}
  .city-btn{padding-inline:10px;font-size:var(--fs-xs)}
  .user-btn{padding-inline:4px 10px}
  .user-btn > span:last-child{display:none}
  .hero{padding:24px 20px}
  .hero-stats{gap:var(--s4)}
  .section{padding-block:var(--s8)}
  .toolbar{padding-block:var(--s2)}
  .order{padding:var(--s4)}
  .wizard-steps{gap:4px}
  .ws{font-size:var(--fs-xs)}
  .toasts{inset-inline:12px}
}

/* ===== Toasts ===== */
.toasts{position:fixed;inset-block-end:var(--s5);inset-inline-start:var(--s5);z-index:90;display:grid;gap:var(--s2);max-width:min(380px,calc(100vw - 32px))}
@media (max-width:860px){.toasts{inset-block-end:78px;inset-inline:16px;max-width:none}}
.toast{
  display:flex;align-items:flex-start;gap:var(--s3);padding:12px var(--s4);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-3);
  animation:toast-in .25s var(--ease)
}
.toast-icon{width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;flex:0 0 auto;background:var(--primary-50);color:var(--primary)}
.toast-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.toast--error .toast-icon{background:var(--danger-50);color:var(--danger)}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:var(--fs-sm);font-weight:700}
.toast-msg{font-size:var(--fs-xs);color:var(--text-2)}
.toast-close{color:var(--text-3);padding:2px}
.toast-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* ===== Dialog ===== */
dialog{
  border:1px solid var(--border);border-radius:var(--r-xl);padding:0;background:var(--surface);color:var(--text);
  width:min(520px,calc(100vw - 32px));box-shadow:var(--shadow-3)
}
dialog::backdrop{background:rgb(8 20 16 / .45);backdrop-filter:blur(3px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-block-end:1px solid var(--border)}
.dlg-head h2{font-size:var(--fs-lg)}
.dlg-body{padding:var(--s5);max-height:70vh;overflow:auto}
.dlg-foot{display:flex;justify-content:flex-start;gap:var(--s2);padding:var(--s4) var(--s5);border-block-start:1px solid var(--border);flex-wrap:wrap}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s2)}
.city-item{text-align:start;padding:10px var(--s3);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm)}
.city-item:hover{border-color:var(--primary);color:var(--primary)}
.city-item[aria-pressed="true"]{background:var(--primary-50);border-color:var(--primary);color:var(--primary);font-weight:700}

.noscript{padding:var(--s6);text-align:center;background:var(--danger-50);color:var(--danger)}

/* print-free demo banner */
.demo-banner{
  display:flex;align-items:center;gap:var(--s2);justify-content:center;flex-wrap:wrap;
  padding:8px var(--s4);background:var(--accent-50);color:#8a5a11;font-size:var(--fs-xs);
  border-block-end:1px solid color-mix(in srgb,var(--accent) 30%,transparent)
}
html[data-theme="dark"] .demo-banner{color:var(--accent)}
.demo-banner b{font-weight:800}

/* ===== Responsive stacking (kept last so it wins over base grids) ===== */
@media (max-width:960px){
  .detail,.wizard{grid-template-columns:1fr}
  .aside{position:static;order:-1}
  .wizard .aside{order:2}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .wizard form .row-between{display:grid;grid-template-columns:1fr;gap:var(--s2)}
  .wizard form .row-between .btn{width:100%}
}