/* ==========================================================================
   ثبت‌نام ایران اروپا — شیوه‌نامهٔ سراسری

   بدون چارچوب، بدون CDN. سه دلیل (CLAUDE.md):
     ۱. CSP روی default-src 'self' است — هر منبع بیرونی مسدود می‌شود
     ۲. سایت قدیمی فونت را از گوگل می‌گرفت و بدون Referrer-Policy، شمارهٔ موبایل
        هر متقاضی در هر بازدید به گوگل می‌رفت
     ۳. کاربر روی اینترنت موبایل ضعیف است؛ هر کیلوبایت یعنی ثانیه‌ها انتظار

   همه‌جا از خاصیت‌های منطقی (inline-start/end) استفاده شده، نه left/right —
   یعنی RTL بدون هیچ فایل override جداگانه‌ای کار می‌کند.

   فهرست:
     ۱  فونت
     ۲  توکن‌های طراحی
     ۳  پایه و تایپوگرافی
     ۴  چیدمان و سربرگ
     ۵  کارت و سطح
     ۶  نشان (badge)
     ۷  مسیر ثبت‌نام — حلقهٔ پیشرفت و خط زمانی
     ۸  فرم‌ها
     ۹  دکمه‌ها
     ۱۰ اعلان‌ها
     ۱۱ آپلود
     ۱۲ خلاصهٔ فقط‌خواندنی
     ۱۳ حالت خالی و صفحه‌های پیام
     ۱۴ کمکی‌ها و دسترس‌پذیری
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) فونت
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'IEFont';
    src: url('/fonts/ie-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    /* swap یعنی متن بلافاصله با فونت سیستمی دیده می‌شود و بعد جابه‌جا می‌شود؛
       روی اینترنت ضعیف بهتر از صفحهٔ خالی است. */
    font-display: swap;
}

@font-face {
    font-family: 'IEFont';
    src: url('/fonts/ie-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   ۲) توکن‌های طراحی
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* ---- برند ----
       تنها جایی که برای تغییر هویت بصری باید دست بخورد. */
    --brand: #0b6e80;
    --brand-hover: #095b6b;
    --brand-bright: #12a2ba;
    --brand-on: #ffffff;
    --brand-tint: #e6f4f7;
    --brand-line: #bfe2ea;

    /* لهجهٔ گرم — فقط برای جلب توجه به «الان نوبت شماست» */
    --accent: #b45309;
    --accent-tint: #fdf1e3;
    --accent-line: #f2d3ae;

    /* ---- سطح‌ها ---- */
    --bg: #f2f6f8;
    --bg-glow: #d9edf2;
    --surface: #ffffff;
    --surface-sunken: #f4f7f9;
    --surface-raised: #ffffff;

    /* ---- متن ---- */
    --fg: #0f1a20;
    --fg-soft: #46545f;
    /* روی --bg (نه فقط روی سفید) باید ≥۴٫۵:۱ باشد؛ رنگ روشن‌تر روی پس‌زمینهٔ
       طوسیِ صفحه از AA می‌افتاد. */
    --fg-muted: #5d6874;

    /* ---- خطوط ---- */
    --line: #e2e9ee;
    --line-strong: #7f8b96;   /* مرز کنترل فرم — باید ≥۳:۱ باشد (WCAG 1.4.11) */

    /* ---- وضعیت ---- */
    --ok: #0f6f4a;
    --ok-tint: #e4f5ec;
    --ok-line: #a9dcc3;
    --warn: #92500a;
    --warn-tint: #fdf2e0;
    --warn-line: #f0d3a4;
    --bad: #a51f2e;
    --bad-tint: #fdeaec;
    --bad-line: #f2b8bf;
    --bad-deep: #7d1421;     /* قرمز تیره — فقط برای «انصراف» که برگشت‌ناپذیر است */

    /* ---- سایه: لایه‌ای، نه یک بلور تخت ---- */
    --shadow-sm: 0 1px 2px rgba(15, 26, 32, .05);
    --shadow: 0 1px 2px rgba(15, 26, 32, .05), 0 6px 16px -6px rgba(15, 26, 32, .12);
    --shadow-lg: 0 2px 4px rgba(15, 26, 32, .05), 0 18px 40px -18px rgba(15, 26, 32, .28);

    /* ---- شکل ---- */
    --r-xl: 24px;
    --r-lg: 18px;
    --r-md: 12px;
    --r-sm: 9px;
    --r-pill: 999px;

    --tap: 48px;              /* هدف لمسی — از حداقل ۴۴ سخاوتمندانه‌تر */
    --measure: 36rem;
    --gutter: 1.15rem;

    --font: 'IEFont', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* تم تاریک: پیش‌فرض از روی تنظیم سیستم، مگر اینکه کاربر صریحاً «روشن» را انتخاب کرده باشد */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand: #3ec5dc;
        --brand-hover: #6ad8ea;
        --brand-bright: #6ad8ea;
        --brand-on: #04222a;
        --brand-tint: #0e2f38;
        --brand-line: #1d4d59;

        --accent: #eda44f;
        --accent-tint: #2e2210;
        --accent-line: #4d3b19;

        --bg: #0a0e13;
        --bg-glow: #10222a;
        --surface: #141b22;
        --surface-sunken: #0f151b;
        --surface-raised: #1a232c;

        --fg: #e9eff5;
        --fg-soft: #b3c0cc;
        --fg-muted: #8c9aa8;

        --line: #232d37;
        --line-strong: #68737f;

        --ok: #4ecb92;
        --ok-tint: #0e2c20;
        --ok-line: #1e5540;
        --warn: #e5a94f;
        --warn-tint: #2d2311;
        --warn-line: #4d3d1c;
        --bad: #f78290;
        --bad-tint: #331419;
        --bad-line: #5c2630;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -6px rgba(0, 0, 0, .6);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -18px rgba(0, 0, 0, .8);
    }
}

