/**
 * صفحه‌های معرفی «رادار آگهی» و «دیده‌بان قیمت».
 *
 * توکن‌ها همان طیف فیروزه‌ای بقیه بخش‌های عمومی‌اند (fap-alerts.css و
 * fap-zero-prices.css) تا این دو صفحه وصله نباشند. همه چیز زیر `.fap-alp`
 * محدود است.
 *
 * ⚠️ دو گارد پروداکشنی که این فایل عمدا رعایت می‌کند:
 *
 *   ۱) هر `var()` که داخل یک shorthand (مثل `border`) بنشیند **fallback**
 *      دارد. روی پروداکشن یک قانون سراسری توکن‌های عمومی را `initial`
 *      می‌کند و `border:1px solid var(--x)` بدون fallback کل بردر را ناپدید
 *      می‌کند، نه اینکه بی‌رنگش کند.
 *
 *   ۲) رنگ لینک‌ها با سلکتور دوکلاسه نوشته می‌شود. قانون `.elementor-kit-N a`
 *      قالب، هر قانون تک‌کلاسه‌ای را می‌بازد و نشانه‌اش این است که «رنگ روی
 *      لوکال درست است و روی سایت نه».
 */

.fap-alp {
    --alp-teal: var(--fap-brand-500, #1aa29a);
    --alp-teal-600: var(--fap-brand-600, #0d8276);
    --alp-teal-050: var(--fap-brand-50, #eef8f6);
    --alp-teal-100: var(--fap-brand-200, #c6e9e4);

    --alp-ink: var(--fap-c-ink, #13292d);
    --alp-ink2: var(--fap-c-text, #34494d);
    --alp-muted: var(--fap-c-muted, #5c7175);
    --alp-line: var(--fap-c-line, #e0e8e9);
    --alp-card: #fff;
    --alp-soft: var(--fap-c-bg, #f3f7f7);

    --alp-up: var(--fap-c-error, #c81e1e);
    --alp-up-bg: var(--fap-c-error-soft, #fef4f3);
    --alp-down: var(--fap-c-success, #15803d);
    --alp-down-bg: var(--fap-brand-100, #e3f4f1);

    --alp-r-lg: var(--fap-r-xl, 20px);
    --alp-r-md: var(--fap-r-md, 12px);

    --alp-shadow-s: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    --alp-shadow-m: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));

    /* پس‌زمینه عمدا تعریف نمی‌شود؛ از تنظیمات سراسری قالب ارث می‌رسد —
       همان قاعده .fap-zp، وگرنه زیر هدر یک درز رنگی دیده می‌شود. */
    color: var(--alp-ink);
    direction: rtl;
    font-size: var(--fap-fs-lg, 16px);
    line-height: 1.9;
    padding-bottom: 8px;
}

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

.fap-alp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/*
 * خنثی‌سازی ریست قالب.
 *
 * hello-elementor دکمه‌ها را در هاور صورتی می‌کند و بعضی قالب‌ها روی h1..h4
 * مارجین می‌گذارند. هر دو اینجا خنثی می‌شوند تا صفحه روی هر قالبی یک شکل
 * بماند.
 *
 * ⚠️ کلاس عمدا دوبار آمده (`.fap-alp.fap-alp`).
 *
 * روی پروداکشن کیت المنتور قاعده‌ی `.elementor-kit-N h2` را دارد که اختصاصیتش
 * ۰٫۱٫۱ است — یعنی با `.fap-alp h2` **برابر** می‌شود و در تساوی، فایلی که
 * دیرتر بارگذاری شده می‌برد. نتیجه‌اش همان چیزی بود که کاربر گزارش کرد:
 * تیترها روی سایت واقعی درشت و نازک، و روی لوکالِ بدون قالب کاملا سالم. تکرار
 * کلاس بدون تغییر ساختار HTML اختصاصیت را به ۰٫۲٫۱ می‌برد.
 *
 * به همین دلیل تیترهای هر بخش هم `.fap-alp` جلو دارند (`.fap-alp
 * .fap-alp-step h3`). با یک آزمون بصری ساده دیده نمی‌شود؛ پیش‌نما را با
 * ‏`--theme` بگیر تا همان فشار قالب شبیه‌سازی شود.
 */
.fap-alp.fap-alp h1,
.fap-alp.fap-alp h2,
.fap-alp.fap-alp h3,
.fap-alp.fap-alp h4 {
    margin: 0;
    line-height: 1.55;
    color: var(--alp-ink);
    letter-spacing: -.01em;
}

/*
 * 🐞 این ریست نباید وارد فرم مشترک اشتراک‌ها شود.
 *
 * فرم `[fap_ad_radar]` / `[fap_price_watch]` داخل همین صفحه رندر می‌شود، پس
 * `.fap-alp p` (وزن ۰٬۱٬۱) روی پاراگراف‌های آن هم می‌نشست و از قانون‌های
 * خودش مثل `.fap-al-msg` (وزن ۰٬۱٬۰) قوی‌تر بود. نتیجه: پیام «دیده‌بان فعال
 * شد» و یادداشت‌های زیر فیلدها مارجینشان صفر می‌شد و به دکمه‌ها می‌چسبید —
 * فقط روی این دو صفحه، چون فقط اینجا فرم داخل `.fap-alp` است.
 *
 * `:not()` جلوی تطبیق را می‌گیرد؛ بالابردن وزن قانون‌های خود فرم، هر بار که
 * پاراگراف تازه‌ای اضافه شود دوباره همین باگ را برمی‌گرداند.
 */
.fap-alp p:not(.fap-al p) {
    margin: 0;
}

.fap-alp button:hover,
.fap-alp button:focus {
    background-color: inherit;
    color: inherit;
}

.fap-alp :focus-visible {
    outline: 2px solid var(--alp-teal, var(--fap-brand-500, #1aa29a));
    outline-offset: 3px;
    border-radius: var(--fap-r-sm, 10px);
}

/* ============================================================ سربرگ صفحه */

.fap-alp-crumb {
    font-size: var(--fap-fs-sm, 13px);
    color: var(--alp-muted);
    padding: 18px 0 0;
}

.fap-alp .fap-alp-crumb a {
    color: var(--alp-muted);
    text-decoration: none;
}

.fap-alp .fap-alp-crumb a:hover {
    color: var(--alp-teal-600);
}

/* =================================================================== هیرو */

.fap-alp-hero {
    padding: 18px 0 0;
}

.fap-alp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center;
}

.fap-alp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--alp-teal-050);
    color: var(--alp-teal-600);
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--fap-r-pill, 999px);
}

.fap-alp-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    animation: fap-alp-blip 2.4s infinite;
}

@keyframes fap-alp-blip {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 168, 153, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(26, 168, 153, 0); }
}

.fap-alp .fap-alp-h1 {
    font-size: clamp(27px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.42;
    margin: 16px 0 0;
}

/*
 * هایلایت پشت کلمه کلیدی.
 *
 * ⚠️ عمدا از `z-index:-1` استفاده نمی‌شود: روی قالب‌هایی که hero را در یک
 * stacking context با پس‌زمینه می‌گذارند، نوار زیر پس‌زمینه می‌رود و ناپدید
 * می‌شود. اینجا نوار یک لایه با شفافیت است که پشت متن نمی‌رود.
 */
.fap-alp-h1 .hl {
    color: var(--alp-teal-600);
    background: linear-gradient(to top, var(--alp-teal-100) 0, var(--alp-teal-100) 34%, transparent 34%);
    border-radius: var(--fap-r-xs, 6px);
    padding: 0 3px;
    white-space: nowrap;
}

.fap-alp-lede {
    margin-top: 15px;
    font-size: var(--fap-fs-lg, 16px);
    color: var(--alp-ink2);
    max-width: 48ch;
}

.fap-alp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.fap-alp-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--alp-card);
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--fap-r-pill, 999px);
    padding: 7px 14px;
    font-size: var(--fap-fs-md, 14px);
    color: var(--alp-ink2);
    font-weight: 500;
}

.fap-alp-fact svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--alp-teal);
}

/* ====================================================== امضای صفحه رادار */

/*
 * ارتفاع ظرف کمی از قطر دایره بیشتر است، نه خیلی بیشتر.
 *
 * min-height قبلی ۴۳۰ بود در حالی که دایره ۳۵۰ می‌شد؛ هشتاد پیکسل فضای خالی
 * که ستون متن (حدود ۲۹۰ پیکسل) را وسط یک ستون بلند و تهی می‌نشاند. حالا دایره
 * بزرگ‌تر است و حاشیه فقط به‌اندازه بیرون‌زدگی چیپ «در حال رصد» و کارت
 * شناور — که چون absolute هستند در چیدمان جا نمی‌گیرند.
 */
.fap-alp-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 404px;
}

/*
 * ظرف هم‌اندازه دایره.
 *
 * چیپ «در حال رصد» و کارت پیامک نسبت به همین ظرف جا می‌گیرند، نه نسبت به
 * کل ستون هیرو. بدون آن، روی نمایشگر پهن کارت به لبه ستون می‌چسبید و
 * ده‌ها پیکسل از دایره فاصله می‌گرفت — و روی عرض کم، وسط دایره می‌افتاد.
 */
.fap-alp-radarbox {
    position: relative;
    width: min(384px, 80vw);
}

/*
 * 🐞 `overflow:hidden` اینجا تزیینی نیست، رفع سرریز افقی است.
 *
 * جاروی رادار یک مربع است که با `rotate` می‌چرخد و جعبه احاطه‌اش در ۴۵ درجه
 * ۱٫۴۱ برابر می‌شود — روی موبایل ۲۵ پیکسل از عرض صفحه بیرون می‌زد و کل صفحه
 * را افقی اسکرول‌پذیر می‌کرد (سنجیده‌شده: scrollWidth=455 در ویوپورت ۴۳۰).
 * ماسک، فقط نقاشی را می‌برد نه چیدمان را.
 */
.fap-alp-radar {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, #fff 0%, var(--fap-brand-50, #eef8f6) 62%, var(--fap-brand-100, #e3f4f1) 100%);
    border: 1px solid var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    box-shadow: 0 20px 55px rgba(16, 24, 40, .10), inset 0 0 40px rgba(26, 168, 153, .06);
}

.fap-alp-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1px solid rgba(26, 168, 153, .20);
    border-radius: 50%;
}

.fap-alp-ring.r1 { width: 33%; height: 33%; }
.fap-alp-ring.r2 { width: 63%; height: 63%; }
.fap-alp-ring.r3 { width: 88%; height: 88%; }

.fap-alp-cross {
    position: absolute;
    inset: 0;
}

.fap-alp-cross::before,
.fap-alp-cross::after {
    content: "";
    position: absolute;
    background: rgba(26, 168, 153, .14);
}

.fap-alp-cross::before {
    inset-inline-start: 50%;
    top: 6%;
    bottom: 6%;
    width: 1px;
}

.fap-alp-cross::after {
    top: 50%;
    inset-inline: 6%;
    height: 1px;
}

.fap-alp-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(26, 168, 153, .30), rgba(26, 168, 153, .05) 40deg, transparent 80deg);
    animation: fap-alp-spin 4.2s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 4%, #000 5%);
    mask: radial-gradient(circle, transparent 4%, #000 5%);
}

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

