@charset "UTF-8";
/*!
 * فرم فروش پنل پیامک — تنها شیوه‌نامه عمومی.
 *
 * سه لایه DESIGN.md: توکن پایه روی `.spf-root` · توکن فرمی هر قالب با
 * `[data-spf-theme="…"]` · بازنویسی رنگ نماینده به شکل custom property
 * درون‌خطی روی همان `.spf-root` (اعلان درون‌خطی طبعاً مقدم است).
 *
 * ★ رنگ محور قالب نیست. ★ هر پنج قالب همین پالت را مصرف می‌کنند و فقط در
 * شعاع · چگالی · ارتفاع فیلد · تیمار ظرف · ارتفاع بصری · وزن تایپ ·
 * تیمار پیشرفت · تیمار بسته · تیمار نشان فرق دارند.
 *
 * 🔴 عایق‌بندی (PLUGIN-CONSTRAINTS §۴): هیچ انتخابگر عنصر برهنه‌ای نیست و
 * هر قاعده از `.spf-root` شروع می‌شود؛ هر خصوصیت ارث‌بردنی روی اجزای
 * خودمان صریح نوشته شده — **به‌جز یک استثنا**؛ و هیچ فراخوان شبکه‌ای نیست —
 * نه @import، نه فونت CDN، نه تصویر بیرونی. خصوصیات منطقی اجباری‌اند؛
 * left/right ممنوع.
 *
 * ══ کفِ وزن انتخابگر — چرا `.spf-root` سه بار تکرار شده ══════
 *
 * 🔴 «از `.spf-root` شروع می‌شود» عایق‌بندی **نیست**. `.spf-root .spf-btn`
 * وزن (۰،۱،۰)+کلاس = (۰،۲،۰) دارد و Twenty Twenty-One این را می‌نویسد:
 *
 *     button:not(:hover):not(:active):not(.has-background) { background-color: … }
 *
 * که (۰،۳،۱) است و می‌برد. اندازه‌گیری‌شده روی نصب واقعی: دکمه اصلی فرم
 * **سرمه‌ای قالب** (`#28303d`) رنگ می‌شد و رنگ برند نماینده
 * (`--spf-c-action`) هیچ‌جا دیده نمی‌شد — یعنی شاخص‌ترین شخصی‌سازی
 * نماینده، خاموش. ادعای «عایق از قالب» بالای همین فایل، آنجا دروغ بود.
 *
 * ⚠️ درمان: هر انتخابگر این فایل کلاسِ دامنه‌اش را **سه بار** تکرار
 * می‌کند — `.spf-root.spf-root.spf-root …` و برای پوسته پاپ‌آپ
 * `.spf-popup.spf-popup.spf-popup …`. کف حاصل (۰،۳،۰) برای خود ریشه و
 * (۰،۴،۰) برای هر فرزند است؛ یعنی دقیقاً یک پله بالاتر از سنگین‌ترین
 * قاعده‌ای که روی چهار قالب اندازه گرفته شد ((۰،۳،۱)، همان دکمه TT21).
 * عدد از اندازه‌گیری آمده و نه از سلیقه.
 *
 * ⚠️ **بهایش**، چون سه راه دیگر هم بود و هر سه رد شدند:
 *   · `!important` ممنوع است (§قیدها) و بازنویسی درون‌خطی نماینده را هم
 *     دست‌نیافتنی می‌کرد.
 *   · `@layer` جهتش **برعکس** است: CSS بی‌لایه قالب همیشه از CSS لایه‌دار
 *     ما قوی‌تر است، پس وضع را بدتر می‌کرد.
 *   · ریشه سایه (shadow root) کار می‌کرد ولی کل JS، دسترس‌پذیری، فرم و
 *     المنتور را از نو می‌خواست — هزینه‌ای به‌مراتب بزرگ‌تر از مسئله.
 *   · بهای همین راه: هر بازنویسی آینده — از جمله CSS دلخواه نماینده در
 *     قالب فرزند — باید به (۰،۴،۰) برسد، وگرنه بی‌اثر است. و فایل
 *     پرحرف‌تر شد: ۶۶٫۵ → ۷۶٫۶ کیلوبایت خام و ۱۶٫۰ → ۱۷٫۷ کیلوبایت
 *     فشرده. سقف `tools/check-asset-budget.php` هنوز سبز است
 *     (۳۶٫۹ از ۴۰٫۰) ولی جای خالی‌اش از ۴٫۹ به ۳٫۱ کیلوبایت رسید —
 *     بعدیِ همین اندازه، از سقف رد می‌شود.
 *
 * ⚠️ چیزی که کف **لمس نمی‌کند**: جدول توکن روی `.spf-root` برهنه مانده
 * (هیچ قالبی `--spf-*` اعلام نمی‌کند) و بازنویسی درون‌خطی نماینده
 * (`style="--spf-c-action:#…"`) از هر انتخابگری مقدم است و می‌ماند.
 *
 * 🔴 آن یک استثنا `font-family` است و یک **بازگشت عمدی** از تصمیم پیشین:
 * فرم از امروز قلم قالب میزبان را ارث می‌برد. چرایی کاملش، دامنه‌اش، و
 * چیزی که بابتش از دست رفت، بالای توکن `--spf-font` نوشته شده. اگر آمده‌اید
 * «درستش کنید»، اول آنجا را بخوانید.
 */

/* ── ۰. بازنشانی، محدود به دامنه افزونه. ────── */

/* ظرف بیرونی هر نمونه شورت‌کد — تنها قاعده‌ای که از `.spf-root` شروع
 * نمی‌شود، و نمی‌تواند: این عنصر **جدِ** `.spf-root` است.
 *
 * 🔴 چرا اصلاً هست: همین اعلان در بلوک CSS بحرانی
 * (`Shortcode::critical()`) نوشته شده و نبودنش اینجا یعنی دو نسخه‌ای که
 * یکی چیزی می‌گوید و دیگری سکوت می‌کند — همان واگرایی که
 * `tools/check-critical-css.php` جلویش را می‌گیرد. یافته همان بررسی،
 * در نخستین اجرایش. */
.spf-form-wrap.spf-form-wrap.spf-form-wrap {
	display: block;
}

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

/* ⚠️ «چیزی که اعلام نکرده‌ایم» هم یک نشتی است، و `max-width` بزرگ‌ترینش.
 *
 * Twenty Twenty-One این را دارد:
 *
 *     header *, main *, footer * { max-width: var(--global--spacing-measure) }
 *
 * وزنش (۰،۰،۲) است و روی **هر** فرزند فرم می‌افتد — با
 * `CSS.getMatchedStylesForNode` شمرده شد: ۵۷ عنصر.
 *
 * ⚠️ صادقانه: روی TT21 پیش‌فرض، `--global--spacing-measure` مقدار
 * `unset` دارد، پس اندازه‌گیریِ پیش و پس هیچ تفاوتی نشان نداد — این
 * قاعده یک **درمان نیست، یک نگهبان است**. کافی است قالب فرزندِ نماینده
 * یا `theme.json` همان یک متغیر را مقدار بدهد تا هر ۵۷ عنصر با هم بریده
 * شوند و هیچ اعلانی از ما جلویش نباشد.
 *
 * ⚠️ وزن این قاعده عمداً یک پله **زیر** کف است ((۰،۳،۰) در برابر
 * (۰،۴،۰))، پس هر جا خودمان `max-width` گفته‌ایم — برچسب شناور، ظرف
 * باریک گام یک، پنجره پاپ‌آپ — همان مقدار ما برنده می‌ماند و این فقط
 * حرف قالب را خاموش می‌کند. `.spf-logo` تا دیروز `max-width` نداشت و
 * آن را از `img` قالب قرض می‌گرفت؛ حالا صریح دارد. */
.spf-root.spf-root.spf-root *,
.spf-root.spf-root.spf-root *::before,
.spf-root.spf-root.spf-root *::after {
	max-width: none;
}

/* جدول توکن — عمداً روی `.spf-root` برهنه و بدون کفِ وزن.
 * هیچ قالبی `--spf-*` اعلام نمی‌کند، پس رقیبی نیست؛ و
 * `tools/check-critical-css.php` جدول متغیر را از همین انتخابگر
 * می‌خواند. */
