/* ==========================================================
   GNN Live Radio — sticky player, homepage band, radio page, pop-out
   ========================================================== */
:root { --rd: var(--red, #E31B23); --rd-dark: #0E0E16; }

/* ON AIR pill */
.gr-live { display: inline-flex; align-items: center; gap: 6px; background: var(--rd); color: #fff; font: 700 10.5px Poppins, sans-serif; letter-spacing: .8px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.gr-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: grPulse 1.4s infinite; }
.gr-live.big { font-size: 12px; padding: 5px 11px; }
@keyframes grPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Logo tile used everywhere */
.rp-logo { overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--rd), #7A0A10); color: #fff; font: 800 22px Poppins, sans-serif; }
.rp-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Equaliser bars (move only while playing) */
.gr-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; width: 22px; }
.gr-eq i { flex: 1; height: 4px; background: var(--rd); border-radius: 2px; transition: height .2s; }
[data-radio-ui].is-playing .gr-eq i { animation: grEq .9s infinite ease-in-out; }
[data-radio-ui].is-playing .gr-eq i:nth-child(2) { animation-delay: -.3s; } [data-radio-ui].is-playing .gr-eq i:nth-child(3) { animation-delay: -.6s; }
[data-radio-ui].is-playing .gr-eq i:nth-child(4) { animation-delay: -.15s; } [data-radio-ui].is-playing .gr-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes grEq { 0%, 100% { height: 4px; } 50% { height: 18px; } }

.gr-vol { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-size: 14px; }
.gr-vol input { width: 90px; accent-color: var(--rd); }
.gr-sel { background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: 600 13px var(--font, 'Noto Sans Devanagari'), sans-serif; max-width: 170px; }
.gr-sel option { color: #111; }

/* ---------- Sticky bottom player ---------- */
.gr-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 250; width: min(980px, calc(100% - 24px)); color: #fff; font-family: var(--font, 'Noto Sans Devanagari'), Poppins, sans-serif; }
.gr-bar[hidden] { display: none; }
.gr-in { display: flex; align-items: center; gap: 12px; background: linear-gradient(100deg, #12121C, #1E1220 60%, #3A0D14); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 9px 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.gr-logo { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; font-size: 18px; }
.gr-txt { min-width: 0; flex: 1; }
.gr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gr-top b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-freq { font: 600 11px Poppins, sans-serif; color: #FCA5A5; white-space: nowrap; }
.gr-now { font-size: 12.5px; color: #CBD5E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.gr-bar.is-error .gr-now { color: #FCA5A5; }
.gr-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rd); color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(227,27,35,.6); }
.gr-bar.is-playing .gr-play { animation: grRing 2s infinite; }
@keyframes grRing { 0% { box-shadow: 0 0 0 0 rgba(227,27,35,.55); } 70% { box-shadow: 0 0 0 12px rgba(227,27,35,0); } 100% { box-shadow: 0 0 0 0 rgba(227,27,35,0); } }
.gr-ic { width: 34px; height: 34px; border-radius: 9px; border: 0; background: rgba(255,255,255,.08); color: #E2E8F0 !important; cursor: pointer; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.gr-ic:hover { background: rgba(255,255,255,.18); }
.gr-fab { display: none; }
.gr-bar.min { left: auto; right: 16px; transform: none; width: auto; }
.gr-bar.min .gr-in { display: none; }
.gr-bar.min .gr-fab { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--rd), #7A0A10); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.3); position: relative; }
.gr-fab-dot { position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: #64748B; border: 2px solid #fff; }
.gr-bar.is-playing .gr-fab-dot { background: #22C55E; }
body.has-radio-bar { padding-bottom: 86px; }
@media (max-width: 640px) {
    .gr-bar { bottom: 8px; } .gr-in { gap: 8px; padding: 8px; } .gr-logo { width: 40px; height: 40px; }
    .gr-eq, .gr-live { display: none; } .gr-bar .hide-sm { display: none !important; }
}

/* ---------- Big play button + visualiser ---------- */
.rp-bigplay { width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, #FF4D57, var(--rd)); color: #fff; font-size: 26px; flex-shrink: 0; box-shadow: 0 12px 28px rgba(227,27,35,.45); transition: transform .15s; }
.rp-bigplay:hover { transform: scale(1.06); }
.rp-bigplay.md { width: 58px; height: 58px; font-size: 20px; }
.rp-bigplay.is-playing { animation: grRing 2s infinite; }
.rp-bigplay .fa-play { margin-left: 4px; }
.rp-viz { display: flex; align-items: center; gap: 3px; height: 54px; flex: 1; min-width: 0; overflow: hidden; }
.rp-viz i { flex: 1; min-width: 3px; max-width: 7px; height: 10%; border-radius: 3px; background: linear-gradient(180deg, #FFD43B, var(--rd)); opacity: .45; }
[data-radio-ui].is-playing .rp-viz i { opacity: 1; animation-name: rpViz; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes rpViz { 0%, 100% { height: 12%; } 30% { height: 90%; } 60% { height: 40%; } 80% { height: 70%; } }
.rp-viz.sm { height: 36px; max-width: 120px; }

/* ---------- Radio page ---------- */
.rp-hero { position: relative; margin-top: 14px; border-radius: 20px; overflow: hidden; color: #fff; background: #0E0E16; }
.rp-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 18% 40%, rgba(227,27,35,.45), transparent 45%), radial-gradient(circle at 85% 10%, rgba(255,212,59,.18), transparent 40%), linear-gradient(120deg, #0E0E16, #1D0F18 55%, #2B0A10); }
.rp-hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px); background-size: 18px 18px; }
.rp-main { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px; }
.rp-disc { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.rp-ring { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1B1B22 2px 4px); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 6px rgba(255,255,255,.04); }
.rp-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.12) 25%, transparent 30% 70%, rgba(255,255,255,.08) 75%, transparent 80%); }
.rp-disc-logo { position: relative; width: 46%; height: 46%; border-radius: 50%; font-size: 40px; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
[data-radio-ui].is-playing .rp-ring, [data-radio-ui].is-playing .rp-disc-logo { animation: rpSpin 6s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-info h1 { margin: 12px 0 6px; font-size: 40px; font-weight: 800; line-height: 1.15; }
.rp-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: #CBD5E1; align-items: center; }
.rp-sub .rp-freq { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 3px 10px; border-radius: 20px; font: 700 13px Poppins, sans-serif; color: #FFD43B; }
.rp-now { margin: 14px 0 0; font-size: 16px; color: #F1F5F9; }
[data-radio-ui].is-error .rp-now { color: #FCA5A5; }
.rp-ctrl { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.rp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.rp-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff !important; font: 600 13px var(--font, 'Noto Sans Devanagari'), sans-serif; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.rp-btn:hover { background: rgba(255,255,255,.18); }
.rp-btn.wa { background: #1FAF54; border-color: #1FAF54; }
.rp-hint { font-size: 12.5px; color: #94A3B8; margin-top: 12px; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.rp-stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rp-st { display: flex; align-items: center; gap: 12px; background: var(--card, #fff); border: 1px solid var(--line, #E6EAF0); border-radius: 14px; padding: 10px; transition: border-color .15s, box-shadow .15s; }
.rp-st.is-current { border-color: var(--rd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd) 15%, transparent); }
.rp-st b { font-size: 15px; color: var(--ink, #0F172A); }
.rp-st small { display: block; color: var(--muted, #64748B); font-size: 12.5px; margin-top: 2px; }
.rp-st .min-w-0 { flex: 1; }
.rp-st-logo { width: 54px; height: 54px; border-radius: 12px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--rd), #7A0A10); color: #fff; font: 800 20px Poppins, sans-serif; }
.rp-st-logo img { width: 100%; height: 100%; object-fit: cover; }
.rp-st-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--rd) 12%, #fff); color: var(--rd); cursor: pointer; flex-shrink: 0; font-size: 14px; }
.rp-st-play.is-playing, .rp-st-play:hover { background: var(--rd); color: #fff; }
.rp-about { background: var(--card, #fff); border: 1px solid var(--line, #E6EAF0); border-radius: 14px; padding: 18px 20px; line-height: 1.85; color: var(--text, #1E293B); }
.rp-sched { background: var(--card, #fff); border: 1px solid var(--line, #E6EAF0); border-radius: 14px; overflow: hidden; }
.rp-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line, #E6EAF0); }
.rp-row:last-child { border-bottom: 0; }
.rp-row .t { font: 600 12.5px Poppins, sans-serif; color: var(--muted, #64748B); width: 92px; flex-shrink: 0; }
.rp-row b { display: block; font-size: 14.5px; color: var(--ink, #0F172A); }
.rp-row small { display: block; color: var(--muted, #64748B); font-size: 12.5px; }
.rp-row .min-w-0 { flex: 1; }
.rp-row.now { background: color-mix(in srgb, var(--rd) 7%, #fff); box-shadow: inset 4px 0 0 var(--rd); }
.rp-row.now .t { color: var(--rd); }
@media (max-width: 1000px) { .rp-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .rp-main { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 18px; gap: 20px; }
    .rp-disc { width: 180px; height: 180px; } .rp-info h1 { font-size: 28px; }
    .rp-sub, .rp-tools { justify-content: center; } .rp-ctrl { justify-content: center; } .rp-viz { max-width: 160px; }
    .rp-stations { grid-template-columns: 1fr; }
}

/* ---------- Homepage band ---------- */
.rb { border-radius: 18px; overflow: hidden; color: #fff; background: radial-gradient(circle at 10% 20%, rgba(227,27,35,.4), transparent 40%), linear-gradient(110deg, #0E0E16, #1D0F18 60%, #2B0A10); padding: 20px 22px; }
.rb-head { display: flex; align-items: center; gap: 14px; }
.rb-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.rb-head p { margin: 2px 0 0; font-size: 13.5px; color: #CBD5E1; }
.rb-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--rd); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.rb-all { margin-left: auto; font-size: 13.5px; font-weight: 600; color: #FFD43B !important; white-space: nowrap; }
.rb-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.rb-main { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px; }
.rb-logo { width: 74px; height: 74px; border-radius: 16px; flex-shrink: 0; font-size: 28px; }
.rb-main h3 { margin: 6px 0 2px; font-size: 19px; font-weight: 800; }
.rb-main .rp-now { margin: 0; font-size: 13.5px; color: #CBD5E1; }
.rb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.rb-st { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px; }
.rb-st.is-playing { border-color: var(--rd); }
.rb-st b { display: block; font-size: 14px; } .rb-st small { display: block; font-size: 12px; color: #94A3B8; }
.rb-st .min-w-0 { flex: 1; }
.rb-st-logo { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--rd); font: 800 15px Poppins, sans-serif; flex-shrink: 0; }
.rb-st-logo img { width: 100%; height: 100%; object-fit: cover; }
.rb .rp-st-play { width: 34px; height: 34px; font-size: 12px; background: rgba(255,255,255,.12); color: #fff; }
.rb .rp-st-play.is-playing, .rb .rp-st-play:hover { background: var(--rd); }
@media (max-width: 900px) { .rb-body { grid-template-columns: 1fr; } .rb .rp-viz.sm { display: none; } }
@media (max-width: 520px) { .rb-list { grid-template-columns: 1fr; } .rb-all { display: none; } }

/* ---------- Pop-out window ---------- */
.rpop-in { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center;
    background: radial-gradient(circle at 50% 25%, rgba(227,27,35,.45), transparent 55%), linear-gradient(180deg, #0E0E16, #2B0A10); }
.rpop-brand { font: 600 12.5px Poppins, sans-serif; color: #CBD5E1; }
.rpop .rp-disc.sm { width: 170px; height: 170px; }
.rpop h1 { margin: 0; font-size: 24px; }
.rpop .rp-now { margin: 0; color: #CBD5E1; font-size: 14px; }
.rpop .rp-viz { flex: none; width: 220px; height: 40px; }
.rpop-note { font-size: 12px; color: #94A3B8; }
.rpop .gr-sel { max-width: 240px; }

/* Header "LIVE RADIO" button */
.radio-btn { display: inline-flex; align-items: center; gap: 6px; }
.radio-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: none; }
html.radio-on .radio-btn .dot { display: inline-block; animation: grPulse 1.2s infinite; }