/* Publieke verzoekpagina.
   Staat los van app.css (die is van de consoles), zodat de pagina per thema
   kan worden opgemaakt zonder admin of DJ-console te raken.
   De merkkleuren (--brand, --brand-2, --accent, --bg, --card en de -rgb
   varianten) en --heading-font zet de server per station in <style id="rr-theme">.
   Hieronder staan alleen terugvalwaarden en de afgeleide pagina-variabelen. */
:root{
  --brand:#c86bff; --brand-rgb:200,107,255;
  --brand-2:#5ce1ff; --brand-2-rgb:92,225,255;
  --accent:#ff4fa3; --accent-rgb:255,79,163;
  --bg:#0a0814; --bg-rgb:10,8,20;
  --card:#15112a; --panel-rgb:21,17,42;
  --heading-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  /* Knoppen en LIVE: standaard de hoofd- en accentkleur, in de admin apart te kiezen. */
  --rq-btn-1:var(--brand); --rq-btn-2:var(--accent); --rq-btn-rgb:var(--accent-rgb);
  --rq-live:var(--accent); --rq-live-rgb:var(--accent-rgb);

  --rq-fg:#f3f1fa;
  --rq-muted:#b4adc8;
  --rq-faint:#857e9c;
  --rq-surface:rgba(var(--panel-rgb),.74);
  --rq-surface-strong:rgba(var(--panel-rgb),.92);
  --rq-border:rgba(255,255,255,.09);
  --rq-input:rgba(0,0,0,.28);
  --rq-input-border:rgba(255,255,255,.14);
  --rq-shadow:0 18px 50px rgba(0,0,0,.45);
  --rq-glow:0 0 0 1px rgba(var(--brand-rgb),.18), 0 18px 50px rgba(0,0,0,.45);
  --rq-overlay-top:rgba(var(--bg-rgb),.25);
  --rq-overlay-bottom:rgba(var(--bg-rgb),.78);
  --rq-radius:22px;
  /* Kleinere elementen ronden mee met de instelling voor de kaarten. */
  --rq-radius-md:calc(var(--rq-radius) * .8);
  --rq-radius-sm:calc(var(--rq-radius) * .64);
  --rq-bg-image:url('/img/themes/neon.svg');
}
[data-theme="vinyl"]{ --rq-bg-image:url('/img/themes/vinyl.svg'); --rq-glow:0 0 0 1px rgba(var(--brand-rgb),.14), 0 18px 50px rgba(0,0,0,.5); }
[data-theme="zonsondergang"]{ --rq-bg-image:url('/img/themes/zonsondergang.svg'); --rq-overlay-top:rgba(var(--bg-rgb),.15); }
[data-theme="zwart"]{ --rq-bg-image:url('/img/themes/zwart.svg');
  --rq-surface:rgba(var(--panel-rgb),.88); --rq-surface-strong:rgba(22,22,26,.96); --rq-border:rgba(255,255,255,.11);
  --rq-input:rgba(255,255,255,.04); --rq-input-border:rgba(255,255,255,.16);
  --rq-glow:0 0 0 1px rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.7);
  --rq-overlay-top:rgba(0,0,0,0); --rq-overlay-bottom:rgba(0,0,0,.35); }
[data-theme="licht"]{
  --rq-bg-image:url('/img/themes/licht.svg');
  --rq-fg:#18202e; --rq-muted:#566175; --rq-faint:#8590a3;
  --rq-surface:rgba(255,255,255,.78); --rq-surface-strong:rgba(255,255,255,.96);
  --rq-border:rgba(20,30,50,.08);
  --rq-input:#fff; --rq-input-border:rgba(20,30,50,.16);
  --rq-shadow:0 14px 40px rgba(30,45,80,.12);
  --rq-glow:0 0 0 1px rgba(20,30,50,.06), 0 14px 40px rgba(30,45,80,.12);
  --rq-overlay-top:rgba(255,255,255,0); --rq-overlay-bottom:rgba(255,255,255,.35);
}

*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100vh; color:var(--rq-fg); background:var(--bg);
  font-family:var(--body-font);
  font-size:16px; line-height:1.55;
}
h1,h2,h3{ font-family:var(--heading-font); line-height:1.15; margin:0 }
a{ color:var(--brand-2) }
img{ max-width:100% }