.spf-root {
	/* ── لایه ۱ — رمپ Dominant (آبی) ────── */
	--spf-c-brand: #1b3f7a;
	--spf-c-surface-soft: #eaeff7;
	--spf-c-border-soft: #eaeff7;
	--spf-c-border-mid: #c1d0e8;

	/* اصلاح ۲ — بوردر ورودی در حالت rest.
	 * مقدار پنل: #98b0d9 (dominant300) → ۲٫۲۰:۱ در برابر سفید، زیر آستانه
	 * ۳:۱ معیار 1.4.11. مقدار اصلاح‌شده: #6e91c9 (dominant400) → ۳٫۲۰:۱.
	 * ⚠️ #98b0d9 فقط حق تزئین دارد و هرگز مرز یک کنترل نمی‌شود. */
	--spf-c-border: #6e91c9;
	--spf-c-border-decor: #98b0d9;

	--spf-c-action: #4571ba;
	--spf-c-action-hover: #365891;

	/* اصلاح ۱ — متن کم‌رنگ.
	 * مقدار پنل: #6e91c9 (dominant400) → ۳٫۲۰:۱، زیر ۴٫۵:۱.
	 * مقدار اصلاح‌شده: #4571ba (dominantPrimary) → ۴٫۸۶:۱ روی سفید.
	 * ⚠️ قاعده سطح: این رنگ **فقط** روی --spf-c-surface مجاز است؛ روی
	 * --spf-c-page به ۴٫۴۵:۱ و روی --spf-c-surface-soft به ۴٫۲۱:۱ می‌افتد و
	 * در هر دو حالت به --spf-c-ink ارتقا می‌یابد. */
	--spf-c-ink-muted: #4571ba;

	--spf-c-ink: #365891;
	--spf-c-ink-strong: #263f67;

	/* ── رمپ Complement (سبز) ────── */

	/* اصلاح ۵ — سبز مکمل.
	 * #10c282 با سفید ۲٫۳۲:۱ می‌دهد. تیره‌تر نشد؛ **غیرمتنی** شد.
	 * 🔴 هیچ متنی روی این رنگ و هیچ متنی با این رنگ مجاز نیست. فقط نقطه،
	 * خط و لهجه. */
	--spf-c-accent: #10c282;

	--spf-c-success-soft: #e2f8f0;

	/* اصلاح ۳ — موفقیت و پرداخت.
	 * مقدار پنل: #0c9765 (complement600) → ۳٫۷۳:۱ روی سفید، زیر ۴٫۵:۱.
	 * مقدار اصلاح‌شده: #096d49 (complement700) → ۶٫۳۷:۱ روی سفید و
	 * ۵٫۷۴:۱ روی --spf-c-success-soft. */
	--spf-c-success: #096d49;

	/* ── رمپ خطا ────── */
	--spf-c-danger: #b32817;          /* ۶٫۵۰:۱ روی سفید · ۵٫۶۰:۱ روی سطح خطا */
	--spf-c-danger-soft: #fdeae8;
	--spf-c-danger-border: #f7bcb6;   /* ۱٫۶۴:۱ — فقط تزئینی */

	/* ── هشدار ────── */

	/* اصلاح ۶ — متن هشدار.
	 * مقدار پنل: #D47200 → ۳٫۰۴:۱ روی #FFF2D1، زیر ۴٫۵:۱.
	 * مقدار اصلاح‌شده: #83620d (warning700) → ۵٫۰۸:۱ روی همان سطح.
	 * ⚠️ سطح و بوردر عمداً دست‌نخورده ماندند چون حامل متن نیستند —
	 * وفاداری جایی که امن است، اصلاح فقط جایی که متن رویش می‌نشیند. */
	--spf-c-warning: #83620d;
	--spf-c-warning-soft: #fff2d1;
	--spf-c-warning-border: #ffd66c;  /* ۱٫۳۹:۱ — فقط تزئینی */

	/* ── خنثی ────── */
	--spf-c-page: #f5f5f5;
	--spf-c-surface: #ffffff;

	/* اصلاح ۴ — متن خاکستری (متادیتا، واحد قیمت).
	 * مقدار پنل: #9b9b9b (gray500) → ۲٫۷۸:۱ روی سفید.
	 * مقدار اصلاح‌شده: #4d4d4d (dark30) → ۸٫۴۵:۱ روی سفید. */
	--spf-c-grey: #4d4d4d;

	/* اصلاح هفتم — حلقه focus.
	 * حلقه پنل `0 0 0 2px rgba(22,67,102,.32)` روی سفید ۱٫۸۰:۱ می‌دهد و
	 * 1.4.11 آستانه ۳:۱ می‌خواهد. جایگزین دولایه: داخلی سفید در برابر
	 * پرشدگی آبی ۴٫۸۶:۱ و بیرونی --spf-c-ink-strong در برابر سفید
	 * ۱۰٫۵۶:۱ / صفحه ۹٫۶۸:۱ / سطح ملایم ۹٫۱۴:۱ — روی هر زمینه‌ای.
	 * 🔴 خود حلقه از هیچ رنگ قابل شخصی‌سازی مشتق نمی‌شود — هر دو لایه‌اش
	 * قفل‌اند. ولی **طرف مقابلِ** هر لایه قابل شخصی‌سازی است: داخلی روی
	 * پرشدگی عنصر (`--spf-c-action`) و بیرونی روی سطح مجاور
	 * (`--spf-c-form-bg`). پس هر لایه توکن خودش را دارد تا محافظ سرور در
	 * حالت حدی وارونه‌شان کند و ۳:۱ معیار 1.4.11 برقرار بماند — همان
	 * چیزی که حلقه آلفادار پنل (۱٫۸۰:۱) ندارد. */
	--spf-c-focus-inner: var(--spf-c-surface);
	--spf-c-focus-outer: var(--spf-c-ink-strong);
	--spf-focus-ring: 0 0 0 2px var(--spf-c-focus-inner), 0 0 0 4px var(--spf-c-focus-outer);
	--spf-focus-ring-error: 0 0 0 2px var(--spf-c-focus-inner), 0 0 0 4px var(--spf-c-danger);
	--spf-focus-offset: 2px;

	/* ── لایه ۳ — شش نامی که پیشخوان به شکل `style="--spf-c-action:#…"`
	 * روی همین عنصر می‌نشاند: --spf-c-action · --spf-c-action-hover ·
	 * --spf-c-field-bg · --spf-c-accent · --spf-c-plan-selected-bg ·
	 * --spf-c-form-bg.
	 * 🔴 رنگ متن هرگز از نماینده نمی‌آید و کلمپ خوانایی در زمان رندر سمت
	 * سرور انجام می‌شود، نه اینجا. */
	--spf-c-field-bg: var(--spf-c-surface);
	--spf-c-plan-selected-bg: var(--spf-c-surface-soft);
	--spf-c-form-bg: var(--spf-c-surface);

	/* ── جفت پیش‌زمینه هر سطح قابل شخصی‌سازی ──────
	 * 🔴 سطحِ **قابل انتخاب** با متنِ **ثابت** یعنی مسیر بی‌محافظ: نماینده‌ای
	 * که #ffee00 را برای دکمه برمی‌دارد با متن سفیدِ سیم‌کشی‌شده به ۱٫۲:۱
	 * می‌رسد و محافظ کاری نمی‌تواند بکند، چون توکنی برای آن متن نیست.
	 * محافظ سرور (`src/Domain/Appearance/`) اثبات کرده برای هر رنگ ممکن،
	 * سیاه یا سفید دست‌کم ۴٫۵۸:۱ می‌دهد؛ پس رنگ نماینده هرگز رد یا جابه‌جا
	 * نمی‌شود و فقط جایی برای نشستن پیش‌زمینه محاسبه‌شده لازم است.
	 * ⚠️ هر پیش‌فرض عیناً همان توکن پیشین است، پس رندر پیش‌فرض عوض
	 * نمی‌شود. هیچ محاسبه کنتراستی در CSS یا JS نیست؛ مقدار محاسبه‌شده
	 * درون‌خطی از `FormRenderer::color_style()` می‌رسد. */
	--spf-c-on-action: var(--spf-c-surface);
	--spf-c-on-action-hover: var(--spf-c-surface);
	--spf-c-pill-bg: var(--spf-c-surface);
	--spf-c-on-pill: var(--spf-c-ink);
	--spf-c-on-field: var(--spf-c-ink-strong);
	--spf-c-on-field-muted: var(--spf-c-ink-muted);
	--spf-c-on-field-label: var(--spf-c-ink);
	--spf-c-on-plan-selected: var(--spf-c-ink-strong);
	--spf-c-on-plan-selected-muted: var(--spf-c-ink-muted);
	--spf-c-on-form: var(--spf-c-ink);
	--spf-c-on-form-muted: var(--spf-c-ink-muted);
	--spf-c-on-form-title: var(--spf-c-brand);
	--spf-c-on-form-meta: var(--spf-c-grey);
	--spf-c-on-hero: var(--spf-c-surface);
	--spf-c-on-hero-inverse: var(--spf-c-brand);

	/* ── تایپوگرافی ──────
	 *
	 * 🔴 **بازگشت عمدی از یک تصمیم پیشین — دست نزنید.**
	 *
	 * تا دیروز اینجا یک پشته قلم صریح نشسته بود («Yekan Bakh» و جانشین‌های
	 * سیستمی‌اش) و دلیلش هم درست بود: §۴ می‌گوید فرم از قالب میزبان عایق
	 * است، تا قالبِ یک نماینده نتواند فرم را بشکند. مالک محصول این تصمیم
	 * را **فقط برای خانواده قلم** برگرداند: «روی سایت کاربر، فونت را از
	 * قالب بردار، نه این فونت زشت».
	 *
	 * و استدلالش درست است: فرم خرید روی برگه **خودِ نماینده** می‌نشیند،
	 * بین محتوای خودش. قلمی که با بقیه آن برگه فرق دارد، فرم را شبیه یک
	 * ویجت چسبانده‌شده می‌کند — دقیقاً برعکس وعده وایت‌لیبل (FR-57).
	 *
	 * ⚠️ **دامنه بازگشت دقیقاً یک خصوصیت است.** اندازه، فاصله، ریتم، رنگ،
	 * چیدمان، وزن، `letter-spacing`، `text-transform` و `text-shadow`
	 * همگی صریح نوشته شده‌اند و عایق می‌مانند. این فایل هنوز هیچ انتخابگر
	 * عنصر برهنه‌ای ندارد و هنوز هر قاعده‌اش از `.spf-root` شروع می‌شود.
	 * اگر روزی چیز دیگری هم «ارث‌بردنی» شد، این بازگشت مجوزش نیست.
	 *
	 * ⚠️ **آنچه با این بازگشت از دست رفت** و باید بدانید: پشته قبلی یک
	 * جانشین فارسی تضمین‌شده داشت. `inherit` آن تضمین را ندارد — اگر قالب
	 * میزبان قلمی بدون پوشش فارسی بنشاند (مثلاً فقط `Inter`)، مرورگر
	 * حرف‌به‌حرف به قلم پیش‌فرض خودش برمی‌گردد. متن خوانا می‌ماند ولی چهره
	 * قلم، پیش‌فرض مرورگر است و نه انتخاب ما. این هزینه آگاهانه پذیرفته
	 * شد: قالبی که قلم فارسی ندارد، بقیه برگه‌اش هم همان‌طور است و فرم
	 * باید شبیه همان برگه باشد.
	 *
	 * ⚠️ متریک قلمِ میزبان ارتفاع خط و عرض دکمه را جابه‌جا می‌کند. `--spf-line`
	 * عمداً بی‌واحد است (پس از اندازه ما مشتق می‌شود و نه از قلم)، و
	 * کنترل‌های `nowrap` پایین همین فایل `min-width: 0` گرفته‌اند تا به جای
	 * سرریز، کوچک شوند.
	 *
	 * 🔴 قلم **پیشخوان** از این بازگشت مستثناست و IRANSans می‌ماند — دستور
	 * صریح مالک محصول. `assets/css/admin.css` دست نخورده است.
	 * ────── */
	--spf-font: inherit;
	--spf-fs-base: 13px;
	--spf-fs-floor: 12px;
	--spf-fs-label: 14px;
	/* 🔴 ۱۶px و نه کمتر — یک محدودیت پلتفرم است و نه یک انتخاب طراحی.
	 * سافاری موبایل هر ورودی‌ای را که در لحظه focus زیر ۱۶ پیکسل حساب شود
	 * با بزرگ‌نمایی صفحه جبران می‌کند: خریدار روی «شماره موبایل» می‌زند و
	 * کل برگه نماینده می‌پرد جلو و دیگر برنمی‌گردد. چهار قالب از پنج قالب
	 * اندازه فیلدشان را از همین توکن می‌گیرند، پس تا دیروز چهار قالب این
	 * پرش را داشتند. خانه کد تایید (`--spf-fs-otp`) همان روز ۱۶px گرفته
	 * بود؛ همان محدودیت، یک جا دیده شده بود و یک جا نه.
	 *
	 * ⚠️ راه‌حلِ `user-scalable=no` عمداً انتخاب **نشد**: آن، بزرگ‌نمایی را
	 * برای کل برگه میزبان می‌کشد و معیار 1.4.4 را می‌شکند. چگالی بصری
	 * به‌جایش از `line-height` فیلد جبران می‌شود (۱٫۶ → ۱٫۴)، پس جعبه سطر
	 * همان ۲۲ پیکسل پیشین می‌ماند و ارتفاع هیچ فیلدی عوض نمی‌شود. */
	--spf-fs-input: 16px;
	--spf-fs-helper: 13px;
	--spf-fs-error: 13px;
	--spf-fs-meta: 12px;
	--spf-fs-price: 16px;
	--spf-fs-otp: 16px;
	--spf-fs-cta: 16px;
	--spf-fs-btn: 12px;

	/* ── ریتم و فاصله ────── */
	--spf-s1: 4px;
	--spf-s2: 6px;
	--spf-s3: 8px;
	--spf-s4: 10px;
	--spf-s5: 12px;
	--spf-rhythm: 14px;
	--spf-s7: 16px;
	--spf-s8: 20px;
	--spf-container-max: 680px;
	--spf-column-max: 386px;
	--spf-touch: 44px;

	/* ── شعاع پایه ────── */
	--spf-r-chip: 4px;
	--spf-r-control: 6px;
	--spf-r-plan: 8px;
	--spf-r-pill: 50px;

	/* ── حرکت ────── */
	--spf-m-control: 300ms ease;
	--spf-m-button: .25s ease-in-out;
	--spf-m-progress: .25s ease-in-out;

	/* ══ لایه ۲ — پیش‌فرض قالب `panel` ══════ */
	--spf-line: 1.9;
	--spf-title-size: 19px;
	--spf-title-weight: 700;
	--spf-container-pad: var(--spf-s8);
	--spf-container-radius: 0;
	--spf-container-border-w: 0;
	--spf-container-border-c: transparent;
	--spf-container-shadow: none;
	--spf-field-h: 44px;
	--spf-field-radius: var(--spf-r-control);
	--spf-field-border-w: 1px;
	--spf-field-fs: var(--spf-fs-input);
	--spf-btn-h: 44px;
	--spf-btn-radius: var(--spf-r-control);
	--spf-plan-radius: var(--spf-r-plan);
	--spf-plan-min-h: 64px;
	--spf-plan-gap: var(--spf-s2);
	--spf-badge-radius: var(--spf-r-chip);
	--spf-progress-h: 5px;

}