.fap-alp-pulse {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    box-shadow: 0 0 0 6px rgba(26, 168, 153, .16);
}

.fap-alp-blip {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    opacity: 0;
    animation: fap-alp-ping 4.2s linear infinite;
}

.fap-alp-blip.b1 { top: 26%; inset-inline-start: 31%; animation-delay: .6s; }
.fap-alp-blip.b2 { top: 62%; inset-inline-start: 24%; animation-delay: 1.9s; }
.fap-alp-blip.b3 { top: 44%; inset-inline-start: 71%; animation-delay: 3.1s; }

@keyframes fap-alp-ping {
    0%   { opacity: 0; transform: scale(.5); box-shadow: 0 0 0 0 rgba(26, 168, 153, .55); }
    8%   { opacity: 1; transform: scale(1); }
    40%  { opacity: .85; box-shadow: 0 0 0 12px rgba(26, 168, 153, 0); }
    75%  { opacity: 0; }
    100% { opacity: 0; }
}

.fap-alp-live {
    position: absolute;
    inset-inline-start: -12px;
    top: 22px;
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--fap-r-pill, 999px);
    padding: 7px 14px;
    box-shadow: var(--alp-shadow-m);
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    color: var(--alp-teal-600);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fap-alp-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    animation: fap-alp-blip 2s infinite;
}

/* ------------------------------- کارت شناور «نمونه پیامک رادار» */

/*
 * سه آگهی واقعی، نوبتی — یکی می‌رود، بعدی می‌آید.
 *
 * کارت‌ها با grid تک‌خانه‌ای روی هم می‌نشینند تا ظرف به‌اندازه بلندترینشان
 * باشد و هیچ‌کدام جای دیگری اشغال نکند. ارتفاع ثابت نمی‌دهیم: نام خودرو
 * می‌تواند یک خط یا دو خط باشد.
 */
