/* ================================================================
   eRadio.rs — hero-cards.css
   Dodaj u head.php: <link rel="stylesheet" href="<?= url('hero-cards.css') ?>">
   ================================================================ */

/* ── HERO WALLPAPER CANVAS ──────────────────────────────────── */
/* Canvas se dodaje JS-om. Ovde osiguravamo da sadržaj bude iznad */
.hero-wrap { isolation: isolate; }
.hero-wrap > *:not(canvas) { position: relative; z-index: 1; }
.hero-wrap canvas { opacity: .55; transition: opacity .4s; }

/* ── CARD ICON — tamna tema (default) ──────────────────────── */
/* Emoji ikonica treba biti jasno vidljiva na gradijent bg */
.card-icon {
    width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; position: relative; overflow: hidden; flex-shrink: 0;
    background: var(--cg, linear-gradient(135deg,#e63946,#ff8c00));
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
/* Overlay: tamni u dark temi za kontrast */
.card-icon::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.18);
}
.card-icon-inner {
    position: relative; z-index: 1;
    font-size: 1.5rem;
    /* Bijela senka za emoji vidljivost */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,255,255,.15));
}

/* ── CARD ICON — svetla tema ────────────────────────────────── */
body.theme-light .card-icon::after {
    background: rgba(255,255,255,.15); /* svetliji overlay za kontrast */
}
body.theme-light .card-icon-inner {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(0,0,0,.2));
}
/* Kartice u svetloj temi — jači border */
body.theme-light .station-card {
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
body.theme-light .station-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
body.theme-light .station-card.playing {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red), 0 8px 28px rgba(230,57,70,.18);
}
/* Card name/slogan kontrast u light temi */
body.theme-light .card-name   { color: #1a1a2e; }
body.theme-light .card-slogan { color: #3a3a5e; }
body.theme-light .card-meta   { color: #5a5a8a; }
body.theme-light .card-foot   { border-top-color: rgba(0,0,0,.1); }
body.theme-light .card-web {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
    color: #5a5a8a;
}
body.theme-light .card-web:hover { background: rgba(0,0,0,.1); color: #1a1a2e; }

/* ── CARD DOT — podešen za obe teme ─────────────────────────── */
.card-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; margin-top: 4px; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: dot-pulse 2.5s infinite;
}
body.theme-light .card-dot {
    box-shadow: 0 0 0 0 rgba(34,197,94,.8);
}

/* ── HERO GRAD — oba tema ─────────────────────────────────────── */
.hero-grad {
    background: linear-gradient(135deg, #ff7b83 0%, #ff9a3c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.theme-light .hero-title { color: #0a0a1a; }
body.theme-light .hero-grad {
    background: linear-gradient(135deg, #cc2030 0%, #e05010 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.theme-light .hero-sub { color: #2a2a4a; }
body.theme-light .hero-eyebrow {
    background: rgba(200,30,46,.1);
    border-color: rgba(200,30,46,.25);
    color: #cc2030;
}
body.theme-light .hstat-num { color: #0a0a1a; }
body.theme-light .hstat-label { color: #5a5a8a; }

/* ── HERO CARD — oba tema ────────────────────────────────────── */
body.theme-light .hero-card {
    background: rgba(255,255,255,.92);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
body.theme-light .live-pill {
    background: rgba(200,30,46,.1);
    color: #cc2030;
}
body.theme-light .hcard-name { color: #3a3a5e; }
body.theme-light .hcard-wave span {
    background: linear-gradient(180deg, #cc2030, transparent);
}
body.theme-light .hcard-btn {
    box-shadow: 0 4px 16px rgba(200,30,46,.25);
}

/* ── NAV RIGHT layout ─────────────────────────────────────────── */
.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); }

/* ── PLAYER NAV BUTTONS ───────────────────────────────────────── */
.player-center {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.player-nav-btn {
    width: 34px; height: 34px; border-radius: 9px;
    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; flex-shrink: 0;
}
.player-nav-btn:hover { background: var(--surface-2); color: var(--ink); transform: scale(1.05); }
.player-nav-btn:active { transform: scale(.92); }
body.theme-light .player-nav-btn { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: #5a5a8a; }
body.theme-light .player-nav-btn:hover { background: rgba(0,0,0,.1); color: #1a1a2e; }

/* ── HCARD NAV BUTTONS ────────────────────────────────────────── */
.hcard-nav-btn {
    width: 34px; height: 34px; border-radius: 10px;
    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; flex-shrink: 0;
}
.hcard-nav-btn:hover { background: rgba(255,255,255,.16); color: #fff; transform: scale(1.06); }
.hcard-nav-btn:active { transform: scale(.91); }
body.theme-light .hcard-nav-btn {
    background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.14); color: #5a5a8a;
}
body.theme-light .hcard-nav-btn:hover { background: rgba(0,0,0,.12); color: #1a1a2e; }

/* ── HCARD VOL ROW ────────────────────────────────────────────── */
.hcard-vol-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; width: 100%;
}
.hcard-vol-row .hcard-vol { flex: 1; }
body.theme-light .hcard-vol { accent-color: #cc2030; }

/* ── SEARCH INPUT ─────────────────────────────────────────────── */
.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; 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); }
body.theme-light .station-search-input {
    background: rgba(255,255,255,.9) !important;
    border-color: rgba(0,0,0,.14) !important;
    color: #1a1a2e !important;
}

/* ── MINI PLAYER — desktop only ───────────────────────────────── */
@media (max-width: 991px) { .mini-player { display: none !important; } }