/* ================================================================
   eRadio.rs — nav-btn-additions.css
   DODATI NA KRAJ style.css (ili theme-additions.css)
   ================================================================ */

/* ── PLAYER BAR — prev/next dugmad ─────────────────────────── */
.player-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.player-nav-btn {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--ink-3); cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s;
}
.player-nav-btn:hover {
    background: var(--surface-2); color: var(--ink);
    transform: scale(1.05);
}
.player-nav-btn:active { transform: scale(.92); }

/* ── HERO CARD — prev/next dugmad ───────────────────────────── */
.hcard-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hcard-nav-btn {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65); cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s;
}
.hcard-nav-btn:hover {
    background: rgba(255,255,255,.16); color: #fff;
    transform: scale(1.06);
}
.hcard-nav-btn:active { transform: scale(.91); }

/* Volume red ispod kontrola u hero card */
.hcard-vol-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; width: 100%;
}
.hcard-vol-row .hcard-vol { flex: 1; }

/* ── LIGHT TEMA DUGMAD ──────────────────────────────────────── */
body.theme-light .player-nav-btn {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
    color: var(--ink-3);
}
body.theme-light .player-nav-btn:hover {
    background: rgba(0,0,0,.10); color: var(--ink);
}

/* ── NAV RIGHT (tema toggle) ────────────────────────────────── */
.nav-right {
    display: flex; align-items: center; gap: 8px;
}
.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 TEMA (ako theme-additions.css nije učitan) ─────── */
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-color: rgba(0,0,0,.10); }
body.theme-light .player-bar{ background: rgba(240,240,248,.97); border-top-color: rgba(0,0,0,.12); }
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 .genre-btn { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.12); color: var(--ink-2); }
body.theme-light .genre-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
body.theme-light .form-control,.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 .station-search-input { background: rgba(255,255,255,.9) !important; border-color: rgba(0,0,0,.12) !important; }
body.theme-light .logo-e { color: #1a1a2e; }

/* ── STATION SEARCH ─────────────────────────────────────────── */
.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 i mini player — samo desktop */
@media (max-width: 991px) {
    .mini-player { display: none !important; }
}