/**
 * نوار قیمت لحظه‌ای بازار خودرو (شورت‌کد fap_price_ticker).
 *
 * ساختار: rows > row > [rowid | viewport > shift > track > chip]
 *   • انیمیشن فقط روی `track` است (translate خالص ⇒ روی GPU، بدون layout).
 *   • `shift` مخصوص درگ کاربر است تا انیمیشن هرگز قطع/ریست نشود.
 *   • `viewport` تنها جایی است که overflow دارد؛ پس پاپ‌آور بیرون از آن،
 *     در `wrap`، پوزیشن می‌گیرد وگرنه بریده می‌شود.
 *   • هر ردیف متغیرهای `--tk-unit` و `--tk-dur` خودش را از JS می‌گیرد.
 *
 * تا وقتی JS کلاس `is-live` را روی ردیف نگذاشته، آن ردیف فقط یک نوار قابل
 * اسکرول است: حلقه بی‌درز به کلون‌هایی نیاز دارد که JS می‌سازد، و
 * انیمیشن‌کردن بدون آن‌ها یعنی نوار یک بار رد شود و جایش خالی بماند.
 */

.fap-tk {
    --tk-teal: var(--fap-brand-500, #1aa29a);
    --tk-teal-d: var(--fap-brand-600, #0d8276);
    --tk-teal-soft: var(--fap-brand-100, #e3f4f1);
    --tk-ink: var(--fap-c-ink, #13292d);
    --tk-body: var(--fap-c-text, #34494d);
    --tk-muted: var(--fap-c-muted, #566a6e);
    --tk-faint: var(--fap-c-faint, #98aaae);
    --tk-line: var(--fap-c-line, #e0e8e9);
    --tk-card: #fff;
    --tk-up: var(--fap-c-error, #c81e1e);
    --tk-up-bg: var(--fap-c-error-soft, #fef4f3);
    --tk-down: var(--fap-c-success, #137a3a);
    --tk-down-bg: var(--fap-brand-100, #e3f4f1);
    --tk-flat: var(--fap-c-muted, #566a6e);
    --tk-flat-bg: var(--fap-c-bg, #f3f7f7);
    --tk-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    --tk-gap: 10px;

    /* فضای عمودی داخل viewport برای بالاآمدن کارت در هاور. */
    --tk-lift: 5px;

    direction: rtl;
    font-family: inherit;
    font-size: var(--fap-fs-lg, 16px);
    line-height: 1.9;
    color: var(--tk-body);
    padding: 6px 0 10px;
}

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

/* =====================================================================
 * زره ضد قالب
 *
 * این نوار داخل صفحه اصلی یک قالب ناشناخته می‌نشیند و قالب‌ها معمولا a را در
 * hover/focus رنگی می‌کنند یا زیرخط می‌زنند. specificity قالب قابل پیش‌بینی
 * نیست، پس اول همه‌چیز خنثی و بعد استایل خودمان اعمال می‌شود.
 *
 * ⚠ این بلوک باید قبل از بقیه قوانین بماند.
 * ===================================================================== */

.fap-tk a,
.fap-tk a:hover,
.fap-tk a:focus,
.fap-tk a:focus-visible,
.fap-tk a:active,
.fap-tk-pop a {
    text-decoration: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
    background-image: none !important;
    box-shadow: none;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.fap-tk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.fap-tk-wrap {
    position: relative;
    max-width: 1240px;
    margin-inline: auto;
    padding: 0 16px;
}

/* =====================================================================
 * سربرگ بخش
 * ===================================================================== */

.fap-tk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 0 4px 10px;
}

.fap-tk-id {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.fap-tk-dot {
    position: relative;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tk-teal);
    margin-bottom: 18px;
    margin-left: 6px;
}

.fap-tk-idtext {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    min-width: 0;
}

.fap-tk-title {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 800;
    color: var(--tk-ink);
}

.fap-tk-stamp {
    font-size: var(--fap-fs-xs, 12px);
    color: var(--tk-muted);
}

/* =====================================================================
 * ردیف‌ها
 * ===================================================================== */

.fap-tk-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fap-tk-row {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--fap-r-lg, 16px);
    border: 1px solid var(--tk-line);
    background: #fff;
    box-shadow: var(--tk-shadow);

    /* JS بر اساس عرض واقعی هر ردیف بازنویسی‌شان می‌کند. */
    --tk-unit: 100%;
    --tk-dur: 60s;
}

.fap-tk-row--used {
    background: #fff;
}

/* ---------------------------------------------------- سرنام ثابت ردیف */

/*
 * سرنام یک **پنل** است، نه یک تکه متن کنار نوار.
 *
 * با چهار خط اطلاعات (هویت، شمارش، بیشترین رشد، بیشترین افت) سرنام از
 * کارت‌ها بلندتر می‌شود. بدون پس‌زمینه، آن اختلاف ارتفاع شبیه «فضای خالی
 * بالا و پایین کارت‌ها» دیده می‌شد؛ با پنل، همان اختلاف به دو ستون عمدی
 * تبدیل می‌شود.
 */
.fap-tk-rowid {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    width: 215px;
    padding: 9px 13px;

    /*
     * تعادل ارتفاع دو ستون.
     *
     * BUG (دو بار): اول پنل ۱۰۳ پیکسل بود و کارت‌ها ۷۲ ⇒ زیر هر کارت یک نوار
     * خالی ۴۰ پیکسلی می‌ماند. بار دوم برای جبران، سطرهای پنل آن‌قدر فشرده شدند
     * که متن‌ها توی هم رفتند. راه درست وسط این دو است: پنل فاصله خواناش را
     * دارد و **کارت‌ها هم بلندتر شده‌اند** تا اختلاف دو ستون ناچیز بماند؛
     * باقی‌مانده را وسط‌چینی نوار پخش می‌کند.
     *
     * line-height ۱٫۹ بخش برای این چهار خط زیادی است، ولی ۱٫۳۵ هم کم بود.
     */
    line-height: 1.55;
    border-radius: var(--fap-r-md, 12px);
    border: 1px solid var(--fap-c-success-soft, #f0faf3);
    background: var(--fap-c-bg, #f3f7f7);
    color: var(--tk-body) !important;
    transition: background .18s, border-color .18s;
}

.fap-tk-row--used .fap-tk-rowid {
    border-color: var(--fap-c-line-soft, #edf2f2);
    background: var(--fap-c-bg, #f3f7f7);
}

.fap-tk-rowid:hover {
    background: var(--fap-brand-50, #eef8f6);
    border-color: var(--fap-brand-200, #c6e9e4);
}

.fap-tk-row--used .fap-tk-rowid:hover {
    background: var(--fap-c-bg, #f3f7f7);
    border-color: var(--fap-c-line, #e0e8e9);
}

/*
 * هویت و شمارش در **یک** سطر می‌نشینند.
 *
 * با چهار سطر، پنل ۱۰۷ پیکسل می‌شد و کارت‌ها ۸۱ — همان اختلافی که زیر کارت‌ها
 * خالی می‌افتد. سه سطر با فاصله خوانا، پنل را هم‌قد کارت‌ها می‌کند؛ عرض بیشتر
 * پنل (۳۰۰ به‌جای ۲۴۴) هزینه‌اش کمتر از یک سطر اضافه است.
 */
.fap-tk-rowid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.fap-tk-rowid-top {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.fap-tk-rowid-t {
    font-size: var(--fap-fs-sm, 13px);
    line-height: 1.5;
    font-weight: 800;
    color: var(--tk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* فلش با CSS می‌آید نه SVG: در هر ردیف یک بار لازم است و مارک‌آپ را سبک نگه می‌دارد. */
.fap-tk-rowid-go {
    /*
     * inline-block داخل یک خط متن، جعبه خط را تا ۲۸ پیکسل بالا می‌برد: strut آن
     * خط با font-size ارثی ۱۵ پیکسل ساخته می‌شود، نه با اندازه خود فلش — و همین
     * یک خط، پنل سرنام را از کارت‌ها بلندتر می‌کرد. inline-flex جعبه خط نمی‌سازد.
     */
    display: inline-flex;
    align-items: center;
    font-size: var(--fap-fs-xs, 12px);
    line-height: 1;
}

.fap-tk-rowid-go::before {
    content: "\2190";
    color: var(--tk-teal-d);
    transition: transform .18s;
}

.fap-tk-rowid:hover .fap-tk-rowid-go::before {
    transform: translateX(-3px);
}

.fap-tk-rowid-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    /* عدد نصفه بی‌معناست؛ اگر جا کم آمد عنوان سه‌نقطه بخورد نه شمارش. */
    flex: 0 0 auto;
}

.fap-tk-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fap-fs-2xs, 11px);
    line-height: 1.5;
    color: var(--tk-faint);
    font-variant-numeric: tabular-nums;
}

.fap-tk-mini--up {
    color: var(--tk-up);
    font-weight: 700;
}

.fap-tk-mini--down {
    color: var(--tk-down);
    font-weight: 700;
}

/*
 * بیشترین رشد و بیشترین افت همان فهرست.
 *
 * جایشان اینجاست نه در سربرگ بخش: یک جفت عدد سراسری بالای هر دو نوار،
 * نمی‌گوید مال خودروی صفر است یا کارکرده. اینجا ابهام ممکن نیست.
 *
 * ارتفاع اضافه نمی‌کنند: سرنام دو خط بود و ردیف جا داشت.
 */
.fap-tk-tops {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding-top: 4px;
    /* یک خط جداکننده کم‌رنگ: دو خط اکسترمم جنس دیگری از اطلاعات‌اند و بدون
       این مرز، چهار خط پنل یک توده متن دیده می‌شوند. */
    border-top: 1px dashed var(--fap-c-line, #e0e8e9);
}

.fap-tk-row--used .fap-tk-tops {
    border-top-color: var(--fap-c-line, #e0e8e9);
}

.fap-tk-top {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fap-fs-2xs, 11px);
    line-height: 1.55;
    color: var(--tk-muted);
}

.fap-tk-top-nm {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fap-tk-top b {
    flex: 0 0 auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fap-tk-top--up {
    color: var(--tk-up);
}

.fap-tk-top--down {
    color: var(--tk-down);
}

.fap-tk-top--up .fap-tk-tri {
    border-bottom: 6px solid currentColor;
}

.fap-tk-top--down .fap-tk-tri {
    border-top: 6px solid currentColor;
}

.fap-tk-top .fap-tk-top-nm {
    color: var(--tk-body);
}

/* ------------------------------------------------------------ نمایشگر */

.fap-tk-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;

    /*
     * مبدأ محور افقی باید لبه چپ باشد.
     *
     * BUG: در ظرف rtl، فرزندی که از ظرف عریض‌تر است از سمت **چپ** بیرون
     * می‌زند و لبه راستش به لبه راست ظرف می‌چسبد. یعنی ترجمه‌های منفی نوار
     * را به جایی می‌بردند که هیچ کارتی آنجا نبود و نوار **کاملا خالی** دیده
     * می‌شد — بدون هیچ خطای کنسولی، چون کارت‌ها واقعا رندر شده بودند
     * (ارتفاع ردیف درست بود) ولی بیرون از پنجره دید. خود کارت‌ها پایین‌تر
     * دوباره rtl می‌شوند.
     */
    direction: ltr;

    /*
     * BUG: کارت در هاور چند پیکسل بالا می‌آمد و لبه بالایش را همین
     * overflow می‌بُرید. پدینگ عمودی داخل جعبه برش می‌نشیند، پس همان چند
     * پیکسل را برمی‌گرداند و margin منفی ارتفاع اضافه را پس می‌دهد. عمدا
     * فقط عمودی است: پدینگ افقی وارد `clientWidth` می‌شود و اندازه‌گیری
     * عرض واحد را به هم می‌ریزد.
     */
    padding-block: var(--tk-lift);
    margin-block: calc(-1 * var(--tk-lift));

    /*
     * نوار در ارتفاع ردیف وسط‌چین می‌شود.
     *
     * BUG: track ارتفاع محتوای خودش را دارد و در جریان عادی به **بالای**
     * viewport می‌چسبید؛ هر پیکسلی که ستون سرنام بلندتر بود، یکجا زیر
     * کارت‌ها خالی می‌ماند.
     */
    display: flex;
    align-items: center;

    /*
     * محوشدگی دو لبه با ماسک، نه با یک روکش رنگی.
     *
     * BUG: نسخه اول دو span با گرادیان **سفید** روی لبه‌ها می‌گذاشت. پس‌زمینه
     * ردیف سفید خالص نیست (هر ردیف یک گرادیان شعاعی کم‌رنگ دارد)، پس آن سفیدی
     * با پس‌زمینه یکی نمی‌شد و مثل یک وصله روشن وسط نوار دیده می‌شد — دقیقا در
     * همان گوشه‌ای که پررنگ‌ترین بخش گرادیان است.
     *
     * با ماسک هیچ رنگی چاپ نمی‌شود: خود کارت‌ها به شفافیت می‌روند و پس‌زمینه
     * ردیف — هر رنگی که باشد — دست‌نخورده از زیرشان بیرون می‌زند.
     */
    --tk-fade: 44px;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--tk-fade),
            #000 calc(100% - var(--tk-fade)),
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--tk-fade),
            #000 calc(100% - var(--tk-fade)),
            transparent 100%);

    /* بدون JS (و در حالت کاهش حرکت) نوار فقط یک ردیف قابل اسکرول است. */
    overflow-x: auto;
    scrollbar-width: none;
}

.fap-tk-viewport::-webkit-scrollbar {
    display: none;
}

.fap-tk-row.is-live .fap-tk-viewport {
    overflow-x: hidden;
    cursor: grab;
}

.fap-tk-row.is-live .fap-tk-viewport.is-grabbing {
    cursor: grabbing;
}

.fap-tk-shift {
    display: block;
    will-change: transform;
}

.fap-tk-track {
    display: flex;
    align-items: stretch;
    width: max-content;
}

.fap-tk-row.is-live .fap-tk-track {
    animation: fap-tk-run var(--tk-dur) linear infinite;
    will-change: transform;
}

/*
 * جهت: در حالت rtl محتوا به سمت راست می‌رود، یعنی کارت تازه از لبه چپ وارد
 * می‌شود — هم‌جهت با خواندن فارسی. ردیف دوم عمدا خلاف ردیف اول می‌رود تا مرز
 * دو فهرست دیده شود.
 */
.fap-tk-row--rtl.is-live .fap-tk-track {
    animation-direction: reverse;
}

.fap-tk-row.is-paused .fap-tk-track {
    animation-play-state: paused;
}

@keyframes fap-tk-run {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--tk-unit)), 0, 0);
    }
}

/* =====================================================================
 * کارت
 *
 * فاصله کارت‌ها با margin است نه gap: طول یک «واحد» باید دقیقا برابر مجموع
 * عرض کارت‌ها باشد، وگرنه در محل اتصال دو واحد یک فاصله اضافه می‌افتد و
 * حلقه یک تکان کوچک پیدا می‌کند.
 * ===================================================================== */

.fap-tk-chip {
    direction: rtl;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-end: var(--tk-gap);
    /* پدینگ عمودی عمدا بیشتر از افقی است: ارتفاع کارت باید نزدیک ارتفاع پنل
       سرنام بماند، وگرنه اختلافشان زیر کارت‌ها خالی می‌افتد. */
    padding: 14px 12px 14px 14px;
    border-radius: var(--fap-r-md, 12px);
    border: 1px solid var(--tk-line);
    background: var(--tk-card);
    color: var(--tk-body) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* `is-tapped` را JS روی کارتی می‌گذارد که پاپ‌آورش باز است. روی لمس، :hover
   یا نمی‌آید یا می‌چسبد و نمی‌رود؛ پس تنها نشانه قابل اعتماد همین کلاس است. */
.fap-tk-chip:hover,
.fap-tk-chip:focus-visible,
.fap-tk-chip.is-tapped {
    border-color: var(--fap-brand-200, #c6e9e4);
}

.fap-tk-chip:focus-visible {
    outline: 2px solid var(--tk-teal) !important;
    outline-offset: 2px;
}

.fap-tk-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--fap-c-bg, #f3f7f7);
    border: 1px solid var(--fap-c-line-soft, #edf2f2);
    overflow: hidden;
}

.fap-tk-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.fap-tk-logo-txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    color: hsl(var(--h, 180) 42% 34%);
    background: hsl(var(--h, 180) 60% 95%);
}

.fap-tk-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fap-tk-line1,
.fap-tk-line2 {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.fap-tk-name {
    font-size: var(--fap-fs-md, 14px);
    font-weight: 700;
    color: var(--tk-ink);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fap-tk-sub {
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--tk-muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fap-tk-price {
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    color: var(--tk-ink);
    font-variant-numeric: tabular-nums;
}

.fap-tk-price small {
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 600;
    color: var(--tk-faint);
    margin-inline-start: 3px;
}

.fap-tk-chg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--fap-r-pill, 999px);
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fap-tk-chg--up {
    color: var(--tk-up);
    background: var(--tk-up-bg);
}

.fap-tk-chg--down {
    color: var(--tk-down);
    background: var(--tk-down-bg);
}

.fap-tk-chg--flat {
    color: var(--tk-flat);
    background: var(--tk-flat-bg);
    font-weight: 600;
}

.fap-tk-tri {
    width: 0;
    height: 0;
    border-inline-start: 4px solid transparent;
    border-inline-end: 4px solid transparent;
}

.fap-tk-chg--up .fap-tk-tri,
.fap-tk-mini--up .fap-tk-tri {
    border-bottom: 6px solid currentColor;
}

.fap-tk-chg--down .fap-tk-tri,
.fap-tk-mini--down .fap-tk-tri {
    border-top: 6px solid currentColor;
}

.fap-tk-sparkwrap {
    display: inline-flex;
    width: 56px;
    height: 20px;
    flex: 0 0 auto;
    opacity: .95;
}

.fap-tk-spark {
    width: 56px;
    height: 20px;
}

.fap-tk-spark-l {
    fill: none;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.fap-tk-spark-a {
    stroke: none;
    opacity: .16;
}

.fap-tk-spark--up .fap-tk-spark-l {
    stroke: var(--tk-up);
}

.fap-tk-spark--up .fap-tk-spark-a {
    fill: var(--tk-up);
}

.fap-tk-spark--down .fap-tk-spark-l {
    stroke: var(--tk-down);
}

.fap-tk-spark--down .fap-tk-spark-a {
    fill: var(--tk-down);
}

.fap-tk-spark--flat .fap-tk-spark-l {
    stroke: var(--tk-flat);
}

.fap-tk-spark--flat .fap-tk-spark-a {
    fill: var(--tk-flat);
}

.fap-tk-bubble {
    padding: 1px 7px;
    border-radius: var(--fap-r-pill, 999px);
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 700;
    color: var(--fap-c-warning-strong, #974407);
    background: var(--fap-c-warning-soft, #fffaf0);
}

.fap-tk-bubble--down {
    color: var(--fap-brand-600, #0d8276);
    background: var(--fap-brand-100, #e3f4f1);
}

/* محتوای پاپ‌آور فقط منبع داده است، دیده نمی‌شود. */
.fap-tk-more {
    display: none;
}

/* =====================================================================
 * پاپ‌آور
 *
 * ⚠️ `pointer-events: auto` عمدی است: کاربر باید بتواند اشاره‌گر را روی
 * پاپ‌آور ببرد و متن را بخواند یا رویش کلیک کند. JS تا بسته‌شدن پاپ‌آور،
 * ایست ردیف را نگه می‌دارد.
 * ===================================================================== */

.fap-tk-pop {
    position: absolute;
    z-index: 40;
    top: 0;
    /* عمدا فیزیکی: JS مقدار left را حساب می‌کند. با inset-inline-start در
       ظرف rtl هر دو لبه مقید می‌شدند و مرورگر left را نادیده می‌گرفت. */
    left: 0;
    right: auto;
    width: 268px;
    padding: 12px 14px;
    border-radius: var(--fap-r-md, 12px);
    border: 1px solid var(--tk-line);
    background: #fff;
    box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
    cursor: pointer;
}

.fap-tk-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.fap-tk-pop-title {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 800;
    color: var(--tk-ink);
    line-height: 1.7;
}

.fap-tk-pop-kicker {
    display: block;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--tk-faint);
    margin-bottom: 8px;
}

.fap-tk-pop-rows {
    display: block;
    border-top: 1px dashed var(--tk-line);
    padding-top: 7px;
}

.fap-tk-pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fap-fs-xs, 12px);
    line-height: 2.1;
}

.fap-tk-pop-row>span {
    color: var(--tk-muted);
}

.fap-tk-pop-row b {
    color: var(--tk-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fap-tk-pop-cta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--tk-line);
    font-size: var(--fap-fs-xs, 12px);
    font-weight: 700;
    color: var(--tk-teal-d);
}

.fap-tk-pop-cta::after {
    content: "\2190";
    font-size: var(--fap-fs-md, 14px);
    line-height: 1;
}

/* =====================================================================
 * صفحه کوچک‌تر
 * ===================================================================== */

@media (max-width: 782px) {
    .fap-tk-head {
        gap: 8px 12px;
        padding-bottom: 8px;
    }

    .fap-tk-row {
        /* سرنام بالای نوار می‌رود: با ۲۴۴ پیکسل سرنام، در عرض موبایل چیزی
           برای خود نوار باقی نمی‌ماند. */
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        border-radius: var(--fap-r-md, 12px);
    }

    .fap-tk-rowid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 4px 8px;
    }

    /* در عرض موبایل، سرنام باید یک خط بماند؛ دو خط اکسترمم آن را سه‌طبقه
       می‌کنند و نوار را از صفحه اول بیرون می‌اندازند. شمارش صعودی/نزولی
       می‌ماند. */
    .fap-tk-tops {
        display: none;
    }

    .fap-tk-viewport {
        --tk-fade: 24px;
    }

    .fap-tk-name {
        max-width: 170px;
    }

    .fap-tk-pop {
        width: min(300px, calc(100vw - 44px));
    }
}

/*
 * ⚠️ اینجا قبلا `@media (hover: none) { .fap-tk-pop { display: none } }` بود:
 * روی لمس هیچ راهی به جزئیات نبود و ضربه مستقیم به صفحه می‌رفت. حالا ضربه
 * اول جای هاور را می‌گیرد (منطقش در JS است)، پس پاپ‌آور نباید با مدیا کوئری
 * پنهان شود — تا وقتی JS کلاس `is-open` را نگذارد، خودش نامرئی است.
 *
 * روی صفحه کوچک، پاپ‌آور کمی گشادتر و خواناتر می‌شود چون تنها راه دیدن
 * جزئیات همان است.
 */
@media (max-width: 600px) {
    .fap-tk-pop {
        padding: 13px 15px;
    }

    .fap-tk-pop-row {
        font-size: var(--fap-fs-sm, 13px);
        line-height: 2.2;
    }

    .fap-tk-pop-cta {
        font-size: var(--fap-fs-sm, 13px);
        margin-top: 10px;
        padding-top: 9px;
    }
}

/* =====================================================================
 * کاهش حرکت — نوار می‌ایستد و به ردیف قابل اسکرول تبدیل می‌شود.
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fap-tk-row.is-live .fap-tk-track {
        animation: none;
    }

    .fap-tk-row.is-live .fap-tk-viewport {
        overflow-x: auto;
        cursor: auto;
    }

    .fap-tk-dot::after {
        animation: none;
    }
}