/* Live market ticker — drop-in styles.
   Change --tk-* values to match your site. */
:root{
  --tk-bg:#16110B;        /* strip background        */
  --tk-text:#E9DDC6;      /* label and value text    */
  --tk-accent:#C98A2B;    /* the coloured box, left  */
  --tk-up:#5CC27E;        /* positive change         */
  --tk-down:#F06A5E;      /* negative change         */
  --tk-speed:55s;         /* lower = faster scroll   */
  --tk-height:34px;
}

.ticker{
  background:var(--tk-bg);color:var(--tk-text);
  font-size:.82rem;height:var(--tk-height);
  display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;
}
.ticker-label{
  flex:0 0 auto;background:linear-gradient(100deg,#6E3E08,#95580D 30%,#BC8128 60%,#95580D);color:#fff;text-shadow:0 1px 1px rgba(40,20,0,.4);font-weight:700;letter-spacing:.02em;
  padding:0 14px;height:100%;display:flex;align-items:center;
  position:relative;z-index:2;
}
.ticker-track{
  display:flex;min-width:0;
  animation:tk-scroll var(--tk-speed) linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  padding:0 22px;display:inline-flex;gap:8px;
  border-right:1px solid rgba(255,255,255,.12);
}
.ticker-item b{color:#fff;font-weight:600}
.ticker .up{color:var(--tk-up)}
.ticker .dn{color:var(--tk-down)}
.ticker-time{
  flex:0 0 auto;margin-left:auto;padding:0 14px;
  color:#A89878;font-size:.74rem;white-space:nowrap;
  background:var(--tk-bg);position:relative;z-index:2;
  box-shadow:-14px 0 14px var(--tk-bg);
}

/* The track holds two identical copies, so -50% is one full loop. */
@keyframes tk-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:900px){
  .ticker{height:30px;font-size:.74rem}
  .ticker-label{padding:0 10px}
  .ticker-time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto}
}