/* ============================================================
   راهیار (Rahyar) — Design System
   هویت آبیِ اعتماد · تک‌کنشِ سبز · جوهر سرمه‌ای روی کاغذ و مه
   پیاده‌سازی طبق DESIGN.md — همه‌ی مقادیر از توکن‌ها می‌آیند.

   رمپ تایپوگرافی (تنها اندازه‌های مجاز):
   micro .65 · label .7 · chip .75 · body-sm .875 · control .95
   body 1 · card-title 1.05 · title 1.25 · wordmark 1.35
   headline 1.875 · display clamp(2.25–3.4)
   ============================================================ */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-var.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-var.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* --- colors: navy speaks, blue identifies, green acts, orange signals --- */
  --ink: #0a1f44;
  --ink-soft: #43506b;
  --ink-faint: #64708c;

  --brand: #1d5bd6;
  --brand-deep: #14439f;
  --brand-ink: #0e2f6e;
  --brand-100: #dbe7fd;
  --brand-50: #eef4ff;

  --go: #16c47f;
  --go-bright: #2adf95;
  --go-deep: #0b9b62;
  --go-50: #e7faf1;

  --sun: #f07f13;
  --sun-deep: #b25204;
  --sun-50: #fdf0e2;
  --star: #f6a723;

  --paper: #ffffff;
  --mist: #f5f8fc;
  --line: #e4eaf3;
  --line-strong: #cbd6e6;

  /* --- shape --- */
  --r-focus: 6px;
  --r-control: 12px;
  --r-card: 16px;
  --r-pill: 9999px;

  /* --- spacing --- */
  --sp-card: 20px;
  --sp-card-lg: 24px;
  --sp-stack: 12px;
  --sp-section: 64px;
  --sp-section-lg: 80px;

  /* --- type steps --- */
  --fs-micro: 0.65rem;
  --fs-label: 0.7rem;
  --fs-chip: 0.75rem;
  --fs-body-sm: 0.875rem;
  --fs-control: 0.95rem;
  --fs-body: 1rem;
  --fs-card-title: 1.05rem;
  --fs-title: 1.25rem;
  --fs-wordmark: 1.35rem;
  --fs-headline: 1.875rem;
  --fs-display: clamp(2.25rem, 5vw, 3.4rem);

  /* --- elevation: every shadow tinted with navy ink --- */
  --shadow-card: 0 1px 2px rgba(10, 31, 68, 0.05), 0 10px 30px -12px rgba(10, 31, 68, 0.14);
  --shadow-lift: 0 2px 4px rgba(10, 31, 68, 0.06), 0 18px 44px -14px rgba(10, 31, 68, 0.22);
  --shadow-pop: 0 3px 6px rgba(10, 31, 68, 0.07), 0 24px 60px -16px rgba(10, 31, 68, 0.28);

  /* --- type: Figtree leads in English; Vazirmatn takes over in Farsi --- */
  --font: "Figtree", "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  --font-lat: "Figtree", "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  --tracking-tight: -0.025em;

  /* --- motion --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* در فارسی Vazirmatn پیش می‌افتد و tracking صفر می‌شود (قاعده‌ی Mirror-Complete) */
html[lang="fa"] {
  --font: "Vazirmatn", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --tracking-tight: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* آیکون‌های جهت‌دار در RTL آینه می‌شوند */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.625;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

/* ---------- themed chrome: no default browser surfaces ---------- */
::selection { background: var(--brand-100); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-focus); }
input, textarea, select { caret-color: var(--brand); accent-color: var(--brand); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid var(--paper); }

/* ---------- type scale: weight carries hierarchy ---------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--ink); }

.t-display { font-size: var(--fs-display); font-weight: 800; line-height: 1.08; letter-spacing: var(--tracking-tight); }
h1, h2, .t-headline { font-size: var(--fs-headline); font-weight: 800; line-height: 1.2; }
h3, .t-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.35; }
.t-card-title { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.375; }
.t-control { font-size: var(--fs-control); font-weight: 600; }
.t-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--ink-faint);
}
.t-micro {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.025em;
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.lat { font-family: var(--font-lat); }

a { color: var(--brand); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--brand-deep); }

/* ---------- layout ---------- */
.container { max-width: 72rem; margin-inline: auto; padding-inline: 16px; width: 100%; }
.container-narrow { max-width: 40rem; margin-inline: auto; padding-inline: 16px; width: 100%; }
@media (min-width: 640px) { .container, .container-narrow { padding-inline: 24px; } }

