/* === MP Radio Player — Mobile-first "Pro & Compact" Theme ===
   Compact, touch-friendly, minimal UI for mobile apps.
   Variables for easy theming. */

:root{
  --bg-grad-start: #5665e6;
  --bg-grad-end:   #6e4aa0;
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.14);
  --muted: rgba(255,255,255,0.85);
  --muted-2: rgba(255,255,255,0.72);
  --accent: #ffffff;
  --success: #34d399;
  --danger:  #fb7185;
  --warn:    #fbbf24;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.18);
  --glass-blur: 8px;
  --touch-size: 44px; /* target touch size (can be slightly smaller for compact) */
  font-size: 14px;
}

/* Container (full-width mobile card) */
.mp-radio-player-container{
  width: calc(100% - 20px);
  max-width: 420px; /* phone sized */
  margin: 10px auto;
  padding: 12px;
  background: linear-gradient(145deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--accent);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  backdrop-filter: blur(0.5px);
  overflow: hidden;
}

/* top bar: station + small meta */
.radio-station-info{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.radio-station-info .logo{
  min-width:44px;
  min-height:44px;
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:0.95rem;
  flex-shrink:0;
}
.radio-station-info h2{
  margin:0;
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:0.2px;
  color:var(--accent);
}
.radio-station-info .frequency{
  margin-top:2px;
  font-size:24px;
  opacity:0.9;
  color:rgb(196 0 39);
}

/* compact time display */
.time-display{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px;
  margin:8px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 10px;
  backdrop-filter: blur(var(--glass-blur));
}
.current-time{
  font-size:1.6rem;
  font-weight:600;
  font-variant-numeric: tabular-nums;
}
.current-date{
  font-size:0.75rem;
  opacity:0.85;
  color:var(--muted-2);
}

/* Controls area (compact vertical stack with a main row) */
.player-controls{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}

/* central big play button row */
.player-buttons{
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
}
.player-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:var(--touch-size);
  min-height:var(--touch-size);
  padding:8px 12px;
  border-radius:12px;
  border:none;
  background: var(--glass);
  color:var(--accent);
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,0.14), inset 0 -1px 0 rgba(255,255,255,0.02);
}
.player-btn--primary{
  padding:10px 18px;
  border-radius:14px;
  background: rgba(255,255,255,0.95);
  color: var(--bg-grad-end);
  font-weight:700;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.player-btn:active{ transform: translateY(1px) scale(0.995); }
.player-btn:focus{ outline:2px solid rgba(255,255,255,0.08); outline-offset:2px; }

/* compact icon-only small buttons */
.player-btn--icon{
  width:40px;
  height:40px;
  padding:0;
  border-radius:10px;
  font-size:1rem;
}

/* volume control compressed */
.volume-control{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 2px;
}
.volume-control label{
  font-size:0.78rem;
  min-width:46px;
  opacity:0.95;
}
#mp-radio-volume{
  flex:1;
  height:4px;
  -webkit-appearance:none;
  background: rgba(255,255,255,0.12);
  border-radius:6px;
  outline:none;
}
#mp-radio-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  margin-top:-7px; /* center the thumb */
  cursor:pointer;
}

/* status block (compact chips) */
.player-status{
  color: #000000;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:6px;
}
#player-status-text{
  font-size:0.82rem;
  padding:6px 10px;
  background: rgba(0,0,0,0.12);
  border-radius:999px;
  text-align:center;
  min-width:120px;
  color:var(--muted);
}
.source-info{
  font-size:0.75rem;
  opacity:0.85;
  padding:5px 10px;
  background: rgba(255,255,255,0.05);
  border-radius:999px;
  color:var(--muted-2);
}

/* stream status: compact list */
.stream-status{
  margin-top:10px;
  padding:10px;
  background: rgba(0,0,0,0.08);
  border-radius:12px;
}
.stream-status h3{
  margin:0 0 8px 0;
  font-size:0.9rem;
  opacity:0.95;
}
.status-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size:0.8rem;
}
.status-item:last-child{ border-bottom: none; }
.status-name{ font-weight:600; color:var(--muted); }
.status-indicator{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}
.status-available .status-indicator{ background: var(--success); box-shadow: 0 3px 8px rgba(52,211,153,0.12); }
.status-unavailable .status-indicator{ background: var(--danger); box-shadow: 0 3px 8px rgba(251,113,133,0.12); }
.status-checking .status-indicator{ background: var(--warn); box-shadow: 0 3px 8px rgba(251,191,36,0.12); animation: pulse 1.4s infinite; }

@keyframes pulse {
  0% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.25); opacity:0.65; }
  100% { transform: scale(1); opacity:1; }
}

/* small utility */
.small-muted{ font-size:0.72rem; opacity:0.78; }

/* subtle source-change animation */
.source-changing{
  animation: sourceChange 360ms ease;
}
@keyframes sourceChange {
  0% { transform: translateY(0); opacity:1; }
  50% { transform: translateY(-4px) scale(0.998); opacity:0.7; }
  100% { transform: translateY(0); opacity:1; }
}

/* Larger screens: adapt to tablet/desktop but keep compact "app" look */
@media (min-width: 480px){
  :root{ font-size:15px; } /* slightly larger */
  .mp-radio-player-container{ max-width:520px; padding:14px; }
  .radio-station-info h2{ font-size:1.15rem; }
  .current-time{ font-size:1.9rem; }
  .player-btn--primary{ padding:12px 20px; }
}

/* Desktop fallback */
@media (min-width: 900px){
  .mp-radio-player-container{ max-width:720px; padding:16px; border-radius:18px; }
  .player-controls{ flex-direction:row; align-items:center; gap:14px; }
  .volume-control{ max-width:320px; }
}