/* ================================================================
   eRadio.rs — theme-additions.css
   DODATI na kraj style.css (ili @import)
   ================================================================ */

/* ── NAV RIGHT ──────────────────────────────────────────────── */
.nav-right {
  display: flex; align-items: center; gap: 8px;
}

/* ── THEME TOGGLE ───────────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-3); cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .22s; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }

/* ── LIGHT THEME ────────────────────────────────────────────── */
body.theme-light {
  --ink:       #1a1a2e;
  --ink-2:     #2e2e4e;
  --ink-3:     #5a5a8a;
  --ink-4:     #8888b0;
  --bg:        #f0f0f8;
  --bg-2:      #e8e8f4;
  --bg-3:      #dcdcee;
  --surface:   rgba(0,0,0,.06);
  --surface-2: rgba(0,0,0,.10);
  --border:    rgba(0,0,0,.10);
  --border-2:  rgba(0,0,0,.16);
  background-image:
    radial-gradient(ellipse 80vw 50vh at 70% -10%, rgba(230,57,70,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 10% 80%, rgba(68,119,255,.04) 0%, transparent 50%);
}
body.theme-light .site-nav {
  background: rgba(240,240,248,.94);
  border-bottom: 1px solid rgba(0,0,0,.10);
}
body.theme-light .player-bar {
  background: rgba(240,240,248,.97);
  border-top: 1px solid rgba(0,0,0,.12);
}
body.theme-light .mini-player {
  background: rgba(240,240,248,.97);
  border-color: rgba(0,0,0,.14);
}
body.theme-light .station-card,
body.theme-light .hero-card,
body.theme-light .top-item,
body.theme-light .chart-card,
body.theme-light .legal-card,
body.theme-light .contact-card {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.09);
}
body.theme-light .station-card:hover,
body.theme-light .top-item:hover {
  background: rgba(255,255,255,.95);
}
body.theme-light .site-footer {
  background: var(--bg-2);
  border-top-color: rgba(0,0,0,.10);
}
body.theme-light .form-control,
body.theme-light .form-select {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(0,0,0,.15) !important;
  color: var(--ink) !important;
}
body.theme-light .genre-btn {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.12);
  color: var(--ink-2);
}
body.theme-light .genre-btn:hover {
  background: rgba(255,255,255,.95);
}
body.theme-light .genre-btn.active {
  background: var(--red); color: #fff; border-color: var(--red);
}
body.theme-light .accordion-button,
body.theme-light .accordion-item {
  background: rgba(255,255,255,.8) !important;
}
body.theme-light .accordion-body {
  background: rgba(255,255,255,.6);
}
/* Ad band light */
body.theme-light .ad-band {
  background: var(--bg-3);
  border-color: rgba(0,0,0,.08);
}
/* Hero grad ostaje isti */
body.theme-light .hero-grad {
  background: linear-gradient(135deg, #ff7b83 0%, #ff9a3c 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* Logo brand */
body.theme-light .logo-e { color: #1a1a2e; }

/* ── STATION SEARCH (index.php) ─────────────────────────────── */
.station-search-wrap { position: relative; }
.station-search-input {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  padding: .5rem 1rem !important;
  font-size: .875rem !important;
  width: 200px; outline: none;
  transition: all .2s;
  font-family: var(--fb);
}
.station-search-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,.15) !important;
  width: 240px;
}
.station-search-input::placeholder { color: var(--ink-4); }

/* ── PiP fixes — ikone vidljive (koristi unicode fallback) ──── */
/* PiP window nema font-awesome, koristimo unicode */
/* (CSS koji se injektuje u PiP prozor je inline u app.js) */

/* ── Responsive PiP — samo desktop ──────────────────────────── */
/* Mini player se ne prikazuje na mobilnim (JS radi ovo ali CSS pojačava) */
@media (max-width: 768px) {
  .mini-player { display: none !important; }
}