.fap-alp-hitwrap {
    display: grid;
    position: absolute;
    inset-inline-end: -16px;
    bottom: 8px;
    width: min(268px, 84%);
    z-index: 3;
}

.fap-alp .fap-alp-hitcard {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--fap-r-lg, 16px);
    padding: 12px 14px;
    box-shadow: var(--alp-shadow-m);
    text-decoration: none;
    color: var(--alp-ink);

    /*
     * ⚠️ `visibility` کنار `opacity` اجباری است.
     *
     * کارت پنهان یک **لینک** است؛ با `opacity:0` تنها، همچنان قابل کلیک و
     * قابل فوکوس با Tab می‌ماند — یعنی کاربر روی هوا کلیک می‌کند یا با
     * صفحه‌کلید به لینکی می‌رسد که نمی‌بیندش.
     */
    opacity: 0;
    visibility: hidden;
}

.fap-alp-hitcard .body {
    flex: 1 1 auto;
    min-width: 0;
}

.fap-alp-hitcard .ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--fap-r-md, 12px);
    background: var(--alp-teal-050);
    display: grid;
    place-items: center;
    color: var(--alp-teal);
}

.fap-alp-hitcard .eyebrow {
    display: block;
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 700;
    color: var(--alp-muted);
    line-height: 1.6;
}

.fap-alp-hitcard .car {
    display: block;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    line-height: 1.7;
}

.fap-alp-hitcard .pr {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    color: var(--alp-teal-600);
    line-height: 1.7;
}

.fap-alp-hitcard .meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--alp-muted);
    line-height: 1.7;
}

.fap-alp .fap-alp-hitcard:hover {
    border-color: var(--alp-teal, var(--fap-brand-500, #1aa29a));
}

.fap-alp .fap-alp-hitcard:hover .meta {
    color: var(--alp-teal-600);
}

/*
 * چرخه، روی هاور و فوکوس **می‌ایستد**.
 *
 * بدون این، کاربری که دستش را روی کارت می‌برد تا بخواندش یا کلیک کند،
 * وسط کار کارت را از دست می‌دهد. همان لحظه‌ای که به آن توجه شده، بدترین
 * لحظه برای عوض‌کردنش است.
 */
.fap-alp-hitwrap:hover .fap-alp-hitcard,
.fap-alp-hitwrap:focus-within .fap-alp-hitcard {
    animation-play-state: paused;
}

/*
 * طول چرخه به تعداد کارت‌ها بند است و درصدهای keyframe متغیر قبول
 * نمی‌کنند، پس به‌ازای هر تعداد یک مجموعه جدا. هر کارت حدود پنج ثانیه
 * دیده می‌شود — کوتاه‌تر از آن، خواندن نام و قیمت تمام نمی‌شود.
 */
.fap-alp-hitwrap--n1 .fap-alp-hitcard {
    opacity: 1;
    visibility: visible;
}

@keyframes fap-alp-hit2 {
    0%        { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); }
    3%        { opacity: 1; visibility: visible; transform: none; }
    47%       { opacity: 1; visibility: visible; transform: none; }
    50%, 100% { opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.99); }
}

.fap-alp-hitwrap--n2 .fap-alp-hitcard { animation: fap-alp-hit2 10s linear infinite; }
.fap-alp-hitwrap--n2 .fap-alp-hitcard:nth-child(2) { animation-delay: 5s; }

@keyframes fap-alp-hit3 {
    0%        { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); }
    2%        { opacity: 1; visibility: visible; transform: none; }
    31%       { opacity: 1; visibility: visible; transform: none; }
    34%, 100% { opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.99); }
}

.fap-alp-hitwrap--n3 .fap-alp-hitcard { animation: fap-alp-hit3 15s linear infinite; }
.fap-alp-hitwrap--n3 .fap-alp-hitcard:nth-child(2) { animation-delay: 5s; }
.fap-alp-hitwrap--n3 .fap-alp-hitcard:nth-child(3) { animation-delay: 10s; }


/* =================================================== امضای صفحه دیده‌بان */

.fap-alp-phonewrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 8px 0;
}.fap-alp-phone {
    position: relative;
    width: min(292px, 80vw);
    background: var(--fap-c-ink, #13292d);
    border-radius: 38px;
    padding: 11px;
    box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    animation: fap-alp-float 7s ease-in-out infinite;
}

@keyframes fap-alp-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.fap-alp-screen {
    background: #fff;
    border-radius: 29px;
    padding: 16px 14px 20px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.fap-alp-notch {
    width: 92px;
    height: 5px;
    background: var(--fap-c-success-line, #c9ecd5);
    border-radius: var(--fap-r-pill, 999px);
    margin: 2px auto 14px;
}

/*
 * سه پیامک واقعی، نوبتی روی یک صفحه گوشی.
 *
 * چرخه با CSS است نه JS: روی پروداکشن HTML کش می‌شود، پس یک انتخاب سمت
 * سرور تا باطل‌شدن کش ثابت می‌ماند — ولی چرخه CSS در هر بازدید کار می‌کند.
 *
 * اسلایدها روی هم می‌نشینند (`grid-area: 1 / 1`) نه پشت سر هم، وگرنه ارتفاع
 * صفحه گوشی سه برابر می‌شد. ظرف `flex: 1` می‌گیرد تا `margin-top: auto`
 * حباب همچنان آن را ته صفحه نگه دارد.
 */
.fap-alp-slides {
    display: grid;
    flex: 1;
    min-height: 0;
}

.fap-alp .fap-alp-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
}

.fap-alp-slides--n1 .fap-alp-slide {
    opacity: 1;
    visibility: visible;
}

/* همان دو چرخه کارت شناور صفحه رادار؛ فقط کندتر، چون اینجا نمودار و چهار
   خط برای خواندن هست نه دو خط. */
.fap-alp-slides--n2 .fap-alp-slide { animation: fap-alp-hit2 13s linear infinite; }
.fap-alp-slides--n2 .fap-alp-slide:nth-child(2) { animation-delay: 6.5s; }

.fap-alp-slides--n3 .fap-alp-slide { animation: fap-alp-hit3 19.5s linear infinite; }
.fap-alp-slides--n3 .fap-alp-slide:nth-child(2) { animation-delay: 6.5s; }
.fap-alp-slides--n3 .fap-alp-slide:nth-child(3) { animation-delay: 13s; }

.fap-alp-smshead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
}

.fap-alp-smshead .av {
    width: 34px;
    height: 34px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--alp-teal-050);
    display: grid;
    place-items: center;
    color: var(--alp-teal);
    flex: none;
}

.fap-alp-smshead b {
    font-size: var(--fap-fs-md, 14px);
}

