:root{
  --kg4-ink:#281b45;
  --kg4-orange:#f2632f;
  --kg4-pink:#e96fa7;
  --kg4-yellow:#f4c638;
  --kg4-green:#2c7d67;
}

html:has(.kg4-player),
body:has(.kg4-player){
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#111!important;
}

.kg4-fullscreen-page #wpadminbar,
.kg4-fullscreen-page header,
.kg4-fullscreen-page footer{
  display:none!important;
}

.kg4-player,
.kg4-player *{box-sizing:border-box}

.kg4-player{
  position:relative;
  width:100%;
  height:100vh;
  min-height:540px;
  overflow:hidden;
  color:var(--kg4-ink);
  background:linear-gradient(135deg,#fff3d7,#ffd6c4);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  isolation:isolate;
}

.kg4-theme-dark{
  color:#fff;
  background:radial-gradient(circle at center,#36255c,#130e23);
}

.kg4-theme-calm{
  background:linear-gradient(135deg,#eff9f6,#fdf3e4);
}

.kg4-bg{position:absolute;inset:0;z-index:0;overflow:hidden}

.blob{
  position:absolute;
  display:block;
  border-radius:48% 52% 55% 45%;
  filter:blur(2px);
  opacity:.86;
  animation:kg4Float 13s ease-in-out infinite alternate;
}

.b1{width:22vw;height:22vw;left:-5vw;top:5vh;background:var(--kg4-yellow)}
.b2{width:20vw;height:20vw;right:-3vw;top:4vh;background:var(--kg4-pink);animation-delay:-4s}
.b3{width:25vw;height:25vw;right:8vw;bottom:-10vw;background:var(--kg4-green);animation-delay:-8s}
.b4{width:17vw;height:17vw;left:18vw;bottom:-8vw;background:var(--kg4-orange);animation-delay:-2s}

.flower{
  position:absolute;
  font-size:clamp(60px,8vw,150px);
  opacity:.16;
  animation:kg4Spin 28s linear infinite;
}

.f1{left:8vw;bottom:8vh}
.f2{right:7vw;top:25vh;animation-direction:reverse}
.f3{left:46vw;top:5vh}

@keyframes kg4Float{to{transform:translate3d(3vw,-2vh,0) rotate(13deg) scale(1.06)}}
@keyframes kg4Spin{to{transform:rotate(360deg)}}

.kg4-brand{
  position:absolute;
  left:24px;
  top:18px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border:3px solid currentColor;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--kg4-ink);
  box-shadow:6px 6px 0 var(--kg4-yellow);
  font-weight:950;
}

.kg4-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:50%;
}

.kg4-video{
  position:absolute;
  left:2vw;
  right:2vw;
  top:10vh;
  bottom:10vh;
  z-index:2;
  width:96vw;
  height:80vh;
  background:#101010;
  object-fit:contain;
  border-radius:18px;
  transition:opacity .7s ease,transform .9s ease;
}

.kg4-fit-cover .kg4-video{object-fit:cover}

.kg4-transition-fade.is-between .kg4-video{opacity:0}
.kg4-transition-zoom.is-between .kg4-video{opacity:0;transform:scale(1.04)}
.kg4-transition-slide.is-between .kg4-video{opacity:0;transform:translateX(-4%)}

.kg4-card,
.kg4-empty,
.kg4-sponsor{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  place-items:center;
  align-content:center;
  gap:24px;
  padding:8vw;
  text-align:center;
  background:rgba(255,244,220,.93);
  backdrop-filter:blur(8px);
}

.kg4-card.is-visible,
.kg4-empty.is-visible,
.kg4-sponsor.is-visible{
  display:grid;
  animation:kg4CardIn .75s ease both;
}

@keyframes kg4CardIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}

.kg4-heart{
  font-size:clamp(80px,12vw,180px);
  line-height:.8;
  color:var(--kg4-orange);
  filter:drop-shadow(7px 7px 0 var(--kg4-yellow));
}

