/* WP Narrowcasting v1.6.0 — app.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── Base container ── */
.wpn-app {
  --wpn-accent:   #0ea5e9;
  --wpn-bg:       #0f172a;
  --wpn-text:     #f8fafc;
  --wpn-surface:  rgba(255,255,255,.06);
  --wpn-border:   rgba(255,255,255,.1);
  --wpn-font:     'Outfit', system-ui, sans-serif;
  --wpn-mono:     'JetBrains Mono', monospace;
  --wpn-trans-ms: 800ms;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--wpn-bg);
  color: var(--wpn-text);
  font-family: var(--wpn-font);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.wpn-app * { box-sizing: border-box; }
.wpn-app.wpn-fullpage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
}

/* ── Slides ── */
.wpn-slides { position: absolute; inset: 0; }
.wpn-slide  { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.wpn-slide.active { opacity: 1; pointer-events: all; }

/* Transitions */
.wpn-slide.t-fade  { transition: opacity var(--wpn-trans-ms) ease; }
.wpn-slide.t-slide { transform: translateX(100%); transition: transform var(--wpn-trans-ms) ease, opacity var(--wpn-trans-ms) ease; }
.wpn-slide.t-slide.active  { transform: translateX(0); opacity: 1; }
.wpn-slide.t-slide.leaving { transform: translateX(-100%); opacity: 0; }
.wpn-slide.t-zoom  { transform: scale(1.06); transition: transform var(--wpn-trans-ms) ease, opacity var(--wpn-trans-ms) ease; }
.wpn-slide.t-zoom.active   { transform: scale(1); opacity: 1; }
.wpn-slide.t-flip  { transform: perspective(1200px) rotateY(90deg); transition: transform var(--wpn-trans-ms) ease, opacity var(--wpn-trans-ms) ease; }
.wpn-slide.t-flip.active   { transform: perspective(1200px) rotateY(0); opacity: 1; }

/* ── Loading / Spinner ── */
.wpn-loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; flex-direction: column; gap: 14px; color: var(--wpn-text); opacity: .7; }
.wpn-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--wpn-accent); border-radius: 50%; animation: wpn-spin .8s linear infinite; }
@keyframes wpn-spin { to { transform: rotate(360deg); } }
@keyframes wpn-live  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }
@keyframes wpn-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes wpn-tick  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes wpn-ss    { 0%{transform:translate(-50px,-50px)} 25%{transform:translate(50px,-50px)} 50%{transform:translate(50px,50px)} 75%{transform:translate(-50px,50px)} 100%{transform:translate(-50px,-50px)} }

/* ── Slide backgrounds ── */
.wpn-slide-bg      { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wpn-slide-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,0,0,.15)); }
.wpn-slide-content { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6%; }

/* ── Welcome ── */
.wpn-welcome-title    { font-size: clamp(2rem,6vw,5rem); font-weight: 900; text-align: center; line-height: 1.1; }
.wpn-welcome-subtitle { font-size: clamp(1rem,2.5vw,2rem); font-weight: 300; opacity: .7; margin-top: .5em; text-align: center; }
.wpn-welcome-body     { font-size: clamp(.8rem,1.8vw,1.4rem); margin-top: 1.5em; text-align: center; opacity: .85; max-width: 72%; line-height: 1.6; }