.fap-alp-smshead span {
    display: block;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--alp-muted);
    line-height: 1.5;
}

.fap-alp-chart {
    margin: 14px 0 6px;
}

.fap-alp-chart svg {
    width: 100%;
    height: 74px;
    display: block;
}

.fap-alp-chart .line {
    fill: none;
    stroke: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: fap-alp-draw 2.4s .3s ease-out forwards;
}

@keyframes fap-alp-draw {
    to { stroke-dashoffset: 0; }
}

.fap-alp-chart .dot {
    fill: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    opacity: 0;
    animation: fap-alp-pop .4s 2.5s forwards;
}

@keyframes fap-alp-pop {
    to { opacity: 1; }
}

.fap-alp-chartx {
    display: flex;
    justify-content: space-between;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--alp-muted);
    padding: 0 2px;
}

.fap-alp-bubble {
    background: var(--alp-teal-050);
    border: 1px solid var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    border-radius: var(--fap-r-lg, 16px) var(--fap-r-lg, 16px) var(--fap-r-lg, 16px) var(--fap-r-xs, 6px);
    padding: 13px 14px;
    margin-top: auto;
    font-size: var(--fap-fs-sm, 13px);
    line-height: 2.05;
    opacity: 0;
    transform: translateY(10px);
    animation: fap-alp-rise .6s 2.7s ease-out forwards;
}

@keyframes fap-alp-rise {
    to { opacity: 1; transform: none; }
}

.fap-alp-bubble .t {
    font-weight: 800;
    color: var(--alp-teal-600);
    font-size: var(--fap-fs-sm, 13px);
}

.fap-alp-bubble .row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.fap-alp-bubble .up { color: var(--alp-up); font-weight: 700; }
.fap-alp-bubble .dn { color: var(--alp-down); font-weight: 700; }
.fap-alp-bubble .lnk { color: var(--alp-teal-600); font-size: var(--fap-fs-2xs, 11px); }

.fap-alp-stamp {
    text-align: center;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--alp-muted);
    margin-top: 9px;
}

/*
 * 🐞 چیپ ساعت روی **نمودار** می‌نشیند، نه روی سربرگ پیامک.
 *
 * با `top: 58px` دقیقا روی خط «فرمولا / دیده‌بان قیمت» می‌افتاد. تا وقتی آن
 * خط کوتاه بود کسی متوجه نمی‌شد؛ با اضافه‌شدن نام خودرو به همان خط، متن از
 * زیر چیپ رد می‌شد و نصفه خوانده می‌شد. پایین‌تر، فقط روی منحنی می‌افتد که
 * تزیینی است.
 */
/*
 * 🐞 `z-index` لازم است، وگرنه چیپ شفاف به نظر می‌رسد.
 *
 * اسلایدهای صفحه گوشی روی `opacity` انیمیشن دارند و همین یک stacking context
 * می‌سازد؛ چون در DOM **بعد** از چیپ می‌آیند، منحنی نمودار روی چیپ کشیده
 * می‌شد. پس‌زمینه چیپ همیشه `#fff` سفید بوده — چیزی که از زیرش دیده می‌شد،
 * از رویش کشیده شده بود.
 */
.fap-alp-badge {
    position: absolute;
    z-index: 3;
    inset-inline-end: -14px;
    top: 112px;
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--fap-r-md, 12px);
    padding: 9px 13px;
    box-shadow: var(--alp-shadow-m);
    text-align: center;
    animation: fap-alp-float 7s .8s ease-in-out infinite;
}

.fap-alp-badge b {
    display: block;
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 900;
    color: var(--alp-teal-600);
    letter-spacing: .02em;
}

.fap-alp-badge small {
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--alp-muted);
}

/* ==================================================== جایگاه فرم واقعی */

/*
 * فاصله پایین عمدی است.
 *
 * بدون آن، جعبه فرم مستقیم به نوار سفید بخش بعدی می‌چسبید و دو بخش یک
 * تکه دیده می‌شدند.
 */
.fap-alp-formslot {
    margin: 30px 0 52px;
    scroll-margin-top: 90px;
}

/*
 * فرم روی این صفحه تمام‌عرض است.
 *
 * `.fap-al` به‌طور پیش‌فرض ۹۰۰ پیکسل و وسط‌چین است چون قرار بوده وسط یک
 * صفحه دلخواه بنشیند. اینجا داخل ظرف خودمان است و باریک‌بودنش فقط یک ستون
 * خالی دو طرفش می‌سازد.
 */
.fap-alp .fap-al {
    max-width: none;
}

/*
 * حالت مهمان: کارت بیرونی برداشته می‌شود.
 *
 * `[ez-login]` خودش یک کارت کامل است — سفید، با بردر و سایه. گذاشتنش داخل
 * کارت سفید `.fap-al-card` یعنی دو قاب تودرتوی هم‌رنگ، و چون فرم ورود عرض
 * خودش را دارد، بقیه آن جعبه یک سطح سفید خالی می‌ماند. اینجا فقط جمله
 * راهنما و خود فرم می‌مانند، وسط‌چین.
 *
 * دامنه‌اش `.fap-alp` است: همان شورت‌کد روی صفحه‌های دیگر باید کارت خودش را
 * داشته باشد، چون آنجا ظرفی دور خودش ندارد.
 */
.fap-alp .fap-al-login {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.fap-alp .fap-al-login > p {
    margin-bottom: 20px;
    font-size: var(--fap-fs-lg, 16px);
}

.fap-alp .fap-al-login .ez-login-form {
    margin-inline: auto;
}

/* حالت «قابلیت خاموش است» — جای فرم، نه جای خالی. */
.fap-alp-off {
    background: var(--alp-card);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--alp-r-lg);
    padding: 34px 24px;
    text-align: center;
    box-shadow: var(--alp-shadow-s);
}

.fap-alp .fap-alp-off h2 {
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 800;
    margin-bottom: 8px;
}

.fap-alp-off p {
    color: var(--alp-muted);
    font-size: var(--fap-fs-md, 14px);
}

/* ================================================================ بخش‌ها */

.fap-alp-sec {
    padding: 68px 0;
}

.fap-alp-sec--tight {
    padding-top: 0;
}

.fap-alp-sechead {
    text-align: center;
    margin-bottom: 40px;
}

.fap-alp-kicker {
    color: var(--alp-teal-600);
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
}

.fap-alp .fap-alp-sechead h2 {
    font-size: clamp(22px, 3vw, 31px);
    font-weight: 900;
    margin-top: 8px;
}

.fap-alp-sechead p {
    color: var(--alp-ink2);
    margin-top: 10px;
    font-size: var(--fap-fs-lg, 16px);
}