.section { padding-block: var(--sp-section); }
@media (min-width: 1024px) { .section { padding-block: var(--sp-section-lg); } }
.ground-mist { background: var(--mist); }
.ground-paper { background: var(--paper); }

.section-head { margin-bottom: 28px; }
.section-head p { color: var(--ink-soft); margin-top: 6px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 8px; height: 64px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-lat);
  font-size: var(--fs-wordmark); font-weight: 800; letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); }
.wordmark svg { flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav-link {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-control); font-weight: 600; color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover { background: var(--mist); color: var(--ink); }
.nav-link.active { background: var(--brand-50); color: var(--brand-ink); }
button.nav-link { border: none; background: none; cursor: pointer; font-family: var(--font); }
.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 5px; padding-inline: 5px 14px; border-radius: var(--r-pill);
  background: var(--mist); font-size: var(--fs-control); font-weight: 600; color: var(--ink);
}
/* کلید زبان: گروه قرصی روی مه؛ زبان فعال انگشتانه‌ی کاغذی می‌گیرد */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--mist); border-radius: var(--r-pill); padding: 3px;
}
.lang-switch button {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-lat); font-size: var(--fs-chip); font-weight: 700;
  color: var(--ink-faint); padding: 5px 12px; border-radius: var(--r-pill);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-current="true"] {
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card);
}

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: auto; width: 40px; height: 40px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--paper); color: var(--ink); cursor: pointer;
  }
  /* روی موبایل منو بسته است تا وقتی is-open بگیرد */
  .nav-links {
    display: none;
    position: absolute; inset-inline: 16px; top: 68px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--shadow-card);
    padding: 10px; margin: 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-link, .nav-user { border-radius: var(--r-control); }
  .nav-links .btn { width: 100%; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: var(--fs-control); font-weight: 700;
  border: 2px solid transparent; border-radius: var(--r-pill);
  padding: 11px 24px; cursor: pointer; text-align: center; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: scale(0.98); }

/* The One Green Pill Rule — green fill, navy text, never white text */
.btn-primary { background: var(--go); color: var(--ink); }
.btn-primary:hover { background: var(--go-bright); color: var(--ink); }
.btn-primary:disabled, .btn-primary[disabled] {
  background: var(--line); color: var(--ink-faint); pointer-events: none;
}

.btn-outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-outline:hover { background: var(--brand); color: var(--paper); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--mist); color: var(--ink); }

/* destructive: quiet by design — the palette has no red, so weight carries it */
.btn-quiet { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn-quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-lg { padding: 14px 28px; font-size: var(--fs-body); }
.btn-sm { padding: 7px 16px; font-size: var(--fs-body-sm); border-width: 1.5px; }
.btn-block { width: 100%; }

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-card);
  box-shadow: var(--shadow-card);
}
.card-lg { padding: var(--sp-card-lg); }
.card-hover { transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo); }
.card-hover:hover, .card-hover:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card-flat { box-shadow: none; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-chip); font-weight: 600; white-space: nowrap;
}
.chip-identity { background: var(--brand-50); color: var(--brand-ink); font-weight: 700; }
.chip-neutral { background: var(--mist); color: var(--ink-soft); }
.chip-signal { background: var(--sun-50); color: var(--sun-deep); font-weight: 800; }
.chip-go { background: var(--go-50); color: var(--go-deep); font-weight: 700; }
.chip-ink { background: var(--ink); color: var(--paper); font-weight: 700; }
.chip-line {
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip-line:hover { border-color: var(--brand); color: var(--brand); }

/* verified badge — blue means identity */
.verified { display: inline-flex; align-items: center; color: var(--brand); flex-shrink: 0; }

/* ---------- alerts ---------- */
.messages { display: grid; gap: 10px; padding-top: 20px; }
.alert {
  padding: 12px 18px; border-radius: var(--r-control);
  font-size: var(--fs-control); font-weight: 500; border: 1px solid transparent;
}
.alert-success { background: var(--go-50); color: var(--go-deep); border-color: rgba(11, 155, 98, 0.25); }
.alert-info { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-100); }
.alert-error { background: var(--sun-50); color: var(--sun-deep); border-color: rgba(178, 82, 4, 0.25); }

