/* ===================================================================
   نوار نرخ ارز و طلا زیر منو (partials/rate-ticker، ته partials/header)
   موبایل و تبلت: نوار تمام‌عرض زیر نوار منو.
   دسکتاپ: نوار سفید تمام‌عرض چسبیده به زیر منو؛ روی بخش اول صفحه
   می‌نشیند و چیزی را جابه‌جا نمی‌کند.
   حرکت فقط با CSS؛ روی هاور/فوکوس می‌ایستد و با prefers-reduced-motion
   اصلاً حرکت نمی‌کند. ارتفاع ثابت تا با بارگذاری صفحه چیزی جابه‌جا نشود.
   فهرست دو بار آمده: جابه‌جایی نصف عرض نوار = یک فهرست، پس تکرار بی‌درز است.
   =================================================================== */

.rate-ticker {
    --rate-ticker-height: 32px;
    display: flex;
    align-items: stretch;
    height: var(--rate-ticker-height);
    overflow: hidden;
    background: #0b3a45;
    color: #eef5f6;
    font-family: inherit;
    font-size: 12px;
    line-height: var(--rate-ticker-height);
}

.rate-ticker__meta {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding-inline: 10px;
    background: #072a33;
    white-space: nowrap;
}

.rate-ticker__title {
    display: none;
    font-weight: 700;
}

.rate-ticker__time {
    font-size: 12px;
    opacity: .8;
}

.rate-ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* نرخ‌ها در دو سر نوار محو می‌شوند، نه این‌که وسط حرف بریده شوند */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.rate-ticker__belt {
    display: flex;
    width: max-content;
    animation: rate-ticker-rtl var(--rate-ticker-duration, 60s) linear infinite;
}

[dir="ltr"] .rate-ticker__belt {
    animation-name: rate-ticker-ltr;
}

.rate-ticker:hover .rate-ticker__belt,
.rate-ticker:focus-within .rate-ticker__belt {
    animation-play-state: paused;
}

.rate-ticker__list {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rate-ticker__item {
    padding-inline: 12px;
    border-inline-end: 1px solid rgba(255, 255, 255, .14);
    white-space: nowrap;
}

.rate-ticker__name {
    opacity: .82;
}

.rate-ticker__value {
    font-weight: 700;
}

.rate-ticker__unit {
    font-size: 11px;
    opacity: .7;
}

.rate-ticker__item--up .rate-ticker__value,
.rate-ticker__item--up .rate-ticker__arrow {
    color: #5ee08e;
}

.rate-ticker__item--down .rate-ticker__value,
.rate-ticker__item--down .rate-ticker__arrow {
    color: #ff8a8a;
}

.rate-ticker__arrow {
    font-size: 10px;
}

.rate-ticker__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes rate-ticker-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@keyframes rate-ticker-ltr {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* بدون حرکت: فهرست با کشیدن/اسکرول افقی دیده می‌شود */
@media (prefers-reduced-motion: reduce) {
    .rate-ticker__belt {
        animation: none;
    }

    .rate-ticker__viewport {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .rate-ticker__list[aria-hidden="true"] {
        display: none;
    }
}

@media (min-width: 576px) {
    .rate-ticker {
        --rate-ticker-height: 36px;
        font-size: 13px;
    }

    .rate-ticker__title {
        display: inline;
    }

    .rate-ticker__meta {
        padding-inline: 14px;
    }

    .rate-ticker__item {
        padding-inline: 18px;
    }
}

/* دسکتاپ: منوی قالب (.trp_nav_area) مطلق و همیشه ۱۰۱px بلند است
   (لینک‌های ۱۰۰px به‌علاوه‌ی خط زیرش)؛ نوار تمام‌عرض درست زیر آن می‌نشیند
   و مثل ادامه‌ی هدر سفید است. قالب در دو بازه منو را کارت گرد با ۳۰px
   فاصله از بالا می‌کند (۱۰۲۵ تا ۱۱۶۹ تمام‌عرض، از ۱۸۲۱ به بعد با ۳۵px
   فاصله از کناره‌ها)؛ آن‌جا نوار هم‌عرض کارت است و گوشه‌های پایین کارت
   به نوار منتقل می‌شود. این فایل فقط وقتی نوار هست بار می‌شود. */
@media (min-width: 992px) {
    .em40_header_area_main {
        position: relative;
    }

    .rate-ticker {
        --rate-ticker-height: 38px;
        --rate-ticker-top: 101px;
        --rate-ticker-inset: 0px;
        --rate-ticker-radius: 0px;
        position: absolute;
        inset-block-start: var(--rate-ticker-top);
        inset-inline: var(--rate-ticker-inset);
        z-index: 999;
        background: #fff;
        color: #0B4654;
        border-radius: 0 0 var(--rate-ticker-radius) var(--rate-ticker-radius);
        box-shadow: inset 0 1px 0 #edf0f2, 0 14px 24px -16px rgba(11, 70, 84, .45);
    }

    .rate-ticker__meta {
        background: #0B4654;
        color: #fff;
        padding-inline: 30px 16px;
    }

    .rate-ticker__item {
        border-inline-end-color: rgba(11, 70, 84, .14);
    }

    .rate-ticker__name {
        color: #4D6459;
        opacity: 1;
    }

    .rate-ticker__unit {
        color: #6B7C86;
        opacity: 1;
    }

    .rate-ticker__item--up .rate-ticker__value,
    .rate-ticker__item--up .rate-ticker__arrow {
        color: #15803d;
    }

    .rate-ticker__item--down .rate-ticker__value,
    .rate-ticker__item--down .rate-ticker__arrow {
        color: #dc2626;
    }
}

@media (min-width: 1025px) and (max-width: 1169px) {
    .rate-ticker {
        --rate-ticker-top: 131px;
    }
}

@media (min-width: 1821px) {
    .rate-ticker {
        --rate-ticker-top: 131px;
        --rate-ticker-inset: 35px;
    }
}

@media (min-width: 1025px) and (max-width: 1169px), (min-width: 1821px) {
    .rate-ticker {
        --rate-ticker-radius: 20px;
    }

    /* کارت منو و نوار یک کارت‌اند: گوشه‌های پایین کارت منو صاف، گوشه‌های نوار گرد */
    .loginet-main-menu.transparent-two .trp_nav_area:not(.hbg2) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /* فاصله‌ی بالای سرتیتر اصلی برای منوی ۳۰px پایین‌تر حساب شده بود؛ نوار هم به آن اضافه می‌شود */
    .elementor-5403 .elementor-element.elementor-element-622b720 {
        padding-top: 189px;
    }
}

.rate-ticker-note {
    margin: 6px 0 0;
    font-size: 12px;
    opacity: .75;
}