/* CoptAra theme refresh: Radio (full page, launcher bar and mini player). CSS-only: the player
   engine and markup are untouched. Loaded right after radio.css by partials/radio_launcher.html. */

:root {
  --radio-gold: var(--color-accent);
  --radio-gold-bright: var(--color-accent);
  --radio-gold-muted: var(--color-text-muted);
  --radio-gold-subtle: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --radio-text-main: var(--color-text);
  --radio-text-muted: var(--color-text-muted);
  --radio-radius: var(--radius-xl);
  --radio-radius-sm: var(--radius-md);
  --radio-shadow: var(--card-shadow);
  --radio-shadow-lg: var(--shadow-lg);
}

/* Header */
.radio-eyebrow { color: var(--color-accent); letter-spacing: 0.14em; }
.radio-title { font-size: clamp(2.8rem, 2rem + 4vw, 5.2rem); line-height: 1; letter-spacing: -0.02em; }
html[lang="ar"] .radio-title { line-height: 1.25; }
.radio-continuity-note {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Now playing panel */
.radio-nowplaying-column {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
}
.radio-vinyl-wrapper { width: min(100%, 300px); height: auto; aspect-ratio: 1; }
.radio-vinyl-disc {
  background: center / cover no-repeat;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
/* Real brand emblem in the centre of the disc (second layer, rotates with the disc) */
html:not(.dark) .radio-vinyl-disc {
  background-image: url('/static/img/brand/emblem-light.png'), url('/static/img/theme/vinyl-light.webp');
  background-size: 36% auto, cover;
  background-position: center, center;
  box-shadow: 0 18px 40px rgba(120, 78, 40, 0.3);
}
html.dark .radio-vinyl-disc {
  background-image: url('/static/img/brand/emblem-dark.png'), url('/static/img/theme/vinyl-dark.webp');
  background-size: 36% auto, cover;
  background-position: center, center;
}
.radio-vinyl-disc .radio-vinyl-svg { display: none; }
.radio-current-title { font-family: var(--font-serif); font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); font-weight: 400; line-height: 1.1; }
html[lang="ar"] .radio-current-title { font-family: 'Noto Naskh Arabic', var(--font-serif); font-weight: 700; line-height: 1.35; }

/* Controls */
.radio-btn-round { border-radius: 50%; border-color: var(--glass-border); background: var(--glass-bg); color: var(--color-text); }
.radio-btn-playpause {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Library */
.radio-section-heading { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.2rem); }
.radio-track-item {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--radius-md);
  min-height: 58px;
}
.radio-track-item:hover { border-color: var(--color-accent); background: var(--glass-bg); }
.radio-track-item.active { background: var(--radio-gold-subtle); border-color: var(--color-accent); font-weight: 600; }
.radio-track-title { font-family: var(--font-sans); }
.radio-anthem-badge { border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
.radio-lyrics-details, .radio-personal-playlists {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

/* Launcher bar and mini player (shown on every page) */
.radio-launcher-bar, .radio-mini-player {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.radio-fallback-link, .radio-mini-toggle { border-radius: var(--radius-pill); }