.kg4-message,
.kg4-empty h2,
.kg4-sponsor h2{
  max-width:1150px;
  margin:0;
  font-size:clamp(42px,7vw,108px);
  line-height:.98;
  font-weight:1000;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.kg4-empty p,
.kg4-sponsor-text{
  margin:0;
  font-size:clamp(22px,3vw,38px);
  font-weight:800;
}

.kg4-sponsor-logo{
  display:none;
  max-width:min(420px,60vw);
  max-height:180px;
  object-fit:contain;
}

.kg4-meta{
  position:absolute;
  z-index:9;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(22px);
  opacity:0;
  min-width:min(480px,calc(100% - 40px));
  max-width:calc(100% - 40px);
  padding:14px 26px;
  border:3px solid var(--kg4-ink);
  border-radius:28px;
  background:rgba(255,255,255,.95);
  color:var(--kg4-ink);
  box-shadow:7px 7px 0 var(--kg4-orange);
  text-align:center;
  transition:.35s ease;
  backdrop-filter:blur(10px);
}

.kg4-meta strong{
  display:block;
  font-size:clamp(24px,3vw,44px);
  line-height:1;
  font-weight:1000;
}

.kg4-meta span{
  display:block;
  margin-top:5px;
  font-size:clamp(15px,1.6vw,24px);
  font-weight:850;
}

.kg4-meta.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.kg4-counter{
  position:absolute;
  right:24px;
  top:18px;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding:11px 15px;
  border-radius:18px;
  background:rgba(255,255,255,.93);
  color:var(--kg4-ink);
  box-shadow:5px 5px 0 var(--kg4-pink);
}

.kg4-counter strong{font-size:30px;line-height:1}
.kg4-counter span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

.kg4-progress-wrap{
  position:absolute;
  left:24px;
  right:24px;
  bottom:8px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:12px;
}

.kg4-progress{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  overflow:hidden;
}

.kg4-progress i{
  display:block;
  width:0;
  height:100%;
  background:var(--kg4-yellow);
  border-radius:inherit;
}

.kg4-remaining{
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-shadow:0 1px 3px #000;
  white-space:nowrap;
}

.kg4-qr{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:9;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.94);
  color:var(--kg4-ink);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  box-shadow:5px 5px 0 var(--kg4-green);
}