/* پایه عنصر ریشه — جدا از جدول توکن بالا و **روی کفِ وزن**.
 *
 * 🔴 چرا دو قاعده و نه یکی: جدول توکن هیچ رقیبی ندارد (هیچ قالبی
 * `--spf-*` اعلام نمی‌کند) و باید روی `.spf-root` برهنه بماند، چون
 * `tools/check-critical-css.php` جدول متغیر را از همین انتخابگر
 * می‌خواند. ولی این اعلان‌ها — رنگ، اندازه، ریتم، چیدمان — همان‌هایی‌اند
 * که قالب میزبان هم درباره‌شان حرف می‌زند، پس باید بالای کف بنشینند.
 *
 * ⚠️ بازنویسی درون‌خطی نماینده از هر دو بالاتر است و می‌ماند: اعلان
 * `style="--spf-c-action:#…"` روی خودِ همین عنصر، از هر انتخابگری
 * مقدم است — کفِ وزن آن را لمس نمی‌کند. */
.spf-root.spf-root.spf-root {
	display: block;
	margin: 0 auto;
	padding: 0;
	border: 0;
	max-width: var(--spf-container-max);
	min-width: 0;
	background: none;
	color: var(--spf-c-ink);
	font-family: var(--spf-font);
	font-size: var(--spf-fs-base);
	font-weight: 400;
	font-style: normal;
	line-height: var(--spf-line);
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	text-shadow: none;
	direction: rtl;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* هیچ عنصری داخل فرم از قالب میزبان خصوصیت ارث نمی‌برد — جز خانواده قلم،
 * که از `.spf-root` می‌آید و `.spf-root` خودش آن را از قالب گرفته است.
 * `font-family: inherit` اینجا دقیقاً همان چیزی است که بود و عمداً عوض
 * نشد: زنجیره همان است، فقط سرچشمه‌اش عوض شده. */
.spf-root.spf-root.spf-root .spf-t,
.spf-root.spf-root.spf-root .spf-btn,
.spf-root.spf-root.spf-root .spf-cta,
.spf-root.spf-root.spf-root .spf-switch,
.spf-root.spf-root.spf-root .spf-plan,
.spf-root.spf-root.spf-root .spf-plans__legend,
.spf-root.spf-root.spf-root .spf-otp__legend,
.spf-root.spf-root.spf-root .spf-field__input,
.spf-root.spf-root.spf-root .spf-field__label,
.spf-root.spf-root.spf-root .spf-otp__box {
	font-family: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

/* ── ۱. ظرف فرم — یک <section> با aria-label که **هیچ عنصر h1..h6
 * تولید نمی‌کند**؛ ساختار سرفصل میزبان دست‌نخورده می‌ماند. ────── */

.spf-root.spf-root.spf-root .spf-shell {
	position: relative;
	display: block;
	margin: 0;
	padding: var(--spf-container-pad);
	border: var(--spf-container-border-w) solid var(--spf-container-border-c);
	border-radius: var(--spf-container-radius);
	background: var(--spf-c-form-bg);
	box-shadow: var(--spf-container-shadow);
}

.spf-root.spf-root.spf-root .spf-head {
	margin: 0 0 var(--spf-rhythm);
	padding: 0;
}

.spf-root.spf-root.spf-root .spf-logo {
	display: block;
	margin: 0 0 var(--spf-s5);
	max-width: 100%;                           /* تا دیروز از `img` قالب قرض گرفته می‌شد */
	max-height: 40px;
	width: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.spf-root.spf-root.spf-root .spf-t {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--spf-c-on-form-title);
	font-size: var(--spf-title-size);
	font-weight: var(--spf-title-weight);
	line-height: 1.7;
}

.spf-root.spf-root.spf-root .spf-lead {
	display: block;
	margin: var(--spf-s2) 0 0;
	padding: 0;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-base);
	font-weight: 400;
}

.spf-root.spf-root.spf-root .spf-foot {
	display: block;
	margin: var(--spf-rhythm) 0 0;
	padding: var(--spf-s5) 0 0;
	border-top: 1px solid var(--spf-c-border-soft);
	color: var(--spf-c-on-form-meta);
	font-size: var(--spf-fs-meta);
	text-align: center;
}

.spf-root.spf-root.spf-root .spf-noscript {
	display: block;
	margin: 0 0 var(--spf-s5);
	padding: var(--spf-s3) var(--spf-rhythm);
	border: 1px solid var(--spf-c-warning-border);
	border-radius: var(--spf-r-control);
	background: var(--spf-c-warning-soft);
	color: var(--spf-c-warning);       /* ۵٫۰۸:۱ روی سطح هشدار */
	font-size: var(--spf-fs-base);
	font-weight: 700;
}

/* گام یک تک‌فیلدی باریک‌تر است — همان نسبت صفحه ورود و صفحه خرید پنل.
 *
 * ⚠️ `:not([data-spf-step])` عمدی است و نه احتیاط: تا رسیدن نخستین پاسخ
 * REST هیچ گامی روی ریشه ننشسته، ولی نشانه‌گذاری کش‌شونده از قبل گام یک را
 * نشان می‌دهد. بدون این انتخابگر، ظرف یک بار عریض رنگ می‌شد و با رسیدن
 * پاسخ به ستون باریک می‌پرید — همان پرشی که CSS بحرانی برای نخستین
 * رنگ‌آمیزی برمی‌دارد. دو قاعده باید یکی بمانند. */
.spf-root.spf-root.spf-root:not([data-spf-step]) .spf-shell,
.spf-root.spf-root.spf-root[data-spf-step="mobile"] .spf-shell {
	max-width: var(--spf-column-max);
	margin-inline: auto;
}

/* ── ۲. نوار پیشرفت. 🔴 هیچ مقداری اینجا نیست؛ مقدار از REST می‌آید و
 * روی --spf-progress می‌نشیند. markup کش‌شونده فقط شکل را دارد. ────── */

.spf-root.spf-root.spf-root .spf-progress {
	display: block;
	margin: 0 0 var(--spf-rhythm);
}

.spf-root.spf-root.spf-root .spf-progress__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spf-s3);
	margin: 0 0 var(--spf-s2);
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-meta);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-progress__rail {
	display: block;
	overflow: hidden;
	height: var(--spf-progress-h);
	border: 1px solid var(--spf-c-border);   /* ریل/سطح ۳٫۲۰:۱ — مرز progressbar باید دیده شود */
	border-radius: var(--spf-r-control);
	background: var(--spf-c-surface-soft);
}

.spf-root.spf-root.spf-root .spf-progress__fill {
	display: block;
	width: var(--spf-progress, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--spf-c-action);          /* fill/ریل ۴٫۲۱:۱ */
	transition: width var(--spf-m-progress);
}

.spf-root.spf-root.spf-root .spf-progress__steps {
	display: none;
}

/* شماره گام فقط در قالبی دیده می‌شود که پیشرفتش دایره شماره‌دار است. */
.spf-root.spf-root.spf-root .spf-progress__seg-num {
	display: none;
}

