/*
    ═══════════════════════════════════════════════════════════════════════
    تم بصری سرویس — الهام‌گرفته از UIهای مدرن استعلام/پرداخت (مثل آیتول):
    بک‌گراند روشن و خنثی، کارت‌های سفید با گوشه‌ی گرد، تایپوگرافی ساده و
    خوانا، و دو رنگ اکشنِ مشخص: سبز برای «بررسی وضعیت» رایگان، آبی برای
    «پرداخت / ادامه‌ی مراحل».
    ═══════════════════════════════════════════════════════════════════════
*/

/* فونت وزیرمتن به‌صورت لوکال (self-hosted) — قبلاً از fonts.googleapis.com
   لود می‌شد که برای کاربر ایرانی گاهی کند/مسدود است و مستقیم روی LCP و
   Core Web Vitals (فاکتور رتبه‌بندی گوگل) اثر منفی می‌گذاشت. فقط وزن‌های
   واقعاً استفاده‌شده در همین اپ (۴۰۰/۵۰۰/۶۰۰/۷۰۰/۸۰۰) نگه داشته شده‌اند،
   نه کل خانواده‌ی فونت. فایل‌ها + مجوز OFL در public/fonts/vazirmatn/. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #1F2937;
    --ink-soft: #6B7280;
    --paper: #F8F8F8;
    --paper-raised: #FFFFFF;
    --brass: #F59E0B;
    --brass-deep: #B45309;
    --verdigris: #16A34A;
    --rust: #DC2626;
    --line: #D9DBDF;
    --radius: 12px;
    --radius-sm: 9px;
    --font-display: 'Vazirmatn', -apple-system, "Segoe UI", Tahoma, sans-serif;
    --font-body: 'Vazirmatn', -apple-system, "Segoe UI", Tahoma, sans-serif;

    /* رنگ‌های عملیاتی — سبز برای اقدامِ «بررسی وضعیت» (رایگان)،
       آبی برای «پرداخت / ادامه‌ی مراحل». */
    --action-green: #1FA355;
    --action-green-deep: #178143;
    --action-blue: #1C64F2;
    --action-blue-deep: #1550C4;
}
* { box-sizing: border-box; }
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: var(--font-body);
    background: #EDEDED;
    display: flex;
    justify-content: center;
    color: var(--ink);
    overflow: hidden; /* اسکرول فقط داخل app-content اتفاق می‌افتد، نه روی body */
}

/* پوسته‌ی اپ — عرض ثابت و باریک حتی در دسکتاپ (mobile-first)، قفل‌شده به
   ارتفاع صفحه‌ی کاربر: خودِ کارت هرگز از صفحه بزرگ‌تر نمی‌شود؛ فقط ناحیه‌ی
   محتوا (app-content) در صورت نیاز اسکرول می‌خورد. */
.app-shell {
    width: 100%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 28px rgba(31, 41, 55, .14);
}

/* نوار سوئیچ ادمین — فقط وقتی نشست از طریق «سوئیچ به حساب کاربری» در
   پنل ادمین آمده باشد؛ تا ادمین هیچ‌وقت فراموش نکند دارد جای یک مشتری
   واقعی صفحات را می‌بیند. */
.impersonate-bar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 16px; background: var(--brass-deep); color: #fff; font-size: 11.5px;
}
.impersonate-bar button {
    background: #fff; color: var(--brass-deep); border: none; border-radius: var(--radius-sm);
    padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; flex-shrink: 0;
}

/* سربرگ — ثابت روی هر صفحه، هویت سرویس را نشان می‌دهد؛ محتوای هر
   صفحه زیرش تغییر می‌کند، خودِ سربرگ نه. */
.letterhead {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.letterhead-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.letterhead-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .01em;
}
.letterhead-title small {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-soft);
    margin-top: 1px;
}

/* منوی همبرگری — پنل کشویی (drawer) از سمت چپ (سمت دکمه)، با پرده‌ی
   نیمه‌شفاف پشتش؛ مشابه اپ‌های حرفه‌ای. از details/summary برای state
   استفاده می‌کند، ولی برخلاف details خام (که display:none قابل‌ترنزیشن
   نیست)، پنل/پرده همیشه در DOM حاضرند و فقط با transform/opacity بر
   اساس [open] مخفی/نمایان می‌شوند. */