.kg4-qr-fallback{
  width:58px;
  height:58px;
  border:3px solid var(--kg4-ink);
  border-radius:8px;
  background:
    linear-gradient(90deg,#111 10px,transparent 10px) 0 0/18px 18px,
    linear-gradient(#111 10px,transparent 10px) 0 0/18px 18px,
    #fff;
}

.kg4-status-dot{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:10;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#25a55f;
  box-shadow:0 0 0 6px rgba(37,165,95,.18);
}

.kg4-status-dot.offline{
  background:#d43f3a;
  box-shadow:0 0 0 6px rgba(212,63,58,.18);
}

.kg4-sound-button{
  position:absolute;
  left:50%;
  bottom:92px;
  z-index:10;
  transform:translateX(-50%);
  border:0;
  border-radius:999px;
  padding:12px 20px;
  background:#fff;
  color:var(--kg4-ink);
  font-weight:900;
  box-shadow:5px 5px 0 var(--kg4-yellow);
  cursor:pointer;
}

.kg4-sound-button.is-hidden{display:none}

.kg4-portrait .kg4-video{
  top:6vh;
  bottom:8vh;
  height:86vh;
}

@media(max-width:700px){
  .kg4-brand{left:14px;top:14px}
  .kg4-counter{right:14px;top:14px}
  .kg4-qr{right:14px;bottom:14px}
  .kg4-counter span,
  .kg4-qr span{display:none}
  .kg4-meta{min-width:calc(100% - 28px)}
}


/* KorteGroet 5.0 */
.kg4-qr{
  opacity:0;
  transform:translateX(30px) scale(.96);
  pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
  max-width:330px;
}
.kg4-qr.is-visible{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}
.kg4-qr img{
  width:92px;
  height:92px;
  object-fit:contain;
  padding:4px;
  border-radius:10px;
  background:#fff;
}
.kg4-qr span{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
}
.kg4-qr span strong{
  font-size:17px;
  line-height:1.1;
}
.kg4-qr span small{
  max-width:165px;
  font-size:12px;
  line-height:1.25;
}

.kg4-end-card{
  position:absolute;
  inset:0;
  z-index:6;
  display:none;
  place-items:center;
  align-content:center;
  gap:24px;
  padding:8vw;
  text-align:center;
  background:rgba(255,244,220,.95);
  backdrop-filter:blur(9px);
}
.kg4-end-card.is-visible{
  display:grid;
  animation:kg4CardIn .75s ease both;
}
.kg4-end-card h2{
  margin:0;
  font-size:clamp(42px,7vw,108px);
  line-height:.98;
  font-weight:1000;
  letter-spacing:-.045em;
}
.kg4-end-card p{
  margin:0;
  font-size:clamp(22px,3vw,38px);
  font-weight:800;
}

.kg4-wall{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:110px 5vw 70px;
  background:linear-gradient(135deg,#fff2d4,#ffd7c6);
  color:var(--kg4-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.kg4-wall-bg::before,
.kg4-wall-bg::after{
  content:"";
  position:absolute;
  width:38vw;
  height:38vw;
  border-radius:50%;
  filter:blur(4px);
  opacity:.35;
  animation:kg4Float 18s ease-in-out infinite alternate;
}
.kg4-wall-bg::before{left:-10vw;top:-10vw;background:var(--kg4-yellow)}
.kg4-wall-bg::after{right:-10vw;bottom:-10vw;background:var(--kg4-pink);animation-delay:-7s}
.kg4-wall header{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:40px;
  text-align:center;
}
.kg4-wall header strong{
  font-size:clamp(38px,6vw,88px);
  line-height:1;
  font-weight:1000;
}
.kg4-wall header span{
  font-size:clamp(18px,2vw,28px);
  font-weight:750;
}
.kg4-wall-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
  max-width:1400px;
  margin:auto;
}
.kg4-kindness-card{
  min-height:180px;
  padding:22px;
  border:3px solid var(--kg4-ink);
  border-radius:28px;
  background:rgba(255,255,255,.88);
  color:var(--kg4-ink);
  box-shadow:7px 7px 0 var(--kg4-orange);
  cursor:pointer;
  animation:kg4CardFloat 5s ease-in-out infinite alternate;
  animation-delay:var(--delay);
}
.kg4-kindness-card:nth-child(3n+2){box-shadow:7px 7px 0 var(--kg4-pink)}
.kg4-kindness-card:nth-child(3n+3){box-shadow:7px 7px 0 var(--kg4-green)}
.kg4-kindness-card i{
  display:block;
  color:var(--kg4-orange);
  font-size:40px;
  font-style:normal;
}
.kg4-kindness-card strong{
  display:block;
  margin-top:12px;
  font-size:24px;
  line-height:1.05;
}
.kg4-kindness-card span{
  display:block;
  margin-top:8px;
  font-weight:800;
}
@keyframes kg4CardFloat{
  to{transform:translateY(-8px) rotate(.6deg)}
}
.kg4-wall-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  place-items:center;
  padding:4vw;
  background:rgba(10,8,18,.92);
}
.kg4-wall-modal.is-visible{display:grid}
.kg4-wall-modal video{
  width:min(1100px,90vw);
  max-height:78vh;
  background:#000;
  border-radius:22px;
}
.kg4-wall-modal button{
  position:absolute;
  right:24px;
  top:18px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:52px;
  cursor:pointer;
}
.kg4-wall-modal > div{
  color:#fff;
  text-align:center;
}
.kg4-wall-modal strong{
  display:block;
  font-size:30px;
}
.kg4-wall-modal span{
  display:block;
  margin-top:4px;
  font-size:18px;
}

/* 5.1 QR reliability */
.kg4-qr img{
  width:140px !important;
  height:140px !important;
  image-rendering:pixelated;
  background:#fff;
  padding:8px;
  border:4px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.12);
}
.kg4-qr{
  max-width:420px;
}

/* KorteGroet 6.0 */
.kg4-video{left:1.5vw;right:1.5vw;top:8vh;bottom:7vh;width:97vw;height:85vh;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.32)}
.kg4-brand{transform:scale(1.12);transform-origin:left top}
.kg4-counter::before{content:"♥";display:block;color:var(--kg4-orange);font-size:18px;line-height:1;margin-bottom:3px}
.kg4-qr{width:calc(var(--kg4-qr-size,280px) + 180px);max-width:calc(100vw - 40px);padding:18px;gap:16px;border-radius:22px;box-shadow:8px 8px 0 var(--kg4-green)}
.kg4-qr img{width:var(--kg4-qr-size,280px)!important;height:var(--kg4-qr-size,280px)!important;padding:14px;border:8px solid #fff;background:#fff;image-rendering:pixelated}
.kg4-qr span strong{font-size:24px}.kg4-qr span small{max-width:160px;font-size:15px;line-height:1.35}
.kg4-qr-right .kg4-qr{right:28px;left:auto}.kg4-qr-left .kg4-qr{left:28px;right:auto}
.kg4-countdown{position:absolute;inset:0;z-index:12;display:none;place-items:center;align-content:center;gap:18px;background:rgba(22,16,38,.88);color:#fff;text-align:center;backdrop-filter:blur(8px)}
.kg4-countdown.is-visible{display:grid;animation:kg4CardIn .45s ease both}.kg4-countdown span{font-size:clamp(24px,3vw,42px);font-weight:850}.kg4-countdown strong{font-size:clamp(120px,18vw,280px);line-height:.8;color:var(--kg4-yellow);text-shadow:8px 8px 0 var(--kg4-orange)}
.kg4-sound-button{left:24px;top:92px;bottom:auto;transform:none}
@media(max-width:900px){.kg4-qr{width:auto;max-width:90vw}.kg4-qr img{width:190px!important;height:190px!important}}


/* Professional Signage 7.0 */
.kg4-player{
  --kg4-safe:32px;
  background:#0d0d10;
}

.kg4-player::after{
  content:"";
  position:absolute;
  inset:var(--kg4-safe);
  z-index:20;
  border:1px solid rgba(255,255,255,.06);
  border-radius:28px;
  pointer-events:none;
}

.kg4-intro{
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-content:center;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 20% 15%,rgba(244,198,56,.45),transparent 35%),
    radial-gradient(circle at 80% 20%,rgba(233,111,167,.42),transparent 33%),
    linear-gradient(135deg,#281b45,#15101f);
  opacity:0;
  visibility:hidden;
  transition:opacity .7s ease,visibility .7s ease;
}
.kg4-intro.is-visible{opacity:1;visibility:visible}
.kg4-intro-mark{
  color:var(--kg4-orange);
  font-size:clamp(90px,12vw,190px);
  line-height:.8;
  filter:drop-shadow(8px 8px 0 var(--kg4-yellow));
}
.kg4-intro h1{
  margin:24px 0 8px;
  font-size:clamp(52px,8vw,126px);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.06em;
}
.kg4-intro p{
  margin:0;
  font-size:clamp(20px,2.5vw,38px);
  font-weight:750;
}

.kg4-brand{
  left:calc(var(--kg4-safe) + 8px);
  top:calc(var(--kg4-safe) + 8px);
  z-index:12;
}

.kg4-counter{
  right:calc(var(--kg4-safe) + 8px);
  top:calc(var(--kg4-safe) + 8px);
  z-index:12;
}

.kg4-video{
  left:var(--kg4-safe);
  right:var(--kg4-safe);
  top:calc(var(--kg4-safe) + 76px);
  bottom:calc(var(--kg4-safe) + 92px);
  width:calc(100vw - (var(--kg4-safe) * 2));
  height:calc(100vh - (var(--kg4-safe) * 2) - 168px);
  border-radius:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.45);
}

.kg4-layout-cinema .kg4-brand,
.kg4-layout-cinema .kg4-counter,
.kg4-layout-cinema .kg4-broadcast-footer{
  opacity:.88;
}
.kg4-layout-minimal .kg4-counter,
.kg4-layout-minimal .kg4-broadcast-footer,
.kg4-layout-minimal .kg4-progress-wrap{
  display:none!important;
}

.kg4-broadcast-footer{
  position:absolute;
  left:calc(var(--kg4-safe) + 8px);
  right:calc(var(--kg4-safe) + 8px);
  bottom:calc(var(--kg4-safe) + 14px);
  z-index:11;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  color:#fff;
}

.kg4-now-playing{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"live name" "live city";
  align-items:center;
  column-gap:12px;
}
.kg4-now-playing>span{
  grid-area:live;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#e94444;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 0 0 8px rgba(233,68,68,.17);
}
.kg4-now-playing strong{
  grid-area:name;
  font-size:24px;
  line-height:1;
}
.kg4-now-playing small{
  grid-area:city;
  margin-top:3px;
  font-size:14px;
  opacity:.82;
}
.kg4-next-label{
  font-size:14px;
  font-weight:800;
  opacity:.8;
}

.kg4-meta{
  bottom:calc(var(--kg4-safe) + 88px);
}

.kg4-qr{
  bottom:calc(var(--kg4-safe) + 92px);
  z-index:15;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.kg4-qr-right .kg4-qr{right:calc(var(--kg4-safe) + 14px)}
.kg4-qr-left .kg4-qr{left:calc(var(--kg4-safe) + 14px)}

.kg4-progress-wrap{
  left:calc(var(--kg4-safe) + 8px);
  right:calc(var(--kg4-safe) + 8px);
  bottom:calc(var(--kg4-safe) + 2px);
}

.kg4-sound-button{
  left:calc(var(--kg4-safe) + 8px);
  top:calc(var(--kg4-safe) + 84px);
  z-index:16;
}

.kg4-card,
.kg4-empty,
.kg4-sponsor,
.kg4-end-card,
.kg4-countdown{
  inset:var(--kg4-safe);
  border-radius:28px;
  overflow:hidden;
}

.kg4-card,
.kg4-empty,
.kg4-sponsor,
.kg4-end-card{
  background:
    radial-gradient(circle at 15% 18%,rgba(244,198,56,.45),transparent 32%),
    radial-gradient(circle at 83% 20%,rgba(233,111,167,.38),transparent 30%),
    linear-gradient(135deg,#fff4dc,#ffd9c6);
}

@media(max-width:900px){
  .kg4-video{
    top:92px;
    bottom:110px;
    height:calc(100vh - 202px);
  }
  .kg4-broadcast-footer{bottom:20px}
  .kg4-next-label{display:none}
}

@media(max-width:650px){
  .kg4-player{--kg4-safe:10px!important}
  .kg4-video{top:80px;bottom:104px;height:calc(100vh - 184px)}
  .kg4-now-playing strong{font-size:18px}
  .kg4-now-playing>span{width:38px;height:38px}
}


/* KorteGroet 8.0 */
.kg4-stage{
  position:absolute;
  left:var(--kg4-safe);
  right:var(--kg4-safe);
  top:calc(var(--kg4-safe) + 76px);
  bottom:calc(var(--kg4-safe) + 104px);
  z-index:2;
  border-radius:26px;
  overflow:hidden;
  background:#000;
  box-shadow:0 32px 100px rgba(0,0,0,.48);
}
.kg4-stage .kg4-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
}

.kg4-has-sidepanel .kg4-stage{
  right:calc(var(--kg4-safe) + 340px);
}
.kg4-has-sidepanel .kg4-broadcast-footer{
  right:calc(var(--kg4-safe) + 348px);
}
.kg4-has-sidepanel .kg4-progress-wrap{
  right:calc(var(--kg4-safe) + 348px);
}

.kg4-side-panel{
  position:absolute;
  top:calc(var(--kg4-safe) + 76px);
  right:var(--kg4-safe);
  bottom:calc(var(--kg4-safe) + 104px);
  z-index:10;
  display:none;
  width:312px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,243,255,.96));
  color:var(--kg4-ink);
  box-shadow:0 28px 90px rgba(0,0,0,.35);
}
.kg4-has-sidepanel .kg4-side-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.kg4-side-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--kg4-ink);
  text-decoration:none;
  text-align:center;
}
.kg4-side-qr img{
  width:238px;
  height:238px;
  object-fit:contain;
  padding:12px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.kg4-side-qr strong{
  font-size:24px;
  line-height:1;
}
.kg4-side-qr span{
  max-width:240px;
  font-size:14px;
  font-weight:750;
  line-height:1.3;
}

.kg4-side-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:auto;
}
.kg4-side-stats div{
  padding:12px 6px;
  border-radius:14px;
  background:#fff;
  text-align:center;
  box-shadow:0 8px 20px rgba(40,27,69,.08);
}
.kg4-side-stats strong{
  display:block;
  font-size:25px;
  line-height:1;
}
.kg4-side-stats span{
  display:block;
  margin-top:5px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.kg4-meta{
  min-width:360px;
  max-width:520px;
  padding:15px 28px;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.kg4-meta::before{
  content:"♥";
  display:block;
  margin:0 0 8px;
  color:var(--kg4-orange);
  font-size:26px;
}

.kg4-wall-card,
.kg4-thanks-card{
  position:absolute;
  inset:var(--kg4-safe);
  z-index:13;
  display:none;
  place-items:center;
  align-content:center;
  gap:22px;
  padding:7vw;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  color:var(--kg4-ink);
  background:
    radial-gradient(circle at 18% 15%,rgba(244,198,56,.5),transparent 32%),
    radial-gradient(circle at 82% 20%,rgba(233,111,167,.45),transparent 30%),
    linear-gradient(135deg,#fff3da,#ffd8c5);
}
.kg4-wall-card.is-visible,
.kg4-thanks-card.is-visible{
  display:grid;
  animation:kg4CardIn .6s ease both;
}
.kg4-wall-card h2,
.kg4-thanks-card h2{
  margin:0;
  font-size:clamp(46px,7vw,110px);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.05em;
}
.kg4-wall-card p,
.kg4-thanks-card p{
  margin:0;
  max-width:1100px;
  font-size:clamp(22px,2.8vw,40px);
  line-height:1.25;
  font-weight:800;
}

.kg4-sponsor-ticker{
  position:absolute;
  left:var(--kg4-safe);
  right:var(--kg4-safe);
  bottom:0;
  z-index:9;
  display:none;
  align-items:center;
  gap:18px;
  min-height:34px;
  padding:6px 16px;
  background:rgba(18,14,26,.92);
  color:#fff;
  font-size:12px;
  font-weight:800;
  overflow:hidden;
}
.kg4-sponsor-ticker.is-visible{display:flex}
.kg4-sponsor-ticker>span{
  flex:0 0 auto;
  color:var(--kg4-yellow);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.kg4-sponsor-names{
  white-space:nowrap;
  animation:kg4Ticker 22s linear infinite;
}
@keyframes kg4Ticker{
  from{transform:translateX(8%)}
  to{transform:translateX(-45%)}
}

.kg4-led-mode{
  --kg4-safe:48px!important;
}
.kg4-led-mode .kg4-brand,
.kg4-led-mode .kg4-counter,
.kg4-led-mode .kg4-now-playing strong,
.kg4-led-mode .kg4-next-label{
  font-weight:1000;
}
.kg4-led-mode .kg4-side-qr img{
  width:260px;
  height:260px;
}
.kg4-led-mode .kg4-side-panel{
  width:336px;
}
.kg4-led-mode.kg4-has-sidepanel .kg4-stage{
  right:calc(var(--kg4-safe) + 364px);
}
.kg4-led-mode.kg4-has-sidepanel .kg4-broadcast-footer,
.kg4-led-mode.kg4-has-sidepanel .kg4-progress-wrap{
  right:calc(var(--kg4-safe) + 372px);
}

.kg4-channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
  max-width:1200px;
}
.kg4-channel-grid article{
  padding:22px;
  border:1px solid #dcdcde;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.kg4-channel-grid .online{color:#16803d;font-weight:800}
.kg4-channel-grid .offline{color:#b32d2e;font-weight:800}

@media(max-width:1100px){
  .kg4-has-sidepanel .kg4-stage{
    right:var(--kg4-safe);
  }
  .kg4-has-sidepanel .kg4-broadcast-footer,
  .kg4-has-sidepanel .kg4-progress-wrap{
    right:calc(var(--kg4-safe) + 8px);
  }
  .kg4-side-panel{
    display:none!important;
  }
}


/* =========================================================
   KorteGroet Enterprise 2.0 — broadcast-safe layout
   ========================================================= */

.kg4-player{
  --kgent-rail: 330px;
  --kgent-gap: 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(244,198,56,.22), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(233,111,167,.20), transparent 27%),
    #0b0b0e;
}

.kg4-player .kg4-qr{
  display:none !important;
}

.kg4-stage{
  left:var(--kg4-safe) !important;
  right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap)) !important;
  top:calc(var(--kg4-safe) + 82px) !important;
  bottom:calc(var(--kg4-safe) + 112px) !important;
  width:auto !important;
  height:auto !important;
  border-radius:24px;
  box-shadow:0 28px 85px rgba(0,0,0,.5);
}

.kg4-side-panel{
  display:flex !important;
  flex-direction:column;
  top:calc(var(--kg4-safe) + 82px) !important;
  right:var(--kg4-safe) !important;
  bottom:calc(var(--kg4-safe) + 112px) !important;
  width:var(--kgent-rail) !important;
  padding:20px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,244,255,.97));
  box-shadow:0 28px 85px rgba(0,0,0,.42);
  overflow:hidden;
}