/* ---------- forms ---------- */
label { display: block; font-size: var(--fs-control); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="time"], input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  font-family: var(--font); font-size: var(--fs-control); font-weight: 500; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}
::placeholder { color: var(--ink-faint); }
input[type="file"] {
  width: 100%; padding: 14px; cursor: pointer;
  background: var(--mist); border: 1px dashed var(--line-strong);
  border-radius: var(--r-control); font-size: var(--fs-body-sm); color: var(--ink-soft);
}
input[type="checkbox"] { width: 18px; height: 18px; }
.field { margin-bottom: 18px; }
.field .help { font-size: var(--fs-body-sm); color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
.errorlist { list-style: none; color: var(--sun-deep); font-size: var(--fs-body-sm); font-weight: 600; margin-top: 6px; }
.form-errors {
  background: var(--sun-50); border: 1px solid rgba(178, 82, 4, 0.25); color: var(--sun-deep);
  border-radius: var(--r-control); padding: 12px 16px; margin-bottom: 16px;
  font-size: var(--fs-body-sm); font-weight: 500;
}

/* search pill — labels float above bold values, fields divided by logical border */
.search-pill {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  padding: 8px; display: grid; gap: 4px;
}
.search-field { padding: 8px 14px; min-width: 0; }
.search-field label {
  margin-bottom: 2px; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink-faint);
}
.search-field input, .search-field select {
  border: none; padding: 0; background: transparent;
  font-size: var(--fs-control); font-weight: 700; color: var(--ink);
}
.search-field input:focus, .search-field select:focus { box-shadow: none; outline: none; }
.search-field input:hover, .search-field select:hover { border-color: transparent; }
@media (min-width: 860px) {
  .search-pill {
    border-radius: var(--r-pill);
    grid-template-columns: 1fr 1fr 1.4fr auto;
    align-items: center; gap: 0; padding: 6px;
  }
  .search-field + .search-field { border-inline-start: 1px solid var(--line); }
  .search-pill .btn { margin-inline-start: 8px; }
}

/* ---------- selectable controls: days, slots, durations ---------- */
.pick {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-body-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 9px 14px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pick:hover { border-color: var(--brand); color: var(--brand); }
.pick.is-selected, .pick:active { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.pick.is-off {
  border-color: transparent; background: var(--mist);
  color: var(--ink-faint); opacity: 0.6; pointer-events: none;
}
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }

/* ---------- avatar: deterministic hue-gradient initials ---------- */
.avatar { border-radius: var(--r-pill); object-fit: cover; background: var(--mist); flex-shrink: 0; }
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); flex-shrink: 0;
  color: var(--paper); font-weight: 800; line-height: 1;
  background-image: linear-gradient(140deg, hsl(var(--h) 62% 56%), hsl(calc(var(--h) + 38) 66% 44%));
}
.avatar-xs { width: 32px; height: 32px; font-size: var(--fs-label); }
.avatar-sm { width: 44px; height: 44px; font-size: var(--fs-control); }
.avatar-md { width: 56px; height: 56px; font-size: var(--fs-card-title); }
.avatar-lg { width: 84px; height: 84px; font-size: var(--fs-headline); }

/* ---------- stars ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { display: block; }
.rating-num { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }

/* ستاره‌های انتخابی: چیدمان معکوس تا هاور/انتخاب، ستاره‌های پیش از خود را پر کند */
.rate-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate-pick label { cursor: pointer; margin: 0; line-height: 0; }
.rate-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.rate-pick svg { fill: none; stroke: var(--line-strong); stroke-width: 1.2; transition: fill 0.12s ease, stroke 0.12s ease; }
.rate-pick label:hover svg,
.rate-pick label:hover ~ label svg,
.rate-pick label:has(input:checked) svg,
.rate-pick label:has(input:checked) ~ label svg { fill: var(--star); stroke: var(--star); }
.rate-pick label:has(input:focus-visible) svg { stroke: var(--brand); stroke-width: 1.6; }