/* انتخاب دستی کاربر بر تنظیم سیستم می‌چربد */
:root[data-theme="dark"] {
    --brand: #3ec5dc;
    --brand-hover: #6ad8ea;
    --brand-bright: #6ad8ea;
    --brand-on: #04222a;
    --brand-tint: #0e2f38;
    --brand-line: #1d4d59;

    --accent: #eda44f;
    --accent-tint: #2e2210;
    --accent-line: #4d3b19;

    --bg: #0a0e13;
    --bg-glow: #10222a;
    --surface: #141b22;
    --surface-sunken: #0f151b;
    --surface-raised: #1a232c;

    --fg: #e9eff5;
    --fg-soft: #b3c0cc;
    --fg-muted: #8c9aa8;

    --line: #232d37;
    --line-strong: #68737f;

    --ok: #4ecb92;
    --ok-tint: #0e2c20;
    --ok-line: #1e5540;
    --warn: #e5a94f;
    --warn-tint: #2d2311;
    --warn-line: #4d3d1c;
    --bad: #f78290;
    --bad-tint: #331419;
    --bad-line: #5c2630;
    --bad-deep: #ff9aa5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -6px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -18px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------------------
   ۳) پایه و تایپوگرافی
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-block-size: 100dvh;
    background: var(--bg);
    /* درخشش ملایم پشت سربرگ — عمق می‌دهد بدون اینکه هزینه‌ای داشته باشد */
    background-image: radial-gradient(60rem 26rem at 50% -14rem, var(--bg-glow), transparent 70%);
    background-repeat: no-repeat;
    color: var(--fg);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.8;            /* خطوط فارسی به فضای عمودی بیشتری نیاز دارند */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.4; }
h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem); }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; max-inline-size: var(--measure); }
p:last-child { margin-block-end: 0; }

.lead { color: var(--fg-soft); font-size: 1.0625rem; }

a {
    color: var(--brand);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: color .15s var(--ease);
}
a:hover { color: var(--brand-hover); }

small, .muted { color: var(--fg-muted); font-size: .875rem; }

/* فوکوس همیشه دیده شود — ناوبری کامل با صفحه‌کلید الزام دسترس‌پذیری است */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   ۴) چیدمان و سربرگ
   -------------------------------------------------------------------------- */

