/* ==========================================================================
   USCE Market Ticker — Frontend Styles
   Designed to integrate seamlessly with the US Coin Events dark premium theme.
   ========================================================================== */

:root {
    --usce-ticker-bg:           rgba(7,13,24,0.88);
    --usce-ticker-border:       rgba(255,255,255,0.07);
    --usce-ticker-text:         #8fa3bd;
    --usce-ticker-label:        #c8a042;
    --usce-ticker-price:        #e2eaf5;
    --usce-ticker-sep:          rgba(255,255,255,0.08);
    --usce-ticker-up:           #10b981;
    --usce-ticker-down:         #ef4444;
    --usce-ticker-flat:         #4a6080;
    --usce-ticker-stale:        #f59e0b;
    --usce-ticker-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --usce-ticker-font-size:    0.77rem;
    --usce-ticker-height:       34px;
    --usce-ticker-pad-x:        18px;
    --usce-ticker-gap:          22px;
    --usce-ticker-radius:       0px;
    --usce-ticker-transition:   color 0.35s ease, opacity 0.3s ease;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.usce-ticker {
    display:         flex;
    align-items:     center;
    gap:             var(--usce-ticker-gap);
    height:          var(--usce-ticker-height);
    padding:         0 var(--usce-ticker-pad-x);
    background:      var(--usce-ticker-bg);
    border-bottom:   1px solid var(--usce-ticker-border);
    font-family:     var(--usce-ticker-font);
    font-size:       var(--usce-ticker-font-size);
    color:           var(--usce-ticker-text);
    letter-spacing:  0.02em;
    border-radius:   var(--usce-ticker-radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-wrap:       nowrap;
    white-space:     nowrap;
    overflow:        hidden;
    line-height:     1;
    position:        relative;
    z-index:         100;
}

/* When inside Flatsome top bar — transparent, inherit height */
.flatsome-top-bar .usce-ticker,
.header-top .usce-ticker,
#top .usce-ticker,
.top-bar .usce-ticker,
.top-bar-inner .usce-ticker,
.top-bar-section .usce-ticker {
    background:  transparent;
    border:      none;
    height:      100%;
    padding:     0;
}

/* Fallback wrapper (wp_body_open injection) */
.usce-ticker-fallback-wrapper {
    width:       100%;
    background:  rgba(7,13,24,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display:     flex;
    justify-content: center;
}

/* ── Metal item ──────────────────────────────────────────────────────────── */
.usce-ticker__item {
    display:     flex;
    align-items: center;
    gap:         7px;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.usce-ticker__label {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--usce-ticker-label);
}

/* ── Price ───────────────────────────────────────────────────────────────── */
.usce-ticker__price {
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--usce-ticker-price);
    font-variant-numeric: tabular-nums;
    transition:  var(--usce-ticker-transition);
    letter-spacing: 0.01em;
}

@keyframes usce-flash {
    0%   { opacity: 1; }
    25%  { opacity: 0.3; }
    100% { opacity: 1; }
}
.usce-ticker__price--updating {
    animation: usce-flash 0.45s ease;
}

/* ── Directional indicator ───────────────────────────────────────────────── */
.usce-ticker__indicator {
    display:     flex;
    align-items: center;
    width:       10px;
    height:      10px;
    flex-shrink: 0;
    transition:  color 0.35s ease;
}
.usce-ticker__indicator--up    { color: var(--usce-ticker-up); }
.usce-ticker__indicator--down  { color: var(--usce-ticker-down); }
.usce-ticker__indicator--flat  { color: var(--usce-ticker-flat); }

.usce-arrow { display: block; width: 10px; height: 10px; }

/* ── Separator ───────────────────────────────────────────────────────────── */
.usce-ticker__sep {
    display:    block;
    width:      1px;
    height:     14px;
    background: var(--usce-ticker-sep);
    flex-shrink: 0;
}

/* ── Updated timestamp ───────────────────────────────────────────────────── */
.usce-ticker__updated {
    font-size:  0.66rem;
    color:      var(--usce-ticker-flat);
    opacity:    0.65;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Stale notice ────────────────────────────────────────────────────────── */
.usce-ticker--stale .usce-ticker__price { opacity: 0.45; }
.usce-ticker__stale-notice {
    font-size:  0.66rem;
    color:      var(--usce-ticker-stale);
    font-style: italic;
    flex-shrink: 0;
}

/* ── Light header variant ────────────────────────────────────────────────── */
.usce-ticker--light {
    --usce-ticker-bg:     rgba(255, 255, 255, 0.94);
    --usce-ticker-text:   #2c3e5a;
    --usce-ticker-label:  #9a7520;
    --usce-ticker-price:  #0b1929;
    --usce-ticker-sep:    rgba(0,0,0,0.10);
}

/* ── Compact variant ─────────────────────────────────────────────────────── */
.usce-ticker--compact {
    --usce-ticker-height:    28px;
    --usce-ticker-font-size: 0.70rem;
    --usce-ticker-gap:       14px;
    --usce-ticker-pad-x:     12px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .usce-ticker {
        gap:       12px;
        padding:   0 12px;
    }
    .usce-ticker__updated,
    .usce-ticker__stale-notice {
        display: none;
    }
    .usce-ticker__label { font-size: 0.62rem; }
    .usce-ticker__price { font-size: 0.74rem; }
}
@media (max-width: 380px) {
    .usce-ticker__sep { display: none; }
}