.kg4-side-qr img{
  width:min(238px, calc(var(--kgent-rail) - 48px)) !important;
  height:min(238px, calc(var(--kgent-rail) - 48px)) !important;
  padding:13px;
  border:8px solid #fff;
  image-rendering:pixelated;
}

.kg4-side-qr strong{
  font-size:25px;
  letter-spacing:-.02em;
}

.kg4-side-qr span{
  font-size:14px;
  line-height:1.35;
}

.kg4-side-stats{
  margin-top:auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.kg4-side-stats strong{
  font-size:23px;
}

.kg4-broadcast-footer{
  left:calc(var(--kg4-safe) + 8px) !important;
  right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap) + 8px) !important;
  bottom:calc(var(--kg4-safe) + 20px) !important;
  min-height:62px;
  padding:0 4px;
}

.kg4-progress-wrap{
  left:calc(var(--kg4-safe) + 8px) !important;
  right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap) + 8px) !important;
  bottom:calc(var(--kg4-safe) + 7px) !important;
}

.kg4-meta{
  left:calc((100% - var(--kgent-rail) - var(--kgent-gap))/2) !important;
  bottom:calc(var(--kg4-safe) + 105px) !important;
  min-width:330px;
  max-width:520px;
  padding:14px 26px 16px;
  border:0;
  border-left:7px solid var(--kg4-orange);
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.38);
  text-align:left;
}

