/* Minimal audio player styles (separate file)
   - Responsive and accessible
*/
/* Player styled to match site: dark panel with gold accents and subtle glow */
#audio-player {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(6,6,8,0.6);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,215,0,0.06);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 16px rgba(255,200,60,0.02);
  color: #ffeec8;
  backdrop-filter: blur(6px);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  pointer-events: auto;
}
#audio-player .ap-btn {
  background: rgba(255,230,120,0.06);
  border: 1px solid rgba(255,215,0,0.12);
  color: #ffe066;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(255,200,60,0.12);
}
#ap-controls { display:flex; gap:12px; align-items:center; }
.ap-controls { display:flex; gap:12px; align-items:center; width: 100%; }
/* Buttons group: center and distribute space evenly within their block */
.ap-btns { display:flex; gap:8px; align-items:center; justify-content: space-between; width: 120px; }
#ap-seek-wrap { display:flex; flex-direction: column; gap:6px; min-width: 240px; max-width: 380px; }
#ap-seek-wrap { display:flex; flex-direction: column; gap:6px; min-width: 240px; max-width: 380px; flex: 1 1 auto; }
#ap-seek { width: 100%; appearance: none; height: 6px; background: linear-gradient(90deg,#ffd54f,#ffe066); border-radius: 6px; }
#ap-seek::-webkit-slider-thumb { -webkit-appearance: none; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.45); }
#ap-times { font-size: 12px; color: #ffe7b6; text-align: right; }
.ap-label { font-size: 13px; color: #ffe066; font-weight: 600; text-shadow: 0 0 8px rgba(255,200,60,0.06); }
.ap-meta { display:flex; flex-direction: column; gap:4px; align-items: flex-end; }
.ap-meta { display:flex; flex-direction: column; gap:4px; align-items: flex-end; min-width: 150px; }
.ap-link { font-size: 12px; color: #90caf9; text-decoration: none; border-bottom: 1px dashed rgba(144,202,249,0.14); }
.ap-link:hover { text-decoration: underline; color: #bbdefb; }

/* small control variants */
.ap-btn-small { width:34px; height:34px; font-size: 14px; padding: 0; }
.ap-btn.active, .ap-btn-small.active { box-shadow: 0 0 10px rgba(255,200,60,0.18); }
.ap-btn[aria-pressed="true"], .ap-btn-small[aria-pressed="true"] { outline: 2px solid rgba(255,215,0,0.12); }
@media (max-width:420px){ #ap-seek-wrap { min-width: 140px; } .ap-meta{display:none;} }