/* dabplus.live — retro SVG-radio (vervangt .tuner-dial + .now-playing + .presets op country pages) */

.retro-radio {
  position: relative;
  max-width: 90%;
  margin: 0 auto 4px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
@media (min-width: 1200px) {
  .retro-radio { max-width: 864px; }
}

/* Genre-balk en controls-row strakker (override van cabinet.css) */
.controls-row {
  margin-bottom: 12px !important;
}
.genre-strip {
  padding: 6px 12px !important;
  gap: 12px !important;
}
.genre-label {
  font-size: 16px !important;
  padding-right: 10px !important;
}


/* Force-verberg de oude now-playing-strip stub (player.js zet hidden=false bij play,
   maar de inhoud (NL HI Online Lounge Radio etc) is verplaatst naar onze SVG-dial). */
#now-playing-strip { display: none !important; }

/* ─── Header: DAB+LIVE | {countryname} ─── */

/* Header-left groep: wordmark + | + country-name dicht op elkaar (1 regel),
   met station-count direct daaronder. */
.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.header-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.site-header-count {
  margin: 0;
  margin-top: -2px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wood-mid, #7a4a14);
  line-height: 1.2;
}

/* Header strakker: minder whitespace onder de country-naam / zenders-tekst */
.site-header {
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}
.site-header-sep {
  color: var(--brass, #b8862a);
  font-size: 1.2em;
  font-weight: 300;
  opacity: .5;
  line-height: 1;
}
.site-header-country {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: var(--red, #b8312a);
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 var(--paper-dark, #e6dab5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}
@media (max-width: 600px) {
  .site-header-sep, .site-header-country {
    /* Op kleine schermen geen ruimte voor "| Nederland" naast wordmark + selector */
    display: none;
  }
}

/* Screen-reader-only h1 (de country naam zit visueel nu in de header).
   Houdt SEO + a11y in stand. */
.country-title-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Country meta-row: station-count + lang-strip, net boven de Genre-strip */
.country-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 14px;
}
.country-meta-row .country-meta { margin: 0; }
.country-meta-row .country-lang-strip { margin-top: 0; }

.retro-radio-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Animaties die reageren op de globale player state ─── */

/* Speakergrille amber-glow — sterker als er gespeeld wordt */
.rr-grille-glow { opacity: .55; transition: opacity .6s ease; }
body[data-player-state="playing"] .rr-grille-glow {
  opacity: 1;
  animation: rr-grille-pulse 2.4s ease-in-out infinite;
}
@keyframes rr-grille-pulse {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* Dial display backlight */
.rr-dial-glow { opacity: .45; transition: opacity .4s ease; }
body[data-player-state="playing"] .rr-dial-glow,
body[data-player-state="loading"] .rr-dial-glow { opacity: 1; }

/* Magic-eye groene LED — UIT als de aan/uit-knop op pauze staat, AAN met
   vintage tube-flicker tijdens spelen, subtiel oplichtend tijdens 'tuning'. */
.rr-magic-eye-glow {
  opacity: 0;
  transition: opacity .4s ease;
}
body[data-player-state="loading"] .rr-magic-eye-glow {
  opacity: .45;
}
body[data-player-state="playing"] .rr-magic-eye-glow {
  animation: rr-eye-vintage-play 3.2s ease-in-out infinite;
}
@keyframes rr-eye-vintage-play {
  0%   { opacity: .85; }
  10%  { opacity: 1;   }
  20%  { opacity: .82; }
  32%  { opacity: 1;   }
  41%  { opacity: .78; }
  54%  { opacity: .95; }
  63%  { opacity: 1;   }
  72%  { opacity: .80; }
  84%  { opacity: 1;   }
  100% { opacity: .85; }
}

/* VU-naald rotatie wordt geheel door retro-radio.js geregeld via het SVG-transform-attribuut.
   GEEN CSS-transform hier (zou de origin breken op een element binnen een translated parent). */

/* Volume-knob: rotatie via SVG-attribuut in retro-radio.js geregeld.
   Interactief: muiswiel + drag om volume aan te passen. */
.rr-knob-right { cursor: grab; }
.rr-knob-right:active { cursor: grabbing; }
.rr-knob-right:focus { outline: none; }

/* Linkerknop = power / play-pauze knop. Klik = toggle audio via #player-toggle.
   Icoon-zichtbaarheid afhankelijk van body[data-player-state]. */
.rr-knob-left { cursor: pointer; }
.rr-knob-left:focus { outline: none; }

.rr-power-icon-play  { display: inline; }
.rr-power-icon-pause { display: none; }
body[data-player-state="playing"] .rr-power-icon-play  { display: none; }
body[data-player-state="playing"] .rr-power-icon-pause { display: inline; }
body[data-player-state="loading"] .rr-power-icon-play  { display: none; }
body[data-player-state="loading"] .rr-power-icon-pause { display: inline; opacity: .5; }

/* Override .station-mark CSS uit cabinet.css (regels 317-326, ontworpen voor HTML-divs
   in de oude tuner-dial). Op SVG <text class="station-mark"> drukt position:absolute +
   transform:translateX(-50%) de tekst uit positie (vaak linksboven van .retro-radio
   in plaats van op zijn SVG-coordinate). We resetten ze zodat de SVG-x/y +
   text-anchor="middle" hun werk kunnen doen. */
text.station-mark {
  position: static;
  bottom: auto;
  transform: none;
}

/* ─── Footer social-link (Facebook etc.) — vintage-style, geen tracking ─── */

.footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}
.footer-social-label {
  color: var(--wood-mid, #7a4a14);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--wood-mid, #7a4a14);
  text-decoration: none;
  opacity: 0.65;
  transition: color .15s ease, opacity .15s ease, transform .12s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--wood-dark, #2c1810);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}
.footer-social-link svg {
  display: block;
  flex-shrink: 0;
}

/* ─── #7 + #8: Memory (recent) + Favorites toolbar + modal ─── */

/* Lijn star op met .trending-badge: zelfde top + line-height; padding is
   horizontaal-only (top padding zou de glyph naar beneden duwen). */
.station-fav-toggle {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  color: rgba(74, 44, 26, .35);
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  z-index: 2;
  transition: color .15s ease, transform .12s ease, background .15s ease;
}
.station-card.is-trending .station-fav-toggle {
  right: 30px;
}
.station-card { position: relative; } /* zorg dat de star absolute kan zitten */
.station-fav-toggle:hover { color: var(--red, #b8312a); background: rgba(0,0,0,.05); }
.station-card[data-fav="1"] .station-fav-toggle {
  color: var(--red, #b8312a);
}
.station-card[data-fav="1"] .station-fav-toggle::before {
  content: '★';
}
.station-card[data-fav="1"] .station-fav-toggle { font-size: 0; } /* hide the ☆ char */
.station-card[data-fav="1"] .station-fav-toggle::before { font-size: 18px; }
.station-fav-toggle.just-toggled { transform: scale(1.4); }

.memory-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  align-items: center;
}
.mem-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--paper-warm, #e8d8a8);
  border: 1px solid var(--brass, #b8862a);
  border-radius: 18px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood-dark, #2c1810);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.mem-btn[hidden] { display: none !important; }
.mem-btn:hover { background: var(--paper, #f5ecd9); }
.mem-btn:active { transform: translateY(1px); }
.mem-btn-icon { font-size: 15px; }
.mem-btn-count {
  background: var(--wood-mid, #7a4a14);
  color: var(--paper, #f5ecd9);
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.mem-btn-count:empty { display: none; }

/* Memory/Favorites modal — zelfde stijl als preset-save-modal */
.mem-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mem-modal[hidden] { display: none; }
.mem-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 4, .55);
  backdrop-filter: blur(2px);
}
.mem-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--paper, #f5ecd9), var(--paper-warm, #e8d8a8));
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-top: 3px solid var(--brass, #b8862a);
  padding: 18px 18px 22px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4);
  animation: rr-sheet-up .25s cubic-bezier(.2,.9,.25,1);
}
@media (min-width: 700px) {
  .mem-modal { align-items: center; }
  .mem-modal-sheet {
    border-radius: 12px;
    border: 3px solid var(--brass, #b8862a);
    animation: rr-sheet-pop .25s cubic-bezier(.2,.9,.25,1);
  }
}
.mem-modal-title {
  margin: 0 0 14px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  color: var(--red, #b8312a);
  letter-spacing: 0.02em;
}
.mem-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mem-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper-warm, #e8d8a8);
  border: 1px solid rgba(74, 44, 26, .25);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: var(--font-serif, Georgia, serif);
  text-align: left;
  width: 100%;
}
.mem-modal-item:hover {
  background: var(--paper, #f5ecd9);
  border-color: var(--brass, #b8862a);
}
.mem-modal-item-logo {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: rgba(0,0,0,.06);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mem-modal-item-logo img { width: 100%; height: 100%; object-fit: contain; }
.mem-modal-item-text { flex: 1; min-width: 0; }
.mem-modal-item-name {
  font-size: 15px;
  color: var(--wood-dark, #2c1810);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-modal-item-country {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wood-mid, #7a4a14);
  opacity: .8;
}
.mem-modal-item-remove {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--wood-mid, #7a4a14);
  cursor: pointer;
  border-radius: 50%;
  opacity: .6;
  transition: opacity .15s ease, color .15s ease;
}
.mem-modal-item-remove:hover { opacity: 1; color: var(--red, #b8312a); }
.mem-modal-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--wood-mid, #7a4a14);
  font-style: italic;
  opacity: .7;
}
.mem-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--wood-mid, #7a4a14);
  cursor: pointer;
  padding: 0;
}
.mem-modal-close:hover { color: var(--red, #b8312a); }

/* ─── Save-toggle in player-bar (vooral voor mobiel) + preset-save modal ─── */

/* Save-toggle: vervangt de oude inline save-widget (1-6 slots) op alle schermbreedtes.
   Tap opent een modal met de slots. */
.save-toggle-btn,
.share-toggle-btn {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--paper, #f0e3bf);
  color: var(--wood-dark, #2c1810);
  border: 1px solid var(--brass, #b8862a);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .12s ease;
}
.save-toggle-btn[hidden],
.share-toggle-btn[hidden] { display: none !important; }
.save-toggle-btn:hover,
.share-toggle-btn:hover { background: var(--paper-warm, #e8d8a8); }
.save-toggle-btn:active,
.share-toggle-btn:active { transform: translateY(1px); }

/* Pulse-attentie wanneer gebruiker op een lege piano-toets klikt:
   amber-gloed in 2 cycli, ~2.4s. Vraagt visueel "hier opslaan". */
@keyframes save-toggle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 154, 60, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(232, 154, 60, 0.55); }
}
.save-toggle-btn.is-pulsing {
  animation: save-toggle-pulse 1.2s ease-out 2;
}

/* AirPlay-knop: zelfde uitstraling als save-toggle. Zichtbaar zodra
   WebKitPlaybackTargetAvailabilityEvent een target meldt (iOS Safari). */
.airplay-toggle-btn {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--paper, #f0e3bf);
  color: var(--wood-dark, #2c1810);
  border: 1px solid var(--brass, #b8862a);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .12s ease;
}
.airplay-toggle-btn[hidden] { display: none !important; }
.airplay-toggle-btn:hover { background: var(--paper-warm, #e8d8a8); }
.airplay-toggle-btn:active { transform: translateY(1px); }
.airplay-toggle-btn.is-connected {
  background: var(--red, #b8312a);
  color: var(--paper, #f5ecd9);
  border-color: var(--red, #b8312a);
}

/* Chromecast-knop: zelfde look als airplay-toggle. Zichtbaar zodra Cast SDK
   meldt dat er een receiver beschikbaar is. */
.cast-toggle-btn {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--paper, #f0e3bf);
  color: var(--wood-dark, #2c1810);
  border: 1px solid var(--brass, #b8862a);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .12s ease;
}
.cast-toggle-btn[hidden] { display: none !important; }
.cast-toggle-btn:hover { background: var(--paper-warm, #e8d8a8); }
.cast-toggle-btn:active { transform: translateY(1px); }
.cast-toggle-btn.is-connected {
  background: var(--red, #b8312a);
  color: var(--paper, #f5ecd9);
  border-color: var(--red, #b8312a);
}

/* Bottom-sheet modal voor save-flow (mobiel) of centered dialog (desktop) */
.preset-save-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.preset-save-modal[hidden] { display: none; }
.preset-save-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 4, .55);
  backdrop-filter: blur(2px);
}
.preset-save-sheet {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, var(--paper, #f5ecd9), var(--paper-warm, #e8d8a8));
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-top: 3px solid var(--brass, #b8862a);
  padding: 20px 18px 24px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4);
  animation: rr-sheet-up .25s cubic-bezier(.2,.9,.25,1);
}
@keyframes rr-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 700px) {
  .preset-save-modal { align-items: center; }
  .preset-save-sheet {
    border-radius: 12px;
    border: 3px solid var(--brass, #b8862a);
    animation: rr-sheet-pop .25s cubic-bezier(.2,.9,.25,1);
  }
  @keyframes rr-sheet-pop {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
}
.preset-save-title {
  margin: 0 0 4px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  color: var(--red, #b8312a);
  letter-spacing: 0.02em;
}
.preset-save-now {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wood-mid, #7a4a14);
  margin-bottom: 14px;
}
.preset-save-now-label { opacity: .65; margin-right: 6px; }
.preset-save-now-name {
  color: var(--wood-dark, #2c1810);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
.preset-save-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.preset-save-slot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper-warm, #e8d8a8);
  border: 1.5px solid rgba(74, 44, 26, .25);
  border-radius: 6px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 16px;
  color: var(--wood-dark, #2c1810);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.preset-save-slot:hover {
  background: var(--paper, #f5ecd9);
  border-color: var(--brass, #b8862a);
}
.preset-save-slot:active { transform: translateY(1px); }
.preset-save-slot.is-occupied {
  border-color: rgba(74, 44, 26, .5);
  font-weight: 600;
}
.preset-save-slot-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--wood-mid, #7a4a14);
  color: var(--paper, #f5ecd9);
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px;
  border-radius: 50%;
}
.preset-save-slot.is-occupied .preset-save-slot-num {
  background: var(--red, #b8312a);
}
.preset-save-slot-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-save-slot:not(.is-occupied) .preset-save-slot-name {
  font-style: italic;
  opacity: .55;
}
.preset-save-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--wood-mid, #7a4a14);
  cursor: pointer;
  padding: 0;
}
.preset-save-close:hover { color: var(--red, #b8312a); }

/* Long-press visual feedback op pianotoetsen */
.rr-key.is-pressing .rr-key-top {
  fill: #f0c878;
  transition: fill .6s ease;
}

/* ─── Pianotoetsen — class="preset" zodat player.js handlers werken ─── */

/* Pianotoets — cursor + hover.
   GEEN CSS-transform en GEEN fill-transitions: het SVG-transform-attribuut
   `transform="translate(X 360)"` zou door CSS overschreven worden, en kleur-transitions
   geven bij snel klikken een "flicker"-perceptie. "Pressed" is een instant fill-change. */
.rr-key { cursor: pointer; }
.rr-key:hover .rr-key-top { fill: #fff4d8; }
.rr-key.is-empty { cursor: default; }
.rr-key.is-empty .rr-key-top { fill: #b8a578; opacity: .65; }
.rr-key.is-active .rr-key-top { fill: #d8a868; }
.rr-key.is-active text { fill: #2a1808; }

/* ─── Rode naald: HTML overlay positioned over the dial strip ─── */

.rr-needle-wrap {
  position: absolute;
  /* Dial strip in SVG viewBox is at x=48..632 / y=306..352 of 680x460 */
  left: 7.06%;
  right: 7.06%;
  top: 66.5%;
  height: 10%;
  pointer-events: none;
  z-index: 3;
}

/* Override van bestaande .needle in cabinet.css zodat-ie binnen de wrap zit */
.rr-needle-wrap .needle {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, transparent 0%, #ffd060 12%, #e84838 30%, #e84838 70%, #ffd060 88%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255, 208, 96, .9),
    0 0 16px rgba(232, 72, 56, .7),
    0 0 28px rgba(232, 72, 56, .35);
  transition: left 650ms cubic-bezier(0.4, 1.4, 0.5, 1), opacity 300ms ease;
}
.rr-needle-wrap .needle.is-off {
  opacity: .25;
  filter: saturate(.5);
}
.rr-needle-wrap .needle::before {
  content: '';
  position: absolute; top: -7px; left: -5px;
  width: 13px; height: 13px;
  background: radial-gradient(circle, #ffd060, #e84838 60%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(232, 72, 56, .8);
}

/* ─── Mobiel: schalen ─── */

@media (max-width: 720px) {
  .retro-radio {
    margin: 16px auto 12px;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
  }
}
@media (max-width: 480px) {
  .retro-radio {
    margin: 12px auto 8px;
    max-width: 100%;
  }
  /* Op heel kleine schermen mogen de pianotoets-labels iets groter zodat ze leesbaar blijven */
  .rr-key text { font-size: 11px; }
}