.header-menu { position: static; }
.header-menu-trigger {
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; color: var(--ink-soft); flex-shrink: 0;
    background: none; border: none; padding: 0;
    transition: background .15s, color .15s;
}
.header-menu-trigger:hover { background: #F3F4F6; color: var(--ink); }
.header-menu.is-open .header-menu-trigger { background: #F3F4F6; color: var(--ink); }

/* درِ اپ‌شل مثل .fixed-bottom-bar محدود می‌شود: روی موبایل عرض اپ‌شل =
   عرض ویوپورت، ولی روی دسکتاپ اپ‌شل یک کارت ۴۰۰پیکسلیِ وسط‌چین است — این
   محاسبه لبه‌ی چپِ همان کارت را پیدا می‌کند، نه لبه‌ی چپِ کل مرورگر. */
.header-menu-overlay {
    position: fixed; top: 0; bottom: 0;
    left: max(0px, calc(50% - 200px)); width: min(100vw, 400px);
    background: rgba(17, 24, 39, .45);
    opacity: 0; pointer-events: none; transition: opacity .5s cubic-bezier(.4,0,.2,1); z-index: 65;
}
.header-menu.is-open .header-menu-overlay { opacity: 1; pointer-events: auto; }

/* پنل با translateX(۱۰۰٪ عرض خودش) کشویی می‌شود — این ۱۰۰٪ (۳۰۰px) از
   فاصله‌ی واقعی تا لبه‌ی چپ اپ‌شل بیشتر است، یعنی نقطه‌ی شروع بیرون از
   محدوده‌ی عرض سرویس می‌افتد. header-menu-clip دقیقاً همان left/width
   overlay را می‌گیرد و overflow:hidden دارد تا هر چیزی که موقع کشیده شدن
   از این محدوده بیرون بزند، قطع/نامرئی شود — پنل همیشه فقط از داخل خودِ
   محدوده‌ی سرویس دیده می‌شود، نه از بیرونش. */
.header-menu-clip {
    position: fixed; top: 0; bottom: 0;
    left: max(0px, calc(50% - 200px)); width: min(78vw, 300px);
    overflow: hidden; pointer-events: none; z-index: 70;
}
.header-menu-panel {
    display: flex; flex-direction: column;
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
    background: var(--paper-raised); box-shadow: 4px 0 28px rgba(31, 41, 55, .22);
    padding: 16px 14px; pointer-events: auto;
    transform: translateX(-100%);
    /* visibility با تأخیر عوض می‌شود تا وقتی منو بسته است، لینک‌های داخلش
       با کیبورد (Tab) قابل‌فوکوس نباشند — چون دیگر مثل details حالت
       display:none خودکار نداریم؛ delay=duration یعنی فقط بعد از تمام
       شدن انیمیشنِ بسته‌شدن مخفی می‌شود، ولی موقع باز شدن بی‌درنگ. */
    transition: transform .5s cubic-bezier(.4,0,.2,1), visibility 0s .5s;
    visibility: hidden;
}
.header-menu.is-open .header-menu-panel { transform: translateX(0); visibility: visible; transition: transform .5s cubic-bezier(.4,0,.2,1), visibility 0s; }
.header-menu-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.header-menu-panel-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.header-menu-close {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; background: none; border: none; color: var(--ink-soft); cursor: pointer;
}
.header-menu-close:hover { background: #F3F4F6; color: var(--ink); }
.header-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; padding: 11px 8px;
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--ink);
    text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit;
}
.header-menu-item:hover { background: #F3F4F6; }
.header-menu-item svg { flex-shrink: 0; color: var(--ink-soft); }
.header-menu-divider { height: 1px; background: var(--line); margin: 8px 4px; }

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 22px 28px;
}
.app-content h1, .app-content h2 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.45;
}
.lede { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }

/* محتوای سئویی زیر فرم صفحه‌ی اصلی — عمداً کوچک‌تر و کم‌رنگ‌تر از h1/فرم
   بالای صفحه، تا توجه از تعامل اصلی (چک کردن نتیجه) منحرف نشود؛ فقط برای
   ایندکس‌شدن گوگل است، نه یک بخش تبلیغاتی/CTA. */
