/* ═══════════════════════════════════════════════════════════════════════════
   BSO Enquête v2 – Frontend CSS  (Nachtblauw & Neon)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --c-night:       #0F1B4D;
  --c-blue:        #1A3A8A;
  --c-neon:        #FF6B35;
  --c-orange:      #FF6B35;
  --c-yellow:      #FFE040;
  --c-white:       #FFFFFF;
  --c-light:       #EEF2FF;
  --c-text:        #0F1B4D;
  --progress-grad: linear-gradient(90deg, #FF6B35, #FFE040);
  --shadow:        0 4px 16px rgba(0,0,0,.22);
  --shadow-lg:     0 10px 30px rgba(0,0,0,.28);
  --radius:        16px;
  --radius-pill:   40px;
  --border:        3px solid var(--c-neon);
  --font:          'Nunito', system-ui, sans-serif;
  --transition:    .25s cubic-bezier(.34,1.56,.64,1);
}

.bso2-wrap *, .bso2-wrap *::before, .bso2-wrap *::after { box-sizing: border-box; }
.bso2-wrap {
  font-family: var(--font);
  color: var(--c-text);
  background: transparent;
  padding-top: 80px;
  padding-bottom: 80px;
}

.bso2-screen {
  min-height: 885px;
  display: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px 40px;
  animation: bso2In .35s ease both;
}
.bso2-screen.is-active { display: block; }
@keyframes bso2In {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.bso2-locked {
  text-align:center; background:var(--c-white);
  border-radius:var(--radius); border:var(--border);
  padding:60px 24px; max-width:600px; margin:40px auto;
  box-shadow:var(--shadow);
}
.bso2-locked__icon { font-size:56px; margin-bottom:16px; display:block; }
.bso2-locked h2 { font-size:26px; font-weight:800; margin:0 0 12px; color:var(--c-night); }

/* WELKOMSTSCHERM */
.bso2-screen--welcome { padding-top: 20px; }

.bso2-welcome__titel {
  text-align:center;
  padding:.7rem 3rem;
  margin: 0 auto 32px;
  font-size:clamp(1.8rem,5vw,2.8rem);
  font-weight:900;
  color:#FFFFFF;
  background:var(--c-neon);
  border-radius:var(--radius);
  display: block;
  width: fit-content;
  max-width: 90%;


  transform: rotate(-1.5deg);
  box-shadow:var(--shadow);
  line-height:1.2;
}
.bso2-welcome__hero {
  background:var(--c-white);
  border-radius:var(--radius);
  border:var(--border);
  padding:40px 24px 28px;
  box-shadow:var(--shadow);
  text-align:center;
  margin-top:40px;
  position:relative;
}
.bso2-welcome__hero::before {
  content:"📋";
  font-size:2rem;
  position:absolute;
  top:-32px; left:50%;
  transform:translateX(-50%);
  background:var(--c-white);
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:var(--border);
  z-index:2;
}
.bso2-welcome__badge { display:none; }
.bso2-welcome__intro {
  font-size:1.1rem; line-height:1.65;
  color:var(--c-text);
  max-width:560px; margin:0 auto 16px;
}
.bso2-welcome__intro:empty { display:none; }
.bso2-welcome__meta {
  display:flex; gap:12px; justify-content:center;
  flex-wrap:wrap; margin-bottom:20px;
}
.bso2-welcome__meta span {
  background:var(--c-light);
  border:2px solid var(--c-neon);
  border-radius:var(--radius-pill);
  padding:6px 18px;
  font-weight:700; font-size:.95rem;
  color:var(--c-night);
}

/* LEVEL HEADER + VOORTGANG */
.bso2-screen--level { padding-top: 0; }

/* Grote roterende titelbalk – zelfde stijl als welkomstbanner */
.bso2-level__header {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}
.bso2-level__badge-icon { display: none; }

.bso2-level__titel {
  display: block;
  width: fit-content;
  max-width: 95%;
  margin: 0 auto 0;
  padding: .75rem 3rem;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #FFFFFF;
  background: var(--c-neon);
  border-radius: var(--radius);
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow);
  line-height: 1.2;
  position: relative;
  z-index: 2;
  margin-bottom: -24px;
}

.bso2-level__subtitel {
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  margin: 32px 0 8px;
  font-weight: 600;
  display: block;
  text-align: center;
}
.bso2-progress {
  height:28px;
  padding:3px;
  background:rgba(255,255,255,.2);
  border-radius:20px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.18);
  overflow:hidden;
  max-width:600px;
  margin:0 auto 18px;

}
.bso2-progress__dot { display:none; }
.bso2-progress::after {
  content:'';
  display:block;
  height:100%;
  width:var(--bso2-prog,5%);
  background:var(--progress-grad);
  border-radius:20px;
  animation:bso2Pulse 1.8s ease-in-out infinite;
  transition:width .6s ease;
}
@keyframes bso2Pulse { 0%,100%{opacity:.8} 50%{opacity:1} }

/* KAARTEN */
.bso2-card, .bso2-vraag {
  background:var(--c-white);
  border-radius:var(--radius);
  border:var(--border);
  box-shadow:var(--shadow);
  padding:28px 24px;
  margin-bottom:24px;

}
.bso2-vraag__tekst {
  font-size:clamp(1.2rem,3vw,1.55rem);
  font-weight:800;
  color:var(--c-night);
  text-align:center;
  margin:10px 0 20px;
  line-height:1.35;
}
.bso2-hint {
  text-align:center; font-size:.88rem;
  color:#888; margin:-10px 0 14px;
  font-style:italic;
}