/* ناحیه اقدام — در قالب «فشرده و کارا» چسبان می‌شود، در بقیه ساده. */
.spf-root.spf-root.spf-root .spf-actions {
	display: block;
	margin: var(--spf-s7) 0 0;
}

/* ── ۳. گام‌ها و ناحیه‌های زنده ────── */

.spf-root.spf-root.spf-root .spf-step {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.spf-root.spf-root.spf-root .spf-step[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.spf-root.spf-root.spf-root .spf-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--spf-s3);
	margin: 0 0 var(--spf-s5);
	padding: var(--spf-s3) var(--spf-rhythm);
	min-height: var(--spf-touch);
	border: 1px solid var(--spf-c-danger-border);
	border-radius: var(--spf-r-control);
	background: var(--spf-c-danger-soft);
	color: var(--spf-c-danger);               /* ۵٫۶۰:۱ روی سطح خطا */
	font-size: var(--spf-fs-base);
	font-weight: 700;
	line-height: 1.8;
}

.spf-root.spf-root.spf-root .spf-alert[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-alert[data-spf-tone="info"] {
	border-color: var(--spf-c-border-mid);
	background: var(--spf-c-surface-soft);
	color: var(--spf-c-ink);                  /* ۶٫۱۴:۱ روی سطح ملایم */
}

.spf-root.spf-root.spf-root .spf-alert[data-spf-tone="success"] {
	border-color: var(--spf-c-success);
	background: var(--spf-c-success-soft);
	color: var(--spf-c-success);              /* ۵٫۷۴:۱ روی سطح موفقیت */
}

.spf-root.spf-root.spf-root .spf-alert[data-spf-tone="warning"] {
	border-color: var(--spf-c-warning-border);
	background: var(--spf-c-warning-soft);
	color: var(--spf-c-warning);              /* ۵٫۰۸:۱ روی سطح هشدار */
}

.spf-root.spf-root.spf-root .spf-alert__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: currentColor;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

/* ── ۴. فیلد — outlined با لیبل نوچ. خطا با سه سیگنال که هیچ‌کدام رنگ
 * تنها نیست: متن صریح، آیکن، و ضخامت بوردر. ────── */

.spf-root.spf-root.spf-root .spf-fields {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.spf-root.spf-root.spf-root .spf-field {
	position: relative;
	display: block;
	margin: 0 0 var(--spf-s5);
	padding: 0;
}

.spf-root.spf-root.spf-root .spf-field__label {
	position: absolute;
	top: -8px;
	inset-inline-start: var(--spf-s5);
	z-index: 1;
	display: inline-block;
	margin: 0;
	padding: 0 var(--spf-s3);
	max-width: calc(100% - var(--spf-s8));
	overflow: hidden;
	background: var(--spf-c-field-bg);
	color: var(--spf-c-on-field-label);
	font-size: var(--spf-fs-label);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

.spf-root.spf-root.spf-root .spf-field__box {
	display: flex;
	align-items: center;
	gap: var(--spf-s2);
	padding-inline: var(--spf-s4);
	min-height: var(--spf-field-h);
	border: var(--spf-field-border-w) solid var(--spf-c-border);
	border-radius: var(--spf-field-radius);
	background: var(--spf-c-field-bg);
	cursor: text;
	transition: border-color var(--spf-m-control), box-shadow var(--spf-m-control);
}

.spf-root.spf-root.spf-root .spf-field__box:hover {
	border-color: var(--spf-c-action);
}

.spf-root.spf-root.spf-root .spf-field__input {
	flex: 1 1 auto;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	height: calc(var(--spf-field-h) - 4px);
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--spf-c-on-field);              /* ۱۰٫۵۶:۱ روی سفید */
	font-size: var(--spf-field-fs);
	font-weight: 400;
	/* ۱۶px × ۱٫۴ = همان ۲۲٫۴ پیکسلِ ۱۴px × ۱٫۶ — چگالی دست‌نخورده. */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.spf-root.spf-root.spf-root .spf-field__input::placeholder {
	color: var(--spf-c-on-field-muted);        /* ۴٫۸۶:۱ — فقط روی سطح فرم */
	opacity: 1;
	direction: rtl;
	text-align: start;
}

/* فیلد عددی مقدارش LTR است ولی راهنمای فارسی‌اش RTL می‌ماند. */
.spf-root.spf-root.spf-root .spf-field__input[dir="ltr"] {
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}

.spf-root.spf-root.spf-root .spf-field__affix {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--spf-c-on-field-label);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.spf-root.spf-root.spf-root .spf-field__box:focus-within {
	border-color: var(--spf-c-ink-strong);
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root .spf-field__help {
	display: block;
	margin: var(--spf-s3) 0 0;
	color: var(--spf-c-on-form-muted);         /* روی سطح فرم مجاز است */
	font-size: var(--spf-fs-helper);
	font-weight: 500;
	line-height: 1.9;
}

.spf-root.spf-root.spf-root .spf-field__err {
	display: flex;
	align-items: flex-start;
	gap: var(--spf-s1);
	margin: var(--spf-s1) 0 var(--spf-s3);
	color: var(--spf-c-danger);                /* ۶٫۵۰:۱ روی سفید */
	font-size: var(--spf-fs-error);
	font-weight: 500;
	line-height: 1.8;
}

.spf-root.spf-root.spf-root .spf-field__err[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-field__err-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* حالت خطا — بوردر ضخیم‌تر، لیبل و آیکن هم‌رنگ، به‌علاوه متن و آیکن خطا. */
.spf-root.spf-root.spf-root .spf-field[data-spf-invalid="1"] .spf-field__box {
	border-width: 1.5px;
	border-color: var(--spf-c-danger);
}

.spf-root.spf-root.spf-root .spf-field[data-spf-invalid="1"] .spf-field__label,
.spf-root.spf-root.spf-root .spf-field[data-spf-invalid="1"] .spf-field__affix {
	color: var(--spf-c-danger);
}

.spf-root.spf-root.spf-root .spf-field[data-spf-invalid="1"] .spf-field__box:focus-within {
	box-shadow: var(--spf-focus-ring-error);
}

/* ردیف دوستونی نام / نام خانوادگی — زیر ۴۲۰px تک‌ستونی. */
.spf-root.spf-root.spf-root .spf-grid2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spf-s2);
}

@media (min-width: 420px) {
	.spf-root.spf-root.spf-root .spf-grid2 {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── ۵. کد تایید: پنج خانه یک‌رقمی ────── */

.spf-root.spf-root.spf-root .spf-otp {
	display: block;
	margin: 0 0 var(--spf-s5);
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.spf-root.spf-root.spf-root .spf-otp__legend {
	display: block;
	margin: 0 0 var(--spf-s3);
	padding: 0;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-label);
	font-weight: 500;
	white-space: normal;                       /* `legend` قالب `nowrap` می‌گذارد */
}

.spf-root.spf-root.spf-root .spf-otp__caption {
	display: block;
	margin: 0 0 var(--spf-s4);
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-helper);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-otp__num {
	unicode-bidi: isolate;
	direction: ltr;
	display: inline-block;
}

/* ── خانه‌های کد تایید — و چرا `row-reverse` از اینجا برداشته شد ──────
 *
 * 🔴 این یک قاعده چیدمان نبود، یک نقص بود و نماینده گزارشش کرد:
 * «عددها را در ریاضی از چپ به راست وارد می‌کنیم. اگر نشانگر را در
 * خانه چپ بگذارم به خانه بعد نمی‌رود. اگر از راست شروع کند می‌رود، ولی
 * بعد عدد برعکس درمی‌آید.»
 *
 * ⚠️ هر دو نشانه یک علت داشتند. ظرف `direction: ltr` است (چون رقم
 * لاتین است)، و `row-reverse` روی یک ظرف LTR محور اصلی را راست‌به‌چپ
 * می‌کند — یعنی خانه **اولِ DOM** سمت راست می‌نشست و خانه پنجم سمت چپ.
 * پیش‌روی اسکریپت همیشه `index + 1` است، پس:
 *
 *   • نشانگر در خانه چپ = خانه پنجم = `index 4`؛ `index + 1` وجود ندارد،
 *     پس هیچ پیش‌روی‌ای رخ نمی‌داد.
 *   • نشانگر در خانه راست = `index 0`؛ پیش‌روی کار می‌کرد ولی رقم‌ها
 *     روی صفحه راست‌به‌چپ می‌نشستند — یعنی کدی که پیامک «۱۲۳۴۵» نشان
 *     داده بود، روی صفحه «۵۴۳۲۱» دیده می‌شد.
 *
 * 🔴 صفحه RTL است ولی **عدد RTL نیست**. ترتیب خانه‌ها ترتیب رقم‌هاست و
 * نه ترتیب متن فارسی. با برداشتن `row-reverse`، خانه اولِ DOM همان
 * خانه‌ای است که خریدار «اول» می‌بیند، پیش‌روی چپ‌به‌راست است، و
 * `otpValue()` که خانه‌ها را به ترتیب DOM می‌چسباند همان رشته‌ای را
 * می‌سازد که در پیامک نوشته شده.
 *
 * ⚠️ `otpForward()` در `form.js` جهت کلیدهای جهت‌نما را از **هندسه
 * واقعی** می‌خواند (`getBoundingClientRect`) و نه از یک فرض، پس با همین
 * یک تغییر خودش را تطبیق می‌دهد: از امروز ArrowRight یعنی «خانه بعد».
 *
 * ⚠️ `direction: ltr` می‌ماند و باید بماند: رقم‌ها لاتین‌اند و ظرف
 * نباید ترتیبشان را به قالب RTL بسپارد. ────────────────────────── */

.spf-root.spf-root.spf-root .spf-otp__boxes {
	display: flex;
	justify-content: center;
	gap: var(--spf-s3);
	direction: ltr;
}

.spf-root.spf-root.spf-root .spf-otp__box {
	flex: 0 1 55px;
	margin: 0;
	padding: 0;
	width: 55px;
	max-width: 20%;
	height: 55px;
	border: 1px solid var(--spf-c-border);
	border-radius: var(--spf-field-radius);
	outline: none;
	background: var(--spf-c-field-bg);
	color: var(--spf-c-on-field);
	font-size: var(--spf-fs-otp);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: center;
	direction: ltr;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--spf-m-control), box-shadow var(--spf-m-control);
}

.spf-root.spf-root.spf-root .spf-otp__box:hover {
	border-color: var(--spf-c-action);
}

.spf-root.spf-root.spf-root .spf-otp__box:focus-visible {
	border-color: var(--spf-c-ink-strong);
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root .spf-otp[data-spf-invalid="1"] .spf-otp__box {
	border-width: 1.5px;
	border-color: var(--spf-c-danger);
}

/* شمارنده و کنترل ارسال دوباره.
 * 🔴 پیش از سپری شدن مهلت هیچ کنترلی در صفحه نیست — فقط همین خط متنی.
 * پس از آن، JS یک <button> واقعی می‌نشاند؛ در هر پنج قالب یکسان. */
.spf-root.spf-root.spf-root .spf-resend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spf-s3);
	margin: var(--spf-s4) 0 0;
	min-height: var(--spf-touch);
}

.spf-root.spf-root.spf-root .spf-resend__note {
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-meta);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-resend__slot {
	display: flex;
	align-items: center;
}

.spf-root.spf-root.spf-root .spf-num {
	unicode-bidi: isolate;
	direction: ltr;
	display: inline-block;
}

/* ── ۶. دکمه و CTA دوبخشی. حالت loading از disabled جداست: در loading
 * پرشدگی و متن کامل می‌مانند و فقط یک نشانگر اضافه می‌شود. ────── */

.spf-root.spf-root.spf-root .spf-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spf-s2);
	margin: 0;
	padding: 0 var(--spf-rhythm);
	min-height: var(--spf-btn-h);
	border: 1px solid transparent;
	border-radius: var(--spf-btn-radius);
	background: transparent;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-btn);
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--spf-m-button), border-color var(--spf-m-button), color var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-btn:focus-visible {
	outline: none;
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root .spf-btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.spf-root.spf-root.spf-root .spf-btn[data-spf-busy="1"] {
	opacity: 1;
	cursor: progress;
}

.spf-root.spf-root.spf-root .spf-btn--primary {
	border-color: var(--spf-c-action);
	background: var(--spf-c-action);
	color: var(--spf-c-on-action);             /* ۴٫۸۶:۱ در پیش‌فرض */
}

.spf-root.spf-root.spf-root .spf-btn--primary:hover {
	border-color: var(--spf-c-action-hover);
	background: var(--spf-c-action-hover);
	color: var(--spf-c-on-action-hover);       /* ۷٫۰۹:۱ در پیش‌فرض */
}

.spf-root.spf-root.spf-root .spf-btn--submit {
	display: flex;
	width: 100%;
	min-height: max(var(--spf-btn-h), var(--spf-touch));
	font-size: var(--spf-fs-cta);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-btn--text {
	background: transparent;
	color: var(--spf-c-on-form);
	border-color: transparent;
	min-height: var(--spf-touch);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spf-root.spf-root.spf-root .spf-btn--text:hover {
	background: var(--spf-c-surface-soft);
}

.spf-root.spf-root.spf-root .spf-btn--text:focus-visible {
	outline: 2px solid var(--spf-c-ink-strong);
	outline-offset: var(--spf-focus-offset);
	box-shadow: none;
}

.spf-root.spf-root.spf-root .spf-btn__spin {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spf-spin .7s linear infinite;
}

.spf-root.spf-root.spf-root .spf-btn:not([data-spf-busy="1"]) .spf-btn__spin {
	display: none;
}

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

/* CTA دوبخشی — امضای بصری صفحه خرید پنل. */
.spf-root.spf-root.spf-root .spf-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spf-s3);
	margin: 0;
	padding: 2px;
	width: 100%;
	min-height: max(45px, var(--spf-touch));
	border: 1px solid var(--spf-c-action);
	border-radius: var(--spf-btn-radius);
	background: var(--spf-c-action);
	font-size: var(--spf-fs-base);
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--spf-m-button), border-color var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-cta:hover {
	border-color: var(--spf-c-action-hover);
	background: var(--spf-c-action-hover);
}

/* برچسب رنگ خودش را دارد، پس هاور باید صریح جفت هاور را بنشاند. */
.spf-root.spf-root.spf-root .spf-cta:hover .spf-cta__label {
	color: var(--spf-c-on-action-hover);
}

.spf-root.spf-root.spf-root .spf-cta:focus-visible {
	outline: none;
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root .spf-cta[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.spf-root.spf-root.spf-root .spf-cta[data-spf-busy="1"] {
	opacity: 1;
	cursor: progress;
}

/* ⚠️ `min-width: 0` روی هر دو نیمه CTA، و مستقیماً هزینه ارث بردن قلم:
 * پیل `nowrap` است و با قلمی پهن‌تر از انتخاب ما می‌توانست عرض ۱۰۰٪ دکمه
 * را بشکند. پیش‌فرض `min-width: auto` در فلکس‌باکس اجازه کوچک شدن نمی‌دهد؛
 * با صفر، به جای سرریز افقی روی برگه نماینده، دو نیمه کوچک می‌شوند. */
.spf-root.spf-root.spf-root .spf-cta__pill,
.spf-root.spf-root.spf-root .spf-cta__label {
	min-width: 0;
}

.spf-root.spf-root.spf-root .spf-cta__pill {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spf-s8);
	min-height: 39px;
	border-radius: var(--spf-r-chip);
	background: var(--spf-c-pill-bg);
	color: var(--spf-c-on-pill);               /* ۷٫۰۹:۱ روی پیل سفید */
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.spf-root.spf-root.spf-root .spf-cta__label {
	display: inline-flex;
	align-items: center;
	gap: var(--spf-s2);
	padding-inline: var(--spf-s4);
	color: var(--spf-c-on-action);             /* ۴٫۸۶:۱ روی پرشدگی */
	font-size: var(--spf-fs-cta);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-cta:not([data-spf-busy="1"]) .spf-btn__spin {
	display: none;
}

/* ── ۷. انتخاب بسته ────── */

.spf-root.spf-root.spf-root .spf-plans {
	display: block;
	margin: 0 0 var(--spf-s5);
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.spf-root.spf-root.spf-root .spf-plans__legend {
	display: block;
	margin: 0 0 var(--spf-s3);
	padding: 0;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-base);
	font-weight: 700;
	white-space: normal;                       /* `legend` قالب `nowrap` می‌گذارد */
}

.spf-root.spf-root.spf-root .spf-plans__list {
	display: flex;
	flex-direction: column;
	gap: var(--spf-plan-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.spf-root.spf-root.spf-root .spf-plan {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spf-s4);
	margin: 0;
	padding: var(--spf-s4) var(--spf-s5);
	min-height: max(var(--spf-plan-min-h), var(--spf-touch));
	border: 1px solid var(--spf-c-border-mid);
	border-radius: var(--spf-plan-radius);
	background: var(--spf-c-surface);
	font-size: var(--spf-fs-base);
	font-weight: 400;
	line-height: var(--spf-line);
	cursor: pointer;
	transition: border-color var(--spf-m-button), background-color var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-plan:hover {
	border-color: var(--spf-c-action);
}

.spf-root.spf-root.spf-root .spf-plan[hidden] {
	display: none;
}

/* رادیوی واقعی؛ از دید می‌رود ولی از ترتیب Tab بیرون نمی‌رود. */
.spf-root.spf-root.spf-root .spf-plan__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.spf-root.spf-root.spf-root .spf-plan__dot {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--spf-c-border);
	border-radius: 50%;
	background: var(--spf-c-surface);
}

.spf-root.spf-root.spf-root .spf-plan__info {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
}

.spf-root.spf-root.spf-root .spf-plan__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spf-s2);
	color: var(--spf-c-ink);
	font-size: var(--spf-fs-label);
	font-weight: 500;
	line-height: 1.6;
}

.spf-root.spf-root.spf-root .spf-plan__desc {
	display: block;
	color: var(--spf-c-ink-muted);
	font-size: var(--spf-fs-floor);
	font-weight: 400;
	line-height: 1.6;
}

.spf-root.spf-root.spf-root .spf-plan__price {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: var(--spf-s1);
	color: var(--spf-c-ink);
	font-size: var(--spf-fs-price);
	font-weight: 700;
	white-space: nowrap;
}

.spf-root.spf-root.spf-root .spf-plan__unit {
	color: var(--spf-c-grey);                  /* ۸٫۴۵:۱ */
	font-size: var(--spf-fs-meta);
	font-weight: 500;
}

/* نشان «محبوب‌ترین» — سطح ملایم موفقیت با متن تیره (۵٫۷۴:۱) و یک نقطه سبز
 * برند که هیچ متنی حمل نمی‌کند. متن سفید روی #10c282 ممنوع است (۲٫۳۲:۱). */
.spf-root.spf-root.spf-root .spf-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spf-s1);
	padding: 1px var(--spf-s3);
	border: 1px solid transparent;
	border-radius: var(--spf-badge-radius);
	background: var(--spf-c-success-soft);
	color: var(--spf-c-success);
	font-size: var(--spf-fs-floor);
	font-weight: 700;
	line-height: 1.7;
}

.spf-root.spf-root.spf-root .spf-badge__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--spf-c-accent);
}