/* ---------- consultant card (the identity unit) ---------- */
.c-card { display: flex; flex-direction: column; height: 100%; }
.c-card__head { display: flex; align-items: flex-start; gap: 12px; }
.c-card__name {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-card-title); font-weight: 700; line-height: 1.375; color: var(--ink);
}
.c-card__uni {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--brand); margin-top: 3px;
}
.c-card__loc {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-sm); color: var(--ink-faint); margin-top: 2px;
}
.c-card__bio {
  font-size: var(--fs-body-sm); color: var(--ink-soft); line-height: 1.6; margin-top: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.c-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.c-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; margin-bottom: 12px;
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: 56px 64px;
  background:
    radial-gradient(70% 55% at 15% 0%, rgba(29, 91, 214, 0.10), transparent 70%),
    radial-gradient(60% 55% at 92% 22%, rgba(22, 196, 127, 0.10), transparent 70%),
    var(--mist);
}
@media (min-width: 1024px) { .hero { padding-block: 76px 88px; } }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.hero h1 { font-size: var(--fs-display); font-weight: 800; line-height: 1.08; }
.hero .accent { color: var(--brand); }
.hero .lead {
  font-size: var(--fs-body); font-weight: 500; line-height: 1.7;
  color: var(--ink-soft); margin-top: 18px; max-width: 34rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* layered card stack — desktop only, degrades to one mini card */
.stack { position: relative; display: none; }
@media (min-width: 1024px) { .stack { display: block; min-height: 400px; } }
.stack-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  padding: 16px; width: 290px;
}
.stack-card:nth-child(1) { transform: rotate(-2.5deg); position: relative; z-index: 2; }
.stack-card:nth-child(2) {
  position: absolute; inset-block-start: 168px; inset-inline-end: 0;
  transform: rotate(2.5deg); z-index: 1; width: 276px;
}
.booked-chip {
  position: absolute; inset-block-end: 0; inset-inline-start: 4px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-body-sm); font-weight: 700;
}
.booked-chip .dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--go-bright); flex-shrink: 0; }
.mini-card { display: block; }
@media (min-width: 1024px) { .mini-card { display: none; } }

/* ---------- deep-blue CTA band ---------- */
.cta-band { background: var(--brand-deep); color: var(--paper); }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: var(--brand-100); }
.cta-band .btn-primary { color: var(--ink); }
.cta-points { display: grid; gap: 10px; }
.cta-point {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(219, 231, 253, 0.16);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--paper);
}
.cta-point .tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--go); color: var(--ink); flex-shrink: 0;
}

/* ---------- coming-soon cards ---------- */
.soon-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-card-lg);
}
.soon-card__art { flex-shrink: 0; color: var(--brand); }
.soon-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soon-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.soon-form input[type="email"] {
  flex: 1; min-width: 11rem; background: var(--paper);
  padding: 9px 14px; font-size: var(--fs-body-sm);
}

/* ---------- hero search ---------- */
.hero-search { margin-top: 26px; max-width: 40rem; }
.popular { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.popular .lbl { font-size: var(--fs-chip); color: var(--ink-faint); font-weight: 600; }
.hero-trust {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--ink-soft);
}
.hero-trust .verified { color: var(--brand); }

/* ---------- steps ---------- */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-card-title); font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- booking widget ---------- */
.booking { box-shadow: var(--shadow-lift); padding: var(--sp-card-lg); }
.booking__price { display: flex; align-items: baseline; gap: 6px; }
.booking__price .amount {
  font-size: var(--fs-title); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.booking__day { margin-bottom: 16px; }
.booking__daylabel {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.booking__daylabel .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--go); flex-shrink: 0; }
.booking__note { display: flex; gap: 8px; font-size: var(--fs-chip); color: var(--ink-faint); line-height: 1.7; }
.booking__note + .booking__note { margin-top: 6px; }
.booking__note svg { flex-shrink: 0; margin-top: 3px; color: var(--ink-faint); }

