/* ==========================================================================
   Dr. Mahab — Design System "Serene Depth"
   روان‌شناسی رنگ:
   - فیروزه‌ای عمیق (اعتماد، عمق، آرامش)        → رنگ اصلی و متن
   - سبز-آبی مریم‌گلی (ترمیم، تعادل، رشد)          → دکمه‌ها و پیشرفت
   - اسطوخودوسی (ذهن‌آگاهی، کاهش اضطراب)          → لایه‌های رؤیایی و تأکید دوم
   - هلویی گرم (گرما، امید، انرژی ملایم)            → فراخوان‌ها و حس صمیمیت
   - طلایی ملایم (اعتماد به نفس، ارزش)              → نشان‌ها و ستاره‌ها
   - عاجی گرم به جای سفید خالص (نرمی، بی‌استرس)    → پس‌زمینه
   ========================================================================== */

@font-face { font-family: 'Vazir'; src: url('../vendor/fonts/Vazirmatn-FD-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('../vendor/fonts/Vazirmatn-FD-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('../vendor/fonts/Vazirmatn-FD-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('../vendor/fonts/Vazirmatn-FD-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('../vendor/fonts/Vazirmatn-FD-ExtraBold.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
    --font: 'Vazir', Tahoma, 'Segoe UI', sans-serif;

    /* ---- Serene (default) ---- */
    --deep: #0d3b45;
    --deep-2: #0a2c34;
    --primary: #1f7a80;
    --primary-2: #3ba99c;
    --primary-soft: #e3f3f1;
    --lav: #8e7cf0;
    --lav-2: #b7abf7;
    --lav-soft: #efecfe;
    --peach: #f29b74;
    --peach-2: #f8c1a2;
    --peach-soft: #fdeee6;
    --gold: #dcae55;
    --gold-2: #f1d08c;
    --gold-soft: #fbf3e0;
    --sky: #5aa9e6;
    --rose: #e5859b;

    --bg: #f8f6f1;
    --bg-2: #f1ede4;
    --surface: #ffffff;
    --surface-2: #f6f3ec;
    --surface-3: #ece7dc;
    --ink: #13323a;
    --ink-2: #33525a;
    --muted: #6a8287;
    --line: rgba(13, 59, 69, .10);
    --line-2: rgba(13, 59, 69, .18);

    --ok: #2e9e7b;
    --ok-soft: #e1f4ec;
    --warn: #c98a1a;
    --warn-soft: #fbf0d9;
    --bad: #d1606a;
    --bad-soft: #fbe6e7;
    --info: #4a8fd0;
    --info-soft: #e4eff9;

    --g-primary: linear-gradient(135deg, #1f7a80 0%, #3ba99c 100%);
    --g-deep: linear-gradient(150deg, #0d3b45 0%, #134a52 55%, #1c5f63 100%);
    --g-dream: linear-gradient(135deg, #8e7cf0 0%, #5fb3c9 55%, #3ba99c 100%);
    --g-warm: linear-gradient(135deg, #f29b74 0%, #dcae55 100%);
    --g-gold: linear-gradient(135deg, #f1d08c 0%, #dcae55 50%, #b8873a 100%);
    --g-aurora: radial-gradient(1200px 700px at 85% -10%, rgba(142, 124, 240, .20), transparent 60%),
                radial-gradient(900px 600px at -10% 30%, rgba(59, 169, 156, .18), transparent 60%),
                radial-gradient(800px 500px at 60% 110%, rgba(242, 155, 116, .14), transparent 60%);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --shadow-sm: 0 1px 2px rgba(13, 59, 69, .06), 0 2px 8px rgba(13, 59, 69, .05);
    --shadow: 0 2px 6px rgba(13, 59, 69, .05), 0 12px 32px -8px rgba(13, 59, 69, .14);
    --shadow-lg: 0 4px 14px rgba(13, 59, 69, .07), 0 30px 70px -20px rgba(13, 59, 69, .30);
    --shadow-glow: 0 18px 50px -14px rgba(31, 122, 128, .55);
    --shadow-3d: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(13, 59, 69, .06) inset, 0 14px 30px -12px rgba(13, 59, 69, .28);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --container: 1240px;
    --header-h: 78px;
}

/* ---- Heading font: Estedad (OFL) — ارقام از Vazir-FD می‌آیند تا فارسی بمانند ---- */
@font-face { font-family: 'Estedad'; src: url('../vendor/fonts/Estedad-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0020-002F, U+003A-00FF, U+0600-065F, U+066A-06EF, U+06FA-06FF, U+200C-200F, U+2010-2027, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Estedad'; src: url('../vendor/fonts/Estedad-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0020-002F, U+003A-00FF, U+0600-065F, U+066A-06EF, U+06FA-06FF, U+200C-200F, U+2010-2027, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Estedad'; src: url('../vendor/fonts/Estedad-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0020-002F, U+003A-00FF, U+0600-065F, U+066A-06EF, U+06FA-06FF, U+200C-200F, U+2010-2027, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Estedad'; src: url('../vendor/fonts/Estedad-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; unicode-range: U+0020-002F, U+003A-00FF, U+0600-065F, U+066A-06EF, U+06FA-06FF, U+200C-200F, U+2010-2027, U+FB50-FDFF, U+FE70-FEFF; }

/* ---- Palettes ---- */
/* «محاب» (پیش‌فرض؛ قالب تأییدشده): سرمه‌ای-فیروزه‌ای بسیار تیره (اعتماد و اقتدار پزشکی) + طلایی (انرژی و امید) + عاجی */
[data-palette="mahab"] {
    --font-head: 'Estedad', 'Vazir', Tahoma, sans-serif;
    --deep: #04171a; --deep-2: #021012; --primary: #0f4c52; --primary-2: #1d6b70; --primary-soft: #e4eeed;
    --lav: #c9a96e; --lav-2: #e6cf9f; --lav-soft: #f6efe0;
    --peach: #f9be17; --peach-2: #ffd65a; --peach-soft: #fff5d6;
    --gold: #f9be17; --gold-2: #ffd65a; --gold-soft: #fff6dc;
    --bg: #f5f3ee; --bg-2: #ece8df; --surface-2: #f8f6f1; --surface-3: #ece8df;
    --ink: #04171a; --ink-2: #2b3d40; --muted: #6b7273;
    --line: rgba(4, 23, 26, .10); --line-2: rgba(4, 23, 26, .18);
    --g-primary: linear-gradient(135deg, #0f4c52 0%, #1d6b70 100%);
    --g-deep: linear-gradient(150deg, #04171a 0%, #0a2a2f 60%, #0f3a40 100%);
    --g-warm: linear-gradient(135deg, #ffd04a 0%, #f9be17 55%, #e9a90a 100%);
    --g-gold: linear-gradient(135deg, #ffe08a 0%, #f9be17 50%, #c99510 100%);
    --g-dream: linear-gradient(135deg, #0f4c52 0%, #3b8c8f 55%, #f9be17 100%);
    --g-aurora: radial-gradient(1100px 600px at 85% -10%, rgba(249, 190, 23, .10), transparent 60%),
                radial-gradient(900px 600px at -10% 30%, rgba(15, 76, 82, .12), transparent 60%);
    --shadow-glow: 0 18px 50px -14px rgba(15, 76, 82, .55);
}
[data-palette="mahab"] .btn-warm { color: #04171a; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 0 rgba(0,0,0,.08) inset, 0 16px 40px -14px rgba(249, 190, 23, .75); }
[data-palette="mahab"] :is(h1, h2, h3, .brand-text b) { font-family: var(--font-head); letter-spacing: -.01em; }
[data-palette="lavender"] {
    --deep: #2d2457; --deep-2: #221b44; --primary: #6b5bd3; --primary-2: #8e7cf0; --primary-soft: #efecfe;
    --lav: #3ba99c; --lav-2: #8fd4c9; --lav-soft: #e3f3f1; --ink: #27214a; --ink-2: #47406c; --muted: #7a7597;
    --line: rgba(45, 36, 87, .10); --line-2: rgba(45, 36, 87, .18);
    --g-primary: linear-gradient(135deg, #6b5bd3 0%, #a18df5 100%);
    --g-deep: linear-gradient(150deg, #2d2457 0%, #3d3278 60%, #4e3f92 100%);
    --g-dream: linear-gradient(135deg, #a18df5 0%, #e5859b 55%, #f29b74 100%);
    --shadow-glow: 0 18px 50px -14px rgba(107, 91, 211, .55);
}
[data-palette="sunrise"] {
    --deep: #3d2a3a; --deep-2: #2e1f2c; --primary: #d9735a; --primary-2: #f29b74; --primary-soft: #fdeee6;
    --lav: #e5859b; --lav-2: #f3b6c4; --lav-soft: #fcebef; --ink: #3a2a2c; --ink-2: #5d4547; --muted: #8d7476;
    --bg: #fbf6f0; --line: rgba(61, 42, 58, .10); --line-2: rgba(61, 42, 58, .18);
    --g-primary: linear-gradient(135deg, #d9735a 0%, #f2a65a 100%);
    --g-deep: linear-gradient(150deg, #3d2a3a 0%, #5a3a4a 60%, #7a4a52 100%);
    --g-dream: linear-gradient(135deg, #f2a65a 0%, #e5859b 55%, #8e7cf0 100%);
    --shadow-glow: 0 18px 50px -14px rgba(217, 115, 90, .5);
}
[data-palette="forest"] {
    --deep: #1d3a2c; --deep-2: #152b21; --primary: #3c7d5a; --primary-2: #6aab7e; --primary-soft: #e6f2ea;
    --lav: #c9a45c; --lav-2: #e5cd95; --lav-soft: #f8f0dc; --ink: #1f3329; --ink-2: #3c5547; --muted: #6f8478;
    --line: rgba(29, 58, 44, .10); --line-2: rgba(29, 58, 44, .18);
    --g-primary: linear-gradient(135deg, #3c7d5a 0%, #6aab7e 100%);
    --g-deep: linear-gradient(150deg, #1d3a2c 0%, #2a4f3c 60%, #36634b 100%);
    --g-dream: linear-gradient(135deg, #6aab7e 0%, #9cc7a5 50%, #c9a45c 100%);
    --shadow-glow: 0 18px 50px -14px rgba(60, 125, 90, .5);
}

/* ---- Night (calm, low-blue) ---- */
[data-theme="dark"] {
    --bg: #0a171c;
    --bg-2: #0d1d23;
    --surface: #102329;
    --surface-2: #142b32;
    --surface-3: #1b363e;
    --ink: #e4efee;
    --ink-2: #bcd0cf;
    --muted: #87a2a4;
    --line: rgba(205, 232, 230, .09);
    --line-2: rgba(205, 232, 230, .16);
    --primary-soft: rgba(59, 169, 156, .14);
    --lav-soft: rgba(142, 124, 240, .14);
    --peach-soft: rgba(242, 155, 116, .14);
    --gold-soft: rgba(220, 174, 85, .14);
    --ok-soft: rgba(46, 158, 123, .16);
    --warn-soft: rgba(201, 138, 26, .16);
    --bad-soft: rgba(209, 96, 106, .16);
    --info-soft: rgba(74, 143, 208, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 12px 32px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --shadow-3d: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 30px -12px rgba(0, 0, 0, .6);
    --g-aurora: radial-gradient(1200px 700px at 85% -10%, rgba(142, 124, 240, .16), transparent 60%),
                radial-gradient(900px 600px at -10% 30%, rgba(59, 169, 156, .14), transparent 60%),
                radial-gradient(800px 500px at 60% 110%, rgba(242, 155, 116, .08), transparent 60%);
    color-scheme: dark;
}
[data-palette="mahab"][data-theme="dark"] {
    --bg: #061417; --bg-2: #08191d; --surface: #0c2227; --surface-2: #0f292f; --surface-3: #153339;
    --primary: #3fa3a8; --primary-2: #6cc3c6; --primary-soft: rgba(63, 163, 168, .14); --gold-soft: rgba(249, 190, 23, .12); --peach-soft: rgba(249, 190, 23, .12); --lav-soft: rgba(201, 169, 110, .14);
    --g-aurora: radial-gradient(1100px 600px at 85% -10%, rgba(249, 190, 23, .07), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(63, 163, 168, .10), transparent 60%);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: clip; }
body {
    margin: 0; font-family: var(--font); font-size: 15.5px; line-height: 1.9; color: var(--ink);
    background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.45; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.3; }
h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
::selection { background: var(--lav-2); color: var(--deep-2); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-2) 60%, transparent); outline-offset: 2px; border-radius: 8px; }
[x-cloak], [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Icons ---- */
.icon, .icon-xs, .icon-sm, .icon-lg, .icon-xl { display: inline-block; vertical-align: -.22em; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-xs { width: 14px; height: 14px; flex: none; }
.icon-sm { width: 17px; height: 17px; flex: none; }
.icon-lg { width: 26px; height: 26px; flex: none; }
.icon-xl { width: 34px; height: 34px; flex: none; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.container-sm { max-width: 860px; }
.row { display: flex; align-items: center; gap: var(--gap, 12px); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap, 12px); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--gap, 16px); }
.grid { display: grid; gap: var(--gap, 22px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 260px), 1fr)); }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.aside-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.xsmall { font-size: .76rem; }
.bold { font-weight: 700; }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: embed; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 26px; }
.w-100 { width: 100%; }
.flex-1 { flex: 1; min-width: 0; }
.text-gradient { background: var(--g-dream); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-primary { color: var(--primary); }
.divider { height: 1px; background: var(--line); margin: 20px 0; border: 0; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .with-aside { grid-template-columns: 1fr; } .aside-sticky { position: static; } }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .container { padding-inline: 16px; } body { font-size: 15px; } }

/* ---- Buttons (soft 3D) ---- */
.btn {
    --b-bg: var(--surface); --b-ink: var(--ink);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    background: var(--b-bg); color: var(--b-ink); font-weight: 700; font-size: .95rem; line-height: 1.4; white-space: nowrap;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
    -webkit-tap-highlight-color: transparent; isolation: isolate; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .1s; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn:is(.btn-primary, .btn-warm, .btn-dream, .btn-deep)::after { /* gloss */
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
}
.btn-primary { background: var(--g-primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.12) inset, var(--shadow-glow); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.12) inset, 0 22px 50px -12px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-warm { background: var(--g-warm); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -3px 0 rgba(0,0,0,.1) inset, 0 16px 40px -14px rgba(242, 155, 116, .8); }
.btn-dream { background: var(--g-dream); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.1) inset, 0 16px 40px -14px rgba(142, 124, 240, .7); }
.btn-deep { background: var(--g-deep); color: #fff; box-shadow: 0 -3px 0 rgba(0,0,0,.2) inset, var(--shadow); }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary-2) 30%); }
.btn-glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, .24); }
.btn-danger { background: var(--bad-soft); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-white { background: #fff; color: var(--deep); box-shadow: var(--shadow); }
.btn-sm { min-height: 36px; padding: 6px 15px; font-size: .84rem; }
.btn-xs { min-height: 30px; padding: 4px 11px; font-size: .78rem; gap: 5px; }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.btn-icon.btn-sm { width: 36px; min-height: 36px; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-outline.is-loading::before, .btn-ghost.is-loading::before, .btn-soft.is-loading::before { border-color: var(--line-2); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: relative; }
.card-body { padding: 24px; }
.card-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.card-head h2 .icon, .card-head h3 .icon { color: var(--primary); }
.card-foot { padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card-hover { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-glass { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,.5); }
[data-theme="dark"] .card-glass { border-color: var(--line-2); }
.card-3d { box-shadow: var(--shadow-3d); }

/* ---- Badges / chips ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.9; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-lav { background: var(--lav-soft); color: var(--lav); }
.badge-peach { background: var(--peach-soft); color: #c86a43; }
.badge-gold { background: var(--gold-soft); color: #a77a24; }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-mute { background: var(--surface-3); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; transition: .25s; }
a.chip:hover, .chip.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid, .form-grid-3 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .label { font-weight: 700; font-size: .88rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.field .req { color: var(--bad); }
.field .help { font-size: .78rem; color: var(--muted); line-height: 1.7; }
.field .error { font-size: .8rem; color: var(--bad); font-weight: 500; }
.input, .select, .textarea, input.input, select.select, textarea.textarea {
    width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--line-2);
    background: var(--surface); color: var(--ink); outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
    box-shadow: 0 1px 2px rgba(13,59,69,.04) inset;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.85; }
.select { appearance: none; -webkit-appearance: none; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a8287' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-2) 18%, transparent); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--bad); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > svg { position: absolute; right: 15px; z-index: 1; color: var(--muted); pointer-events: none; }
.input-group > .input { padding-right: 44px; }
.input-group > .input-addon { position: absolute; left: 6px; }
.input-lg { min-height: 56px; font-size: 1.05rem; border-radius: 16px; }
.input[type="file"] { padding: 9px 12px; }
input[type="color"].input { padding: 4px; height: 48px; cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; user-select: none; }
.check input { width: 19px; height: 19px; accent-color: var(--primary); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.check-chip { position: relative; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; transition: .25s; font-weight: 500; font-size: .9rem; }
.check-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.check-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary-2) 40%, transparent); }
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 500; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track { width: 50px; height: 28px; border-radius: 99px; background: var(--surface-3); position: relative; transition: .3s; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.12) inset; }
.toggle .track::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .35s var(--ease-spring); }
.toggle input:checked + .track { background: var(--g-primary); }
.toggle input:checked + .track::after { transform: translateX(-22px); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

/* ---- Alerts ---- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); font-size: .92rem; line-height: 1.8; }
.alert > .icon { margin-top: 3px; }
.alert-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.alert-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: color-mix(in srgb, var(--info) 70%, var(--ink)); }
.alert-lav { background: var(--lav-soft); border-color: color-mix(in srgb, var(--lav) 25%, transparent); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.table th { text-align: right; font-weight: 700; font-size: .78rem; color: var(--muted); padding: 12px 16px; background: var(--surface-2); white-space: nowrap; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.table-compact td { padding: 9px 14px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; }
.dl dt { color: var(--muted); font-size: .86rem; }
.dl dd { margin: 0; font-weight: 500; }

/* ---- Avatars / persons ---- */
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; background: var(--g-dream); color: #fff; font-weight: 800; font-size: .9rem; overflow: hidden; }
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.2rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }
.person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.person b { display: block; font-weight: 700; line-height: 1.5; }
.person small { color: var(--muted); font-size: .8rem; }

/* ---- Empty / misc ---- */
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .empty-icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); transform: rotate(-6deg); box-shadow: var(--shadow-3d); }
.empty .empty-icon .icon { width: 34px; height: 34px; transform: rotate(6deg); }
.meter { height: 9px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--g-primary); transition: width 1s var(--ease); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars .icon { width: 16px; height: 16px; fill: currentColor; }
.stars .off { fill: var(--surface-3); }
.stars .off { color: var(--surface-3); }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; transition: .25s; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .is-active { background: var(--g-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.pagination .is-disabled { opacity: .45; }

/* ---- Toasts ---- */
.toasts { position: fixed; z-index: 1000; bottom: 22px; left: 22px; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 44px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: toastIn .5s var(--ease-spring); font-size: .92rem; }
.toast .icon { margin-top: 3px; }
.toast-ok .icon { color: var(--ok); } .toast-bad .icon { color: var(--bad); } .toast-info .icon { color: var(--info); }
.toast.is-leaving { animation: toastOut .35s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-30px); } }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; background: rgba(10, 30, 36, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s; }
.modal-box { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: modalIn .45s var(--ease-spring); }
.modal-box.modal-lg { width: min(860px, 100%); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.94) rotateX(8deg); } }

/* ---- Accordion ---- */
.acc-item { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); margin-bottom: 12px; transition: box-shadow .3s, border-color .3s; overflow: hidden; }
.acc-item[open] { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary-2) 40%, transparent); }
.acc-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary .acc-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; transition: transform .4s var(--ease-spring), background .3s; }
.acc-item[open] summary .acc-ico { transform: rotate(45deg); background: var(--g-primary); color: #fff; }
.acc-item .acc-body { padding: 0 22px 20px; color: var(--ink-2); }

/* ---- Rich content ---- */
.prose { font-size: 1.03rem; line-height: 2.1; color: var(--ink-2); }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; color: var(--ink); }
.prose h3 { font-size: 1.22rem; margin-top: 1.4em; color: var(--ink); }
.prose a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); text-underline-offset: 4px; }
.prose img { border-radius: var(--radius); margin: 1.5em auto; box-shadow: var(--shadow); height: auto; }
.prose ul, .prose ol { padding-right: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.6em 0; padding: 20px 26px; border-radius: 20px; background: var(--lav-soft); border-right: 4px solid var(--lav); color: var(--ink); font-weight: 500; }
.prose iframe, .prose video { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line-2); padding: 8px 12px; }

/* ---- Reveal on scroll (with depth) ---- */
.reveal { opacity: 0; transform: translateY(40px) rotateX(10deg) scale(.98); transform-origin: 50% 100%; transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.reveal-left.is-in, .reveal-right.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}

/* ---- Brand mark ---- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--primary) 40%, transparent)); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text b { display: block; font-size: 1.08rem; font-weight: 800; line-height: 1.35; color: var(--ink); }
.brand-text small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* ---- Jalali date picker ---- */
.jdp { position: absolute; z-index: 950; width: 300px; padding: 14px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: modalIn .35s var(--ease-spring); user-select: none; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 800; }
.jdp-head button { width: 34px; height: 34px; border-radius: 12px; border: 0; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.jdp-grid .wd { font-size: .72rem; color: var(--muted); font-weight: 700; padding: 4px 0; }
.jdp-grid button { aspect-ratio: 1; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-size: .86rem; font-weight: 500; transition: .2s; }
.jdp-grid button:hover { background: var(--primary-soft); color: var(--primary); }
.jdp-grid button.is-today { box-shadow: 0 0 0 1.5px var(--primary-2) inset; }
.jdp-grid button.is-sel { background: var(--g-primary); color: #fff; }
.jdp-foot { display: flex; justify-content: space-between; margin-top: 10px; gap: 8px; }
.jdp-time { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 10px; direction: ltr; }
.jdp-time select { min-height: 36px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }

/* ---- Tones & booking widgets (shared by site and panels) ---- */
/* tone helpers */
.tone-teal { --tone: #1f7a80; --tone-grad: linear-gradient(135deg, #1f7a80, #3ba99c); --tone-soft: #e3f3f1; }
.tone-lavender { --tone: #7c6ae6; --tone-grad: linear-gradient(135deg, #8e7cf0, #b7abf7); --tone-soft: #efecfe; }
.tone-peach { --tone: #ec8a62; --tone-grad: linear-gradient(135deg, #f29b74, #f8c1a2); --tone-soft: #fdeee6; }
.tone-gold { --tone: #c79a3e; --tone-grad: linear-gradient(135deg, #dcae55, #f1d08c); --tone-soft: #fbf3e0; }
.tone-sky { --tone: #3f8fd2; --tone-grad: linear-gradient(135deg, #5aa9e6, #9fd0f5); --tone-soft: #e5f1fb; }
.tone-rose { --tone: #d86c86; --tone-grad: linear-gradient(135deg, #e5859b, #f3b6c4); --tone-soft: #fcebef; }
[data-theme="dark"] [class*="tone-"] { --tone-soft: color-mix(in srgb, var(--tone) 16%, transparent); }
/* ---------------- Booking wizard (public) ---------------- */
.wizard-steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 34px; flex-wrap: wrap; }
.wizard-steps .ws { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--muted); }
.wizard-steps .ws i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--surface-2); }
.wizard-steps .ws.is-on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.wizard-steps .ws.is-on i { background: var(--g-primary); color: #fff; box-shadow: var(--shadow-glow); }
.wizard-steps .ws.is-done i { background: var(--ok-soft); color: var(--ok); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick .pick-box { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: 22px; border: 2px solid var(--line); background: var(--surface); transition: .3s var(--ease); }
.pick:hover .pick-box { border-color: var(--line-2); transform: translateY(-3px); }
.pick input:checked + .pick-box { border-color: var(--primary-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary-2) 15%, transparent), var(--shadow); }
.pick input:checked + .pick-box .pick-check { opacity: 1; transform: scale(1); }
.pick .pick-check { position: absolute; top: 14px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--g-primary); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: .35s var(--ease-spring); }
.pick .pick-check .icon { width: 15px; height: 15px; }
.day-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.day-btn { flex: none; scroll-snap-align: start; width: 86px; padding: 12px 6px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; line-height: 1.5; transition: .3s var(--ease); }
.day-btn small { display: block; font-size: .74rem; color: var(--muted); font-weight: 600; }
.day-btn b { display: block; font-size: 1.5rem; font-weight: 900; }
.day-btn em { display: block; font-style: normal; font-size: .72rem; color: var(--primary); font-weight: 700; }
.day-btn:hover { border-color: var(--line-2); transform: translateY(-3px); }
.day-btn.is-sel { background: var(--g-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.day-btn.is-sel small, .day-btn.is-sel em { color: rgba(255,255,255,.85); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.slot-btn { position: relative; }
.slot-btn input { position: absolute; opacity: 0; }
.slot-btn span { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 800; font-size: 1.05rem; transition: .25s var(--ease); line-height: 1.5; }
.slot-btn span small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.slot-btn span:hover { border-color: var(--primary-2); }
.slot-btn input:checked + span { background: var(--g-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.slot-btn input:checked + span small { color: rgba(255,255,255,.8); }
.summary-card { padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: .92rem; }
.summary-row:last-child { border: 0; }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; margin-top: 12px; border-radius: 18px; background: var(--primary-soft); font-weight: 900; color: var(--primary); }