/* Cross-document View Transitions — seamless crossfade van
   /activiteiten/#squash → /activiteiten/boek/?slug=... */
@view-transition { navigation: auto; }

:root {
  --beige: #F5EEEA;   /* achtergrond-vlakken in de flow weer beige (gebruikerswens) */
  --sky: #C7D9E5;
  --white: #FFFFFF;
  --teal: #46677C;  /* palet-B: steel-donker */
  --navy: #2F4157;   /* canon-navy (was #035372 = oud logo-blauw, nu --deep). App-breed gelijkgetrokken met iselmar-v2.css. */
  --ink: #1a242f;
  --muted: rgba(3,83,114,0.65); /* WCAG AA — overgenomen van iselmar-v2.css */
  --line: #d9c9bf;
  --line-soft: #ece1d9;
  --bkw-track: rgba(3,83,114,.22); /* stepper/wizard ongevulde track — neutraal-teal, past bij #F3F0EA */
}
* { box-sizing: border-box; }
/* Pagina-backdrop warm-wit (#F3F0EA), gelijk aan de site-page-bg en de wizard-
   header (.iv-ad-mobhead). Was #FFFFFF, waardoor de safe-area bovenaan wit bleef
   (ook zichtbaar als witte strook achter de boek/reserveer-curtain). */
html, body { margin: 0; padding: 0; background: #F3F0EA; color: var(--ink); font-family: Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
.mono { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── MOBILE BOOKING NAV ─────────────────────────── */
.bk-mob-nav {
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:var(--sp-4) var(--sp-gutter) var(--sp-2);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 200;
}
.bk-mob-back {
  position: absolute;
  left: 14px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}
.bk-mob-back:hover { background: rgba(0,0,0,0.05); }
.bk-mob-nav-logo img { display: block; height: 28px; width: auto; }

/* Mobile booking-dots (zelfde stijl als desktop, kleiner) */
.bk-mob-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding:var(--sp-4) var(--sp-7) var(--sp-4);
  background: var(--beige);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 52px;
  z-index: 199;
}
.bk-mob-steps .bk-desk-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:var(--sp-1);
  position: relative;
  color: var(--muted);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bk-mob-steps .bk-desk-step:last-child { flex: 1; }
.bk-mob-steps .bk-desk-step-lbl { white-space: nowrap; line-height: 1; }
.bk-mob-steps .bk-desk-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  position: relative; z-index: 1;
  transition: background 0.2s, box-shadow 0.2s;
}
.bk-mob-steps .bk-desk-step::after {
  content: '';
  position: absolute;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);
  top: 3.5px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.bk-mob-steps .bk-desk-step:last-child::after { display: none; }
.bk-mob-steps .bk-desk-step.is-active .bk-desk-step-dot {
  background: var(--navy);
  box-shadow: 0 0 0 3px rgba(47, 65, 87, 0.18);
}
.bk-mob-steps .bk-desk-step.is-done .bk-desk-step-dot { background: var(--navy); }
.bk-mob-steps .bk-desk-step.is-done::after,
.bk-mob-steps .bk-desk-step.is-active::after { background: var(--navy); }
.bk-mob-steps .bk-desk-step.is-done .bk-desk-step-lbl,
.bk-mob-steps .bk-desk-step.is-active .bk-desk-step-lbl { color: var(--navy); }

/* Body + shell op booking-pagina (mobiel) in warm-wit #F3F0EA, gelijk aan de
   wizard-header (.iv-ad-mobhead) i.p.v. het iets donkerdere --beige #F5EEEA. */
@media (max-width: 1099px) {
  body[data-page="beleven"] { background: #F3F0EA; }
  /* padding-bottom + safe-area: laatste content-blok nooit achter de zwevende
     Verder-balk (Nick 13 jul, overlap-foto). Was 96px = te weinig met safe-area. */
  .bk-mob-shell { background: #F3F0EA; padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
}
.bk-mob-nav-btn {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}

/* ── TAB PROGRESS ───────────────────────────────── */
.bk-tabs {
  display: flex;
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 52px;
  z-index: 100;
}
.bk-tab {
  flex: 1;
  padding:var(--sp-4) 2px var(--sp-3);
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
  background: none;
  cursor: default;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:var(--sp-1);
}
.bk-tab-lbl { line-height: 1; }
.bk-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  position: relative;
  z-index: 1;
  transition: background 0.15s;
}
/* Connecting line: from dot center of one tab to dot center of next */
.bk-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  right: -50%;
  bottom: 15px; /* aligns with dot center (dot is 8px tall, padding-bottom 12px) */
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.bk-tab:last-child::after { display: none; }
.bk-tab.is-active { color: var(--navy); }
.bk-tab.is-active .bk-tab-dot { background: var(--navy); box-shadow: 0 0 0 3px rgba(47,65,87,0.15); }
.bk-tab.is-done { color: var(--teal); cursor: pointer; }
.bk-tab.is-done .bk-tab-dot { background: var(--teal); }
.bk-tab.is-done::after { background: var(--teal); }
.bk-tab:not(.is-done):not(.is-active) { cursor: default; }

/* ── MOBILE SHELL ───────────────────────────────── */
/* Bodem-ruimte onder de content + safe-area zodat het laatste blok (bv. de
   'Met 9 spelers…'-aanbeveling) nooit achter de zwevende Verder-balk schuift.
   Was 96px = te weinig op iPhones waar de safe-area de balk hoger maakt
   (Nick 13 jul, overlap-foto). */
.bk-mob-shell { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }

/* ── STEP 1: ACTIVITY DETAIL ────────────────────── */
/* ── Step 1 — popup-stijl layout ──────────────────────────── */
.bk-s1-pop { background: #fff; }
.bk-s1-pop-photo {
  height: 260px;
  background-size: cover;
  background-position: center;
}
.bk-s1-pop-body { padding:var(--sp-6) var(--sp-6) var(--sp-7); }
.bk-s1-pop-cat {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom:var(--sp-2);
}
.bk-s1-pop-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin:0 0 var(--sp-3);
  line-height: 1.1;
}
.bk-s1-pop-desc {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
  margin:0 0 var(--sp-5);
}
.bk-s1-pop-specs { border-top: 1px solid var(--line-soft); }
.bk-s1-pop-spec {
  display: flex;
  justify-content: space-between;
  padding:var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.bk-s1-pop-spec .k {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.bk-s1-pop-spec .v {
  font-family: var(--ff-display);
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

.bk-s1-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.bk-s1-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.bk-s1-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.60) 100%);
  padding:var(--sp-4) var(--sp-gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
}
.bk-s1-hero-badge {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom:var(--sp-1);
}
.bk-s1-hero-meta {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.80;
}
.bk-s1-body { padding:var(--sp-gutter) var(--sp-gutter) 0; }
.bk-s1-hed {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin:0 0 var(--sp-4);
}
.bk-s1-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bk-s1-price {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.bk-s1-avail {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: right;
  line-height: 1.5;
}
.bk-s1-per {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top:var(--sp-1);
}
.bk-s1-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-top:var(--sp-4);
}

/* WAT U VOORAF WEET */
.bk-spec-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin:var(--sp-5) 0 var(--sp-2);
}
.bk-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.bk-spec-row:last-child { border-bottom: none; }
.bk-spec-key { color: var(--muted); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; }
.bk-spec-val { color: var(--navy); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 700; }

/* OF LIEVER IETS ANDERS */
.bk-related-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin:var(--sp-5) var(--sp-gutter) var(--sp-3);
}
.bk-related-strip {
  display: flex;
  gap:var(--sp-2);
  overflow-x: auto;
  padding:0 var(--sp-gutter) var(--sp-3);
  -webkit-overflow-scrolling: touch;
}
.bk-related-card {
  flex: 0 0 110px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  text-decoration: none;
}
.bk-related-card .rph {
  height: 70px;
  background-size: cover;
  background-position: center;
}
.bk-related-card .rinfo { padding:var(--sp-2); }
.bk-related-card .rcat {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-related-card .rname {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--navy);
  margin-top: 2px;
}

/* ── STEP 2: TIME PICKER ────────────────────────── */
.bk-s2-head { padding:var(--sp-4) var(--sp-gutter) 0; }
.bk-s2-crumb {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.bk-s2-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin:var(--sp-1) 0 0;
  letter-spacing: -0.02em;
}
.bk-section-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding:var(--sp-4) var(--sp-gutter) var(--sp-2);
}

/* Date strip */
.bk-date-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.bk-date-strip .bk-date-cell {
  flex: 1;
  min-width: 0;
  border-left-width: 0;
}
.bk-date-strip .bk-date-cell:first-child { border-left-width: 1px; }
.bk-date-cell {
  min-width: 50px;
  padding:var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bk-date-cell:hover:not(.is-active) { border-color: var(--line); }
.bk-date-cell .dow { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.bk-date-cell .dnum { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: var(--navy); margin-top: 2px; line-height: 1; }
.bk-date-cell .dmon { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 8px; color: var(--muted); margin-top: 2px; letter-spacing: 0.1em; text-transform: uppercase; }
.bk-date-cell.is-active { background: var(--navy); border-color: var(--navy); }
.bk-date-cell.is-active .dow, .bk-date-cell.is-active .dmon { color: var(--sky); }
.bk-date-cell.is-active .dnum { color: var(--white); }

/* Baan tiles */
.bk-baan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--sp-2);
  padding:0 var(--sp-gutter);
}
.bk-baan-tile {
  padding:var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bk-baan-tile:hover:not(.is-active) { border-color: var(--line); }
.bk-baan-tile.is-active { background: var(--navy); border-color: var(--navy); }
.bk-baan-tile.is-active .bn { color: var(--white); }
.bk-baan-tile.is-active .bm { color: var(--white); opacity: 0.7; }
.bk-baan-tile .bn { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); }
.bk-baan-tile .bm { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top:var(--sp-1); }

/* Slot groups */
.bk-slot-grp { padding:0 var(--sp-gutter); margin-top:var(--sp-4); }
.bk-slot-grp-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom:var(--sp-2);
}
.bk-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--sp-2); }
.bk-slot {
  padding:var(--sp-3) var(--sp-1);
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s;
}
.bk-slot:hover:not(.is-selected):not(.is-unavail) { border-color: var(--line); }
.bk-slot.is-selected { background: var(--navy); color: var(--white); border-color: var(--navy); }
.bk-slot.is-unavail { text-decoration: line-through; opacity: 0.35; cursor: not-allowed; pointer-events: none; }
/* "Onze suggestie"-state: het slot dat vanuit de Onze suggestie-card op
   de detail-page is pre-gefilled. Krijgt terracotta border + badge
   bovenaan. Cialdini Consistency met de RESERVEER-pill kleur. */
.bk-slot.is-suggested,
.bk-mini-slot.is-suggested {
  position: relative;
  /* Subtiele terracotta tint + 1px border — variant B: fill compenseert
     de dunnere lijn zonder signaal-sterkte te verliezen. */
  background: rgba(70,103,124,0.15);
  color: var(--navy);
  font-weight: 700;
  border: 1px solid #46677C !important;
}
/* Op mini-slots (adventure-golf 10:00/10:10/etc): verberg de TIP-badge
   omdat de cell te krap is voor badge + tijd-text. De visuele border
   + ring + tint signaleren al duidelijk "geselecteerd". */
.bk-mini-slot .bk-slot-badge { display: none; }
.bk-slot-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #46677C;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:var(--sp-1) var(--sp-2);
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
}