/* نوار سفید تمام‌عرض بین بخش‌ها. */
.fap-alp-band {
    background: #fff;
    border-top: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-bottom: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    padding: 34px 0;
}

.fap-alp-bandtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.fap-alp .fap-alp-bandtop h2 {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 9px;
}

.fap-alp .fap-alp-bandtop h2 i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    animation: fap-alp-blip 2.4s infinite;
    flex: none;
}

.fap-alp-bandtop small {
    color: var(--alp-muted);
    font-size: var(--fap-fs-sm, 13px);
}

.fap-alp .fap-alp-bandtop a {
    color: var(--alp-teal-600);
    font-weight: 700;
    font-size: var(--fap-fs-sm, 13px);
    text-decoration: none;
}

.fap-alp .fap-alp-bandtop a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------- فید آگهی (رادار) */

/*
 * کارت فشرده، بدون عکس.
 *
 * عمدا کارت آرشیو سایت نیست: آن کارت برای مرور فهرست ساخته شده (عکس بزرگ،
 * بج‌ها، کاروسل) و اینجا نقش دیگری دارد — «ببین رادار چه چیزهایی را گرفت».
 * چهار خط کوتاه این کار را بهتر می‌کنند و صفحه را به سه فایل است/جی‌اس
 * دیگر بند نمی‌کنند.
 */
/*
 * `auto-fit` نه `repeat(4, 1fr)`.
 *
 * تعداد ضربه‌های ۲۴ ساعت گذشته می‌تواند یک تا چهار باشد؛ با چهار ستون ثابت،
 * سه کارت یعنی یک خانه خالی که مثل چیز جاافتاده دیده می‌شود.
 */
.fap-alp-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.fap-alp .fap-alp-fitem {
    display: block;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-md);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--alp-ink);
    transition: border-color .18s, box-shadow .18s;
}

/* بدون `transform` — همان دلیل دکمه‌ها؛ نام خودرو بولد است. */
.fap-alp .fap-alp-fitem:hover {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
}

.fap-alp-fitem .t {
    display: block;
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 700;
    color: var(--alp-teal-600);
}

.fap-alp-fitem .car {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    margin-top: 5px;
    line-height: 1.7;
}

.fap-alp-fitem .m {
    display: block;
    font-size: var(--fap-fs-sm, 13px);
    color: var(--alp-muted);
}

.fap-alp-fitem .p {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    margin-top: 6px;
}

/* ------------------------------------------------- نوار قیمت (دیده‌بان) */

.fap-alp-ticker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.fap-alp .fap-alp-tick {
    display: block;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-md);
    padding: 13px 15px;
    text-decoration: none;
    color: var(--alp-ink);
    transition: border-color .18s, box-shadow .18s;
}

/* بدون `transform` — همان دلیل دکمه‌ها؛ نام خودرو بولد است. */
.fap-alp .fap-alp-tick:hover {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
}

.fap-alp-tick b {
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    display: block;
}

.fap-alp-tick .p {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    margin-top: 4px;
}

.fap-alp-tick .d {
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--fap-r-pill, 999px);
    padding: 1px 9px;
}

.fap-alp-tick .d.u { color: var(--alp-up); background: var(--alp-up-bg); }
.fap-alp-tick .d.d { color: var(--alp-down); background: var(--alp-down-bg); }
.fap-alp-tick .d.n { color: var(--alp-muted); background: var(--alp-soft); }

/* ------------------------------------------------------------- مرحله‌ها */

.fap-alp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    counter-reset: fapalp;
}

.fap-alp-step {
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-lg);
    padding: 26px 24px;
    position: relative;
}

/*
 * 🐞 شماره مرحله دیده نمی‌شد.
 *
 * دو اشکال هم‌زمان داشت: `inset-inline-start` همان لبه‌ای است که آیکون هم
 * رویش می‌نشیند (در RTL: راست)، پس عدد پشت کاشی آیکون گم می‌شد؛ و رنگش
 * `--alp-teal-100` بود، یعنی تقریبا هم‌رنگ پس‌زمینه همان کاشی. حالا سمت
 * مقابل می‌نشیند و یک چیپ خواناست، نه واترمارک.
 */
/*
 * 🐞 `counter()` رقم لاتین می‌دهد.
 *
 * با `content: "۰" counter(fapalp)` خروجی «۰1» می‌شد: صفر فارسی دستی کنار
 * رقم لاتین شمارنده. سبک شمارش با ارقام فارسی صریح تعریف می‌شود تا به
 * جدول پیش‌فرض مرورگر بند نباشد.
 */
@counter-style fap-alp-fa {
    system: numeric;
    symbols: "۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹";
    fallback: decimal;
}

.fap-alp-step::before {
    counter-increment: fapalp;
    content: "۰" counter(fapalp, fap-alp-fa);
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 800;
    line-height: 1.7;
    padding: 2px 10px;
    border-radius: var(--fap-r-pill, 999px);
    color: var(--alp-teal-600);
    background: var(--alp-teal-050);
}

.fap-alp .fap-alp-step h3 {
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 800;
    margin-bottom: 8px;
}

.fap-alp-step p {
    color: var(--alp-ink2);
    font-size: var(--fap-fs-md, 14px);
}

.fap-alp-ic {
    width: 42px;
    height: 42px;
    border-radius: var(--fap-r-md, 12px);
    background: var(--alp-teal-050);
    display: grid;
    place-items: center;
    color: var(--alp-teal);
    margin-bottom: 15px;
}

/* ------------------------------------------------------- کالبد پیامک */

.fap-alp-ana {
    background: var(--fap-c-bg-soft, #f8fafa);
    border-top: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-bottom: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
}

.fap-alp-anagrid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.fap-alp-smscard {
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-lg);
    padding: 20px;
    box-shadow: var(--alp-shadow-m);
    font-size: var(--fap-fs-md, 14px);
    line-height: 2.2;
}

.fap-alp-smscard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
}

.fap-alp-smscard-head .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--alp-teal-050);
    display: grid;
    place-items: center;
    color: var(--alp-teal);
}

.fap-alp-smscard-head b { display: block; font-size: var(--fap-fs-md, 14px); line-height: 1.6; }
.fap-alp-smscard-head small { display: block; font-size: var(--fap-fs-2xs, 11px); color: var(--alp-muted); line-height: 1.6; }

/*
 * بدنه پیامک — عین متن قالب، با فاصله‌های خودش.
 *
 * از `<pre>` استفاده نمی‌شود: متن فارسی است و باید در عرض کم بشکند، در حالی
 * که pre خط را نمی‌شکند و کارت را افقی اسکرول‌پذیر می‌کند. هر خط یک span
 * بلاک است، پس فاصله‌ها همان‌جایی می‌افتند که در پیامک واقعی هستند.
 */