/* FORMULIERVELDEN */
.bso2-field { margin-bottom:26px; text-align:center; }
.bso2-label {
  display:block; font-size:1.15rem; font-weight:700;
  color:var(--c-night); margin-bottom:12px;
}
.bso2-input {
  width:80%; max-width:360px;
  padding:14px 20px;
  border:3px solid var(--c-blue);
  border-radius:var(--radius-pill);
  font-family:var(--font); font-size:max(1.1rem, 16px);
  text-align:center; outline:none;
  transition:border-color .2s;
  background:var(--c-white); color:var(--c-text);
  -webkit-appearance:none;
}
.bso2-input:focus { border-color:var(--c-neon); box-shadow:0 0 0 3px rgba(255,107,53,.25); }
.bso2-textarea {
  width:100%; padding:14px 18px;
  border:3px solid var(--c-blue);
  border-radius:var(--radius);
  font-family:var(--font); font-size:max(1rem, 16px);
  outline:none; resize:vertical;
  transition:border-color .2s; color:var(--c-text);
  -webkit-appearance:none;
}
.bso2-textarea:focus { border-color:var(--c-neon); }

/* TILES */
.bso2-tiles { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.bso2-tile {
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-light);
  border:3px solid #CDD5F0;
  border-radius:var(--radius-pill);
  padding:12px 28px;
  font-family:var(--font); font-size:1.05rem; font-weight:700;
  color:var(--c-night);
  transition:var(--transition);
  min-width:120px; text-align:center; line-height:1.3;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.bso2-tile input { display:none; }
.bso2-tile:hover { border-color:var(--c-neon); transform:translateY(-2px); }
.bso2-tile.is-selected {
  background:var(--c-neon); color:#FFFFFF;
  border-color:var(--c-neon);
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(255,107,53,.35);
}

/* AUTOCOMPLETE */
.bso2-autocomplete { position:relative; display:inline-block; width:80%; max-width:360px; }
.bso2-autocomplete .bso2-input { width:100%; }
.bso2-autocomplete__list {
  position:absolute; z-index:200; top:100%; left:0; right:0;
  background:var(--c-white);
  border:3px solid var(--c-neon); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  max-height:40vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  list-style:none; margin:0; padding:0;
  display:none; box-shadow:var(--shadow);
}
.bso2-autocomplete__list.is-open { display:block; }
.bso2-autocomplete__list li {
  padding:11px 18px; cursor:pointer;
  font-size:1rem; font-weight:600;
  border-bottom:1px solid #eee; color:var(--c-text);
}
.bso2-autocomplete__list li:hover,
.bso2-autocomplete__list li.is-active { background:var(--c-light); color:var(--c-night); font-weight:800; }

/* MEERKEUZE GRID */
.bso2-image-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}
.bso2-image-card {
 cursor:pointer;
  border-radius:var(--radius);
  overflow:hidden;
  border:3px solid transparent;
  transition:var(--transition);
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  background:var(--c-white);
}
.bso2-image-card img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .3s;
}
.bso2-image-card:hover img { transform:scale(1.04); }
.bso2-image-card__label {
  display:block; text-align:center;
  font-weight:700; font-size:.95rem;
  padding:9px 6px; background:var(--c-white); color:var(--c-night);
}
.bso2-image-card__check {
  position:absolute; top:8px; right:8px;
  width:30px; height:30px;
  background:var(--c-neon); color:#FFFFFF;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px;
  opacity:0; transform:scale(.4);
  transition:opacity .2s, transform .3s var(--transition);
  border:2px solid var(--c-white);
}
.bso2-image-card.is-selected {
  border-color:var(--c-neon);
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(255,107,53,.35);
}
.bso2-image-card.is-selected .bso2-image-card__check { opacity:1; transform:scale(1); }
.bso2-image-card.is-disabled { opacity:.38; pointer-events:none; }
.bso2-hidden-input { display:none; }

/* STERREN */
.bso2-star-list { display:flex; flex-direction:column; gap:10px; }
.bso2-star-row {
  display:flex; align-items:center; gap:14px;
  background:var(--c-light);
  border-radius:var(--radius);
  padding:12px 16px;
  border:2px solid #CDD5F0;
  transition:border-color .2s;
}
.bso2-star-row:has(.bso2-star.is-active) { border-color:var(--c-neon); }
.bso2-star-row__img {
  width:56px; height:56px; border-radius:10px; object-fit:cover;
  flex-shrink:0; border:2px solid var(--c-neon);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.bso2-star-row__label { flex:1; font-weight:700; font-size:1.05rem; color:var(--c-night); }
.bso2-stars { display:flex; gap:2px; }
.bso2-star {
  background:none; border:none; font-size:30px; cursor:pointer;
  padding:0 1px;
  filter:grayscale(1) opacity(.3);
  transition:filter .12s, transform .15s;
  line-height:1;
}
.bso2-star:hover, .bso2-star.is-active { filter:none; transform:scale(1.25); }

/* BINARY – split-card design */
.bso2-binary-progress { margin-bottom: 14px; }
.bso2-binary-progress__label {
  display: flex; justify-content: space-between;
  font-size: .88rem; font-weight: 700;
  color: rgba(255,255,255,.8); margin-bottom: 6px;
}
.bso2-binary-progress__track {
  height: 8px; background: rgba(255,255,255,.2);
  border-radius: 20px; overflow: hidden;
}
.bso2-binary-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-orange));
  border-radius: 20px;
  width: 0%;
  transition: width .4s ease;
}
.bso2-binary-progress__count { color: rgba(255,255,255,.9); }