.page { display: flex; flex-direction: column; min-block-size: 100dvh; }

.container {
    inline-size: 100%;
    max-inline-size: 46rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-block-end: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 3.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
}

.brand__mark {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: linear-gradient(145deg, var(--brand-bright), var(--brand));
    color: var(--brand-on);
    font-size: .8125rem;
    letter-spacing: .02em;
    box-shadow: var(--shadow-sm);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text b { font-size: .9375rem; }
.brand__text span { font-size: .6875rem; font-weight: 400; color: var(--fg-muted); }

main { flex: 1; padding-block: 1.5rem 4.5rem; }

.site-footer {
    border-block-start: 1px solid var(--line);
    padding-block: 1.25rem;
    color: var(--fg-muted);
    font-size: .8125rem;
    text-align: center;
}

.stack > * + * { margin-block-start: 1.25rem; }

/* سرصفحهٔ صفحه: سلام + دکمهٔ انصراف در یک ردیف */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-head h1 { margin-block-end: .2rem; }

/* --------------------------------------------------------------------------
   ۵) کارت و سطح
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

@media (min-width: 40rem) { .card { padding: 1.5rem; } }

.card--flush { padding: 0; overflow: hidden; }
.card__body { padding: 1.25rem; }
@media (min-width: 40rem) { .card__body { padding: 1.5rem; } }

.card__title { margin-block-end: .25rem; }
.card__sub { color: var(--fg-muted); font-size: .875rem; margin-block-end: 1.125rem; }

.card__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--line);
    background: var(--surface-sunken);
}
.card__head h2 { margin: 0; font-size: 1rem; }
.card__head .ico { color: var(--brand); }

/* --------------------------------------------------------------------------
   ۶) نشان
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    border: 1px solid;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge::before {
    content: "";
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge--wait { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand); }
.badge--you  { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); }
.badge--ok   { background: var(--ok-tint); border-color: var(--ok-line); color: var(--ok); }
.badge--bad  { background: var(--bad-tint); border-color: var(--bad-line); color: var(--bad); }

/* --------------------------------------------------------------------------
   ۷) مسیر ثبت‌نام
   حلقهٔ پیشرفت + خط زمانی. روی گوشی عمودی، روی دسکتاپ افقی — یک DOM، دو نمایش.
   -------------------------------------------------------------------------- */

.journey {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background:
        radial-gradient(28rem 14rem at 88% -6rem, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
        linear-gradient(160deg, var(--surface-raised), var(--surface));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.journey__top {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.25rem;
}
@media (min-width: 40rem) { .journey__top { padding: 1.75rem; gap: 1.5rem; } }

.journey__copy { min-inline-size: 0; }
.journey__eyebrow {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .01em;
}
.journey__title { margin: 0 0 .375rem; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.journey__hint { margin: 0; color: var(--fg-soft); font-size: .9375rem; }

/* ---- حلقهٔ پیشرفت (SVG درون‌خطی) ---- */
.ring { inline-size: 5.25rem; block-size: 5.25rem; flex: none; display: block; }
@media (min-width: 40rem) { .ring { inline-size: 6rem; block-size: 6rem; } }

.ring__track { stroke: var(--line); }
.ring__fill {
    stroke: var(--brand);
    stroke-linecap: round;
    transition: stroke-dashoffset .8s var(--ease);
}
.ring__label {
    fill: var(--fg);
    font-family: var(--font);
    font-weight: 700;
    font-size: 15px;
}
.ring__sub { fill: var(--fg-muted); font-family: var(--font); font-size: 8px; }

/* ---- خط زمانی ---- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 1.125rem 1.25rem 1.375rem;
    border-block-start: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-sunken) 60%, transparent);
    display: grid;
    gap: 0;
}
@media (min-width: 40rem) { .timeline { padding-inline: 1.75rem; } }

.timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: .75rem;
    align-items: start;
    padding-block: .4rem;
    color: var(--fg-muted);
    font-size: .875rem;
}

/* خط اتصال بین نقطه‌ها */
.timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block-start: 1.9rem;
    inset-block-end: -.35rem;
    inset-inline-start: .8125rem;
    inline-size: 2px;
    background: var(--line);
    border-radius: 2px;
}
.timeline li[data-state="done"]:not(:last-child)::before { background: var(--brand); }

.timeline__dot {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line);
    font-size: .75rem;
    font-weight: 700;
    color: var(--fg-muted);
    z-index: 1;
    transition: transform .2s var(--ease);
}

.timeline__text { padding-block-start: .2rem; }

.timeline li[data-state="done"] { color: var(--fg-soft); }
.timeline li[data-state="done"] .timeline__dot {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
}

.timeline li[data-state="current"] { color: var(--fg); font-weight: 700; }
.timeline li[data-state="current"] .timeline__dot {
    background: var(--surface);
    border-color: var(--brand);
    color: var(--brand);
    transform: scale(1.12);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* حلقهٔ تپنده روی مرحلهٔ جاری — «اینجایید» */
.timeline li[data-state="current"] .timeline__dot::after {
    content: "";
    position: absolute;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--brand);
    animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.85); opacity: 0; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* ---- دسکتاپ: افقی ---- */
@media (min-width: 52rem) {
    .timeline {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
        padding-block: 1.5rem;
    }

    .timeline li {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: .5rem;
        padding-inline: .25rem;
        font-size: .75rem;
    }

    .timeline li:not(:last-child)::before {
        inset-block: 1.05rem auto;
        inset-inline: auto -50%;
        inline-size: 100%;
        block-size: 2px;
    }

    .timeline__text { padding-block-start: 0; }
}

/* --------------------------------------------------------------------------
   ۸) فرم‌ها
   -------------------------------------------------------------------------- */

.field { margin-block-end: 1.25rem; }
.field:last-of-type { margin-block-end: 0; }

.field > label {
    display: block;
    margin-block-end: .4rem;
    font-size: .9375rem;
    font-weight: 700;
}

.field__hint {
    display: block;
    color: var(--fg-muted);
    font-size: .8125rem;
    margin-block-end: .45rem;
    line-height: 1.6;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    inline-size: 100%;
    min-block-size: var(--tap);
    padding: .6rem .85rem;
    font: inherit;
    font-size: 1rem;              /* زیر ۱۶px، سافاری موبایل صفحه را zoom می‌کند */
    color: var(--fg);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--brand);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

textarea { min-block-size: 6.5rem; line-height: 1.75; resize: vertical; }

select {
    appearance: none;
    /* فلش سفارشی — با ماسک ساخته می‌شود تا رنگش با تم عوض شود */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(1rem) calc(50% + 1px), calc(1.32rem) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-start: 2.4rem;
    cursor: pointer;
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-sunken);
    color: var(--fg-muted);
    cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: var(--fg-muted); opacity: .7; }

/* فیلد خطادار: فقط رنگ نه — علامت متنی هم هست، چون رنگ به‌تنهایی
   برای کاربر نابینای رنگ اطلاعاتی نمی‌رساند */
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--bad); }
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 20%, transparent);
}