.fap-alp-smsbody {
    background: var(--alp-teal-050);
    border: 1px solid var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    border-radius: var(--fap-r-md, 12px) var(--fap-r-md, 12px) var(--fap-r-md, 12px) var(--fap-r-xs, 6px);
    padding: 14px 16px;
    font-size: var(--fap-fs-md, 14px);
    line-height: 2.1;
}

/*
 * ⚠️ فقط فرزند مستقیم خط می‌شود.
 *
 * بدون `>`، هر `<span>` تودرتویی هم بلوک می‌شد و وسط جمله می‌شکست: خط
 * «گزارش قیمت ۲۷ مرداد ۱۴۰۵» دو تکه می‌شد، در حالی که در پیامک واقعی یک خط
 * است.
 */
.fap-alp-smsbody > span { display: block; }
.fap-alp-smsbody .v { font-weight: 800; color: var(--alp-ink); }
.fap-alp-smsbody .sp { height: 10px; }
.fap-alp-smsbody .off { color: var(--alp-muted); font-size: var(--fap-fs-sm, 13px); }

/* آدرس‌ها لاتین‌اند و باید در ظرف فارسی نشکنند و درست بچینند. */
.fap-alp-smsbody .u {
    display: inline;
    unicode-bidi: isolate;
    word-break: break-all;
    color: var(--alp-teal-600);
    font-size: var(--fap-fs-sm, 13px);
}

.fap-alp .fap-alp-smscta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    color: var(--alp-teal-600);
    text-decoration: none;
}

.fap-alp .fap-alp-smscta:hover { text-decoration: underline; }

.fap-alp-smscard .ln {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px dashed var(--alp-line, var(--fap-c-line, #e0e8e9));
}

.fap-alp-smscard .ln:last-child {
    border-bottom: 0;
}

.fap-alp-smscard .k {
    color: var(--alp-teal-600);
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 800;
    background: var(--alp-teal-050);
    border-radius: var(--fap-r-xs, 6px);
    padding: 2px 8px;
    flex: none;
}

.fap-alp-analist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fap-alp-anaitem {
    display: flex;
    gap: 14px;
}

.fap-alp-anaitem .n {
    width: 30px;
    height: 30px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--alp-teal, var(--fap-brand-500, #1aa29a));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 800;
    flex: none;
}

.fap-alp .fap-alp-anaitem h3 {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    margin-bottom: 4px;
}

.fap-alp-anaitem p {
    color: var(--alp-ink2);
    font-size: var(--fap-fs-md, 14px);
}

/* ---------------------------------------------------------- کارت‌های چرا */

.fap-alp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fap-alp-card {
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-lg);
    padding: 24px;
    transition: box-shadow .2s, border-color .2s;
}

/* بدون `transform` — همان دلیل دکمه‌ها؛ عنوان کارت هم بولد است. */
.fap-alp-card:hover {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
}

.fap-alp .fap-alp-card h3 {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    margin-bottom: 8px;
}

.fap-alp-card p {
    font-size: var(--fap-fs-md, 14px);
    color: var(--alp-ink2);
}

/* ------------------------------------------------------------ مقایسه */

/*
 * دو کارت رودررو.
 *
 * سه نسخه قبلی جدول بودند و هر سه به یک دیوار می‌خوردند: CSS نمی‌تواند «یک
 * ستون» را با بردر و سایه بگیرد، پس هر ستون از تکه‌های جداجدا ساخته می‌شد،
 * `gap` بین دو ستون ممکن نبود (سلول‌های جدول فاصله نمی‌گیرند) و ستون برچسب
 * بیرون هر دو معلق می‌ماند. با دو کارت مستقل، هر گزینه یک شیء کامل است.
 *
 * ⚠️ هم‌ترازی ردیف‌ها با `subgrid` است. کارت **هیچ padding ندارد** — پدینگ
 * روی کارت، ردیف‌هایش را نسبت به شبکه والد جابه‌جا می‌کند و هم‌ترازی از بین
 * می‌رود؛ پس پدینگ روی تک‌تک ردیف‌ها می‌نشیند.
 *
 * ⚠️ `repeat(7, auto)` عدد ثابت است، نه متغیر: `repeat()` شمارنده‌اش را در
 * زمان پارس می‌خواهد و `var()` قبول نمی‌کند. هفت = سربرگ + پنج ردیف + دکمه.
 * وقتی ردیف «سقف هم‌زمان» چاپ نشود، ردیف هفتم خالی و صفر‌ارتفاع می‌ماند —
 * هر دو کارت همیشه به یک تعداد ردیف دارند، پس هم‌ترازی نمی‌شکند.
 */
.fap-alp-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, auto);
    gap: 0 22px;
    max-width: 880px;
    margin-inline: auto;
}

.fap-alp-vs-card {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    padding: 0;
    background: var(--alp-card, #fff);
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
}

/*
 * روی مرورگر بدون subgrid، کارت یک ستون ساده می‌شود. هم‌ترازی ردیف‌ها از دست
 * می‌رود ولی هیچ چیز نمی‌شکند — و چون هر ردیف برچسب خودش را دارد، هنوز
 * خواندنی است.
 */
@supports not (grid-template-rows: subgrid) {
    .fap-alp-vs { grid-template-rows: none; align-items: start; }
    .fap-alp-vs-card { grid-row: auto; grid-template-rows: none; }
}

/* کارت گزینه همین صفحه: بلندتر، با قاب فیروزه‌ای. */
.fap-alp-vs-card.is-lead {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
}

.fap-alp-vs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--fap-c-bg, #f3f7f7);
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    color: var(--alp-ink2);
    border-bottom: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
}

.fap-alp-vs-head .ic {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fap-r-sm, 10px);
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    color: var(--alp-muted);
    flex: none;
}