.bso2-split-list { display: flex; flex-direction: column; gap: 10px; }

.bso2-split-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid #E2DCFF;
  transition: border-color .2s;
}
.bso2-split-card.is-done { border-color: var(--c-orange); }

.bso2-split-row {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  align-items: stretch;
  min-height: 140px;
}

.bso2-split-half {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; font-family: var(--font);
  font-size: .9rem; font-weight: 800;
  cursor: pointer; border: none;
  padding: 14px 12px; text-align: center; line-height: 1.3;
  transition: filter .15s;
}
.bso2-split-half--left  { background: var(--c-light); color: var(--c-night); }
.bso2-split-half--right { background: var(--c-light); color: var(--c-night); }
.bso2-split-half:hover  { background: #E4EAFF; }

.bso2-split-emoji {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.8);
  border: 2px solid #CDD5F0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; flex-shrink: 0;
}
.bso2-split-half--right .bso2-split-emoji {
  background: rgba(255,255,255,.8);
  border-color: #CDD5F0;
}
.bso2-split-check { display: none; font-size: 18px; }

.bso2-split-half.is-won {
  background: var(--c-orange) !important;
  color: #fff !important;
  animation: bso2BinaryPulse .25s ease;
}
.bso2-split-half.is-won .bso2-split-emoji { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.bso2-split-half.is-won .bso2-split-check { display: block; }
.bso2-split-half.is-lost { background: #F2F2F2 !important; color: #bbb !important; }
.bso2-split-half.is-lost .bso2-split-emoji { filter: grayscale(1); opacity: .5; }
.bso2-split-half.is-lost .bso2-split-label { text-decoration: line-through; }

@keyframes bso2BinaryPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.bso2-split-mid {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  border-left: 2px solid #E2DCFF; border-right: 2px solid #E2DCFF;
}
.bso2-split-of {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; letter-spacing: .02em;
}

.bso2-split-hint {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  background: #FFF8F0;
  border-top: 2px solid var(--c-orange);
  font-size: .88rem; color: #7A3200; font-weight: 600;
}
.bso2-split-hint.is-open { max-height: 80px; padding: 10px 16px; }

/* CHECKLIST */
.bso2-checklist { display:flex; flex-direction:column; gap:10px; }
.bso2-check-item {
  display:flex; align-items:center; gap:14px;
  background:var(--c-light);
  border:3px solid transparent;
  border-radius:var(--radius-pill);
  padding:13px 20px; cursor:pointer;
  transition:var(--transition);
  font-weight:700; color:var(--c-night);
}
.bso2-check-item:hover { border-color:var(--c-neon); }
.bso2-check-item:has(.bso2-checkbox:checked) { border-color:var(--c-neon); background:#FFF0E8; }
.bso2-checkbox { width:22px; height:22px; accent-color:var(--c-neon); flex-shrink:0; cursor:pointer; }
.bso2-check-item__label { font-size:1.05rem; flex:1; }
.bso2-check-item.is-disabled { opacity:.35; pointer-events:none; }
.bso2-open-inline {
  border:none; border-bottom:2px solid var(--c-neon);
  background:transparent; font-family:var(--font); font-size:.9rem;
  padding:2px 4px; width:160px; outline:none; color:var(--c-night);
}

/* VOLGORDE */
.bso2-smiley-scale { display:flex; justify-content:center; gap:8px; margin-bottom:6px; font-size:1.4rem; }
.bso2-sortable-instr {
  text-align:center;
  background:var(--c-light);
  padding:12px 16px;
  border-radius:var(--radius);
  border:2px solid var(--c-neon);
  margin-bottom:16px;
  font-weight:600; font-size:.95rem; color:var(--c-text);
}
.bso2-sortable {
  list-style:none; margin:0; padding:0;
  border:3px solid var(--c-blue);
  border-radius:var(--radius);
  overflow:visible;
  background:var(--c-white);
  box-shadow:var(--shadow);
}
.bso2-sortable__item {
  display:flex; align-items:center;
  padding:14px 16px;
  background:var(--c-white);
  border-bottom:2px solid var(--c-light);
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  transition:background .2s, transform .2s, box-shadow .2s;

  min-height:100px;
  gap:12px;
  user-select:none;
}
.bso2-sortable__item:last-child { border-bottom:none; border-radius:0 0 var(--radius) var(--radius); }
.bso2-sortable__item:first-child { border-radius:var(--radius) var(--radius) 0 0; }
.bso2-sortable__item:hover {
  background:var(--c-light);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.bso2-sortable__item:active { cursor:grabbing; }
.bso2-sortable__item.is-over { background:#FFF0E8; border:2px dashed var(--c-neon); }
.bso2-sortable__item[data-rank="1"] { background:#FFF0E8; border-left:14px solid var(--c-neon); }
.bso2-sortable__item[data-rank="1"] .bso2-sortable__rank {
  background:var(--c-neon); color:#FFFFFF;
  box-shadow:0 4px 10px rgba(57,232,122,.4);
  transform:scale(1.2);
}
/* Favoriet badge verwijderd - veroorzaakte layout problemen */
.bso2-sortable__grip {
  width:38px; height:38px;
  background:var(--c-blue); color:var(--c-white);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900;
  flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
  cursor:grab;
}
.bso2-sortable__grip:active { background:var(--c-neon); color:#FFFFFF; cursor:grabbing; }
.bso2-sortable__smiley {
  font-size:1.5rem; flex-shrink:0;
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--c-neon);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-white);
}
.bso2-sortable__thumb {
  width:100px; height:100px;
  border-radius:12px; object-fit:cover;
  border:3px solid var(--c-neon);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  flex-shrink:0;
  transition:transform .3s;
}
.bso2-sortable__item:hover .bso2-sortable__thumb { transform:scale(1.06); }
.bso2-sortable__item .bso2-sortable__rank {
  width:36px; height:36px; border-radius:50%;
  background:var(--c-orange); color:var(--c-white);
  font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--c-white);
  box-shadow:0 3px 8px rgba(0,0,0,.2);
  flex-shrink:0;
  order: 99;
  margin-left: auto;
}
.bso2-sortable__item.is-dragging {
  box-shadow:0 15px 30px rgba(0,0,0,.25) !important;
  border:3px solid var(--c-neon) !important;
  background:var(--c-white) !important;
  transform:rotate(1.5deg) scale(1.03);
  z-index:9999; opacity:.95;
}

/* SLEEP DAGINDELING */
.bso2-drag-wrap { display:flex; flex-direction:column; gap:20px; }
@media (min-width:640px) {
  .bso2-drag-wrap {
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
    height:72vh;
    min-height:520px;
  }
  .bso2-drag-pool {
    width:300px;
    flex-shrink:0;
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior:contain;
    /* touch-action none op de container zodat iOS
       niet scrolt ipv sleept */
  }
  .bso2-drag-zones {
    flex:1;
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior:contain;
  }
}
.bso2-drag-pool {
  background:var(--c-white); border-radius:var(--radius);
  border:var(--border); padding:14px; box-shadow:var(--shadow);
}
.bso2-drag-pool__label { font-weight:800; font-size:.9rem; margin:0 0 10px; color:var(--c-night); text-align:center; }
.bso2-drag-items { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; justify-content:flex-start; padding:8px 4px; }
.bso2-drag-item {
  display:flex; flex-direction:column; align-items:center;
  gap:0; padding:0;
  background:var(--c-white); border:3px solid #CDD5F0;
  border-radius:var(--radius); overflow:hidden;
  cursor:pointer; font-size:.9rem; font-weight:700;
  color:var(--c-night); transition:all .18s;
  user-select:none;
  flex:0 0 calc(50% - 4px);
  text-align:center;
}
.bso2-drag-item:hover { border-color:var(--c-orange); transform:translateY(-2px); box-shadow:var(--shadow); }
.bso2-drag-item.is-selected {
  border-color:var(--c-orange);
  background:#FFF0E8;
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 6px 16px rgba(255,107,53,.35);
}
.bso2-drag-item img {
  width:100%; height:110px; object-fit:cover;
  display:block; flex-shrink:0;
  border-radius:0;
  pointer-events:none;
}
.bso2-drag-item span {
  padding:8px 6px;
  line-height:1.2;
  display:block;
  pointer-events:none;
}
.bso2-drag-item:active { cursor:grabbing; box-shadow:var(--shadow-lg); }
.bso2-drag-item.is-dragging { opacity:.4; }
.bso2-drag-zones { display:flex; flex-direction:column; gap:12px; }
.bso2-drop-zone {
  min-height:160px; border-radius:var(--radius);
  border:3px dashed rgba(255,107,53,.3); padding:12px;
  background:var(--c-white); box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .2s, border-color .2s;
  cursor:pointer;
}
.bso2-drop-zone:hover { border-color:var(--c-orange); background:#FFFAF7; }
.bso2-drop-zone.is-over { background:#FFF0E8; border-color:var(--c-orange); }
.bso2-drag-wrap.has-selection .bso2-drop-zone {
  border-color:var(--c-orange);
  animation:bso2DropPulse 1.2s ease-in-out infinite;
}
@keyframes bso2DropPulse {
  0%,100% { border-color:rgba(255,107,53,.4); }
  50%      { border-color:rgba(255,107,53,1); }
}
.bso2-drop-zone.is-over { background:#FFF0E8; border-color:var(--c-neon); }
.bso2-drop-zone__label { font-weight:800; font-size:1rem; margin-bottom:10px; color:var(--c-night); }
.bso2-drop-zone__items { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; align-items:flex-start; }
.bso2-drop-zone__placeholder { font-size:.85rem; color:#aaa; font-style:italic; text-align:center; padding:8px; }
.bso2-drop-zone__items:not(:empty) + .bso2-drop-zone__placeholder { display:none; }

/* NAVIGATIEKNOPPEN */
.bso2-nav { display:flex; gap:14px; justify-content:flex-end; margin-top:24px; }
.bso2-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 32px;
  border:none; border-radius:var(--radius-pill);
  font-family:var(--font); font-size:1.1rem; font-weight:800;
  cursor:pointer; transition:var(--transition);
  text-decoration:none; box-shadow:var(--shadow);
}
.bso2-btn--start { background:var(--c-orange); color:var(--c-white); }
.bso2-btn--start:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 22px rgba(255,107,53,.5); }
.bso2-btn--next { background:#25D366; color:#fff; border:none; }
.bso2-btn--next:hover { background:#1ebe5d; transform:translateY(-3px) scale(1.04); box-shadow:0 8px 22px rgba(37,211,102,.45); }
.bso2-btn--back {
  background:rgba(255,255,255,.18); color:var(--c-white);
  border:2px solid rgba(255,255,255,.45); backdrop-filter:blur(4px);
}
.bso2-btn--back:hover { background:rgba(255,255,255,.28); }
.bso2-btn--submit {
  background:var(--c-neon); color:#FFFFFF;
  font-size:1.25rem; padding:16px 44px;
  margin:24px auto 0; display:block;
  box-shadow:0 4px 20px rgba(255,107,53,.45);
}
.bso2-btn--submit:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 28px rgba(255,107,53,.55); }
.bso2-btn[disabled] { opacity:.45; pointer-events:none; }

/* BADGE POPUP */
.bso2-badge-overlay {
  position:fixed; inset:0;
  background:rgba(15,27,77,.65); z-index:9998;
  display:none; backdrop-filter:blur(3px);
}
.bso2-badge-overlay.is-visible { display:block; }
.bso2-badge-popup {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.85);
  background:linear-gradient(160deg, #1A3A8A 0%, #0F1B4D 100%);
  border:3px solid var(--c-orange);
  color:var(--c-white);
  border-radius:28px; padding:36px 32px 28px;
  text-align:center; z-index:9999;
  width:min(340px, 90vw);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 6px rgba(255,107,53,.2);
  pointer-events:none; opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  display:none;
}
.bso2-badge-popup.is-visible {
  display:block; opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}
.bso2-badge-popup__trophy {
  font-size:4.5rem; display:block; margin-bottom:4px;
  animation:bso2TrophyBounce .6s ease .15s both;
  filter:drop-shadow(0 4px 16px rgba(255,224,64,.6));
}
@keyframes bso2TrophyBounce {
  0%   { transform:scale(0) rotate(-15deg); }
  60%  { transform:scale(1.2) rotate(5deg); }
  100% { transform:scale(1) rotate(0deg); }
}
.bso2-badge-popup__stars {
  font-size:1.5rem; letter-spacing:4px; display:block;
  margin-bottom:10px;
  animation:bso2FadeUp .4s ease .35s both;
}
.bso2-badge-popup__label {
  font-size:1.9rem; font-weight:900; color:#fff;
  margin-bottom:8px;
  animation:bso2FadeUp .4s ease .45s both;
}
.bso2-badge-popup__level {
  font-size:1rem; font-weight:700; color:var(--c-orange);
  background:rgba(255,107,53,.15); border:1px solid rgba(255,107,53,.4);
  border-radius:30px; display:inline-block; padding:4px 18px;
  margin-bottom:10px;
  animation:bso2FadeUp .4s ease .5s both;
}
.bso2-badge-popup__msg {
  font-size:.88rem; color:rgba(255,255,255,.6);
  margin-bottom:22px;
  animation:bso2FadeUp .4s ease .55s both;
}
@keyframes bso2FadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* EINDSCHERM */
.bso2-einde__inner { max-width:580px; margin:0 auto; text-align:center; padding:40px 16px 60px; }
.bso2-einde__titel {
  font-size:clamp(2rem,6vw,3rem); font-weight:900;
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 40px rgba(0,0,0,.4);
  margin:0 0 12px;
}
.bso2-einde__tekst {
  font-size:1.15rem;
  color:#fff;
  margin-bottom:32px;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  background: rgba(0,0,0,.25);
  border-radius: var(--radius);
  padding: 12px 20px;
  backdrop-filter: blur(4px);
}
.bso2-einde__badge-row {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:12px; margin-bottom:28px; min-height:48px;
}
.bso2-earned-badge {
  font-size:1rem; background:var(--c-night);
  color:var(--c-neon); border-radius:30px;
  border:2px solid var(--c-neon);
  padding:7px 18px; font-weight:800;
  animation:bso2Pop .4s var(--transition) both;
}
@keyframes bso2Pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.bso2-einde__confetti { position:relative; height:50px; overflow:hidden; pointer-events:none; }
.bso2-confetti-piece {
  position:absolute; width:10px; height:10px; border-radius:2px;
  animation:bso2Confetti 1.6s ease-out forwards;
}
@keyframes bso2Confetti {
  0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(80px) rotate(720deg); opacity:0; }
}
.bso2-rating-wrap {
  background:var(--c-white); border-radius:var(--radius);
  border:var(--border); padding:24px; margin-bottom:24px;
  box-shadow:var(--shadow);
}
.bso2-rating__vraag { font-weight:800; font-size:1.1rem; margin:0 0 16px; color:var(--c-night); }
.bso2-rating-knoppen { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.bso2-rating-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--c-light); border:3px solid #CDD5F0;
  border-radius:var(--radius); padding:12px 18px;
  font-family:var(--font); font-size:2rem; cursor:pointer;
  transition:var(--transition);
}
.bso2-rating-btn span { font-size:.8rem; font-weight:700; color:var(--c-night); }
.bso2-rating-btn.is-selected {
  border-color:var(--c-neon); background:#FFF0E8;
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 6px 16px rgba(255,107,53,.3);
}
.bso2-submit-msg { border-radius:var(--radius); padding:14px 20px; font-weight:700; margin-top:16px; font-size:1rem; }
.bso2-submit-msg.is-success { background:#FFF0E8; color:#0F6E56; border:2px solid var(--c-neon); }
.bso2-submit-msg.is-error   { background:#FFF0F5; color:#c0392b; border:2px solid var(--c-orange); }

/* PAGINA-LAYOUT FIXES */
.wp-block-cover.alignfull:has(.bso2-wrap) {
  min-height: 100vh !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body:has(.bso2-wrap) { background-color: #5640A8 !important; }
body:has(.bso2-wrap) .wp-block-group.has-global-padding.is-layout-constrained,
body:has(.bso2-wrap) .wp-site-blocks,
body:has(.bso2-wrap) main,
body:has(.bso2-wrap) .site-main,
body:has(.bso2-wrap) .entry-content,
body:has(.bso2-wrap) .wp-block-post-content {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
body:has(.bso2-wrap) .wp-block-spacer { display: none !important; }
body:has(.bso2-wrap) .logoform {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  margin-top: 20px !important;
  margin-bottom: -80px !important;
  padding-bottom: 0 !important;
}
.wp-block-cover__inner-container:has(.bso2-wrap) { max-width:100%; padding:0; }

/* RESPONSIVE */
@media (max-width:600px) {
  .bso2-image-grid { grid-template-columns:repeat(2,1fr); }
  .bso2-star-row { flex-wrap:wrap; }
  .bso2-binary-row { grid-template-columns:1fr; }
  .bso2-binary-vs { display:none; }
  .bso2-sortable__item { min-height:80px; }
  .bso2-sortable__thumb { width:76px; height:76px; }
  .bso2-sortable__item[data-rank="1"]::after { display:none; }
  .bso2-nav { flex-direction:column-reverse; }
  .bso2-btn { width:100%; justify-content:center; }
  .bso2-welcome__titel { font-size:1.5rem; padding:.6rem 1.5rem; }
  .bso2-tiles { flex-direction:column; align-items:center; }
}

/* Achtergrond override – nieuwe foto */
body:has(.bso2-wrap) .wp-block-cover__image-background {
  content: url('http://partoumeedenkweken.nl/develop/wp-content/uploads/2026/05/Kinderen2.webp') !important;
  object-position: center top !important;
}

/* Optioneel-label naast veldnaam */
.bso2-optioneel {
  font-size: .8rem;
  font-weight: 600;
  color: #999;
  font-style: italic;
  margin-left: 4px;
}

/* Weet ik niet-knop onder locatievelden */
.bso2-weet-niet {
  display: block;
  margin: 10px auto 0;
  background: transparent;
  border: 2px solid #CDD5F0;
  border-radius: var(--radius-pill);
  color: #888;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  padding: 7px 22px;
  transition: var(--transition);
  width: fit-content;
}
.bso2-weet-niet:hover {
  border-color: var(--c-neon);
  color: var(--c-night);
  transform: translateY(-1px);
}
.bso2-weet-niet.is-active {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: #fff;
  font-weight: 800;
}

/* Vervolgvraag uitklapper onder binary paar */
.bso2-split-vervolgvraag {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, padding .4s ease;
  background: #F8F7FF;
  border-top: 3px solid var(--c-orange);
}
.bso2-split-vervolgvraag.is-open {
  max-height: 600px;
  padding: 16px 20px 20px;
}
.bso2-split-vervolgvraag__tekst {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-night);
  margin-bottom: 14px;
  line-height: 1.4;
}
.bso2-vv-checklist .bso2-check-item {
  background: var(--c-white);
  border: 2px solid #CDD5F0;
}

/* Intro-tekst boven vraag (context/uitleg) */
.bso2-vraag__intro {
  background: #FFF8F0;
  border-left: 4px solid var(--c-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .95rem;
  font-weight: 600;
  color: #7A3200;
  line-height: 1.5;
}

/* Level intro-tekst (boven alle vragen van een level) */
.bso2-level__intro {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  text-align: center;
  line-height: 1.5;
}

/* Omschrijving onder thema-label in sterren */
.bso2-star-row__omschrijving {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: #888;
  margin-top: 2px;
}

/* Omschrijving in sorteer-items */
.bso2-sortable__tekst {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bso2-sortable__omschrijving {
  font-size: .78rem;
  font-weight: 600;
  color: #888;
  font-style: italic;
}

/* Hobby vervolgvragen container */
.bso2-hobby-vervolgvragen {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bso2-hobby-vv {
  background: #F8F7FF;
  border-radius: var(--radius);
  border-left: 4px solid var(--c-orange);
  padding: 16px 18px;
  animation: bso2In .3s ease both;
}

.bso2-hobby-vv__label {
  font-size: .95rem;
  color: var(--c-night);
  margin-bottom: 10px;
  line-height: 1.4;
}
.bso2-hobby-vv__label strong {
  color: var(--c-orange);
}

/* ── Touch / iOS optimalisaties ─────────────────────────────────────────── */
.bso2-wrap button,
.bso2-wrap label,
.bso2-wrap .bso2-image-card,
.bso2-wrap .bso2-split-half,
.bso2-wrap .bso2-check-item,
.bso2-wrap .bso2-tile,
.bso2-wrap .bso2-rating-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Minimale taphoogte 44px (Apple HIG richtlijn) */
.bso2-btn,
.bso2-split-half,
.bso2-binary-btn,
.bso2-rating-btn {
  min-height: 44px;
}

/* Voortgangsbalk scroll fix op iOS */
.bso2-sortable {
  -webkit-overflow-scrolling: touch;
}

/* Voorkom dubbele tap zoom op knoppen iOS */
.bso2-wrap button {
  touch-action: manipulation;
}

/* Achtergrondafbeelding cover block positie */
body:has(.bso2-wrap) .wp-block-cover__image-background {
  object-position: center bottom !important;
}

/* Level 5 - Checklist met afbeelding */
.bso2-check-item__img {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 2px solid #CDD5F0;
}
.bso2-check-item:has(.bso2-checkbox:checked) .bso2-check-item__img {
  border-color: var(--c-neon);
}

/* Level 6 - Binary split cards met afbeelding */
.bso2-split-half .bso2-split-img {
  width: 110px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
  margin-bottom: 6px;
}
.bso2-split-half--right .bso2-split-img {
  border-color: rgba(255,107,53,.25);
}
.bso2-split-half.is-won .bso2-split-img {
  border-color: rgba(255,255,255,.6);
}

/* Level 7 - Sterren rij grotere afbeeldingen */
.bso2-star-row__img {
  width: 80px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--c-neon);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Level 7 - Sorteerlijst grotere thumbnails */
.bso2-sortable__thumb {
  width: 100px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--c-neon);
  flex-shrink: 0;
}

/* Placeholder afbeelding als er geen img is */
.bso2-img-fallback {
  width: 72px;
  height: 56px;
  background: linear-gradient(135deg, var(--c-light), #D8E0FF);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  border: 2px solid #CDD5F0;
}

/* Hint balk bij geselecteerd kaartje */
.bso2-sleep-hint {
  display: none;
  background: var(--c-orange);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  margin: 12px 0;
  animation: bso2In .25s ease both;
}

/* Geplaatste kaartjes in drop-zone: kleinere hoogte */
.bso2-drop-zone .bso2-drag-item { flex:0 0 calc(50% - 4px); }
.bso2-drop-zone .bso2-drag-item img { height:70px; }

/* ═══════════════════════════════════════════════════════════════════════
   LEVEL 4 – TIK DAGINDELING
   ═══════════════════════════════════════════════════════════════════════ */
.bso2-tik-wrap { display:flex; flex-direction:column; gap:16px; }

/* Stap indicator */
.bso2-tik-steps {
  display:flex; align-items:center; gap:10px;
  font-size:.88rem; font-weight:600; color:rgba(255,255,255,.7);
}
.bso2-tik-step {
  padding:5px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.15);
  transition:all .2s;
}
.bso2-tik-step.is-active {
  background:var(--c-orange); color:#fff;
}
.bso2-tik-step.is-done {
  background:var(--c-blue); color:#fff;
}
.bso2-tik-arrow { color:rgba(255,255,255,.4); font-size:.9rem; }

/* Hint balk */
.bso2-tik-hint {
  display:none;
  background:var(--c-orange); color:#fff;
  border-radius:var(--radius);
  padding:12px 20px;
  font-size:.95rem; font-weight:700;
  text-align:center;
  animation:bso2In .2s ease both;
}
.bso2-tik-hint.is-visible { display:block; }

/* Activiteiten grid */
.bso2-tik-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px;
}
.bso2-tik-card {
  background:var(--c-white);
  border:3px solid #CDD5F0;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:all .18s;
  position:relative;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.bso2-tik-card:hover { border-color:var(--c-orange); transform:translateY(-2px); }
.bso2-tik-card.is-selected {
  border-color:var(--c-orange);
  background:#FFF0E8;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(255,107,53,.35);
}
.bso2-tik-card.is-placed {
  opacity:.35;
  pointer-events:none;
  filter:grayscale(.8);
}
.bso2-tik-card img {
  width:100%; height:100px; object-fit:cover; display:block;
}
.bso2-tik-card__emoji {
  height:100px; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; background:var(--c-light);
}
.bso2-tik-card__label {
  display:block; font-size:.85rem; font-weight:700;
  padding:7px 6px; line-height:1.2;
  color:var(--c-night);
}
.bso2-tik-card__check {
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  background:var(--c-orange); color:#fff;
  font-size:13px; font-weight:900;
  display:none; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.bso2-tik-card.is-selected .bso2-tik-card__check { display:flex; }

/* Dagdelen */
.bso2-tik-zones {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.bso2-tik-zone {
  background:var(--c-white);
  border:3px solid #CDD5F0;
  border-radius:var(--radius);
  padding:12px;
  min-height:130px;
  transition:all .2s;
  cursor:default;
}
.bso2-tik-zone.can-drop {
  border-color:var(--c-orange);
  background:#FFFAF7;
  cursor:pointer;
  animation:bso2TikPulse 1.2s ease-in-out infinite;
}
.bso2-tik-zone.can-drop:hover { background:#FFF0E8; }
.bso2-tik-zone.is-full { border-color:#CDD5F0; }

@keyframes bso2TikPulse {
  0%,100% { border-color:rgba(255,107,53,.35); }
  50%      { border-color:var(--c-orange); box-shadow:0 0 0 3px rgba(255,107,53,.15); }
}

.bso2-tik-zone__header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.9rem; font-weight:800; color:var(--c-night);
  margin-bottom:10px;
}
.bso2-tik-zone__badge {
  font-size:.75rem; font-weight:700;
  background:var(--c-light); color:#888;
  border-radius:20px; padding:2px 8px;
}
.bso2-tik-zone__items { display:flex; flex-direction:column; gap:6px; }
.bso2-tik-zone__empty {
  font-size:.8rem; color:rgba(0,0,0,.3);
  font-style:italic; text-align:center;
  padding:10px 0;
}

/* Geplaatst item in dagdeel */
.bso2-tik-placed {
  display:flex; align-items:center; gap:6px;
  background:var(--c-light);
  border:2px solid #CDD5F0;
  border-radius:var(--radius-pill);
  padding:5px 10px;
  font-size:.82rem; font-weight:700;
  color:var(--c-night);
  cursor:pointer;
  transition:all .15s;
}
.bso2-tik-placed:hover { border-color:#E24B4A; color:#A32D2D; }
.bso2-tik-placed img {
  width:28px; height:22px; object-fit:cover;
  border-radius:4px; flex-shrink:0;
}
.bso2-tik-placed__remove {
  margin-left:auto; color:#ccc;
  font-size:14px; line-height:1;
  flex-shrink:0;
}
.bso2-tik-placed:hover .bso2-tik-placed__remove { color:#E24B4A; }

@media (max-width:600px) {
  .bso2-tik-grid { grid-template-columns:repeat(3, 1fr); }
  .bso2-tik-zones { grid-template-columns:1fr; }
  .bso2-tik-card img { height:80px; }
}

/* ── Checklist kaartjes-grid (met afbeeldingen) ─────────────────────── */
.bso2-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.bso2-check-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  border: 3px solid #CDD5F0;
  background: var(--c-white);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.bso2-check-card:hover { border-color: var(--c-orange); transform: translateY(-2px); }
.bso2-check-card:has(.bso2-check-grid__cb:checked) {
  border-color: var(--c-orange);
  background: #FFF0E8;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255,107,53,.3);
}
.bso2-check-card.is-disabled { opacity: .35; pointer-events: none; }

.bso2-check-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.bso2-check-card__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--c-light), #D8E0FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.bso2-check-card__label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  padding: 8px 6px;
  color: var(--c-night);
  line-height: 1.3;
}
.bso2-check-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.bso2-check-card:has(.bso2-check-grid__cb:checked) .bso2-check-card__check {
  display: flex;
}
.bso2-check-card--open {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
}
.bso2-check-card--open .bso2-check-card__label {
  padding: 0;
  text-align: left;
  flex-shrink: 0;
}
.bso2-check-card--open .bso2-check-card__open {
  flex: 1;
  margin: 0;
  width: auto;
}
.bso2-check-card__open {
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  border: none;
  border-bottom: 2px solid var(--c-orange);
  background: transparent;
  font-family: var(--font);
  font-size: .9rem;
  outline: none;
  color: var(--c-night);
}

@media (max-width: 500px) {
  .bso2-check-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Verplicht veld markering */
.bso2-verplicht-error {
  position: relative;
}
.bso2-verplicht-error::after {
  content: '⚠️ Kies minimaal één antwoord om verder te gaan';
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: #E24B4A;
  text-align: center;
  margin-top: 10px;
  padding: 8px 16px;
  background: #FFF0F0;
  border-radius: var(--radius);
  border: 2px solid #E24B4A;
}
.bso2-verplicht-error .bso2-vraag__tekst {
  color: #E24B4A;
}

/* Verplicht veld sterretje */
.bso2-verplicht-ster {
  color: var(--c-orange);
  font-weight: 900;
  margin-left: 2px;
}

/* Eyebrow instructietekst onder de grote vraagstitel */
.bso2-vraag__eyebrow {
  font-size: .82rem;
  color: #999;
  text-align: center;
  margin: -8px 0 12px;
  font-style: italic;
  letter-spacing: .01em;
}

/* Eindscherm banner + download */
.bso2-einde__banner {
  background: var(--c-orange);
  border-radius: var(--radius);
  padding: 20px 24px 16px;
  margin-bottom: 20px;
  text-align: center;
}
.bso2-einde__banner .bso2-einde__titel {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  margin-bottom: 12px;
}
.bso2-einde__banner .bso2-einde__badge-row {
  margin-bottom: 0;
}
.bso2-einde__banner .bso2-earned-badge {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.bso2-einde__download {
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.bso2-einde__download-tekst {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-night);
  margin-bottom: 10px;
}
.bso2-btn--download {
  display: inline-block;
  background: var(--c-blue);
  color: #fff !important;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition);
}
.bso2-btn--download:hover {
  background: var(--c-night);
  transform: translateY(-2px);
}

/* Badge teaser vóór versturen */
.bso2-badge-teaser {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border: 2px dashed rgba(255,107,53,.8);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.bso2-badge-teaser__lock {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
  animation: bso2TeaserPulse 2s ease-in-out infinite;
}
@keyframes bso2TeaserPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.bso2-badge-teaser__tekst {
  font-size: .95rem;
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.bso2-badge-teaser__tekst strong {
  color: var(--c-orange);
}