/* Live market ticker — drop-in styles.
   Only the --tk-* values below were changed, to match the VK Finserve palette.
   The scroll animation, pause-on-hover and reduced-motion rules are untouched. */
:root{
  --tk-bg:#451A55;        /* strip background — site plum-deep   */
  --tk-text:#EFE3F4;      /* label and value text                */
  --tk-accent:#9C25BE;    /* the coloured box, left — site violet*/
  --tk-up:#57D28E;        /* positive change                     */
  --tk-down:#FF8585;      /* negative change                     */
  --tk-speed:5s;         /* lower = faster scroll               */
  --tk-height:36px;
}

.ticker{
  background:var(--tk-bg);color:var(--tk-text);
  border-bottom:1px solid rgba(227,178,76,.18);
  font-size:.78rem;height:var(--tk-height);
  display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;
}
.ticker-label{
  flex:0 0 auto;background:var(--tk-accent);color:#fff;font-weight:800;
  padding:0 .95rem;height:100%;display:flex;align-items:center;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  position:relative;z-index:2;
}
/* --tk-speed is the time to scroll ONE copy of the list. The PHP prints the
   list several times and sets --tk-loops to half that count, so the duration
   scales with the track and the speed on screen stays the same. */
.ticker-track{
  display:flex;min-width:0;
  animation:tk-scroll calc(var(--tk-speed) * var(--tk-loops, 1)) linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  padding:0 22px;display:inline-flex;gap:8px;align-items:center;
  border-right:1px solid rgba(255,255,255,.12);
  font-weight:600;letter-spacing:.02em;
}
.ticker-item b{color:#fff;font-weight:800;letter-spacing:.04em}
.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:#C3ACCE;font-size:.72rem;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:32px;font-size:.72rem}
  .ticker-label{padding:0 .7rem;font-size:.62rem}
  .ticker-item{padding:0 16px}
  .ticker-time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto}
}
@media print{
  .ticker{display:none !important}
}