/* ============================================================
   UBRT Stock Ticker - Front-End Styles
   UBRTNews.com | Version 1.0.0
   ============================================================ */

:root {
  --ubrt-bg:        #0d0d0d;
  --ubrt-text:      #f0f0f0;
  --ubrt-label-bg:  #d62828;
  --ubrt-label-fg:  #ffffff;
  --ubrt-up:        #00d26a;
  --ubrt-down:      #ff4d4d;
  --ubrt-neutral:   #aaaaaa;
  --ubrt-sep:       #333333;
  --ubrt-height:    40px;
  --ubrt-font-size: 13px;
  --ubrt-font:      'Arial', 'Helvetica Neue', sans-serif;
}

/* ── Wrapper ───────────────────────────────────────────────── */
.ubrt-ticker-wrap {
  display:          flex;
  align-items:      center;
  background:       var(--ubrt-bg);
  height:           var(--ubrt-height);
  width:            100%;
  overflow:         hidden;
  position:         relative;
  font-family:      var(--ubrt-font);
  font-size:        var(--ubrt-font-size);
  box-sizing:       border-box;
  z-index:          9999;
  border-bottom:    1px solid #1a1a1a;
}

/* ── Label badge ──────────────────────────────────────────── */
.ubrt-ticker-label {
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     var(--ubrt-label-bg);
  color:          var(--ubrt-label-fg);
  font-weight:    700;
  font-size:      11px;
  letter-spacing: 1.5px;
  padding:        0 14px;
  height:         100%;
  white-space:    nowrap;
  flex-shrink:    0;
  text-transform: uppercase;
  z-index:        2;
}

/* ── Viewport / mask ──────────────────────────────────────── */
.ubrt-ticker-viewport {
  flex:           1;
  overflow:       hidden;
  height:         100%;
  position:       relative;
  /* Fade edges for polished look */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}

/* ── Scrolling track ──────────────────────────────────────── */
.ubrt-ticker-track {
  display:        flex;
  align-items:    center;
  height:         100%;
  white-space:    nowrap;
  will-change:    transform;
  animation:      ubrt-scroll linear infinite;
}

.ubrt-ticker-wrap:hover .ubrt-ticker-track {
  animation-play-state: paused;
}

/* Animation speed is set dynamically via JS */
@keyframes ubrt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Individual ticker items ──────────────────────────────── */
.ubrt-ticker-item {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        0 18px;
  height:         100%;
  color:          var(--ubrt-text);
  cursor:         default;
  transition:     background 0.15s;
}

.ubrt-ticker-item:hover {
  background: rgba(255,255,255,0.04);
}

.ubrt-ticker-symbol {
  font-weight:    700;
  letter-spacing: 0.5px;
  font-size:      12px;
  color:          #ffffff;
}

.ubrt-ticker-price {
  font-weight:    500;
}

.ubrt-ticker-change {
  font-size:      11px;
  font-weight:    600;
}

/* ── Color states ─────────────────────────────────────────── */
.ubrt-up   .ubrt-ticker-change { color: var(--ubrt-up); }
.ubrt-down .ubrt-ticker-change { color: var(--ubrt-down); }
.ubrt-neutral .ubrt-ticker-change { color: var(--ubrt-neutral); }

/* ── Separator ────────────────────────────────────────────── */
.ubrt-ticker-sep {
  color:   var(--ubrt-sep);
  padding: 0 4px;
  flex-shrink: 0;
}

/* ── Error state ──────────────────────────────────────────── */
.ubrt-ticker-error {
  color:   var(--ubrt-neutral);
  padding: 0 20px;
  font-style: italic;
  font-size: 12px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --ubrt-height:    34px;
    --ubrt-font-size: 11px;
  }
  .ubrt-ticker-label {
    font-size:   9px;
    padding:     0 8px;
    letter-spacing: 0.8px;
  }
  .ubrt-ticker-item {
    padding:     0 10px;
    gap:         4px;
  }
}