.seo-content { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.app-content .seo-content h2 {
    display: flex; align-items: center; gap: 7px;
    font-size: 16px; font-weight: 700; color: var(--ink); margin: 44px 0 10px; line-height: 1.5;
}
.seo-content h2 svg { flex-shrink: 0; color: var(--brass-deep); }
.seo-content h2:first-child { margin-top: 0; }
.seo-content p, .seo-content li { font-size: 13px; color: var(--ink-soft); line-height: 1.9; }
.seo-content p { margin: 0 0 12px; }
.seo-content ol, .seo-content ul { margin: 0 0 12px; padding-inline-start: 20px; }
.seo-content li { margin-bottom: 6px; }

/* --- فهرست فشرده‌ی انواع آزمون (بخش سئوی صفحه‌ی اصلی) --- */
.exam-list {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised);
    overflow: hidden; margin-bottom: 12px;
}
.exam-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.exam-row:last-child { border-bottom: none; }
.exam-row-icon {
    width: 30px; height: 30px; border-radius: 50%; background: #EFF5FF;
    display: flex; align-items: center; justify-content: center; color: var(--action-blue); flex-shrink: 0;
}
.exam-row-text { min-width: 0; }
.exam-row-text h3 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 2px; line-height: 1.4; }
.exam-row-text p { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* --- ۳ گام مشاهده‌ی نتیجه (بخش سئوی صفحه‌ی اصلی) --- */
.step-flow { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 12px; }
.step-card {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); padding: 14px 15px;
}
.step-icon-circle { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.step-icon-1, .step-icon-2 { background: #EFF5FF; color: var(--action-blue); }
.step-icon-3 { background: #EAF7EF; color: var(--verdigris); }
.step-card h3 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.step-card p { font-size: 12px; margin: 0; line-height: 1.7; }
.step-arrow { display: flex; justify-content: center; padding: 4px 0; color: var(--ink-soft); }

/* --- نوار «آخرین به‌روزرسانی / وضعیت سرویس» — انتهای بخش سئوی صفحه‌ی اصلی --- */
.trust-bar {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised);
    padding: 12px 14px; margin-top: 20px; font-size: 11.5px; color: var(--ink-soft);
}
.trust-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trust-row strong { color: var(--ink); font-weight: 600; }
.trust-label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trust-label svg { flex-shrink: 0; color: var(--ink-soft); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-badge.is-available { color: var(--verdigris); }
.status-badge.is-unavailable { color: var(--rust); }

/* --- امتیاز ستاره‌ای انتهای صفحه‌ی اصلی --- */
.rating-widget {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised);
    padding: 16px 14px; margin-top: 12px;
}
.rating-widget-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.star-row { display: flex; gap: 4px; }
.star-btn {
    background: none; border: none; padding: 4px; cursor: pointer; color: var(--line);
    display: flex; transition: color .1s;
}
.star-btn:disabled { cursor: default; }
.star-btn.is-filled { color: var(--brass); }
.rating-summary { font-size: 11.5px; color: var(--ink-soft); }
.rating-summary strong { color: var(--ink); font-weight: 600; }
.rating-thanks { font-size: 12.5px; color: var(--verdigris); font-weight: 500; }

.note {
    font-size: 12px; color: var(--ink-soft); border: 1px solid var(--line); padding: 10px 12px;
    margin-bottom: 16px; background: var(--paper-raised); border-radius: var(--radius-sm); line-height: 1.7;
}
label { display: block; font-size: 12px; color: var(--ink-soft); margin: 14px 0 5px; font-weight: 500; }
input[type=text], input[type=tel], textarea {
    width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px;
    font-family: inherit; background: var(--paper-raised); color: var(--ink);
}
textarea { resize: vertical; min-height: 100px; }
input[type=text]:focus, input[type=tel]:focus, textarea:focus { outline: 2px solid var(--action-blue); outline-offset: 1px; border-color: var(--action-blue); }
input[readonly] { background: #F3F4F6; color: var(--ink-soft); }
.checkbox-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--ink-soft); }

.btn {
    display: inline-block; width: 100%; text-align: center; padding: 13px; margin-top: 18px;
    background: var(--action-blue); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14.5px; cursor: pointer;
    font-family: inherit; font-weight: 600; transition: background .15s; text-decoration: none;
}
.btn:hover { background: var(--action-blue-deep); }
.btn:disabled { background: #C1C5CC; cursor: not-allowed; }
.btn.secondary { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: #F3F4F6; }
/* دکمه‌ی «بررسی وضعیت» — اقدام رایگانِ استعلام، سبز و مجزا از رنگ آبیِ پرداخت. */
.btn.check { background: var(--action-green); }
.btn.check:hover { background: var(--action-green-deep); }
/* نسخه‌ی کوچک — برای دکمه‌ی داخل کارت‌های فهرستی (مثل «مشاهده» در تاریخچه)
   که نباید هم‌قد یک دکمه‌ی اصلی صفحه باشد. */
.btn.sm { padding: 9px; font-size: 13px; margin-top: 10px; }
/* دکمه با آیکون خطی کنار متن (مثل تاریخچه/خروج در صفحه‌ی اصلی). */
.btn-icon-label { display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-icon-label svg { flex-shrink: 0; }
/* آیکون‌های آماده معمولاً برای LTR طراحی شده‌اند (پیکان/فلش رو به راست) —
   این کلاس آینه‌ای‌اش می‌کند تا جهت برای خوانندهٔ RTL درست باشد. */
.icon-flip { transform: scaleX(-1); }

/* ردیف دکمه‌های کم‌رنگ زیر CTA اصلی — کارت سفید کوچک، کمتر از دکمه‌ی
   سبز اصلی جلب توجه می‌کند ولی محو/بی‌کادر هم نیست. */
.quiet-link-row { display: flex; gap: 6px; margin-top: 10px; }
.quiet-link {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px; border-radius: var(--radius-sm); background: var(--paper-raised); border: 1px solid var(--line);
    color: var(--ink-soft); font-size: 12.5px; font-weight: 500; font-family: inherit;
    text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.quiet-link:hover { background: #F3F4F6; color: var(--ink); }
.quiet-link svg { flex-shrink: 0; }

/* دکمه‌ی قفل‌شده (محدودیت یک‌ساعته) — رنگ همیشه خاکستری خنثی، صرف‌نظر از
   این‌که نسخه‌ی فعالش چه رنگی بود؛ توضیح با هاور (title) یا کلیک/تپ روی
   دکمه (locked-hint) نشان داده می‌شود، نه یک متن ثابت بالای آن. */
.btn.is-locked, .btn.is-locked:hover {
    /* cursor:pointer عمدی است — خودِ دکمه واقعاً disabled نیست (کلیک/تپ
       توضیح را نشان می‌دهد)، پس نشانه‌ی «ممنوع» گمراه‌کننده است. */
    background: repeating-linear-gradient(135deg, #F3F4F6, #F3F4F6 7px, #EAEBEE 7px, #EAEBEE 14px);
    color: var(--ink-soft); border: 1px dashed #C7CBD1; cursor: pointer;
}
.btn.is-locked svg { color: var(--ink-soft); opacity: .8; }
/* :not([hidden]) عمدی است — وگرنه display:flex اینجا خاصیت hidden بومی
   را (که مخفی‌بودنِ پیش‌فرض تا قبل از کلیک/تپ را تضمین می‌کند) بی‌اثر
   می‌کند، چون هر دو هم‌تخصیص‌اند و قانون author بر UA برنده می‌شود. */
.locked-hint:not([hidden]) {
    position: relative; display: flex; align-items: flex-start; gap: 7px;
    font-size: 11.5px; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--line);
    box-shadow: 0 6px 16px rgba(31, 41, 55, .08); border-radius: var(--radius-sm);
    padding: 9px 11px; margin-top: 8px; line-height: 1.6;
}
.locked-hint::before {
    content: ""; position: absolute; top: -5px; right: 22px; width: 9px; height: 9px;
    background: var(--paper-raised); border-right: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(-45deg);
}
.locked-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--brass-deep); }

/* نوار پایین چسبیده به صفحه — هم‌عرض دقیق app-shell (نه کل ویوپورت)، برای
   یک اقدام همیشه در دسترس مثل «بررسی جدید» در صفحه‌ی تاریخچه. */
.fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    background: var(--paper-raised);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(31, 41, 55, .08);
    z-index: 40;
}
.fixed-bottom-bar .btn { margin-top: 0; }

/* نسخه‌ی مخفی‌به‌طور‌پیش‌فرضِ همان نوار — با کلاس is-visible (جاوااسکریپت،
   IntersectionObserver) آشکار می‌شود. عمداً با display کنترل نمی‌شود (همان
   درسی که از انیمیشن منو گرفتیم: ترنزیشن روی display اصلاً کار نمی‌کند) —
   transform/opacity/visibility با تأخیر، هم واقعاً انیمیت می‌شود هم وقتی
   مخفی است از Tab کیبورد قابل‌فوکوس نیست. translateX(-50%) از قانون پایه
   برای وسط‌چین‌ماندن افقی باید در هر دو حالت تکرار شود (transform جایگزین
   می‌شود، جمع نمی‌شود). */
.subscribe-sticky-bar {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
}
.subscribe-sticky-bar.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s;
}

.center-text { text-align: center; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

.top-link-row { display: flex; justify-content: space-between; margin-bottom: 10px; }
.top-link { font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* دکمه‌ی برگشت زیر سربرگ — سمت چپ (flex-end در RTL)، برای صفحاتی که
   ورود مستقیم به یک فرم/جریان هستند، نه صفحه‌ی اصلی. */
.page-back-row { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.page-back {
    display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft);
    text-decoration: none; font-size: 12.5px; font-weight: 500;
}
.page-back:hover { color: var(--ink); }
.page-back svg { flex-shrink: 0; }
.link-button {
    background: none; border: none; padding: 0; margin: 0; font-family: inherit;
    font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-button:hover { color: var(--ink); }
.link-button:disabled { color: #aaa; text-decoration: none; cursor: default; }

.live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verdigris);
    flex-shrink: 0; animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 93, 69, .5); }
    70% { box-shadow: 0 0 0 6px rgba(47, 93, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 93, 69, 0); }
}

/* ردیف‌های نتیجه — جدول ساده با خط‌های افقی نازک، عدد/برچسب هم‌تراز. */
.result-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 13px; margin-top: 12px; font-size: 13px; background: var(--paper-raised); }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.result-row:last-child { border-bottom: none; }

/* کارت هر ردیفِ فهرست (مثل تاریخچه) — بر خلاف .result-box (جدول)، این
   یک کارت جمع‌وجور با حاشیه‌ی متناسب برای عنوان + برچسب + دکمه‌ی کوچک است. */
.list-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; margin-top: 12px; background: var(--paper-raised); }
.list-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }

/* کارت upsell «بررسی مستمر» — تینت آبیِ ملایم عمدی است تا از کارت‌های
   سفید و خنثی‌ی اطراف (result-box، list-card و...) مجزا دیده شود؛ آیکون
   زنگ بالا، عنوان، توضیح با آیکون پیامک، ردیف سه‌ستونیِ مزایا با
   جداکننده، دکمه‌ی سبز، و یک خط اطمینان‌بخشِ کوچک زیر دکمه. */
.upsell-card {
    border: 1px solid #CFE1FB; background: #EFF5FF; border-radius: var(--radius);
    padding: 20px 18px 18px; margin-top: 14px; text-align: center;
}
.upsell-card-icon {
    width: 46px; height: 46px; border-radius: 50%; background: var(--paper-raised);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
    color: var(--action-blue); box-shadow: 0 2px 6px rgba(28, 100, 242, .12);
}
.upsell-card-title {
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    color: var(--ink); margin: 0 0 8px; line-height: 1.5;
}
.upsell-card-desc {
    display: flex; align-items: flex-start; gap: 6px; text-align: right;
    font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; margin: 0 0 18px;
}
.upsell-card-desc svg { flex-shrink: 0; margin-top: 3px; color: var(--action-blue); }

.upsell-card-features { display: flex; align-items: stretch; margin-bottom: 18px; }
.upsell-feature {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px;
}
.upsell-feature:not(:last-child) { border-left: 1px solid #D7E6FB; }
.upsell-feature span { font-size: 11px; line-height: 1.5; }
.upsell-feature span:first-of-type { font-weight: 700; color: var(--ink); }
.upsell-feature span:last-of-type { color: var(--ink-soft); }

.upsell-card-footer {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 11.5px; font-weight: 500; color: var(--verdigris); margin-top: 12px;
}
.upsell-card-footer svg { flex-shrink: 0; }

/* فقط تیزر پرداخت‌نشده‌ی نتیجه‌ی بلورشده این کلاس را دارد (whiteCta در
   checks._subscribe-upsell) — دکمه‌ی سبز پررنگ به سفید/حاشیه‌ی سبز تبدیل
   می‌شود، در بقیه‌ی جاها دست‌نخورده می‌ماند. */
.btn.check.upsell-cta-white {
    background: #fff; color: var(--action-green); border: 1px solid var(--action-green);
}
.btn.check.upsell-cta-white:hover { background: #F7F8FA; }

/* بخش «توضیحات بیشتر» — details/summary مثل بقیه‌ی آکاردئون‌های اپ، ولی
   بسته‌ی پیش‌فرض؛ برای کاربری که می‌خواهد قبل از خرید دقیق‌تر بداند چه
   چیزی می‌گیرد، بدون این‌که کارت اصلی را شلوغ کند. */
.upsell-more { margin-top: 14px; border-top: 1px solid #D7E6FB; padding-top: 12px; text-align: center; }
.upsell-more > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--action-blue); user-select: none;
}
.upsell-more > summary::-webkit-details-marker { display: none; }
.upsell-more > summary::after { content: "\25BE"; font-size: 10px; transition: transform .15s; }
.upsell-more[open] > summary::after { transform: rotate(180deg); }
.upsell-more-content { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; text-align: right; }
.upsell-more-item { display: flex; align-items: flex-start; gap: 8px; }
.upsell-more-item svg { flex-shrink: 0; margin-top: 2px; color: var(--action-blue); }
.upsell-more-item strong { display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 3px; }
.upsell-more-item p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.8; }