/* Slot legend */
.bk-legend {
  display: flex;
  gap:var(--sp-gap);
  padding:var(--sp-3) var(--sp-gutter) 0;
  flex-wrap: wrap;
}
.bk-legend-item {
  display: flex;
  align-items: center;
  gap:var(--sp-1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-leg-box {
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
}
.bk-leg-box.sel { background: var(--navy); border-color: var(--navy); }
.bk-leg-box.tight { background: var(--beige); border-color: var(--line); }

/* Logeert u bij ons */
.bk-hotel-box {
  margin:var(--sp-4) var(--sp-gutter) 0;
  background: var(--sky);
  padding:var(--sp-3) var(--sp-4);
}
.bk-hotel-box-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom:var(--sp-1);
}
.bk-hotel-box p {
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── STEP 3: GEGEVENS ───────────────────────────── */
.bk-s3-head { padding:var(--sp-4) var(--sp-gutter) 0; }
.bk-s3-crumb {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-s3-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin:var(--sp-1) 0 0;
  letter-spacing: -0.02em;
}
/* Summary card */
.bk-s3-card {
  margin:var(--sp-4) var(--sp-gutter) 0;
  background: var(--sky);
  padding:var(--sp-4);
  display: flex;
  gap:var(--sp-gap);
  align-items: flex-start;
}
.bk-s3-icon {
  width: 36px;
  height: 36px;
  background: var(--teal);
  color: var(--white);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bk-s3-card .cn { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 15px; color: var(--navy); }
.bk-s3-card .cw { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; margin-top:var(--sp-1); }
/* Details table */
.bk-s3-details { margin:var(--sp-3) var(--sp-gutter) 0; background: var(--white); border: 1px solid var(--line-soft); }
.bk-s3-det-row {
  display: flex;
  justify-content: space-between;
  padding:var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.bk-s3-det-row:last-child { border-bottom: none; }
.bk-s3-det-lbl { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--muted); }
.bk-s3-det-val { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--navy); font-weight: 700; }
.bk-s3-det-val.total { font-size: 15px; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
/* Form */
.bk-form { padding:var(--sp-4) var(--sp-gutter) 0; }
.bk-field { margin-bottom:var(--sp-3); }
.bk-field label {
  display: block;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom:var(--sp-1);
}
.bk-field input {
  width: 100%;
  padding:var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-soft);
  background: var(--white);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* 16px — voorkomt iOS Safari auto-zoom on focus */
  font-size: 16px;
  color: var(--navy);
  appearance: none;
  -webkit-appearance: none;
}
/* Mobile: smallere invulvelden (halve breedte) */
@media (max-width: 1099px) {
  .bk-form-narrow .bk-field input { width: 50%; max-width: 240px; }
}
.bk-field-err {
  margin-top:var(--sp-1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  color: #c0392b;
}
/* Account-aanmaak checkbox + wachtwoord (mobiel, stap 3) */
.bk-s3-account {
  margin-top:var(--sp-4);
  padding:var(--sp-4);
  background: var(--beige);
  border: 1px solid var(--line-soft);
}
.bk-s3-account-check {
  display: flex;
  align-items: flex-start;
  gap:var(--sp-3);
  cursor: pointer;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.4;
}
/* Account/marketing-checkbox: zelfde custom stijl als de materiaal-checkbox
   (afgeronde witte box, accent-vulling met wit vinkje) voor consistentie. */
.bk-s3-account-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(3,83,114,0.25);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.bk-s3-account-check input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -62%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.12s;
}
.bk-s3-account-check input[type="checkbox"]:checked {
  background: var(--accent, #46677C);
  border-color: var(--accent, #46677C);
}
.bk-s3-account-check input[type="checkbox"]:checked::after { opacity: 1; }
.bk-s3-account-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #46677C);
  outline-offset: 2px;
}
.bk-s3-account .bk-field-wachtwoord {
  margin-top:var(--sp-3);
  margin-bottom: 0;
}

/* Materiaal-vraag (mobiel) */
/* Materiaal-checkbox: booking-pattern (Booking.com / Apple Pay-checkout).
   Add-on voor DEZE specifieke boeking — geen persistente setting. Checkbox
   in plaats van toggle (toggle = settings/profiel, checkbox = form-keuze).
   Default AAN, want het materiaal ligt gratis klaar — gast vinkt uit als
   hij eigen materiaal meeneemt. */
.bk-s3-mat {
  margin:var(--sp-3) var(--sp-gutter) 0;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding:var(--sp-3) var(--sp-4);
}
.bk-s3-mat-row {
  display: flex;
  align-items: center;
  gap:var(--sp-gap);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.bk-s3-mat-text { flex: 1; min-width: 0; }
.bk-s3-mat-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.bk-s3-mat-sub {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted, rgba(3,83,114,0.62));
  margin-top: 2px;
  line-height: 1.4;
}
/* Native checkbox visueel verbergen, maar tap-bereikbaar houden via overlay. */
.bk-s3-mat-check {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 0;
  z-index: 1;
}
/* Custom vinkbox: vierkant met afgeronde hoeken, terracotta wanneer aan,
   met SVG-vinkje. Booking.com-stijl. */
.bk-s3-mat-check-visual {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(3,83,114,0.25);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.bk-s3-mat-check-visual::after {
  content: '';
  width: 12px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 0.12s;
}
.bk-s3-mat-check:checked + .bk-s3-mat-check-visual {
  background: var(--accent, #46677C);
  border-color: var(--accent, #46677C);
}
.bk-s3-mat-check:checked + .bk-s3-mat-check-visual::after { opacity: 1; }
.bk-s3-mat-check:focus-visible + .bk-s3-mat-check-visual {
  outline: 2px solid var(--accent, #46677C);
  outline-offset: 2px;
}

/* Trust-bar onder het form (Veilig betalen / Bevestiging / Annuleren).
   NN Group 2021: prominent trust-signals v\u00f3\u00f3r de Reservering bevestigen-knop
   = +6% conversion. Subtle, 3 icons in een rij. */
.bk-s3-trust {
  margin:var(--sp-gutter) var(--sp-gutter) 0;
  padding:var(--sp-4);
  background: var(--beige2, rgba(63,163,114,0.04));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap:var(--sp-2);
}
.bk-s3-trust-item {
  display: flex;
  align-items: center;
  gap:var(--sp-2);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink70, #4a5d6e);
  line-height: 1.3;
}
.bk-s3-trust-item svg {
  flex-shrink: 0;
  color: var(--navy);
}
@media (min-width: 720px) {
  .bk-s3-trust { flex-direction: row; gap:var(--sp-gutter); }
  .bk-s3-trust-item { font-size: 13px; }
}

/* ── Stap 3 (gegevens) — mockup-stijl ──────────────────────────
   Welcome-card (logged-in gast), section-headers (Lekton mono
   eyebrow), readonly field-rows met label links + waarde rechts,
   en segmented betaalmethode tiles. Vervangt de oude "Je gegevens"
   form-only view met een rustiger Apple-stijl info-architecture. */
/* Welkom-card mockup-stijl: dashed terracotta border (was solid groen).
   Voorstel-apple-booking-volledig.html stap 3 — toggle-card pattern.
   Geeft een "ja, herkennings"-cue zonder afgesloten card-vorm. */
.bk-s3-welk-card {
  display: flex;
  align-items: center;
  gap:var(--sp-gap);
  background: var(--white);
  border: 1.5px dashed var(--accent, #46677C);
  border-radius: 12px;
  padding:var(--sp-4) var(--sp-4);
  margin-bottom:var(--sp-5);
}
.bk-s3-welk-check {
  width: 28px; height: 28px;
  flex-shrink: 0;
  background: var(--accent, #46677C);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 15px;
}
.bk-s3-welk-text { min-width: 0; }
.bk-s3-welk-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  line-height: 1.2;
}
.bk-s3-welk-sub {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* Section-header in stap 3 — Lekton mono eyebrow boven elke sub-sectie */
.bk-s3-sec-h {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  margin:var(--sp-6) 0 var(--sp-3);
}
.bk-s3-sec-h:first-of-type { margin-top: 0; }

/* Mockup-stijl field-card (voorstel-apple-booking-volledig.html stap 3):
   verticale stack met Lekton-label boven + grote waarde/input eronder.
   Apple Wallet boarding-card look. Witte achtergrond, ronde hoeken,
   subtiele border. Logged-in: readonly value. Niet-logged-in: input
   zonder eigen border (omdat de card al de border verzorgt). */
.bk-s3-field {
  background: var(--white, #fff);
  border: 1px solid var(--line-soft, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  /* Compactere padding voor rustigere, professionele uitstraling
     (gebruikerswens mei 2026 — invulvelden waren te groot). */
  padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-2);
}
.bk-s3-field-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  margin-bottom:var(--sp-1);
  line-height: 1.2;
}
.bk-s3-field-val {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.bk-s3-field-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* 16px is iOS Safari's no-zoom-on-focus drempel — lager dan 16px
     zoomt 'ie automatisch in op focus. 15px voelt visueel beter qua
     compactheid maar veroorzaakt de zoom-bug. 16px is een industry-
     standaard compromis (Stripe/Booking gebruiken hetzelfde). */
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.005em;
  outline: none;
}
.bk-s3-field-input::placeholder {
  color: var(--muted, #9aa3ad);
  font-weight: 500;
}
/* Geen oranje terracotta-outline op input zelf (gebruikerswens
   mei 2026 — "professionele booking flow"). Focus-state wordt
   getoond via de wrapper-card .bk-s3-field:focus-within met een
   subtiele navy box-shadow + border-color change. */
.bk-s3-field-input:focus,
.bk-s3-field-input:focus-visible { outline: none; box-shadow: none; }
/* Focus-state op de card subtiel met box-shadow ipv border-color change
   (gebruiker-feedback: oranje focus border was te opdringerig). */
.bk-s3-field:focus-within {
  border-color: rgba(47, 65, 87, 0.25);
  box-shadow: 0 0 0 3px rgba(47, 65, 87, 0.06);
}

/* Veiligheids-badge boven de bottom-CTA (stap 3 specifiek).
   Trust signal direct voor de Betaal-actie. Subtle grijs + lock-icon. */
.bk-s3-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:var(--sp-2);
  margin:var(--sp-gutter) 0 var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted, #6B7280);
  text-align: center;
}
.bk-s3-secure svg {
  color: var(--success, #3FA372);
}

/* 2-koloms field-row voor Voornaam + Achternaam (mockup-stijl).
   Cards binnen het row krijgen geen eigen margin-bottom (parent regelt). */
.bk-s3-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.bk-s3-field-row .bk-s3-field {
  margin-bottom: 0;
}

/* Readonly field-row (logged-in gast) — label links, waarde rechts */
.bk-s3-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:var(--sp-gap);
  padding:var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line-soft, rgba(0,0,0,0.08));
  border-radius: 10px;
  margin-bottom:var(--sp-2);
}
.bk-s3-row-lbl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  flex-shrink: 0;
}
.bk-s3-row-val {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-align: right;
}
.bk-s3-row-input {
  flex: 1;
  min-width: 0;
  max-width: 60%;
  border: 0;
  background: transparent;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-align: right;
  padding: 0;
  outline: none;
}
.bk-s3-row-input::placeholder { color: var(--muted, #9aa3ad); font-weight: 400; }

/* Betaalmethode-tegels — Apple HIG segmented control. Mockup-stijl:
   3 equal-weight tegels, iDEAL standaard actief. Pure pre-frame voor de
   gast over wat ze gaan zien in de Mollie-checkout. */
.bk-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.bk-pay-tile {
  background: var(--white);
  border: 1.5px solid var(--line-soft, rgba(0,0,0,0.08));
  border-radius: 10px;
  padding:var(--sp-3) var(--sp-2);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bk-pay-tile:hover:not(.is-active) {
  border-color: var(--navy);
}
.bk-pay-tile:active { transform: scale(0.97); }
/* Active-state identiek aan baan-tile + dagdeel-tab (visuele consistentie
   tussen segmented controls in de booking-flow — gebruikerswens mei 2026).
   Witte achtergrond + dikkere navy border. Padding gecompenseerd voor de
   0.5px extra border-width zodat tile-grootte gelijk blijft. */
.bk-pay-tile.is-active {
  border-color: var(--navy);
  background: var(--white);
  border-width: 2px;
  padding: 11.5px 7.5px;
}
.bk-pay-tile-name {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
}
.bk-pay-tile:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.bk-field input:focus { outline: 2px solid var(--terracotta, #46677C); outline-offset: -1px; border-color: var(--terracotta, #46677C); }
/* Hotel guest checkbox */
.bk-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line-soft);
  margin:var(--sp-3) var(--sp-gutter) 0;
  cursor: pointer;
}
.bk-checkbox-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.bk-chk-lbl { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--navy); font-weight: 600; }
.bk-chk-sub { font-size: 12px; color: var(--muted); font-family: 'Inter', system-ui, -apple-system, sans-serif; margin-top: 2px; }
/* Included notice */
.bk-included-notice {
  margin:var(--sp-3) var(--sp-gutter) 0;
  background: #e4f0e4;
  border: 1px solid #a8cca8;
  padding:var(--sp-3) var(--sp-4);
}
.bk-inc-hed {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a6a2a;
  font-weight: 700;
  margin-bottom:var(--sp-1);
}
.bk-included-notice p { font-size: 13px; color: #2a6a2a; margin: 0; line-height: 1.5; }

/* ── CTA BAR ──────────────────────────────────────
   Visueel uitgelijnd met .iv-act-detail-stickybar (activiteiten-grid):
   navy bg + terracotta accent-top, zodat de gast de bar als één doorlopend
   element ervaart van activiteit-detail → boekflow. */
/* Inputs in booking-flow: GEEN outline (gebruikerswens mei 2026 —
   "professionele booking flow"). Focus-state wordt getoond via de
   wrapper-card (.bk-s3-field:focus-within met navy box-shadow). */
.bk-mob-shell input:focus,
.bk-mob-shell input:focus-visible,
.bk-mob-shell textarea:focus,
.bk-mob-shell textarea:focus-visible,
.bk-mob-shell select:focus,
.bk-mob-shell select:focus-visible,
#dkPicker input:focus,
#dkPicker input:focus-visible,
#dkPicker textarea:focus,
#dkPicker textarea:focus-visible,
#dkPicker select:focus,
#dkPicker select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Globale focus-state — Apple HIG: predictable interaction ──
   Eén kleur, één dikte, één offset op alle interactieve elementen
   binnen de booking-flow. Vermijdt browser-default-outlines.
   Inputs zijn bewust uitgesloten (zie regel hierboven). */
.bk-cta-bar button:focus-visible,
.bk-mob-shell button:focus-visible,
.bk-mob-shell a:focus-visible,
.bk-mob-shell [role="button"]:focus-visible,
#dkPicker button:focus-visible,
#dkPicker a:focus-visible,
#dkPicker [role="button"]:focus-visible,
#dkSummary button:focus-visible,
.bk-bv-btn-primary:focus-visible,
.bk-bv-btn-secondary:focus-visible,
.bk-bv-btn-link:focus-visible,
.bk-quickpick-cta:focus-visible {
  /* CLAUDE.md a11y: focus-visible = terracotta (hoog contrast, ook op navy). */
  outline: 2px solid var(--terracotta, #46677C);
  outline-offset: 2px;
  border-radius: inherit;
}

.bk-cta-bar {
  position: fixed;
  /* Floating navy capsule matchend met detail-page sticky-bar.
     Margin van 12px aan elke kant + safe-area, border-radius 100px.
     Cialdini Consistency: gast herkent dezelfde primary-action UI
     uit de detail-page. */
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  background: #F5EEEA;
  color: #035372;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(20,34,51,0.18), 0 2px 6px rgba(20,34,51,0.10);
  display: flex;
  align-items: center;
  gap:var(--sp-gap);
  z-index: 200;
}
/* Foto-thumbnail in de mobile CTA-bar — visueel anker (Apple HIG: depth +
   visual recognition). Gast ziet altijd welke activity gereserveerd wordt. */
.bk-cta-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.10);
  flex-shrink: 0;
  margin-left: -8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
}
.bk-cta-left { flex: 1; min-width: 0; }
.bk-cta-sub {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7,83,115,0.72);
  line-height: 1.4;
  margin-bottom: 2px;
}
.bk-cta-price {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #035372;
  line-height: 1.1;
}
.bk-cta-btn {
  background: #577C8E; /* primary CTA = steel — één actie-kleur door de hele funnel (11 jul) */
  color: var(--white);
  border: none;
  height: 44px;
  padding:0 var(--sp-6);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  /* Pill-vorm matchend met RESERVEER en KIES TIJDSLOT-knoppen. */
  border-radius: 100px;
  transition: filter 0.15s, transform 0.12s;
}
.bk-cta-btn:disabled { opacity: 0.45; cursor: not-allowed; background: rgba(87,124,142,0.55); }
.bk-cta-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.bk-cta-btn:active:not(:disabled) { transform: scale(0.97); } /* press-feedback (motion-audit #1) */

/* Loading / error */
.bk-loading {
  padding:var(--sp-12) var(--sp-5); text-align: center; color: var(--muted); font-size: 14px;
  /* Onzichtbaar tijdens snelle initial paint zodat er geen "flash alsof er
     iets laadt" te zien is bij de view-transition. Verschijnt pas na 350ms
     als JS de content nog niet heeft gerenderd. */
  opacity: 0;
  animation: bkLoadingShow 0s linear 350ms forwards;
}
@keyframes bkLoadingShow { to { opacity: 1; } }
.bk-spin {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--line-soft);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: bkspin 0.7s linear infinite;
  margin-bottom:var(--sp-3);
}
@keyframes bkspin { to { transform: rotate(360deg); } }
.bk-err {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding:var(--sp-3) var(--sp-4);
  font-size: 13px;
  margin:var(--sp-3) var(--sp-gutter);
}

/* ── BOOKING LAYOUT (alle viewports) ──────────────────────────── */
.bk-tabs, .bk-mob-shell, .bk-cta-bar { display: none !important; }
.iv-mhead { display: none !important; }
.bk-desk-only { display: block; }
/* Wizard-modus (bv. bowling): toon de mobiele step-shell + CTA-bar en verberg
   de desktop-3-koloms-layout. Geschakeld via body.bk-wizard (flow.js showMobile). */
body.bk-wizard .bk-mob-shell { display: block !important; }
body.bk-wizard .bk-cta-bar { display: flex !important; }
body.bk-wizard .bk-desk-only { display: none !important; }
/* Desktop: verberg de mobiele top-nav + stepper (anders dubbele dots + .iv-dhead afgedekt) */
@media (min-width: 1100px) {
  .bk-mob-nav, .bk-mob-steps { display: none !important; }
}
@media (max-width: 1099px) {
  /* Mobile: hide desktop top-padding (we hebben onze eigen mob-nav) */
  .bk-desk-only { padding-top: 0 !important; }
  /* Mobile: hide desktop dots (we tonen .bk-mob-steps in plaats van) */
  .bk-desk-only .bk-desk-steps { display: none !important; }
  /* Mobile: 1 kolom — hide left activities sidebar, summary onderaan sticky */
  .bk-desk-grid { display: block !important; min-height: 0 !important; }
  .bk-act-col { display: none !important; }
  /* Mobile bottom: een grote sticky card met summary + trust + CTA
     (mockup-stijl voorstel-apple-booking-volledig.html stap 2). Hoogte
     dynamisch — auto i.p.v. vaste 64px. */
  .bk-summary-col {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    top: auto !important;
    height: auto !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: content-box !important;
    background: var(--white) !important;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(20,34,51,0.08);
    z-index: 50;
    overflow: visible !important;
    display: block !important;
  }
  /* Mob-bottom IS het sticky element op mobile — desktop summary card
     hidden zodat geen duplicaat. */
  .bk-summary-col .bk-sum-col-hed,
  .bk-summary-col .bk-sum-card,
  .bk-summary-col .bk-sum-btn,
  .bk-summary-col .bk-sum-mollie { display: none !important; }
  .bk-summary-col .bk-mob-bottom { display: block; }
  .bk-picker-col { padding:var(--sp-4) var(--sp-4) 130px !important; border-right: none !important; }
  .bk-desk-intro { display: none; }
  .bk-desk-steps { padding:var(--sp-4) var(--sp-gutter) var(--sp-4); }
  /* Dagdeel tabs op mobiel: laat shrinken zodat alle 3 passen, alleen naam centreren */
  .bk-dagdeel-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:var(--sp-2) !important; }
  .bk-dagdeel-tab { padding:var(--sp-3) var(--sp-2) !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; gap: 0 !important; }
  .bk-dagdeel-tab-naam { font-size: 13px !important; }
  .bk-dagdeel-tab-meta { display: none !important; }
  /* Tijdlijn-grid past nu volledig in viewport via compactere mini-slots
     + smallere tijd-kolom. Geen horizontal scroll meer (user-feedback:
     hele grid moet in 1 oogopslag zichtbaar). */
  .bk-tijdlijn { overflow-x: hidden !important; }
  .bk-tijdlijn-grid { min-width: 0; }
  /* Baan-tiles op mobiel: max 2 kolommen zodat fiets/sloep namen passen */
  .bk-baan-tiles { grid-template-columns: 1fr 1fr !important; }
  /* Datum-knop op mobiel: label links, waarde rechts (rij i.p.v. kolom) */
  .bk-datum-btn { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding:var(--sp-4) var(--sp-gutter) !important; }
  .bk-datum-btn-val { margin-left: auto; }
  /* Date picker animatie */
  .bk-datum-pop { animation: bkDatumPopFade 0.18s ease-out; }
  .bk-datum-pop-inner { animation: bkDatumPopSlide 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
  /* Datum-knop tap feedback */
  .bk-datum-btn { transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease !important; }
  .bk-datum-btn:active { transform: scale(0.98); background: var(--beige) !important; }

  /* ── Mob-bottom (mockup-stijl summary onderaan op mobile) ──────
     Vervangt de oude 64px CTA-only sticky bottom. Toont:
       Jouw reservering eyebrow + details + prijs rechts
       ✓ Activity-trust  ✓ iDEAL  ✓ Annuleren tot 24u
       [Reserveer →] CTA
     Picker-col body krijgt extra padding-bottom (~190px) zodat slot-
     grid niet achter deze sticky bar verdwijnt. */
  .bk-picker-col { padding-bottom: 200px !important; }
}
.bk-mob-bottom {
  display: none;
  padding:var(--sp-4) var(--sp-4) var(--sp-4);
}
@media (max-width: 1099px) {
  .bk-mob-bottom { display: block; }
}
.bk-mob-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap:var(--sp-gap);
  margin-bottom:var(--sp-3);
}
.bk-mob-bottom-eye {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(7, 83, 115, 0.55);
  margin-bottom:var(--sp-1);
}
.bk-mob-bottom-detail {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.bk-mob-bottom-price {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bk-mob-bottom-trust {
  display: flex;
  gap:var(--sp-2);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  /* Trust-bar staat ONDER de CTA-knop (gebruikerswens mei 2026):
     margin-top voor scheiding, geen margin-bottom meer. */
  margin-top:var(--sp-3);
  margin-bottom: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted, #6B7280);
}
/* Payment-methods + secure-row helpers — niet meer gerenderd (gebruiker
   kiest terug voor vinkjes-stijl, mei 2026). CSS-blokken zijn verwijderd
   om dode CSS te voorkomen. */
.bk-mob-bottom-trust span {
  display: inline-flex;
  align-items: center;
  gap:var(--sp-1);
  white-space: nowrap;
}
.bk-mob-check {
  color: var(--success, #3FA372);
  font-weight: 700;
}
.bk-mob-bottom-cta {
  width: 100%;
  background: var(--accent, #46677C);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding:var(--sp-3) var(--sp-4);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.bk-mob-bottom-cta:hover:not(:disabled) { filter: brightness(1.07); }
.bk-mob-bottom-cta:active:not(:disabled) { transform: translateY(1px); }
.bk-mob-bottom-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@keyframes bkDatumPopFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bkDatumPopSlide {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bk-datum-pop.is-closing { animation: bkDatumPopFadeOut 0.16s cubic-bezier(.22,1,.36,1) forwards; }
.bk-datum-pop.is-closing .bk-datum-pop-inner { animation: bkDatumPopSlideOut 0.16s ease-in forwards; }
@keyframes bkDatumPopFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes bkDatumPopSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* Desktop styles — apply at all widths, mobile overrides hierboven */
@media (min-width: 0) {
  /* Account for fixed iv-dhead (60px) op desktop */
  .bk-desk-only { padding-top: 60px; }

  /* Intro */
  .bk-desk-intro {
    padding: 96px 96px 72px;
    border-bottom: 1px solid var(--line);
    background: var(--beige);
  }
  .bk-desk-intro-inner { max-width: 640px; }

  /* Inline checkout (desktop) */
  .bk-checkout-merchant {
    display: flex; align-items: center; gap:var(--sp-gap);
    background: var(--white); border: 1px solid var(--line);
    padding:var(--sp-4) var(--sp-4); margin-bottom:var(--sp-4);
  }
  .bk-checkout-merchant-info { flex: 1; }
  .bk-checkout-merchant-name { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 15px; color: var(--navy); }
  .bk-checkout-merchant-desc { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--muted); margin-top:var(--sp-1); }
  .bk-checkout-merchant-price { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 22px; color: var(--navy); }
  .bk-checkout-card { background: var(--white); border: 1px solid var(--line); padding:var(--sp-gutter); }
  .bk-checkout-card-title { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: var(--navy); margin:0 0 var(--sp-3); }
  .bk-checkout-methods { display: flex; flex-direction: column; gap:var(--sp-2); }
  .bk-checkout-method { display: flex; align-items: center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3); border: 1px solid var(--line-soft); cursor: pointer; background: var(--white); transition: background 0.15s, border-color 0.15s; }
  .bk-checkout-method:hover { background: var(--beige); }
  .bk-checkout-method.on { background: var(--sky); border-color: var(--teal); }
  .bk-checkout-method input { accent-color: var(--teal); }
  .bk-checkout-method .ico { width: 36px; height: 26px; background: linear-gradient(135deg, #0d4ea4 0%, #ee2768 100%); display: inline-flex; align-items: center; justify-content: center; color: white; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 10px; }
  .bk-checkout-banks { margin-top:var(--sp-3); }
  .bk-checkout-banks-lbl { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom:var(--sp-2); }
  .bk-checkout-banks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap:var(--sp-2); }
  .bk-checkout-bank { display: flex; align-items: center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border: 1px solid var(--line-soft); cursor: pointer; background: var(--white); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 13px; color: var(--navy); }
  .bk-checkout-bank:hover { background: var(--beige); }
  .bk-checkout-bank.on { background: var(--sky); border-color: var(--teal); }
  .bk-checkout-bank .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
  .bk-checkout-bank.on .dot { background: var(--teal); }

  /* Inline bevestigd */
  .bk-bevestigd-inline { text-align: center; padding-top:var(--sp-5); }
  .bk-bv-check { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--navy); display: flex; align-items: center; justify-content: center; margin:0 auto var(--sp-4); font-size: 24px; color: var(--navy); }
  .bk-bv-badge { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom:var(--sp-2); }
  .bk-bv-name { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 28px; font-weight: 700; color: var(--navy); margin:0 0 var(--sp-2); letter-spacing: -0.02em; }
  /* Sub-tekst onder "Tot dan, X!" — mockup-stijl: "We sturen een mail
     met je QR-code". Geeft direct context wat er volgt zonder dat gast
     hoeft te zoeken. */
  .bk-bv-mailsub { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--muted); margin:0 auto var(--sp-6); max-width: 320px; }
  .bk-bv-qr-card { background: var(--white); border: 1px solid var(--line); padding:var(--sp-5); text-align: center; max-width: 320px; margin: 0 auto; }
  .bk-bv-qr-lbl { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom:var(--sp-3); }
  .bk-bv-qr-box { display: flex; align-items: center; justify-content: center; min-height: 180px; }
  .bk-bv-qr-box svg, .bk-bv-qr-box img { max-width: 180px; height: auto; }
  .bk-bv-act-name { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 15px; color: var(--navy); margin-top:var(--sp-4); }
  .bk-bv-act-when { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top:var(--sp-1); }
  .bk-bv-ref { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 12px; color: var(--navy); letter-spacing: 0.08em; margin-top:var(--sp-3); }
  .bk-bv-confirm { background: #e4f0e4; border: 1px solid #a8cca8; color: #2a6a2a; padding:var(--sp-3) var(--sp-4); margin:var(--sp-4) auto 0; max-width: 480px; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 12px; text-align: center; border-radius: 10px; }
  /* Apple-stijl post-bevestiging acties (Wallet, agenda, cancel). Geen
     5-sec auto-redirect meer — gast bepaalt zelf wanneer ze weggaat. */
  .bk-bv-actions { margin:var(--sp-gutter) auto 0; max-width: 480px; display: flex; flex-direction: column; gap:var(--sp-2); padding:0 var(--sp-4); }
  .bk-bv-btn-primary {
    width: 100%;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding:var(--sp-4) var(--sp-4);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.005em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:var(--sp-2);
    transition: background 0.15s, transform 0.12s;
  }
  .bk-bv-btn-primary:hover:not(:disabled) { background: #1f2d3d; }
  .bk-bv-btn-primary:active:not(:disabled) { transform: translateY(1px); }
  .bk-bv-btn-primary:disabled { opacity: 0.55; cursor: default; }
  .bk-bv-btn-secondary {
    width: 100%;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding:var(--sp-3) var(--sp-4);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:var(--sp-2);
    transition: border-color 0.15s, background 0.15s;
  }
  .bk-bv-btn-secondary:hover { background: var(--beige); border-color: var(--navy); }
  .bk-bv-btn-link {
    background: none;
    border: none;
    color: var(--muted);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding:var(--sp-3);
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top:var(--sp-1);
  }
  .bk-bv-btn-link:hover { color: var(--navy); }

  /* Desktop voortgangs-stappen onder top-nav — gecentreerd op de pagina */
  .bk-desk-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding:var(--sp-6) var(--sp-10);
    background: var(--beige);
    border-bottom: 1px solid var(--line-soft);
  }
  .bk-desk-steps > .bk-desk-step { max-width: 180px; }
  .bk-desk-steps {
    /* Begrens de hele groep zodat de dots netjes in het midden zitten */
  }
  .bk-desk-steps::before,
  .bk-desk-steps::after { content: ""; flex: 1; }
  .bk-desk-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--sp-2);
    position: relative;
    color: var(--muted);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .bk-desk-step:last-child { flex: 0 0 auto; }
  .bk-desk-step-lbl { white-space: nowrap; line-height: 1; }
  .bk-desk-step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line);
    position: relative;
    z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }
  /* Verbindingslijn tussen dots — uitgelijnd met dot center (top: 4px = 5 - half line) */
  .bk-desk-step::after {
    content: '';
    position: absolute;
    left: calc(50% + 8px);
    right: calc(-50% + 8px);
    top: 4px;
    height: 1px;
    background: var(--line);
    z-index: 0;
  }
  .bk-desk-step:last-child::after { display: none; }
  .bk-desk-step.is-active .bk-desk-step-dot {
    background: var(--navy);
    box-shadow: 0 0 0 4px rgba(47, 65, 87, 0.18);
  }
  .bk-desk-step.is-done .bk-desk-step-dot { background: var(--navy); }
  .bk-desk-step.is-done::after,
  .bk-desk-step.is-active::after { background: var(--navy); }
  .bk-desk-step.is-done .bk-desk-step-lbl,
  .bk-desk-step.is-active .bk-desk-step-lbl { color: var(--navy); }

  /* 3-col grid */
  .bk-desk-grid {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    min-height: calc(100vh - 60px);
    align-items: start;
  }

  /* Left: activity list (met klein foto'tje per activiteit) */
  .bk-act-col {
    border-right: 1px solid var(--line);
    background: var(--beige);
    padding:var(--sp-7) 0;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .bk-act-col-hed {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    padding:0 var(--sp-5) var(--sp-4);
  }
  .bk-act-item {
    display: flex;
    align-items: center;
    gap:var(--sp-gap);
    padding:var(--sp-3) var(--sp-5);
    cursor: pointer;
    transition: background 0.1s;
  }
  .bk-act-item {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .bk-act-item:hover { background: var(--white); border-top-color: var(--line); border-bottom-color: var(--line); }
  .bk-act-item.is-active { background: var(--white); border-top-color: var(--line); border-bottom-color: var(--line); }
  .bk-act-init {
    width: 34px;
    height: 34px;
    background: var(--beige);
    color: var(--navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .bk-act-thumb {
    width: 38px;
    height: 38px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .bk-act-item.is-active .bk-act-init { background: var(--navy); color: var(--white); }
  .bk-act-item-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
  }
  .bk-act-item-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    color: var(--muted);
    margin-top: 1px;
    letter-spacing: 0.06em;
  }

  /* Center: picker */
  .bk-picker-col {
    padding:var(--sp-7) var(--sp-10);
    background: var(--beige);
    border-right: 1px solid var(--line);
  }
  .bk-picker-section { margin-bottom:var(--sp-7); }
  .bk-picker-lbl {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom:var(--sp-3);
    display: flex;
    align-items: center;
    gap:var(--sp-3);
  }
  /* Time-estimate naast eyebrow (NN Group 2020: -22% bounce bij
     expliciete tijds-indicatie op multi-step forms). */
  .bk-picker-lbl-time {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--muted);
    opacity: 0.7;
    font-weight: 400;
  }
  .bk-picker-lbl-time::before {
    content: "·  ";
    opacity: 0.5;
  }
  /* Desktop date grid (2 rows of 7) */
  .bk-desk-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap:var(--sp-2);
  }
  /* Reuse bk-date-cell */

  /* Wide 2-month calendar */
  .bk-cal-frame {
    position: relative;
    overflow: hidden;
  }
  .bk-cal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:var(--sp-3);
  }
  .bk-cal-nav-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background 0.15s, border-color 0.15s;
  }
  .bk-cal-nav-btn:hover:not(:disabled) { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .bk-cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .bk-cal-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--sp-7);
    transition: transform 0.32s ease, opacity 0.32s ease;
  }
  /* Mobiel: single-month kalender */
  @media (max-width: 1099px) {
    .bk-cal-wrap { grid-template-columns: 1fr; gap:var(--sp-4); }
    .bk-cal-wrap .bk-cal-month:nth-child(2) { display: none; }
  }
  .bk-cal-wrap.is-anim-out-left { transform: translateX(-30px); opacity: 0; }
  .bk-cal-wrap.is-anim-out-right { transform: translateX(30px); opacity: 0; }
  .bk-cal-wrap.is-anim-in-from-right { transform: translateX(30px); opacity: 0; }
  .bk-cal-wrap.is-anim-in-from-left { transform: translateX(-30px); opacity: 0; }
  .bk-cal-month {
    background: var(--white);
    border: 1px solid var(--line-soft);
    padding:var(--sp-4) var(--sp-4) var(--sp-gutter);
    border-radius: 12px;
  }
  .bk-cal-month-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    text-align: center;
    margin-bottom:var(--sp-3);
    letter-spacing: 0.02em;
  }
  .bk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap:var(--sp-1);
  }
  .bk-cal-dow {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding:var(--sp-2) 0 var(--sp-1);
  }
  .bk-cal-empty { height: 32px; }
  .bk-cal-day {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--navy);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
  }
  .bk-cal-day { border: none; border-radius: 8px; transition: background 0.15s, color 0.15s; }
  .bk-cal-day:hover:not(.is-past):not(.is-active) { background: var(--beige); border: none; }
  .bk-cal-day.is-past {
    color: var(--line);
    cursor: not-allowed;
  }
  .bk-cal-day.is-today { font-weight: 700; }
  .bk-cal-day.is-active {
    background: var(--navy);
    color: var(--white);
  }

  /* ── Verhuurperiode: van-tot range-selectie ("string") ───────
     De dagen tussen ophalen en terugbrengen vormen één doorlopende
     band. Met box-shadow vullen we de 4px grid-gap zodat de band
     visueel aaneengesloten is. Start/eind blijven navy (is-active). */
  .bk-cal-day.is-in-range {
    background: rgba(7, 83, 115, 0.10);
    color: var(--navy);
    border-radius: 0;
    box-shadow: -4px 0 0 rgba(7, 83, 115, 0.10), 4px 0 0 rgba(7, 83, 115, 0.10);
  }
  .bk-cal-day.is-in-range:hover { background: rgba(7, 83, 115, 0.16); }
  .bk-cal-day.is-range-start {
    border-radius: 8px 0 0 8px;
    box-shadow: 4px 0 0 rgba(7, 83, 115, 0.10);
  }
  .bk-cal-day.is-range-end {
    border-radius: 0 8px 8px 0;
    box-shadow: -4px 0 0 rgba(7, 83, 115, 0.10);
  }

  /* ── Verhuurperiode: samenvatting (ophalen → terugbrengen) ─── */
  .bk-huur-range { margin-top:var(--sp-1); }
  .bk-huur-range-sum {
    display: flex;
    align-items: stretch;
    gap:var(--sp-3);
    margin-bottom:var(--sp-3);
  }
  .bk-huur-range-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap:var(--sp-1);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding:var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .bk-huur-range-chip.is-set { border-color: var(--navy); }
  .bk-huur-range-chip-lbl {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .bk-huur-range-chip-val {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bk-huur-range-chip:not(.is-set) .bk-huur-range-chip-val { color: var(--muted); font-weight: 600; }
  .bk-huur-range-arrow { color: var(--teal); align-self: center; flex-shrink: 0; }
  .bk-huur-range-hint {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    color: var(--muted);
    margin:0 2px var(--sp-3);
  }
  .bk-huur-range-note {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--navy);
    background: rgba(7, 83, 115, 0.07);
    border-radius: 10px;
    padding:var(--sp-3) var(--sp-4);
    margin:0 0 var(--sp-4);
  }
  /* Sloep-extra's: zwemvest/huisdier-popup + huisdier-tegels */
  .bk-extra-pop-inner { max-width: 480px; }
  .bk-extra-pop-inner .bk-field-lbl {
    display: block;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom:var(--sp-2);
  }
  .bk-extra-pop-inner input[type="number"],
  .bk-extra-pop-inner textarea {
    width: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding:var(--sp-3) var(--sp-3);
    box-sizing: border-box;
  }
  .bk-extra-pop-inner input:focus,
  .bk-extra-pop-inner textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }
  .bk-huisdier-tiles { display: flex; gap:var(--sp-3); margin-bottom:var(--sp-3); }
  .bk-huisdier-tile {
    flex: 1;
    padding:var(--sp-4) 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .bk-huisdier-tile.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .bk-huisdier-tot {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
  }
  .bk-mat-edit {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding:var(--sp-2) 2px;
  }

  /* ── TENNIS: datum-knop + verticale tijdlijn ─────────────── */
  .bk-datum-btn {
    width: 100%;
    height: 100%;
    background: var(--white);
    /* Zelfde border als de Spelers-/personen-card (var(--line)). */
    border: 1px solid var(--line);
    /* 12px radius matchend met Spelers-card en Onze suggestie. */
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    padding:var(--sp-4) var(--sp-gutter);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap:var(--sp-gap);
  }
  .bk-datum-btn:hover { border-color: var(--line); }
  /* "Datum"-label boven de balk + balk vult de cel. */
  .bk-datum-field { display: flex; flex-direction: column; width: 100%; }
  .bk-datum-field .bk-datum-btn { justify-content: flex-start; }
  .bk-datum-field .bk-datum-btn-val { margin-left: 0; }
  .bk-datum-field-h {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #6B7280);
    margin:0 0 var(--sp-2) 2px;
  }
  .bk-datum-btn-lbl {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap:var(--sp-2);
  }
  /* Weer-badge naast label op fiets/sloep datum-knop. Subtiel: temp +
     zon/wolk-icoon — geeft outdoor-cue zonder schreeuwerig te zijn. */
  .bk-datum-weer {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap:var(--sp-1);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
    font-weight: 700;
  }
  .bk-datum-weer-note {
    margin:var(--sp-2) 0 0;
    padding: 0 2px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.35;
  }
  .bk-datum-btn-val {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap:var(--sp-2);
  }
  .bk-datum-btn-icon {
    width: 16px;
    height: 16px;
    color: var(--navy);
    flex-shrink: 0;
  }

  /* Dagdeel-tabs (boven tijdlijn-tabel) */
  .bk-dagdeel-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:var(--sp-3);
    margin-bottom:var(--sp-4);
    /* Zelfde horizontale inset als de tijden-grid → tegels even breed. */
    padding:0 var(--sp-gutter);
  }
  .bk-dagdeel-tab {
    background: var(--white);
    border: 1px solid var(--line-soft);
    /* Compactere padding voor rustigere, professionelere uitstraling
       (gebruikerswens mei 2026 — "zoals een professionele reserveringsapp"). */
    border-radius: 10px;
    padding:var(--sp-3) var(--sp-4);
    min-height: 40px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    display: flex;
    align-items: center;
    gap:var(--sp-gap);
    box-sizing: border-box;
  }
  .bk-dagdeel-tab:hover:not(.is-active):not(.is-past) { border-color: var(--line); }
  .bk-dagdeel-tab.is-active { border-color: var(--navy); background: var(--white); border-width: 2px; padding:var(--sp-2) var(--sp-3); }
  .bk-dagdeel-tab.is-past,
  .bk-dagdeel-tab[disabled].is-past { text-decoration: line-through; color: var(--muted); opacity: 0.55; cursor: not-allowed; }
  .bk-dagdeel-tab.is-past .bk-dagdeel-tab-naam,
  .bk-dagdeel-tab.is-past .bk-dagdeel-tab-meta { text-decoration: line-through; }
  .bk-dagdeel-tab-naam {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
  }
  .bk-dagdeel-tab-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Tennis tijdlijn — tabel-stijl met Tijdvak | Baan 1 | Baan 2.
     Outer container border-radius 12px (matchend met cards). Inner
     cells blijven aligned; alleen de buitenhoeken zijn afgerond. */
  .bk-tijdlijn {
    background: var(--white);
    border: 1px solid var(--line-soft);
    max-height: 540px;
    overflow-y: auto;
    border-radius: 12px;
    overflow: hidden;
  }
  .bk-tijdlijn-grid {
    display: grid;
    width: 100%;
  }
  .bk-tijdlijn-cell {
    padding:var(--sp-3) var(--sp-2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 0;
  }
  /* Borders alleen tussen tijdvak-row en mini-slots row (subtle).
     Individuele clickable cells krijgen border-radius i.p.v. grid-lines. */
  .bk-tijdlijn-cell.is-tijd { border-right: 1px solid var(--line-soft); }
  .bk-tijdlijn-cell.is-hed {
    border-bottom: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
  }
  /* Klikbare cells: ronde hoeken matching mini-slots + zachte border. */
  .bk-tijdlijn-cell.is-clickable,
  .bk-tijdlijn-cell.is-unavail {
    border-radius: 6px;
    border: 1px solid transparent;
    margin:var(--sp-1);
  }
  .bk-tijdlijn-cell.is-clickable:hover:not(.is-selected) {
    border-color: var(--line-soft);
  }
  .bk-tijdlijn-cell.is-tijd {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--navy);
    cursor: default;
    background: var(--beige);
    padding:var(--sp-3) var(--sp-2);
  }
  @media (max-width: 559px) {
    .bk-tijdlijn-cell { padding:var(--sp-3) 2px; font-size: 10px; }
    .bk-tijdlijn-cell.is-tijd { font-size: 11px; padding:var(--sp-2) var(--sp-1); }
    .bk-tijd-range { font-size: 10px; }
    .bk-tijd-scarcity { font-size: 8.5px !important; padding:1px var(--sp-1) !important; }
  }
  .bk-tijdlijn-cell.is-hed {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
    background: var(--beige);
    cursor: default;
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .bk-tijdlijn-cell:last-child,
  .bk-tijdlijn-cell.is-last-col { border-right: none; }
  /* Hover-state + soft transition voor klikbare slot-cells.
     Border-radius op de "+"-cell zelf zou misalignment geven met
     het grid; in plaats daarvan een subtle hover-fade. */
  .bk-tijdlijn-cell.is-clickable {
    transition: background 0.15s, transform 0.12s;
  }
  .bk-tijdlijn-cell.is-clickable:hover:not(.is-selected) {
    background: var(--beige);
  }
  .bk-tijdlijn-cell.is-clickable:active:not(.is-selected) {
    background: var(--beige2, #f0e8df);
  }
  /* Selected slot-cell: lichte terracotta tint achtergrond + 2px border +
     ring. Veel warmer + brand-color-echo dan navy. Apple HIG / Material
     standard: ring + brand-color voor selected state. */
  .bk-tijdlijn-cell.is-selected {
    background: rgba(71,184,226,0.08) !important;
    color: var(--navy) !important;
    box-shadow:
      inset 0 0 0 2px #46677C,
      0 0 0 3px rgba(71,184,226,0.15) !important;
    font-weight: 700;
    position: relative;
    z-index: 1;
  }
  /* Vinkje wordt al door flow.js in de cell-text gezet (status = "\u2713").
     Geen extra ::after \u2014 voorkomt dubbele vinkje weergave. */
  /* "Onze suggestie"-badge boven het geselecteerde slot \u2014 vervangt
     de "+" tekst met de daadwerkelijke badge. */
  .bk-tijdlijn-cell.is-selected.is-suggested { padding-top:var(--sp-gutter); }
  .bk-tijdlijn-cell .bk-slot-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: #46677C;
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding:2px var(--sp-2);
    border-radius: 100px;
    white-space: nowrap;
    pointer-events: none;
  }
  /* Scarcity-cue per tijdvak (Booking.com +12% bij echte scarcity).
     Toont aantal vrije banen per uur in tijdvak-cell, niet per slot.
     Center-aligned voor beide regels (tijd-range + scarcity-pill). */
  .bk-tijdlijn-cell.is-tijd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:var(--sp-1);
  }
  .bk-tijd-range { text-align: center; }
  .bk-tijd-range { line-height: 1.2; }
  .bk-tijd-scarcity {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: none;
    padding:2px var(--sp-2);
    border-radius: 100px;
    white-space: nowrap;
  }
  .bk-tijd-scarcity.is-vrij {
    background: rgba(63,163,114,0.12);
    color: #2F7A57;
  }
  .bk-tijd-scarcity.is-bijna {
    background: rgba(201,132,43,0.14);
    color: #B16E1F;
  }
  .bk-tijd-scarcity.is-vol {
    background: rgba(148,163,181,0.16);
    color: var(--muted);
  }
  /* Past/vol/geblokkeerd reguliere cells (bowling/tennis/squash):
     visueel duidelijk dat ze niet meer boekbaar zijn. Toont "Vol"
     i.p.v. "+" via flow.js renderer. */
  .bk-tijdlijn-cell.is-unavail {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
    background: var(--beige);
    color: var(--muted);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    pointer-events: none;
  }
  .bk-tijdlijn-cell.is-empty {
    color: var(--line);
    cursor: default;
  }
  .bk-tijdlijn-cell.is-hour-toggle {
    cursor: pointer;
    background: var(--white);
    text-align: left;
    justify-content: flex-start;
  }
  .bk-tijdlijn-cell.is-hour-toggle:hover { background: var(--beige); }
  .bk-tijdlijn-cell.is-hour-toggle.is-open { background: var(--beige); }
  .bk-tijdlijn-cell.is-summary {
    background: var(--white);
    color: var(--muted);
    font-style: italic;
  }
  .bk-hour-arrow {
    display: inline-block;
    margin-right:var(--sp-2);
    color: var(--muted);
    font-size: 10px;
  }
  .bk-tijdlijn-cell.is-tijd.is-subrow {
    background: var(--beige);
    padding-left:var(--sp-7);
    justify-content: flex-start;
    text-align: left;
    font-size: 12px;
  }
  /* Adventuregolf mini-slots: 6 knoppen op 1 rij */
  .bk-tijdlijn-cell.is-mini-slots {
    padding:var(--sp-2) var(--sp-3);
    cursor: default;
  }
  .bk-mini-slots-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap:var(--sp-1);
    width: 100%;
  }
  .bk-mini-slot {
    padding:var(--sp-2) 2px;
    background: var(--white);
    border: 1px solid var(--line-soft);
    color: var(--navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;  /* laat grid compactor maken */
    /* Border-radius matchend met andere kleine UI-elementen (cijfer-box 8px,
       popup-items 8px). Op mini-slots is 6px optimaal. */
    border-radius: 6px;
  }
  @media (max-width: 559px) {
    .bk-mini-slots-row { gap: 2px; }
    .bk-mini-slot { padding:var(--sp-1) 1px; font-size: 10px; }
  }

  /* ── Quick-pick hero (Apple × Booking pattern) ──────────────────
     Boven de tijdlijn-tabel: prominente "Boek dit slot"-card met
     smart-default slot. Reduceert 80% van gasten naar 1-klik-flow. */
  .bk-quickpick {
    background: var(--white);
    border-radius: 16px;
    padding:var(--sp-4) var(--sp-4) var(--sp-4);
    margin:0 var(--sp-gutter) var(--sp-4);
    border-left: 4px solid var(--success, #3FA372);
    box-shadow:
      0 1px 3px rgba(20,34,51,0.06),
      0 8px 20px rgba(20,34,51,0.08);
  }
  .bk-quickpick-eye {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--success, #3FA372);
    font-weight: 700;
    margin-bottom:var(--sp-1);
    display: flex;
    align-items: center;
    gap:var(--sp-2);
  }
  .bk-quickpick-dot {
    width: 8px; height: 8px;
    background: var(--success, #3FA372);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(63,163,114,0.5);
    animation: bk-quickpick-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
  }
  @keyframes bk-quickpick-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(63,163,114,0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(63,163,114,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,163,114,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bk-quickpick-dot { animation: none; }
  }
  .bk-quickpick-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--navy);
    line-height: 1.2;
  }
  .bk-quickpick-sub {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: var(--muted);
    margin-top:var(--sp-1);
  }
  .bk-quickpick-cta {
    margin-top:var(--sp-3);
    width: 100%;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding:var(--sp-3) var(--sp-4);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--sp-2);
    transition: background 0.15s, transform 0.12s;
  }
  .bk-quickpick-cta:hover { background: #1f2d3d; }
  .bk-quickpick-cta:active { transform: translateY(1px); }
  .bk-quickpick-arrow { font-size: 16px; }

  /* ── "Of kies zelf een andere tijd ▾" — secondary link onder
     de quick-pick hero. Apple HIG: één primary action per scherm,
     deze is bewust subtiel (geen knop-stijl) zodat smart-default
     dominant blijft. Booking.com pattern (A/B 2019): 80% gasten
     accepteert de smart-default, 20% klikt door naar handmatig. */
  .bk-orpick {
    display: block;
    width: 100%;
    margin:var(--sp-gutter) auto 0;
    padding:var(--sp-4) var(--sp-4);
    background: transparent;
    border: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--muted, #6B7280);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(107,114,128,0.4);
    cursor: pointer;
    text-align: center;
    transition: color 0.15s;
  }
  .bk-orpick:hover { color: var(--navy); text-decoration-color: var(--navy); }
  .bk-orpick:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 6px;
  }
  .bk-orpick-arrow {
    display: inline-block;
    margin-left: 2px;
    font-size: 12px;
    opacity: 0.7;
  }

  /* Collapsed-default state — verbergt de top-row (eyebrow, datum-knop,
     spelers-stepper) zodat alleen de quick-pick hero + "Of kies zelf"
     link in beeld is. Zodra gast op "Of kies zelf" klikt wordt de class
     verwijderd en verschijnt de volledige picker. */
  #dkPicker.bk-collapsed-default > .bk-picker-section:first-child {
    display: none;
  }

  /* ── Tijden-eerst + baan-tweede flow ──────────────────────────
     Apple HIG: één keuze per scherm-segment. Booking.com pattern:
     eerst de "wanneer", dan de "waar". Reduceert cognitieve last
     vs één grote per-baan-grid waar gast 2 dimensies tegelijk moet
     scannen. */
  .bk-tijden-sec-h,
  .bk-baan-sec-h {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #6B7280);
    padding:0 var(--sp-gutter);
    margin:var(--sp-gutter) 0 var(--sp-2);
  }
  /* Single-baan statement — FULL-WIDTH card, zelfde edge en horizontale
     padding als de datum-card en dagdeel-pills. Visuele consistentie boven
     visuele afwijkende pill. Apple/Booking-pattern: alle "rijen" in een
     boekingsflow respecteren dezelfde grid-breedte. */
  .bk-baan-info {
    display: flex;
    align-items: center;
    gap:var(--sp-3);
    margin:var(--sp-4) var(--sp-gutter) 0;
    padding:var(--sp-4) var(--sp-gutter);
    background: var(--white);
    border: 1px solid var(--line-soft, rgba(3,83,114,0.10));
    border-radius: 12px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--navy, #035372);
  }
  .bk-baan-info svg { color: var(--accent, #46677C); flex-shrink: 0; }
  .bk-baan-info-naam { font-weight: 600; }
  .bk-tijden-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
  }
  .bk-tijd-slot {
    background: var(--white);
    border: 1px solid var(--line-soft, rgba(0,0,0,0.08));
    border-radius: 10px;
    /* Compactere padding voor rustigere look (Booking.com/Stripe-stijl
       segmented tiles). 14px → 11px vertical, 6 → 8 horizontal. */
    padding:var(--sp-3) var(--sp-2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-variant-numeric: tabular-nums;
  }
  /* Hover + selected identiek aan de banen-tegels (gebruikerswens): subtiele
     line-border bij hover, witte achtergrond + dikke navy 2px border bij select. */
  .bk-tijd-slot:hover:not(.is-selected):not(:disabled) {
    border-color: var(--line);
  }
  .bk-tijd-slot:active:not(:disabled) { transform: scale(0.97); }
  .bk-tijd-slot.is-selected {
    background: var(--white);
    border-color: var(--navy);
    border-width: 2px;
    color: var(--navy);
    padding:var(--sp-3) var(--sp-2);
  }
  .bk-tijd-slot.is-vol,
  .bk-tijd-slot:disabled {
    color: var(--muted, #6B7280);
    background: rgba(0,0,0,0.02);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.55;
  }
  .bk-tijd-slot:focus-visible {
    outline: 2px solid var(--accent, #46677C);
    outline-offset: 2px;
  }

  /* Baan-segment — verschijnt onder de tijden zodra een tijdvak
     is gekozen. Tegels iets groter dan de slots want fewer items + meer
     info (naam + meta). */
  .bk-baan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:var(--sp-3);
    padding:0 var(--sp-gutter);
  }
  .bk-baan-tile {
    text-align: left;
    background: var(--white);
    border: 1.5px solid var(--line-soft, rgba(0,0,0,0.08));
    border-radius: 12px;
    padding:var(--sp-4) var(--sp-4);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
  }
  .bk-baan-tile:hover:not(.is-active):not(:disabled) {
    /* Subtiele hover (zoals de basis-regel), NIET navy: de actieve tegel is
       navy 2px. Een navy hover liet een net-gedeselecteerde tegel (die nog
       onder de cursor zit na re-render) "half geselecteerd" lijken. */
    border-color: var(--line);
  }
  .bk-baan-tile:active:not(:disabled) { transform: scale(0.98); }
  /* Active baan-tile gebruikt dezelfde stijl als active dagdeel-tab
     (Ochtend/Middag/Avond): witte achtergrond, dikkere navy border.
     Gebruikerswens mei 2026 — visuele consistentie tussen segmented
     controls in dezelfde stap. */
  .bk-baan-tile.is-active {
    border-color: var(--navy);
    background: var(--white);
    border-width: 2px;
    padding: 12.5px 14.5px;
  }
  .bk-baan-tile.is-vol,
  .bk-baan-tile:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .bk-baan-tile-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    line-height: 1.2;
  }
  .bk-baan-tile-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted, #6B7280);
    margin-top: 2px;
  }
  .bk-baan-tile:focus-visible {
    outline: 2px solid var(--accent, #46677C);
    outline-offset: 2px;
  }

  /* ── Uur-tegels (adventuregolf 10-min slots — variant A) ─────────
     Gast kiest eerst het uur (10–19), dan exact starttijd binnen
     dat uur. Veel overzichtelijker dan een grid met 60 tegels. */
  .bk-uur-section-h {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding:0 var(--sp-gutter);
    margin:var(--sp-4) 0 var(--sp-2);
  }
  .bk-uur-section-h.is-piek {
    color: var(--success, #3FA372);
    font-weight: 700;
  }
  .bk-uur-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
  }
  .bk-uur-tegel {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding:var(--sp-3) var(--sp-1);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .bk-uur-tegel:hover:not(.is-active):not(:disabled) {
    border-color: var(--navy);
    background: var(--beige, #FFFFFF);
  }
  /* Actief uur: navy fill + wit text + ▾ pijl onderaan — visueel
     duidelijk dat dit uur "uitgeklapt" is naar de minuten eronder. */
  .bk-uur-tegel.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
  }
  .bk-uur-tegel.is-active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--navy);
  }
  .bk-uur-tegel:disabled,
  .bk-uur-tegel.is-vol {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .bk-uur-tegel-sub {
    display: block;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 2px;
    text-transform: uppercase;
    font-weight: 400;
  }
  .bk-uur-tegel.is-active .bk-uur-tegel-sub {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
  }

  /* Span-over-uren marker: bij multi-slot kan selectie 2 uren beslaan
     (bv 10:50 + 11:00). Het niet-actieve uur met geselecteerd slot krijgt
     een terracotta dot links + accent border zodat gast direct ziet dat
     de selectie hier doorloopt. */
  .bk-uur-tegel.is-span {
    border-color: var(--accent, #46677C);
    background: rgba(71,184,226, 0.06);
    position: relative;
  }
  .bk-uur-tegel.is-span .bk-uur-tegel-sub {
    color: var(--accent, #46677C);
    font-weight: 600;
  }
  .bk-uur-tegel-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 6px;
    height: 6px;
    background: var(--accent, #46677C);
    border-radius: 50%;
  }

  /* Span-popup — eenmalig modal wanneer multi-slot selectie over uren
     spant. Apple-stijl rust: centered card, fade-in overlay, één primary
     "Begrepen" knop. Sluit via knop, klik buiten, of Escape-toets. */
  .bk-span-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 34, 51, 0.42);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:var(--sp-5);
    animation: bkSpanFadeIn 0.18s ease-out;
  }
  .bk-span-popup-overlay.is-closing {
    animation: bkSpanFadeOut 0.16s cubic-bezier(.22,1,.36,1) forwards;
  }
  .bk-span-popup-card {
    background: var(--white, #fff);
    border-radius: 16px;
    padding:var(--sp-6) var(--sp-6) var(--sp-5);
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(20, 34, 51, 0.18), 0 4px 12px rgba(20, 34, 51, 0.08);
    animation: bkSpanScaleIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .bk-span-popup-overlay.is-closing .bk-span-popup-card {
    animation: bkSpanScaleOut 0.16s cubic-bezier(.22,1,.36,1) forwards;
  }
  .bk-span-popup-icon {
    width: 44px; height: 44px;
    margin:0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--accent, #46677C);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
  }
  .bk-span-popup-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy, #035372);
    letter-spacing: -0.01em;
    margin:0 0 var(--sp-2);
  }
  .bk-span-popup-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--muted, #6B7280);
    line-height: 1.45;
    margin:0 0 var(--sp-gutter);
  }
  .bk-span-popup-body strong {
    color: var(--navy, #035372);
    font-weight: 700;
  }
  .bk-span-popup-btn {
    background: var(--navy, #035372);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding:var(--sp-3) var(--sp-7);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .bk-span-popup-btn:hover { background: #1f2d3d; }
  .bk-span-popup-btn:active { transform: translateY(1px); }
  .bk-span-popup-btn:focus-visible {
    outline: 2px solid var(--accent, #46677C);
    outline-offset: 2px;
  }
  @keyframes bkSpanFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bkSpanFadeOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes bkSpanScaleIn {
    from { transform: scale(0.92); opacity: 0.5; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes bkSpanScaleOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.95); opacity: 0; }
  }

  /* "Gekozen: 10:50 – 11:10 · 20 min" — selectie-summary bij multi-slot,
     boven de minuten-grid. Maakt visueel duidelijk WAT geselecteerd is,
     ook als de slots over 2 uren spannen (en niet alle zichtbaar in
     huidig minuten-grid). */
  .bk-slot-gekozen-sum {
    display: flex;
    align-items: center;
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    margin:0 0 var(--sp-3);
    background: rgba(71,184,226, 0.08);
    border-left: 3px solid var(--accent, #46677C);
    border-radius: 0 10px 10px 0;
  }
  .bk-slot-gekozen-eye {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent, #46677C);
    font-weight: 700;
  }
  .bk-slot-gekozen-val {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .bk-slot-gekozen-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted, #6B7280);
    margin-left: auto;
  }

  /* Hoofd-kopjes "Stap 1 / Stap 2" — meer prominent dan dagdeel-headers. */
  .bk-uur-stap-h {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    padding:0 var(--sp-gutter);
    margin:var(--sp-4) 0 var(--sp-2);
  }
  .bk-uur-stap-h .bk-uur-stap-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    margin-right:var(--sp-2);
    vertical-align: -3px;
  }
  .bk-minuten-wrap {
    background: rgba(47, 65, 87, 0.04);
    padding:var(--sp-3) var(--sp-4);
    margin:var(--sp-3) var(--sp-gutter) var(--sp-1);
    border-radius: 10px;
  }
  .bk-minuten-h {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom:var(--sp-2);
  }
  .bk-minuten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:var(--sp-2);
  }
  /* Aanrader-badge op een specifieke minuut-knop. */
  .bk-mini-slot.is-aanrader {
    position: relative;
    border: 2px solid var(--success, #3FA372);
    background: rgba(63, 163, 114, 0.06);
  }
  .bk-mini-slot-aanrader-badge {
    position: absolute;
    /* Volledig boven knop met ~3px speling — niet over de bovenrand. */
    top: -18px; left: 50%;
    transform: translateX(-50%);
    background: var(--success, #3FA372);
    color: white;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:2px var(--sp-2);
    border-radius: 10px;
    font-weight: 700;
    white-space: nowrap;
  }
  /* Tip-badge is verwijderd (was neppe tip), dus geen extra padding-top
     meer nodig. Iets ruimere minuut-knoppen (was 9px, nu 12px) voor
     beter tap-comfort met de extra ruimte die vrijkwam. */
  .bk-minuten-grid .bk-mini-slot { padding:var(--sp-3) var(--sp-1); font-size: 13px; }
  .bk-mini-slot:hover:not(.is-selected):not(.is-empty) { border-color: var(--line); background: var(--beige); }
  /* Selected mini-slot: lichte terracotta tint + border + ring
     (matchend met .bk-tijdlijn-cell.is-selected). Navy-fill verwijderd. */
  .bk-mini-slot.is-selected {
    background: var(--white);
    color: var(--navy);
    border: 1px solid #46677C;
    font-weight: 700;
  }
  /* Past/vol/geblokkeerd slots tonen als duidelijk disabled.
     Line-through + grijs achtergrond + opacity zodat gast direct
     ziet welke tijden niet meer boekbaar zijn. */
  .bk-mini-slot.is-unavail {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
    background: var(--beige);
    color: var(--muted);
    pointer-events: none;
  }
  .bk-mini-slot.is-unavail:hover { background: var(--beige); border-color: var(--line-soft); }
  .bk-mini-slot.is-empty {
    color: var(--line);
    cursor: default;
  }
  .bk-tijdlijn-cell:not(.is-tijd):not(.is-hed):not(.is-empty):not(.is-selected) {
    color: var(--navy);
  }
  /* Selected-state moved to top of file with terracotta tint;
     duplicate navy-fill regel hier verwijderd. */

  /* Date popup */
  .bk-datum-pop {
    position: fixed; inset: 0;
    background: rgba(47, 65, 87, 0.45);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding:var(--sp-5);
  }
  .bk-datum-pop-inner {
    background: var(--beige);
    padding:var(--sp-6);
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(20,34,51,0.18);
  }
  .bk-datum-pop-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: none;
    background: rgba(3,83,114,0.06);
    color: var(--navy);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .bk-datum-pop-close:hover { background: rgba(3,83,114,0.12); }
  .bk-datum-pop-titel {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy);
    margin:0 0 var(--sp-4);
  }
  /* "Klaar"-knop onder de range-kalender in de verhuur-popup. */
  .bk-range-klaar {
    margin-top:var(--sp-gutter);
    width: 100%;
    padding:var(--sp-4) var(--sp-gutter);
    border: none;
    border-radius: 12px;
    background: var(--navy);
    color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
  }
  .bk-range-klaar:hover:not(:disabled) { opacity: 0.92; }
  .bk-range-klaar:active:not(:disabled) { transform: scale(0.99); }
  .bk-range-klaar:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Spelers + Baan/Datum: op desktop side-by-side, op mobiel stacked
     als compacte rows (Booking.com pattern \u2014 +8% completion vs grote
     card-blocks volgens publieke A/B-tests 2018). */
  .bk-pers-baan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--sp-gap);
    align-items: stretch;
  }
  @media (max-width: 719px) {
    .bk-pers-baan-row {
      grid-template-columns: 1fr;
      gap:var(--sp-2);
    }
  }
  .bk-pers-baan-row .bk-pers-grid,
  .bk-pers-baan-row .bk-baan-tiles {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .bk-pers-baan-row .bk-pers-grid.bk-pers-grid--enkel { width: 100%; }
  /* Op mobiel: compacte horizontale row (label links, stepper rechts).
     Uitzondering: .bk-pers-grid--duo (adv-golf Volw + Kids) blijft 2-kol
     naast elkaar — past beter bij twee gerelateerde stepper-keuzes
     ("Volw 2 / Kids 2") dan onder elkaar. */
  @media (max-width: 719px) {
    .bk-pers-baan-row .bk-pers-grid:not(.bk-pers-grid--duo) {
      display: block;
    }
    .bk-pers-baan-row .bk-pers-grid:not(.bk-pers-grid--duo) .bk-pers-row {
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding:var(--sp-3) var(--sp-4) !important;
      gap:var(--sp-gap) !important;
      min-height: 56px;
      border-right: 0 !important;
    }
    /* Duo-grid (Volw + Kids): blijf 2-koloms, gecentreerde labels boven
       de stepper. Compacter dan stacked rows want gast ziet beide
       keuzes in één oogopslag. */
    .bk-pers-baan-row .bk-pers-grid--duo {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
    }
    .bk-pers-baan-row .bk-pers-grid--duo .bk-pers-row {
      flex-direction: column !important;
      align-items: center !important;
      padding:var(--sp-3) var(--sp-3) !important;
      gap:var(--sp-2) !important;
      border-right: 1px solid var(--line-soft) !important;
    }
    .bk-pers-baan-row .bk-pers-grid--duo .bk-pers-row:last-of-type {
      border-right: 0 !important;
    }
    .bk-pers-baan-row .bk-pers-grid--duo .bk-pers-info {
      text-align: center !important;
    }
    .bk-pers-baan-row .bk-pers-info {
      text-align: left !important;
      flex: 1;
    }
    .bk-pers-baan-row .bk-pers-prijs { font-size: 10.5px !important; }
    .bk-datum-btn {
      min-height: 56px !important;
      padding:var(--sp-3) var(--sp-4) !important;
    }
  }
  .bk-baan-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--sp-2);
  }
  .bk-baan-tile-simple {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding:var(--sp-4) var(--sp-2);
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--navy);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bk-baan-tile-simple:hover:not(.is-active) { border-color: var(--line); }
  .bk-baan-tile-simple.is-active {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }

  /* ── Huur-tegel (fiets/sloep): compacte horizontale row-card ──
     Kleine thumb links + naam/capaciteit/prijs/pills rechts. Past
     2-3 tiles + datum + trust-bar in 1 mobile-viewport. */
  .bk-huur-tiles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
  }

  /* Stepper-UI voor fiets/sloep verhuur \u2014 vervangt de oude tegel-grid
     met losse tegels per voertuig. Card per type (Stadsfiets / E-bike /
     Sloep 6p / Sloep 8p) met naam + prijs + max-beschikbaar + stepper.
     touch-action: manipulation op alle tappable elementen voorkomt iOS
     Safari double-tap-zoom (gebruiker-feedback mei 2026). */
  .bk-huur-types-list {
    display: flex;
    flex-direction: column;
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
  }
  .bk-huur-type-card {
    background: var(--white, #fff);
    border: 1px solid var(--line-soft, rgba(20,34,51,0.10));
    border-radius: 12px;
    padding:var(--sp-4) var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--sp-gap);
    touch-action: manipulation;
  }
  .bk-huur-type-card .bk-step-btn,
  .bk-huur-type-card .bk-step-input {
    touch-action: manipulation;
  }
  .bk-huur-type-info {
    flex: 1;
    min-width: 0;
  }
  .bk-huur-type-naam {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy, #035372);
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .bk-huur-type-prijs {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    color: var(--accent, #46677C);
    font-weight: 600;
    margin-bottom: 2px;
  }
  .bk-huur-type-aantal {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted, rgba(20,34,51,0.55));
  }
  .bk-huur-type-stepper {
    display: flex;
    align-items: center;
    gap:var(--sp-2);
    flex-shrink: 0;
  }
  .bk-huur-type-stepper .bk-step-btn {
    /* Tap-target >= 44px (WCAG 2.5.5 / Apple HIG) — was 32px, te klein op mobiel. */
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 18px;
  }
  .bk-huur-type-stepper .bk-step-input {
    width: 48px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    border: 1px solid var(--line-soft, rgba(20,34,51,0.12));
    border-radius: 8px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    color: var(--navy, #035372);
    background: var(--white, #fff);
  }
  .bk-huur-type-stepper .bk-step-input::-webkit-outer-spin-button,
  .bk-huur-type-stepper .bk-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .bk-huur-type-stepper .bk-step-input { -moz-appearance: textfield; }
  .bk-huur-tile {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    align-items: stretch;
    min-height: 72px;
  }
  .bk-huur-tile:hover:not(.is-active) {
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(20, 34, 51, 0.05);
  }
  .bk-huur-tile.is-active {
    background: var(--white);
    color: var(--navy);
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
  }
  .bk-huur-tile-thumb {
    width: 96px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--beige, #FFFFFF);
    position: relative;
  }
  .bk-huur-tile-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(20, 34, 51, 0.08);
  }
  .bk-huur-tile.is-active .bk-huur-tile-thumb::after {
    background: rgba(20, 34, 51, 0);
  }
  .bk-huur-tile-body {
    flex: 1;
    min-width: 0;
    padding:var(--sp-2) var(--sp-3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
  }
  .bk-huur-tile-naam {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bk-huur-tile-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
  }
  .bk-huur-tile-prijs {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--navy);
    line-height: 1.2;
  }
  .bk-huur-tile-pills {
    display: flex;
    flex-wrap: wrap;
    gap:var(--sp-1);
    margin-top:var(--sp-1);
  }
  .bk-huur-tile-pill {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--beige, #FFFFFF);
    padding:2px var(--sp-2);
    border-radius: 8px;
    white-space: nowrap;
  }
  @media (min-width: 1100px) {
    /* Desktop: 2-koloms grid voor huur-tegels. */
    .bk-huur-tiles-grid { grid-template-columns: 1fr 1fr; gap:var(--sp-2); }
  }

  /* ── Eyebrow boven de picker ("Boeken duurt 2 minuten") ── */
  .bk-picker-eyebrow {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
    margin:var(--sp-2) 0 var(--sp-4);
  }
  .bk-picker-eyebrow-icon {
    width: 13px; height: 13px;
    color: var(--accent, #A85D44);
    flex-shrink: 0;
  }

  /* ── Trust-bar onderaan de picker ── */
  .bk-trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-gutter);
    margin-top:var(--sp-gutter);
    border-top: 1px solid var(--line-soft);
  }
  .bk-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:var(--sp-2);
  }
  .bk-trust-icon {
    width: 22px; height: 22px;
    color: var(--accent, #A85D44);
    flex-shrink: 0;
  }
  .bk-trust-text {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    line-height: 1.3;
    color: var(--navy);
  }
  @media (max-width: 380px) {
    .bk-trust-bar { gap:var(--sp-2); padding:var(--sp-4) var(--sp-3); }
    .bk-trust-text { font-size: 9px; }
  }

  /* ── Group-booking snel-knoppen boven huur-tegels ── */
  .bk-group-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap:var(--sp-2);
    padding:0 var(--sp-gutter);
    margin-bottom:var(--sp-3);
  }
  .bk-group-shortcut-lbl {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    align-self: center;
    margin-right:var(--sp-1);
  }
  .bk-group-shortcut {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    padding:var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .bk-group-shortcut:hover { border-color: var(--navy); }
  .bk-group-shortcut.is-active {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }

  /* Desktop baan grid */
  .bk-desk-baan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--sp-2);
  }
  /* Reuse bk-baan-tile */

  /* Desktop slot groups */
  .bk-desk-slot-grp { margin-bottom:var(--sp-4); }
  .bk-desk-slot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:var(--sp-2);
  }

  /* Right: summary */
  .bk-summary-col {
    padding:var(--sp-7) var(--sp-6) var(--sp-6);
    background: var(--beige);
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .bk-sum-col-hed {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom:var(--sp-4);
  }
  .bk-sum-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding:var(--sp-4);
    margin-bottom: 0;
  }
  .bk-sum-card-top {
    display: flex;
    gap:var(--sp-3);
    align-items: flex-start;
    margin-bottom:var(--sp-4);
  }
  .bk-sum-icon {
    width: 38px;
    height: 38px;
    background: var(--navy);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .bk-sum-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--navy);
  }
  .bk-sum-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top:var(--sp-1);
  }
  .bk-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding:var(--sp-2) 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
  }
  .bk-sum-row:last-child { border-bottom: none; }
  .bk-sum-lbl { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--muted); }
  .bk-sum-val { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--navy); font-weight: 700; }
  .bk-sum-row.total .bk-sum-val { font-size: 18px; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
  .bk-sum-row.has-tijden { border-bottom: 0; padding-bottom:var(--sp-1); }
  .bk-sum-tijden {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    color: var(--muted);
    padding:var(--sp-1) 0 var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.5;
    word-spacing: 2px;
  }
  .bk-stepper-row { align-items: center; }
  .bk-sum-prijs { color: var(--navy); font-weight: 700; margin-left:var(--sp-1); }
  .bk-stepper { display: inline-flex; align-items: center; gap:var(--sp-2); }
  .bk-step-btn {
    width: 36px; height: 36px;
    border: none;
    background: var(--navy);
    color: var(--white);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Ronde cirkel-knoppen (Apple-stijl). */
    border-radius: 50%;
    transition: background 0.15s, transform 0.12s;
  }
  .bk-step-btn:hover { background: #1f2d3d; transform: translateY(-1px); }
  .bk-step-btn:active { transform: translateY(0); }
  /* Adventuregolf (2-col Volw+Kid grid): compacte stepper met grotere
     tap-targets (was 24×24, nu pill 36×32 — boven iOS-norm 44px met label). */
  .bk-pers-grid:not(.bk-pers-grid--enkel) .bk-step-btn {
    width: 36px; height: 32px;
    background: var(--beige, #FFFFFF);
    border: 1px solid var(--line-soft);
    color: var(--navy);
    font-size: 16px;
    border-radius: 16px;
  }
  .bk-pers-grid:not(.bk-pers-grid--enkel) .bk-step-btn:hover {
    background: var(--white);
    border-color: var(--navy);
    color: var(--navy);
  }
  .bk-pers-grid:not(.bk-pers-grid--enkel) .bk-stepper { gap:var(--sp-1); }
  .bk-step-val {
    min-width: 18px;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: var(--navy);
  }
  .bk-step-input {
    width: 44px;
    height: 32px;
    padding: 0;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    border: 1px solid var(--line-soft);
    background: var(--white);
    -moz-appearance: textfield;
    box-sizing: border-box;
    line-height: 30px;
    /* 8px radius matchend met andere kleine UI-elementen. */
    border-radius: 8px;
  }
  /* Adventuregolf compacte input */
  .bk-pers-grid:not(.bk-pers-grid--enkel) .bk-step-input {
    width: 36px;
    height: 32px;
    font-size: 15px;
    line-height: 30px;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
  }
  .bk-step-input::-webkit-outer-spin-button,
  .bk-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* outline: none verwijderd — globale *:focus-visible in iselmar-v2.css zorgt voor focus-indicatie */
  .bk-slot-legenda {
    display: flex;
    flex-wrap: wrap;
    gap:var(--sp-gap);
    margin-bottom:var(--sp-3);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
  }
  .bk-leg-item { display: inline-flex; align-items: center; gap:var(--sp-2); }
  .bk-leg-swatch {
    width: 14px;
    height: 14px;
    border: 1px solid var(--line);
    display: inline-block;
  }
  .bk-leg-vrij { background: var(--white); }
  .bk-leg-tight { background: var(--beige); }
  .bk-leg-vol { background: var(--white); position: relative; }
  .bk-leg-vol::before {
    content: '';
    position: absolute;
    left: 1px; right: 1px; top: 50%;
    border-top: 1px solid var(--muted);
    transform: translateY(-1px);
  }
  .bk-leg-sel { background: var(--navy); border-color: var(--navy); }
  /* Sloep dagdeel-grid (mimics adventuregolf-stepper-grid) */
  .bk-dagdeel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--sp-2);
  }
  .bk-dagdeel-btn {
    padding:var(--sp-4) var(--sp-4);
    background: var(--white);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .bk-dagdeel-btn:hover:not(.is-active) { border-color: var(--line); }
  .bk-dagdeel-btn.is-active { background: var(--navy); border-color: var(--navy); }
  .bk-dagdeel-btn.is-active .bk-dd-naam,
  .bk-dagdeel-btn.is-active .bk-dd-tijd { color: var(--white); }
  .bk-dd-naam { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); }
  .bk-dd-tijd { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--muted); margin-top:var(--sp-1); letter-spacing: 0.06em; }
  /* Fiets type-grid */
  .bk-fiets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:var(--sp-2);
  }
  .bk-fiets-btn {
    padding:var(--sp-4) var(--sp-4);
    background: var(--white);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .bk-fiets-btn:hover:not(.is-active) { border-color: var(--line); }
  .bk-fiets-btn.is-active { background: var(--navy); border-color: var(--navy); }
  .bk-fiets-btn.is-active .bk-fiets-naam,
  .bk-fiets-btn.is-active .bk-fiets-aantal { color: var(--white); }
  .bk-fiets-naam { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); }
  .bk-fiets-aantal { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10px; color: var(--muted); margin-top:var(--sp-1); }
  .bk-einddatum-input {
    width: 100%;
    padding:var(--sp-3) var(--sp-3);
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--ff-display);
    font-size: 14px;
    color: var(--navy);
  }
  .bk-borg-info {
    background: var(--beige);
    padding:var(--sp-3) var(--sp-4);
    margin-bottom:var(--sp-3);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: var(--navy);
    line-height: 1.5;
  }
  /* Info-banner met 'i'-icoon. Belangrijk: GEEN display:flex op de
     buiten-container — dat zou tekst + <strong> als aparte flex-items
     opbreken (bv. "Met 9 personen ... <strong>2 banen</strong> ... nodig"
     werd in 3 kolommen gerenderd). Gebruik absolute positioning voor
     het icoon zodat de tekst natuurlijk inline-flow heeft. */
  .bk-slot-info {
    position: relative;             /* icoon absoluut → tekst loopt natuurlijk inline */
    text-align: left;
    padding:var(--sp-3) var(--sp-4) var(--sp-3) 44px;   /* links ruimte voor het icoon */
    margin:0 var(--sp-gutter) var(--sp-3);
    background: var(--sky);
    border-radius: 12px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--navy);
    line-height: 1.5;
  }
  /* Groep-icoontje (past bij de boodschap over groepsgrootte → banen). */
  .bk-slot-info::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075373' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .bk-slot-info strong { font-weight: 700; }
  .bk-pers-grid {
    background: var(--white);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 12px radius matchend met Onze suggestie-card stijl. */
    border-radius: 12px;
    overflow: hidden;
  }
  .bk-pers-grid.bk-pers-grid--enkel {
    grid-template-columns: 1fr;
    width: calc(50% - 4px); /* matcht 1 cel van het 2-kolommen grid */
  }
  .bk-pers-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-4);
    border-right: 1px solid var(--line-soft);
  }
  .bk-pers-row:last-of-type { border-right: 0; }
  .bk-pers-info { text-align: center; }
  .bk-pers-naam {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--navy);
  }
  .bk-pers-prijs {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.04em;
  }
  .bk-pers-onder4 {
    grid-column: 1 / -1;
    padding:var(--sp-3) var(--sp-4);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
    background: var(--beige);
    border-top: 1px solid var(--line-soft);
  }
