/*
    استایل‌های مخصوص صفحات محصول (نتیجه/کارت ورود/گواهی مهارت، فرم‌ها،
    OTP، پرداخت، تاریخچه) — فقط روی این صفحات لود می‌شود، نه روی بخش مقالات
    (نگاه کنید به articles.css و شرط بارگذاری در layouts/app.blade.php).
    پایه‌ی مشترک بین همه‌ی صفحات (هدر/منو/دکمه/فرم پایه/رنگ‌ها) در app.css
    می‌ماند، چون هم اینجا هم مقالات به آن نیاز دارند.
*/

/* محتوای سئویی زیر فرم صفحه‌ی اصلی — عمداً کوچک‌تر و کم‌رنگ‌تر از 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); }

/* نسخه‌ی «وضعیت پیشرفت» همین step-flow — برای نشان‌دادن مرحله‌ی فعلی یک
   سفارش در جریان (مثلاً tvto-certificate/show.blade.php)، نه فقط توضیح
   ایستای «چطور کار می‌کند». done = تمام‌شده، active = مرحله‌ی فعلی
   (پالسِ آرام، هم‌الگوی live-dot)، upcoming = هنوز نرسیده. */
.step-icon-done { background: #EAF7EF; color: var(--verdigris); }
.step-icon-upcoming { background: #F3F4F6; color: #B0B5BD; }
.step-card.is-upcoming h3, .step-card.is-upcoming p { color: var(--ink-soft); }
.step-card.is-active { border-color: #FCD34D; background: #FFFDF7; }

/* آیکن مرحله‌ی «در حال انجام» — علاوه بر پالس پس‌زمینه، یک حلقه‌ی نازکِ
   در حال چرخش (هم‌الگوی .spinner) دورش می‌کشیم تا واقعاً حس «در حال
   پردازش» بدهد، نه فقط یک آیکن ثابتِ رنگی. */
.step-icon-active {
    position: relative; background: #FEF3C7; color: var(--brass-deep);
    animation: step-active-pulse 2.2s infinite;
}
.step-icon-active::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--brass-deep);
    animation: spin 1.3s linear infinite;
}
.step-active-badge {
    display: inline-flex; align-items: center; gap: 4px; margin-right: 6px;
    font-size: 10px; font-weight: 600; color: var(--brass-deep); background: #FEF3C7;
    border-radius: 20px; padding: 2px 8px; vertical-align: middle;
}
.step-active-badge::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass-deep);
    animation: live-pulse 1.6s infinite;
}
@keyframes step-active-pulse {
    0% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .25); }
    70% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
}

/* --- نوار «آخرین به‌روزرسانی / وضعیت سرویس» — انتهای بخش سئوی صفحه‌ی اصلی --- */
.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); }

.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;
}
.checkbox-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--ink-soft); }

/* چک‌باکس «هم‌زمان بررسی مستمر رو هم فعال کن» زیر دکمه‌ی پرداخت تکی. */
.continuous-monitoring-offer {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px;
    background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: var(--radius-sm);
    font-size: 12px; line-height: 1.7; color: var(--ink-soft); cursor: pointer;
}
.continuous-monitoring-offer input[type=checkbox] {
    margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--action-blue); cursor: pointer;
}

/* ردیف دکمه‌های کم‌رنگ زیر 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;
}

.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; }

/* ردیف جمع‌وجورِ قابل‌کلیک — برای «قبلاً برای این حرفه پول داده‌اید»ی
   tvto-certificate/show.blade.php: یک لینک تک‌خطی به یک آیتم/Certificate
   دیگر، نه یک list-card کامل با چند خط اطلاعات. */
.quick-nav-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised);
    padding: 10px 12px; margin-top: 8px; font-size: 13px; color: var(--ink); text-decoration: none;
    transition: background .15s, border-color .15s;
}
.quick-nav-row:hover { background: #F9FAFB; border-color: #D1D5DB; }
.quick-nav-row-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.quick-nav-row-label span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-nav-row-arrow { color: var(--ink-soft); flex-shrink: 0; }

/* یادآوری کوچک بالای دکمه‌ی «بررسی مجدد» رایگان (وضعیت NOT_YET_REGISTERED) —
   عمداً هم‌رنگ (تینت آبی) با upsell-card زیرش است تا کاربر بفهمد این دو به
   هم مرتبط‌اند، ولی خودش جمع‌وجور و بدون دکمه‌ی توپر است (لینک ساده‌ی
   زیرخط‌دار) تا با دکمه‌ی اصلی «بررسی مجدد» درست پایینش رقابت بصری نکند. */
.notify-nudge {
    display: flex; gap: 10px; align-items: flex-start; text-align: right;
    border: 1px solid #CFE1FB; background: #EFF5FF; border-radius: var(--radius-sm);
    padding: 12px 14px; margin-top: 14px; font-size: 13px; line-height: 1.7;
}
.notify-nudge svg { flex-shrink: 0; margin-top: 2px; color: var(--action-blue); }
.notify-nudge-text { color: var(--ink); }
.notify-nudge a {
    display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--action-blue); text-decoration: none; border-bottom: 1px solid var(--action-blue);
}
.notify-nudge a:hover { color: var(--action-blue-deep); border-color: var(--action-blue-deep); }

/* کارت 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); }
.tag.info { background: #EFF5FF; color: var(--action-blue); }

/* گروه هر حرفه — کارت جدا با عنوان بالا و جدول ردیف‌ها زیرش. */
.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; }

.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); }

/* پاپ‌آپ تأییدیه‌ی «متوجه‌ام روند طولانیه» (tvto-certificate/show.blade.php)
   — <dialog> بومی مرورگر، فقط استایل‌دهی شده تا با بقیه‌ی سایت یک‌دست
   باشد؛ نه confirm() خام مرورگر. */
.confirm-dialog {
    border: none; border-radius: var(--radius); padding: 22px 20px;
    max-width: 320px; width: calc(100% - 48px);
    background: var(--paper-raised); color: var(--ink); font-family: inherit;
    direction: rtl; text-align: right;
    box-shadow: 0 16px 44px rgba(31, 41, 55, .22);
}
.confirm-dialog::backdrop { background: rgba(31, 41, 55, .45); }
.confirm-dialog h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.confirm-dialog p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; margin: 0 0 4px; }
.confirm-dialog .btn { margin-top: 16px; }

.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; }
    .step-icon-active, .step-icon-active::before, .step-active-badge::before { animation: none; }
}