.field__error {
    display: block;
    margin-block-start: .4rem;
    color: var(--bad);
    font-size: .8125rem;
    font-weight: 700;
}
.field__error:empty { display: none; }
.field__error::before { content: "⚠ "; }

/* گروه تاریخ: سه select کنار هم */
.trio { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: .5rem; }

.grid-2 { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { padding: 0; font-size: .9375rem; font-weight: 700; margin-block-end: .4rem; }

/* انتخاب کارتی — به‌جای select برای گزینه‌های کم و مهم */
.choice { display: grid; gap: .5rem; }
@media (min-width: 34rem) { .choice--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 34rem) { .choice--3 { grid-template-columns: repeat(3, 1fr); } }

.choice label {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    min-block-size: var(--tap);
    padding: .7rem .85rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    font-size: .9375rem;
    line-height: 1.4;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.choice label:hover { border-color: var(--brand); }

.choice input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    min-block-size: 0;
    flex: none;
    accent-color: var(--brand);
    margin: 0;
}

.choice input:checked + span { font-weight: 700; }

.choice label:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.choice label:has(input:focus-visible) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* honeypot ضدربات — برای کاربر نامرئی، برای ربات یک فیلد وسوسه‌انگیز.
   از display:none استفاده نشده چون ربات‌های امروزی آن را تشخیص می‌دهند. */
.hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ۹) دکمه‌ها
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: var(--tap);
    padding-inline: 1.4rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(160deg, var(--brand-bright), var(--brand));
    color: var(--brand-on);
    box-shadow: var(--shadow-sm);
    transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}

