:root{
  --bar-bg:#c62828; --bar-fg:#fff; --bar-muted:#ffe2e2;
  --bar-height:36px; --bar-radius:6px; --bar-padding:10px; --bar-gap:14px;
  --font:600 13px/1.1 'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* traka */
.wx-ticker{
  display:flex; align-items:center; gap:12px;
  background:var(--bar-bg); color:var(--bar-fg);
  height:var(--bar-height); border-radius:var(--bar-radius);
  padding:0 var(--bar-padding); overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.1);
  font:var(--font);
  width:100%; margin:0 0 10px 0; /* da bude širine widgeta i da ima razmak ispod */
}

/* slajdovi */
.wx-slide{ display:flex; align-items:center; gap:var(--bar-gap);
  flex:0 0 100%; opacity:0; transform:translateY(6px); }
.wx-slide.show{ opacity:1; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease; }

.wx-city{ text-transform:uppercase; font-weight:700; white-space:nowrap; }
.wx-temp{ font-weight:700; font-size:15px; }
.wx-desc{ color:var(--bar-muted); font-weight:500; opacity:.95; }
.wx-sep{ opacity:.35 }
.wx-ico{ font-size:17px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* METEO labela */
.wx-label{
  font:600 11px/1 Roboto,system-ui; letter-spacing:.3px; text-transform:uppercase;
  color:var(--bar-muted); border-right:1px solid rgba(255,255,255,.25);
  padding-right:10px; margin-right:6px;
}