/* ============================================================
 *  آگهی‌های پیشنهادی — شورت‌کد [fap_recommended_ads]
 *  کارت عمودی + ریل اسکرول افقی (کاروسل) + فلش ناوبری دسکتاپ
 *  ویژوال داخلی کارت‌ها از archive.css می‌آید؛ اینجا فقط چیدمان override می‌شود.
 * ============================================================ */

.fap-recommendations {
    direction: rtl;
    width: 100%;
    margin: 30px 0;
    box-sizing: border-box;
}

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

/* ---------- سربرگ: عنوان + فلش‌ها ---------- */
.fap-rec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
    padding: 0 4px;
}

/* بدون عنوان (مثلا صفحه اصلی که عنوان جداگانه دارید): فلش‌ها زیر عنوان صفحه وسط‌چین */
.fap-rec-head--nav-only {
    justify-content: center;
}

/* چینش دستی فلش‌ها (RTL): right=سمت راست، left=سمت چپ، center=وسط */
.fap-rec-head--align-right {
    justify-content: flex-start;
}

.fap-rec-head--align-left {
    justify-content: flex-end;
}

.fap-rec-head--align-center {
    justify-content: center;
}

.fap-rec-title {
    margin: 0;
    font-family: var(--fap-font, 'Vazirmatn', 'FAP Vazirmatn', Tahoma, sans-serif);
    font-size: var(--fap-fs-xl, 18px);
    font-weight: 700;
    color: var(--fap-c-ink, #13292d);
    line-height: 1.6;
}

.fap-rec-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.fap-rec-prev,
.fap-rec-next {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--fap-c-line, #e0e8e9);
    background: #ffffff;
    color: var(--fap-brand-500, #1aa29a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.fap-rec-prev:hover,
.fap-rec-next:hover,
.fap-rec-prev:focus,
.fap-rec-next:focus {
    background: var(--fap-brand-500, #1aa29a);
    color: #ffffff;
    border-color: var(--fap-brand-500, #1aa29a);
}

.fap-rec-prev:disabled,
.fap-rec-next:disabled {
    opacity: 0.4;
    cursor: default;
    background: #ffffff;
    color: var(--fap-c-faint, #98aaae);
    border-color: var(--fap-c-line, #e0e8e9);
}

/* ---------- ریل افقی ---------- */
.fap-rec-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    /* فضای عمودی کافی تا سایه هاور کارت‌ها از بالا و پایین بریده نشود */
    padding: 16px 4px 30px;
    scroll-snap-type: x mandatory;
    /* جای چسبیدن کارت اول = همان پدینگ؛ وگرنه مرورگر هنگام بارگذاری ریل را ۴ پیکسل جلو می‌برد. scroll-behavior: smooth
       هم نیست: آن جابه‌جایی را انیمیشن کامپوزیتور می‌کرد که کروم «اسکرول کاربر» می‌شمارد و ثبت LCP را پیش از اولین
       رنگ‌آمیزی می‌بست (پیج‌اسپید دسکتاپ خانه: NO_LCP). فلش‌ها و پخش خودکار نرمی را خودشان می‌دهند (behavior: 'smooth'). */
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}

.fap-rec-rail::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* ---------- کارت عمودی (override اسکوپ‌شده کارت افقی archive.css) ---------- */
.fap-rec-rail > .ad-item-horizontal {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-direction: column;
    gap: 10px;
    width: 78%;                     /* موبایل: ~۱.۳ کارت با نمایش جزئی کارت بعدی */
    scroll-snap-align: start;
    /* حفظ گردی گوشه‌ها در همه سایزها (archive.css در ≤۹۰۰px آن را صفر می‌کند) */
    border-radius: 20px;
}

.fap-recommendations .ad-image-container {
    width: 100%;                    /* به‌جای ۲۱۰px افقی */
    height: 160px;
    background-color: var(--fap-c-bg-strong, #e8efef);      /* پس‌زمینه ملایم برای تصاویر کوچک‌تر/شفاف */
}

/* اینجا سه قانون بی‌دامنه با !important بود (.ad-info-top، h3.ad-title و
   padding ردیف عنوان) که چون این فایل بعد از archive.css لود می‌شود، روی **هر**
   کارتی در صفحه — از جمله کارت افقی آرشیو — می‌نشست. حالا همان رفتار از سوییچ
   کارت عمودی در archive.css می‌آید (--card-top-justify / --card-title-fs /
   --card-top-pad)، پس اینجا حذف شدند تا دو منبع حقیقت نداشته باشیم. */

/* تصویر همیشه وسط‌چین و پوششی؛ هر تصویری با هر ابعادی بدون دفرمه‌شدن لود می‌شود */
.fap-recommendations .ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* تصویر و اطلاعات تمام‌عرض زیر هم قرار می‌گیرند */
.fap-recommendations .ad-info-container {
    width: 100%;
    max-width: 100%;
}

/* ---------- ریسپانسیو: تعداد کارت‌های قابل‌دیدن ---------- */
@media (min-width: 560px) {
    .fap-rec-rail > .ad-item-horizontal {
        width: 46%;                 /* ~۲ کارت */
    }
}

@media (min-width: 768px) {
    .fap-rec-rail > .ad-item-horizontal {
        width: 31%;                 /* ~۳ کارت */
    }
}

@media (min-width: 1024px) {
    .fap-rec-rail > .ad-item-horizontal {
        width: calc((100% - 42px) / 4); /* دقیقا ۴ کارت (۳ فاصله ۱۴px) */
    }
}

/* در موبایل فلش‌ها مخفی؛ فقط سواید/اسکرول */
@media (max-width: 767px) {
    .fap-rec-nav {
        display: none;
    }

    .fap-recommendations {
        margin: 20px 0;
    }
}

/* ============================================================
 *  نسخه تب‌دار — فقط [fap_recommended_ads branch_tabs="yes"] (صفحه اصلی)
 *  همه قوانین زیر به .fap-rec--tabs دامنه دارند تا هیچ‌کدام از کاربردهای
 *  دیگر همین شورت‌کد در سایت تغییر نکنند.
 * ============================================================ */

/* سربرگ: تب‌ها از سمت راست، فلش‌ها انتهای ردیف (در RTL یعنی سمت چپ) */
.fap-rec--tabs .fap-rec-head--tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 0;
}

.fap-rec--tabs .fap-rec-head--tabs .fap-rec-title {
    flex-shrink: 0;
}

.fap-rec--tabs .fap-rec-nav {
    margin-inline-start: auto;   /* هل دادن فلش‌ها به انتهای ردیف = سمت چپ */
}

/* ---------- نوار تب ---------- */
.fap-rec-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    /* اجازه کوچک‌شدن آیتم فلکس تا نوار خودش اسکرول کند و صفحه سرریز افقی نگیرد */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* سایه تب فعال (۲px آفست + ۸px بلور) ۱۰ پیکسل از پیل بیرون می‌زند و ظرف
       اسکرول‌شونده آن را می‌بُرید — سایه از پایین «کات» می‌خورد. پدینگ داخل
       ناحیه اسکرول می‌نشیند پس سایه جا می‌شود، و حاشیه منفی عمودی همان اندازه
       را پس می‌دهد تا ارتفاع ردیف عوض نشود. عمدا فقط عمودی منفی است: حاشیه
       منفی افقی روی موبایل نوار را از لبه صفحه بیرون می‌برد و اسکرول افقی
       ناخواسته می‌سازد. */
    padding: 12px 10px;
    margin-block: -12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.fap-rec-tabs::-webkit-scrollbar {
    display: none;
}

.fap-rec-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--fap-chip-r, 10px);
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    background: #fff;
    color: var(--fap-c-text, #34494d);
    font-family: var(--fap-font, 'Vazirmatn', 'FAP Vazirmatn', Tahoma, sans-serif);
    font-size: var(--fap-fs-md, 14px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    gap: 6px;
    height: 38px;
}

.fap-rec-tab.is-active {
    background: var(--fap-brand-50, #eef8f6);
    border-color: var(--fap-brand-600, #0d8276);
    color: var(--fap-brand-700, #0b6c62);
    box-shadow: none;
}

/* ---------- حالت بارگذاری ---------- */
.fap-recommendations.is-loading .fap-rec-rail {
    opacity: .45;
    pointer-events: none;
    transition: opacity .18s ease;
}

.fap-recommendations.is-loading .fap-rec-tabs {
    pointer-events: none;
}

/* ---------- پیام «آگهی ندارد» ---------- */
.fap-rec-empty {
    margin: 24px 4px;
    padding: 28px 18px;
    border: 0;
    border-radius: var(--fap-r-md, 12px);
    background: transparent;
    color: var(--fap-c-muted, #566a6e);
    font-family: var(--fap-font, 'Vazirmatn', 'FAP Vazirmatn', Tahoma, sans-serif);
    font-size: var(--fap-fs-md, 14px);
    text-align: center;
}

/* ---------- زره ضد قالب ----------
   قالب سایت رنگ hover/focus/active دکمه‌ها را بازنویسی می‌کند (مثلا
   .elementor-widget button:hover). این بلوک آخرین حرف را می‌زند و فقط به
   بخش تب‌دار دامنه دارد. اگر عنصر تعاملی تازه‌ای اضافه شد، حالت‌هایش را
   همین‌جا هم اضافه کن. */
.fap-rec--tabs .fap-rec-tab,
.fap-rec--tabs .fap-rec-tab:hover,
.fap-rec--tabs .fap-rec-tab:focus,
.fap-rec--tabs .fap-rec-tab:active {
    outline: none !important;
    text-decoration: none !important;
}

.fap-rec--tabs .fap-rec-tab:hover,
.fap-rec--tabs .fap-rec-tab:focus-visible {
    background: var(--fap-c-bg-soft, #f8fafa) !important;
    color: var(--fap-c-ink, #13292d) !important;
    border-color: var(--fap-c-line-strong, #c4d2d4) !important;
}

.fap-rec--tabs .fap-rec-tab.is-active,
.fap-rec--tabs .fap-rec-tab.is-active:hover,
.fap-rec--tabs .fap-rec-tab.is-active:focus,
.fap-rec--tabs .fap-rec-tab.is-active:focus-visible,
.fap-rec--tabs .fap-rec-tab.is-active:active {
    background: var(--fap-brand-50, #eef8f6) !important;
    color: var(--fap-brand-700, #0b6c62) !important;
    border-color: var(--fap-brand-600, #0d8276) !important;
}

.fap-rec-tab.is-active::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fap-rec--tabs .fap-rec-tab:focus-visible {
    box-shadow: 0 0 0 3px var(--fap-brand-100, #e3f4f1) !important;
}

.fap-rec--tabs .fap-rec-prev,
.fap-rec--tabs .fap-rec-next {
    background: #ffffff !important;
    color: var(--fap-brand-500, #1aa29a) !important;
    border-color: var(--fap-c-line, #e0e8e9) !important;
}

.fap-rec--tabs .fap-rec-prev:hover,
.fap-rec--tabs .fap-rec-next:hover,
.fap-rec--tabs .fap-rec-prev:focus-visible,
.fap-rec--tabs .fap-rec-next:focus-visible {
    background: var(--fap-brand-500, #1aa29a) !important;
    color: #ffffff !important;
    border-color: var(--fap-brand-500, #1aa29a) !important;
}

.fap-rec--tabs .fap-rec-prev:disabled,
.fap-rec--tabs .fap-rec-next:disabled {
    background: #ffffff !important;
    color: var(--fap-c-faint, #98aaae) !important;
    border-color: var(--fap-c-line, #e0e8e9) !important;
}

/* ---------- موبایل: تب‌ها تمام‌عرض و اسکرولی ---------- */
@media (max-width: 767px) {
    .fap-rec--tabs .fap-rec-head--tabs {
        margin-inline: -4px;
        padding: 0 4px;
    }

    /* روی موبایل نوار تب تنها فرزند ردیف است (فلش‌ها مخفی‌اند)، پس پدینگ افقی
       کمتر تا تب اول با کارت‌های زیرش هم‌تراز بماند. */
    .fap-rec-tabs {
        padding-inline: 6px;
    }

    .fap-rec-tab {
        padding: 0 12px;
        font-size: var(--fap-fs-sm, 13px);
        height: 34px;
}
}