.btn:hover { color: var(--brand-on); filter: brightness(1.06); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.3);
}

.btn--block { inline-size: 100%; }
.btn--lg { min-block-size: 3.375rem; font-size: 1.0625rem; }

.btn--ghost {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--line-strong);
    box-shadow: none;
}
.btn--ghost:hover { background: var(--surface-sunken); color: var(--fg); filter: none; }

.btn--quiet {
    background: transparent;
    color: var(--fg-muted);
    border-color: transparent;
    box-shadow: none;
    padding-inline: .75rem;
}
.btn--quiet:hover { background: var(--surface-sunken); color: var(--fg); filter: none; }

.btn--danger {
    background: transparent;
    color: var(--bad);
    border-color: var(--bad-line);
    box-shadow: none;
}
.btn--danger:hover { background: var(--bad-tint); color: var(--bad); filter: none; }

/* حالت «در حال ارسال» — با JS ست می‌شود تا ارسال دوتایی رخ ندهد */
.btn[data-busy="true"] .btn__idle { display: none; }
.btn:not([data-busy="true"]) .btn__busy { display: none; }

.btn__busy::before {
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    animation: spin .7s linear infinite;
    margin-inline-end: .5rem;
    display: inline-block;
    vertical-align: -.2rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* انصراف — قرمز تیره و عمداً کم‌جلوه. کاری برگشت‌ناپذیر است، پس نه باید
   وسوسه‌انگیز باشد و نه پنهان. */
.btn--cancel {
    background: transparent;
    color: var(--bad-deep);
    border-color: color-mix(in srgb, var(--bad-deep) 35%, transparent);
    box-shadow: none;
    min-block-size: 2.5rem;
    padding-inline: .9rem;
    font-size: .875rem;
}
.btn--cancel:hover {
    background: var(--bad-tint);
    border-color: var(--bad-deep);
    color: var(--bad-deep);
    filter: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: 1.75rem;
}
.actions--center { justify-content: center; }
.actions--stack { flex-direction: column; }
@media (min-width: 34rem) { .actions--stack { flex-direction: row; } }

/* ---- ریتم عمودی ----
   کادر پیام و دکمه نباید به هم بچسبند. این قاعده‌ها فاصله را یک‌جا تضمین
   می‌کنند تا لازم نباشد در هر صفحه دستی margin بگذاریم. */
.alert + .btn,
.alert + .actions,
.alert + .summary,
.alert + form,
.alert + .dropzone { margin-block-start: 1.5rem; }

.summary + .actions,
.summary + .btn { margin-block-start: 1.75rem; }

.card > .alert:first-child { margin-block-end: 1.5rem; }
.card > .btn:last-child,
.card > .actions:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   ۱۰) اعلان‌ها
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    gap: .75rem;
    padding: .95rem 1.05rem;
    border-radius: var(--r-md);
    border: 1px solid;
    border-inline-start-width: 4px;
    font-size: .9375rem;
    line-height: 1.7;
}

.alert + .alert { margin-block-start: .75rem; }
.alert p { margin: 0; }
.alert__ico { flex: none; font-size: 1.05rem; line-height: 1.5; }

.alert--info { background: var(--brand-tint); border-color: var(--brand-line); border-inline-start-color: var(--brand); }
.alert--you  { background: var(--accent-tint); border-color: var(--accent-line); border-inline-start-color: var(--accent); }
.alert--ok   { background: var(--ok-tint);   border-color: var(--ok-line);   border-inline-start-color: var(--ok); }
.alert--bad  { background: var(--bad-tint);  border-color: var(--bad-line);  border-inline-start-color: var(--bad); }