.bk-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47, 65, 87, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.bk-popup {
  background: #fff;
  max-width: 420px;
  width: calc(100% - 32px);
  padding:var(--sp-6);
  border: 1px solid var(--line);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.bk-popup-titel {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom:var(--sp-3);
  letter-spacing: -0.01em;
}
.bk-popup-tekst {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--navy);
  margin-bottom:var(--sp-gutter);
  line-height: 1.5;
}
.bk-popup-btns { display: flex; gap:var(--sp-2); justify-content: flex-end; }
.bk-popup-btn-sec, .bk-popup-btn-pri {
  padding:var(--sp-3) var(--sp-4);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--line);
}
.bk-popup-btn-sec { background: #fff; color: var(--navy); }
.bk-popup-btn-pri { background: var(--navy); color: #fff; border-color: var(--navy); }
.bk-popup-btn-sec:hover { background: var(--beige); }
.bk-popup-btn-pri:hover { background: #243245; }
  .bk-sum-btn {
    width: 100%;
    padding:var(--sp-4) var(--sp-6);
    /* Terracotta pill matchend met onze brand-CTA's (RESERVEER, KIES TIJDSLOT).
       Cialdini Consistency: \u00e9\u00e9n primary-action-stijl door de hele flow. */
    background: #46677C;
    color: var(--white);
    border: none;
    border-radius: 100px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top:var(--sp-4);
    transition: filter 0.15s, transform 0.12s;
  }
  .bk-sum-btn:disabled { opacity: 0.38; cursor: not-allowed; }
  .bk-sum-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
  .bk-sum-btn:active:not(:disabled) { transform: translateY(0); }
  /* Trust-bar onder banen-grid in main content (full-width).
     NN Group 2021: trust-signals direct boven primary CTA = +6-9% conversion.
     Plaatsing in picker-col i.p.v. summary-col zodat 't full-width
     onder de slot-grid valt, niet smal in een sidebar. */
  .bk-picker-trust {
    margin-top:var(--sp-4);
    padding:var(--sp-4) var(--sp-4);
    background: rgba(63,163,114,0.06);
    border: 1px solid rgba(63,163,114,0.18);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:var(--sp-2);
    align-items: center;
  }
  .bk-picker-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:var(--sp-2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--ink70, #4a5d6e);
    line-height: 1.25;
    text-align: left;
    min-width: 0;
  }
  .bk-picker-trust-item svg {
    flex-shrink: 0;
    color: #2F7A57;
  }
  @media (max-width: 559px) {
    .bk-picker-trust {
      grid-template-columns: 1fr 1fr 1fr;
      gap:var(--sp-2);
      padding:var(--sp-3);
    }
    .bk-picker-trust-item {
      flex-direction: column;
      text-align: center;
      font-size: 10.5px;
      line-height: 1.25;
      gap:var(--sp-1);
    }
  }
  .bk-sum-mollie {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    margin-top:var(--sp-2);
  }
  .bk-sum-hotel-box {
    background: var(--sky);
    padding:var(--sp-3);
    margin-top:var(--sp-4);
  }
  .bk-sum-hotel-lbl {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom:var(--sp-1);
  }
  .bk-sum-hotel-box p {
    font-size: 12px;
    color: var(--navy);
    margin: 0;
    line-height: 1.5;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  /* Desktop gegevens form (shown in picker col) */
  .bk-desk-form { max-width: 420px; }
  .bk-req { color: #c0392b; }
  .bk-mat-sect { padding:var(--sp-4); background: var(--white); border: 1px solid var(--line); margin-top:var(--sp-4); }
  .bk-mat-titel { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom:var(--sp-3); }
  .bk-mat-toggle { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-2); }
  .bk-mat-btn {
    padding:var(--sp-3) var(--sp-4);
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }
  .bk-mat-btn { transition: border-color 0.15s; }
  .bk-mat-btn:hover:not(.is-active) { border-color: var(--line); background: var(--white); }
  .bk-mat-btn.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

  /* Mockup-stijl materiaal-card (voorstel-apple-booking-volledig.html stap 3):
     lichtgroene tint + green border-left strip. "Gratis"-framing is positief
     en verlaagt loan-hesitation (NN Group Microcopy 2020). Radio-tiles in
     groene tint voor de actieve, wit voor de niet-actieve. */
  /* Booking-pattern checkbox voor materiaal-lenen — add-on voor DEZE
     boeking, geen persistente setting. Vierkant met afgeronde hoeken,
     terracotta accent + wit vinkje wanneer aan. */
  .bk-mat-card {
    background: var(--white);
    border: 1px solid var(--line-soft, rgba(3,83,114,0.10));
    border-radius: 12px;
    padding:var(--sp-4) var(--sp-4);
  }
  .bk-mat-row {
    display: flex;
    align-items: center;
    gap:var(--sp-gap);
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  .bk-mat-text { flex: 1; min-width: 0; }
  .bk-mat-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .bk-mat-sub {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--muted, rgba(3,83,114,0.62));
    margin-top:var(--sp-1);
    line-height: 1.4;
  }
  /* Materiaal-vermelding in de boekflow. Bewust GEEN invoer en geen bedrag
     rechts: dit telt niet mee in de betaling, je rekent het bij de receptie af.
     Zou het eruitzien als een bestelregel, dan verwacht de gast het terug in
     het totaal. Vandaar een informatiekader in plaats van een kaart met teller. */
  .bk-mat-info {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--merk-soft, #EAF0F4);
    border-left: 3px solid var(--navy, #2F4157);
    border-radius: 10px;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .bk-mat-info-kop {
    font-size: 14px; font-weight: 600; color: var(--navy);
    letter-spacing: -0.005em; margin-bottom: var(--sp-2);
  }
  .bk-mat-info-lijst { list-style: none; margin: 0; padding: 0; }
  .bk-mat-info-lijst li {
    font-size: 13.5px; line-height: 1.5; color: var(--navy);
    padding-left: 14px; position: relative;
  }
  .bk-mat-info-lijst li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--navy, #2F4157); opacity: 0.45;
  }
  .bk-mat-info-sub {
    font-size: 12.5px; line-height: 1.45;
    color: var(--muted, rgba(3,83,114,0.62));
    margin-top: var(--sp-2);
  }

  .bk-mat-check {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 0;
    z-index: 1;
  }
  .bk-mat-check-visual {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.5px solid rgba(3,83,114,0.25);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
  }
  .bk-mat-check-visual::after {
    content: '';
    width: 12px;
    height: 7px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity 0.12s;
  }
  .bk-mat-check:checked + .bk-mat-check-visual {
    background: var(--accent, #46677C);
    border-color: var(--accent, #46677C);
  }
  .bk-mat-check:checked + .bk-mat-check-visual::after { opacity: 1; }
  .bk-mat-check:focus-visible + .bk-mat-check-visual {
    outline: 2px solid var(--accent, #46677C);
    outline-offset: 2px;
  }
  .bk-desk-form .bk-field label { font-size: 9px; }
  .bk-desk-form .bk-field input { font-size: 14px; }
  .bk-desk-form .bk-checkbox-row { margin:var(--sp-3) 0 0; }
  .bk-desk-form .bk-included-notice { margin:var(--sp-3) 0 0; }
  .bk-desk-back {
    display: inline-flex;
    align-items: center;
    gap:var(--sp-2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom:var(--sp-5);
  }
}

/* Boekingsflow op mobiel: site-footer + mhead + bottom-nav verbergen.
   De flow heeft zijn eigen .bk-mob-nav (header) + .bk-cta-bar (footer). */
@media (max-width: 1099px) {
  body[data-page="beleven"] .iv-footer,
  body[data-page="beleven"] .iv-bnav,
  body[data-page="beleven"] .iv-bottom-nav,
  body[data-page="beleven"] .iv-mhead { display: none !important; }
}

/* Activity-thumb in mobiele bk-mob-nav (rechtsboven) */
.bk-mob-nav-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* ── MOBILE: hero foto full-width op TIJD-stap ── */
@media (max-width: 1099px) {
  .bk-s2-hero {
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: center;
    margin-bottom:var(--sp-3);
  }

  /* ── MOBILE: personen-stepper sectie ── */
  .bk-mob-pers-grid {
    margin:0 var(--sp-gutter) var(--sp-1);
    background: var(--white);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bk-mob-pers-grid--enkel {
    grid-template-columns: 1fr;
  }
  .bk-mob-pers-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-3);
    border-right: 1px solid var(--line-soft);
    min-width: 0;
  }
  .bk-mob-pers-row:last-of-type { border-right: 0; }
  .bk-mob-pers-info { min-width: 0; text-align: center; }
  .bk-mob-pers-naam {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--navy);
    line-height: 1.2;
  }
  .bk-mob-pers-prijs {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.02em;
  }
  .bk-mob-pers-onder4 {
    grid-column: 1 / -1;
    padding:var(--sp-2) var(--sp-4);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    color: var(--muted);
    background: var(--beige);
    border-top: 1px solid var(--line-soft);
  }
  .bk-mob-stepper { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .bk-mob-step-btn {
    width: 24px; height: 24px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .bk-mob-step-btn:hover { background: var(--navy); color: var(--white); }
  .bk-mob-step-input {
    width: 28px;
    padding: 2px 0;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
    border: 1px solid var(--line);
    background: var(--white);
    -moz-appearance: textfield;
  }
  .bk-mob-step-input::-webkit-outer-spin-button,
  .bk-mob-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   Activity-chrome (overgenomen van /activiteiten/#squash)
   Mobile navy header + breadcrumb-subbar + stepper.
   Werkt met flow.js: gebruik data-deskstep + is-active/is-done.
   ════════════════════════════════════════════════════════════════ */
:root {
  --iv-ad-navy: #035372;
  --iv-ad-navy-d: #024460;
  --iv-ad-beige: #FFFFFF;
  --iv-ad-ink70: rgba(3,83,114,0.7);
  --iv-ad-ink50: rgba(3,83,114,0.5);
  --iv-ad-ink30: rgba(3,83,114,0.3);
  --iv-ad-line: rgba(3,83,114,0.12);
  --iv-ad-ff-display: 'Inter', system-ui, -apple-system, sans-serif;
  --iv-ad-ff-mono: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Skelet-headerbalk (body[data-header]::before, v2.css) is site-breed WIT,
   maar de boek-/checkout-header hieronder is BEIGE. Bij een in-shell
   view-wissel kan iOS de fixed header van de nieuwe view één frame later
   compositen dan de body — dat frame toonde het witte skelet en las als
   "topnav flitst wit" (stap 3 <-> 4). Skelet hier beige maken zodat zo'n
   tussenframe kleurloos opgaat in de echte header. */
body[data-page="beleven"]::before { background: #F5EEEA; }

/* ─── MOBILE HEADER (navy bar, FIXED top) ───
   Symmetrische 1fr auto 1fr grid zodat de titel ALTIJD exact in het
   midden staat (ongeacht breedte van back/lang knoppen). Padding gelijk
   links/rechts. Consistent met /activiteiten/ detail-header.
   Was sticky, maar in iOS-WKWebView (Capacitor) en bij sommige pagina-
   transitions met View Transitions API scrollt sticky toch mee. Fixed
   is brute-force-betrouwbaar — body krijgt padding-top om ruimte vrij
   te houden voor de nav. */
.iv-ad-mobhead {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  z-index: 1000;
  height: 56px;
  background: #F3F0EA;
  color: #2F4157;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding:0 var(--sp-3);
  border-bottom: none;
  margin: 0;
  transform: none !important;
}
/* Body padding-top zodat de eerste sectie (.iv-ad-progress-shell) niet
   onder de fixed navy nav valt. iv-mhead (site-nav) is hier verborgen
   via body[data-page="beleven"], dus we overschrijven die padding-top. */
body[data-page="beleven"] {
  padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
}
@media (min-width: 1100px) {
  body[data-page="beleven"] { padding-top: 0 !important; }
}
.iv-ad-mobhead-back { justify-self: start; }
.iv-ad-mobhead-lang-wrap { justify-self: end; }
.iv-ad-mobhead-btn {
  height: 44px; width: 44px;
  background: none; border: 0; color: inherit;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
/* Mockup-stijl back-knop: rond met lichte witte tint op de navy header.
   32×32 rond met "‹" pijl. (voorstel-apple-booking-volledig.html) */
.iv-ad-mobhead-back {
  background: rgba(20, 34, 51, 0.06);
  border: 0;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #2F4157;
  transition: background 0.15s;
}
/* Iets groter chevron-icoon, mee-geschaald met de grotere knop (was 18px markup). */
.iv-ad-mobhead-back svg { width: 20px; height: 20px; }
.iv-ad-mobhead-back:hover { background: rgba(20, 34, 51, 0.12); }
.iv-ad-mobhead-back:active { transform: scale(0.94); }
.iv-ad-mobhead-logo {
  display: flex; align-items: center; justify-content: center;
  color: #035372;
  text-decoration: none;
}
.iv-ad-mobhead-logo img {
  height: 40px; width: auto; display: block;
  filter: none;
}
/* "Boeken" gecentreerd in plaats van logo (mockup-stijl).
   Activiteit-naam staat al in de iv-ad-progress-shell eronder,
   dus dit is een puur functioneel label "ik ben aan het boeken". */
.iv-ad-mobhead-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #2F4157;
  text-align: center;
  letter-spacing: -0.01em;
}
.iv-ad-mobhead-lang-wrap { position: relative; }
.iv-ad-mobhead-lang {
  height: 36px;
  padding:0 var(--sp-4);
  background: none; border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: inline-flex; align-items: center; gap:var(--sp-2);
  font-family: var(--iv-ad-ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  /* Pill matchend met detail-page taal-toggle. */
  border-radius: 100px;
  transition: background 0.15s;
}
.iv-ad-mobhead-lang:hover { background: rgba(255,255,255,0.08); }
.iv-ad-mobhead-lang-cur { font-weight: 700; }
.iv-ad-mobhead-lang-globe { flex-shrink: 0; opacity: 0.95; }
.iv-ad-mobhead-lang-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--iv-ad-line);
  box-shadow: 0 8px 24px rgba(20,34,51,0.16);
  z-index: 60;
  padding:var(--sp-2);
  display: flex; flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
}
.iv-ad-mobhead-lang-pop[hidden] { display: none !important; }
.iv-ad-mobhead-lang-pop button {
  appearance: none; background: none; border: 0;
  text-align: left;
  padding:var(--sp-3) var(--sp-4);
  font-family: var(--iv-ad-ff-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--iv-ad-navy);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.iv-ad-mobhead-lang-pop button:hover { background: var(--iv-ad-beige); }
@media (min-width: 1100px) {
  .iv-ad-mobhead { display: none; }
}

/* ─── SUB-BAR (desktop): breadcrumb + stepper ─── */
.iv-ad-subbar {
  background: var(--iv-ad-beige);
  border-bottom: 1px solid var(--iv-ad-line);
  padding:var(--sp-4) var(--sp-8);
  display: none;
  grid-template-columns: minmax(0, 1fr) auto; gap:var(--sp-4); align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.iv-ad-subbar::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) {
  .iv-ad-subbar { display: grid; }
}
.iv-ad-crumb {
  display: flex; align-items: center; gap:var(--sp-2);
  font-family: var(--iv-ad-ff-display);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--iv-ad-ink50);
}
.iv-ad-crumb a { color: var(--iv-ad-ink50); text-decoration: none; }
.iv-ad-crumb a:hover { color: var(--iv-ad-navy); }
.iv-ad-crumb .sep { opacity: 0.5; }
.iv-ad-crumb .cur { color: var(--iv-ad-navy); }
.iv-ad-stepper {
  display: flex; align-items: center; gap:var(--sp-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.iv-ad-step {
  display: flex; align-items: center; gap:var(--sp-2);
  flex-shrink: 0;
}
.iv-ad-step-num {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: rgba(47, 65, 87, 0.12);
  border: none;
  color: var(--iv-ad-navy);
  font-family: var(--iv-ad-ff-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Cirkel-stijl (NN Group Progress Indicators 2019: +14% completion). */
  border-radius: 50%;
}
/* Active = accent (terracotta) — visueel "let op, je bent hier".
   Done = navy + checkmark — "afgerond, rust". (Voorstel-stijl mei 2026.) */
.iv-ad-step.is-current .iv-ad-step-num,
.iv-ad-step.is-active .iv-ad-step-num {
  background: var(--iv-ad-accent, #46677C);
  color: #fff;
}
.iv-ad-step.is-done .iv-ad-step-num {
  background: var(--iv-ad-navy);
  color: #fff;
}
.iv-ad-step-lbl {
  font-family: var(--iv-ad-ff-display);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--iv-ad-ink50);
}
.iv-ad-step.is-current .iv-ad-step-lbl,
.iv-ad-step.is-active .iv-ad-step-lbl { color: var(--iv-ad-navy); font-weight: 700; }
.iv-ad-step.is-done .iv-ad-step-lbl { color: var(--iv-ad-navy); }
.iv-ad-step-line {
  width: 16px; height: 1px;
  background: var(--iv-ad-line, rgba(3,83,114,0.12));
  transition: background 0.3s;
  flex-shrink: 0;
}
/* Done-connector navy (matcht done-dot, "stap afgerond"). */
.iv-ad-step.is-done + .iv-ad-step-line,
.iv-ad-step.is-done + .iv-ad-step-line-mobile {
  background: var(--iv-ad-navy);
  height: 1px;
}

/* ─── MOBILE TITEL — activity-naam boven de stepper-mobile ───
   Op smal scherm verbergen we de step-labels (zie media-query
   onder), dus de gast weet anders niet WAT ze boekt. Deze titel
   vult dat gat. Op desktop staat de breadcrumb al, dus verbergen. */
/* Minimalistische progress-shell — vervangt de 3-cirkel-stepper.
   "Activiteitnaam · Stap N van 3" + dunne progress-bar. Apple-stijl.
   Witte achtergrond (mockup-stijl voorstel-apple-booking-volledig.html):
   contrast met crème body geeft duidelijk "header-card" gevoel. */
.iv-ad-progress-shell {
  background: #FFFFFF;
  padding:var(--sp-2) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--iv-ad-line);
  /* Vast onder de topnav: de dunne voortgangsbalk blijft altijd in beeld bij
     scrollen, net als de topnav. (top = hoogte mobiele topnav 56px.) De body
     krijgt extra padding-top zodat de content onder deze balk begint. */
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  max-width: 1140px;
  margin: 0 auto;
  z-index: 900;
}
/* Tekst "Boeken" + "Stap x van 3" verborgen (gebruikerswens): alleen de
   horizontale voortgangsbalk blijft staan. */
.iv-ad-progress-row {
  display: none;
}
.iv-ad-activity-name {
  font-family: var(--iv-ad-ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--iv-ad-navy);
  line-height: 1.15;
  margin: 0;
}
.iv-ad-step-counter {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iv-ad-ink-50, rgba(3,83,114,0.5));
  flex-shrink: 0;
}
/* Legacy iv-ad-mob-titel verborgen (vervangen door iv-ad-progress-shell) */
.iv-ad-mob-titel { display: none; }
/* Mobile-stepper en oude crumb-only desktop sub-bar — verborgen */
.iv-ad-stepper-mobile { display: none !important; }
@media (min-width: 1100px) {
  .iv-ad-mob-titel { display: none; }
  /* Desktop: andere layout (3-koloms) → balk gewoon in-flow, niet fixed. */
  .iv-ad-progress-shell { position: static; max-width: none; padding:var(--sp-gutter) var(--sp-8) var(--sp-5); }
  .iv-ad-activity-name { font-size: 26px; }
}

/* ─── MOBILE STEPPER — boven content op mobiel ─── */
.iv-ad-stepper-mobile {
  display: flex; align-items: center; gap:var(--sp-2);
  background: var(--iv-ad-beige);
  padding:var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--iv-ad-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.iv-ad-stepper-mobile .iv-ad-step { flex-shrink: 0; }
.iv-ad-stepper-mobile .iv-ad-step-num {
  width: 20px; height: 20px;
  font-size: 11px;
}
.iv-ad-stepper-mobile .iv-ad-step-lbl { font-size: 10px; }
/* Onder 500px: alleen cirkels + lijnen tonen, labels verbergen zodat
   alle 4 stappen zichtbaar zijn zonder horizontale scroll. Het actieve
   label staat al elders in de breadcrumb. Lines groeien mee om de hele
   breedte te vullen — anders ogen de dots als een klein klompje midden. */
@media (max-width: 499px) {
  .iv-ad-stepper-mobile {
    justify-content: stretch;
    gap: 0;
    padding:var(--sp-3) var(--sp-gutter);
  }
  .iv-ad-stepper-mobile .iv-ad-step-lbl { display: none; }
  .iv-ad-stepper-mobile .iv-ad-step {
    gap: 0;
    flex: 0 0 auto;
  }
  .iv-ad-stepper-mobile .iv-ad-step-num {
    width: 24px; height: 24px;
    font-size: 12px;
  }
  .iv-ad-step-line-mobile {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin:0 var(--sp-2);
  }
}
.iv-ad-step-line-mobile {
  flex: 1; min-width: 8px;
  height: 2px;
  background: var(--iv-ad-ink30);
  transition: background 0.3s;
}
@media (min-width: 1100px) { .iv-ad-stepper-mobile { display: none; } }

/* Progress-bar onder de mobile stepper — terracotta bar die meegroeit
   per stap. Loss-aversion (Cialdini Commitment): gast ziet "ik ben al
   X% af". NN Group: +14% completion bij visuele progress. */
.iv-ad-progress {
  height: 2px;
  background: var(--iv-ad-ink20, rgba(0,0,0,0.08));
  overflow: hidden;
}
.iv-ad-progress-fill {
  height: 100%;
  background: var(--iv-ad-accent, #46677C);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Progress-bar zichtbaar op alle viewports — gebruiker-feedback mei 2026:
   "metertje moet ook op desktop meelopen". Verbeterde Cialdini-commitment
   trigger werkt evengoed op desktop als mobile. Bar iets dikker (3px)
   op desktop voor betere zichtbaarheid op grotere schermen. */
@media (min-width: 1100px) {
  .iv-ad-progress { height: 3px; }
}

/* ──────── Overrides voor boek-page: iv-ad-mobhead / iv-ad-subbar
   Mobile: 56px padding-top voor de fixed iv-ad-mobhead (zie regel ~3745).
   Desktop: geen padding (de iv-ad-mobhead is daar verborgen + iv-dhead
   heeft eigen layout). */
/* 56px topnav + ~22px vaste voortgangsbalk eronder. */
body[data-page="beleven"] { padding-top: calc(78px + env(safe-area-inset-top, 0px)) !important; }
@media (min-width: 1100px) {
  body[data-page="beleven"] { padding-top: 0 !important; }
}
/* Datum-knop — mobiel: vol-breed; desktop: max 360px gecentreerd */
#dkDatumBtn { display: flex; width: 100%; margin: 0 auto; }
/* Wrapper rond de datum-knop wanneer er geen spelers-stepper naast staat —
   even breed als de dagdeel-tabs eronder (vol-breed binnen picker-kolom). */
.bk-datum-wrap-alone { width: 100%; max-width: 100%; margin: 0 auto; }
@media (min-width: 1100px) {
  .iv-ad-subbar { margin-top: 60px; }
  /* Subbar geeft al 60px clearance; bk-desk-only mag de extra padding-top kwijt */
  .bk-desk-only { padding-top: 0 !important; }
  /* Linker activiteit-sidebar verbergen, alleen picker + summary tonen */
  .bk-desk-grid { grid-template-columns: 1fr 360px !important; max-width: 1140px; margin: 0 auto; }
  .bk-act-col { display: none !important; }
  /* Datum-knop op desktop vol-breed (zelfde breedte als de 3 dagdeel-tabs) */
  #dkDatumBtn { max-width: 100%; }
  /* Bottom-nav (Home/Activiteiten/Eten/Omgeving) is een mobile-pattern,
     verbergen op desktop. Hogere specificity nodig om account-widget.js
     style-injection (display: grid !important) te overrulen. */
  body[data-page="beleven"] .iv-bnav { display: none !important; }
  body[data-page="beleven"] { padding-bottom: 0 !important; }
}

/* ── Standalone checkout-pagina (zelfde chrome als boek-flow) ── */
.bk-checkout-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--sp-gutter) calc(48px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 1100px) {
  .bk-checkout-wrap {
    max-width: 560px;
    padding:var(--sp-2) var(--sp-6) 80px;
  }
}
.bk-checkout-test {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  padding:var(--sp-2) var(--sp-3);
  border-radius: 8px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom:var(--sp-4);
}
.bk-checkout-pay {
  width: 100%;
  margin-top:var(--sp-4);
  padding:var(--sp-4) var(--sp-4);
  border: 0;
  border-radius: 12px;
  background: var(--terracotta, #46677C);
  color: var(--white);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.bk-checkout-pay:hover:not(:disabled) { filter: brightness(1.07); }
.bk-checkout-pay:active:not(:disabled) { transform: translateY(1px); }
.bk-checkout-pay:disabled { opacity: 0.55; cursor: not-allowed; }
.bk-checkout-pay:focus-visible {
  outline: 2px solid var(--terracotta, #46677C);
  outline-offset: 2px;
}
.bk-checkout-cancel {
  display: block;
  text-align: center;
  margin-top:var(--sp-4);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.bk-checkout-cancel:hover { color: var(--navy); }
.bk-checkout-cancel:focus-visible {
  outline: 2px solid var(--terracotta, #46677C);
  outline-offset: 2px;
}
.bk-checkout-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:var(--sp-2);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top:var(--sp-6);
}
/* Checkout-cards ook op mobile (niet alleen desktop picker) */
@media (max-width: 1099px) {
  .bk-checkout-merchant,
  .bk-checkout-card {
    border-radius: 12px;
    margin-bottom:var(--sp-3);
  }
  .bk-checkout-method,
  .bk-checkout-bank { border-radius: 8px; }
}
/* Korte schermen (oude/kleine iPhones, ~667px): compacter zodat de hele
   mock-checkout in één scherm past zonder scrollen. Tall phones (>=812px)
   houden de ruime opzet — die passen al. */
@media (max-width: 1099px) and (max-height: 760px) {
  .bk-checkout-wrap { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)); }
  .bk-checkout-test { margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); }
  .bk-checkout-merchant { margin-bottom:var(--sp-2); }
  .bk-checkout-card { margin-bottom:var(--sp-2); padding:var(--sp-4); }
  .bk-checkout-card-title { margin-bottom:var(--sp-2); }
  .bk-checkout-methods { gap:var(--sp-1); }
  .bk-checkout-method { padding:var(--sp-2) var(--sp-3); }
  .bk-checkout-pay { margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); }
  .bk-checkout-secure { margin-top:var(--sp-3); }
  .bk-checkout-banks { margin-top:var(--sp-2); }
  .bk-checkout-banks-lbl { margin-bottom:var(--sp-1); }
  .bk-checkout-bank { padding:var(--sp-2) var(--sp-3); }
}

/* ════════════════════════════════════════════════════════════════
   BOWLING v2-WIZARD — multistep keuze (Spelers -> Datum -> Tijd).
   Rendert in #bkMobShell (renderBowlingWizard in flow.js). Alleen
   transform/opacity (60fps), reduced-motion-veilig. Token-fallbacks
   zodat het werkt ongeacht welke kleur-vars geladen zijn.
   ════════════════════════════════════════════════════════════════ */
.bkw { --bkw-ease: cubic-bezier(0.16,1,0.3,1); --bkw-back: cubic-bezier(0.34,1.45,0.64,1);
  padding:var(--sp-3) var(--sp-4) 0; font-family:'Inter',system-ui,-apple-system,sans-serif;
  max-width: 480px; margin: 0 auto; }  /* gecentreerd op breed scherm */
/* CTA-bar in wizard-modus: verankerd onderaan als bottom-nav (i.p.v. floating capsule). */
/* Optie 3 — light frosted-glass float met deep-blue knop (uit het voorstel).
   Zwevend los van de randen, frosted/transparant zodat de content er vaag
   doorheen schemert. */
body.bk-wizard #bkCtaBar.bk-cta-bar { left:12px !important; right:12px !important; bottom:calc(12px + env(safe-area-inset-bottom,0)) !important; top:auto !important; margin:0 !important;
  border-radius:20px !important; padding:var(--sp-3) var(--sp-3) !important; gap:var(--sp-3) !important;
  /* Glasslook: translucent wit + backdrop-blur (frosted), lichte glasrand + zachte schaduw. */
  background:rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.7),
    0 8px 30px -8px rgba(20,34,51,.22),
    0 2px 8px -2px rgba(20,34,51,.10) !important; }
/* Edge-to-edge wizard-bar: reset de capsule-hacks van de basis (.bk-cta-bar is
   van origine een floating pill met asymmetrische padding + thumb margin-left:-8px). */
body.bk-wizard .bk-cta-thumb { margin-left:0 !important; }
/* VERDER-knop: zelfde tactiele effect — navy blijft (primaire actie), met een
   glossy witte top-highlight + zachte elevatie zoals de balk/datumknop. */
body.bk-wizard .bk-cta-btn {
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.28),
    inset 0 2px 3px -1px rgba(255,255,255,.16),
    0 1px 2px 0 rgba(3,55,75,.18),
    0 2px 4px 0 rgba(3,55,75,.20),
    0 5px 10px -2px rgba(3,55,75,.22); }
/* Zwevende bar is smaller: samenvatting strakker (minder letter-spacing) + op
   één regel met ellipsis i.p.v. afbreken naar 2 regels. */
body.bk-wizard .bk-cta-sub { letter-spacing:.03em !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Extra bodem-ruimte + safe-area zodat het laatste content-blok (bv. de
   'Met 9 spelers…'-aanbeveling) nooit achter de zwevende Verder-balk schuift.
   96px dekte de balk niet op iPhones waar de safe-area de balk hoger maakt
   (Nick 13 jul, overlap-foto). */
body.bk-wizard .bk-mob-shell { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
/* De gast-bottom-nav is in de wizard verborgen, maar account-widget.js zet
   tóch body[data-page="beleven"]{padding-bottom:160px} voor die nav — dat gaf
   lege scrollruimte onder de wizard. Hard naar 0 (hogere specificity wint van
   de injectie). */
html body.bk-wizard { padding-bottom: 0 !important; padding-top: 0 !important; }
/* iOS: boekflow als VASTE app-layout. position:fixed maakt de body gelijk aan de
   zichtbare viewport → géén document-scroll of rubber-band-bounce (de betrouwbare
   iOS-manier; overscroll-behavior op de root werkt daar niet). De inhoud
   (#bkMobShell) vult de ruimte onder de vaste 56px-header en scrollt ALLEEN
   intern als een stap hoger is dan het scherm (zeldzaam). De vaste header/CTA/
   trust blijven staan; bij toetsenbord-focus brengt de interne scroll het veld
   in beeld. preventBounce (chrome.js) is de fallback voor oudere iOS. */
html:has(body.bk-wizard) { overscroll-behavior: none; }
body.bk-wizard { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
/* `overflow-x: clip` staat er expliciet bij, en dat is geen overbodige regel:
   met alleen `overflow-y: auto` REKENT de browser `overflow-x` om van
   `visible` naar `auto` (CSS Overflow: zodra één as niet-visible is, kan de
   andere dat niet blijven). Deze shell werd daardoor een horizontale
   scroller die niemand heeft bedoeld, en ving de veeg op die de dagenstrip
   doorgaf. Gemeten op 28 aug 2026: getComputedStyle gaf hier overflow-x
   "auto" terwijl er nergens een regel stond die dat vroeg.
   `clip` en niet `hidden`: hidden maakt er alsnog een scrollbaar vak van
   dat met script of focus te verschuiven is, clip niet. */
body.bk-wizard #bkMobShell { position: absolute; top: calc(56px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch; padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
/* Wizard heeft z'n eigen stappen-balk (1·2·3·4) — verberg de losse progress-bar erboven. */
body.bk-wizard .iv-ad-progress, body.bk-wizard .iv-ad-progress-shell { display: none !important; }
.bkw-steps { display:flex; align-items:flex-start; position:relative; margin:var(--sp-1) var(--sp-2) var(--sp-6); }
.bkw-line { position:absolute; left:14%; right:14%; top:13px; height:3px; background: var(--bkw-track); border-radius:2px; }
.bkw-line-fill { position:absolute; left:14%; top:13px; height:3px; width:72%; background: linear-gradient(90deg, var(--accent,#46677C), var(--deep,#035372)); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .5s var(--bkw-ease); }
.bkw-dot { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.bkw-ball { width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--bkw-track); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color: var(--muted,rgba(27,42,59,.6)); transition: transform .35s var(--bkw-back), background .3s, border-color .3s, color .3s; }
.bkw-dot.is-on .bkw-ball { background: var(--deep,#035372); border-color: var(--deep,#035372); color:#fff; transform: scale(1.14); }
.bkw-dot.is-done .bkw-ball { background: var(--accent,#46677C); border-color: var(--accent,#46677C); color:#fff; }
.bkw-lbl { font-size:11px; font-weight:600; color: var(--muted,rgba(27,42,59,.6)); transition: color .3s; }
.bkw-dot.is-on .bkw-lbl { color: var(--navy,#2F4157); }
/* 5-stippen journey-stepper (Datum·Tijd·Gegevens·Betalen·Klaar): krapper zodat
   5 stippen + labels op een telefoon passen; de lijn loopt van de eerste t/m de
   laatste stip (centers op 10/30/50/70/90%); vervolg-stippen (Betalen/Klaar)
   gedimd tot ze actief zijn. Gedeeld door de wizard, het Mollie-betaalscherm
   én de QR-bevestiging. Aantal is samengevoegd in stap 1 (Datum). */
.bkw-steps.is5 { margin:var(--sp-1) 2px var(--sp-5); }
.bkw-steps.is5 .bkw-ball { width:26px; height:26px; font-size:11px; }
.bkw-steps.is5 .bkw-dot { gap:var(--sp-1); }
.bkw-steps.is5 .bkw-lbl { font-size:10px; letter-spacing:-.01em; }
.bkw-steps.is5 .bkw-line { left:10%; right:10%; top:11px; }
.bkw-steps.is5 .bkw-line-fill { left:10%; right:auto; width:80%; top:11px; }
.bkw-dot--tail .bkw-ball { background:#fff; border-color: var(--bkw-track); color: var(--muted,rgba(27,42,59,.45)); }
.bkw-dot--tail .bkw-lbl { color: var(--muted,rgba(27,42,59,.45)); }
.bkw-vp { position:relative; overflow:hidden; transition: height .28s var(--bkw-ease); } /* motion-audit #7: 420→280ms */
.bkw-step { position:absolute; top:0; left:0; right:0; opacity:0; transform: translateX(56px); transition: opacity .32s ease, transform .42s var(--bkw-ease); pointer-events:none; padding-bottom:18px; }
.bkw-step.is-active { opacity:1; transform:none; pointer-events:auto; }
/* De stappen liggen absolute-gestapeld op elkaar. Forceer pointer-events:none op
   ÁLLE kinderen van een niet-actieve stap, zodat een interne override (zoals het
   standaard-open kortingscode-veld met pointer-events:auto) niet onzichtbaar over
   de actieve stap ligt en taps opvangt. Bug 20 jul: starttijd-slot reageerde niet
   omdat het open kortingscode-veld van de gegevens-stap eroverheen lag. */
.bkw-step:not(.is-active) * { pointer-events:none !important; }
.bkw-step.is-prev { opacity:0; transform: translateX(-56px); }
.bkw-step h2 { font-weight:700; font-size:20px; color: var(--navy,#2F4157); margin:0 0 var(--sp-1); }
.bkw-hint { font-size:13px; color: var(--muted,rgba(27,42,59,.6)); margin:0 0 var(--sp-gutter); }
.bkw-stepper { display:flex; align-items:center; justify-content:center; gap:var(--sp-gap); }
.bkw-step--center { text-align:center; }
/* Datum-stap (stap 1) heeft twee sub-schermen onder dezelfde stip: kalender
   (fase 0) → aantal/duur (fase 1). Alleen het actieve sub-scherm is zichtbaar;
   de vp-hoogte volgt via bkwSetVpHoogte(). Het aantal-scherm is gecentreerd,
   net als de oude losse Aantal-stap. */
.bkw-dsub-wrap > .bkw-dsub--aantal { display:none; }
.bkw-dsub-wrap[data-fase="1"] > .bkw-dsub--cal { display:none; }
.bkw-dsub-wrap[data-fase="1"] > .bkw-dsub--aantal { display:block; }
.bkw-dsub--aantal { text-align:left; }
.bkw-dsub-in { animation: bkwDsubIn .34s var(--bkw-ease) both; }
@keyframes bkwDsubIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform:none; } }

/* ── Datum-strip (niet-huur wizard): circulaire dag-chips ────────────────────
   Gevraagde stijl (jun 2026): dag-naam boven, getal in een rondje, maand eronder;
   horizontaal scrollbaar door het boekvenster. Geselecteerde dag = gevuld navy
   rondje. Staat ónder het aantal-blok (.bkw-datum-combi → aantal boven, datum onder). */
.bkw-datum-combi { text-align:left; }
.bkw-datum-combi > div + div { margin-top: var(--sp-6,28px); }  /* ruimte tussen datum- en aantal-blok, volgorde-onafhankelijk */
.bkw-combi-datum > h2 { margin-bottom: var(--sp-1,4px); }
/* Personen-teller + banen-chip links uitlijnen (i.p.v. gecentreerd) — sluiten
   aan op de links uitgelijnde kop/hint. Alleen op het combi-scherm, niet elders. */
.bkw-combi-aantal .bkw-stepper { justify-content:flex-start; }
.bkw-combi-aantal .bkw-banen-chip-wrap { justify-content:flex-start; }
.bkw-strip {
  display:flex; gap: var(--sp-3,12px);
  overflow-x:auto; overflow-y:hidden;
  /* HOUD DE VEEG BINNEN DE STRIP (28 aug 2026).
     Nick veegde de dagenstrip voorbij het laatste kaartje en zag de hele
     pagina meeschuiven, zonder terug te komen. Zonder deze regel geeft de
     strip de beweging door aan zijn ouder (`overscroll-behavior-x` is
     standaard `auto` = doorgeven), en die ouder is #bkMobShell, die er zelf
     ook geen stokje voor steekt.

     De bestaande vangregel `html, body { overscroll-behavior-x: none }` in
     iselmar-v2.css r149 helpt hier niet: die staat BUITEN deze keten en komt
     er dus nooit aan te pas. Het moet op de scroller zelf. Dezelfde aanpak
     staat al in site/activiteiten/index.html r1041. */
  overscroll-behavior-x: contain;
  padding: var(--sp-2,8px) 2px var(--sp-1,4px);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.bkw-strip::-webkit-scrollbar { display:none; }
.bkw-strip-cell {
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:4px 0; margin:0;
  cursor:pointer; scroll-snap-align:center;
  font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.bkw-strip-cell .dow {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color: var(--navy,#2F4157);
}
.bkw-strip-cell .circ {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--beige-dark,#E6D9CF); background: var(--white,#fff);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:18px; font-weight:600; color: var(--navy,#2F4157);
  transition: background .16s var(--bkw-ease,ease), border-color .16s var(--bkw-ease,ease), color .16s var(--bkw-ease,ease), transform .16s var(--bkw-back,ease);
}
.bkw-strip-cell .dmon {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:12px; font-weight:500; color: var(--navy,#2F4157);
}
.bkw-strip-cell:hover:not(.is-active):not(.is-dim) .circ { border-color: var(--navy,#2F4157); }
.bkw-strip-cell.is-active .circ { background: var(--navy,#2F4157); border-color: var(--navy,#2F4157); color:#fff; transform:scale(1.06); }
.bkw-strip-cell.is-dim { opacity:.34; pointer-events:none; }
.bkw-strip-cell.is-dim .circ { background: var(--beige,#F5EEEA); }
/* Volgeboekte dag: niet kiesbaar, grijs rondje + leesbaar "vol"-label (geen
   volledige fade zoals dim, anders is 'vol' onleesbaar). */
.bkw-strip-cell.is-vol { pointer-events:none; }
.bkw-strip-cell.is-vol .dow { color: var(--muted,rgba(27,42,59,.6)); }
.bkw-strip-cell.is-vol .circ { background: var(--beige,#F5EEEA); border-color: var(--beige-dark,#E6D9CF); color: var(--muted,rgba(27,42,59,.55)); }
.bkw-strip-cell.is-vol .dmon { color: var(--danger,#DC2626); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.bkw-strip-cell:focus-visible { outline:none; }
.bkw-strip-cell:focus-visible .circ { outline:2px solid var(--accent,#46677C); outline-offset:2px; }
.bkw-step-btn { width:42px; height:42px; border-radius:50%; border:none; background: var(--deep,#035372); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform .14s var(--bkw-back), background .2s, opacity .2s; -webkit-tap-highlight-color:transparent; }
.bkw-step-btn:active { transform: scale(.84); }
.bkw-step-btn.at-limit { opacity:.32; }
.bkw-step-val { width:64px; height:42px; background:#fff; border:1.5px solid var(--bkw-track); border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bkw-num { font-weight:700; font-size:22px; color: var(--navy,#2F4157); }
.bkw-num.up { animation: bkwRollUp .34s var(--bkw-ease); }
.bkw-num.dn { animation: bkwRollDn .34s var(--bkw-ease); }
@keyframes bkwRollUp { from{opacity:0;transform:translateY(70%)} to{opacity:1;transform:none} }
@keyframes bkwRollDn { from{opacity:0;transform:translateY(-70%)} to{opacity:1;transform:none} }
.bkw-prijs { margin-top:var(--sp-4); font-size:13px; color: var(--muted,rgba(27,42,59,.6)); }
.bkw-prijs b { color: var(--deep,#035372); font-weight:700; font-size:15px; }
.bkw-shake { animation: bkwShake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes bkwShake { 10%,90%{transform:translateX(-1px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.bkw-cal-btn { display:flex; align-items:center; gap:var(--sp-3); width:100%; background:#EDEDED; border:0; border-radius:100px; padding:var(--sp-4); font-weight:700; font-size:16px; color: var(--navy,#2F4157); cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow: inset 0 1px 0 0 #ffffff, inset 0 2px 3px -1px rgba(255,255,255,.9), 0 3px 6px -3px rgba(0,0,0,.12), 0 8px 14px -6px rgba(0,0,0,.14); transition: box-shadow .2s; }
.bkw-cal-btn.is-set { border-color: var(--accent,#46677C); }
.bkw-cal-btn svg { width:20px; height:20px; color: var(--accent-d,#0A6685); flex:0 0 auto; }
.bkw-cal-val { color: var(--muted,rgba(27,42,59,.6)); font-weight:600; }
.bkw-cal-btn.is-set .bkw-cal-val { color: var(--navy,#2F4157); font-weight:700; }
.bkw-sheet-wrap { position:fixed; inset:0; z-index:1200; pointer-events:none; }
.bkw-sheet-wrap.open { pointer-events:auto; }
.bkw-backdrop { position:absolute; inset:0; background:rgba(15,42,59,.34); opacity:0; transition:opacity .4s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.bkw-sheet-wrap.open .bkw-backdrop { opacity:1; }
.bkw-sheet { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:22px 22px 0 0; padding:var(--sp-gutter) var(--sp-gutter) calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -12px 34px -8px rgba(3,55,75,.32); transform: translateY(108%); transition: transform .48s var(--bkw-ease); max-width:520px; margin:0 auto; }
.bkw-sheet-wrap.open .bkw-sheet { transform: translateY(0); }
.bkw-sheet-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.bkw-sheet-h b { font-size:17px; color: var(--navy,#2F4157); }
.bkw-sheet-close { width:32px; height:32px; border-radius:50%; border:none; background: var(--beige,#F5EEEA); color: var(--navy,#2F4157); font-size:16px; cursor:pointer; }
.bkw-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.bkw-cal-nav button { width:34px; height:34px; border-radius:50%; border:none; background: var(--beige,#F5EEEA); color: var(--navy,#2F4157); cursor:pointer; font-size:16px; }
.bkw-cal-nav button:disabled { opacity:.3; cursor:not-allowed; }
.bkw-cal-month { font-weight:700; color: var(--navy,#2F4157); font-size:15px; }
.bkw-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-1); text-align:center; }
.bkw-cal-dow { font-size:10px; font-weight:600; color: var(--muted,rgba(27,42,59,.6)); text-transform:uppercase; padding-bottom:var(--sp-1); }
.bkw-cal-day { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color: var(--navy,#2F4157); border-radius:50%; cursor:pointer; z-index:1; border:0; background:transparent; padding:0; margin:0; width:100%; font-family:inherit; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.bkw-cal-day.dim { color: var(--beige-dark,#E6D9CF); pointer-events:none; }
.bkw-pill { position:absolute; inset:3px; border-radius:50%; background: var(--deep,#035372); z-index:-1; transform: scale(0.6); opacity:0; }
.bkw-cal-day.sel { color:#fff; }
.bkw-cal-day.sel .bkw-pill { opacity:1; transform:scale(1); animation: bkwPillPop .42s var(--bkw-back); }
@keyframes bkwPillPop { 0%{transform:scale(0.6);opacity:0} 60%{opacity:1} 100%{transform:scale(1);opacity:1} }
.bkw-sheet-wrap.open .bkw-cal-day:not(.dim) { animation: bkwDayIn .5s var(--bkw-ease) backwards; }
/* Volgeboekte dag (nog niet voorbij): klein VOL-label, niet kiesbaar. */
.bkw-cal-day.vol { flex-direction:column; gap:0; font-size:12.5px; color: var(--muted,rgba(27,42,59,.5)); pointer-events:none; cursor:default; }
.bkw-cal-vol { font-size:7px; font-weight:800; letter-spacing:.05em; line-height:1; margin-top:1px; color: var(--danger,#DC2626); }

/* ── Huur-wizard (fiets/sloep): range-kalender + type-steppers ─────────── */
/* Tussenliggende dagen van een verhuurperiode: lichte pill, geen pop. */
.bkw-cal-day.mid { color: var(--navy,#2F4157); }
.bkw-cal-day.mid .bkw-pill { opacity:.18; transform:scale(1); animation:none; }
/* Uitleg-regel bovenin de kalender-sheet (alleen verhuur). */
.bkw-cal-hint { padding:0 var(--sp-gutter) var(--sp-2); font-size:12.5px; line-height:1.45; color: var(--muted,rgba(27,42,59,.6)); }
/* "Klaar"-knop onderin de sheet: bij verhuur blijft de sheet open voor een
   tweede tik (periode), dus sluiten gebeurt expliciet. */
.bkw-cal-done { display:block; width:calc(100% - 32px); margin:12px 16px calc(16px + env(safe-area-inset-bottom,0)); padding:var(--sp-3); border:0; border-radius:12px; background: var(--navy,#2F4157); color:#fff; font:700 14px 'Inter',system-ui,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bkw-cal-done:active { transform:scale(.98); }
.bkw-cal-done[hidden] { display:none; }
/* Sub-regel onder een stepper-label ("3 beschikbaar", toeslag-info). */
.bkw-huur-vrij { display:block; font-size:11px; font-weight:500; letter-spacing:.01em; color: var(--muted,rgba(27,42,59,.6)); margin-top:2px; text-transform:none; }
@keyframes bkwDayIn { from{opacity:0;transform:translateY(8px) scale(.9)} to{opacity:1;transform:none} }
.bkw-slot-grp { margin-bottom:var(--sp-4); }
.bkw-slot-grp-lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted,rgba(27,42,59,.6)); margin:0 0 var(--sp-2); }
.bkw-slot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.bkw-slot { position:relative; overflow:hidden; border:1.5px solid var(--bkw-track); background:#fff; border-radius:11px; padding:var(--sp-3) var(--sp-1); text-align:center; font-weight:600; font-size:13.5px; color: var(--navy,#2F4157); cursor:pointer; -webkit-tap-highlight-color:transparent; z-index:0; transition: background-color .25s ease, border-color .25s ease; }
.bkw-slot-lbl { position:relative; z-index:1; transition: color .25s ease; }
/* Selectie-vulling via background-color, NIET via een scaleX-wipe op een
   pseudo-element: iOS Safari liet daarbij een witte streep staan aan de
   linkerkant van het geselecteerde vak (border-radius + overflow + transform
   rasterisatie-bug). Kleur-transitie is artefact-vrij en even soepel. */
.bkw-slot.sel { background: var(--deep,#035372); border-color: var(--deep,#035372); }
.bkw-slot.sel .bkw-slot-lbl { color:#fff; }
.bkw-slot.unavail { opacity:.38; text-decoration:line-through; cursor:not-allowed; }
.bkw-slots-in .bkw-slot { animation: bkwSlotIn .5s var(--bkw-ease) backwards; }
@keyframes bkwSlotIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.bkw-empty { padding:var(--sp-7) var(--sp-2); text-align:center; color: var(--muted,rgba(27,42,59,.6)); font-size:13.5px; }
/* duur-keuze + advies (spelers-stap) */
/* Advies-balk in een transitie-wrap: glijdt in/uit (max-height + opacity) i.p.v.
   abrupt verschijnen/inklappen. Toont nu énkel het advies — de banen-info zit in
   de chip (geen dubbeling). */
.bkw-advies-wrap { overflow:hidden; max-height:0; opacity:0; margin-top:0; transition:max-height .34s var(--bkw-ease), opacity .26s ease, margin-top .34s var(--bkw-ease); }
.bkw-advies-wrap.is-shown { max-height:140px; opacity:1; margin-top:var(--sp-4); }
.bkw-advies { font-size:13px; line-height:1.5; color: var(--accent-d,#0A6685); background:rgba(70,103,124,.10); border:1px solid rgba(70,103,124,.20); border-radius:11px; padding:var(--sp-3) var(--sp-3); text-align:left; }
.bkw-advies b { color: var(--navy,#2F4157); }
.bkw-duur-h { margin:var(--sp-5) 0 var(--sp-2); font-weight:700; font-size:14px; color: var(--navy,#2F4157); text-align:left; }
.bkw-duur { display:flex; gap:var(--sp-2); margin-top:var(--sp-3); }
.bkw-duur button { position:relative; flex:1; border:1.5px solid var(--bkw-track); background:#fff; border-radius:12px; padding:var(--sp-3) var(--sp-1); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); transition:border-color .2s, background .2s, box-shadow .2s, transform .12s var(--bkw-back); -webkit-tap-highlight-color:transparent; }
.bkw-duur button:active { transform:scale(.96); }
.bkw-duur .d-lbl { font-weight:700; font-size:14px; color: var(--navy,#2F4157); transition:color .2s; }
.bkw-duur .d-prijs { font-size:11.5px; color: var(--muted,rgba(27,42,59,.6)); transition:color .2s; }
/* Geselecteerde duur-kaart: donkerblauw gevuld + witte tekst + schaduw —
   consistent met de teller-knoppen en de VERDER-knop. */
.bkw-duur button.is-on { border-color: var(--deep,#035372); background: var(--deep,#035372); box-shadow:0 7px 16px -8px rgba(3,55,75,.55); }
.bkw-duur button.is-on .d-lbl { color:#fff; }
.bkw-duur button.is-on .d-prijs { color:rgba(255,255,255,.82); }
/* "Aanbevolen"-pill (terracotta) op de aangeraden duur — leesbaar op zowel de
   witte als de donkerblauw-geselecteerde kaart. Alleen zichtbaar bij 7+ spelers. */
/* Lichtblauwe "Aanbevolen"-pill (accent) — leesbaar op wit én op de donkerblauwe
   geselecteerde kaart. */
.bkw-duur-rec { position:absolute; top:-9px; left:50%; transform:translateX(-50%); background: var(--accent,#46677C); color:#fff; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2.5px var(--sp-2); border-radius:100px; white-space:nowrap; box-shadow:0 3px 9px -3px rgba(70,103,124,.6); }
.bkw-duur-rec[hidden] { display:none; }
/* ── Bowling dagdeeltarief (14 jul): tijd-eerst-flow ──
   Tarief-badge op de tijd-tegel (€25/u daluren · €30/u overig) + eigen
   Duur-stap ná de tijd met het exacte totaal per optie. */
.bkw-slot-tarief { position:relative; z-index:1; display:block; margin-top:2px; font-size:10px; font-weight:600; color: var(--muted,rgba(27,42,59,.6)); transition: color .25s ease; }
.bkw-slot-tarief.is-dal { color: var(--success,#059669); }
.bkw-slot.sel .bkw-slot-tarief { color:rgba(255,255,255,.85); }
.bkw-slot-grid--tarief .bkw-slot { padding-top:var(--sp-2); padding-bottom:var(--sp-2); }
/* Duur-stap: grotere kaarten dan de inline variant op de spelers-stap. */
.bkw-duur--stap { margin-top:var(--sp-5); }
.bkw-duur--stap button { padding:var(--sp-4) var(--sp-1); }
.bkw-duur--stap .d-lbl { font-size:15px; }
.bkw-duur--stap .d-prijs { font-size:12.5px; }
.bkw-duur button.unavail { opacity:.42; cursor:not-allowed; }
.bkw-duur button.unavail .d-prijs { font-size:10px; }
.bkw-dal-tag { display:inline-block; margin-left:4px; background:rgba(5,150,105,.12); color: var(--success,#059669); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1.5px 7px; border-radius:100px; vertical-align:1px; }
.bkw-duur-note { margin-top:var(--sp-3); font-size:12px; color: var(--muted,rgba(27,42,59,.6)); text-align:left; }
.bkw-duur-note[hidden] { display:none; }
/* dagdeel-toggle (tijd-stap) — segmented control */
.bkw-dagdeel { position:relative; display:flex; gap:0; background:rgba(87,124,142,.14); padding:var(--sp-1); border-radius:100px; margin-bottom:var(--sp-4); box-shadow:inset 0 1px 2px rgba(3,55,75,.08); }
.bkw-dd-pill { position:absolute; top:4px; bottom:4px; left:0; border-radius:100px; background:#fff; box-shadow:0 1px 4px rgba(3,55,75,.14); opacity:0; z-index:0; will-change:transform; transform:translateX(0); transition:transform .42s cubic-bezier(0.34,1.37,0.64,1), width .28s ease; }
.bkw-dagdeel button { position:relative; z-index:1; flex:1; border:none; background:transparent; border-radius:100px; padding:var(--sp-2) var(--sp-2); font-family:inherit; font-weight:600; font-size:13px; color: var(--muted,rgba(27,42,59,.6)); cursor:pointer; transition:color .35s cubic-bezier(0.22,1,0.36,1); -webkit-tap-highlight-color:transparent; }
.bkw-dagdeel button.is-on { color: var(--navy,#2F4157); }
.bkw-dagdeel button:disabled { opacity:.34; cursor:not-allowed; }
/* form-velden (gegevens-stap) — floating label + validatie.
   Motion = 1-op-1 het login-scherm (theme.css .lf-float): label krimpt bij
   focus/gevuld naar boven (.3s expo-out) i.p.v. te verdwijnen; rand blijft
   accent zolang het veld gevuld is. 16px input-font = iOS-no-zoom, behouden. */
.bkw-field { position:relative; margin-bottom:var(--sp-4); }
.bkw-field input { width:100%; height:56px; border:1.5px solid var(--bkw-track); border-radius:12px; padding:10px 14px 0; font-size:16px; font-family:inherit; color: var(--ink,#1B2A3B); background:#fff; outline:none; transition:border-color .25s, box-shadow .25s; }
.bkw-field input::placeholder { opacity:0; }
/* top:28px = het midden van de 56px-input, NIET 50% van de container:
   als de foutmelding (.bkw-verr, zit ín .bkw-field) verschijnt groeit de
   container en zou een %-top het label omlaag trekken. */
.bkw-fhint{ font:500 11.5px 'Inter',sans-serif; color:var(--muted,rgba(27,42,59,.55)); margin:6px 2px 0 4px; }
.bkw-field label { position:absolute; left:15px; top:28px; transform:translateY(-50%); font-size:15px; color: var(--muted,rgba(27,42,59,.6)); pointer-events:none; transform-origin:left center; white-space:nowrap; max-width:calc(100% - 30px); overflow:hidden; text-overflow:ellipsis; transition:transform .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1); will-change:transform; }
.bkw-field input:focus { border-color: var(--accent,#46677C); box-shadow:0 0 0 4px rgba(70,103,124,.16); }
.bkw-field input:focus + label,
.bkw-field input:not(:placeholder-shown) + label,
.bkw-field input:-webkit-autofill + label {
  /* -50% behoudt de verticale centrering; -17px tilt 'm daarbovenuit. */
  transform: translateY(calc(-50% - 17px)) scale(.72);
  color: var(--accent,#46677C);
  font-weight:600;
}
/* Rand kleurt óók zolang het veld gevuld is (niet alleen focus) — login-demo-gedrag.
   Vóór de .ok/.err-regels zodat die states blijven winnen. */
.bkw-field input:not(:placeholder-shown) { border-color: var(--accent,#46677C); }
@media (prefers-reduced-motion: reduce) {
  .bkw-field label { transition: color .3s ease; }
}
.bkw-field.ok input { border-color: var(--ok,#0E9E6E); }
.bkw-field.err input { border-color: var(--err,#D8553F); animation:bkwShake .4s cubic-bezier(.36,.07,.19,.97); }
.bkw-verr { font-size:11.5px; color: var(--err,#D8553F); margin-top:var(--sp-1); }
.bkw-opt { color: var(--muted,rgba(27,42,59,.55)); font-weight:400; }
/* checkboxes (gegevens-stap) */
/* Checkbox-rijen op de gegevens-stap: altijd dezelfde kaart-UI (rackets lenen
   én marketing-opt-in), consistent over alle activiteiten. */
.bkw-check { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--bkw-track); border-radius:14px; background:#fff; margin:2px 0 var(--sp-1); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bkw-check input { position:absolute; opacity:0; width:0; height:0; }
.bkw-check-box { flex:0 0 auto; width:22px; height:22px; border:1.5px solid var(--bkw-track); border-radius:7px; background:#fff; position:relative; transition:background .2s, border-color .2s; margin-top:1px; }
.bkw-check-box::after { content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0.4); transform-origin:center; transition:transform .22s var(--bkw-back); }
.bkw-check input:checked + .bkw-check-box { background: var(--deep,#035372); border-color: var(--deep,#035372); }
.bkw-check input:checked + .bkw-check-box::after { transform:rotate(45deg) scale(1); }
.bkw-check input:focus-visible + .bkw-check-box { outline:2px solid var(--accent,#46677C); outline-offset:2px; }
.bkw-check-lbl { font-size:13.5px; line-height:1.4; color: var(--navy,#2F4157); }
/* trust-lijst (gegevens-stap) */
/* Gegevens-stap als kolom zodat de trust-regel (iDEAL · e-mail · annuleren)
   naar onderen zakt, vlak boven de bottom-bar i.p.v. direct onder de velden. */
/* Gegevens-stap: vaste trust-balk boven de CTA i.p.v. in de scroll-flow — zo
   bewegen de badges niet mee én hoeft de stap niet te scrollen (geldt voor alle
   activiteiten). Alleen zichtbaar met .show (gezet door gotoStep op 'gegevens'). */
.bkw-trust { position:fixed; left:0; right:0; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index:30; list-style:none; margin:0; padding:var(--sp-2) var(--sp-4); background:transparent; display:none; flex-wrap:wrap; justify-content:center; gap:var(--sp-2) var(--sp-2); }
.bkw-trust.show { display:flex; }
.bkw-trust li { position:relative; padding-left:var(--sp-4); font-size:11px; color: var(--muted,rgba(27,42,59,.7)); white-space:nowrap; }
.bkw-trust li::before { content:''; position:absolute; left:1px; top:2px; width:4px; height:8px; border:solid var(--ok,#0E9E6E); border-width:0 2px 2px 0; transform:rotate(45deg); }
/* aantal-banen-keuze (spelers-stap) */
.bkw-banen-h { margin:var(--sp-5) 0 var(--sp-2); font-weight:700; font-size:14px; color: var(--navy,#2F4157); text-align:center; }
.bkw-banen { display:flex; gap:var(--sp-2); }
.bkw-banen-val { display:flex; justify-content:center; margin-bottom:2px; }
.bkw-banen button { flex:1; border:1.5px solid var(--bkw-track); background:#fff; border-radius:12px; padding:var(--sp-3) var(--sp-1); cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; color: var(--navy,#2F4157); transition:border-color .2s, background .2s, transform .12s var(--bkw-back); -webkit-tap-highlight-color:transparent; }
.bkw-banen button:active { transform:scale(.96); }
.bkw-banen button.is-on { border-color: var(--deep,#035372); background:rgba(3,83,114,.06); }
.bkw-banen button:disabled { opacity:.34; cursor:not-allowed; }
.bkw-banen-note { margin:var(--sp-2) auto 0; max-width:300px; font-size:12px; line-height:1.45; color: var(--muted,rgba(27,42,59,.62)); text-align:center; }
/* Compacte banen-chip onder de teller (vervangt de losse banen-kaart). De
   volledige uitleg zit in een tooltip achter het info-icoontje. */
.bkw-banen-chip-wrap { position:relative; display:flex; justify-content:center; margin-top:var(--sp-4); }
.bkw-banen-chip { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:100px; border:1px solid var(--bkw-track); background:#fff; font-family:inherit; font-weight:600; font-size:13px; color: var(--navy,#2F4157); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .15s, transform .12s var(--bkw-back); }
.bkw-banen-chip:active { transform:scale(.97); }
.bkw-banen-chip[aria-expanded="true"] { border-color: var(--deep,#035372); }
.bkw-banen-chip-ico { font-size:15px; line-height:1; }
.bkw-banen-chip-i { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background: var(--beige,#F5EEEA); color: var(--muted,rgba(27,42,59,.62)); font-size:10px; font-weight:700; font-style:italic; font-family:Georgia,'Times New Roman',serif; }
.bkw-banen-tip { position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:240px; max-width:78vw; background: var(--navy,#2F4157); color:#fff; font-size:12px; line-height:1.45; padding:var(--sp-3) var(--sp-3); border-radius:10px; box-shadow:0 10px 28px -10px rgba(20,34,51,.55); z-index:6; text-align:left; animation:bkwTipIn .18s var(--bkw-ease); }
.bkw-banen-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color: var(--navy,#2F4157); }
.bkw-banen-tip[hidden] { display:none; }
@keyframes bkwTipIn { from { opacity:0; transform:translate(-50%,4px); } to { opacity:1; transform:translate(-50%,0); } }
/* Aantal-stap, kindprijs-variant (adventuregolf): dubbele teller volw + kids. */
.bkw-pers2 { display:flex; flex-direction:column; gap:var(--sp-3); max-width:340px; margin:var(--sp-2) 0 0; }
.bkw-pers2-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-gap); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border:1.5px solid var(--bkw-track); border-radius:14px; background:#fff; }
.bkw-pers2-lbl { font-weight:600; font-size:14.5px; color: var(--navy,#2F4157); text-align:left; }
.bkw-stepper--sm { gap:var(--sp-3); }
.bkw-stepper--sm .bkw-step-btn { width:42px; height:42px; font-size:24px; }
.bkw-stepper--sm .bkw-step-val { width:50px; height:42px; border-radius:12px; }
.bkw-stepper--sm .bkw-num { font-size:18px; }
/* Rackets/ballen-lenen checkbox (tennis/squash): label met sub-tekst, card-stijl. */
.bkw-check--mat { padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--bkw-track); border-radius:14px; background:#fff; margin:2px 0 var(--sp-1); }
.bkw-check-sub { display:block; margin-top:2px; font-size:12px; font-weight:400; color: var(--muted,rgba(27,42,59,.62)); }
/* Adventuregolf Tijd-stap: uur-picker (uur-tegels) + starttijd-grid + multi-slot-samenvatting. */
.bkw-uur-h { display:flex; align-items:center; gap:var(--sp-2); font-weight:700; font-size:14px; color: var(--navy,#2F4157); margin:0 0 var(--sp-3); }
.bkw-uur-num { flex:0 0 auto; width:20px; height:20px; border-radius:50%; background: var(--deep,#035372); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.bkw-uur-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.bkw-uur { display:flex; flex-direction:column; align-items:center; gap:2px; border:1.5px solid var(--bkw-track); background:#fff; border-radius:11px; padding:var(--sp-2) var(--sp-1); font-weight:700; font-size:15px; color: var(--navy,#2F4157); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s, background .2s, transform .12s var(--bkw-back); }
.bkw-uur:active { transform:scale(.95); }
.bkw-uur.is-on { border-color: var(--deep,#035372); background:rgba(3,83,114,.06); }
.bkw-uur.is-vol { opacity:.4; cursor:not-allowed; }
.bkw-uur-sub { font-size:10px; font-weight:600; letter-spacing:.02em; color: var(--muted,rgba(27,42,59,.6)); text-transform:uppercase; }
.bkw-uur.is-on .bkw-uur-sub { color: var(--deep,#035372); }
.bkw-uur.is-sel { border-color: var(--deep,#035372); background: rgba(3,83,114,.10); }
.bkw-uur.is-sel .bkw-uur-sub { color: var(--deep,#035372); font-weight:700; }
.bkw-slot-sum { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; background:rgba(3,83,114,.06); border-radius:10px; padding:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-3); font-size:13px; font-weight:600; color: var(--navy,#2F4157); }
.bkw-slot-sum-eye { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--deep,#035372); }
.bkw-slot-sum-meta { margin-left:auto; font-size:12px; font-weight:400; color: var(--muted,rgba(27,42,59,.6)); }
@media (prefers-reduced-motion: reduce) {
  .bkw-vp, .bkw-step, .bkw-sheet, .bkw-backdrop, .bkw-num, .bkw-cal-day, .bkw-slot, .bkw-line-fill, .bkw-ball, .bkw-pill, .bkw-dsub-in, .bkw-advies-wrap, .bkw-banen-tip, .bkw-strip-cell .circ { animation:none !important; transition:none !important; }
  .bkw-step:not(.is-active) { display:none; }
  /* Reduced-motion: geen slide-animatie, maar de sheet MOET wél verbergen.
     `transform:none` liet 'm zichtbaar (translateY(108%) ís de verberg-stand) →
     op iPhones met "Verminder beweging" aan sloot de kalender visueel niet,
     terwijl de open-class wél verdween. translateY houdt dicht/open in stand;
     transition:none (hierboven) maakt het instant i.p.v. geanimeerd. */
  /* Geen bounce, maar een korte rustige slide i.p.v. een instant-sprong
     (consistent met de switcher) — zacht voor reduced-motion, niet vestibulair. */
  .bkw-sheet { transform: translateY(108%); transition: transform 0.2s ease !important; }
  .bkw-sheet-wrap.open .bkw-sheet { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   CLEAN REFERENTIESTIJL — boekmodule reskin (16 jun 2026)
   Warme crème-basis + donkerblauw #2F4157. Scoped op body.bk-wizard zodat de
   rest van de site ongemoeid blijft; overschrijft ook de eerdere experimenten
   (neumorfisme/glas/teal). Boekingslogica / QR / confetti ONaangeroerd.
   v1: bestaande structuur (genummerde stepper + datum-sheet) clean gethemed;
   inline kalender + streepjes-stepper = vervolgstap.
   ════════════════════════════════════════════════════════════════════ */
body.bk-wizard{
  --deep:#2F4157; --accent:#2F4157; --navy:#2F4157;   /* alle selectie-states → navy */
  --bkw-track:rgba(47,65,87,.20);
  --rf-cream:#F3F0EA; --rf-line:#E7E2D8; --rf-soft:#ECE6DC;
}
body.bk-wizard, body.bk-wizard #bkMobShell{ background:var(--rf-cream) !important; }
body.bk-wizard .bkw-step h2{ color:#2F4157 !important; font-family:'Inter',system-ui,-apple-system,sans-serif !important; }

/* datumknop — clean wit veld (reset neumorf-experiment) */
body.bk-wizard .bkw-cal-btn{
  background:#fff !important; border:1px solid var(--rf-line) !important; border-radius:16px !important;
  box-shadow:0 2px 8px -5px rgba(20,34,51,.18) !important; color:#2F4157 !important;
}
/* witte invoer/keuze-vlakken met warme rand */
body.bk-wizard .bkw-field input,
body.bk-wizard .bkw-step-val,
body.bk-wizard .bkw-check,
body.bk-wizard .bkw-check--mat,
body.bk-wizard .bkw-pers2-row,
body.bk-wizard .bkw-uur,
body.bk-wizard .bkw-slot,
body.bk-wizard .bkw-duur button,
body.bk-wizard .bkw-banen button,
body.bk-wizard .bkw-banen-chip{
  background:#fff !important; border:1px solid var(--rf-line) !important;
}
/* geselecteerd → navy (vult de var-override aan voor zekerheid) */
body.bk-wizard .bkw-slot.sel,
body.bk-wizard .bkw-duur button.is-on{ background:#2F4157 !important; border-color:#2F4157 !important; color:#fff !important; }
/* invulveld focus/gevuld → navy rand + zachte ring (login-motion, in de
   navy-taal van de wizard-restyle; wint van de generieke !important-rand) */
body.bk-wizard .bkw-field input:focus,
body.bk-wizard .bkw-field input:not(:placeholder-shown){ border-color:#2F4157 !important; }
body.bk-wizard .bkw-field input:focus{ box-shadow:0 0 0 4px rgba(47,65,87,.12) !important; }
/* kalender-knopjes warm crème */
body.bk-wizard .bkw-sheet-close,
body.bk-wizard .bkw-cal-nav button{ background:var(--rf-soft) !important; color:#2F4157 !important; }
/* CTA-balk — clean wit (reset glas-experiment) + navy knop */
body.bk-wizard #bkCtaBar.bk-cta-bar{
  background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid var(--rf-line) !important; box-shadow:0 12px 30px -12px rgba(20,34,51,.26) !important;
}
body.bk-wizard .bk-cta-btn{ background:#577C8E !important; box-shadow:none !important; } /* steel: één actie-kleur (11 jul) */
body.bk-wizard .bk-cta-btn:hover:not(:disabled){ background:#46677C !important; filter:none; }

/* streepjes-stepper: bolletjes → platte balkjes (is-on/is-done blijven vullen) */
body.bk-wizard .bkw-steps .bkw-line,
body.bk-wizard .bkw-steps .bkw-line-fill,
body.bk-wizard .bkw-lbl{ display:none !important; }
body.bk-wizard .bkw-dot{ align-items:stretch !important; gap:0 !important; }
body.bk-wizard .bkw-ball{
  display:block !important; width:auto !important; min-width:0 !important; height:5px !important;
  margin:0 3px !important; border-radius:100px !important; background:rgba(47,65,87,.18) !important;
  border:0 !important; font-size:0 !important; color:transparent !important; box-shadow:none !important; transform:none !important;
}
body.bk-wizard .bkw-dot.is-on .bkw-ball,
body.bk-wizard .bkw-dot.is-done .bkw-ball{ background:#2F4157 !important; }

/* inline kalender (niet-verhuur): het verplaatste sheet-paneel als statisch inline-blok */
body.bk-wizard #bkwCalInline{ margin-top:12px; }
body.bk-wizard #bkwCalInline .bkw-sheet{
  position:static !important; transform:none !important; max-width:none !important; margin:0 !important;
  box-shadow:none !important; border-radius:18px !important; padding:14px !important;
  background:#fff !important; border:1px solid var(--rf-line) !important; transition:none !important;
}
body.bk-wizard #bkwCalInline .bkw-sheet-h,
body.bk-wizard #bkwCalInline .bkw-sheet-close,
body.bk-wizard #bkwCalInline .bkw-cal-hint{ display:none !important; }
/* "Klaar"-knop: bij losse datum (niet-verhuur) bevestigt de dag-klik direct →
   verborgen. Bij verhuur (fiets/sloep) is 't een periode → "Klaar" bevestigt de
   range, dus daar WEL tonen (full-width in de inline kaart). */
body.bk-wizard #bkwCalInline:not(.bkw-cal-inline--huur) .bkw-cal-done{ display:none !important; }
body.bk-wizard #bkwCalInline.bkw-cal-inline--huur .bkw-cal-done{ width:100%; margin:14px 0 2px; }

/* chrome-elementen op de wizard meekleuren met crème (waren grijs/navy) */
body.bk-wizard .iv-ad-mobhead{ background:#F3F0EA !important; }   /* top-header crème (sinds 16 jun app-breed) */
body.bk-wizard::before{ background:#F3F0EA !important; }          /* skelet-headerbalk in de safe-area boven */
body.bk-wizard::after{ background:#F3F0EA !important; }           /* safe-area-vuller onderaan (was navy #205070) */

/* Tijd-stap: uur-tegels (+ banen) selected → navy-vulling, net als de tijdsloten
   (hadden alleen een rand + flauwe tint → leek geen selected state) */
body.bk-wizard .bkw-uur.is-on,
body.bk-wizard .bkw-uur.is-sel,
body.bk-wizard .bkw-banen button.is-on{ background:#2F4157 !important; border-color:#2F4157 !important; color:#fff !important; }
body.bk-wizard .bkw-uur.is-on .bkw-uur-sub,
body.bk-wizard .bkw-uur.is-sel .bkw-uur-sub{ color:rgba(255,255,255,.82) !important; }

/* ══ Floating-label-motion op de overige gegevens-paden (3 jul 2026) ══
   Zelfde responsiviteit als het backoffice-inlogscherm: bij een leeg,
   niet-gefocust veld ligt het label groot ín het veld; bij focus/gevuld
   krimpt het (.3s expo-out) naar zijn kleine vaste positie. De eindstaat
   is exact het bestaande design (boarding-card / klein uppercase label) —
   alleen de lege rust-staat en de beweging zijn nieuw. Zonder :has()
   (oude browsers) blijft alles zoals het was. */
@supports selector(:has(*)) {
  /* — Desktop boarding-card (.bk-s3-field, renderDesktopGegevens) — */
  .bk-s3-field:has(.bk-s3-field-input) { position: relative; }
  .bk-s3-field .bk-s3-field-lbl {
    transform-origin: left top;
    transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }
  /* Rust-staat (leeg + geen focus): label zakt naar de input-regel, op
     placeholder-grootte. 10px × 1.5 = 15px ≈ de input-tekst. */
  .bk-s3-field:has(.bk-s3-field-input:placeholder-shown:not(:focus)) .bk-s3-field-lbl {
    transform: translateY(15px) scale(1.5);
  }
  /* Label vervangt de placeholder-functie — hint niet dubbel tonen. */
  .bk-s3-field:has(.bk-s3-field-lbl) .bk-s3-field-input::placeholder { color: transparent; }
  /* Focus/gevuld: label op z'n kleine plek (transform:none = bestaande
     positie) en in accent — de login-kleurwissel. */
  .bk-s3-field:has(.bk-s3-field-input:focus) .bk-s3-field-lbl,
  .bk-s3-field:has(.bk-s3-field-input:not(:placeholder-shown)) .bk-s3-field-lbl {
    color: var(--accent, #46677C);
  }

  /* — Klassiek pad (.bk-field, label boven een veld met eigen border) — */
  .bk-field:has(> input) { position: relative; }
  .bk-field:has(> input) label {
    transform-origin: left top;
    transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }
  .bk-field:has(> input:placeholder-shown:not(:focus)) label {
    /* het veld in: label-regel (9px) + marge + input-padding ≈ 26px omlaag */
    transform: translateY(26px) scale(1.55);
  }
  .bk-field:has(> input) input::placeholder { color: transparent; }
  .bk-field:has(> input:focus) label,
  .bk-field:has(> input:not(:placeholder-shown)) label {
    color: var(--accent, #46677C);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bk-s3-field .bk-s3-field-lbl, .bk-field:has(> input) label { transition: color .3s ease; }
}

/* ── Kortingscode in de checkout (hotelgasten, 16 jul 2026) ── */
.bk-korting-blok{ margin:10px 0 14px; }
.bk-korting-open{ background:none; border:none; padding:0; font:600 13.5px 'Inter',sans-serif;
  color:var(--merk-tekst,#46677C); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; }
.bk-korting-invoer{ display:flex; gap:8px;
  /* Openklap-animatie: de vraag blijft staan als label, het veld schuift
     eronder open (max-height-techniek werkt ook op oud WebKit). */
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transform:translateY(-4px); pointer-events:none;
  transition:max-height .26s cubic-bezier(.22,1,.36,1), opacity .22s ease,
    transform .26s cubic-bezier(.22,1,.36,1), margin-top .26s cubic-bezier(.22,1,.36,1); }
.bk-korting-blok.is-open .bk-korting-invoer{ max-height:64px; opacity:1;
  transform:none; margin-top:8px; pointer-events:auto; }
.bk-korting-chev{ margin-left:2px; vertical-align:-2px;
  transition:transform .26s cubic-bezier(.22,1,.36,1); }
.bk-korting-blok.is-open .bk-korting-chev{ transform:rotate(180deg); }
.bk-korting-blok.is-open .bk-korting-open{ text-decoration:none; }
@media (prefers-reduced-motion:reduce){
  .bk-korting-invoer, .bk-korting-chev{ transition:none; }
}
.bk-korting-invoer input{ flex:1 1 auto; min-width:0; padding:11px 14px; font:500 14px 'Inter',sans-serif;
  border:1.5px solid var(--beige-dark,#E6D9CF); border-radius:12px; background:#fff;
  text-transform:uppercase; color:var(--ink,#1B2A3B); }
.bk-korting-invoer input:focus{ outline:2px solid var(--accent,#46677C); outline-offset:1px; border-color:transparent; }
.bk-korting-pas{ padding:11px 18px; font:600 14px 'Inter',sans-serif; color:#fff;
  background:var(--accent,#46677C); border:none; border-radius:100px; cursor:pointer; }
.bk-korting-fout{ margin-top:7px; font:500 13px 'Inter',sans-serif; color:var(--danger,#DC2626); }
.bk-korting-toegepast{ display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--merk-soft,#EAF0F4); border-radius:12px; }
.bk-korting-tag{ font:700 13px 'Inter',sans-serif; letter-spacing:.04em; color:var(--navy,#2F4157); }
.bk-korting-min{ font:600 13px 'Inter',sans-serif; color:var(--merk-tekst,#46677C); }
.bk-korting-weg{ margin-left:auto; background:none; border:none; cursor:pointer;
  color:rgba(27,42,59,.55); font-size:14px; padding:4px 6px; }
.bk-korting-weg:hover{ color:var(--danger,#DC2626); }
.bk-korting-oud{ opacity:.55; font-weight:500; margin-right:4px; }