/* حالت انتخاب‌شده */
.spf-root.spf-root.spf-root .spf-plan__radio:checked + .spf-plan__dot {
	border: 1.5px solid var(--spf-c-action);
	background:
		radial-gradient(circle at center, var(--spf-c-action) 0 4.5px, transparent 4.5px);
}

.spf-root.spf-root.spf-root .spf-plan:has(.spf-plan__radio:checked) {
	border-width: 1.5px;
	border-color: var(--spf-c-action);
	background: var(--spf-c-plan-selected-bg);
}

.spf-root.spf-root.spf-root .spf-plan:has(.spf-plan__radio:checked) .spf-plan__name {
	color: var(--spf-c-on-plan-selected);
	font-weight: 700;
}

.spf-root.spf-root.spf-root .spf-plan:has(.spf-plan__radio:checked) .spf-plan__desc {
	color: var(--spf-c-on-plan-selected-muted);
}

/* fallback برای مرورگرهای بدون :has() — JS همین صفت را می‌نشاند. */
.spf-root.spf-root.spf-root .spf-plan[data-spf-selected="1"] {
	border-width: 1.5px;
	border-color: var(--spf-c-action);
	background: var(--spf-c-plan-selected-bg);
}

.spf-root.spf-root.spf-root .spf-plan[data-spf-selected="1"] .spf-plan__name {
	color: var(--spf-c-on-plan-selected);
	font-weight: 700;
}

