/* جایگاه‌های تبلیغاتی — کلاس‌ها عمداً بدون توکن ad/banner/sponsor هستند (ادبلاکر) */

.irb-slot {
    --irb-slot-radius: 12px;
    --irb-slot-border: #e2e8f0;
    --irb-slot-bg: #fff;
    --irb-slot-text: #1e293b;
    --irb-slot-muted: #64748b;
    --irb-slot-accent: #185adb;
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.irb-slot--stack,
.irb-slot--inline {
    flex-direction: column;
}

.irb-slot__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--irb-slot-border);
    border-radius: var(--irb-slot-radius);
    background: var(--irb-slot-bg);
    color: var(--irb-slot-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.irb-slot__item:hover {
    border-color: var(--irb-slot-accent);
    box-shadow: 0 2px 10px rgba(24, 90, 219, .08);
}

/* برچسب شفافیت */
.irb-slot__flag {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(100, 116, 139, .12);
    color: var(--irb-slot-muted);
    font-size: 10px;
    line-height: 16px;
}

/* تصویرها: ارتفاع را CSS تعیین می‌کند نه اتریبیوت height —
   تم روی img[height] مقدار height:unset می‌گذارد و اتریبیوت را بی‌اثر می‌کند. */
.irb-slot__item img,
.irb-slot__item video {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* وقتی نسخه‌ی موبایل ویدیو باشد، <source media> کار نمی‌کند و انتخاب با CSS است */
@media (max-width: 767px) {
    .irb-slot__media--desktop { display: none; }
}

@media (min-width: 768px) {
    .irb-slot__media--mobile { display: none; }
}

/* بنر هدر: موقعیت و آفست منو را خودِ تم می‌دهد (CSS تم روی .bannerTopAds و
   megamenu.js). اینجا فقط اندازه‌ی تصویر داخل ظرف را تنظیم می‌کنیم، چون قاعده‌ی
   تم به .code-block ادInserter گره خورده بود. */
/* فقط یکی از دو نسخه در هر بریک‌پوینت. قبلاً Ad Inserter سمت سرور تصمیم می‌گرفت
   کدام بلوک اصلاً چاپ شود، پس تم برای این کار قاعده‌ای ندارد. */
@media (max-width: 991px) {
    .bannerTopAds.desktop { display: none; }
}

@media (min-width: 992px) {
    .bannerTopAds.mobileAndtablet { display: none; }
}

/* قاعده‌ی دسکتاپِ تم width:100% دارد ولی موبایلش ندارد (بلوک Ad Inserter عرض
   خودش را می‌آورد)، پس نوار موبایل بدون این، فقط به‌اندازه‌ی تصویر می‌شد. */
@media (max-width: 991px) {
    .bannerTopAds.mobileAndtablet {
        inset-inline: 0;
        width: 100%;
    }
}

.bannerTopAds .irb-slot__item {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 0;
}

.bannerTopAds .irb-slot__item img,
.bannerTopAds .irb-slot__item video {
    width: 100%;
    height: 64px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .bannerTopAds .irb-slot__item img,
    .bannerTopAds .irb-slot__item video {
        height: 56px;
    }
}

/* نوار لوگو استایل اینجا ندارد: مارک‌آپش همان ابزارک قبلی است و CSS تم
   (.hr-ad-item در components/common/ads.css) رویش می‌نشیند. */

.irb-slot__item--banner img,
.irb-slot__item--banner video {
    width: 100%;
}

.irb-slot__item--native {
    align-items: center;
}

.irb-slot__figure {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.irb-slot__figure img {
    max-height: 56px;
}

.irb-slot__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.irb-slot__title {
    font-size: 14px;
    font-weight: 700;
}

.irb-slot__desc {
    font-size: 12px;
    color: var(--irb-slot-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.irb-slot__cta {
    flex: 0 0 auto;
    align-self: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--irb-slot-accent);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

/* زیر چارت کوین/نماد: تعداد بنر = تعداد ستون در دسکتاپ (قرارداد طرح قدیمی)؛
   موبایل مثل قبل پشت‌سرهم. تک‌بنر تمام‌عرض می‌ماند. */
@media (min-width: 768px) {
    .irb-slot--coin_single.irb-slot--count-2,
    .irb-slot--forex_single.irb-slot--count-2,
    .irb-slot--coin_single.irb-slot--count-3,
    .irb-slot--forex_single.irb-slot--count-3 {
        flex-direction: row;
        align-items: stretch;
    }

    .irb-slot--coin_single.irb-slot--count-2 > .irb-slot__item,
    .irb-slot--forex_single.irb-slot--count-2 > .irb-slot__item,
    .irb-slot--coin_single.irb-slot--count-3 > .irb-slot__item,
    .irb-slot--forex_single.irb-slot--count-3 > .irb-slot__item,
    .irb-slot--coin_single.irb-slot--count-2 > .irb-slot__frame,
    .irb-slot--forex_single.irb-slot--count-2 > .irb-slot__frame,
    .irb-slot--coin_single.irb-slot--count-3 > .irb-slot__frame,
    .irb-slot--forex_single.irb-slot--count-3 > .irb-slot__frame {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* هدف‌گیری دستگاه سمت CSS انجام می‌شود چون صفحه کش تمام‌صفحه دارد */
@media (max-width: 767px) {
    .irb-slot__item--only-desktop { display: none; }
}

@media (min-width: 768px) {
    .irb-slot__item--only-mobile { display: none; }
}

@media (max-width: 767px) {
    .irb-slot__figure { width: 48px; height: 48px; }
}

/* ── بین‌متنی: قاب بستنی ─────────────────────────────────────────────
   بستن بدون JS: چک‌باکس مخفی + :has(:checked) روی ظرف. بستن تا پایان همین
   بازدید صفحه می‌ماند — زیر کش تمام‌صفحه، ماندگاری بین‌صفحه‌ای عمداً نداریم.
   دیزاین مصوب؛ فقط نام کلاس‌ها خنثی شده (irb-ad ادبلاکرخور بود). */

.irb-slot__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.irb-slot.irb-slot--inline:has(.irb-slot__toggle:checked) { display: none; }

/* در زون‌های چندآیتمی (زیر چارت نماد) هر قاب جدا بسته می‌شود، نه کل ظرف */
.irb-slot--stack .irb-slot__frame:has(.irb-slot__toggle:checked) { display: none; }

/* قاب زیر چارت هم‌عرض ستون خودش است؛ عرض‌های ثابت بین‌متنی اینجا معنی ندارد */
.irb-slot--stack .irb-slot__frame {
    width: 100%;
    display: block;
}

/* دو کلاس تا از display:flex پایه‌ی .irb-slot قوی‌تر باشد؛ با specificity برابر،
   ترتیب فایل ترکیبی لایت‌اسپید قابل‌اتکا نیست */
.irb-slot.irb-slot--inline {
    display: block;
    margin: 28px 0;
    text-align: center;
}

.irb-slot__frame {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    text-align: start;
}

.irb-slot__frame--970 { width: 970px; }
.irb-slot__frame--728 { width: 728px; }
.irb-slot__frame--600 { width: 600px; }
.irb-slot__frame--336 { width: 336px; }

.irb-slot__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 4px;
    direction: ltr;
}

/* برچسب «آگهی» — بدون letter-spacing چون حروف فارسی را از هم می‌بُرد */
.irb-slot__mark {
    color: #98a2b3;
    font-size: 10px;
    line-height: 1;
}

.irb-slot__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #98a2b3;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease;
}

.irb-slot__close:hover { color: #475467; }
.irb-slot__close:focus-within { outline: 1px solid #98a2b3; outline-offset: 2px; }

/* خلاقه‌ی بنری داخل قاب: بدون کادر و پدینگ، گوشه‌ی گرد ۱۰ — طبق دیزاین */
.irb-slot__frame .irb-slot__item--banner {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 0;
    box-shadow: none;
}

.irb-slot__frame a.irb-slot__item--banner:hover {
    box-shadow: none;
    border-color: transparent;
}

.irb-slot__frame .irb-slot__item--banner img,
.irb-slot__frame .irb-slot__item--banner video {
    border-radius: 10px;
}

@media (max-width: 768px) {
    .irb-slot.irb-slot--inline { margin: 20px 0; }

    .irb-slot__frame,
    .irb-slot__frame--970,
    .irb-slot__frame--728,
    .irb-slot__frame--600,
    .irb-slot__frame--336 {
        display: block;
        width: 100%;
    }

    .irb-slot__close {
        width: 24px;
        height: 24px;
        margin: -4px -4px -4px 0;
    }
}

/* prepaint تم کلاس hr-ad-item را به همه‌ی نوادگان اسلاید می‌دهد نه فقط لینک؛
   کادر کارت روی <img> هم می‌نشست و باکس تودرتو می‌ساخت. فقط لینک کادر بگیرد. */
[data-irb-slot="logo_strip"] .hr-ad-item .hr-ad-item {
    border: 0;
    padding: 0;
    border-radius: 0;
}

[data-irb-slot="logo_strip"] .horizontal-ads-title {
    border: 0;
    padding: 0;
}

/* نیتیو در دسکتاپ کمی درشت‌تر تا توجه بگیرد؛ موبایل همان اندازه‌ی جمع‌وجور */
@media (min-width: 768px) {
    .irb-slot__title { font-size: 17px; }
    .irb-slot__desc { font-size: 14px; }
    .irb-slot__cta { font-size: 13px; padding: 8px 16px; }
}

/* برچسب روی بنر هدر (وقتی روشن باشد): وسطِ ارتفاع، با پس‌زمینه‌ی تیره تا روی بنر خوانا بماند */
.bannerTopAds .irb-slot__flag {
    inset-inline-start: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, .55);
    color: #e2e8f0;
}

/* ── کارت نیتیو لابه‌لای لیستینگ ─────────────────────────────────────
   قاب/شعاع/هاور و بج «آگهی» از کلاس‌های خودِ کارت نهاد می‌آید؛ فقط چیدمان داخلی. */

.irb-plp-card {
    /* کارت خارج از .irb-slot رندر می‌شود؛ بدون این، پس‌زمینه‌ی CTA شفاف می‌ماند */
    --irb-slot-accent: #185adb;
    position: relative;
}

/* مینیمال: یک ردیف کم‌ارتفاع؛ توجه روی CTA است نه قاب */
.irb-plp-card__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.irb-plp-card__figure {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.irb-plp-card__figure img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
}

.irb-plp-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.irb-plp-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.irb-plp-card__desc {
    font-size: 12.5px;
    color: #64748b;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.irb-plp-card .irb-slot__cta {
    align-self: center;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 10px;
    transition: background-color .2s ease;
}

.irb-plp-card__link:hover .irb-slot__cta {
    background-color: #1148b8;
}

@media (max-width: 767px) {
    .irb-plp-card__link { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .irb-plp-card__figure { width: 44px; height: 44px; }
    .irb-plp-card .irb-slot__cta { padding: 8px 14px; font-size: 12.5px; }
}

/* ── بنر شناور ───────────────────────────────────────────────────────
   گوشه‌ی راست پایین (چت سایت سمت چپ است)؛ موبایل بالاتر می‌نشیند و سمت چپ را
   برای آیکون چت خالی می‌گذارد — همان جانمایی بنرهای شناور قبلی. */

.irb-float {
    /* رنگ تاکید per-ad با style روی همین المان override می‌شود؛
       روشن‌ترش را color-mix می‌سازد تا ادمین فقط یک رنگ بدهد */
    --irb-float-accent: #185adb;
    --irb-float-accent-light: color-mix(in srgb, var(--irb-float-accent), #fff 45%);
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 10000;
    padding: 2px;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(25px);
    /* transition نه keyframe: حالتِ نهایی نباید گروگان اجرای انیمیشن باشد
       (تب پس‌زمینه انیمیشن را اجرا نمی‌کند و بنر نامرئی می‌ماند) */
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}

/* بردر متحرک: مخروطی چرخان زیر نوار — طبق دیزاین */
.irb-float::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 58%,
        var(--irb-float-accent) 73%,
        var(--irb-float-accent-light) 80%,
        var(--irb-float-accent) 87%,
        transparent 93%,
        transparent 100%
    );
    animation: irbFloatSpin 3s linear infinite;
    pointer-events: none;
}

@keyframes irbFloatSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* دو کلاس تا با هر ترتیبِ لود (فایل ترکیبی + کپی مستقیم) از پایه قوی‌تر باشد */
.irb-float.irb-float--in {
    opacity: 1;
    transform: translateY(0);
}

.irb-float__bar {
    position: relative; /* بالای بردر متحرک */
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(92vw, 560px);
    padding: 14px 18px;
    background: linear-gradient(135deg, #151c27 0%, #0f1722 100%);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    direction: rtl;
}

.irb-float__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
    border: 0;
    color: #718096;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.irb-float__close:hover {
    color: #fff;
    transform: scale(1.08);
}

.irb-float__link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.irb-float__figure {
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.irb-float__figure img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.irb-float__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.irb-float__mark {
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
}

.irb-float__title {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    white-space: nowrap;
}

.irb-float__sub {
    margin-top: 2px;
    color: #9aaabd;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.irb-float__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--irb-float-accent), #fff 28%), var(--irb-float-accent));
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--irb-float-accent), transparent 70%);
    transition: transform .25s ease, box-shadow .25s ease;
}

.irb-float__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--irb-float-accent), transparent 58%);
    color: #fff;
}

@media (max-width: 600px) {
    .irb-float {
        right: 8px;
        bottom: 76px;
        max-width: calc(100vw - 92px); /* جای آیکون چت سمت چپ */
        border-radius: 14px;
    }

    /* چرخش کندتر روی موبایل — مصرف GPU کمتر (طبق دیزاین) */
    .irb-float::before {
        animation-duration: 5s;
    }

    .irb-float__bar {
        width: 100%;
        max-width: 100%;
        min-height: 58px;
        padding: 8px 9px;
        gap: 5px;
        border-radius: 12px;
    }

    .irb-float__close { font-size: 18px; padding: 1px; }
    .irb-float__link { gap: 6px; }
    .irb-float__figure { width: 34px; height: 34px; flex-basis: 34px; }
    .irb-float__title {
        font-size: 11.5px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .irb-float__sub { display: none; }
    .irb-float__cta {
        min-width: 44px;
        padding: 7px 9px;
        border-radius: 8px;
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .irb-float { transition: none; }
    .irb-float::before { animation: none; }
}

/* کارت لوگو: محتوا وسط‌چینِ هر دو محور با پدینگ جمع‌وجور.
   بعد از prepaint کلاس hr-ad-item روی لینک است؛ :not عنوانِ اسلاید را مستثنا می‌کند
   که همان کلاس را در انتقال می‌گیرد. attr+class از قاعده‌ی تک‌کلاسه‌ی تم قوی‌تر است. */
[data-irb-slot="logo_strip"] .hr-ad-item:not(.horizontal-ads-title):not(img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* اندازه‌ی لوگو عرض‌محور است (۸۰٪ کارت) مثل پروداکشن؛ سقف ارتفاع فقط محافظِ
   حالتِ کم‌لوگوست که کارت‌ها خیلی پهن می‌شوند. پدینگ از خود تم (hr-ad-item) می‌آید. */
[data-irb-slot="logo_strip"] .hr-ad-item img {
    max-height: 120px;
    max-width: 80%;
    width: auto;
}

[data-irb-slot="logo_strip"] .splide__slide {
    min-width: 0;
}

/* ستون‌های هم‌عرض: بدون basis صفر، max-width درصدیِ تصویر به عرض ذاتی ۳۰۰px
   برمی‌گردد و ردیف سرریز می‌کند. فقط دسکتاپ — موبایل را Splide با width اینلاین می‌چیند. */
@media (min-width: 768px) {
    [data-irb-slot="logo_strip"] .splide__slide {
        flex: 1 1 0;
    }
}