/* استایل‌های پایه و متغیرها */
:root {
    --primary-color: var(--fap-brand-500, #1aa29a);
    --bg-body: #FFFFFF;
    --text-muted: var(--fap-c-muted, #566a6e);
    --border-color: var(--fap-c-line, #e0e8e9);
    --radius: var(--fap-r-md, 12px);
    --white: #ffffff;
    --text-main: var(--fap-c-ink, #13292d);
}

h1 {
    font-size: 2rem;
}

.container {
    margin: 0 auto;
    max-width: 960px;
}

/* ساختار کلی (Flexbox) */
.listing-wrapper {
    gap: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* این خط بسیار مهم است: از کشیده شدن سایدبار تا انتهای صفحه جلوگیری می‌کند */
}

main.listing-main {
    flex: 1 0;
}

/* نوار ابزار بالا */
.listing-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 10px;
}

/* گرید کارت‌ها */
.ads-grid {
    display: grid;
    gap: 15px;
}

.ad-item-horizontal {
    /* ---- سوییچ چیدمان کارت: افقی (پیش‌فرض) ⇄ عمودی ----
       فقط همین متغیرها در دو جا بازنویسی می‌شوند — بلوک .fap-rec-rail و
       مدیا-کوئری موبایل — و خود قانون‌ها یک‌جا می‌مانند. قبلا کل بلوک قوانین در
       هر دو جا تکرار می‌شد و همین باعث می‌شد یکی جلو بیفتد و آن یکی عقب بماند.
       برای تنظیم ظاهر کارت عمودی فقط همان دو فهرست متغیر را دست بزن. */
    --card-areas:
        "top    top"
        "specs  specs"
        "badges badges"
        "loc    price";
    --card-title-fs: 18px;
    --card-specs-fs: 14px;
    --card-meta-fs: 13px;      /* زمان انتشار / سنجاق / موقعیت */
    --card-price-fs: 17px;
    --card-unit-fs: 13px;      /* واژه «تومان» */
    --card-badge-h: 26px;      /* پیل‌های فرمولا/نمایشگاه و چیپ‌های آیکونی */
    --card-badge-fs: 12px;
    --card-sep-w: 0px;         /* خط جداکننده بالا و پایین بخش قیمت */
    --card-sep-color: #e2e8f0;
    --card-sep-pad: 0px;
    --card-top-justify: flex-start;
    --card-top-pad: 50px;      /* فضای رزرو کنار عنوان برای لوگوی فرمولا */
    --card-amounts-dir: row-reverse;   /* قیمت و خط‌خورده کنار هم */
    --card-amounts-align: baseline;
    --card-amounts-gap: 7px;
    --card-chip: none;         /* چیپ «چقدر کاهش» فقط در کارت عمودی */
    --card-foot-align: end;

    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    padding: 10px;
    position: relative;
    gap: 14px;
    transition: background 0.2s;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--fap-r-xl, 20px);
    /* border: 1px solid #b0cbca1a; */
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    transition: box-shadow 0.28s ease;
}

.ad-item-horizontal:hover {
    transition: box-shadow 0.28s ease;
    border-color: var(--fap-brand-200, #c6e9e4);
}

/* تصویر آگهی */
.ad-image-container {
    position: relative;
    width: 210px;
    /* اندازه دقیق درخواستی */
    height: 130px;
    /* اندازه دقیق درخواستی */
    flex-shrink: 0;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: var(--fap-sh-xs, 0 1px 2px rgba(19, 41, 45, .06));
    border-radius: var(--fap-r-sm, 10px);
}

.ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* جلوگیری از دفرمه شدن عکس */
    display: block;
    transition: transform 0.4s ease;
}

.ad-item-horizontal:hover .ad-image {
    transform: scale(1.05);
}

.ad-photo-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    /* هم‌قد نشان ویدیو: ارتفاع ثابت ۲۶، نه پدینگ دور محتوا (عدد با line-height خودش بلندتر از آیکن تنها بود) */
    box-sizing: border-box;
    height: 26px;
    padding: 0 6px;
    line-height: 1;
    border-radius: var(--fap-r-xs, 6px);
    font-size: var(--fap-fs-xs, 12px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ad-status-badge svg {
    scale: 0.1;
    transform-origin: top left;
}

.ad-video-count {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    /* مربع ۲۶ هم‌قد نشان تعداد عکس، آیکن وسط */
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 0;
    justify-content: center;
    line-height: 1;
    border-radius: var(--fap-r-xs, 6px);
    font-size: var(--fap-fs-xs, 12px);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* محتوای متنی.
   چیدمان با grid-template-areas است نه با ترتیب مارکاپ، چون کارت افقی و کارت عمودی
   همان چهار بلوک را جور دیگری **گروه** می‌کنند:
     افقی → بج‌ها یک ردیف کامل، بعد «موقعیت + قیمت» کنار هم.
     عمودی → قیمت یک ردیف کامل، بعد «موقعیت + بج‌ها» کنار هم.
   چون گروه‌بندی فرق می‌کند نه فقط ترتیب، با ظرف ثابت در مارکاپ (ad-info-bottom سابق)
   شدنی نبود؛ حالا هر چهار بلوک فرزند مستقیم این ظرف‌اند و هر دو چیدمان از یک مارکاپ
   درمی‌آید — پس رندرر PHP و سه دوقلوی JS یکی می‌مانند.
   در RTL ستون اول سمت راست است. */
.ad-info-container {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: var(--card-areas);
    align-content: space-between;
    text-align: right;
    max-width: 100%;
    /* overflow: visible تا تولتیپ چیپ‌ها توسط این ستون بریده نشود (خود کارت همچنان
       کلیپ می‌کند). min-width:0 تا کوتاه‌سازی عنوان همچنان کار کند و ستون پهن نشود. */
    min-width: 0;
    overflow: visible;
}

.ad-info-top  { grid-area: top; }
.ad-specs     { grid-area: specs; }
.ad-info      { grid-area: badges; }
.ad-location  { grid-area: loc; }
.ad-price     { grid-area: price; }

/* ردیف پایانی. افقی: موقعیت و قیمت هم‌کف. عمودی: موقعیت و بج‌ها وسط‌چین نسبت به
   هم، وگرنه پیل ۲۴px و متن موقعیت ۱۸px روی دو خط فرضی می‌نشینند و کج به نظر می‌آید. */
.ad-location,
.ad-price,
.ad-info {
    align-self: var(--card-foot-align);
}

.ad-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    justify-content: var(--card-top-justify);
    width: 100%;
    overflow: hidden;
}

.ad-title {
    min-width: 0;
    font-size: var(--card-title-fs) !important;
    font-weight: 500 !important;
    color: #000000 !important;
    margin: 0;
    overflow: hidden;
    /* اضافه را مخفی می‌کند */
    text-overflow: ellipsis;
    /* ... */
    white-space: nowrap;
    /* تک‌خط */
}

/* پین و زمان نباید کوچک شوند */
.ad-pinned,
.ad-time {
    flex-shrink: 0;
    /* اجازه کوچک شدن ندارند */
}

.ad-pinned {
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--card-meta-fs);
    display: none;
    align-items: center;
    gap: 4px;
}

.ad-time {
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--card-meta-fs);
    display: none;
    align-items: center;
    gap: 4px;
}

.ad-pinned svg {
    color: var(--fap-c-muted, #566a6e);
}

.ad-specs {
    color: var(--fap-c-ink, #13292d);
    font-size: var(--card-specs-fs);
    margin-top: 4px;
}

.separator {
    margin: 0 3px;
    color: var(--fap-c-muted, #566a6e);
    font-weight: bold;
}

.ad-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ad-location {
    color: var(--fap-c-ink, #13292d);
    font-size: var(--card-meta-fs);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    /* ستون موقعیت minmax(0,1fr) است؛ بدون این، نام شهر+محله بلند ستون را باز می‌کند
       و قیمت/بج‌های کنارش را از کارت بیرون می‌راند. */
    min-width: 0;
    overflow: hidden;
}

/* ---- جا برای دنباله حروف فارسی زیر خط پایه ----
   قالب به هدینگ‌ها line-height: 1.2 می‌دهد، یعنی زیر خط پایه فقط ۰٫۵px (موبایل) تا
   ۰٫۸px (دسکتاپ) فضا می‌ماند؛ ولی دنباله «ی/ج/ع» تا ۴–۵px پایین می‌رود. چون
   text-overflow: ellipsis به overflow: hidden نیاز دارد، همان چند پیکسل بریده می‌شد
   (scrollHeight ۱۹ در برابر clientHeight ۱۸).
   راه‌حل: padding کادر کلیپ را پایین‌تر می‌برد و margin منفی هم‌اندازه، همان را از
   ارتفاع چیدمان کم می‌کند — دنباله دیده می‌شود و کارت حتی یک پیکسل بلندتر نمی‌شود.
   بزرگ‌کردن line-height هم جواب می‌داد ولی ۱٫۷ لازم داشت و ردیف عنوان را ~۷px
   بلند می‌کرد؛ کارت عمدا جمع‌وجور است.
   .ad-info-top هم باید همین را بگیرد وگرنه خودش دوباره عنوان را می‌برد. */
.ad-info-top,
.ad-title {
    padding-bottom: 5px;
    margin-bottom: -5px;
}

/* موقعیت هم overflow: hidden دارد (گارد ستون بالا)، با ۲px فاصله قبلی */
.ad-location {
    padding-bottom: 5px;
    margin-bottom: -3px;
}

/* بخش قیمت. در کارت عمودی یک ردیف کامل است و بالا/پایینش یک خط جداکننده کم‌رنگ
   می‌گیرد تا از «عنوان+مشخصات» و «موقعیت+بج‌ها» جدا شود؛ در کارت افقی فقط یک سلول
   کنار موقعیت است و خط آنجا بی‌معنی می‌شود، پس عرض خط از سوییچ صفر می‌آید. */
.ad-price {
    font-size: var(--card-price-fs);
    color: #000;
    /* عمدا longhand است نه shorthand: اگر یک var() داخل shorthand نامعتبر شود،
       کل اعلان «invalid at computed-value time» می‌شود و به unset می‌افتد — یعنی
       border-style هم none می‌شود و خط **کلا ناپدید** می‌شود، نه اینکه فقط بی‌رنگ
       بماند. با longhand بدترین حالت فقط از دست‌رفتن رنگ است.
       رنگ هم از --card-sep-color می‌آید نه --border-color: روی پروداکشن یک قانون با
       انتخابگر سراسری (* { --border-color: initial }) این توکن عمومی را مستقیم روی
       خود المان می‌نشاند و ارث‌بری از :root را می‌بلعد. --card-* نام اختصاصی ماست. */
    border-top-width: var(--card-sep-w);
    border-bottom-width: var(--card-sep-w);
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: var(--card-sep-color, var(--fap-c-line, #e0e8e9));
    border-bottom-color: var(--card-sep-color, var(--fap-c-line, #e0e8e9));
    padding-block: var(--card-sep-pad);
    margin-block: var(--card-sep-pad);
}

.ad-price span {
    font-size: var(--card-unit-fs);
    font-weight: normal;
}

/* قیمت تعدیلی (تخفیف): قیمت اصلی خط‌خورده + قیمت جدید برجسته.
   کارت افقی آرشیو: یک ردیف (معمولا یک خط).
   مارکاپ عمدا «قیمت جدید، بعد بلوک کاهش» است — هم خوانش طبیعی‌تری دارد و هم همان
   ترتیبی است که کارت عمودی می‌خواهد. row-reverse ترتیب قدیمی کارت افقی را برمی‌گرداند
   (خط‌خورده سمت راست قیمت جدید) تا این تغییر ساختاری به دسکتاپ سرایت نکند. */
/* ردیف قیمت: چیپ کاهش یک سمت، «قیمت + قیمت خط‌خورده» سمت دیگر.
   row-reverse در هر دو حالت یکسان است چون در کارت افقی چیپ اصلا رندر نمی‌شود؛
   در کارت عمودی همین باعث می‌شود چیپ سمت چپ و قیمت سمت راست بنشیند. */
.ad-price--off {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* قیمت جدید و قیمت خط‌خورده یک بلوک‌اند و همیشه کنار هم می‌مانند:
     افقی → کنار هم روی یک خط (خط‌خورده سمت راستِ قیمت جدید، مثل قبل).
     عمودی → خط‌خورده دقیقا زیر قیمت جدید و هم‌لبه با آن.
   قبلا خط‌خورده زیر «چیپ» بود؛ چسباندنش به خود قیمت خواندن «از چند به چند» را
   طبیعی‌تر می‌کند و ستون سمت چپ را هم فقط برای چیپ خالی می‌گذارد. */
.ad-price__amounts {
    display: flex;
    flex-direction: var(--card-amounts-dir);
    align-items: var(--card-amounts-align);
    gap: var(--card-amounts-gap);
    line-height: 1.4;
}

/* چیپ فقط در کارت عمودی جا دارد؛ در کارت افقی همان خط‌خورده کافی است و ردیف را
   شلوغ نمی‌کند. رنگش از همان خانواده بج‌های کارت است (bg با آلفا + متن تیره). */
.ad-price__cut-badge {
    display: var(--card-chip);
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--fap-r-pill, 999px);
    background: #a21a2a1f;
    color: var(--fap-c-error-strong, #a91919);
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 600;
    line-height: 1.8;
    white-space: nowrap;
}

.ad-price__old {
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: normal;
    color: var(--fap-c-faint, #98aaae);
    text-decoration: line-through;
}

/* specificity بالاتر از «.ad-price span {13px}» تا قیمت تخفیف‌دار هم‌اندازه قیمت عادی بماند */
.ad-price--off .ad-price__new {
    color: var(--primary-color, var(--fap-brand-500, #1aa29a));
    font-weight: 700;
    font-size: var(--card-price-fs);
    white-space: nowrap;
}

.ad-price--off .ad-price__new span {
    color: inherit;
    font-size: var(--card-unit-fs);
}

/* ============================================================
 *  کارت عمودی — «سوییچ» را روشن می‌کند و بس
 *
 *  دو جا کارت عمودی می‌شود و هر دو باید یک ظاهر بدهند:
 *    ۱) ریل «آگهی‌های پیشنهادی» (.fap-rec-rail) در هر عرضی
 *    ۲) هر لیستینگی در موبایل (بلوک @media max-width:600 پایین همین فایل)
 *
 *  این دو بلوک فقط فهرست متغیرها را بازنویسی می‌کنند و باید **آینه هم** بمانند.
 *  برای تنظیم ظاهر کارت عمودی همین‌جا و همتای موبایلش را دست بزن، نه جای دیگر.
 *
 *  ساختار: عنوان+زمان / مشخصات / ─── / قیمت / ─── / موقعیت + بج‌ها
 * ============================================================ */
.fap-rec-rail > .ad-item-horizontal {
    --card-areas:
        "top    top"
        "specs  specs"
        "price  price"
        "loc    badges";
    --card-title-fs: 14px;
    --card-specs-fs: 12px;
    --card-meta-fs: 11px;
    --card-price-fs: 15px;
    --card-unit-fs: 11px;
    --card-badge-h: 23px;
    --card-badge-fs: 11px;
    --card-sep-w: 1px;
    --card-sep-pad: 7px;
    --card-top-justify: space-between;
    --card-top-pad: 0px;
    --card-amounts-dir: column;        /* خط‌خورده زیر قیمت */
    --card-amounts-align: flex-start;
    --card-amounts-gap: 1px;
    --card-chip: inline-flex;
    --card-foot-align: center;
}

.ad-status-badge {
    position: absolute;
    top: 12px;
    left: 15px;
    /* نشان فرمولا: یک فایل SVG کش‌شونده، نه ۱۰ کیلوبایت SVG درون‌خطی در هر کارت. اندازه همان
       ۳۹۵×۱۷۵ قبلی با scale ۰٫۱ است. */
    width: 39.5px;
    height: 17.5px;
    background: url("../img/ad-badge.svg") no-repeat 0 0 / contain;
}

/* وقتی لوگوی فرمولا (status-badge) نمایش داده می‌شود، برچسب «سنجاق شده» یا زمان
   نباید زیر لوگو برود؛ به همین خاطر در سمت چپ ردیف عنوان فضا رزرو می‌کنیم */
.ad-status-badge:not(.display-none)+.ad-info-top {
    padding-left: var(--card-top-pad);
}


/* بج‌های مینیمال: هر برچسب فقط یک آیکون رنگی داخل یک چیپ دایره‌ای هم‌اندازه است؛
   متن کامل روی هاور (دسکتاپ) یا تپ (موبایل) به‌صورت تولتیپ نمایش داده می‌شود.
   هدف: ثابت‌ماندن ارتفاع کارت‌ها و اندازه تصاویر، به‌ویژه در نمای موبایل. */
.ad-verified-user,
.ad-expert-paper,
.ad-showroom-name,
.ad-formula-name {
    width: var(--card-badge-h);
    height: var(--card-badge-h);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* فقط چیپ‌های تولتیپ‌دار positioned و بالاتر از لایه لینک کارت (z-index:10) می‌شوند
   تا هم مرجع لنگر تولتیپ خودشان باشند و هم هاور/تپ رویشان کار کند. پیل‌های متنی
   (فرمولا/نمایشگاه) static می‌مانند تا زیر لایه لینک بمانند و کلیک، آگهی را باز کند. */
.ad-verified-user,
.ad-expert-paper {
    position: relative;
    z-index: 11;
}

/* SVG درون‌خطی اصلی مخفی می‌شود؛ آیکون هر برچسب از طریق CSS mask (پایین) ساخته
   می‌شود تا در اندازه کوچک تیز بماند و لبه‌اش محو/بریده نشود. */
.ad-verified-user svg,
.ad-expert-paper svg,
.ad-showroom-name svg,
.ad-formula-name svg {
    display: none;
}

/* فقط چیپ‌های آیکونی (احراز هویت/کارشناسی) تولتیپ دارند. تولتیپ از لبه چیپ به‌سمت
   راست باز می‌شود؛ چون ظرف اطلاعات اجازه سرریز دارد، روی موبایل در فضای باز سمت
   راست و روی دسکتاپ روی تصویر شناور می‌شود و بریده نمی‌شود. پیل‌های متنی اینجا نیستند
   تا متنشان روی هاور جابه‌جا نشود. */
.ad-verified-user span,
.ad-expert-paper span {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    margin: 0;
    width: max-content;
    max-width: min(220px, 72vw);
    padding: 5px 9px;
    background: var(--fap-c-ink, #13292d);
    color: #fff;
    font-size: var(--fap-fs-2xs, 11px);
    line-height: 1.6;
    text-align: center;
    white-space: normal;
    border-radius: var(--fap-r-xs, 6px);
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 30;
}

/* پیکان کوچک زیر تولتیپ، روی مرکز چیپ (نزدیک لبه چپ که هم‌تراز چیپ است) */
.ad-verified-user span::after,
.ad-expert-paper span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 8px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

.ad-verified-user:hover span,
.ad-expert-paper:hover span,
.ad-verified-user:focus span,
.ad-expert-paper:focus span {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* هویت رنگی هر برچسب با زمینه کم‌رنگ چیپ حفظ می‌شود (آیکون رنگ خودش را دارد) */
.ad-expert-paper {
    background: #a2971a21;
}

.ad-showroom-name {
    background: #1a2aa221;
}

.ad-formula-name {
    background: #1aa89a27;
}

.ad-verified-user {
    background: #1aa23a21;
}

/* استثنا: «آگهی فرمولا» و «نام نمایشگاه» به‌صورت پیل متنی (آیکون + متن) نمایش
   داده می‌شوند، نه چیپ آیکونی تولتیپ‌دار. */
.ad-showroom-name,
.ad-formula-name {
    width: auto;
    height: var(--card-badge-h);
    max-width: 170px;
    padding: 0 10px;
    border-radius: var(--fap-r-pill, 999px);
    gap: 5px;
    z-index: auto;
    cursor: inherit;
}

.ad-showroom-name span,
.ad-formula-name span {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: var(--card-badge-fs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
}

.ad-showroom-name span {
    color: #1a2aa2;
}

.ad-formula-name span {
    color: var(--fap-brand-500, #1aa29a);
}

.ad-showroom-name span::after,
.ad-formula-name span::after {
    display: none;
}

/* هر چهار آیکون به‌صورت ماسک خطی تمیز با viewBox=24 (رنگ = هویت برچسب).
   شکل و مفهوم مثل قبل است (فرمولا: دایره+تیک، کارشناسی: سند) اما تیز و بدون
   محوشدگی لبه در اندازه کوچک. */
.ad-verified-user::before,
.ad-expert-paper::before,
.ad-showroom-name::before,
.ad-formula-name::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

/* آگهی فرمولا → دایره با تیک (خطی) */
.ad-formula-name::before {
    background-color: var(--fap-brand-500, #1aa29a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E");
}

/* دارای برگه کارشناسی → سند با تیک (خطی) */
.ad-expert-paper::before {
    background-color: #848200;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13.5l1.5 1.5 3-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13.5l1.5 1.5 3-3'/%3E%3C/svg%3E");
}

/* احراز هویت شده → سپر با تیک (خطی). سپر به‌سمت پایین باریک می‌شود و اپتیکالی
   کوچک به‌نظر می‌رسد، پس اندکی بزرگ‌تر از بقیه تنظیم شده است. */
.ad-verified-user::before {
    width: 18px;
    height: 18px;
    background-color: var(--fap-c-success, #137a3a);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-2.9 7.6-7 9-4.1-1.4-7-4.6-7-9V6z'/%3E%3Cpath d='M9 11.8l2 2 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-2.9 7.6-7 9-4.1-1.4-7-4.6-7-9V6z'/%3E%3Cpath d='M9 11.8l2 2 4-4'/%3E%3C/svg%3E");
}

/* نمایشگاه → ویترین مغازه: سایه‌بان ذوزنقه‌ای سرریز + بدنه + در (خطی، واضح) */
.ad-showroom-name::before {
    background-color: #1a2aa2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10v9h14v-9'/%3E%3Cpath d='M3 10l2-5h14l2 5z'/%3E%3Cpath d='M9.5 19v-5h5v5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10v9h14v-9'/%3E%3Cpath d='M3 10l2-5h14l2 5z'/%3E%3Cpath d='M9.5 19v-5h5v5'/%3E%3C/svg%3E");
}


.custom-select-wrapper-ad {
    position: relative;
    display: inline-block;
    width: 220px;
    user-select: none;
    cursor: pointer;
    font-size: var(--fap-fs-md, 14px);
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--fap-field-bg, #f8fafa);
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-r-sm, 10px);
    transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.3s;
}

.custom-select-trigger:hover {
    border-color: var(--fap-field-bd-hover, #c4d2d4);
}

.custom-select-wrapper-ad.open .custom-select-trigger {
    border-color: var(--fap-field-bd-focus, #1aa29a); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); background: var(--fap-field-bg-focus, #fff);
}

.arrow {
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--fap-c-muted, #566a6e);
    border-bottom: 2px solid var(--fap-c-muted, #566a6e);
    transform: rotate(-45deg);
    margin-top: -4px;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.3s;
    border-radius: 0 0 0 4px; /* گوشه فلش حاشیه‌ای؛ توکن نیست (۶ فلش را پهن و تخت می‌کند) */
}

.open .arrow {
    transform: rotate(135deg);
    margin-top: 4px;
}

/* لیست آپشن‌ها */
.custom-options {
    position: absolute;
    display: block;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border: 1px solid var(--fap-menu-bd, #e0e8e9);
    background: var(--fap-menu-bg, #fff);
    transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.3s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    z-index: 100;
    box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    border-radius: var(--fap-menu-r, 12px);
    padding: var(--fap-menu-pad, 6px);
}

.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.custom-option {
    display: block;
    padding: 8px 10px;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.3s;
    text-align: right;
    border-bottom: 0;
    border-radius: var(--fap-menu-item-r, 10px);
}

.custom-option + .custom-option {
    margin-top: var(--fap-item-gap, 2px);
}

.custom-option:last-child {
    border-bottom: 0;
}

.custom-option:hover {
    background: var(--fap-menu-item-hover, #f3f7f7);
    color: var(--fap-c-ink, #13292d);
}

.custom-option.selected {
    background: var(--fap-menu-item-sel-bg, #eef8f6);
    color: var(--fap-menu-item-sel-fg, #0b6c62);
    font-weight: 700;
}


/* پیام «موردی یافت نشد» — empty-state مدرن با آیکن */
.no-results {
    grid-column: 1 / -1;
    margin: 10px 2px;
}

/* عنوان «آگهی‌های پیشنهادی» — divider ظریف با خطوط محوشونده دو طرف */
.rec-title-separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 4px 4px;
    padding: 4px 2px;
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--fap-brand-600, #0d8276);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    justify-content: center;
}

.rec-title-separator::before,
.rec-title-separator::after {
    content: "";
    flex: 1;
    height: 2px;
    max-width: 120px;
    border-radius: 2px;
    background: rgba(26, 168, 153, .3);
}

.rec-title-separator::after {
    background: rgba(26, 168, 153, .3);
}


/* نوار موبایل */
.mobile-filter-bar {
    display: none;
    /* در دسکتاپ مخفی */
    gap: 4px;
    align-items: center;
    padding: 10px;
    padding-left: 0px;
    background: #FFFFFFCC;
    backdrop-filter: blur(14px) !important;
    border: 1px solid var(--fap-c-line, #e0e8e9);
    position: sticky;
    top: 75px;
    z-index: 90;
    min-width: -webkit-fill-available;
    max-width: -webkit-fill-available;
    margin: 0 10px;
    border-radius: var(--fap-r-sm, 10px);
}

/* در نمایشگرهای بزرگ‌تر از ۷۶۶ پیکسل (تا ۹۰۰px که نوار موبایل دیده می‌شود) */
@media (min-width: 767px) {
    .mobile-filter-bar {
        top: 88px;
    }
}

.filter-main-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--fap-c-bg-strong, #e8efef) !important;
    color: var(--fap-c-ink, #13292d);
    border: none !important;
    padding: 8px 16px !important;
    border-radius: var(--fap-r-xl, 20px) !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* مسیر راهنما: جزء واحد .fap-crumbs در fap-msg.css (fap_breadcrumbs)؛ این‌جا فقط جای آن */
.archive-header-box .fap-crumbs {
    margin: 0 0 6px;
}

.filter-main-btn:hover {
    color: var(--fap-c-ink, #13292d);
}

.filter-count-badge {
    background: var(--fap-brand-600, #0d8276);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: var(--fap-fs-2xs, 11px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5px;
    right: -5px;
}

.active-filters-chips {
    padding-left: 10px !important;
    padding-right: 16%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-right: 10px;
    /* فاصله از دکمه فیلتر */
    flex: 1;
    /* جلوگیری از سرریز افقی صفحه: اجازه می‌دهیم آیتم فلکس کوچک شود و خودش اسکرول کند */
    min-width: 0;
    white-space: nowrap;
    scrollbar-width: none;
}

/* محو شدن چیپس‌ها فقط زمانی که محتوا از سمت چپ سرریز و از صفحه خارج می‌شود
   (به‌صورت پیش‌فرض نباید هیچ سایه‌ای روی چیپ اول باشد) */
.active-filters-chips.has-chip-fade {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px);
    mask-image: linear-gradient(to left, transparent 0, #000 56px);
}

.active-filters-chips::-webkit-scrollbar {
    display: none;
}

/* مخفی کردن اسکرول در کروم */

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--fap-brand-50, #eef8f6);
    color: var(--fap-brand-700, #0b6c62);
    padding: 0 12px;
    border-radius: var(--fap-chip-r, 10px);
    font-size: var(--fap-fs-sm, 13px);
    border: 1px solid var(--fap-brand-200, #c6e9e4);
    white-space: nowrap;
    height: 32px;
    padding-inline-end: 4px;
    font-weight: 600;
}

.filter-chip button {
    border: none !important;
    background: none !important;
    font-size: var(--fap-fs-lg, 16px) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    color: inherit !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--fap-r-xs, 6px);
}

.filter-chip button:hover {
    color: var(--fap-brand-700, #0b6c62) !important;
    background: var(--fap-brand-100, #e3f4f1) !important;
}

/* ===== چیپس‌های دسترسی سریع (غیرفعال) داخل همان کادر فیلترهای فعال ===== */
.quick-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: var(--fap-c-muted, #566a6e);
    border: 1px dashed var(--fap-c-line-strong, #c4d2d4);
    padding: 0 12px;
    border-radius: var(--fap-chip-r, 10px);
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .1s ease;
    font-family: inherit;
    line-height: 1.7;
    height: 32px;
}

/* نشانه «افزودن» برای القای حالت کلیک‌پذیر بودن چیپ غیرفعال */
.quick-filter-chip::before {
    content: "+";
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 700;
    line-height: 1;
    color: var(--fap-c-faint, #98aaae);
    transition: color .18s ease;
}

.quick-filter-chip:hover {
    background: var(--fap-c-bg-soft, #f8fafa);
    color: var(--fap-c-ink, #13292d);
    border-color: var(--fap-brand-300, #9fd9d1);
    box-shadow: none;
}

.quick-filter-chip:hover::before {
    color: var(--fap-c-ink, #13292d);
}

#close-filters-btn {
    display: none;
}

span.filter-icon {
    margin-bottom: -4px;
}

/* ظرفیت ردیف سوئیچ */
.switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.switch-row:last-child {
    border-bottom: none;
}

.switch-title {
    font-size: var(--fap-fs-md, 14px);
    font-weight: 500;
    color: var(--fap-c-text, #34494d);
}

/* استایل اصلی سوئیچر (iOS Style) */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.modern-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fap-c-line-strong, #c4d2d4);
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--fap-r-pill, 999px);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: var(--fap-sh-xs, 0 1px 2px rgba(19, 41, 45, .06));
}

/* حالت فعال */
input:checked+.switch-slider {
    background-color: var(--fap-brand-600, #0d8276);
}

input:focus+.switch-slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.switch-slider:before {
    transform: translateX(16px);
    /* حرکت دایره به سمت راست */
}

/* افکت هاور */
.switch-row:hover .switch-title {
    color: var(--primary-color);
    transition: color 0.2s;
}

.sidebar-footer {
    display: none;
}


.header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.header-title-row span {
    margin: 0;
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 800;
}

.archive-header-box {
    margin: 0 auto;
    max-width: 960px;
    padding: 10px;
}

/* ریسپانسیو کردن سایدبار */
@media (max-width: 900px) {
    .rec-title-separator {
        margin: 8px;
    }

    .ads-grid {
        display: grid;
        gap: 0;
    }

    .ad-item-horizontal {
        border-radius: 0px;
    }

    .header-title-row {
        gap: 25px;
        padding: 10px;
        border-bottom: none;
    }

    .active-filters-chips {
        padding-right: 15%;
    }

    /* کادر «موردی یافت نشد» نباید در موبایل به لبه‌ها بچسبد */
    .no-results {
        margin: 12px;
    }

    .listing-main {
        min-width: 100%;
    }

    .listing-wrapper {
        gap: 11px;
        display: flex;
        flex-direction: column;
    }

    .mobile-filter-bar {
        display: flex;
    }

    #close-filters-btn {
        display: block;
    }

    .listing-sidebar {
        position: fixed;
        top: 0 !important;
        right: -100%;
        /* مخفی در سمت راست */
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1000;
        transition: right 0.3s ease;
        display: flex;
        flex-direction: column;
        height: -webkit-fill-available !important;
        position: fixed !important;
        margin-bottom: 0px !important;
        overflow: auto !important;
    }

    .listing-sidebar.open {
        right: 0;
    }

    .sidebar-header.mobile-only {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid var(--fap-c-line, #e0e8e9);
        font-weight: bold;
        font-size: var(--fap-fs-xl, 18px);
    }

    .sidebar-footer.mobile-only {
        padding: 15px;
        border-top: 1px solid var(--fap-c-line, #e0e8e9);
        display: block;
        position: sticky;
        bottom: 0px;
        background: white;
    }

}

/* کارت اسکلتی */
.skeleton-card {
    height: 128px;
    border-bottom: 1px solid var(--fap-c-line, #e0e8e9);
    padding: 15px;
    padding-top: 5px;
    display: flex;
    gap: 16px;
}

.skeleton-image {
    width: 210px;
    height: 110px !important;
    background: linear-gradient(90deg, var(--fap-sk-base, #e3eaea) 25%, var(--fap-sk-hi, #f1f5f5) 40%, var(--fap-sk-base, #e3eaea) 60%) 0 0 / 300% 100%;
    border-radius: var(--fap-r-sm, 10px);
    animation: fap-sk var(--fap-sk-dur, 1.4s) ease-in-out infinite;
}

.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeleton-line {
    height: 15px;
    background: linear-gradient(90deg, var(--fap-sk-base, #e3eaea) 25%, var(--fap-sk-hi, #f1f5f5) 40%, var(--fap-sk-base, #e3eaea) 60%) 0 0 / 300% 100%;
    border-radius: var(--fap-r-xs, 6px);
    animation: fap-sk var(--fap-sk-dur, 1.4s) ease-in-out infinite;
}

.skeleton-line.title {
    width: 40%;
    height: 20px;
}

.skeleton-line.text {
    width: 70%;
}

.skeleton-line.price {
    width: 30%;
    margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-image,
    .skeleton-line,
    .skeleton-list-item {
        animation: none;
    }
}

/* انیمیشن درخشش (Shimmer) */
.shim {
    position: relative;
    overflow: hidden;
}


/* کلاس مخفی کردن عمومی */
.hidden {
    display: none !important;
}

/* استایل گروه فیلترها در سایدبار */
.filter-group {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
    padding-bottom: 15px;
}

.filter-group label {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--fap-c-text, #34494d);
}

.filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-r-sm, 10px);
    font-family: inherit;
    outline: none; background: var(--fap-field-bg, #f8fafa);
}

.filter-input:focus {
    border-color: var(--fap-field-bd-focus, #1aa29a); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); background: var(--fap-field-bg-focus, #fff);
}

/* ظرفیت کلی سایدبار در دسکتاپ */
.listing-sidebar {
    flex: 0 0 280px;
    background: #ffffff;
    /* border: 1px solid #e5e7eb; */
    border-radius: 20px;
    height: fit-content;
    overflow: hidden;
    margin-bottom: 20px;
    transition: top 0.3s ease;
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
}

.listing-sidebar::-webkit-scrollbar {
    width: 6px;
}

.listing-sidebar::-webkit-scrollbar-thumb {
    background: var(--fap-c-line-strong, #c4d2d4);
    border-radius: var(--fap-r-sm, 10px);
}

/* محتوای داخلی سایدبار */
.sidebar-content {
    padding: 20px;
    max-height: none;
    /* برای اسکرول داخلی اگر فیلترها زیاد بود */
    overflow-y: visible;
}

/* هر گروه فیلتر (مثلا گروه برند، گروه قیمت) */
.filter-group {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.filter-group:last-child {
    border-bottom: none;
}

/* عنوان هر فیلتر */
.filter-label {
    display: block;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--fap-c-text, #34494d);
}


/* استایل آکاردئون */
.filter-accordion {
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

/* آکاردئون شعب فرمولا درست به کادر فیلتر بعدی می‌چسبد و جداکننده‌اش زیر لبه آن گم
   می‌شود؛ همان فاصله‌ای را می‌گیرد که بقیه جداکننده‌های سایدبار دارند */
#filter-formula-branch {
    margin-bottom: 10px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fap-fs-md, 14px);
    color: var(--fap-c-text, #34494d);
}

.arrow-icon {
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--fap-c-muted, #566a6e);
    border-bottom: 2px solid var(--fap-c-muted, #566a6e);
    transform: rotate(-45deg);
    /* فلش رو به پایین */
    transition: transform 0.3s ease;
    border-radius: 0 0 0 4px; /* گوشه فلش حاشیه‌ای؛ توکن نیست (۶ فلش را پهن و تخت می‌کند) */
    margin-left: 3px;
}

.filter-accordion.open .arrow-icon {
    transform: rotate(135deg);
    /* فلش رو به بالا */
}

.accordion-content {
    max-height: 0;
    /* در حالت بسته ارتفاع صفر */
    overflow: hidden;
    /* مخفی کردن محتوای بیرون زده */
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    /* انیمیشن نرم */
    opacity: 0;
    padding-bottom: 0;
}

.filter-accordion.open .accordion-content {
    opacity: 1;
    /* ارتفاع در جاوااسکریپت به صورت داینامیک تنظیم می‌شود */
}


/* استایل دکمه‌های چک‌باکس مدرن */
.custom-checkbox-btn {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 6px;
    background: var(--fap-c-bg, #f3f7f7);
    border-radius: var(--fap-r-sm, 10px);
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid transparent;
}

.custom-checkbox-btn:hover {
    background: var(--fap-c-bg, #f3f7f7);
}

.custom-checkbox-btn input {
    display: none;
    /* مخفی کردن چک‌باکس زشت مرورگر */
}

.check-label {
    font-size: var(--fap-fs-sm, 13px);
    color: var(--fap-c-text, #34494d);
}

.check-mark {
    width: 17px;
    height: 17px;
    border: 2px solid var(--fap-c-line-strong, #c4d2d4);
    border-radius: var(--fap-r-xs, 6px);
    position: relative;
    transition: 0.2s;
}

/* حالت انتخاب شده */
.custom-checkbox-btn input:checked+.check-label {
    color: var(--primary-color);
    font-weight: 600;
}

.custom-checkbox-btn input:checked~.check-mark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.custom-checkbox-btn input:checked~.check-mark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* دکمه نمایش بیشتر */
.more-items {
    display: none;
    /* پیش‌فرض مخفی */
}

.show-more-link {
    max-width: fit-content;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: var(--fap-fs-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    width: 100%;
    text-align: right;
}

.show-more-link:hover {
    max-width: fit-content;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: var(--fap-fs-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    width: 100%;
    text-align: right;
}

/* ظرفیت دایره رنگ و متن */
.color-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* دایره رنگی */
.color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

/* اصلاح استایل چک‌باکس برای هماهنگی با دایره رنگ */
.custom-checkbox-btn {
    padding: 8px 12px;
    /* کمی جمع‌وجورتر */
}


.button-open-filters {
    padding-left: 32px !important;
    margin-left: -20% !important;
    /* بدون پس‌زمینه‌ی سفید؛ محوشدگی روی خود چیپس‌ها (mask) انجام می‌شود تا نوار شیشه‌ای دست‌نخورده بماند */
    background: transparent !important;
    z-index: 10 !important;
}

/* استایل تریگر */
.custom-select-wrapper {
    direction: rtl;
    text-align: right;
}

.custom-select-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: var(--fap-fs-md, 14px);
    color: var(--fap-c-text, #34494d);
}

.custom-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 15px;
    background: var(--fap-field-bg, #f8fafa);
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-r-sm, 10px);
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.select-display {
    display: flex;
    flex-direction: column;
}

.select-label {
    font-size: var(--fap-fs-sm, 13px);
    color: var(--fap-c-muted, #566a6e);
}

.select-value {
    font-size: var(--fap-fs-lg, 16px);
    font-weight: bold;
    color: var(--fap-c-ink, #13292d);
    margin-top: 2px;
}

.arrow-icon {
    color: var(--fap-c-line-strong, #c4d2d4);
    font-size: 12px;
}

/* حالت انتخاب شده */
.custom-select.has-selection {
    background-color: var(--fap-field-bg, #f8fafa);
    border-color: var(--fap-field-bd, #d6e0e1);
}

.custom-select.has-selection .select-label,
.custom-select.has-selection .select-value,
.custom-select.has-selection .arrow-icon {
    color: var(--fap-c-ink, #13292d);
}

/* استایل پاپ‌آپ */

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* آیکون رنگ (اگر نیاز داشتید) */
.color-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--fap-c-line, #e0e8e9);
}

.year-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.price-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 145px;
}

.input-unit {
    pointer-events: none !important;
    color: #000000 !important;
}

.close-custom-select {
    font-size: var(--fap-fs-2xl, 22px);
    color: #000000;
    /* قرمز */
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    z-index: 10;
}

.arrow-custom-select {
    font-size: var(--fap-fs-xs, 12px);
    color: var(--fap-c-muted, #566a6e);
    transition: transform 0.3s;
}

/* حالت انتخاب شده برای تریگر */
.custom-select.has-selection .select-value {
    color: var(--fap-c-ink, #13292d);
}

/* وضعیت پایه مـودال */

/* وقتی مـودال باز است */

/* استایل محتوای مـودال */


/* انیمیشن خروج (وقتی کلاس closing اضافه می‌شود) */


.price-range-section {
    max-height: 500px;
    /* مقدار تقریبی برای انیمیشن */
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    opacity: 1;
}

.price-range-section.hidden-price {
    max-height: 0;
    opacity: 0;
    /* margin-top: -20px; */
    pointer-events: none;
}

.custom-price-area {
    position: sticky;
    bottom: 0;
    display: none;
    /* پیش‌فرض مخفی */
    background: #fff;
    padding: 15px;
    border-top: 2px solid var(--primary-color);
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    animation: slideUp 0.3s ease-out;
}

.custom-price-inner label {
    display: block;
    font-size: var(--fap-fs-2xs, 11px);
    color: var(--fap-c-muted, #566a6e);
    margin-bottom: 8px;
}

.input-row {
    display: flex;
    gap: 10px;
}

.input-row input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-r-sm, 10px);
    font-family: inherit;
    font-size: var(--fap-fs-lg, 16px);
    outline: none; background: var(--fap-field-bg, #f8fafa);
}

.input-row input:focus {
    border-color: var(--fap-field-bd-focus, #1aa29a); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); background: var(--fap-field-bg-focus, #fff);
}

.input-row button {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: 0 20px !important;
    border-radius: var(--fap-r-sm, 10px) !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* استایل تب سوییچ (Segmented Control) */
.segmented-control {
    display: flex;
    background: var(--fap-c-bg-strong, #e8efef);
    padding: 4px;
    border-radius: var(--fap-seg-r, 12px);
    margin-bottom: 3px;
    position: relative;
    user-select: none;
}

.mileage-status-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.mileage-select-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.segmented-control input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: var(--fap-fs-sm, 13px);
    color: var(--fap-c-muted, #566a6e);
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}

/* وقتی انتخاب شد */
.segmented-control input:checked+label {
    color: var(--fap-c-ink, #13292d);
    font-weight: 700;
}

.segmented-control input:focus-visible+label {
    border-radius: var(--fap-seg-item-r, 8px);
    box-shadow: inset 0 0 0 2px var(--fap-brand-300, #9fd9d1);
}

/* نوار متحرک زیر تب */
.selection-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(33.33% - 3px);
    /* تقسیم بر ۳ منهای پدینگ */
    background: #fff;
    border-radius: var(--fap-seg-item-r, 8px);
    box-shadow: var(--fap-sh-xs, 0 1px 2px rgba(19, 41, 45, .06));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* حرکت نوار بر اساس انتخاب */
#mileage-all:checked~.selection-indicator {
    transform: translateX(200%);
}

/* راست‌ترین */
#mileage-zero:checked~.selection-indicator {
    transform: translateX(100%);
}

/* وسط */
#mileage-used:checked~.selection-indicator {
    transform: translateX(0);
}

/* چپ‌ترین */

/* انیمیشن باز شدن بخش کیلومتر */
.mileage-range-section {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}

.hidden-mileage {
    max-height: 0;
    opacity: 0;
    margin-top: -10px;
    pointer-events: none;
}

/* استایل لیست شهرها با چک‌باکس */

.btn-primary:disabled {
    background: #1aa29a73 !important;
    cursor: not-allowed !important
}

button.btn-secondary {
    padding: 15px 25px !important;
    width: 100% !important;
    background: var(--fap-c-bg-strong, #e8efef) !important;
    border-radius: var(--fap-r-sm, 10px) !important;
    border: 0px solid var(--fap-c-line, #e0e8e9) !important;
    cursor: pointer !important;
    color: #000000 !important;
}

button.btn-secondary:hover {
    padding: 15px 25px !important;
    width: 100% !important;
    background: var(--fap-c-bg-strong, #e8efef) !important;
    border-radius: var(--fap-r-sm, 10px) !important;
    border: 0px solid var(--fap-c-line, #e0e8e9) !important;
    cursor: pointer !important;
    color: #000000 !important;
}

button#close-filters-btn {
    padding: 0px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    /* رنگ صریح تا آیکون X (که با currentColor رسم می‌شود) رنگ صورتی تم را ارث نبرد */
    color: var(--fap-c-text, #34494d) !important;
}

button#close-filters-btn svg {
    margin-bottom: -5px !important;
}

/* حالت فعال محتوا (بالا آمدن) */

.ad-item-horizontal {
    position: relative;
}

.ad-card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
}

/* استایل سطر لودینگ در مودال */
.skeleton-list-item {
    height: 45px;
    width: 98%;
    margin-right: 1%;
    margin-bottom: 8px;
    margin-top: 8px;
    border-radius: var(--fap-r-sm, 10px);
    background: linear-gradient(90deg, var(--fap-sk-base, #e3eaea) 25%, var(--fap-sk-hi, #f1f5f5) 40%, var(--fap-sk-base, #e3eaea) 60%) 0 0 / 300% 100%;
    position: relative;
    overflow: hidden;
    animation: fap-sk var(--fap-sk-dur, 1.4s) ease-in-out infinite;
}

/* انیمیشن شیمر (Shimmer) */

.ad-info a,
.ad-info button {
    z-index: 11 !important;
    position: relative !important;
}

/* برای اینکه دکمه‌های داخلی از کار نیفتند */


/* حالت موبایل تمام‌صفحه */

/* ریسپانسیو برای موبایل — کارت عمودی.
   قرارداد این بریک‌پوینت از ۱۴۰۵/۰۶/۰۳ عوض شد: پیش از این کارت در موبایل افقی و
   تمام‌عرض بود (gap صفر، گوشه صاف، یک خط جداکننده) و لیست یک‌تکه دیده می‌شد.
   حالا همان چیدمانی را می‌گیرد که ریل «آگهی‌های پیشنهادی» دارد — تصویر تمام‌عرض
   بالا، اطلاعات زیرش — ولی تک‌ستونی و تمام‌عرض صفحه.
   هر جای دیگری که روی «تمام‌عرض چسبیده» حساب باز کرده بود باید همراهش عوض شود؛
   تا امروز فقط .fap-rv-adstack-list در car-review.css چنین چیزی داشت. */
@media (max-width: 600px) {
    h1 {
        font-size: var(--fap-fs-2xl, 22px);
    }

    .active-filters-chips {
        padding-right: 12%;
    }

    body {
        padding: 0px;
    }

    /* کارت‌ها دیگر به هم و به لبه صفحه نمی‌چسبند */
    .ads-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 0 12px;
    }

    /* ظرف‌های داشبورد/آرشیو کاربر خودشان margin دارند؛ با gap گرید دوباره‌کاری می‌شود */
    .ads-grid > .user-ad-wrapper,
    .ads-grid > .user-ad-card-wrapper {
        margin-bottom: 0;
    }

    /* افقی → عمودی */
    .ad-item-horizontal {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 10px;
        gap: 10px;
        border: none;
        border-radius: var(--fap-r-lg, 16px);
    }

    /* تصویر تمام‌عرض بالای کارت. نسبت ۲۷۰×۱۵۰ همان ابعاد width/height خود تگ img
       است، پس ارتفاع از اول رزرو می‌شود و کارت موقع لود تصویر نمی‌پرد.
       max-height فقط نزدیک سقف بریک‌پوینت اثر دارد: روی گوشی ۳۷۵–۴۳۰px ارتفاع
       ۱۹۰–۲۱۵px درمی‌آید، ولی در ۶۰۰px بدون سقف به ۳۰۹px می‌رسید و کارت بدقواره
       می‌شد. چون سقف هم از CSS می‌آید نه از خود تصویر، پرش چیدمان ایجاد نمی‌کند. */
    .ad-image-container {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 270 / 150;
        max-height: 240px;
        background-color: var(--fap-c-bg-strong, #e8efef);
    }

    .ad-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .ad-info-container {
        width: 100%;
        max-width: 100%;
    }

    /* کارت عمودی — آینه بلوک .fap-rec-rail بالای همین فایل.
       کارت موبایل تمام‌عرض است (~۳۴۶px در برابر ~۲۳۰px ریل)، پس یک پله درشت‌تر
       می‌ماند؛ باقی مقادیر عمدا عین هم‌اند. */
    .ad-item-horizontal {
        --card-areas:
            "top    top"
            "specs  specs"
            "price  price"
            "loc    badges";
        --card-title-fs: 15px;
        --card-specs-fs: 12px;
        --card-meta-fs: 11px;
        --card-price-fs: 17px;
        --card-unit-fs: 12px;
        --card-badge-h: 24px;
        --card-badge-fs: 11px;
        --card-sep-w: 1px;
        --card-sep-pad: 8px;
        --card-top-justify: space-between;
        --card-top-pad: 0px;
        --card-amounts-dir: column;
        --card-amounts-align: flex-start;
        --card-amounts-gap: 1px;
        --card-chip: inline-flex;
        --card-foot-align: center;
    }

    .ad-title {
        flex: 1;
    }

    .listing-toolbar {
        justify-content: flex-start;
        margin-right: 10px;
    }

    /* لوگوی فرمولا روی تصویر می‌ماند و چون تصویر تمام‌عرض شده، همان بالا-چپِ
       پیش‌فرض درست است (پیش‌تر به بالا-راست منتقل می‌شد تا روی تصویر کوچک بیفتد). */
    .ad-status-badge {
        top: 12px;
        left: 15px;
        right: auto;
    }

    /* اسکلتون لود هم عمودی می‌شود، وگرنه موقع جایگزینی با کارت واقعی صفحه می‌پرد */
    .skeleton-card {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
        border-bottom: none;
    }

    .skeleton-image {
        width: 100%;
        height: auto !important;
        aspect-ratio: 270 / 150;
        max-height: 240px;
    }

    .skeleton-content {
        width: 100%;
        flex: none;
        gap: 12px;
    }

    .skeleton-line.title {
        width: 70%;
    }

    .skeleton-line.text {
        width: 85%;
    }

    .skeleton-line.price {
        width: 45%;
        margin-top: 4px;
    }

}


/* برای حذف سنجاق یا زمان انتشار آگهی در لیستینگ */
.ad-p-t-flex {
    display: flex !important;
}

/* برای حذف تعداد تصاویر وقتی تصویری برای آگهی وجود نداره */
.display-none {
    display: none !important;
}


.user-ad-wrapper {
    background: #fff;
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    margin-bottom: 20px;
    border: 1px solid var(--fap-c-line, #e0e8e9);
}

.ad-dashboard-controls {
    display: flex;
    padding: 12px;
    gap: 10px;
    background: var(--fap-c-bg-soft, #f8fafa);
}

/* دکمه‌ها دکمه واحدند (.fap-btn--sm)؛ این‌جا فقط تقسیم عرض */
.ad-dashboard-controls .fap-btn {
    flex: 1 1 0;
    min-width: 0;
}

.ad-stats-bar {
    display: flex;
    justify-content: center;
    background: var(--fap-c-bg-soft, #f8fafa);
    padding: 5px;
    font-size: var(--fap-fs-xs, 12px);
    color: var(--fap-c-muted, #566a6e);
    width: 335px;
    margin: 0 auto;
    gap: 8px;
}

.stat-item strong {
    color: var(--fap-c-ink, #13292d);
}

.stat-item span {
    color: var(--fap-brand-50, #eef8f6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: var(--fap-r-sm, 10px);
    background-color: var(--fap-brand-500, #1aa29a);
    gap: 3px;
    min-width: 70px;
    min-height: 70px;
}

.user-ad-card-wrapper {
    background: #fff;
    border-radius: var(--fap-r-xl, 20px);
    overflow: hidden;
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    margin-bottom: 25px;
    border: 1px solid var(--fap-c-line, #e0e8e9);
}

.input-wrapper {
    display: flex;
    align-items: center
}

.input-unit {
    pointer-events: none
}

.media-card:hover .overlay-actions {
    opacity: 1
}

/* ==========================================================================
   محتوای سئوی انتهای آرشیو (کادر با «مشاهده کامل محتوا»)
   هم‌سبک با کارت‌های آرشیو: کارت سفید، شعاع 20px و همان سایه، اکسنت تیل سایت (#1AA29A).
   ========================================================================== */
.fap-archive-seo-content {
    max-width: 960px;
    margin: 28px auto 8px;
}

/* محتوا زودتر در DOM (بعد از H1، قبل از آگهی‌ها) قرار می‌گیرد ولی با order بصری در انتهای صفحه
   نمایش داده می‌شود تا کرالر ابتدا محتوا را ببیند بعد آگهی‌ها. چون flex + margin:auto فرزندان را
   جمع می‌کند، عرض کامل را تثبیت می‌کنیم تا هدر/مسیرراهنما/لیست مثل قبل (۹۶۰px و راست‌چین) بمانند. */
.fap-archive-wrapper {
    display: flex;
    flex-direction: column;
}

.fap-archive-wrapper > .archive-header-box,
.fap-archive-wrapper > .container,
.fap-archive-wrapper > .fap-archive-seo-content {
    width: 100%;
    box-sizing: border-box;
}

.fap-archive-wrapper > .fap-archive-seo-content {
    order: 99;
}

.fap-archive-seo-content .fap-seo-content-card {
    background: #fff;
    border-radius: var(--fap-r-xl, 20px);
    box-shadow: var(--fap-sh-sm, 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05));
    padding: 24px 26px;
    color: var(--fap-c-ink, #13292d);
    font-size: var(--fap-fs-lg, 16px);
    line-height: 2;
    text-align: justify;
}

.fap-seo-content-card .fap-seo-content-body {
    position: relative;
    overflow: hidden;
    transition: max-height .3s ease;
}

.fap-seo-content-card[data-collapsed="true"] .fap-seo-content-body {
    max-height: 190px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.fap-seo-content-card[data-collapsed="false"] .fap-seo-content-body {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.fap-seo-content-card .fap-seo-content-body > *:first-child {
    margin-top: 0;
}

.fap-seo-content-card .fap-seo-content-body h1,
.fap-seo-content-card .fap-seo-content-body h2,
.fap-seo-content-card .fap-seo-content-body h3,
.fap-seo-content-card .fap-seo-content-body h4 {
    color: var(--fap-c-ink, #13292d);
    line-height: 1.7;
    margin: 1em 0 .5em;
    font-weight: 700;
}

.fap-seo-content-card .fap-seo-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--fap-r-md, 12px);
}

.fap-seo-content-card .fap-seo-content-body a {
    color: var(--fap-brand-500, #1aa29a);
}

.fap-seo-content-actions {
    text-align: center;
    margin-top: 16px;
}

/* دکمه «مشاهده کامل محتوا»: دکمه واحد (.fap-btn--soft) */

@media (max-width: 600px) {
    .fap-archive-seo-content .fap-seo-content-card {
        padding: 18px;
        border-radius: var(--fap-r-lg, 16px);
    }
}

/* ————— چت‌بات هنگام باز بودن فیلترها زیر آن‌ها می‌رود ————— */
/* در موبایل، دراور فیلتر (z-index: 1000) و پاپ‌آپ‌های آن مثل مکان و برند
   (z-index: 2000) تمام‌صفحه هستند، ولی لانچر و پنل چت‌بات با z-index
   99990/99991 روی آن‌ها می‌ماندند. تا وقتی یکی از این لایه‌ها باز است،
   archive-car.js / archive-motorcycle.js کلاس fap-overlay-open را روی body
   می‌گذارد و قانون زیر روی ریشه چت‌بات یک stacking context با z-index پایین
   می‌سازد؛ در نتیجه همه فرزندهای fixed آن (لانچر و پنل) هم زیر دراور و
   پاپ‌آپ‌ها می‌افتند، بدون اینکه لایه‌بندی بقیه صفحه — مثل توست 9999 —
   دست بخورد. */
body.fap-overlay-open #fap-ai-root {
    position: relative;
    z-index: 500;
}