/* Radio-Dalika speler (AccessWeb) - neonbalk onderaan + apart venster */
:root{
  --aw-ds-roze:#ec65d5; --aw-ds-paars:#c465e6; --aw-ds-blauw:#88b2f2;
  --aw-ds-bg:#0d0812; --aw-ds-tekst:#f6e9ff; --aw-ds-zacht:#bfa8d6;
}
body.aw-ds-heeft-balk{padding-bottom:84px !important;}

.aw-ds{box-sizing:border-box;display:flex;align-items:center;gap:14px;color:var(--aw-ds-tekst);
  font-family:"Lato","Segoe UI",system-ui,sans-serif;line-height:1.25;}
.aw-ds *{box-sizing:border-box;}

/* --- balk onderaan --- */
.aw-ds-balk{position:fixed;left:0;right:0;bottom:0;z-index:99990;height:76px;padding:0 18px;
  background:linear-gradient(180deg,rgba(28,10,36,.96),rgba(10,6,14,.98));
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--aw-ds-paars),var(--aw-ds-roze),var(--aw-ds-blauw),var(--aw-ds-roze),var(--aw-ds-paars)) 1;
  box-shadow:0 -6px 24px rgba(236,101,213,.25);backdrop-filter:blur(6px);}

/* draaiende plaat met het logo */
.aw-ds-plaat{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;position:relative;
  background:repeating-radial-gradient(circle,#111 0 2px,#1d1d1d 2px 4px);
  box-shadow:0 0 0 2px var(--aw-ds-paars),0 0 14px rgba(196,101,230,.6);}
.aw-ds-plaat img{position:absolute;inset:22%;width:56%;height:56%;border-radius:50%;object-fit:cover;}
.aw-ds-letters{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--aw-ds-roze);}
.aw-ds[data-staat="speelt"] .aw-ds-plaat{animation:aw-ds-draai 4s linear infinite;}
@keyframes aw-ds-draai{to{transform:rotate(360deg);}}

/* ronde play-knop met gloed */
.aw-ds-knop{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;position:relative;
  background:radial-gradient(circle at 30% 30%,var(--aw-ds-roze),var(--aw-ds-paars));color:#fff;
  box-shadow:0 0 16px rgba(236,101,213,.7),inset 0 0 8px rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s;}
.aw-ds-knop:hover{transform:scale(1.06);box-shadow:0 0 24px rgba(236,101,213,.95);}
.aw-ds-knop:focus-visible{outline:3px solid var(--aw-ds-blauw);outline-offset:3px;}
.aw-ds-knop svg{width:26px;height:26px;fill:#fff;position:absolute;inset:0;margin:auto;}
.aw-ds-pauze,.aw-ds-laden{display:none;}
.aw-ds[data-staat="speelt"] .aw-ds-play{display:none;}
.aw-ds[data-staat="speelt"] .aw-ds-pauze{display:block;}
.aw-ds[data-staat="laden"] .aw-ds-play{display:none;}
.aw-ds[data-staat="laden"] .aw-ds-laden{display:block;position:absolute;inset:14px;border-radius:50%;
  border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:aw-ds-draai .8s linear infinite;}
.aw-ds[data-staat="stil"] .aw-ds-knop{animation:aw-ds-puls 2.4s ease-in-out infinite;}
@keyframes aw-ds-puls{50%{box-shadow:0 0 28px rgba(236,101,213,1),0 0 0 6px rgba(236,101,213,.12);}}

.aw-ds-info{flex:1 1 auto;min-width:0;}
.aw-ds-boven{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--aw-ds-zacht);white-space:nowrap;}
.aw-ds-live{font-weight:800;font-size:11px;letter-spacing:.08em;color:#fff;background:#e0245e;padding:2px 7px;border-radius:999px;
  box-shadow:0 0 10px rgba(224,36,94,.8);}