.spf-root.spf-root.spf-root .spf-plan[data-spf-selected="1"] .spf-plan__desc {
	color: var(--spf-c-on-plan-selected-muted);
}

.spf-root.spf-root.spf-root .spf-plan__radio:focus-visible + .spf-plan__dot {
	box-shadow: var(--spf-focus-ring);
}

/* حلقه focus روی کل ردیف، نه فقط روی رادیو. */
.spf-root.spf-root.spf-root .spf-plan:focus-within {
	box-shadow: var(--spf-focus-ring);
}

/* برجسته‌سازی بسته ارزان در لحظه قصد خروج — فقط تأکید بصری، بدون اعلام. */
.spf-root.spf-root.spf-root .spf-plan[data-spf-nudged="1"] {
	border-color: var(--spf-c-action);
	box-shadow: inset 0 0 0 1px var(--spf-c-action);
}

.spf-root.spf-root.spf-root .spf-plan__nudge {
	display: block;
	margin: var(--spf-s1) 0 0;
	color: var(--spf-c-ink);
	font-size: var(--spf-fs-floor);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-plan__nudge[hidden] {
	display: none;
}

/* کنترل «نمایش بیشتر» — FR-14، در هر پنج قالب. */
.spf-root.spf-root.spf-root .spf-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spf-s2);
	margin: var(--spf-s3) 0 0;
	padding: 0 var(--spf-rhythm);
	width: 100%;
	min-height: var(--spf-touch);
	border: 1px dashed var(--spf-c-border-mid);
	border-radius: var(--spf-r-control);
	background: transparent;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-btn);
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--spf-m-button), border-color var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-more:hover {
	border-color: var(--spf-c-action);
	background: var(--spf-c-surface-soft);
}

.spf-root.spf-root.spf-root .spf-more:focus-visible {
	outline: none;
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root .spf-more[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-more__icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── ۸. کلید شخص حقوقی (FR-12) ────── */

.spf-root.spf-root.spf-root .spf-switch {
	display: flex;
	align-items: center;
	gap: var(--spf-s3);
	margin: 0 0 var(--spf-s5);
	padding: 0;
	min-height: var(--spf-touch);
	border: 0;
	background: transparent;
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-base);
	font-weight: 500;
	line-height: var(--spf-line);
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.spf-root.spf-root.spf-root .spf-switch:focus-visible {
	outline: none;
	box-shadow: var(--spf-focus-ring);
	border-radius: var(--spf-r-control);
}

.spf-root.spf-root.spf-root .spf-switch__track {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: 44px;
	height: 24px;
	border-radius: var(--spf-r-pill);
	background: var(--spf-c-border-mid);
	transition: background-color var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-switch__knob {
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--spf-c-surface);
	transition: inset-inline-start var(--spf-m-button);
}

.spf-root.spf-root.spf-root .spf-switch[aria-checked="true"] .spf-switch__track {
	background: var(--spf-c-action);
}

/* دسته کلید یک شکل توپر روی پرشدگی اقدام است — همان جفت، آستانه ۳:۱. */
.spf-root.spf-root.spf-root .spf-switch[aria-checked="true"] .spf-switch__knob {
	inset-inline-start: 23px;
	background: var(--spf-c-on-action);
}

.spf-root.spf-root.spf-root .spf-switch-note {
	display: block;
	margin: calc(var(--spf-s5) * -1) 0 var(--spf-s5);
	padding: var(--spf-s3) var(--spf-rhythm);
	border: 1px solid var(--spf-c-border-mid);
	border-radius: var(--spf-r-control);
	background: var(--spf-c-surface-soft);
	color: var(--spf-c-ink);                   /* ۶٫۱۴:۱ روی سطح ملایم */
	font-size: var(--spf-fs-helper);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-switch-note[hidden] {
	display: none;
}

/* ── ۸ب. کد تخفیف — پشت کنترل افشا، در همان گام. ────── */

.spf-root.spf-root.spf-root .spf-discount__toggle {
	margin: 0 0 var(--spf-s3);
	padding-inline: 0;
}

.spf-root.spf-root.spf-root .spf-discount {
	display: flex;
	align-items: flex-start;
	gap: var(--spf-s3);
	margin: 0 0 var(--spf-s5);
}

.spf-root.spf-root.spf-root .spf-discount[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-discount .spf-field {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.spf-root.spf-root.spf-root .spf-discount__apply {
	flex: 0 0 auto;
	min-height: var(--spf-field-h);
}

/* زیر ۳۸۰px دکمه زیر فیلد می‌رود تا هیچ‌کدام از ۴۴px کوتاه‌تر نشوند. */
@media (max-width: 380px) {
	.spf-root.spf-root.spf-root .spf-discount {
		flex-direction: column;
	}

	.spf-root.spf-root.spf-root .spf-discount__apply {
		width: 100%;
	}
}

/* ── ۹. مرور سفارش (WCAG 3.3.4) — پیش از CTA، نه یک گام تازه. ────── */

.spf-root.spf-root.spf-root .spf-summary {
	display: block;
	margin: 0 0 var(--spf-s5);
	padding: var(--spf-s4) var(--spf-s5);
	border: 0;
	border-radius: var(--spf-r-plan);
	background: var(--spf-c-surface-soft);
	color: var(--spf-c-ink);                   /* ۶٫۱۴:۱ روی سطح ملایم */
	font-size: var(--spf-fs-base);
}

.spf-root.spf-root.spf-root .spf-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spf-s3);
	margin: 0 0 var(--spf-s2);
	/* ⚠️ ارث‌بری کافی نبود: ردیف خلاصه یک `<p>` است و `p { line-height }`
	 * قالب (۰،۰،۱) از ارث قوی‌تر است. اندازه‌گیری روی Twenty Twenty-One:
	 * ۲۲٫۱ پیکسل به جای ۲۴٫۷ پیکسلِ ریتم ما. */
	line-height: var(--spf-line);
}

/* 🔴 همراهِ `[hidden]`. بدون این قاعده، `display: flex` بالا از قاعده
 * `[hidden]` شیوه‌نامه مرورگر قوی‌تر است و ردیف تخفیفی که JS با همان صفت
 * پنهانش می‌کند دیده می‌ماند — یعنی هر خریداری که تخفیف ندارد
 * «تخفیف: ۰ تومان» می‌بیند. همان تله‌ای که هشت قاعده دیگر این فایل
 * جوابش را دارند. */
.spf-root.spf-root.spf-root .spf-summary__row[hidden] {
	display: none;
}

.spf-root.spf-root.spf-root .spf-summary__row:last-child {
	margin-bottom: 0;
}

.spf-root.spf-root.spf-root .spf-summary__key {
	color: var(--spf-c-ink);
	font-weight: 500;
}

.spf-root.spf-root.spf-root .spf-summary__val {
	color: var(--spf-c-ink-strong);            /* ۹٫۱۴:۱ روی سطح ملایم */
	font-weight: 700;
	text-align: end;
}

.spf-root.spf-root.spf-root .spf-summary__edit {
	min-height: 32px;
	padding-inline: var(--spf-s3);
	font-size: var(--spf-fs-meta);
}

/* ── ۱۰. نشانه‌های اعتماد (FR-25) — لایه ۱، حاضر در هر پنج قالب. ────── */

.spf-root.spf-root.spf-root .spf-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spf-s2) var(--spf-rhythm);
	margin: var(--spf-s4) 0 0;
	padding: 0;
	list-style: none;
}

.spf-root.spf-root.spf-root .spf-trust__item {
	display: inline-flex;
	align-items: center;
	gap: var(--spf-s1);
	color: var(--spf-c-on-form);
	font-size: var(--spf-fs-meta);
	font-weight: 500;
	line-height: 1.9;
}

.spf-root.spf-root.spf-root .spf-trust__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--spf-c-success);               /* ۶٫۳۷:۱ — غیرمتنی ولی همچنان تیره */
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.spf-root.spf-root.spf-root .spf-trust__note {
	display: block;
	margin: var(--spf-s3) 0 0;
	color: var(--spf-c-on-form-meta);
	font-size: var(--spf-fs-meta);
	font-weight: 500;
}

/* ── ۱۱. تله عسل (AD-13 لایه سوم)
 * 🔴 نه display:none و نه visibility:hidden — ربات‌ها هر دو را می‌شناسند.
 *
 * 🔴 جابه‌جایی **به بالا** و نه به کنار. نسخه قبلی
 * `inset-inline-start: -9999px` داشت، و چون `.spf-root` راست‌به‌چپ است
 * آن ویژگی به **راست فیزیکی** نگاشت می‌شد: تله ده هزار پیکسل بیرونِ لبه
 * راست می‌نشست و سرریزِ سمت راست، اسکرول می‌سازد. نتیجه اندازه‌گیری‌شده:
 * عرض صفحه خرید ۱۰٬۸۳۲ پیکسل در برابر پنجره ۱۲۸۰ — یعنی نوار اسکرول افقی
 * روی برگه نماینده، در هر سه عرض آزموده‌شده.
 *
 * سرریز به سمت **بالا** (و چپ در LTR) اصلاً ناحیه اسکرول نمی‌سازد؛
 * مرورگر بالاتر از مبدأ را قابل اسکرول نمی‌داند. پس تله همان‌قدر از چشم
 * پنهان و برای ربات همان‌قدر قابل دیدن می‌ماند، بدون آنکه صفحه را
 * بشکند.
 *
 * ⚠️ و این قاعده **دسترسی صفحه‌کلید را نمی‌بندد** — نمی‌تواند و لازم هم
 * نیست. جابه‌جایی فقط از چشم پنهان می‌کند؛ بیرون ماندن از ترتیب Tab کارِ
 * `tabindex="-1"` روی خودِ فیلد است و پنهان ماندن از صفحه‌خوان کارِ
 * `aria-hidden="true"` — هر دو در `FormRenderer::form()` نوشته شده‌اند و
 * هر دو در مرورگر اندازه‌گیری شده‌اند (بیست‌وپنج Tab پیاپی روی گام یک، تله
 * هرگز focus نگرفت). اگر روزی آن دو صفت از نشانه‌گذاری برداشته شوند،
 * هیچ چیزی در این فایل جایشان را نمی‌گیرد. */