.kg4-meta::before{
  display:none !important;
}

.kg4-meta em{
  display:block;
  margin-bottom:6px;
  color:var(--kg4-green);
  font-size:11px;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.kg4-meta strong{
  font-size:clamp(25px,2.4vw,39px);
  text-transform:capitalize;
}

.kg4-meta span{
  font-size:clamp(14px,1.3vw,21px);
}

.kg4-brand{
  left:calc(var(--kg4-safe) + 8px) !important;
  top:calc(var(--kg4-safe) + 7px) !important;
}

.kg4-counter{
  right:calc(var(--kg4-safe) + 8px) !important;
  top:calc(var(--kg4-safe) + 7px) !important;
}

.kg4-sound-button{
  left:calc(var(--kg4-safe) + 8px) !important;
  top:calc(var(--kg4-safe) + 86px) !important;
}

.kgent-city-ticker{
  flex:1;
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:850;
  opacity:.88;
  white-space:nowrap;
}

.kgent-city-ticker span{
  display:inline-block;
  padding-left:10%;
  animation:kgentCityTicker 22s linear infinite;
}

@keyframes kgentCityTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-65%)}
}

.kgent-loader{
  width:min(430px,70vw);
  height:8px;
  margin:30px auto 0;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.kgent-loader i{
  display:block;
  width:36%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--kg4-yellow),var(--kg4-orange),var(--kg4-pink));
  animation:kgentLoading 1.3s ease-in-out infinite;
}

