/* =========================================================
   Live metal-prices ticker (Gold / Silver / Copper)
   In-flow strip rendered above the header (NSC-style belt).
   ========================================================= */
.live-ticker {
    width: 100%;
    height: 38px;
    overflow: hidden;
    background: #14222a;
    border-bottom: 1px solid rgba(228, 185, 113, 0.18);
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* old Edge/IE */
}
/* Belt-and-braces: never show a scrollbar (AWS/Windows Server use classic, always-visible bars) */
.live-ticker::-webkit-scrollbar,
.live-ticker .ticker-wrapper::-webkit-scrollbar { width: 0; height: 0; display: none; }
.live-ticker .ticker-wrapper { scrollbar-width: none; -ms-overflow-style: none; }

.live-ticker .ticker-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.live-ticker .ticker-wrapper::before,
.live-ticker .ticker-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 2;
    pointer-events: none;
}

.live-ticker .ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #14222a, transparent);
}

.live-ticker .ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #14222a, transparent);
}

.live-ticker .ticker-content {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    will-change: transform;
}

.live-ticker .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 22px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #cdd7d6;
    flex-shrink: 0;
}

.live-ticker .t-sym {
    font-weight: 700;
    color: #e4b971;
    letter-spacing: 1px;
    font-size: 0.7rem;
}

.live-ticker .t-prc {
    color: #f1f5f9;
    font-weight: 400;
}

.live-ticker .t-chg {
    font-size: 0.66rem;
    font-weight: 600;
    margin-left: 1px;
}

.live-ticker .t-chg--up { color: #22c55e; }
.live-ticker .t-chg--dn { color: #ef4444; }

.live-ticker .t-bull {
    color: #e4b971;
    opacity: 0.3;
    font-size: 0.45rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .live-ticker { height: 34px; }
    .live-ticker .ticker-item { padding: 0 15px; font-size: 0.68rem; }
}

/* Seamless marquee — JS duplicates one full set, so -50% loops with no gap or blank ends. */
@keyframes gr-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.live-ticker:hover .ticker-content { animation-play-state: paused; }