.spf-root.spf-root.spf-root .spf-trap {
	position: absolute;
	top: -9999px;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ── ۱۲. پاپ‌آپ: همان markup داخل <dialog>؛ روی موبایل bottom-sheet. ── */

/* 🔴 همان شش بازنویسی رنگِ نماینده که روی `.spf-root` می‌نشیند، از امروز
 * روی همین ظرف هم می‌نشیند (`FormRenderer::popup()`): دکمه ماشه **بیرون**
 * از `.spf-root` است و تا دیروز هیچ توکنی به آن نمی‌رسید، پس نماینده‌ای که
 * رنگ برندش را تعیین کرده بود یک دکمه آبیِ کارخانه‌ای می‌گرفت که فرمی
 * درست‌رنگ باز می‌کرد. همان اشکالی که `font-family` داشت و یک بار حل شد.
 *
 * ⚠️ مقدار پشتیبان هر `var()` پایین، عیناً همان عددی است که تا دیروز
 * دست‌نویس بود؛ نماینده‌ای که رنگی تعیین نکرده، بایت‌به‌بایت همان دکمه
 * دیروز را می‌بیند. */
.spf-popup.spf-popup.spf-popup {
	/* ⚠️ حرکت شیت اینجا اعلام می‌شود و نه روی `.spf-root`: پنجره **جدِ**
	 * `.spf-root` است و متغیر سفارشی رو به بالا نمی‌رود. تا دیروز این توکن
	 * روی ریشه بود، هیچ‌جا خوانده نمی‌شد، و قاعده `prefers-reduced-motion`
	 * پایین حرکتی را خاموش می‌کرد که اصلاً نوشته نشده بود — یعنی شیت پایینی
	 * موبایل بی‌هیچ گذاری می‌پرید بالا. */
	--spf-m-sheet: 300ms ease;

	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	max-height: none;
	background: none;
	color: inherit;
}

/* 🔴 ماشه پاپ‌آپ تنها عنصر افزونه است که **بیرون از `.spf-root`** و
 * مستقیماً روی برگه قالب می‌نشیند — یعنی درست وسط تیررس قاعده‌هایی که
 * قالب‌ها برای «همه دکمه‌های سایت» می‌نویسند. روی Twenty Twenty-One آن
 * قاعده این است:
 *
 *     button:not(:hover):not(:active):not(.has-background) {
 *         background-color: var(--global--color-primary);
 *     }
 *
 * وزنش (۰،۳،۱) است. نتیجه اندازه‌گیری‌شده پیش از کفِ وزن: نماینده‌ای که
 * رنگ برندش را `#b5122e` گذاشته بود، دکمه **سرمه‌ای قالب** (`#28303d`)
 * می‌گرفت که فرمی درست‌رنگ باز می‌کرد.
 *
 * ⚠️ رنگ دیگر در قاعده جدا و با `:not()` دست‌نویس نیست: همان کفِ وزن
 * سراسری این فایل (`.spf-popup` سه‌بار → (۰،۴،۰) با فرزند) اینجا هم
 * برقرار است، پس رنگ می‌تواند کنار چیدمان در یک قاعده بنشیند. */
.spf-popup.spf-popup.spf-popup .spf-popup__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--spf-s8, 20px);
	min-height: 44px;
	border: 1px solid var(--spf-c-action, #4571ba);
	border-radius: 6px;
	background: var(--spf-c-action, #4571ba);
	color: var(--spf-c-on-action, #ffffff);
	/* ⚠️ این دکمه بیرون از `.spf-root` و مستقیماً روی برگه میزبان می‌نشیند،
	 * پس توکن‌های فرم به آن نمی‌رسند و قلمش تا دیروز اینجا دست‌نویس بود.
	 * با بازگشتِ خانواده قلم، آن رشته دست‌نویس یعنی دکمه‌ای که قلمش با
	 * فرمی که باز می‌کند فرق دارد. `inherit` هر دو را یکی نگه می‌دارد. */
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}


.spf-popup.spf-popup.spf-popup .spf-popup__trigger:hover,
.spf-popup.spf-popup.spf-popup .spf-popup__trigger:active {
	border-color: var(--spf-c-action-hover, #365891);
	background: var(--spf-c-action-hover, #365891);
	color: var(--spf-c-on-action-hover, #ffffff);
}

.spf-popup.spf-popup.spf-popup .spf-popup__trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #263f67;
}

.spf-popup.spf-popup.spf-popup .spf-dialog {
	margin: auto;
	padding: 0;
	width: min(550px, 100%);
	max-width: min(550px, 100%);
	max-height: 92dvh;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	color: inherit;
	overflow: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.spf-popup.spf-popup.spf-popup .spf-dialog::backdrop {
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(2px);
}

.spf-popup.spf-popup.spf-popup .spf-dialog__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 14px;
	min-height: 50px;
	border-bottom: 1px solid #eaeff7;
	background: #eaeff7;
}

/* ⚠️ همان مسئله ماشه و همان درمان: دکمه بستن هم یک `<button>` است و
 * قاعده «همه دکمه‌های سایت» قالب میزبان رویش هم می‌افتد. بدون کفِ وزن،
 * ضربدرِ بستن یک مربع سرمه‌ای قالب می‌شود روی نوار روشن پنجره. */
.spf-popup.spf-popup.spf-popup .spf-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #365891;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.spf-popup.spf-popup.spf-popup .spf-dialog__close:hover,
.spf-popup.spf-popup.spf-popup .spf-dialog__close:active {
	background: #ffffff;
	color: #263f67;
}

.spf-popup.spf-popup.spf-popup .spf-dialog__close:focus-visible {
	outline: 2px solid #263f67;
	outline-offset: 2px;
}

.spf-popup.spf-popup.spf-popup .spf-dialog__close-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

@media (max-width: 560px) {
	.spf-popup.spf-popup.spf-popup .spf-dialog {
		margin: auto auto 0;
		width: 100%;
		max-width: 100%;
		border-radius: 10px 10px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.spf-popup.spf-popup.spf-popup .spf-dialog[open] {
		animation: spf-sheet-in var(--spf-m-sheet, 300ms ease);
	}
}

/* شیت از لبه پایین بالا می‌آید — همان حرکتی که کاربر موبایل از یک
 * bottom-sheet انتظار دارد. هیچ اطلاعاتی حمل نمی‌کند، پس
 * `prefers-reduced-motion` پایین بی‌هیچ هزینه‌ای خاموشش می‌کند. */
@keyframes spf-sheet-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

/* ── لایه ۲ — قالب «قرص و نرم» ────── */

.spf-root.spf-root.spf-root[data-spf-theme="pill-soft"] {
	--spf-line: 2;
	--spf-title-size: 16px;
	--spf-container-pad: 24px 20px 22px;
	--spf-container-radius: 20px;
	--spf-container-border-w: 1px;
	--spf-container-border-c: var(--spf-c-border-soft);
	--spf-container-shadow: 0 5px 10px rgba(27, 63, 122, .06);
	--spf-field-h: 50px;
	--spf-field-radius: var(--spf-r-pill);
	--spf-btn-h: 52px;
	--spf-btn-radius: var(--spf-r-pill);
	--spf-plan-radius: var(--spf-r-pill);
	--spf-plan-gap: var(--spf-s4);
	--spf-badge-radius: var(--spf-r-pill);
}

/* لیبل بیرونی به‌جای نوچ، با نشانگر نقطه‌ای سبز — غیرمتنی. */
.spf-root.spf-root.spf-root[data-spf-theme="pill-soft"] .spf-field__label {
	position: static;
	display: flex;
	align-items: center;
	gap: var(--spf-s2);
	margin: 0 0 var(--spf-s2);
	padding: 0;
	max-width: none;
	background: transparent;
}

.spf-root.spf-root.spf-root[data-spf-theme="pill-soft"] .spf-field__label::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--spf-c-accent);
}

.spf-root.spf-root.spf-root[data-spf-theme="pill-soft"] .spf-field__box {
	padding-inline: var(--spf-s8);
}

.spf-root.spf-root.spf-root[data-spf-theme="pill-soft"] .spf-plan {
	padding-inline: var(--spf-s8);
}

/* ── لایه ۲ — «فشرده و کارا». ارتفاع فیلد و دکمه از ۴۴ بالاتر رفته و
 * ردیف بسته از ۴۲px به ≥۴۸px آمده (اصلاح A-22). ────── */

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] {
	--spf-line: 1.75;
	--spf-title-size: 16px;
	--spf-container-pad: 16px 18px;
	--spf-container-border-w: 1px;
	--spf-container-border-c: var(--spf-c-border-soft);
	--spf-container-radius: var(--spf-r-control);
	--spf-field-h: 46px;
	--spf-btn-h: 46px;
	--spf-plan-min-h: 48px;
	--spf-plan-radius: 0;
	--spf-plan-gap: 0;
	--spf-progress-h: 3px;
}

/* پیشرفت به شکل سه بخش مجزا — همان مقدار، شکل دیگر. */
.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-progress__rail {
	display: none;
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-progress__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spf-s1);
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-progress__seg {
	display: block;
	height: var(--spf-progress-h);
	border-radius: 2px;
	background: var(--spf-c-surface-soft);
	box-shadow: inset 0 0 0 1px var(--spf-c-border);
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-progress__seg[data-spf-on="1"] {
	background: var(--spf-c-action);
	box-shadow: none;
}

/* فهرست بسته با جداکننده به‌جای فاصله. */
.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-plans__list {
	border: 1px solid var(--spf-c-border-mid);
	border-radius: var(--spf-r-control);
	overflow: hidden;
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-plan {
	border-width: 0 0 1px;
	border-color: var(--spf-c-border-mid);
	border-radius: 0;
	padding-block: var(--spf-s5);
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-plan:last-of-type {
	border-bottom-width: 0;
}

/* نوار اقدام چسبان — ظرف اسکرول‌شونده به‌اندازه خودش padding می‌گیرد تا
 * فیلد تازه focus‌گرفته زیرش نرود. */
.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: 0 calc(var(--spf-s8) * -1) calc(var(--spf-s8) * -1);
	padding: var(--spf-s5) var(--spf-s8) calc(var(--spf-s5) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--spf-c-border-soft);
	background: var(--spf-c-form-bg);
	scroll-margin-bottom: 96px;
}

.spf-root.spf-root.spf-root[data-spf-theme="compact-fast"] .spf-shell {
	scroll-padding-bottom: 96px;
}

/* ── لایه ۲ — قالب «کارتی و مطمئن» ────── */

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] {
	--spf-line: 1.9;
	--spf-title-size: 16px;
	--spf-container-pad: 22px 18px 20px;
	--spf-container-radius: 20px;
	--spf-container-border-w: 0;
	--spf-container-shadow: 0 8px 12px rgba(27, 63, 122, .07);
	--spf-field-h: 50px;
	--spf-btn-h: 52px;
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero {
	display: block;
	margin: 0;
	padding: var(--spf-s8) var(--spf-s8) 60px;
	border-radius: 20px 20px 0 0;
	background: linear-gradient(to bottom, var(--spf-c-action), var(--spf-c-brand));
	color: var(--spf-c-on-hero);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-t,
.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-lead {
	color: var(--spf-c-on-hero);               /* ۴٫۸۶:۱ در بدترین نقطه گرادیان */
}

/* انحراف اعلام‌شده: ریل پیشرفت روی سربرگ تیره می‌نشیند، پس ریل روشن
 * می‌شود. این پیامد تیمار ظرف است، نه یک delta پالت. */
.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__row {
	color: var(--spf-c-on-hero);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__rail {
	border-color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .55);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__fill {
	background: var(--spf-c-on-hero);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__steps {
	display: flex;
	align-items: center;
	gap: var(--spf-s2);
	margin: 0 0 var(--spf-s2);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__seg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	color: var(--spf-c-on-hero);
	font-size: var(--spf-fs-floor);
	font-weight: 700;
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-hero .spf-progress__seg[data-spf-on="1"] {
	background: var(--spf-c-on-hero);
	color: var(--spf-c-on-hero-inverse);       /* ۱۰٫۳۰:۱ در پیش‌فرض */
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-progress__seg-num {
	display: inline;
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-shell {
	margin-top: -44px;
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-plans__list {
	padding: var(--spf-s3);
	border-radius: var(--spf-r-plan);
	background: var(--spf-c-surface-soft);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-badge {
	border-radius: var(--spf-r-pill);
}

/* بلوک گسترده مهرها — بسط بصری همان جزء trust-marks، نه جایگزین آن. */
.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-trust {
	gap: var(--spf-s3);
	padding: var(--spf-s4) var(--spf-s5);
	border: 1px solid var(--spf-c-border-soft);
	border-radius: var(--spf-r-plan);
	background: var(--spf-c-surface-soft);
}

.spf-root.spf-root.spf-root[data-spf-theme="card-trust"] .spf-trust__item {
	flex: 1 1 40%;
}

/* ── لایه ۲ — «حداقلی و بی‌وزن». فیلد زیرخطی؛ ارتفاع‌ها روی یک مقدار
 * ≥۴۴ یکسان (اصلاح A-22) و سطح فرم تا لبه (اصلاح A-24). ────── */

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] {
	--spf-line: 2;
	--spf-title-size: 19px;
	--spf-container-pad: 26px;
	--spf-container-radius: 0;
	--spf-container-border-w: 0;
	--spf-field-h: 48px;
	--spf-field-fs: 20px;
	--spf-field-radius: 0;
	--spf-btn-h: 52px;
	--spf-btn-radius: var(--spf-r-pill);
	--spf-plan-radius: 0;
	--spf-plan-min-h: 48px;
	--spf-plan-gap: 0;
	--spf-progress-h: 1px;
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-field__label {
	position: static;
	display: block;
	margin: 0 0 var(--spf-s1);
	padding: 0;
	max-width: none;
	background: transparent;
	font-size: var(--spf-fs-helper);
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-field__box {
	padding: 8px 0 13px;
	min-height: var(--spf-field-h);
	border-width: 0 0 1px;
	border-radius: 0;
	background: transparent;
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-field__box:focus-within {
	border-bottom-width: 2px;
	border-color: var(--spf-c-ink-strong);
	box-shadow: var(--spf-focus-ring);
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-field[data-spf-invalid="1"] .spf-field__box {
	border-width: 0 0 2px;
	border-color: var(--spf-c-danger);
}

/* نام، نام خانوادگی و کد ملی یک پله کوچک‌تر ولی همچنان بالای ۴۴px. */
.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-field[data-spf-size="s"] {
	--spf-field-h: 46px;
	--spf-field-fs: 16px;
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-progress__rail {
	border-width: 0 0 1px;
	border-radius: 0;
	background: var(--spf-c-border-mid);
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plans__list {
	border-top: 1px solid var(--spf-c-border-mid);
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan {
	border-width: 0 0 1px;
	border-color: var(--spf-c-border-mid);
	border-radius: 0;
	padding-inline: 0;
	background: transparent;
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan[data-spf-selected="1"],
.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan:has(.spf-plan__radio:checked) {
	border-width: 0 0 1px;
	background: transparent;
}

/* نشانگر انتخاب به شکل تیک، نه رادیوی پرشده. */
.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan__dot {
	width: 18px;
	height: 18px;
	border: 0;
	background: transparent;
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan[data-spf-selected="1"] .spf-plan__dot,
.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-plan:has(.spf-plan__radio:checked) .spf-plan__dot {
	background:
		linear-gradient(45deg, transparent 44%, var(--spf-c-action) 44% 56%, transparent 56%) no-repeat 3px 8px / 8px 2px,
		linear-gradient(-45deg, transparent 44%, var(--spf-c-action) 44% 56%, transparent 56%) no-repeat 7px 4px / 11px 2px;
}

/* نشان بدون سطح — فقط متن. */
.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-badge {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--spf-c-success);               /* ۶٫۳۷:۱ روی سفید */
}

.spf-root.spf-root.spf-root[data-spf-theme="minimal-weightless"] .spf-more {
	border-width: 0 0 1px;
	border-style: solid;
	border-radius: 0;
}

/* ── واکنش‌گرایی و ترجیحات کاربر ────── */

@media (max-width: 380px) {
	.spf-root.spf-root.spf-root .spf-otp__box {
		flex: 1 1 0;
		width: auto;
		height: 48px;
	}

	.spf-root.spf-root.spf-root .spf-cta {
		flex-direction: column;
		gap: var(--spf-s2);
		padding: var(--spf-s3);
	}

	.spf-root.spf-root.spf-root .spf-cta__pill {
		width: 100%;
		justify-content: center;
	}
}

/* هیچ اطلاعاتی فقط در حرکت منتقل نمی‌شود، پس خاموش کردن حرکت چیزی را
 * از دست نمی‌دهد. نوار پیشرفت مقدار نهایی را مستقیم می‌نشاند.
 *
 * 🔴 و این جمله تا دیروز **درست نبود**: نشانگر «در حال انجام» تنها
 * بازخورد دیداری دکمه بود و تمامش در چرخش بود. با `animation: none`
 * چیزی که می‌ماند یک حلقه ساکن بود — از یک کادر گرد تزئینی قابل
 * تشخیص نیست — به‌علاوه `cursor: progress` که روی گوشی اصلاً وجود
 * ندارد. یعنی خریداری که حرکت را کم کرده، برای «کد در حال فرستادن
 * است» هیچ نشانه‌ای نمی‌گرفت. پایین، همان عنصر به یک نشانگر **ایستا**
 * تبدیل می‌شود تا جمله بالا دوباره درست باشد. */
@media (prefers-reduced-motion: reduce) {
	.spf-root.spf-root.spf-root .spf-field__box,
	.spf-root.spf-root.spf-root .spf-otp__box,
	.spf-root.spf-root.spf-root .spf-btn,
	.spf-root.spf-root.spf-root .spf-cta,
	.spf-root.spf-root.spf-root .spf-plan,
	.spf-root.spf-root.spf-root .spf-more,
	.spf-root.spf-root.spf-root .spf-switch__track,
	.spf-root.spf-root.spf-root .spf-switch__knob,
	.spf-root.spf-root.spf-root .spf-progress__fill {
		transition: none;
	}

	/* سه نقطه ایستا به‌جای حلقه چرخان. هنوز فقط در حالت busy دیده می‌شود
	 * (قاعده `:not([data-spf-busy="1"])` بالا دست‌نخورده است)، هنوز
	 * `currentColor` است پس همان کنتراستی را دارد که برچسب دکمه دارد، و
	 * هیچ پیکسلی حرکت نمی‌کند. */
	.spf-root.spf-root.spf-root .spf-btn__spin {
		animation: none;
		width: 22px;
		height: 6px;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		background-repeat: no-repeat;
		background-image:
			radial-gradient(circle 3px at 3px 3px, currentColor 100%, transparent 100%),
			radial-gradient(circle 3px at 11px 3px, currentColor 100%, transparent 100%),
			radial-gradient(circle 3px at 19px 3px, currentColor 100%, transparent 100%);
	}

	/* ⚠️ `[open]` لازم است و نه تزئین: قاعده شیت پایین‌تر در همین فایل
	 * روی `.spf-dialog[open]` نوشته شده و یک انتخابگر برهنه از آن
	 * ویژگی کمتری دارد — یعنی بی این صفت، خاموشی اصلاً اعمال نمی‌شد. */
	.spf-popup.spf-popup.spf-popup .spf-dialog[open] {
		animation: none;
	}
}

/* حالت کنتراست بالا: مرزها ضخیم‌تر می‌شوند، رنگ‌ها دست‌نخورده می‌مانند. */
@media (forced-colors: active) {
	.spf-root.spf-root.spf-root .spf-field__box,
	.spf-root.spf-root.spf-root .spf-otp__box,
	.spf-root.spf-root.spf-root .spf-plan,
	.spf-root.spf-root.spf-root .spf-btn,
	.spf-root.spf-root.spf-root .spf-cta {
		border: 1px solid CanvasText;
	}

	.spf-root.spf-root.spf-root .spf-progress__fill {
		background: Highlight;
	}
}