/* Mobile-first tweaks for booking flow */
:root { --card-pad: 14px; --wb-step-size: 28px; }

/* Stappen-indicator */
.wb-cal-wrap{ max-width:600px; margin:0 auto; }
/* Starttijd-blokken in kiosk-stijl: gecentreerde flex-wrap, brand-kleuren */
.wb-times{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.wb-times .wb-times-hint{ flex:0 0 100%; width:100%; text-align:center; }
.wb-times .wb-slot{ min-width: 90px; }
.wb-steps{ background:#fff; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 6px; }
.wb-steps .wb-step{ display:inline-flex; align-items:center; gap:8px; color:#6c757d; text-align:center; cursor:pointer; }
.wb-steps .wb-step-index{ width:var(--wb-step-size); height:var(--wb-step-size); border-radius:50%; border:2px solid var(--bs-secondary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; background:#fff; }
.wb-steps .wb-step-label{ white-space:nowrap; font-size:0.9rem; }
.wb-steps .wb-step.active .wb-step-index{ border-color: var(--bs-primary); background: var(--bs-primary); color:#fff; }
.wb-steps .wb-step.done .wb-step-index{ border-color: var(--bs-success); background: var(--bs-success); color:#fff; }
.wb-steps .wb-step.active .wb-step-label{ color: var(--bs-primary); font-weight:600; }
.wb-steps .wb-step.done .wb-step-label{ color: var(--bs-success); }

/* Square image wrappers (1:1) shared across booking flow */
.img-square { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #f5f5f5; border-radius: inherit; }
.img-square > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-square-thumb { width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; display: inline-block; background-color: #f5f5f5; }
.img-square-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-square-sm { width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; display: inline-block; background-color: #f5f5f5; }
.img-square-sm > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Productselectie (fietsen): 16:9 afbeeldingen */
#bikesGrid .img-square { aspect-ratio: 16 / 9; }

/* Kiosk-achtige parent/subcategorie kaarten */
/* +25% grotere activiteit-blokken (1000px -> 1250px) */
.k-parent-grid { max-width: 1250px; margin: 0 auto; }
.k-parent-grid .card { position:relative; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; cursor: pointer; }
.k-parent-grid .k-parent-img { width:100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display:block; background:#fff; }
.k-parent-grid .k-parent-overlay { position:absolute; left:0; right:0; bottom:0; padding:12px 14px 0px; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); color:#fff; }
.k-parent-grid .k-parent-ribbon { position:absolute; left:14px; bottom:40px; background:#08acae; color:#fff; font-weight:700; letter-spacing:.5px; font-size:.8rem; padding:6px 10px; border-radius:6px; text-transform:uppercase; box-shadow:0 4px 10px rgba(0,0,0,.15); font-family:system-ui, sans-serif; }
.k-parent-grid .k-parent-title { font-size: var(--k-parent-title-size, 1.52rem); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.5); font-family:system-ui, sans-serif; }
.k-parent-grid .k-parent-badge { position:absolute; top:10px; right:10px; }

/* Mobiel: compacte, niet-afbrekende stappenbalk (toon alleen de genummerde
   bolletjes; de stapnaam staat al als kop in elke sectie). */
@media (max-width: 767.98px){
  .wb-steps{ flex-wrap: nowrap; gap: 10px; justify-content: center; overflow-x: auto; }
  .wb-steps .wb-step-label{ display: none; }
  .wb-steps .wb-step{ gap: 0; }
}
@media (max-width: 576px){
  :root { --wb-step-size: 26px; --k-parent-title-size: 1.32rem; }
  .wb-steps{ gap: 8px; }
  /* Kalender en CTA's volledige breedte voor makkelijker tikken */
  .wb-cal-wrap{ max-width: 100%; }
  #wb_go_to_categories{ width: 100%; }
}
:root { --card-pad: 14px; }

.card > .card-body { padding: var(--card-pad); }

.signature-box { position: relative; height: 160px; background: #fff; }
.signature-box canvas { display: block; touch-action: none; }

.category-card { cursor: pointer; transition: transform .08s ease; }
.category-card:hover { transform: translateY(-2px); }
.category-selected { outline: 3px solid var(--bs-primary); }

.bike-card { cursor: pointer; }
.bike-selected { outline: 3px solid #198754; }

#alert { position: sticky; top: .75rem; z-index: 100; }

/* Booking buttons palette: follow global primary/secondary */
.btn-primary{
  --bs-btn-bg: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-disabled-bg: var(--bs-primary) !important;
  --bs-btn-disabled-border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-secondary{
  --bs-btn-bg: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-bg: var(--bs-secondary) !important;
  --bs-btn-hover-border-color: var(--bs-secondary) !important;
  --bs-btn-active-bg: var(--bs-secondary) !important;
  --bs-btn-active-border-color: var(--bs-secondary) !important;
  --bs-btn-disabled-bg: var(--bs-secondary) !important;
  --bs-btn-disabled-border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus{
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--bs-secondary) !important;
  --bs-btn-hover-border-color: var(--bs-secondary) !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--bs-secondary) !important;
  --bs-btn-active-border-color: var(--bs-secondary) !important;
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus{
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

@media (min-width: 576px){
  .signature-box { height: 200px; }
}

/* Sticky topbalk met acties (inloggen + mandje-knop) */
.wb-sticky-top{ position:sticky; top:0; z-index:1031; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.wb-topbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 6px; }
.wb-topbar-title{ font-weight:700; }
.wb-topbar-actions{ display:flex; align-items:center; gap:8px; }
.wb-cart-wrap{ position:relative; }
.wb-cart-panel{ position:absolute; right:0; top:calc(100% + 8px); width:min(320px, 92vw); background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:1050; padding:12px; max-height:70vh; overflow:auto; }