.fap-alp-vs-card.is-lead .fap-alp-vs-head {
    background: var(--fap-brand-600, #0d8276);
    border-bottom-color: var(--fap-brand-700, #0b6c62);
    color: #fff;
}

.fap-alp-vs-card.is-lead .fap-alp-vs-head .ic {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/*
 * برچسب بالا و کوچک، مقدار زیرش و پررنگ.
 *
 * برچسب داخل هر کارت تکرار می‌شود و این عمدی است: روی موبایل کارت‌ها زیر هم
 * می‌روند و کارتی که برچسب نداشته باشد یک فهرست بی‌سر است.
 */
.fap-alp-vs-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 20px;
    border-top: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.fap-alp-vs-row:first-of-type {
    border-top: 0;
}

.fap-alp-vs-row .k {
    font-size: var(--fap-fs-xs, 12px);
    color: var(--alp-muted);
    line-height: 1.7;
}

.fap-alp-vs-row .v {
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    color: var(--alp-ink);
    line-height: 1.7;
}

.fap-alp-vs-card.is-lead .fap-alp-vs-row .v {
    color: var(--alp-teal-600);
}

.fap-alp-vs-foot {
    display: flex;
    padding: 16px 20px 20px;
    align-items: flex-end;
}

/* دوکلاسه، تا رنگ لینک قالب آن را نبرد. */
.fap-alp .fap-alp-vs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    border-radius: var(--fap-r-md, 12px);
    padding: 12px 14px;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    background: #fff;
    color: var(--alp-ink2);
    transition: border-color .18s, background-color .18s, color .18s;
}

.fap-alp .fap-alp-vs-btn:hover {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    background: var(--alp-teal-050);
    color: var(--alp-teal-600);
}

.fap-alp .fap-alp-vs-btn.is-now {
    background: var(--alp-teal-600);
    border-color: var(--alp-teal-600);
    color: #fff;
}

/*
 * روی هاور پس‌زمینه **تیره‌تر نمی‌شود**.
 *
 * متن سفید روی پس‌زمینه تیره‌تر، نازک‌تر **دیده** می‌شود — حتی وقتی
 * پیکسل‌های حروف مو‌به‌مو یکی باشند. یک بار همین‌جا اشتباه شد: انیمیشن
 * `transform` برداشته شد، مساحت متن سنجیده شد و اختلافش صفر درآمد، ولی
 * کاربر همچنان نازک‌شدن را می‌دید. چشم لبه هموارشده را **نسبت به زمینه**
 * می‌سنجد، پس زمینه تیره‌تر یعنی حروف لاغرتر — بی‌آنکه یک پیکسل هم عوض
 * شده باشد.
 *
 * حالا سنجیده‌شده: روشنایی زمینه و مساحت متن، در هر دو حالت دقیقا یکی است.
 *
 * پس بازخورد هاور فقط با سایه ساخته می‌شود؛ روشنایی دکمه دست
 * نمی‌خورد. همین قاعده برای هر دکمه توپر دیگری هم صادق است.
 */
.fap-alp .fap-alp-vs-btn.is-now:hover {
    background: var(--alp-teal-600);
    border-color: var(--alp-teal-600);
    color: #fff;
}

.fap-alp-vs-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: var(--fap-r-md, 12px);
    padding: 12px 14px;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    background: var(--alp-soft, var(--fap-c-bg, #f3f7f7));
    color: var(--alp-muted);
}

/* --------------------------------------------------------------- پرسش‌ها */

.fap-alp-faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fap-alp-faq details {
    background: #fff;
    border: 1px solid var(--alp-line, var(--fap-c-line, #e0e8e9));
    border-radius: var(--alp-r-md);
    padding: 2px 20px;
    transition: border-color .2s, box-shadow .2s;
}

.fap-alp-faq details[open] {
    border-color: var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    box-shadow: var(--alp-shadow-s);
}

.fap-alp-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 15px 0;
    font-weight: 700;
    font-size: var(--fap-fs-lg, 16px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--alp-ink);
}

.fap-alp-faq summary::-webkit-details-marker {
    display: none;
}

.fap-alp-faq summary::after {
    content: "";
    margin-inline-start: auto;
    width: 9px;
    height: 9px;
    border-inline-end: 2px solid var(--alp-teal, var(--fap-brand-500, #1aa29a));
    border-bottom: 2px solid var(--alp-teal, var(--fap-brand-500, #1aa29a));
    transform: rotate(45deg);
    transition: transform .2s;
    flex: none;
}

.fap-alp-faq details[open] summary::after {
    transform: rotate(-135deg);
}

.fap-alp-faq details p {
    padding: 0 0 18px;
    color: var(--alp-ink2);
    font-size: var(--fap-fs-md, 14px);
}

/* ------------------------------------------------------------------ CTA */

/*
 * نوار پایانی، هم‌خانواده «مقایسه دو خودرو» در کاتالوگ.
 *
 * همان زمینه سرمه‌ای رادیالی، همان سبز فیروزه‌ای دکمه و همان خاکستری‌آبی متن
 * (`car-review.css` → .fap-rv-cmp). دو نوار پایانی در یک سایت که دو جور
 * باشند، به کاربر می‌گویند وارد جای دیگری شده.
 */
.fap-alp-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 28px;
    background: var(--fap-c-ink, #13292d);
    border-radius: var(--fap-r-xl, 20px);
    padding: 34px 38px;
    color: #e8f1f4;
    overflow: hidden;
}

.fap-alp .fap-alp-cta h2 {
    margin: 0;
    font-size: clamp(21px, 2.8vw, 27px);
    font-weight: 900;
    line-height: 1.6;
    color: #fff;
}

.fap-alp-cta p {
    margin: 12px 0 0;
    color: var(--fap-c-faint, #98aaae);
    font-size: var(--fap-fs-lg, 16px);
    line-height: 1.95;
}

/* روی بنر تیره: دکمه سفید (.fap-btn--ghost --lg) */
.fap-alp .fap-alp-cta-btn {
    margin-top: 20px;
}

/*
 * 🐞 روی هاور `transform` نداریم — متن را نازک نشان می‌دهد.
 *
 * هر `transform` (حتی یک پیکسل) المان را به یک لایه ترکیب‌بندی جدا می‌برد و
 * مرورگر متن آن لایه را از هموارسازی زیرپیکسلی به هموارسازی خاکستری عوض
 * می‌کند. `font-weight` عوض نمی‌شود — سنجیده شد، در هر دو حالت ۸۰۰ است —
 * ولی چشم آن را «نازک‌شدن فونت در هاور» می‌بیند، و روی متن بولد و درشت از
 * همه‌جا بیشتر پیداست.
 *
 * پس بازخورد هاور با `box-shadow` و رنگ ساخته می‌شود؛ هیچ‌کدام لایه جدا
 * نمی‌سازند. ⚠️ `filter`، `opacity` کمتر از ۱، `will-change` و
 * `backdrop-filter` هم همین کار را می‌کنند و جایگزین مناسبی نیستند.
 */
.fap-alp-cta-art svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 330px;
    margin-inline: auto;
}

/* ------------------------------------------------------- ریل کارت آگهی */

/* ------------------------------------------- کارت «یک قیمت، یک منبع» */

.fap-alp-src {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 20px;
    border-radius: var(--alp-r-md);
    background: var(--alp-teal-050);
    border: 1px solid var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
}

.fap-alp-src-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--fap-r-md, 12px);
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--alp-teal-100, var(--fap-brand-200, #c6e9e4));
    color: var(--alp-teal-600);
}

.fap-alp-src-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.fap-alp-src-txt b {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    color: var(--alp-ink);
}

.fap-alp-src-txt p {
    font-size: var(--fap-fs-md, 14px);
    color: var(--alp-ink2);
    line-height: 1.85;
}

.fap-alp-adsnote {
    margin-top: 14px;
    font-size: var(--fap-fs-sm, 13px);
    color: var(--alp-muted);
}

/* دوکلاسه، وگرنه رنگ لینک قالب (روی هلو-المنتور: قرمز) برنده می‌شود. */
.fap-alp .fap-alp-adsnote a {
    color: var(--alp-teal-600);
    font-weight: 700;
    text-decoration: none;
}

.fap-alp .fap-alp-adsnote a:hover {
    text-decoration: underline;
}

/* ============================================================== واکنش‌گرا */

@media (max-width: 960px) {
    .fap-alp-hero-grid,
    .fap-alp-anagrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .fap-alp-steps,
    .fap-alp-cards,
    .fap-alp-ticker,
    .fap-alp-feed {
        grid-template-columns: 1fr 1fr;
    }

    /*
     * روی موبایل، **تیتر اول می‌آید نه تصویر**.
     *
     * نسخه اول تصویر را با `order:-1` بالا می‌برد (همان کاری که ماکت اولیه
     * می‌کرد). وقتی آن تصویر فقط یک دایره تزیینی بود اشکالی نداشت؛ حالا که
     * فهرست نمونه پیامک هم زیرش نشسته، حدود ۷۰۰ پیکسل ویژوال بین کاربر و
     * جمله‌ای که می‌گوید این صفحه چیست فاصله می‌انداخت.
     */
    .fap-alp-stage {
        min-height: 330px;
    }

    .fap-alp-lede {
        max-width: none;
    }
}

@media (max-width: 600px) {
    /*
     * 🐞 `--tight` روی موبایل بی‌اثر شده بود.
     *
     * `.fap-alp-sec--tight { padding-top: 0 }` بالای فایل است و این قانون
     * پایین‌تر؛ هر دو یک کلاس‌اند، پس در تساوی specificity قانون دیرتر
     * می‌برد و مدیاکوئری هم چیزی به وزن اضافه نمی‌کند. نتیجه: سه بخش پایانی
     * روی موبایل بالای خودشان هم padding می‌گرفتند و فاصله‌شان دوبرابر
     * می‌شد (۹۲ به‌جای ۴۶) — دقیقا همان دسته باگی که در بلوک «کاهش حرکت»
     * دیده شد. اینجا با تکرار صریح modifier در همین مدیاکوئری بسته می‌شود.
     */
    .fap-alp-sec {
        padding: 40px 0;
    }

    .fap-alp-sec--tight {
        padding-top: 0;
    }

    .fap-alp-sechead {
        margin-bottom: 26px;
    }

    .fap-alp-band {
        padding: 26px 0;
    }

    .fap-alp-formslot {
        margin: 24px 0 34px;
    }

    .fap-alp-steps,
    .fap-alp-cards,
    .fap-alp-ticker,
    .fap-alp-feed {
        grid-template-columns: 1fr;
    }

    .fap-alp-cta {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 22px;
        text-align: center;
    }

    /* تصویر زیر متن، نه بالای آن: دکمه نباید از اولین نگاه بیرون بیفتد. */
    .fap-alp-cta-art { order: 2; }
    .fap-alp-cta-art svg { max-width: 240px; }

    .fap-alp-live {
        top: 0;
    }

    .fap-alp-badge {
        inset-inline-end: -6px;
    }

    /*
     * روی موبایل کارت‌ها زیر هم می‌روند و subgrid دیگر معنایی ندارد؛
     * هم‌ترازی ردیف‌ها هم بی‌معناست وقتی دو کارت کنار هم نیستند.
     */
    .fap-alp-vs {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 16px;
    }

    .fap-alp-vs-card {
        grid-row: auto;
        grid-template-rows: none;
    }

    /* کارت منبع روی موبایل عمودی می‌شود؛ دکمه تمام‌عرض، نه یک تکه باریک کنار متن. */
    .fap-alp-src {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 12px;
        padding: 18px 16px;
    }

    .fap-alp-src-ic {
        margin-inline: auto;
    }

    .fap-alp .fap-alp-src-btn {
        display: flex;
        width: 100%;
    }

    .fap-alp-h1 .hl {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fap-alp *,
    .fap-alp *::before,
    .fap-alp *::after {
        animation: none !important;
        transition: none !important;
    }

    .fap-alp-chart .line { stroke-dashoffset: 0; }
    /*
     * ⚠️ ردیف‌های پیامک باید صریحا برگردانده شوند.
     *
     * حالت اولیه‌شان `opacity:0` است و انیمیشن آن را درست می‌کند؛ با
     * خاموش‌کردن سراسری انیمیشن‌ها، سه لینک نامرئی ولی قابل فوکوس باقی
     * می‌ماندند — بدترین حالت ممکن برای دسترس‌پذیری.
     */
    .fap-alp-chart .dot,
    .fap-alp-bubble { opacity: 1; transform: none; }

    /*
     * بدون حرکت، فقط **کارت اول** می‌ماند و بقیه اصلا رندر نمی‌شوند.
     *
     * ⚠️ سلکتور باید دوکلاسه باشد. حالت اولیه کارت با
     * `.fap-alp .fap-alp-hitcard` تعریف شده و مدیا‌کوئری هیچ وزنی به سلکتور
     * اضافه نمی‌کند؛ نسخه تک‌کلاسه بی‌صدا می‌بازد و نتیجه‌اش سه لینک
     * نامرئی قابل فوکوس است (یک بار همین‌طور شد و با سنجش لو رفت).
     *
     * `display:none` روی بقیه، نه فقط پنهان‌کردن: با grid تک‌خانه‌ای، سه
     * کارت مرئی روی هم می‌افتادند.
     */
    .fap-alp .fap-alp-hitcard { opacity: 1; visibility: visible; transform: none; }
    .fap-alp .fap-alp-hitcard:nth-child(n + 2) { display: none; }

    /* همان قاعده برای اسلایدهای صفحه گوشی — و به همان دلیل دوکلاسه. */
    .fap-alp .fap-alp-slide { opacity: 1; visibility: visible; transform: none; }
    .fap-alp .fap-alp-slide:nth-child(n + 2) { display: none; }

    .fap-alp-blip { opacity: .9; }
}