/* Achtergrond: thema-afbeelding, of de eigen upload van het station (zet index.js). */
.rq-bg{
  position:fixed; inset:0; z-index:-1;
  background-color:var(--bg);
  background-image:linear-gradient(180deg,var(--rq-overlay-top),var(--rq-overlay-bottom)),var(--rq-bg-image);
  background-size:cover; background-position:center;
}

.rq-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:20px 16px 40px }

/* ---- kop ---- */
.rq-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0 22px }
.rq-brand{ display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:var(--rq-fg) }
.rq-brand img{ max-height:64px; max-width:220px; width:auto; display:block }
.rq-brand-name{ font-family:var(--heading-font); font-weight:800; font-size:clamp(22px,3.4vw,34px); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-brand.is-animated{ animation:rqFadeDown .9s ease-out both }
.rq-top-right{ display:flex; align-items:center; gap:10px; flex-shrink:0 }
.rq-site-link{ color:var(--rq-muted); text-decoration:none; font-size:.92rem; padding:8px 12px; border-radius:999px; border:1px solid var(--rq-border); background:var(--rq-surface) }
.rq-site-link:hover{ color:var(--rq-fg) }


/* ---- indeling ---- */
/* Vaste maten: op een breed scherm heeft elke rij een vaste hoogte, wat er
   ook in staat (lange titels, wel of geen DJ, formulier aan of uit, aantal
   shows of verzoeken). Op smalle schermen bestaan de kaarten zelf uit vakken
   met een vaste hoogte, dus ook daar springt er niets. */
.rq-grid{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"now" "form" "how" "shows" "recent" }
@media (min-width:920px){
  .rq-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:stretch;
    grid-template-rows:286px 676px auto;
    grid-template-areas:"now how" "form shows" "recent recent" }
}
.rq-area-now{ grid-area:now } .rq-area-form{ grid-area:form } .rq-area-how{ grid-area:how }
.rq-area-shows{ grid-area:shows } .rq-area-recent{ grid-area:recent }
.rq-grid > *{ min-width:0 }

.rq-card{
  background:var(--rq-surface); border:1px solid var(--rq-border); border-radius:var(--rq-radius);
  box-shadow:var(--rq-glow); padding:22px;
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
}
.rq-card h2{ font-size:1.3rem; font-weight:800; margin-bottom:6px }
.rq-eyebrow{ display:flex; align-items:center; gap:10px; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-2); margin-bottom:10px }
.rq-lead{ color:var(--rq-muted); margin:0 0 18px }

/* ---- nu op de radio ----
   Bovenaan hoes + nummer, onderaan een strook over de hele breedte met wie er
   draait (links), het programma (midden) en de tijd (rechts). Alle vakken
   hebben een vaste hoogte; te lange tekst wordt afgekapt met "…". */
.rq-now-card{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; transition:border-color .3s, box-shadow .3s }
.rq-now{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; align-items:center; height:160px }
.rq-now-main{ min-width:0 }
.rq-art-wrap{ position:relative; width:160px; height:160px; flex-shrink:0 }
.rq-art{ width:100%; height:100%; border-radius:var(--rq-radius-md); overflow:hidden; position:relative; flex-shrink:0; box-shadow:0 12px 30px rgba(0,0,0,.35); background:linear-gradient(135deg,var(--brand),var(--accent)) }
.rq-art img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s ease }
/* Wissel tussen DJ-foto / albumhoes en de showhoes (index.js flipPhase) */
.rq-art.is-fading img,.rq-art.is-fading svg{ opacity:0 }
.rq-np-text{ transition:opacity .3s ease }
.rq-np-text.is-fading{ opacity:0 }
.rq-art svg{ width:100%; height:100%; display:block }
/* Stationslogo als vervanger van de hoes: passend en met wat lucht, op het kaartvlak. */
.rq-art.is-logo,.rq-req-art.is-logo{ background:var(--rq-surface-strong); border:1px solid var(--rq-border) }
.rq-art.is-logo img,.rq-req-art.is-logo img{ object-fit:contain; padding:12%; box-sizing:border-box }
/* Luisterknop rechtsonder op de hoes. Speelt hij, dan pauzeknop en een
   zachte gloed; tijdens het verbinden een draaiend rondje. */