@keyframes kgentLoading{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(310%)}
}

.kg4-card,
.kg4-empty,
.kg4-sponsor,
.kg4-end-card,
.kg4-countdown,
.kg4-wall-card,
.kg4-thanks-card{
  right:var(--kg4-safe) !important;
}

/* Tablet / smaller browser preview: keep QR separate below the video. */
@media(max-width:1080px){
  .kg4-player{
    --kgent-rail: 270px;
    --kgent-gap: 16px;
  }

  .kg4-side-panel{
    display:flex !important;
    width:var(--kgent-rail) !important;
    padding:15px;
  }

  .kg4-side-qr img{
    width:190px !important;
    height:190px !important;
  }

  .kg4-side-qr strong{font-size:21px}
  .kg4-side-qr span{font-size:12px}
  .kg4-side-stats strong{font-size:19px}
  .kg4-side-stats span{font-size:8px}
}

@media(max-width:760px){
  .kg4-player{
    --kg4-safe:10px !important;
    overflow:auto;
    min-height:100vh;
  }

  .kg4-stage{
    right:var(--kg4-safe) !important;
    bottom:300px !important;
  }

  .kg4-side-panel{
    top:auto !important;
    left:var(--kg4-safe) !important;
    right:var(--kg4-safe) !important;
    bottom:42px !important;
    width:auto !important;
    height:245px;
    flex-direction:row;
    align-items:center;
  }

  .kg4-side-qr{
    flex-direction:row;
    text-align:left;
  }

  .kg4-side-qr img{
    width:170px !important;
    height:170px !important;
  }

  .kg4-side-stats{
    width:100%;
    margin:0;
  }

  .kg4-broadcast-footer,
  .kg4-progress-wrap{
    display:none !important;
  }

  .kg4-meta{
    left:50% !important;
    bottom:310px !important;
  }
}