.tag { font-size: 11px; padding: 3px 11px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
/* شبیه یک تگ واقعی رنگ‌شده به‌نظر می‌رسد اما بلور شده — کنجکاوی برای دیدن
   مقدار واقعی ایجاد می‌کند؛ خودِ متن هم واقعی نیست. */
.tag.blur-value { background: #E9EFFB; color: var(--ink); filter: blur(4px); user-select: none; }
.tag.ok { background: #E8F7EC; color: var(--verdigris); }
.tag.pending { background: #FEF3C7; color: var(--brass-deep); }
.tag.no { background: #FCE8E8; color: var(--rust); }

/* گروه هر حرفه — کارت جدا با عنوان بالا و جدول ردیف‌ها زیرش. */
.profession-group { position: relative; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; overflow: hidden; background: var(--paper-raised); }
.profession-group .profession-title {
    font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink);
    background: #F7F8FA; padding: 11px 13px; border-bottom: 1px solid var(--line);
}
.profession-group .result-box { border: none; margin-top: 0; }

/* دکمه‌ی دانلود کارت نتیجه — عمداً کوچک و کم‌رنگ در گوشه‌ی کارت، نه یک
   دکمه‌ی تمام‌عرض جلب‌توجه؛ این یک قابلیت فرعیِ کم‌استفاده است. یک برچسب
   متنی کوچک کنار آیکون اضافه شده تا فقط با آیکون قابل‌حدس‌زدن نباشد. */
.card-download-btn {
    position: absolute; bottom: 10px; left: 10px;
    height: 26px; border-radius: 13px; border: none; padding: 0 10px 0 8px;
    display: flex; align-items: center; gap: 4px;
    background: transparent; color: var(--ink); opacity: .75; cursor: pointer;
    font-size: 11px; text-decoration: none;
    transition: opacity .15s, background-color .15s;
}
.card-download-btn:hover, .card-download-btn:focus-visible { opacity: 1; background: var(--paper); }
.card-download-btn svg { flex-shrink: 0; }

/* راهنمای «قدم بعدی» — همان آیکون سوال، در گوشه‌ی مقابل دکمه‌ی دانلود، حالا
   با برچسب «راهنما» کنارش (مثل دکمه‌ی دانلود، فقط با آیکون قابل‌حدس‌زدن
   نبود). متن راهنما به‌جای popover شناور، در ادامه‌ی همین کارت (جریان عادی
   صفحه) باز/بسته می‌شود — profession-group به‌خاطر overflow:hidden
   (برای گردی گوشه‌ی عنوان)، هر شناوری که بخواهد از کادر بیرون بزند را
   می‌برد. */
.result-help-btn {
    position: absolute; bottom: 10px; right: 10px;
    height: 26px; border-radius: 13px; border: none; padding: 0 8px 0 10px;
    display: flex; align-items: center; gap: 4px;
    background: transparent; color: var(--ink-soft); opacity: .6; cursor: pointer;
    font-size: 11px; font-family: inherit;
    transition: opacity .15s, background-color .15s;
}
.result-help-btn svg { flex-shrink: 0; }
.result-help-btn:hover, .result-help-btn:focus-visible { opacity: 1; background: var(--paper); }
.result-help-btn.is-open { opacity: 1; background: var(--paper); }

.result-help-content {
    display: none;
    padding: 12px 14px 34px; font-size: 12px; line-height: 1.8; color: var(--ink-soft);
    background: #F7F8FA; border-top: 1px solid var(--line);
}
.result-help-content.is-open { display: block; }

/* نشان کوچک برند در سربرگ، و مُهر بزرگ برای لحظه‌ی اعلام نتیجه‌ی نهایی
   — رنگ بر اساس وضعیت عوض می‌شود. */
.seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--action-blue);
    color: #fff; flex-shrink: 0;
}
.seal-mark { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1; }

.verdict-seal {
    --vc: var(--verdigris);
    width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--vc);
    display: flex; align-items: center; justify-content: center; margin: 18px auto 6px;
    color: var(--vc); position: relative;
    background: radial-gradient(circle, rgba(255,255,255,.5), transparent 72%);
}
.verdict-seal::before {
    content: ""; position: absolute; inset: 7px; border: 1px solid var(--vc); border-radius: 50%;
}
.verdict-seal::after {
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    border: 1px dashed var(--vc); opacity: .4;
}
.verdict-seal.is-fail { --vc: var(--rust); }
.verdict-seal.is-pending { --vc: var(--brass); }
.verdict-glyph {
    font-family: var(--font-display); font-size: 15px; font-weight: 700; text-align: center;
    line-height: 1.35; padding: 0 6px;
}
.verdict-panel {
    text-align: center; padding: 2px 13px 18px; background: var(--paper-raised);
    border-top: 1px solid var(--line);
}
.verdict-label {
    font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; margin-top: 9px;
}

.warn-box { border: 1px solid #FCD34D; background: #FEF9E7; padding: 11px 12px; font-size: 12px; border-radius: var(--radius-sm); margin-top: 12px; line-height: 1.7; color: var(--brass-deep); }
.error-box { border: 1px solid #F5B5B5; background: #FDEDED; padding: 11px 12px; font-size: 12px; border-radius: var(--radius-sm); margin-top: 12px; color: var(--rust); line-height: 1.7; }
.small-muted { font-size: 11px; color: #9CA3AF; margin-top: 6px; }

.spinner {
    width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--brass); border-radius: 50%;
    margin: 40px auto 16px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.field-error { display: none; font-size: 12px; font-weight: 600; color: var(--rust); margin-top: 5px; line-height: 1.5; }
input.field-invalid { border-color: var(--rust); background: #FDEDED; }
input.field-invalid:focus { outline-color: var(--rust); }

/* فهرست تاریخچه — کارت‌های تاشو برای هر کد ملی. */
.history-group { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; overflow: hidden; background: var(--paper-raised); }
.history-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 13px;
    background: var(--paper-raised);
    font-size: 13px;
    user-select: none;
}
.history-group > summary::-webkit-details-marker { display: none; }
.history-group > summary::after {
    content: "\25B8";
    font-size: 10px;
    color: var(--ink-soft);
    transition: transform .15s;
    flex-shrink: 0;
}
.history-group[open] > summary::after { transform: rotate(90deg); }
.history-group > summary:hover { background: #F7F8FA; }
.history-group[open] > summary { border-bottom: 1px solid var(--line); }

.history-check-list { padding: 4px 13px; }
.history-check { border-top: 1px solid var(--line); }
.history-check:first-child { border-top: none; }
.history-check > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    font-size: 12px;
    color: var(--ink-soft);
    user-select: none;
}
.history-check > summary::-webkit-details-marker { display: none; }
.history-check > summary::after {
    content: "\25B8";
    font-size: 9px;
    color: #C7CBD1;
    transition: transform .15s;
    flex-shrink: 0;
}
.history-check[open] > summary::after { transform: rotate(90deg); }
.history-check > summary:hover { color: var(--ink); }
.history-check-content { padding: 2px 2px 16px; }

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .spinner { animation-duration: 2.4s; }
}