.rq-play{ position:absolute; right:10px; bottom:10px; width:54px; height:54px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--rq-btn-1),var(--rq-btn-2));
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 3px rgba(0,0,0,.25); transition:transform .15s, box-shadow .2s }
.rq-play:hover{ transform:scale(1.07) }
.rq-play:focus-visible{ outline:3px solid var(--brand-2); outline-offset:2px }
.rq-play svg{ width:26px; height:26px; grid-area:1 / 1 }
.rq-play .i-pause,.rq-play .i-load{ display:none }
.rq-play.is-playing .i-play,.rq-play.is-loading .i-play{ display:none }
.rq-play.is-playing .i-pause{ display:block }
.rq-play.is-playing{ animation:rqPlayGlow 2s ease-in-out infinite }
.rq-play.is-loading .i-load{ display:block; grid-area:1 / 1; width:24px; height:24px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:rqSpin .8s linear infinite }
.rq-play.is-error{ background:#5a5a66 }
.rq-now-main .rq-eyebrow{ margin-bottom:8px }
.rq-np-text{ max-height:128px; display:flex; flex-direction:column; justify-content:center; min-width:0; overflow:hidden }
.rq-np-title{ font-family:var(--heading-font); font-size:30px; font-weight:800; line-height:1.12; flex-shrink:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere }
.rq-np-sub{ font-family:var(--heading-font); font-size:18px; font-weight:400; line-height:1.25; color:var(--rq-muted); margin-top:3px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-np-artist{ font-size:19px; line-height:1.3; font-weight:700; color:var(--brand-2); margin-top:6px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-np-next{ color:var(--rq-muted); font-size:.95rem; line-height:1.4; margin-top:8px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-np-next b{ color:var(--rq-fg); font-weight:600 }

.rq-onair{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px;
  height:58px; flex-shrink:0; padding:0 16px; border-radius:var(--rq-radius-md); border:1px solid var(--rq-border);
  background:rgba(var(--brand-rgb),.07); color:var(--rq-muted); font-size:.95rem; transition:background .3s, border-color .3s }
.rq-onair > *{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .35s }
.rq-onair.is-swap > *{ opacity:0 }
.rq-onair b{ color:var(--rq-fg) }
.rq-onair-who{ display:flex; align-items:center; gap:10px }
.rq-onair-who b{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.rq-onair-tags{ display:flex; align-items:center; gap:10px; flex-shrink:0 }
.rq-onair-text{ display:flex; flex-direction:column; min-width:0; line-height:1.2 }
.rq-onair-text > *{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-onair-sub{ font-size:.85rem; font-weight:600; color:var(--rq-muted); margin-top:2px }
/* Label voor in de strook: 'Now On Air' (geen DJ live) of 'Up Next' (aankondiging). Even stevig als de LIVE-pil. */
.rq-onair-tag{ display:inline-flex; align-items:center; flex-shrink:0; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rq-fg); background:rgba(var(--brand-rgb),.2); border:1px solid rgba(var(--brand-rgb),.5) }
.rq-onair-tag--next{ color:var(--bg); background:var(--brand); border-color:var(--brand) }
.rq-onair.is-next{ background:rgba(var(--brand-rgb),.14); border-color:rgba(var(--brand-rgb),.45) }
.rq-now-card.is-live .rq-onair.is-next{ background:rgba(var(--brand-rgb),.14); border-color:rgba(var(--brand-rgb),.45) }
.rq-onair-time{ text-align:right }
/* Tijd als label met klokje, net zo stevig als de LIVE-pil links. */
.rq-time-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--rq-fg);
  font-variant-numeric:tabular-nums; background:rgba(var(--brand-rgb),.14); border:1px solid rgba(var(--brand-rgb),.38) }
.rq-time-chip svg{ width:15px; height:15px; flex-shrink:0; color:var(--brand-2) }
.rq-now-card.is-live .rq-time-chip{ background:rgba(var(--rq-live-rgb),.16); border-color:rgba(var(--rq-live-rgb),.45) }
.rq-onair-avatar{ width:38px; height:38px; flex-shrink:0; border-radius:50%; object-fit:cover; border:2px solid var(--rq-live) }
.rq-live-pill{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--rq-live) }
.rq-live-pill .dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:rqBlink 1.2s ease-in-out infinite }

/* Er is een DJ live: accentrand om de kaart en een opvallende strook met
   LIVE en de naam van de DJ. Bewust maar één keer het woord LIVE. */
.rq-now-card.is-live{ border-color:rgba(var(--rq-live-rgb),.6); box-shadow:0 0 0 1px rgba(var(--rq-live-rgb),.35), 0 0 34px rgba(var(--rq-live-rgb),.22), 0 18px 50px rgba(0,0,0,.45) }
.rq-now-card.is-live .rq-onair{ background:linear-gradient(90deg,rgba(var(--rq-live-rgb),.26),rgba(var(--rq-live-rgb),.06)); border-color:rgba(var(--rq-live-rgb),.5); color:var(--rq-fg) }
.rq-now-card.is-live .rq-onair-who b{ font-size:1.12rem; font-weight:800 }

.rq-eq{ display:inline-flex; align-items:flex-end; gap:3px; height:14px }
.rq-eq i{ width:3px; height:100%; border-radius:2px; background:currentColor; transform-origin:bottom; animation:rqEq 1s ease-in-out infinite }
.rq-eq i:nth-child(2){ animation-delay:-.4s } .rq-eq i:nth-child(3){ animation-delay:-.7s } .rq-eq i:nth-child(4){ animation-delay:-.2s }
.rq-eq.is-idle i{ animation:none; transform:scaleY(.25) }

/* Smal: hoes boven de tekst, strook in twee regels (wie / programma + tijd).
   Nog steeds alles vaste hoogtes. */
@media (max-width:560px){
  .rq-now{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:16px; height:auto; text-align:center; justify-items:center }
  .rq-art-wrap{ width:min(230px, 62vw); height:auto; aspect-ratio:1 }
  .rq-play{ width:54px; height:54px; right:10px; bottom:10px }
  .rq-now-main{ width:100% }
  .rq-now-main .rq-eyebrow{ justify-content:center }
  .rq-np-text{ height:112px; max-height:none; align-items:center }
  .rq-np-title{ font-size:24px; max-width:100% }
  .rq-np-sub{ font-size:16px; max-width:100% }
  .rq-np-artist{ font-size:17px; max-width:100% }
  .rq-np-next{ max-width:100% }
  /* Strook: wie op de eerste regel, programma en tijd samen gecentreerd eronder. */
  .rq-onair{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"tags time" "text text"; height:96px; gap:6px 10px; padding:10px 14px; align-content:center }
  .rq-onair-who{ display:contents }
  .rq-onair-tags{ grid-area:tags }
  .rq-onair-text{ grid-area:text; align-items:center; text-align:center }
  .rq-onair-text b{ font-family:var(--heading-font); font-size:1.15rem; font-weight:700; letter-spacing:.01em; max-width:100% }
  .rq-onair-sub{ max-width:100% }
  .rq-onair-time{ grid-area:time }
  .rq-time-chip{ font-size:.85rem; padding:4px 10px }
}

/* ---- formulier ---- */
.rq-form-card{ position:relative; display:flex; flex-direction:column }
.rq-form{ flex:1; display:flex; flex-direction:column; gap:14px }
/* Uit: het formulier blijft onzichtbaar staan (houdt de maat vast), de
   melding ligt eroverheen. */
.rq-form-card.is-closed > h2,
.rq-form-card.is-closed > .rq-lead,
.rq-form-card.is-closed > .rq-form{ visibility:hidden }
.rq-row{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr) }
@media (min-width:600px){ .rq-row--2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.rq-field label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:6px }
.rq-field label small{ font-weight:500; color:var(--rq-faint) }
.rq-field input,.rq-field textarea{
  width:100%; font:inherit; color:var(--rq-fg); background:var(--rq-input);
  border:1px solid var(--rq-input-border); border-radius:var(--rq-radius-sm); padding:12px 14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.rq-field textarea{ min-height:92px; resize:vertical; padding-right:52px }
.rq-field input::placeholder,.rq-field textarea::placeholder{ color:var(--rq-faint) }
.rq-field input:focus,.rq-field textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.25) }
.rq-msg-wrap{ position:relative }
.rq-emoji-btn{ position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:10px; border:1px solid var(--rq-input-border); background:transparent; cursor:pointer; font-size:1.15rem; line-height:1 }
.rq-emoji{ display:none; flex-wrap:wrap; gap:4px; margin-top:8px; padding:10px; border-radius:14px; background:var(--rq-surface-strong); border:1px solid var(--rq-border) }
.rq-emoji.is-open{ display:flex }
.rq-emoji button{ border:0; background:transparent; font-size:1.3rem; padding:4px 6px; border-radius:8px; cursor:pointer }
.rq-emoji button:hover{ background:rgba(var(--brand-rgb),.15) }
.rq-captcha{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.rq-captcha-img{ display:block; width:238px; max-width:100%; height:auto; aspect-ratio:238 / 80; border-radius:12px; border:1px solid var(--rq-input-border); background:var(--rq-input) }
.rq-captcha-reload{ width:44px; height:44px; flex-shrink:0; border-radius:12px; border:1px solid var(--rq-input-border); background:transparent; color:var(--rq-muted); font-size:1.3rem; line-height:1; cursor:pointer; transition:color .15s, border-color .15s }
.rq-captcha-reload:hover{ color:var(--brand-2); border-color:var(--brand) }
.rq-field .rq-captcha-input{ width:150px; text-transform:uppercase; letter-spacing:.22em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:700 }
.rq-field .rq-captcha-input::placeholder{ text-transform:none; letter-spacing:normal; font-weight:400; font-family:inherit }

.rq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none;
  font:inherit; font-weight:800; letter-spacing:.02em; border:0; border-radius:999px; padding:14px 26px;
  color:#fff; background:linear-gradient(135deg,var(--rq-btn-1),var(--rq-btn-2));
  box-shadow:0 10px 26px rgba(var(--rq-btn-rgb),.32); transition:transform .15s, box-shadow .15s, opacity .15s;
}
.rq-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(var(--rq-btn-rgb),.4) }
.rq-btn:disabled{ opacity:.6; cursor:default; transform:none }
.rq-btn--ghost{ background:transparent; color:var(--rq-fg); border:1px solid var(--rq-input-border); box-shadow:none; padding:10px 16px; font-weight:600 }
.rq-submit-row{ display:flex; align-items:center; gap:14px; margin-top:auto }
.rq-submit-row .rq-btn{ flex-shrink:0 }
.rq-status{ flex:1; min-width:0; height:56px; display:flex; align-items:center }
.rq-hint{ color:var(--rq-faint); font-size:.88rem; line-height:1.4 }
.rq-status.has-result .rq-hint{ display:none }
.rq-result{ display:none; width:100%; padding:7px 12px; border-radius:12px; font-weight:600; font-size:.88rem; line-height:1.35;
  max-height:56px; overflow:hidden }