/* --------------------------------------------------------------------------
   ۱۱) آپلود
   -------------------------------------------------------------------------- */

.dropzone {
    display: grid;
    place-items: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.dropzone:hover, .dropzone[data-dragging="true"] {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.dropzone__ico { font-size: 1.75rem; line-height: 1; color: var(--brand); }
.dropzone b { font-size: .9375rem; }

.dropzone__preview {
    max-inline-size: 100%;
    max-block-size: 15rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    margin-block-start: 1.25rem;
    display: block;
}

/* فایل انتخاب‌شده، پیش از ارسال */
.filecard {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-block-start: 1rem;
    padding: .8rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    font-size: .875rem;
}
.filecard__ico { font-size: 1.25rem; color: var(--brand); flex: none; }
.filecard__name { font-weight: 700; overflow-wrap: anywhere; }
.filecard__size { color: var(--fg-muted); font-size: .8125rem; }

/* راهنمای شمارهٔ حساب — قدم پیش از آپلود */
.paybox {
    display: grid;
    gap: .35rem;
    padding: 1rem 1.1rem;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
}
.paybox__amount {
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
    font-weight: 700;
    color: var(--brand);
    line-height: 1.3;
}

/* ---- اتاق مشاورهٔ آنلاین ------------------------------------------------
   فقط وقتی جلسه همین حالا روشن است رندر می‌شود؛ نقطهٔ «زنده» می‌تپد تا فرق
   داشته باشد با بقیهٔ کارت‌های ثابت صفحه. */
.room-card { display: grid; gap: 1rem; }
.room-live { color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
    .room-live { animation: room-pulse 1.6s ease-in-out infinite; }
    @keyframes room-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: .45; transform: scale(.85); }
    }
}

/* ---- شماره‌کارت‌های واریز ------------------------------------------------
   مقصد پول کاربر است، پس باید بزرگ‌ترین و خواناترین چیز روی کارت باشد و
   کپی کردنش یک ضربه بگیرد. روی موبایل شماره و دکمه زیر هم می‌روند تا شماره
   هرگز شکسته یا کوچک نشود. */
.cards__lead { margin-block: 0 1rem; }

.cards__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.paycard {
    padding: .9rem 1rem;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    border: 1px solid var(--brand-line);
}

.paycard__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.paycard__num {
    font-size: clamp(1.15rem, 1rem + 1.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.35;
    color: var(--fg);
    font-variant-numeric: tabular-nums;

    /* ⚠️ بدون JS تنها راه کپی همین است — انتخاب متن نباید هیچ‌جا بسته شود. */
    user-select: all;
    -webkit-user-select: all;
    -webkit-touch-callout: default;
}

/* ---- شبا: زیر شمارهٔ کارت، کم‌رنگ‌تر ----
   اکثر کاربران کارت‌به‌کارت می‌کنند؛ شبا برای اینترنت‌بانک و پایا/ساتنا است.
   پس در سلسله‌مراتب پایین‌تر از شمارهٔ کارت می‌نشیند، ولی باید کاملاً خوانا
   بماند — شبا ۲۶ کاراکتر است و یک رقم اشتباه یعنی پول به حساب دیگری. */
.paycard__row--sheba {
    margin-block-start: .55rem;
    padding-block-start: .55rem;
    border-block-start: 1px dashed color-mix(in srgb, var(--brand-line) 70%, transparent);
}

.paycard__sheba {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    /* برچسب و شماره با هم روی یک خط بمانند و فضای باقی‌مانده را بگیرند؛
       اگر جا نشد، کل ردیف می‌شکند نه اینکه برچسب از شماره جدا بیفتد. */
    flex: 1 1 auto;
    min-inline-size: 0;
}

.paycard__label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--fg-muted);
    flex: none;
}

.paycard__shebanum {
    font-size: clamp(.875rem, .78rem + .55vw, 1rem);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.5;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    /* ۲۶ کاراکتر روی موبایل جا نمی‌شود؛ شکستن بهتر از سرریز افقی است */
    overflow-wrap: anywhere;

    /* ⚠️ بدون JS تنها راه کپی همین است */
    user-select: all;
    -webkit-user-select: all;
    -webkit-touch-callout: default;
}

