/* ============================================================
   WP Crypto Ticker — ticker.css
   All values driven by CSS custom properties.
   Override the entire look from a child theme's style.css:

   :root {
     --ticker-bg: #0f172a;         (dark background example)
     --ticker-symbol-color: #e2e8f0;
     ...etc
   }
   ============================================================ */

/* ── Custom properties (theme tokens) ──────────────────────────────────── */
:root {
  --ticker-bg:                #ffffff;
  --ticker-border-top:        none;
  --ticker-border-bottom:     1px solid #e8e8e8;
  --ticker-height:            38px;
  --ticker-height-mobile:     34px;

  /* Typography */
  --ticker-font-family:       'Courier New', Courier, monospace;
  --ticker-symbol-font:       inherit;
  --ticker-symbol-color:      #111111;
  --ticker-symbol-weight:     700;
  --ticker-price-color:       #666666;
  --ticker-price-size:        12px;

  /* Badges */
  --ticker-up-bg:             #16a34a;
  --ticker-up-color:          #ffffff;
  --ticker-down-bg:           #dc2626;
  --ticker-down-color:        #ffffff;
  --ticker-flat-bg:           #94a3b8;
  --ticker-flat-color:        #ffffff;
  --ticker-badge-radius:      3px;
  --ticker-badge-font-size:   11px;

  /* Divider between items */
  --ticker-divider-color:     rgba(0, 0, 0, 0.12);

  /* Timestamp / Delayed */
  --ticker-timestamp-color:   #aaaaaa;
  --ticker-timestamp-size:    10px;
  --ticker-delayed-color:     #d97706;

  /* Fade masks — must match --ticker-bg */
  --ticker-fade-color:        #ffffff;
  --ticker-fade-width:        50px;

  /* Scroll */
  --ticker-scroll-duration:   60s;
  --ticker-item-gap:          24px;

  /* Layout */
  --ticker-z-index:           999;
}

/* ── Bar container ──────────────────────────────────────────────────────── */
.wp-ticker-bar {
  display:          flex;
  align-items:      center;
  width:            100%;
  height:           var(--ticker-height);
  background:       var(--ticker-bg);
  border-top:       var(--ticker-border-top);
  border-bottom:    var(--ticker-border-bottom);
  font-family:      var(--ticker-font-family);
  overflow:         hidden;
  position:         relative;
  z-index:          var(--ticker-z-index);
  box-sizing:       border-box;
  pointer-events:   none;
}

.wp-ticker-bar--sticky {
  position:  sticky;
  top:       0;
  left:      0;
  right:     0;
}

/* ── Inner track wrapper ────────────────────────────────────────────────── */
.wp-ticker-inner {
  flex:       1;
  overflow:   hidden;
  position:   relative;
  height:     100%;
  min-width:  0;
}

/* ── Scroll track ───────────────────────────────────────────────────────── */
.wp-ticker-track {
  display:          flex;
  align-items:      center;
  height:           100%;
  white-space:      nowrap;
  will-change:      transform;
  animation:        ticker-scroll var(--ticker-scroll-duration) linear infinite;
}

.wp-ticker-bar:hover .wp-ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% because items are duplicated */
}

/* ── Individual items ───────────────────────────────────────────────────── */
.wp-ticker-item {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        0 var(--ticker-item-gap);
  border-right:   1px solid var(--ticker-divider-color);
  height:         100%;
  cursor:         default;
  flex-shrink:    0;
}

.wp-ticker-item:last-child {
  border-right: none;
}

/* Symbol */
.wp-ticker-symbol {
  font-family:  var(--ticker-symbol-font);
  color:        var(--ticker-symbol-color);
  font-weight:  var(--ticker-symbol-weight);
  font-size:    13px;
  letter-spacing: 0.02em;
}

/* Price */
.wp-ticker-price {
  color:      var(--ticker-price-color);
  font-size:  var(--ticker-price-size);
}

/* % change badge */
.wp-ticker-change {
  display:       inline-flex;
  align-items:   center;
  gap:           2px;
  padding:       1px 5px;
  border-radius: var(--ticker-badge-radius);
  font-size:     var(--ticker-badge-font-size);
  font-weight:   600;
  line-height:   1.4;
  white-space:   nowrap;
}

.wp-ticker-change.up {
  background: var(--ticker-up-bg);
  color:      var(--ticker-up-color);
}

.wp-ticker-change.down {
  background: var(--ticker-down-bg);
  color:      var(--ticker-down-color);
}

.wp-ticker-change.flat {
  background: var(--ticker-flat-bg);
  color:      var(--ticker-flat-color);
}

/* Delayed label (commodity items only) */
.wp-ticker-delayed {
  font-size:  8px;
  color:      var(--ticker-delayed-color);
  font-weight: 500;
  text-transform: uppercase;
  align-self: flex-end;
  margin-bottom: 3px;
  line-height: 1;
}

/* ── Fade gradient masks ────────────────────────────────────────────────── */
.wp-ticker-fade-left,
.wp-ticker-fade-right {
  position:  absolute;
  top:       0;
  bottom:    0;
  width:     var(--ticker-fade-width);
  z-index:   2;
  pointer-events: none;
}

.wp-ticker-fade-left {
  left:       0;
  background: linear-gradient(to right, var(--ticker-fade-color) 0%, transparent 100%);
}

.wp-ticker-fade-right {
  right:      0;
  background: linear-gradient(to left, var(--ticker-fade-color) 0%, transparent 100%);
}

/* ── Meta (timestamp / Delayed label) ───────────────────────────────────── */
.wp-ticker-meta {
  flex-shrink:  0;
  padding:      0 10px 0 8px;
  white-space:  nowrap;
  z-index:      3;
  background:   var(--ticker-bg);
}

.wp-ticker-timestamp {
  color:      var(--ticker-timestamp-color);
  font-size:  var(--ticker-timestamp-size);
}

.wp-ticker-delayed-label {
  color:      var(--ticker-delayed-color);
  font-size:  var(--ticker-timestamp-size);
  font-weight: 600;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wp-ticker-bar {
    height: var(--ticker-height-mobile);
  }

  .wp-ticker-symbol {
    font-size: 12px;
  }

  .wp-ticker-price {
    font-size: 11px;
  }

  .wp-ticker-change {
    font-size: 10px;
  }

  .wp-ticker-meta {
    display: none; /* Timestamp hidden on mobile */
  }
}