/* =========================================================
   KorteGroet Enterprise X
   ========================================================= */

.kg4-player{
  --kgent-rail:285px;
  --kgent-gap:20px;
  background:
    radial-gradient(circle at 10% 10%,rgba(244,198,56,.20),transparent 30%),
    radial-gradient(circle at 90% 12%,rgba(233,111,167,.19),transparent 29%),
    radial-gradient(circle at 78% 92%,rgba(44,125,103,.18),transparent 30%),
    #0a0a0d;
}

.kg4-stage{
  right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap)) !important;
}

.kg4-side-panel{
  width:var(--kgent-rail) !important;
  padding:16px;
}

.kg4-side-qr img{
  width:min(205px,calc(var(--kgent-rail) - 48px)) !important;
  height:min(205px,calc(var(--kgent-rail) - 48px)) !important;
}

.kg4-side-qr strong{
  font-size:21px;
}

.kg4-side-qr span{
  font-size:12px;
}

.kg4-side-stats strong{
  font-size:19px;
}

.kg4-broadcast-footer,
.kg4-progress-wrap{
  right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap) + 8px) !important;
}

.kg4-meta{
  left:calc((100% - var(--kgent-rail) - var(--kgent-gap))/2) !important;
  bottom:calc(var(--kg4-safe) + 104px) !important;
  min-width:300px;
  max-width:460px;
}

.kg4-meta strong{
  text-transform:none;
}

.kg4-counter{
  min-width:126px;
  align-items:center;
  text-align:center;
}

.kg4-counter strong{
  font-size:34px;
}

.kg4-counter span{
  font-size:10px;
}

.kg4-now-playing.kgx-hide-live>span{
  display:none;
}

.kg4-now-playing.kgx-hide-live{
  grid-template-columns:auto;
  grid-template-areas:"name" "city";
}

.kgx-emergency{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  min-height:42px;
  padding:8px 24px;
  background:#d83a3a;
  color:#fff;
  font-size:15px;
  font-weight:850;
  text-align:center;
}