.paycard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    margin: .4rem 0 0;
    font-size: .875rem;
    color: var(--fg-muted);
}
.paycard__bank { font-weight: 700; color: var(--fg); }

.btn--copy {
    /* ۴۴px — کف هدف لمسی. کوچک‌تر از این نشود؛ این دکمه‌ای است که کاربر
       روی گوشی و با عجله می‌زند. */
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    font-size: .875rem;
    background: var(--surface);
    color: var(--brand);
    border-color: var(--brand-line);
    box-shadow: none;
    flex: none;
}

/* روی صفحه‌های باریک دکمه به خط بعد می‌افتد؛ آنجا تمام عرض را بگیرد
   تا هدف لمسی از یک دکمهٔ ۵۷ پیکسلی گمشده بزرگ‌تر باشد. */
@media (max-width: 26rem) {
    .btn--copy { inline-size: 100%; }
}
.btn--copy:hover {
    background: var(--surface-raised);
    border-color: var(--brand);
    filter: none;
}

/* حالت «کپی شد» — دو ثانیه، بعد خودش برمی‌گردد */
.btn--copy .btn__done { display: none; }
.btn--copy[data-copied] .btn__idle { display: none; }
.btn--copy[data-copied] .btn__done { display: inline; }
.btn--copy[data-copied] {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}

/* نسخهٔ کوچک‌تر برای ردیف شبا. ⚠️ باید بعد از .btn--copy بیاید،
   وگرنه font-size آن غالب می‌شود (هم‌specificity، ترتیب تعیین‌کننده است). */
.btn--copy-sm {
    min-block-size: 2.1rem;
    padding-inline: .8rem;
    font-size: .8125rem;
    /* دکمه به اندازهٔ متنش، نه تمام عرض سطر — flex item بودن باعث می‌شود
       inline-flex به flex تبدیل شود و بدون این، روی موبایل کش می‌آید. */
    inline-size: fit-content;
    flex: none;
}

.progress {
    block-size: .6rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-block-start: .85rem;
}

.progress i {
    display: block;
    block-size: 100%;
    inline-size: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-bright));
    transition: inline-size .3s var(--ease);
}

/* --------------------------------------------------------------------------
   ۱۲) خلاصهٔ فقط‌خواندنی
   بعد از ثبت فرم، مقادیر ذخیره‌شده دوباره در فیلدها پیش‌پر نمی‌شوند.
   -------------------------------------------------------------------------- */

.summary { margin: 0; display: grid; gap: 0; }

.summary > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
    padding-block: .7rem;
    border-block-end: 1px dashed var(--line);
}
@media (min-width: 34rem) {
    .summary > div { grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; }
}

.summary > div:last-child { border-block-end: 0; padding-block-end: 0; }
.summary dt { color: var(--fg-muted); font-size: .8125rem; }
.summary dd { margin: 0; font-weight: 700; }

/* --------------------------------------------------------------------------
   ۱۳) حالت خالی و صفحه‌های پیام
   -------------------------------------------------------------------------- */

.empty-state { text-align: center; padding-block: 2.5rem 1rem; }
.empty-state__ico {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin-inline: auto;
    margin-block-end: 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 1.85rem;
}
.empty-state p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   ۱۴) کمکی‌ها و دسترس‌پذیری
   -------------------------------------------------------------------------- */

.theme-toggle {
    /* ۴۴px — حداقل هدف لمسی. کوچک‌تر از این روی گوشی سخت زده می‌شود. */
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--fg-soft);
    cursor: pointer;
    font-size: 1.05rem;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.theme-toggle:hover { background: var(--surface-sunken); color: var(--fg); }

/* بدون جاوااسکریپت کلید تم بی‌فایده است، پس اصلاً نمایش داده نمی‌شود */
html.no-js .theme-toggle { display: none; }

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.text-center { text-align: center; }
.divider { block-size: 1px; background: var(--line); margin-block: 1.25rem; border: 0; }

.hstack { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}