/* ---------- consultant profile page ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--ink-soft);
}
.back-link:hover { color: var(--brand); }

.p-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.p-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-verified {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand-50); color: var(--brand-ink);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: var(--fs-chip); font-weight: 700; white-space: nowrap;
}
.p-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-control); font-weight: 600; color: var(--brand); margin-top: 8px;
}
.p-line.muted { color: var(--ink-faint); font-weight: 500; font-size: var(--fs-body-sm); margin-top: 4px; }
.p-stats {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  font-size: var(--fs-body-sm); color: var(--ink-soft);
}
.p-stats > span { display: inline-flex; align-items: center; gap: 7px; }

.section-title-icon { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.section-title-icon svg { color: var(--brand); }

.topic-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
.topic {
  border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 13px 16px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--ink);
  background: var(--paper);
}

/* ---------- booking widget: day strip ---------- */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.cal-month { font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); }
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-soft); cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cal-nav:disabled { opacity: 0.4; cursor: default; }

/* سلول روز = label + radio؛ عمداً button نیست چون flex روی button ناپایدار است */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { margin: 0; display: block; }
.cal-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-day {
  display: block; text-align: center;
  border: 2px solid var(--line); border-radius: var(--r-control);
  background: var(--paper); cursor: pointer; padding: 7px 2px 6px;
  font-family: var(--font); color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cal-day .wd {
  display: block; line-height: 1.3;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cal-day .dnum {
  display: block; line-height: 1.35;
  font-size: var(--fs-body-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cal-day .dot { display: block; margin: 3px auto 0; }
.cal-cell:hover .cal-day:not(.is-off) { border-color: var(--brand); }
.cal-cell:has(input:checked) .cal-day {
  background: var(--brand); border-color: var(--brand); color: var(--paper);
}
.cal-cell:has(input:checked) .cal-day .wd { color: var(--brand-100); }
.cal-cell:has(input:checked) .cal-day .dot circle[fill]:not([fill="transparent"]) { fill: var(--go-bright); }
.cal-cell:has(input:focus-visible) .cal-day { outline: 2px solid var(--brand); outline-offset: 2px; }
.cal-day.is-off {
  border-color: transparent; background: var(--mist);
  color: var(--ink-faint); opacity: 0.6; cursor: default;
}

.times-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--r-control);
  padding: 14px 16px; font-size: var(--fs-body-sm); color: var(--ink-faint); text-align: center;
}
.time-pick { display: none; }
.time-pick.is-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.time-pick label { margin: 0; cursor: pointer; font-weight: 700; }
.time-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.time-pick .pick { width: 100%; }
.time-pick label:has(input:checked) .pick {
  background: var(--brand); border-color: var(--brand); color: var(--paper);
}
.time-pick label:has(input:focus-visible) .pick { outline: 2px solid var(--brand); outline-offset: 2px; }

.total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-block: 16px 12px;
}
.total-row .label { font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); }
.total-row .value { font-size: var(--fs-title); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes day-pop { from { transform: scale(0.9); } to { transform: scale(1); } }
  .cal-cell:has(input:checked) .cal-day { animation: day-pop 0.32s var(--ease-spring); }
}

/* ---------- card-to-card transfer ---------- */
.pay-card {
  background: var(--brand-deep); color: var(--paper);
  border-radius: var(--r-card); padding: var(--sp-card-lg);
}
.pay-card .t-label { color: var(--brand-100); }
.pay-number {
  display: flex; gap: 10px; flex-wrap: wrap; margin-block: 10px 4px;
  direction: ltr; justify-content: flex-start;
}
.pay-number span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(219, 231, 253, 0.2);
  border-radius: var(--r-control);
  padding: 8px 12px;
  font-family: var(--font-lat);
  font-size: var(--fs-card-title); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.pay-holder { font-size: var(--fs-body-sm); color: var(--brand-100); }
.pay-amount {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid rgba(219, 231, 253, 0.2); margin-top: 16px; padding-top: 14px;
}
.pay-amount .value { font-size: var(--fs-headline); font-weight: 800; font-variant-numeric: tabular-nums; }
.copy-btn {
  border: 1px solid rgba(219, 231, 253, 0.3); background: transparent; color: var(--paper);
  border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-chip); font-weight: 700;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.14); }