.kgx-emergency strong{
  padding:4px 9px;
  border-radius:999px;
  background:#fff;
  color:#a32020;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.kgx-content-card{
  position:absolute;
  inset:var(--kg4-safe);
  z-index:14;
  display:none;
  place-items:center;
  align-content:center;
  gap:24px;
  padding:8vw;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  color:var(--kg4-ink);
  background:
    radial-gradient(circle at 18% 14%,rgba(244,198,56,.48),transparent 32%),
    radial-gradient(circle at 84% 18%,rgba(233,111,167,.42),transparent 31%),
    linear-gradient(135deg,#fff5df,#ffd9c7);
}

.kgx-content-card.is-visible{
  display:grid;
  animation:kg4CardIn .6s ease both;
}

.kgx-content-icon{
  color:var(--kg4-orange);
  font-size:clamp(80px,11vw,175px);
  line-height:.75;
  filter:drop-shadow(8px 8px 0 var(--kg4-yellow));
}

.kgx-content-card h2{
  max-width:1100px;
  margin:0;
  font-size:clamp(44px,7vw,108px);
  line-height:.96;
  font-weight:1000;
  letter-spacing:-.05em;
  text-wrap:balance;
}

.kgx-content-card p{
  max-width:950px;
  margin:0;
  font-size:clamp(22px,2.7vw,39px);
  line-height:1.25;
  font-weight:800;
  text-wrap:balance;
}

.kgx-card-icon{
  color:#f2632f;
  font-size:36px;
}

.kg4-transition-fade .kg4-video{
  transition:opacity .65s ease;
}

.kg4-transition-zoom .kg4-video{
  transition:opacity .65s ease,transform 6s ease;
}

.kg4-transition-zoom:not(.is-between) .kg4-video{
  transform:scale(1.018);
}

.kg4-transition-slide .kg4-video{
  transition:opacity .65s ease,transform .65s ease;
}

@media(max-width:1080px){
  .kg4-player{
    --kgent-rail:250px;
    --kgent-gap:14px;
  }

  .kg4-side-qr img{
    width:170px !important;
    height:170px !important;
  }

  .kg4-side-stats{
    grid-template-columns:1fr;
  }

  .kg4-side-stats div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
  }

  .kg4-side-stats strong,
  .kg4-side-stats span{
    margin:0;
  }
}

/* KorteGroet Enterprise X Pro */
.kg4-player{--kgent-rail:285px;--kgent-gap:20px}
.kg4-side-panel{gap:12px}
.kg4-side-qr img{width:min(185px,calc(var(--kgent-rail) - 52px))!important;height:min(185px,calc(var(--kgent-rail) - 52px))!important}
.kg4-side-qr strong{font-size:20px}.kg4-side-qr span{font-size:11px}
.kgx-side-live{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(40,27,69,.07)}
.kgx-live-pill{display:flex;align-items:center;gap:7px;color:#c62828;font-size:11px;font-weight:1000;letter-spacing:.08em}
.kgx-live-pill i{width:9px;height:9px;border-radius:50%;background:#e33f3f;box-shadow:0 0 0 6px rgba(227,63,63,.13);animation:kgxLivePulse 1.8s ease-in-out infinite}
@keyframes kgxLivePulse{50%{box-shadow:0 0 0 10px rgba(227,63,63,.04)}}
.kgx-clock{font-size:18px;font-weight:1000}
.kgx-side-campaign{display:none;padding:12px 14px;border-radius:15px;background:linear-gradient(135deg,#281b45,#3b2863);color:#fff}
.kgx-side-campaign.is-visible{display:block}.kgx-side-campaign small{display:block;color:#f4c638;font-size:9px;font-weight:1000;text-transform:uppercase}
.kgx-side-campaign strong{display:block;font-size:15px}.kgx-side-campaign span{display:block;margin-top:5px;font-size:10px;opacity:.78}
.kgx-toast{position:absolute;top:calc(var(--kg4-safe) + 98px);left:50%;z-index:45;display:flex;gap:10px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.96);opacity:0;transform:translate(-50%,-20px);transition:.35s}
.kgx-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.kg4-countdown.kgx-countdown-compact{inset:auto!important;left:50%!important;top:50%!important;width:240px;height:240px;border-radius:50%!important;transform:translate(-50%,-50%);background:rgba(19,14,31,.92)}
.kg4-countdown.kgx-countdown-compact span{font-size:18px}.kg4-countdown.kgx-countdown-compact strong{font-size:112px}
.kgx-compact-countdown-active .kg4-stage{filter:blur(10px) brightness(.55);transform:scale(.985);transition:.35s}
.kgx-content-card,.kg4-wall-card,.kg4-thanks-card,.kg4-card,.kg4-sponsor,.kg4-end-card{right:calc(var(--kg4-safe) + var(--kgent-rail) + var(--kgent-gap))!important}
.kgx-content-card{padding:6vw}.kgx-content-card h2{max-width:900px;font-size:clamp(38px,5.8vw,88px)}.kgx-content-card p{max-width:800px}
.kg4-broadcast-footer{gap:16px}.kg4-now-playing{min-width:185px}.kgent-city-ticker{max-width:48%}.kg4-next-label{max-width:210px;text-align:right}