/* ============================================================
   UGACOQ Radio — shared mini-player bar (site-wide) + station
   grid styles (radio.html). One stylesheet so every page that
   might show the persistent mini-player has everything it needs
   without a second request.
   ============================================================ */

/* ---------- Region picker (radio.html) ---------- */
.radio-region-picker{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem;}
.radio-pill{background:#fff;border:1.5px solid var(--border);border-radius:50px;padding:0.4rem 1rem;font-size:0.82rem;font-weight:600;color:var(--charcoal);cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.radio-pill:hover{border-color:var(--gold);}
.radio-pill.active{background:var(--maroon-deep);border-color:var(--maroon-deep);color:#fff;}

/* ---------- Station grid (radio.html) ---------- */
.radio-region{margin-bottom:2.5rem;}
.radio-region-title{font-family:var(--font-heading,'Syne',sans-serif);color:var(--maroon-deep);font-size:1.15rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;}
.radio-region-title i{color:var(--gold);}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.9rem;}
.radio-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:0.9rem 0.6rem;text-align:center;position:relative;transition:transform 0.18s,box-shadow 0.18s;cursor:pointer;min-width:0;}
.radio-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm,0 2px 10px rgba(0,0,0,0.06));border-color:var(--gold);}
.radio-tile.playing{border-color:var(--maroon);box-shadow:0 0 0 2px rgba(122,15,46,0.15);}
.radio-tile-logo{width:64px;height:64px;border-radius:14px;object-fit:cover;margin:0 auto 0.6rem;background:var(--off-white);display:block;}
.radio-tile-name{font-family:var(--font-heading,'Syne',sans-serif);font-weight:700;font-size:0.85rem;color:var(--charcoal);margin-bottom:0.2rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.radio-tile-city{font-size:0.72rem;color:var(--mid-gray);margin-bottom:0.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.radio-tile-play{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon-light));color:#fff;font-size:0.82rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform 0.15s;}
.radio-tile-play:hover{transform:scale(1.08);}
.radio-tile-fav{position:absolute;top:0.55rem;right:0.55rem;background:none;border:none;font-size:0.9rem;color:var(--border);cursor:pointer;transition:color 0.15s,transform 0.15s;padding:0.2rem;}
.radio-tile-fav:hover{transform:scale(1.15);}
.radio-tile-fav.active{color:var(--gold);}
.radio-tile-status{position:absolute;top:0.55rem;left:0.55rem;font-size:0.68rem;font-weight:700;color:var(--maroon);display:none;align-items:center;gap:0.25rem;}
.radio-tile.playing .radio-tile-status{display:inline-flex;}
.radio-empty-note{font-size:0.85rem;color:var(--mid-gray);text-align:center;padding:2rem;grid-column:1/-1;}

@media(max-width:480px){
  .radio-grid{grid-template-columns:repeat(2,1fr);gap:0.7rem;}
  .radio-tile{padding:0.8rem 0.5rem;}
  .radio-tile-logo{width:56px;height:56px;}
}

/* Mini equalizer bars used both on tiles (small) and the player bar (larger) */
.radio-wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px;}
.radio-wave span{width:3px;background:var(--maroon);border-radius:2px;height:4px;animation:radioWave 0.9s ease-in-out infinite;}
.radio-wave span:nth-child(1){animation-delay:0s;}
.radio-wave span:nth-child(2){animation-delay:0.15s;}
.radio-wave span:nth-child(3){animation-delay:0.3s;}
.radio-wave span:nth-child(4){animation-delay:0.45s;}
.radio-wave span:nth-child(5){animation-delay:0.2s;}
.radio-tile-status .radio-wave span{background:var(--maroon);}
@keyframes radioWave{0%,100%{height:3px;}50%{height:12px;}}
.radio-wave.paused span{animation-play-state:paused;height:3px;}

/* ---------- Persistent mini-player bar (all pages) ---------- */
#ugacoq-radio-player{position:fixed;left:0;right:0;bottom:0;z-index:997;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,0.08);font-family:var(--font-body,'DM Sans',sans-serif);display:none;max-height:100vh;overflow-y:auto;}
#ugacoq-radio-player.show{display:block;}

/* ---- Expanded "now playing" panel ---- */
.rp-expanded{display:none;padding:1rem 1.25rem 0.25rem;text-align:center;border-bottom:1px solid var(--off-white);position:relative;}
#ugacoq-radio-player.expanded .rp-expanded{display:block;}
.rp-minimize-btn{position:absolute;top:0.6rem;right:0.75rem;background:var(--off-white);border:none;width:30px;height:30px;border-radius:50%;color:var(--mid-gray);font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.rp-minimize-btn:hover{background:var(--border);color:var(--charcoal);}
.rp-expanded img{width:88px;height:88px;border-radius:16px;object-fit:cover;margin-bottom:0.6rem;box-shadow:var(--shadow-sm,0 2px 10px rgba(0,0,0,0.06));}
.rp-expanded .rp-wave-big{height:24px;margin:0.4rem 0 0.6rem;}
.rp-expanded .rp-wave-big span{width:4px;}
.rp-expanded-name{font-family:var(--font-heading,'Syne',sans-serif);font-weight:700;color:var(--maroon-deep);font-size:1.05rem;}
.rp-expanded-region{font-size:0.78rem;color:var(--mid-gray);margin-bottom:0.6rem;}
.rp-transport{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-bottom:0.75rem;}
.rp-transport button{background:none;border:none;color:var(--maroon-deep);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.rp-transport button:hover{color:var(--maroon);}
.rp-skip-btn{font-size:1.2rem;}
.rp-play-btn-big{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon-light));color:#fff;font-size:1.2rem;}
.rp-play-btn-big:hover{color:#fff;opacity:0.9;}
.rp-volume-row{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin-bottom:0.85rem;}
.rp-volume-row .rp-btn{padding:0.2rem;}
.rp-volume-big{width:140px;accent-color:var(--maroon);}

/* ---- Docked mini bar ---- */
.rp-bar{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.85rem;max-width:1100px;margin:0 auto;}
.rp-logo{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--off-white);cursor:pointer;}
.rp-info{flex:1;min-width:0;cursor:pointer;}
.rp-name{font-weight:700;font-size:0.83rem;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-status{font-size:0.7rem;color:var(--mid-gray);display:flex;align-items:center;gap:0.4rem;}
.rp-btn{background:none;border:none;font-size:0.95rem;color:var(--maroon-deep);cursor:pointer;padding:0.35rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.rp-btn:hover{color:var(--maroon);}
.rp-play-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon-light));color:#fff;}
.rp-play-btn:hover{color:#fff;opacity:0.9;}
.rp-fav-btn.active{color:var(--gold);}
@media(max-width:480px){.rp-bar{gap:0.35rem;padding:0.5rem 0.5rem;}}

/* Leave room at the bottom of the page content so the docked player
   never covers the last bit of a page's content or the mobile tab bar. */
body.has-radio-player{padding-bottom:64px;}
body.has-radio-player .mobile-tabbar{bottom:64px;}