/* ════════════════════════════════════════════════════════════════════
   نوارِ نازکِ نرخِ لحظه‌ای — بالای هدر
   ════════════════════════════════════════════════════════════════════
   عمداً حداقلی: یک ردیفِ کم‌ارتفاع، بدونِ سایه/گردیِ اضافه، رنگش از پالتِ خودِ
   قالب می‌آید تا با هدر یکدست دیده شود، نه یک بنرِ جدا.
*/

.dm-price-ticker {
    position: relative;
    z-index: var(--dm-z-header-top, 1210); /* یک پله بالاتر از هدر — همیشه رویش دیده شود */
}

/*
 * ⚠ سلکتور عمداً دو کلاسه است (.dm-price-ticker .dm-price-ticker__bar) نه یک
 * کلاسِ تنها. دکمه هم‌زمان کلاسِ dm-gold-modal-trigger را دارد (تا مودالِ خودِ
 * dm-gold باز شود) و آن افزونه خودش روی همان کلاس یک قاعده دارد:
 * dm-gold-public.css → .dm-gold-modal-trigger { background:transparent; color:inherit; }
 * هر دو سلکتور تک‌کلاسه‌اند (وزنِ برابر)، پس در تساوی برندهٔ کش، شیتی‌ست که
 * دیرتر لود شود — و dm-gold-public.css بعد از این فایل می‌آید. نتیجه‌اش این بود:
 * پس‌زمینه‌ی نوار transparent می‌شد و متن رنگِ inherit (روی صفحهٔ روشن، تقریباً
 * نامرئی)، فقط با هاور (که قاعدهٔ خودِ ما جداگانه و صریح بود) موقتاً درست
 * می‌شد. راه‌حلِ درست جنگِ !important نیست (با هر آپدیتِ dm-gold دوباره شکننده
 * می‌ماند)؛ وزنِ سلکتور بالا رفت تا مستقل از ترتیبِ لود همیشه برنده باشد.
 */
.dm-price-ticker .dm-price-ticker__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--dm-secondary, #06061c);
    color: rgba(255, 255, 255, .92);
    border: none;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
}

.dm-price-ticker .dm-price-ticker__bar:hover {
    background: #0b0b2a;
}

/*
 * ⚠ `min-width:0` ضروری است: بدونِ آن، آیتمِ فلکسی که overflow-x:auto دارد
 * هرگز کوچک‌تر از عرضِ طبیعیِ محتوایش نمی‌شود (پیش‌فرضِ مرورگرها روی
 * flex-item، min-width:auto است) — یعنی اسکرولِ افقی اصلاً فعال نمی‌شود و
 * به‌جایش کلِ نوار (یا دکمهٔ والدش) پهن/شلوغ می‌شود. `flex:1 1 0` هم فضای
 * باقی‌ماندهٔ کنارِ برچسبِ «به‌روزرسانی» و شورونِ سمتِ راست را می‌گیرد، نه
 * فقط عرضِ محتوای خودش را.
 */
/*
 * ⚠ وسط‌چین، نه راست‌چین (درخواستِ صریح).
 * `justify-content: center` وقتی محتوا از عرضِ ظرف کمتر است نرخ‌ها را وسط
 * می‌نشاند. اما به‌تنهایی کافی نیست: همین ظرف overflow-x دارد و در حالتِ سرریز،
 * `center` اولین آیتم را از دسترسِ اسکرول بیرون می‌اندازد (نقصِ شناخته‌شدهٔ
 * فلکس‌باکس؛ ابتدای ناحیهٔ اسکرول بریده می‌شود و هیچ‌طور نمی‌شود به آن رسید).
 * `justify-content: safe center` دقیقاً برای همین است: تا وقتی جا هست وسط‌چین
 * می‌کند و به‌محضِ سرریز به شروع برمی‌گردد. خطِ اولی برای مرورگرهایی است که
 * کلیدواژهٔ safe را نمی‌شناسند و کلِ اعلان را نادیده می‌گیرند.
 */
.dm-price-ticker__track {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 16px;
    flex: 1 1 0%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
    max-width: 100%;
}
.dm-price-ticker__track::-webkit-scrollbar { display: none; }

.dm-price-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* آیکونِ کوچکِ هر ردیف (طلا/نقره/دلار) — پیش از برچسب، رنگش با متنِ برچسب هماهنگ است */
.dm-price-ticker__item-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .75);
}
.dm-price-ticker__item-icon svg { width: 13px; height: 13px; }

.dm-price-ticker__item-label {
    color: rgba(255, 255, 255, .6);
}

.dm-price-ticker__item-price {
    font-weight: 800;
    color: #fff;
    direction: ltr;
    unicode-bidi: isolate;
}

.dm-price-ticker__item-price::after {
    content: " " attr(data-suffix);
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
}

.dm-price-ticker__sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.dm-price-ticker__loading {
    color: rgba(255, 255, 255, .55);
}

.dm-price-ticker__updated {
    flex-shrink: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dm-price-ticker__updated-clock {
    color: rgba(255, 255, 255, .75);
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

/* نقطهٔ کوچکِ چشمک‌زن — همان حسِ «زنده و در حالِ به‌روزرسانی» که خواسته شده بود */
.dm-price-ticker__updated::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f9e6a;
    animation: dm-ticker-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes dm-ticker-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

.dm-price-ticker__chevron {
    flex-shrink: 0;
    transform: rotate(-90deg); /* رو به پایین: «برای جزئیات باز کن» */
    opacity: .7;
}

@media (max-width: 768px) {
    .dm-price-ticker .dm-price-ticker__bar { padding: 6px 10px; gap: 8px; font-size: 11px; }
    .dm-price-ticker__track { gap: 12px; }

    /*
     * ⚠ برچسبِ «به‌روزرسانی: …» کاملاً حذف می‌شود، نه فقط کوچک — روی موبایل
     * جایی که این نوار خودش تنگ است، این بخش فضایی را می‌گرفت که به نمایشِ
     * بیشترِ ردیفِ نرخ‌ها (که با اسکرولِ افقی دیده می‌شود) می‌رسید. دسکتاپ
     * دست‌نخورده می‌ماند.
     */
    .dm-price-ticker__updated {
        display: none !important;
    }
}

body.theme-dark .dm-price-ticker .dm-price-ticker__bar {
    background: #000010;
}
body.theme-dark .dm-price-ticker .dm-price-ticker__bar:hover {
    background: #050518;
}