.aw-ds[data-staat="speelt"] .aw-ds-live{animation:aw-ds-knipper 1.6s ease-in-out infinite;}
@keyframes aw-ds-knipper{50%{opacity:.55;}}
.aw-ds-naam{font-weight:700;color:var(--aw-ds-roze);text-shadow:0 0 8px rgba(236,101,213,.6);}
.aw-ds-titel{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aw-ds-extra{font-size:12px;color:var(--aw-ds-blauw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aw-ds-extra span+span:not(:empty)::before{content:" \2022 ";color:var(--aw-ds-zacht);}
.aw-ds-extra .aw-ds-verzoek:empty + .aw-ds-luisteraars::before{content:none;}

/* equalizer */
.aw-ds-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;opacity:0;transition:opacity .3s;}
.aw-ds-eq i{display:block;width:3px;height:30%;background:linear-gradient(var(--aw-ds-roze),var(--aw-ds-paars));border-radius:2px;}
.aw-ds[data-staat="speelt"] .aw-ds-eq{opacity:1;}
.aw-ds[data-staat="speelt"] .aw-ds-eq i{animation:aw-ds-eq 1s ease-in-out infinite;}
.aw-ds-eq i:nth-child(2){animation-delay:-.6s !important;}
.aw-ds-eq i:nth-child(3){animation-delay:-.3s !important;}
.aw-ds-eq i:nth-child(4){animation-delay:-.8s !important;}
.aw-ds-eq i:nth-child(5){animation-delay:-.45s !important;}
@keyframes aw-ds-eq{0%,100%{height:25%;}50%{height:100%;}}

.aw-ds-rechts{flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.aw-ds .aw-ds-volume{display:inline-block;width:110px;margin:0;accent-color:var(--aw-ds-roze);cursor:pointer;}
.aw-ds-popout{width:36px;height:36px;border-radius:50%;border:1px solid rgba(196,101,230,.6);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;}
.aw-ds-popout:hover{background:rgba(196,101,230,.2);}
.aw-ds-popout svg{width:18px;height:18px;fill:var(--aw-ds-zacht);}

/* korte melding (bv. "stream even weg, opnieuw verbinden") */
.aw-ds-melding{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:99991;background:#2a1233;color:#fff;
  border:1px solid var(--aw-ds-paars);padding:8px 14px;border-radius:10px;font:13px "Lato",system-ui,sans-serif;
  box-shadow:0 0 16px rgba(196,101,230,.5);}

/* gsm: compacter, zonder volume (dat regel je met de knoppen van de telefoon) */
@media (max-width:640px){
  body.aw-ds-heeft-balk{padding-bottom:72px !important;}
  .aw-ds-balk{height:66px;padding:0 10px;gap:10px;}
  .aw-ds-plaat{width:42px;height:42px;}
  .aw-ds-knop{width:46px;height:46px;}
  .aw-ds-balk .aw-ds-volume{display:none !important;}
  .aw-ds-titel{font-size:14px;}
  .aw-ds-melding{bottom:78px;}
}

/* --- apart venster --- */
body.aw-ds-venster-pagina{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#2a0f33,#07040a 70%);font-family:"Lato","Segoe UI",system-ui,sans-serif;}
.aw-ds.aw-ds-venster{width:min(360px,92vw);padding:28px 22px;border-radius:22px;text-align:center;flex-direction:column;
  background:rgba(13,8,18,.92);border:2px solid var(--aw-ds-paars);box-shadow:0 0 30px rgba(236,101,213,.45);}
.aw-ds-venster .aw-ds-plaat{width:150px;height:150px;}
.aw-ds-venster .aw-ds-knop{width:72px;height:72px;margin-top:-4px;}
.aw-ds-venster .aw-ds-knop svg{width:34px;height:34px;}
.aw-ds-venster .aw-ds-info{width:100%;}
.aw-ds-venster .aw-ds-boven{justify-content:center;font-size:14px;}
.aw-ds-venster .aw-ds-titel{white-space:normal;font-size:17px;margin-top:6px;}
.aw-ds-venster .aw-ds-extra{white-space:normal;margin-top:6px;}
.aw-ds-venster .aw-ds-rechts{justify-content:center;width:100%;}
.aw-ds.aw-ds-venster .aw-ds-volume{width:80%;display:block;margin:4px auto 0;}
.aw-ds-terug{margin-top:16px;font-size:13px;}
.aw-ds-terug a{color:var(--aw-ds-zacht);}
@media (prefers-reduced-motion:reduce){
  .aw-ds *, .aw-ds{animation:none !important;}
}