.nilera-gold-rate-ribbon {
    --gold-ribbon-bg: #171614;
    --gold-ribbon-bg-soft: #211f1b;
    --gold-ribbon-line: rgba(211, 178, 106, 0.26);
    --gold-ribbon-gold: #d4b36d;
    --gold-ribbon-text: #f5f1e8;
    --gold-ribbon-muted: #c9c1b2;
    --gold-ribbon-soft: rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--gold-ribbon-line);
    color: var(--gold-ribbon-text);
    background:
        linear-gradient(
            100deg,
            var(--gold-ribbon-bg) 0%,
            var(--gold-ribbon-bg-soft) 48%,
            var(--gold-ribbon-bg) 100%
        );
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.nilera-gold-rate-ribbon,
.nilera-gold-rate-ribbon * {
    box-sizing: border-box;
}

.nilera-gold-rate-ribbon__track {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: nowrap;
}

.nilera-gold-rate-ribbon__identity,
.nilera-gold-rate-ribbon__quote,
.nilera-gold-rate-ribbon__meta {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.nilera-gold-rate-ribbon__identity {
    gap: 8px;
    padding-inline: 0 16px;
    font-size: 13px;
}

.nilera-gold-rate-ribbon__identity strong {
    color: #fffaf0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nilera-gold-rate-ribbon__mark {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--gold-ribbon-gold);
    box-shadow: 0 0 0 3px rgba(212, 179, 109, 0.10);
}

.nilera-gold-rate-ribbon__quote {
    gap: 6px;
    padding-inline: 16px;
    border-inline: 1px solid var(--gold-ribbon-soft);
}

.nilera-gold-rate-ribbon__price {
    direction: ltr;
    unicode-bidi: isolate;
    color: #ffffff;
    font-size: 15px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.nilera-gold-rate-ribbon__unit {
    color: var(--gold-ribbon-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.nilera-gold-rate-ribbon__meta {
    gap: 10px;
    padding-inline-start: 16px;
    color: var(--gold-ribbon-muted);
}

.nilera-gold-rate-ribbon__status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #e9e3d8;
    font-size: 11px;
    font-weight: 650;
}

.nilera-gold-rate-ribbon__status[data-gold-status="fresh"] {
    border-color: rgba(106, 184, 140, 0.24);
    color: #c9ead6;
    background: rgba(70, 142, 101, 0.10);
}

.nilera-gold-rate-ribbon__status[data-gold-status="refreshing"] {
    border-color: rgba(212, 179, 109, 0.30);
    color: #ecd7a8;
    background: rgba(212, 179, 109, 0.08);
}

.nilera-gold-rate-ribbon__status[data-gold-status="expired"],
.nilera-gold-rate-ribbon__status[data-gold-status="stale"],
.nilera-gold-rate-ribbon__status[data-gold-status="unavailable"] {
    border-color: rgba(207, 137, 137, 0.22);
    color: #e7c5c5;
    background: rgba(157, 77, 77, 0.08);
}

.nilera-gold-rate-ribbon__time,
.nilera-gold-rate-ribbon__age {
    color: var(--gold-ribbon-muted);
    font-size: 11px;
    font-weight: 450;
}

.nilera-gold-rate-ribbon__age {
    opacity: 0.82;
}

@media (max-width: 991px) {
    .nilera-gold-rate-ribbon__track {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nilera-gold-rate-ribbon__track::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767px) {
    .nilera-gold-rate-ribbon__track {
        min-height: 42px;
        padding-block: 5px;
        font-size: 11.5px;
    }

    .nilera-gold-rate-ribbon__identity {
        padding-inline-end: 11px;
    }

    .nilera-gold-rate-ribbon__quote {
        padding-inline: 11px;
    }

    .nilera-gold-rate-ribbon__meta {
        gap: 7px;
        padding-inline-start: 11px;
    }

    .nilera-gold-rate-ribbon__price {
        font-size: 13.5px;
    }

    .nilera-gold-rate-ribbon__time,
    .nilera-gold-rate-ribbon__age {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nilera-gold-rate-ribbon * {
        scroll-behavior: auto !important;
    }
}