@media (max-width:600px){
  .rq-submit-row{ flex-direction:column; align-items:stretch; gap:10px }
  .rq-status{ height:60px; text-align:center; justify-content:center }
}
.rq-result.is-ok{ display:block; background:rgba(60,200,120,.14); color:#7ee2a8; border:1px solid rgba(60,200,120,.35) }
.rq-result.is-err{ display:block; background:rgba(255,90,90,.12); color:#ff9c9c; border:1px solid rgba(255,90,90,.35) }
/* Op wit is de tweede (lichte) merkkleur te zwak als tekst. */
[data-theme="licht"] .rq-eyebrow,
[data-theme="licht"] .rq-np-artist,
[data-theme="licht"] .rq-show-when,
[data-theme="licht"] .rq-req-artist,
[data-theme="licht"] .rq-pill--played{ color:var(--brand) }
[data-theme="licht"] .rq-result.is-ok{ color:#13804a }
[data-theme="licht"] .rq-result.is-err{ color:#c0352b }
.rq-closed{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px }
.rq-closed-icon{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-size:1.6rem; color:#fff; margin-bottom:16px; background:linear-gradient(135deg,var(--rq-btn-1),var(--rq-btn-2)); box-shadow:0 10px 26px rgba(var(--rq-btn-rgb),.3) }
.rq-closed h3{ font-size:1.35rem; font-weight:800; margin-bottom:8px }
.rq-closed p{ color:var(--rq-muted); margin:0 0 20px }

/* ---- zo werkt het ---- */
.rq-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.rq-steps li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start }
.rq-steps .n{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--rq-btn-1),var(--rq-btn-2)) }
.rq-steps b{ display:block }
.rq-steps span{ color:var(--rq-muted); font-size:.93rem }

/* ---- komende shows ---- */
.rq-shows-card{ display:flex; flex-direction:column }
.rq-shows{ display:flex; flex-direction:column; gap:10px; flex:1 }
/* Elke show een duidelijk kader: stevige rand, eigen vlak en een gekleurde
   streep links. De eerstvolgende show licht op. Lege plekken: gestippeld. */
.rq-show{ position:relative; overflow:hidden; display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; flex:1 1 0; min-height:84px;
  padding:8px 12px 8px 16px; border-radius:var(--rq-radius-sm); border:1px solid rgba(var(--brand-rgb),.32); background:var(--rq-surface-strong);
  box-shadow:0 4px 14px rgba(0,0,0,.18) }
.rq-show::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--brand),var(--accent)) }
.rq-show:first-child:not(.rq-show--leeg){ border-color:rgba(var(--accent-rgb),.6); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25), 0 6px 18px rgba(var(--accent-rgb),.14) }
.rq-show--leeg{ border:1.5px dashed rgba(var(--brand-rgb),.32); background:rgba(var(--brand-rgb),.03); box-shadow:none }
.rq-show--leeg::before{ display:none }
.rq-show--leeg .rq-show-name{ color:var(--rq-faint); font-weight:600 }
.rq-show--leeg .rq-show-img{ background:transparent; border:1.5px dashed rgba(var(--brand-rgb),.32); color:var(--rq-faint); font-weight:400 }
.rq-show-img{ width:52px; height:52px; border-radius:var(--rq-radius-sm); overflow:hidden; background:linear-gradient(135deg,rgba(var(--brand-rgb),.5),rgba(var(--accent-rgb),.5)); display:grid; place-items:center; font-weight:800; color:#fff }
.rq-show-img img{ width:100%; height:100%; object-fit:cover }
.rq-show-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rq-show-meta{ color:var(--rq-muted); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rq-show-when{ color:var(--brand-2); font-size:.85rem; font-weight:700 }
.rq-empty{ color:var(--rq-faint); font-size:.95rem }

/* ---- laatste verzoeken ---- */
/* De laatste vier, twee per rij. Een oneven laatste verzoek krijgt de hele
   breedte: 1 = hele breedte, 2 = naast elkaar, 3 = twee boven + één eronder,
   4 = twee rijen van twee. Op een smal scherm staan ze onder elkaar. */
.rq-recent-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.rq-recent-head h2{ margin:0 }
.rq-recent{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.rq-recent > .rq-req:last-child:nth-child(odd),
.rq-recent > .rq-empty{ grid-column:1 / -1 }
.rq-recent > .rq-empty{ height:186px; display:grid; place-items:center; border:1.5px dashed rgba(var(--brand-rgb),.32); border-radius:var(--rq-radius-md); font-size:1.05rem }
@media (max-width:640px){ .rq-recent{ grid-template-columns:minmax(0,1fr); gap:12px } }
/* Een verzoekje: hoes (cover finder) met titel, artiest, wie en wanneer, daaronder
   het volledige bericht. De hoes kleurt wazig de achtergrond. */
/* Twee kaarten naast elkaar zijn even hoog (grid-rij). Het berichtkader vult de rest
   van de kaart, zodat beide kaders onderaan gelijk eindigen; zonder bericht staat
   de bovenkant midden in de kaart. */
.rq-req{ min-height:186px; display:grid; grid-template-rows:auto 1fr; gap:14px; min-width:0; position:relative; overflow:hidden; isolation:isolate;
  background:var(--rq-surface-strong); border:1px solid rgba(var(--brand-rgb),.28); border-radius:var(--rq-radius-md); padding:16px }
.rq-req-bg{ position:absolute; inset:-30px; z-index:-1; background-size:cover; background-position:center; filter:blur(28px) saturate(1.3); opacity:.28 }
.rq-req-top{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; min-width:0 }
.rq-req-art{ width:96px; height:96px; border-radius:var(--rq-radius-sm); overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.35); background:linear-gradient(135deg,var(--brand),var(--accent)) }
.rq-req-art img,.rq-req-art svg{ width:100%; height:100%; object-fit:cover; display:block }
.rq-req-info{ min-width:0 }
.rq-req-track{ font-family:var(--heading-font); font-size:1.3rem; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rq-req-artist{ color:var(--brand-2); font-weight:700; font-size:1.02rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* "Aangevraagd door Naam om 15:41": de naam krimpt als het krap wordt, de tijd blijft staan. */
.rq-req-by{ display:flex; gap:5px; min-width:0; margin-top:5px; font-size:.86rem; color:var(--rq-muted); white-space:nowrap }
.rq-req-by .by{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.rq-req-by .at{ flex-shrink:0; white-space:nowrap }
.rq-req.is-plain{ grid-template-rows:auto; align-content:center }
.rq-req-by b{ color:var(--rq-fg); font-style:italic }
.rq-req-meta{ display:flex; align-items:center; gap:10px; margin-top:7px; white-space:nowrap }
/* Het bericht van de luisteraar, altijd helemaal (max. 300 tekens). */
.rq-req-note{ min-width:0; display:flex; align-items:center; padding:10px 14px; border-radius:var(--rq-radius-sm); background:rgba(var(--brand-rgb),.09); border-left:3px solid var(--brand);
  font-size:.92rem; line-height:1.45; font-style:italic; color:var(--rq-fg); overflow-wrap:anywhere }
/* Smal: volle breedte en iets kleiner. */
@media (max-width:640px){
  .rq-req{ min-height:0; gap:12px; padding:14px }
  .rq-recent > .rq-empty{ height:140px; padding:0 16px; text-align:center }
  .rq-req-top{ grid-template-columns:80px minmax(0,1fr); gap:14px }
  .rq-req-art{ width:80px; height:80px; border-radius:var(--rq-radius-sm) }
  .rq-req-track{ font-size:1.12rem }
  .rq-req-artist{ font-size:.95rem }
  .rq-req-by{ display:block; white-space:normal; font-size:.8rem; line-height:1.35; margin-top:3px }
  .rq-req-by .by{ overflow:visible }
  .rq-req-meta{ margin-top:5px }
  .rq-req-note{ padding:9px 12px }
}
.rq-pill{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px }
.rq-pill--played{ background:rgba(var(--brand-rgb),.18); color:var(--brand-2) }
.rq-pill--approved{ background:rgba(var(--accent-rgb),.15); color:var(--accent) }

/* ---- voet ---- */
.rq-footer{ text-align:center; color:var(--rq-faint); font-size:.85rem; padding:26px 16px 30px }
.rq-footer a{ color:var(--rq-muted) }
.rr-footer-credit{ margin-top:6px }

/* ---- losse blokken op de website van het station (/embed/...) ----
   Elk blok is een stukje verzoekpagina in het gekozen thema: dezelfde
   achtergrond (of de eigen achtergrondafbeelding), met de kaart erop. */
body.rq-embed{ background:transparent; min-height:0 }
.rq-embed-wrap{
  padding:14px; border-radius:calc(var(--rq-radius) + 4px); overflow:hidden;
  background-color:var(--bg);
  background-image:linear-gradient(180deg,var(--rq-overlay-top),var(--rq-overlay-bottom)),var(--rq-bg-image);
  background-size:cover; background-position:center;
}
.rq-embed .rq-card{ box-shadow:var(--rq-glow) }
.rq-embed .rq-show{ flex:0 0 auto }
.rq-embed[data-widget="ticker"] .rq-embed-wrap{ padding:8px; border-radius:20px }

/* ---- nieuwsticker (alleen als los blok) ---- */
.rq-ticker{ display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:58px; overflow:hidden; border-radius:16px }
.rq-ticker-label{ flex-shrink:0; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--rq-btn-1),var(--rq-btn-2)) }
.rq-ticker-text{ flex:1; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .35s ease, transform .35s ease }
.rq-ticker-text.is-out{ opacity:0; transform:translateY(8px) }
.rq-ticker-text span{ color:var(--brand-2) }
.rq-ticker-text small{ color:var(--rq-muted); font-weight:500; margin-left:8px }
[data-theme="licht"] .rq-ticker-text span{ color:var(--brand) }

/* ---- animaties ---- */
@keyframes rqPulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6) } 70%{ box-shadow:0 0 0 10px rgba(var(--accent-rgb),0) } 100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0) } }
@keyframes rqSpin{ to{ transform:rotate(360deg) } }
@keyframes rqPlayGlow{ 0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 3px rgba(var(--rq-btn-rgb),.25) } 50%{ box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 9px rgba(var(--rq-btn-rgb),.12) } }
@keyframes rqBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@keyframes rqEq{ 0%,100%{ transform:scaleY(.3) } 50%{ transform:scaleY(1) } }
@keyframes rqFadeDown{ from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

@media (max-width:560px){
  .rq-wrap{ padding:14px 12px 30px }
  .rq-card{ padding:18px; border-radius:var(--rq-radius-md) }
  .rq-site-link{ display:none }
  .rq-top{ justify-content:center }
  .rq-top-right{ display:none }
  .rq-brand{ justify-content:center; text-align:center }
  .rq-brand img{ max-height:48px }
  .rq-brand-name{ white-space:normal; font-size:21px; line-height:1.15 }
}