/* ============================================================
   RADIOWAVE v3.0 — player.css
   Sleep Timer · EQ Presets · Health · Favorites
   ============================================================ */

/* Art animation when playing */
.station-art.playing img { animation: artSpin 14s linear infinite; }
@keyframes artSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.station-art.loading { animation: shimmer 1.4s infinite; background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── EXTRA CONTROLS ROW (Sleep Timer, EQ, Fav) ── */
.extra-controls {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.extra-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px;
  font-size: 11px; font-family: var(--fm);
  background: var(--bg2); border: 1px solid var(--bdr2);
  color: var(--txt2); cursor: pointer; transition: all var(--tr);
  white-space: nowrap;
}
.extra-btn:hover { color: var(--txt); border-color: var(--bdr2); background: var(--bg3); }
.extra-btn.active { color: var(--accent); border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.08); }
.extra-btn.fav-active { color: var(--gold); border-color: rgba(255,204,77,.35); background: rgba(255,204,77,.08); }

/* ── SLEEP TIMER DROPDOWN ── */
.sleep-wrap { position: relative; }
.sleep-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg1); border: 1px solid var(--bdr2); border-radius: 12px;
  padding: 6px; min-width: 160px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index: 300; display: none; flex-direction: column; gap: 2px;
  animation: dropIn .2s cubic-bezier(.34,1.56,.64,1);
}
.sleep-menu.open { display: flex; }
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.sleep-opt {
  padding: 8px 12px; border-radius: 8px; font-size: 12px;
  color: var(--txt2); cursor: pointer; transition: background var(--tr);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sleep-opt:hover { background: var(--bg3); color: var(--txt); }
.sleep-opt.active { color: var(--accent); }
.sleep-opt-icon { font-size: 14px; }
.sleep-remaining {
  font-family: var(--fm); font-size: 9px; color: var(--accent);
  background: rgba(255,77,77,.1); padding: 1px 5px; border-radius: 4px;
}

/* ── EQ PRESETS DROPDOWN ── */
.eq-wrap { position: relative; }
.eq-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg1); border: 1px solid var(--bdr2); border-radius: 12px;
  padding: 8px; min-width: 180px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index: 300; display: none; flex-direction: column; gap: 2px;
  animation: dropIn .2s cubic-bezier(.34,1.56,.64,1);
}
.eq-menu.open { display: flex; }
.eq-menu-title { font-family: var(--fm); font-size: 9px; color: var(--txt3); letter-spacing: 2px; text-transform: uppercase; padding: 2px 8px 6px; border-bottom: 1px solid var(--bdr); margin-bottom: 4px; }
.eq-opt {
  padding: 8px 12px; border-radius: 8px; font-size: 12px;
  color: var(--txt2); cursor: pointer; transition: background var(--tr);
  display: flex; align-items: center; gap: 10px;
}
.eq-opt:hover { background: var(--bg3); color: var(--txt); }
.eq-opt.active { color: var(--accent); background: rgba(255,77,77,.08); }
.eq-opt-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.eq-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: auto;
}
.eq-bars span { width: 3px; background: var(--txt3); border-radius: 1px; transition: height .3s, background .3s; }
.eq-opt.active .eq-bars span { background: var(--accent); }

/* ── SHARE BUTTON ── */
.share-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; font-size: 11px; font-family: var(--fm);
  background: var(--bg2); border: 1px solid var(--bdr2); color: var(--txt2);
  cursor: pointer; transition: all var(--tr);
}
.share-btn:hover { color: var(--blue); border-color: rgba(77,159,255,.35); background: rgba(77,159,255,.08); }