.pay-steps { counter-reset: paystep; margin-top: 16px; }
.pay-step {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-body-sm); color: var(--ink-soft); line-height: 1.7;
}
.pay-step + .pay-step { margin-top: 10px; }
.pay-step::before {
  counter-increment: paystep; content: counter(paystep);
  flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-chip); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- KPI ---------- */
.kpi {
  display: block; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow-card);
}
.kpi .num { font-size: var(--fs-headline); font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .lbl { font-size: var(--fs-chip); color: var(--ink-faint); margin-top: 4px; line-height: 1.5; }
.kpi-go { background: var(--go-50); border-color: rgba(11, 155, 98, 0.25); }
.kpi-go .num { color: var(--go-deep); }
.kpi-signal { background: var(--sun-50); border-color: rgba(178, 82, 4, 0.25); }
.kpi-signal .num { color: var(--sun-deep); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); }
table.table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--fs-body-sm); }
.table th {
  background: var(--mist); text-align: start; padding: 11px 16px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.table td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- checklist ---------- */
.check { display: flex; align-items: center; gap: 9px; font-size: var(--fs-body-sm); color: var(--ink-soft); }
.check + .check { margin-top: 8px; }
.check__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); color: transparent; flex-shrink: 0;
}
.check.is-done .check__box { background: var(--go); border-color: var(--go); color: var(--ink); }
.check.is-done { color: var(--ink); font-weight: 600; }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 56px 24px; }
.empty svg { color: var(--line-strong); }
.empty h3 { margin-top: 16px; }
.empty p { color: var(--ink-soft); margin-top: 6px; }

/* ---------- footer: navy ink surface ---------- */
.site-footer { margin-top: auto; background: var(--ink); color: var(--brand-100); }
.site-footer .inner {
  padding-block: 40px; display: flex; flex-wrap: wrap;
  gap: 32px; justify-content: space-between; align-items: flex-start;
}
.site-footer .wordmark { color: var(--paper); }
.site-footer a { color: var(--brand-100); }
.site-footer a:hover { color: var(--paper); }
.site-footer .ftitle {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.site-footer .flink { display: block; font-size: var(--fs-body-sm); padding-block: 4px; }
.disclaimer {
  font-size: var(--fs-body-sm); line-height: 1.7; color: var(--brand-100);
  border-inline-start: 2px solid var(--brand); padding-inline-start: 14px; max-width: 30rem;
}
.site-footer .legal {
  border-top: 1px solid rgba(219, 231, 253, 0.14);
  padding-block: 18px; font-size: var(--fs-chip); color: var(--ink-faint);
}

/* ---------- grids ---------- */
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: 1.2fr 0.8fr; gap: 32px; } }

/* ---------- utilities (logical properties only) ---------- */
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-1 { gap: 6px; } .gap-2 { gap: 12px; } .gap-3 { gap: 18px; } .gap-4 { gap: 24px; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: var(--sp-stack); } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: var(--sp-stack); } .mb-3 { margin-bottom: 20px; } .mb-4 { margin-bottom: 32px; }
.ms-auto { margin-inline-start: auto; }
.text-soft { color: var(--ink-soft); } .text-faint { color: var(--ink-faint); }
.text-brand { color: var(--brand); } .text-go { color: var(--go-deep); } .text-sun { color: var(--sun-deep); }
.text-sm { font-size: var(--fs-body-sm); } .text-xs { font-size: var(--fs-chip); } .text-lg { font-size: var(--fs-card-title); }
.text-center { text-align: center; }
.fw-semi { font-weight: 600; } .fw-bold { font-weight: 700; } .fw-black { font-weight: 800; }
.w-full { width: 100%; }
.divider { border: none; border-top: 1px solid var(--line); margin-block: 18px; }
.stack-12 > * + * { margin-top: var(--sp-stack); }

/* ---------- motion: one entrance grammar ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
  .rise { animation: rise 0.9s var(--ease-out-expo) both; }
  .rise-1 { animation-delay: 60ms; }
  .rise-2 { animation-delay: 140ms; }
  .rise-3 { animation-delay: 220ms; }
  .rise-4 { animation-delay: 300ms; }

  /* springs live only inside booking */
  @keyframes slot-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: none; }
  }
  .slot-in { animation: slot-in 0.45s var(--ease-spring) both; }
}