/* ── RSS Slide ── */
.wpn-rss-layout  { width:100%; height:100%; display:flex; flex-direction:column; padding:5% 6%; }
.wpn-rss-header  { display:flex; align-items:center; gap:10px; margin-bottom:3%; }
.wpn-rss-live    { width:8px; height:8px; background:var(--wpn-accent); border-radius:50%; flex-shrink:0; animation:wpn-live 1.5s infinite; }
.wpn-rss-source  { font-size:clamp(.7rem,1.5vw,1.1rem); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--wpn-accent); }
.wpn-rss-cards   { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,45%),1fr)); gap:3%; flex:1; overflow:hidden; }
.wpn-rss-card    { background:var(--wpn-surface); border:1px solid var(--wpn-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.wpn-rss-card-img  { width:100%; aspect-ratio:16/9; object-fit:cover; }
.wpn-rss-card-body { padding:10px 14px; flex:1; }
.wpn-rss-card-title { font-size:clamp(.75rem,1.5vw,1.05rem); font-weight:700; line-height:1.3; }
.wpn-rss-card-desc  { font-size:clamp(.6rem,1.1vw,.85rem); opacity:.6; margin-top:.4em; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wpn-rss-card-date  { font-size:clamp(.55rem,1vw,.75rem); opacity:.4; margin-top:.5em; font-family:var(--wpn-mono); }
.wpn-rss-minimal    { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:6%; gap:4%; }
.wpn-rss-item-min   { border-left:3px solid var(--wpn-accent); padding-left:4%; }
.wpn-rss-item-min h3 { font-size:clamp(.9rem,2.2vw,1.6rem); font-weight:700; margin:0; }
.wpn-rss-item-min p  { font-size:clamp(.7rem,1.4vw,1rem); opacity:.6; margin:.2em 0 0; }

/* ── Video ── */
.wpn-video-wrap          { position:absolute; inset:0; background:#000; }
.wpn-video-wrap video    { width:100%; height:100%; object-fit:cover; }
.wpn-video-wrap iframe   { width:100%; height:100%; border:none; }

/* ── Unmute button ── */
.wpn-unmute-btn {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:8px 18px; border-radius:30px; cursor:pointer;
  font-size:clamp(.65rem,1.4vw,1rem); font-weight:600;
  display:flex; align-items:center; gap:8px; z-index:10;
  animation:wpn-pulse 2s ease infinite;
}
.wpn-unmute-btn:hover { background:rgba(14,165,233,.3); border-color:var(--wpn-accent); }

/* ── PDF ── */
.wpn-pdf-wrap           { position:absolute; inset:0; display:flex; flex-direction:column; background:#111827; }
.wpn-pdf-canvas-area    { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:2%; }
.wpn-pdf-canvas-area canvas { max-width:100%; max-height:100%; box-shadow:0 8px 40px rgba(0,0,0,.7); }
.wpn-pdf-progress-bar   { height:3px; background:rgba(255,255,255,.08); }
.wpn-pdf-progress-fill  { height:100%; background:var(--wpn-accent); transition:width .4s linear; width:0%; }
.wpn-pdf-bar            { display:flex; align-items:center; justify-content:center; gap:14px; padding:7px 16px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); font-size:clamp(.65rem,1.2vw,.9rem); }
.wpn-pdf-bar button     { background:var(--wpn-accent); border:none; color:#000; padding:4px 14px; border-radius:6px; cursor:pointer; font-weight:700; font-size:inherit; }
.wpn-pdf-bar button:disabled { opacity:.35; cursor:default; }

/* ── Image ── */
.wpn-image-slide         { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.wpn-image-slide.fit-contain { background-size:contain; }
.wpn-image-slide.fit-fill    { background-size:100% 100%; }

/* ── HTML ── */
.wpn-html-slide { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:5%; text-align:center; overflow:hidden; }

/* ── iFrame ── */
.wpn-iframe-wrap        { position:absolute; inset:0; }
.wpn-iframe-wrap iframe { width:100%; height:100%; border:none; }

/* ── Weather slide ── */
/* ── Weather slide ── */
.wpn-weather-slide {
  width:100%; height:100%; display:flex; flex-direction:column;
  padding:4% 5% 3%; gap:0; box-sizing:border-box; overflow:hidden;
}

/* ── No forecast fallback — original centered layout ── */
.wpn-weather-slide.no-forecast {
  align-items:center; justify-content:center; text-align:center; padding:5%;
}
.wpn-weather-slide.no-forecast .wpn-wx-current { flex-direction:column; gap:0; align-items:center; background:none; backdrop-filter:none; border:none; padding:0; }
.wpn-weather-slide.no-forecast.has-bg-image .wpn-wx-current {
  background:rgba(15,23,42,.62); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:6% 8%;
}
.wpn-weather-slide.no-forecast .wpn-wx-icon    { font-size:clamp(4rem,12vw,9rem); margin-bottom:.1em; }
.wpn-weather-slide.no-forecast .wpn-wx-temp    { font-size:clamp(3rem,10vw,8rem); }
.wpn-weather-slide.no-forecast .wpn-wx-city    { font-size:clamp(1rem,3vw,2.5rem); margin-top:.15em; }
.wpn-weather-slide.no-forecast .wpn-wx-desc    { font-size:clamp(.8rem,2vw,1.5rem); margin-top:.2em; }
.wpn-weather-slide.no-forecast .wpn-wx-details {
  flex-direction:row; gap:6%; margin-left:0; margin-top:1.8em;
  font-size:clamp(.7rem,1.5vw,1.1rem);
}
.wpn-weather-slide.no-forecast .wpn-wx-detail  { flex-direction:column; gap:3px; background:none; padding:0; }
.wpn-weather-slide.no-forecast.has-bg-image .wpn-wx-detail { background:rgba(0,0,0,.25); padding:.4em .8em; border-radius:10px; }

/* ── Current weather section (top half) ── */
.wpn-wx-current {
  flex:0 0 42%;
  display:flex; align-items:center;
  gap:4%; padding:3% 4%; margin:0 0 1%;
  border-radius:14px;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
}
/* No background image set: keep the original borderless, transparent look */
.wpn-weather-slide:not(.has-bg-image) .wpn-wx-current {
  background:none; backdrop-filter:none; border:none; border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0; padding:0 0 3%; margin:0;
}

/* Large icon with subtle circular background */
.wpn-wx-icon-wrap {
  flex-shrink:0;
  width:clamp(70px,14vw,130px);
  height:clamp(70px,14vw,130px);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.wpn-wx-icon { font-size:clamp(2rem,7vw,5.5rem); line-height:1; }

/* Main temp + city block */
.wpn-wx-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15em; }
.wpn-wx-temp {
  font-size:clamp(2.5rem,8vw,7rem); font-weight:900; line-height:1;
  color:var(--wpn-wx-text, var(--wpn-accent)); letter-spacing:-.02em;
}
.wpn-wx-city {
  font-size:clamp(.9rem,2.2vw,1.8rem); font-weight:700; opacity:.95;
  text-transform:capitalize; color:var(--wpn-wx-text, var(--wpn-text));
}
.wpn-wx-desc {
  font-size:clamp(.7rem,1.6vw,1.2rem); opacity:.7; font-weight:400;
  color:var(--wpn-wx-text, var(--wpn-text));
}

/* Detail pills on the right */
.wpn-wx-details {
  flex-shrink:0; display:flex; flex-direction:column; gap:.5em;
  align-items:flex-end;
}
.wpn-wx-detail {
  display:flex; align-items:center; gap:.5em; white-space:nowrap;
  font-size:clamp(.55rem,1.2vw,.9rem); opacity:.85;
  background:rgba(0,0,0,.25); border-radius:20px;
  padding:.3em .7em; color:var(--wpn-wx-text, var(--wpn-text));
}
.wpn-wx-detail span:first-child { font-size:.9em; opacity:.9; }

/* ── "Verwachting" label + forecast section ── */
.wpn-wx-forecast-wrap {
  flex:1; min-height:0; display:flex; flex-direction:column; padding-top:2%;
}
.wpn-wx-forecast-label {
  font-size:clamp(.5rem,1vw,.75rem); font-weight:800;
  text-transform:uppercase; letter-spacing:.12em; opacity:.5;
  margin-bottom:2%; flex-shrink:0;
  color:var(--wpn-wx-text, var(--wpn-text));
}

/* Forecast day cards — solid background so a slide background image
   never bleeds through and the text stays fully readable */
.wpn-wx-forecast {
  flex:1; min-height:0; display:flex; gap:clamp(4px,.8vw,10px);
}
.wpn-wx-forecast-day {
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4em; padding:3% 2%;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px; text-align:center;
  transition:background .2s;
}
.wpn-weather-slide:not(.has-bg-image) .wpn-wx-forecast-day {
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); backdrop-filter:none;
}
.wpn-wx-forecast-name {
  font-size:clamp(.48rem,1vw,.78rem); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; opacity:.6;
  color:var(--wpn-wx-text, var(--wpn-text));
}
.wpn-wx-forecast-icon  { font-size:clamp(1.1rem,3vw,2.2rem); line-height:1; }
.wpn-wx-forecast-temps {
  display:flex; flex-direction:column; align-items:center; gap:.1em;
  font-family:var(--wpn-mono); font-size:clamp(.5rem,1.1vw,.85rem);
}
.wpn-wx-forecast-max   { font-weight:800; color:var(--wpn-wx-text, var(--wpn-text)); }
.wpn-wx-forecast-min   { opacity:.5; font-size:.9em; color:var(--wpn-wx-text, var(--wpn-text)); }
.wpn-wx-forecast-precip{
  font-size:clamp(.4rem,.85vw,.65rem); color:#7dd3fc;
  opacity:.95; background:rgba(0,0,0,.3);
  border-radius:10px; padding:.15em .4em;
}

/* ── Clock slide ── */
.wpn-clock-slide { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wpn-clock-time  { font-size:clamp(4rem,16vw,14rem); font-weight:800; font-family:var(--wpn-mono); letter-spacing:-.04em; color:var(--wpn-accent); line-height:1; }
.wpn-clock-date  { font-size:clamp(1rem,3vw,2.5rem); opacity:.7; margin-top:.2em; }
.wpn-clock-sub   { font-size:clamp(.8rem,2vw,1.5rem); opacity:.4; margin-top:.3em; }

/* ── Countdown slide ── */
.wpn-countdown-slide { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:5%; }
.wpn-cd-label  { font-size:clamp(.8rem,2vw,1.5rem); opacity:.6; margin-bottom:1.5em; text-transform:uppercase; letter-spacing:.1em; }
.wpn-cd-units  { display:flex; gap:3%; }
.wpn-cd-unit   { display:flex; flex-direction:column; align-items:center; background:var(--wpn-surface); border:1px solid var(--wpn-border); border-radius:12px; padding:3% 4%; min-width:14%; }
.wpn-cd-num    { font-size:clamp(2rem,8vw,6rem); font-weight:900; font-family:var(--wpn-mono); color:var(--wpn-accent); line-height:1; }
.wpn-cd-name   { font-size:clamp(.6rem,1.2vw,.9rem); opacity:.5; text-transform:uppercase; letter-spacing:.1em; margin-top:.3em; }

/* ── Grid slide ── */
.wpn-grid-slide { position:absolute; inset:0; display:grid; gap:clamp(4px,.8vw,10px); padding:clamp(6px,1vw,14px); }
.wpn-tile       { border-radius:10px; overflow:hidden; background:var(--wpn-surface); border:1px solid var(--wpn-border); position:relative; min-width:0; min-height:0; }
.wpn-tile-html  { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:8%; text-align:center; overflow:hidden; }
.wpn-tile-title { font-size:clamp(.6rem,1.8vw,1.3rem); font-weight:700; color:var(--wpn-accent); margin-bottom:.4em; text-transform:uppercase; letter-spacing:.06em; }
.wpn-tile-image { position:absolute; inset:0; background-size:cover; background-position:center; }
.wpn-tile-video { position:absolute; inset:0; background:#000; }
.wpn-tile-video video, .wpn-tile-video iframe { width:100%; height:100%; object-fit:cover; border:none; }
.wpn-tile-iframe         { position:absolute; inset:0; }
.wpn-tile-iframe iframe  { width:100%; height:100%; border:none; }
.wpn-tile-loading        { width:100%; height:100%; }
.wpn-tile-rss            { width:100%; height:100%; display:flex; flex-direction:column; padding:6% 7%; gap:3%; overflow:hidden; }
.wpn-tile-rss-src        { font-size:clamp(.5rem,1.1vw,.8rem); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--wpn-accent); margin-bottom:2%; }
.wpn-tile-rss-item       { display:flex; align-items:flex-start; gap:6%; flex-shrink:0; }
.wpn-tile-rss-img        { width:clamp(28px,8%,54px); aspect-ratio:16/9; object-fit:cover; border-radius:4px; flex-shrink:0; }
.wpn-tile-rss-headline   { font-size:clamp(.55rem,1.2vw,.9rem); font-weight:600; line-height:1.3; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wpn-tile-clock          { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wpn-tile-clock-time     { font-size:clamp(1.5rem,6vw,5rem); font-weight:800; font-family:var(--wpn-mono); color:var(--wpn-accent); letter-spacing:-.04em; line-height:1; }
.wpn-tile-clock-label    { font-size:clamp(.5rem,1.1vw,.8rem); opacity:.5; margin-top:.3em; }
.wpn-tile-weather        { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:5%; }
.wpn-tile-wx-icon        { font-size:clamp(1.5rem,5vw,4rem); line-height:1; }
.wpn-tile-wx-temp        { font-size:clamp(1.2rem,4vw,3rem); font-weight:900; color:var(--wpn-accent); line-height:1; }
.wpn-tile-wx-city        { font-size:clamp(.5rem,1.2vw,.9rem); opacity:.7; margin-top:.2em; }
.wpn-tile-wx-desc        { font-size:clamp(.45rem,1vw,.75rem); opacity:.5; }
.wpn-tile-countdown      { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4%; }
.wpn-tile-cd-label       { font-size:clamp(.5rem,1.1vw,.8rem); opacity:.5; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8em; }
.wpn-tile-cd-units       { display:flex; gap:4%; }
.wpn-tile-cd-unit        { display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,.05); border-radius:6px; padding:4% 5%; }
.wpn-tile-cd-num         { font-size:clamp(1rem,3.5vw,2.8rem); font-weight:900; font-family:var(--wpn-mono); color:var(--wpn-accent); line-height:1; }
.wpn-tile-cd-name        { font-size:clamp(.4rem,.8vw,.6rem); opacity:.4; text-transform:uppercase; letter-spacing:.1em; }

/* ── Clock overlay ── */
.wpn-overlay-clock { position:absolute; top:14px; right:18px; text-align:right; z-index:20; pointer-events:none; }
.wpn-oc-time { font-size:clamp(1.2rem,3.5vw,2.8rem); font-weight:800; font-family:var(--wpn-mono); color:var(--wpn-accent); line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.wpn-oc-date { font-size:clamp(.6rem,1.4vw,1rem); opacity:.7; margin-top:.1em; }

/* ── Logo overlay ── */
.wpn-overlay-logo           { position:absolute; z-index:20; pointer-events:none; padding:14px; }
.wpn-overlay-logo.bottom-left  { bottom:0; left:0; }
.wpn-overlay-logo.bottom-right { bottom:0; right:0; }
.wpn-overlay-logo.top-left     { top:0; left:0; }
.wpn-overlay-logo.top-right    { top:0; right:0; }
.wpn-overlay-logo img { max-height:clamp(28px,5vw,56px); max-width:180px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); opacity:.9; }

/* ── Weather overlay ── */
.wpn-overlay-weather { position:absolute; right:14px; z-index:20; pointer-events:none; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 14px; text-align:center; min-width:82px; }
.wpn-ow-icon { font-size:clamp(1.2rem,2.5vw,2rem); }
.wpn-ow-temp { font-size:clamp(1rem,2.5vw,1.8rem); font-weight:800; color:var(--wpn-accent); line-height:1; }
.wpn-ow-city { font-size:clamp(.5rem,.9vw,.75rem); opacity:.55; margin-top:2px; }
.wpn-ow-desc { font-size:clamp(.5rem,.85vw,.7rem); opacity:.45; }

/* ── Ticker ── */
.wpn-ticker        { position:absolute; bottom:0; left:0; right:0; z-index:20; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; overflow:hidden; }
.wpn-ticker-label  { flex-shrink:0; background:var(--wpn-accent); color:#000; font-weight:800; text-transform:uppercase; letter-spacing:.1em; padding:0 10px; height:100%; display:flex; align-items:center; }
.wpn-ticker-track  { flex:1; overflow:hidden; }
.wpn-ticker-inner  { display:flex; gap:60px; white-space:nowrap; animation:wpn-tick linear infinite; }
.wpn-ticker-inner span::before { content:'◆  '; color:var(--wpn-accent); font-size:.7em; }

/* ═══════════════════════════════════════════════════
   NEWS BANNER  — drie layoutmodi op basis van positie
═══════════════════════════════════════════════════ */

/* Header (gedeeld) */
.wpn-banner-hdr   { display:flex; align-items:center; gap:8px; padding:2% 4%; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.1); }
.wpn-banner-live  { width:7px; height:7px; background:var(--wpn-accent); border-radius:50%; flex-shrink:0; animation:wpn-live 1.5s infinite; }
.wpn-banner-title { font-size:clamp(.55rem,1.2vw,.9rem); font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--wpn-accent); }

/* Items container (gedeeld) */
.wpn-banner-items { flex:1; overflow:hidden; }

/* Gedeelde image-placeholder */
.wpn-banner-img { width:100%; height:100%; object-fit:cover; display:block; }
.wpn-banner-img-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(99,102,241,.07));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4em; opacity:.4;
}

/* ─────────────────────────────────────────────────
   POSITIE: LINKS of RECHTS
   Layout: verticale stapel van kaarten
   Elke kaart: afbeelding rechts + tekst links (rij)
───────────────────────────────────────────────── */
[data-banner-pos="left"]  .wpn-banner-items,
[data-banner-pos="right"] .wpn-banner-items {
  display:flex; flex-direction:column;
}
[data-banner-pos="left"]  .wpn-banner-item,
[data-banner-pos="right"] .wpn-banner-item {
  flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:row; align-items:stretch;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .15s;
}
[data-banner-pos="left"]  .wpn-banner-item:last-child,
[data-banner-pos="right"] .wpn-banner-item:last-child { border-bottom:none; }
[data-banner-pos="left"]  .wpn-banner-item:hover,
[data-banner-pos="right"] .wpn-banner-item:hover { background:rgba(255,255,255,.04); }

/* Accentbalk links */
[data-banner-pos="left"]  .wpn-banner-accent,
[data-banner-pos="right"] .wpn-banner-accent { width:3px; flex-shrink:0; background:var(--wpn-accent); opacity:.8; }

/* Tekst: links, vult ruimte */
[data-banner-pos="left"]  .wpn-banner-body,
[data-banner-pos="right"] .wpn-banner-body {
  flex:1; min-width:0; order:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:6% 5%; overflow:hidden;
}
/* Afbeelding: rechts, vaste breedte (40% van banner) */
[data-banner-pos="left"]  .wpn-banner-img-wrap,
[data-banner-pos="right"] .wpn-banner-img-wrap {
  order:2; flex-shrink:0;
  width:40%; overflow:hidden;
}

[data-banner-pos="left"]  .wpn-banner-date,
[data-banner-pos="right"] .wpn-banner-date {
  font-size:clamp(.4rem,.8vw,.6rem); opacity:.35;
  margin-bottom:.3em; font-family:var(--wpn-mono);
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-banner-pos="left"]  .wpn-banner-headline,
[data-banner-pos="right"] .wpn-banner-headline {
  font-size:clamp(.55rem,1vw,.88rem); font-weight:700; line-height:1.3;
  color:var(--wpn-text); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
[data-banner-pos="left"]  .wpn-banner-desc,
[data-banner-pos="right"] .wpn-banner-desc {
  font-size:clamp(.45rem,.85vw,.72rem); opacity:.5;
  margin-top:.3em; line-height:1.4; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* ─────────────────────────────────────────────────
   POSITIE: ONDERAAN
   Layout: horizontale rij van kaarten (grid)
   Elke kaart: afbeelding boven + tekst onder
───────────────────────────────────────────────── */
[data-banner-pos="bottom"] .wpn-banner-items {
  display:flex; flex-direction:row; /* horizontaal */
  gap:0;
}
[data-banner-pos="bottom"] .wpn-banner-item {
  flex:1; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; /* kaart = afb boven, tekst onder */
  align-items:stretch;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  transition:background .15s;
}
[data-banner-pos="bottom"] .wpn-banner-item:last-child { border-right:none; }
[data-banner-pos="bottom"] .wpn-banner-item:hover { background:rgba(255,255,255,.04); }

/* Accentbalk bovenaan de kaart */
[data-banner-pos="bottom"] .wpn-banner-accent { height:3px; width:100%; flex-shrink:0; background:var(--wpn-accent); opacity:.8; }

/* Afbeelding: bovenste 55% van kaart */
[data-banner-pos="bottom"] .wpn-banner-img-wrap {
  width:100%; flex-shrink:0;
  height:55%; overflow:hidden;
}
/* Tekst: onderste 45% */
[data-banner-pos="bottom"] .wpn-banner-body {
  flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:4% 6%;
}
[data-banner-pos="bottom"] .wpn-banner-date {
  font-size:clamp(.38rem,.7vw,.55rem); opacity:.35;
  margin-bottom:.2em; font-family:var(--wpn-mono);
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-banner-pos="bottom"] .wpn-banner-headline {
  font-size:clamp(.5rem,.9vw,.82rem); font-weight:700; line-height:1.3;
  color:var(--wpn-text); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
[data-banner-pos="bottom"] .wpn-banner-desc {
  font-size:clamp(.4rem,.75vw,.65rem); opacity:.5;
  margin-top:.2em; line-height:1.4; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}

/* ── Controls ── */
.wpn-controls  { position:absolute; left:50%; transform:translateX(-50%); z-index:21; display:flex; gap:6px; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.wpn-controls.wpn-ctrl-visible  { opacity:1; pointer-events:all; }
.wpn-ctrl-btn  { background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:clamp(.6rem,1.2vw,.9rem); backdrop-filter:blur(6px); transition:background .15s; }
.wpn-ctrl-btn:hover { background:rgba(255,255,255,.18); }

/* ── Progress bar ── */
.wpn-progress { position:absolute; top:0; left:0; height:3px; background:var(--wpn-accent); z-index:21; width:0%; transition:none; }

/* ── Screensaver ── */
.wpn-screensaver     { position:absolute; inset:0; background:#000; z-index:98; display:none; align-items:center; justify-content:center; cursor:pointer; }
.wpn-screensaver.on  { display:flex; }
.wpn-ss-dot          { width:10px; height:10px; background:var(--wpn-accent); border-radius:50%; position:absolute; animation:wpn-ss 5s ease-in-out infinite; }

/* ── PIN ── */
.wpn-pin        { position:absolute; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(14px); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.wpn-pin-title  { font-size:clamp(1.2rem,3vw,2rem); font-weight:700; }
.wpn-pin-digits { display:flex; gap:10px; }
.wpn-pin-digit  { width:clamp(36px,6vw,52px); height:clamp(36px,6vw,52px); background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.2); border-radius:8px; text-align:center; font-size:clamp(1rem,2.5vw,1.8rem); color:#fff; font-family:var(--wpn-mono); font-weight:700; }
.wpn-pin-digit:focus { outline:none; border-color:var(--wpn-accent); }
.wpn-pin-err    { color:#ef4444; font-size:clamp(.7rem,1.5vw,1rem); opacity:0; transition:opacity .2s; }
.wpn-pin-err.show { opacity:1; }

/* ═══════════════════════════════════════════════════
   RADIO BAR
   Altijd zichtbaar onderaan de display (boven ticker)
═══════════════════════════════════════════════════ */
.wpn-radio-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: 0; /* JS zet dit boven de ticker als die aan staat */
  z-index: 22;
  height: clamp(28px, 3.5vw, 38px);
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  padding: 0 clamp(8px, 1.5vw, 18px);
  transition: opacity .3s;
}
.wpn-radio-bar.wpn-radio-paused { opacity: .6; }

/* Animated signal indicator */
.wpn-radio-indicator {
  width: clamp(6px, 1vw, 10px);
  height: clamp(6px, 1vw, 10px);
  border-radius: 50%;
  background: #666;
  flex-shrink: 0;
  transition: background .3s;
}
.wpn-radio-indicator.wpn-radio-playing {
  background: var(--wpn-accent);
  box-shadow: 0 0 0 0 rgba(14,165,233,.6);
  animation: wpn-radio-pulse 1.5s ease-out infinite;
}
@keyframes wpn-radio-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,.6); }
  70%  { box-shadow: 0 0 0 clamp(4px,.8vw,8px) rgba(14,165,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}

.wpn-radio-icon { font-size: clamp(.7rem,1.4vw,1.1rem); flex-shrink:0; }

.wpn-radio-name {
  font-size: clamp(.55rem, 1.1vw, .85rem);
  font-weight: 700;
  color: var(--wpn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(60px, 20vw, 200px);
  flex-shrink: 0;
}

/* Spacer to push controls to the right */
.wpn-radio-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
}

.wpn-radio-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--wpn-text);
  border-radius: 50%;
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  font-size: clamp(.6rem, 1.2vw, .9rem);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
  padding: 0;
}
.wpn-radio-btn:hover {
  background: rgba(14,165,233,.25);
  border-color: var(--wpn-accent);
}

/* Volume slider */
.wpn-radio-vol {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(50px, 7vw, 100px);
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.2);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.wpn-radio-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: clamp(10px, 1.4vw, 14px);
  height: clamp(10px, 1.4vw, 14px);
  border-radius: 50%;
  background: var(--wpn-accent);
  cursor: pointer;
  transition: transform .15s;
}
.wpn-radio-vol::-webkit-slider-thumb:hover { transform: scale(1.3); }
.wpn-radio-vol::-moz-range-thumb {
  width: clamp(10px, 1.4vw, 14px);
  height: clamp(10px, 1.4vw, 14px);
  border-radius: 50%;
  background: var(--wpn-accent);
  border: none;
  cursor: pointer;
}