/* ============================================================
   ONKD Tours / Rondleidingen
   Styles for tour overview, tour detail, interactive map.

   Specificity note: this project uses Tailwind preflight which
   resets headings/buttons. To make sure this CSS wins regardless
   of source-order, every rule below is scoped under one of:
     .onkd-tours-overview, .onkd-tour-detail, .onkd-active-route,
     .onkd-tours-shell, .onkd-map
   so that selectors include both element + class + ancestor.
   ============================================================ */

:root {
  --onkd-tour-primary: #10263c;
  --onkd-tour-accent: #ff7e29;
  --onkd-tour-accent-dark: #e66a14;
  --onkd-tour-stop: #c81e1e;
  --onkd-tour-bg: #ffffff;
  --onkd-tour-bg-muted: #f3f4f6;
  --onkd-tour-thumb-bg: #d6d8de;
  --onkd-tour-border: #e5e7eb;       /* Figma "Other/Border" */
  --onkd-tour-text: #333333;         /* Figma "Text/Body" */
  --onkd-tour-text-muted: #666666;   /* Figma "Text/Label" */
  --onkd-tour-inactive: #87929d;
  --onkd-tour-slate: #425363;
  --onkd-tour-seg-inactive: #d9d9d9;
  --onkd-tour-audio-muted: #c5c5c5;   /* Figma audiospeler-grijs (pill/restart-rand) */
  --onkd-tour-map-bg: #d9d9d9;        /* Figma "Brand/Tertiary" — kaart-achtergrond */
  --onkd-tour-radius: 8px;
  --onkd-tour-radius-lg: 12px;
  --onkd-tour-btn-radius: 0; /* Figma "ONKD Button Primary": vierkante hoeken */
  --onkd-tour-shadow: 0 1px 4px rgba(20, 30, 50, 0.06);
  --onkd-tour-shadow-lg: 0 8px 24px rgba(20, 30, 50, 0.14);
  /* Figma: Roboto overal. Roboto wordt al geladen via blocks.custom.build.css
     (Google Fonts @import in master.cshtml); systeemfonts blijven fallback. */
  --onkd-tour-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ----------------------------------------------------------------
     Type-scale tokens (ClickUp 869dqcp87) — één herbruikbare structuur
     voor hiërarchische content, afgestemd op de EXACTE Figma-typeschaal
     (uitgelezen via de Figma REST API, file 6gpFQrZ2c0kjkm1GeyBVnh).
     Pas deze toe via `font: var(--onkd-type-…)` i.p.v. losse literals.
       H1  Roboto 700 24/30      H2 Roboto 700 20/25     H3 Roboto 700 16/20
       body Roboto 400 16/24     caption Roboto 500 13/19.5
       navlabel Roboto 500 10/12.5 (bottom-nav)          tiny 12 (overig klein)
       badge Roboto 700 12 (nummer-cirkel, lh:1 voor centrering)
       button Roboto 500 14/17.5 (knop-/topbar-labels)
     NB: Figma body/caption hebben ~0.01em letter-spacing; dat is sub-pixel
     (~0.13–0.16px) en past niet in de `font`-shorthand → bewust weggelaten. */
  --onkd-type-h1: 700 1.5rem/1.25 var(--onkd-tour-font);    /* 24 / 30 */
  --onkd-type-h2: 700 1.25rem/1.25 var(--onkd-tour-font);   /* 20 / 25 */
  --onkd-type-h3: 700 1rem/1.25 var(--onkd-tour-font);      /* 16 / 20 */
  --onkd-type-body: 400 1rem/1.5 var(--onkd-tour-font);     /* 16 / 24 */
  --onkd-type-caption: 500 0.8125rem/1.5 var(--onkd-tour-font); /* 13 / 19.5 */
  --onkd-type-navlabel: 500 0.625rem/1.25 var(--onkd-tour-font); /* 10 / 12.5 */
  --onkd-type-tiny: 500 0.75rem/1 var(--onkd-tour-font);    /* 12 */
  --onkd-type-badge: 700 0.75rem/1 var(--onkd-tour-font);   /* 12, nummer-cirkel */
  --onkd-type-button: 500 0.875rem/1.25 var(--onkd-tour-font); /* 14 / 17.5 */
  --onkd-type-subheading: 500 1rem/1.25 var(--onkd-tour-font); /* Figma "Subheading 1": Roboto Medium 16 (menu-items, POI-CTA) */
  --onkd-type-button-primary: 700 0.875rem/1.5 var(--onkd-tour-font); /* Figma "ONKD Button Primary": Roboto Bold 14 / 150% */
  --onkd-type-body-sm: 400 0.875rem/1.5 var(--onkd-tour-font); /* Roboto Regular 14 (segmented-toggle, kaart-POI-preview-omschrijving) */
}

/* ============================================================
   App shell (narrow, Figma-like) — used by both overview and detail
   ============================================================ */

.onkd-tours-shell {
  max-width: 480px;
  margin: 0 auto;
  background: var(--onkd-tour-bg);
  font-family: var(--onkd-tour-font);
  color: var(--onkd-tour-text);
  min-height: 100vh;
  position: relative;
  /* Canvas mag niet breder worden dan het scherm: geen horizontale scroll /
     gap rechts bij uitzoomen (869dure54). `clip` breekt sticky-headers niet. */
  overflow-x: clip;
}

.onkd-tours-shell *,
.onkd-tours-shell *::before,
.onkd-tours-shell *::after {
  box-sizing: border-box;
}

/* Top bar (Figma "Frame 42" — location switcher / Scan / language) */
.onkd-tours-shell__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onkd-tour-border);
  background: var(--onkd-tour-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.onkd-tours-shell__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  /* Figma "Location detail": Roboto Bold 24px (H1), #10263c. */
  font: var(--onkd-type-h1);
  color: var(--onkd-tour-primary);
  cursor: pointer;
  padding: 4px 0;
}

/* Switcher variant: native <select> overlaid on top of the visible label so
   tapping anywhere on the label opens the picker. Cursor stays a pointer
   and the chevron keeps doing its job. */
.onkd-tours-shell__location--switcher {
  position: relative;
}
.onkd-tours-shell__location--switcher select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
}
/* Chevron flips to point up while the picker is open (focus-within is the
   cross-browser proxy for the native select's open state). No underline on
   the label name. */
.onkd-tours-shell__location-chevron {
  transition: transform 0.15s ease;
}
.onkd-tours-shell__location--switcher:focus-within .onkd-tours-shell__location-chevron {
  transform: rotate(180deg);
}

.onkd-tours-shell__topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0; /* Figma: elke actie heeft eigen 12px horizontale padding */
}

.onkd-tours-shell__topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--onkd-tour-primary);
  cursor: pointer;
  /* Figma "Scan/Language button": px-12 py-8, Roboto Medium 14px. */
  padding: 8px 12px;
  font: var(--onkd-type-button);
}

.onkd-tours-shell__topbar-action svg {
  display: block;
}

/* Taalkiezer: compacte weergave (globe + taalcode, géén vlag — ClickUp
   869dqcpc2) met de echte <select> transparant eroverheen, zodat het
   geopende menu de volledige taalnamen toont maar de topbar compact blijft
   (zelfde patroon als de locatie-switcher). */
.onkd-tours-shell__lang {
  position: relative;
}
.onkd-tours-shell__lang-code {
  font: var(--onkd-type-button);
  text-transform: uppercase;
}
.onkd-tours-shell__lang select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

/* ============================================================
   Overview (Routes - 1 / Routes - 4)
   ============================================================ */

.onkd-tours-overview {
  padding: 16px;
}

.onkd-tours-overview .onkd-tours-overview__title {
  font: var(--onkd-type-h1);
  color: var(--onkd-tour-text);
  margin: 8px 0 4px;
  letter-spacing: -0.01em;
}

.onkd-tours-overview .onkd-tours-overview__intro {
  color: var(--onkd-tour-text-muted);
  margin: 0 0 16px;
  font: var(--onkd-type-body);
}

.onkd-tours-overview .onkd-tours-list,
.onkd-tours-overview .onkd-tours-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 0;
  list-style-type: none;
}

.onkd-tours-overview .onkd-tours-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onkd-tours-overview .onkd-tour-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--onkd-tour-bg);
  border: 1px solid var(--onkd-tour-border);
  border-radius: var(--onkd-tour-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.onkd-tours-overview .onkd-tour-card:hover,
.onkd-tours-overview .onkd-tour-card:focus-visible {
  border-color: var(--onkd-tour-primary);
  box-shadow: var(--onkd-tour-shadow);
  text-decoration: none;
}

.onkd-tours-overview .onkd-tour-card.is-active {
  border-color: var(--onkd-tour-primary);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.18);
}

.onkd-tours-overview .onkd-tour-card__thumb {
  width: 56px;
  height: 70px;
  border-radius: 6px;
  background: var(--onkd-tour-thumb-bg);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.onkd-tours-overview .onkd-tour-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onkd-tours-overview .onkd-tour-card__name {
  font: var(--onkd-type-h3);
  color: var(--onkd-tour-text);
  margin: 0;
}

.onkd-tours-overview .onkd-tour-card__meta {
  color: var(--onkd-tour-text-muted);
  font: var(--onkd-type-caption);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.onkd-tours-overview .onkd-tour-card__meta--active {
  color: var(--onkd-tour-primary);
  font-weight: 500;
}

.onkd-tours-overview .onkd-tour-card__meta--active svg {
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   Detail (Routes - 2)
   ============================================================ */

.onkd-tour-detail {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--onkd-tour-bg);
  font-family: var(--onkd-tour-font);
  color: var(--onkd-tour-text);
}

.onkd-tour-detail *,
.onkd-tour-detail *::before,
.onkd-tour-detail *::after {
  box-sizing: border-box;
}

.onkd-tour-detail .onkd-tour-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onkd-tour-border);
  position: sticky;
  top: 0;
  background: var(--onkd-tour-bg);
  z-index: 5;
}

.onkd-tour-detail .onkd-tour-detail__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--onkd-tour-text);
  text-decoration: none;
  flex-shrink: 0;
}

.onkd-tour-detail .onkd-tour-detail__back:hover {
  background: var(--onkd-tour-bg-muted);
}

.onkd-tour-detail .onkd-tour-detail__title {
  font: var(--onkd-type-h3);
  margin: 0;
  flex: 1;
  text-align: center;
  color: var(--onkd-tour-text);
}

.onkd-tour-detail .onkd-tour-detail__lang select {
  border: 1px solid var(--onkd-tour-border);
  border-radius: 6px;
  padding: 6px 8px;
  background: white;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.onkd-tour-detail .onkd-tour-detail__body {
  padding: 16px;
}

.onkd-tour-detail .onkd-tour-detail__heading {
  font: var(--onkd-type-h1);
  margin: 16px 0 8px;
  color: var(--onkd-tour-text);
}

.onkd-tour-detail .onkd-tour-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--onkd-tour-text-muted);
  font: var(--onkd-type-caption);
  margin: 0 0 12px;
}

.onkd-tour-detail .onkd-tour-detail__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--onkd-tour-text-muted);
  display: inline-block;
}

.onkd-tour-detail .onkd-tour-detail__description {
  color: var(--onkd-tour-text);
  line-height: 1.5;
  margin: 0 0 24px;
  font: var(--onkd-type-body);
}

.onkd-tour-detail .onkd-tour-detail__section-title {
  font: var(--onkd-type-h2);
  margin: 24px 0 10px;
  color: var(--onkd-tour-text);
}

/* POI list */
.onkd-tour-detail .onkd-poi-list,
.onkd-tour-detail .onkd-poi-list li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.onkd-tour-detail .onkd-poi-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--onkd-tour-border);
  border-radius: var(--onkd-tour-radius-lg);
  overflow: hidden;
  background: var(--onkd-tour-bg);
}

.onkd-tour-detail .onkd-poi-list li {
  margin: 0;
  padding: 0;
}

.onkd-tour-detail .onkd-poi-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--onkd-tour-bg);
  cursor: pointer;
  border: 0;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  min-height: 64px;
}

.onkd-tour-detail .onkd-poi-list li + li > .onkd-poi-list__item {
  border-top: 1px solid var(--onkd-tour-border);
}

.onkd-tour-detail .onkd-poi-list__item:hover,
.onkd-tour-detail .onkd-poi-list__item.is-active {
  background: var(--onkd-tour-bg-muted);
}

.onkd-tour-detail .onkd-poi-list__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--onkd-tour-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--onkd-type-badge);
  flex-shrink: 0;
}

.onkd-tour-detail .onkd-poi-list__thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--onkd-tour-thumb-bg);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.onkd-tour-detail .onkd-poi-list__name {
  flex: 1;
  font: var(--onkd-type-h3);
  color: var(--onkd-tour-text);
}

/* Start/CTA buttons */
.onkd-tour-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  /* Figma "ONKD Button Primary / Medium" (REST 326:6266): 44px hoog, label
     Roboto 14px Bold, line-height 150% (21px). Tekst stond op 16px (h3) wat te
     dik/groot oogde — ClickUp 869duvc5u. min-height + flex centreert verticaal. */
  min-height: 44px;
  padding: 0 16px;
  background: var(--onkd-tour-accent);
  color: white;
  border: 0;
  border-radius: var(--onkd-tour-btn-radius);
  font: var(--onkd-type-button-primary); /* Figma "ONKD Button Primary": Bold 14/150% (ClickUp 869dqcp87) */
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}
/* Kleine knop-variant (Figma "Size=Small", REST 326:7784): 40px hoog. */
.onkd-tour-cta--small {
  min-height: 40px;
}

.onkd-tour-cta:hover,
.onkd-tour-cta:focus-visible {
  background: var(--onkd-tour-accent-dark);
  text-decoration: none;
  color: white;
}

.onkd-tour-cta:active { transform: translateY(1px); }

.onkd-tour-cta--ghost {
  background: var(--onkd-tour-bg-muted);
  color: var(--onkd-tour-text);
}

.onkd-tour-cta--ghost:hover {
  background: var(--onkd-tour-border);
  color: var(--onkd-tour-text);
}

/* ============================================================
   Interactive map (Leaflet)
   ============================================================ */

.onkd-map {
  position: relative;
  width: 100%;
  height: 320px;
  background: var(--onkd-tour-bg);
  border-radius: var(--onkd-tour-radius-lg);
  overflow: hidden;
  border: 1px solid var(--onkd-tour-border);
}

.onkd-map--inline {
  margin: 0 0 16px;
}

.onkd-map .onkd-map__leaflet {
  width: 100%;
  height: 100%;
}

.onkd-map .onkd-map__loading {
  position: absolute;
  inset: 0;
  z-index: 500; /* boven de Leaflet-panes zodat de kaart-init eronder verborgen blijft */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ondoorzichtige kaart-achtergrondkleur: de kaart eronder bepaalt/centreert z'n
     view terwijl dit 'm afdekt, zodat de "sprong" niet zichtbaar is (ClickUp 869dvaj9m). */
  background: var(--onkd-tour-map-bg);
  color: var(--onkd-tour-text-muted);
  font: var(--onkd-type-caption);
  pointer-events: none;
}

.onkd-map .leaflet-container {
  background: transparent;
  font-family: inherit;
}

/* Zoom-knoppen (Figma "Button - Zoom in/out"): één witte afgeronde container
   met de + en − gestapeld, gescheiden door een 1px #e5e7eb divider. */
.onkd-map .leaflet-control-zoom.leaflet-bar {
  border: 0;
  border-radius: 10px; /* Figma "Container" (REST 377:2093) */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 38, 60, 0.18);
}
.onkd-map .leaflet-control-zoom a,
.onkd-map .leaflet-control-zoom a:hover {
  width: 44px;
  height: 44px;
  /* +/−-glyphs exact uit de icon-pack (REST 377:2095/2099); flexbox centreert
     ze i.p.v. line-height (anders staan ze niet gecentreerd — 869duzpnz). */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: #fff;
  color: var(--onkd-tour-primary);
  border: 0;
  box-shadow: none;
}
.onkd-map .leaflet-control-zoom a:hover {
  background: var(--onkd-tour-bg-muted);
}
.onkd-map .leaflet-control-zoom a.leaflet-control-zoom-in {
  border-bottom: 1px solid var(--onkd-tour-border);
}
.onkd-map .leaflet-control-zoom a.leaflet-disabled {
  color: rgba(16, 38, 60, 0.3);
}

/* Kompasroos (Figma "Overzicht-2 / Frame 18", REST 377:2067): 64×64 cirkel,
   #10263C op 75% opacity, met de kompasroos gecentreerd. De blauwe
   achtergrondcirkel ontbrak voorheen (869dqcgn7/869dqcdtb). */
.onkd-map .onkd-map__compass {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 38, 60, 0.75);
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(16, 38, 60, 0.25));
  font-family: var(--onkd-tour-font);
}
.onkd-map .onkd-map__compass svg,
.onkd-map .onkd-map__compass img {
  display: block;
  /* Kompasroos (REST 377:2068) gecentreerd in de cirkel — 49×51 conform Figma. */
  width: 49px;
  height: 51px;
}

/* Marker (Figma "Marker / type=Number"): navy druppel-pin 26x32 met wit
   nummer in de kop, gecentreerd in een 40px hitbox (de Leaflet divIcon).
   De punt van de pin wijst de POI-coördinaat aan (iconAnchor in church-map.js),
   dus schalen gebeurt vanuit de punt (transform-origin onderkant). */
.leaflet-marker-icon.onkd-poi-marker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}

.onkd-poi-marker {
  position: relative;
  /* Groter dan voorheen (was 26x32) zodat de pins makkelijker te tikken
     zijn — ClickUp 869dqcjz1. Hitbox 48px in church-map.js. */
  width: 32px;
  height: 40px;
  color: var(--onkd-tour-primary); /* pin-vulling via currentColor */
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(16, 38, 60, 0.3));
  transform-origin: 50% 100%;
  transition: transform 0.12s, color 0.12s;
}

.onkd-poi-marker svg {
  display: block;
  width: 100%;
  height: 100%;
}

.onkd-poi-marker__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Nummer verticaal gecentreerd in de kop van de pin (Figma 389:1147: tekst
     optisch op ~45% van de 32px-pin). Flex-centering in een 36px kopzone van de
     40px pin zet het midden op ~18px i.p.v. te hoog — ClickUp 869duuh67. 12px. */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font: var(--onkd-type-badge);
}

.onkd-poi-marker:hover {
  transform: scale(1.1);
}

.onkd-poi-marker.is-active {
  color: var(--onkd-tour-accent);
  transform: scale(1.18);
}

.onkd-poi-marker.is-visited {
  color: #4a8a4a;
}

/* Cluster bubble — shown when several POIs are too close together at the
   current zoom level. Tap-to-zoom expands them. Override the default
   leaflet.markercluster styling so the bubble matches the POI markers. */
.leaflet-marker-icon.onkd-poi-cluster-wrapper {
  background: transparent !important;
  border: 0 !important;
}
/* Figma "Marker / type=Cluster": vaste 32px navy cirkel (1px witte rand) met
   twee overlappende witte pin-glyphs, gecentreerd in de 40px hitbox. De hele
   vector (cirkel + glyphs) komt 1-op-1 uit Figma via church-map.js. */
.onkd-poi-cluster {
  /* Cluster-icoon: Figma-glyph heeft een 40-viewBox met een 31px-cirkel; op 52px
     is de cirkel ~40px (Mats 869duuhad: geheel groter). 4px ademruimte in een
     60px hitbox (zie church-map.js iconSize). */
  width: 52px;
  height: 52px;
  margin: 4px;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(16, 38, 60, 0.3));
  transition: transform 0.12s;
}
.onkd-poi-cluster svg {
  display: block;
  width: 100%;
  height: 100%;
}
.onkd-poi-cluster:hover {
  transform: scale(1.07);
}

/* Route lines connecting POIs — drawn beneath markers. */
.onkd-route-line {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Route picker — chips above the map that pick a curated route. */
.onkd-route-picker {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.onkd-route-picker::-webkit-scrollbar { display: none; }
.onkd-route-picker[hidden] { display: none; }
.onkd-route-chip {
  --onkd-route-color: var(--onkd-tour-accent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--onkd-tour-border);
  background: var(--onkd-tour-bg);
  color: var(--onkd-tour-text);
  font: var(--onkd-type-button);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.onkd-route-chip::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--onkd-route-color);
}
.onkd-route-chip:first-child::before {
  display: none;
}
.onkd-route-chip:hover {
  border-color: var(--onkd-route-color);
}
.onkd-route-chip.is-active {
  background: var(--onkd-route-color);
  border-color: var(--onkd-route-color);
  color: #fff;
}
.onkd-route-chip.is-active::before {
  background: #fff;
}

/* ============================================================
   Active route bottom sheet (Routes - 3)
   ============================================================ */

.onkd-active-route {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.45);
  display: none;
  z-index: 1000;
  align-items: stretch;
  justify-content: center;
  font-family: var(--onkd-tour-font);
}

.onkd-active-route.is-open {
  display: flex;
}

.onkd-active-route *,
.onkd-active-route *::before,
.onkd-active-route *::after {
  box-sizing: border-box;
}

.onkd-active-route .onkd-active-route__panel {
  width: 100%;
  max-width: 480px;
  margin-top: auto;
  background: var(--onkd-tour-bg);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  animation: onkd-slide-up 0.22s ease-out;
}

@keyframes onkd-slide-up {
  from { transform: translateY(20px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

.onkd-active-route .onkd-active-route__handle {
  width: 46px;
  height: 6px;
  background: var(--onkd-tour-border);
  border-radius: 3px;
  margin: 10px auto 8px;
}

.onkd-active-route .onkd-active-route__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 12px;
}

.onkd-active-route .onkd-active-route__progress {
  flex: 1;
  height: 4px;
  background: var(--onkd-tour-border);
  border-radius: 2px;
  overflow: hidden;
}

.onkd-active-route .onkd-active-route__progress-bar {
  height: 100%;
  background: var(--onkd-tour-primary);
  width: 0;
  transition: width 0.25s;
}

.onkd-active-route .onkd-active-route__stop {
  background: transparent;
  color: var(--onkd-tour-stop);
  border: 0;
  font: var(--onkd-type-button);
  cursor: pointer;
  padding: 6px 8px;
}

.onkd-active-route .onkd-active-route__body {
  padding: 0 16px 16px;
  overflow-y: auto;
}

.onkd-active-route .onkd-active-route__step {
  font: var(--onkd-type-caption);
  color: var(--onkd-tour-text-muted);
  margin: 0 0 6px;
}

.onkd-active-route .onkd-active-route__name {
  font: var(--onkd-type-h1);
  margin: 0 0 12px;
  color: var(--onkd-tour-text);
  letter-spacing: -0.01em;
}

.onkd-active-route .onkd-active-route__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--onkd-tour-thumb-bg);
  background-size: cover;
  background-position: center;
  border-radius: var(--onkd-tour-radius-lg);
  margin-bottom: 12px;
}

.onkd-active-route .onkd-active-route__text {
  color: var(--onkd-tour-text);
  line-height: 1.55;
  margin: 0 0 8px;
  font: var(--onkd-type-body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.onkd-active-route .onkd-active-route__text.is-expanded {
  -webkit-line-clamp: unset;
  display: block;
}

.onkd-active-route .onkd-active-route__more {
  background: transparent;
  border: 0;
  color: var(--onkd-tour-accent);
  font: var(--onkd-type-button);
  cursor: pointer;
  padding: 4px 0 16px;
}

.onkd-active-route .onkd-active-route__nav {
  display: flex;
  gap: 12px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--onkd-tour-border);
}

.onkd-active-route .onkd-active-route__nav .onkd-tour-cta {
  flex: 1;
}

.onkd-active-route .onkd-active-route__nav .onkd-tour-cta[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  /* Type-scale (cp87) komt uit de --onkd-type-tokens; geen font-size-overrides. */
  .onkd-map { height: 280px; }
}

/* ============================================================
   Overzicht (Figma Overzicht-1 / 2 / 3)
   - Segmented Lijst/Kaart toggle
   - POI grid (2 columns)
   - Map view with persistent bottom sheet
   - Bottom navigation
   ============================================================ */

/* Overzicht = vaste app-shell ter hoogte van de viewport: de bottom-nav blijft
   ALTIJD onderaan in beeld (ook in de kaart-view, waar Leaflet de page-scroll
   opslokt en sticky bottom:0 daardoor niet werkte — 869dqcext). De actieve
   panel vult de ruimte ertussen en scrollt zelf wanneer nodig. */
.onkd-tours-shell--overzicht {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  padding-bottom: 0;
}
.onkd-tours-shell--overzicht .onkd-overzicht__panel.is-active {
  flex: 1 1 auto;
  min-height: 0;
  position: relative; /* ankert de absolute bottom-sheet */
}
/* Lijst-view scrollt intern; kaart-view vult en laat Leaflet pannen. */
.onkd-tours-shell--overzicht #onkd-panel-lijst.is-active {
  overflow-y: auto;
  /* Scrollbar verbergen in de lijst-view; scrollen blijft werken (ClickUp 869dvh7rb). */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* oude Edge/IE */
}
.onkd-tours-shell--overzicht #onkd-panel-lijst.is-active::-webkit-scrollbar {
  display: none;                /* WebKit/Blink (iOS Safari, Chrome) */
}
.onkd-tours-shell--overzicht #onkd-panel-kaart.is-active {
  display: flex;
  flex-direction: column;
}
.onkd-tours-shell--overzicht .onkd-overzicht-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}
.onkd-tours-shell--overzicht .onkd-poi-sheet {
  position: absolute;
  bottom: 0;
}
.onkd-tours-shell--overzicht .onkd-tours-shell__bottomnav {
  position: static;
  flex: 0 0 auto;
}

/* 869dqcext (iteratie) — De overzicht-shell is een full-screen app: het
   DOCUMENT zelf mag niet scrollen, anders scrolt de bottom-nav alsnog weg —
   met name in de kaart-view met open POI-preview (geen interne scroll) en op
   iOS Safari, waar de adresbalk maakt dat .min-h-screen (100vh) hóger is dan
   de zichtbare 100dvh van de shell → het document werd scrollbaar over dat
   verschil. Zelfde principe als de handleiding/menu-overlays die de
   body-scroll al vergrendelen. Gescoped via :has() op pagina's die de
   overzicht-shell bevatten, zodat de rest van de site ongemoeid blijft. De
   min-height:0 overruled bovendien Tailwind's .min-h-screen, zodat er geen
   overflow meer ontstaat (niet enkel verborgen). */
html:has(.onkd-tours-shell--overzicht) {
  height: 100%;
  overflow: hidden;
}
body:has(.onkd-tours-shell--overzicht) {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body:has(.onkd-tours-shell--overzicht) > main {
  min-height: 0;
  overflow: hidden;
}

.onkd-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--onkd-tour-bg);
  border: 1px solid var(--onkd-tour-border);
  /* Figma "View options" (REST node 326:7042 in Overzicht-1): vierkant, geen
     afronding. Marge exact uit Figma — 8px top, 8px zijkanten, 12px onder
     (header→toggle 8px, toggle→grid 12px). ClickUp 869dqccpe. */
  padding: 4px;
  margin: 8px 8px 12px;
}

.onkd-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Figma "View options" knop (REST 326:7042): exact 40px hoog, px-24 py-8,
     16px icoon + 8px gap. min-height dwingt de 40px af zodat het label optisch
     met het icoon gecentreerd blijft (ClickUp 869dvhff1). */
  min-height: 40px;
  padding: 8px 24px;
  background: var(--onkd-tour-seg-inactive);
  border: 0;
  cursor: pointer;
  /* Inactief = Roboto Regular 14px #10263c; actief = Bold wit (zie hieronder). */
  font: var(--onkd-type-body-sm);
  color: var(--onkd-tour-primary);
  transition: background 0.15s, color 0.15s;
}

.onkd-segmented__btn[aria-selected="true"] {
  background: var(--onkd-tour-primary);
  color: white;
  font-weight: 700;
}

.onkd-segmented__btn svg {
  display: block;
}

/* Gevuld kaart-icoon in de active state (ClickUp 869dqcd3m): toon de outline
   variant standaard en de gevulde variant wanneer de knop geselecteerd is. */
.onkd-segmented__btn .onkd-segmented__icon--filled { display: none; }
.onkd-segmented__btn[aria-selected="true"] .onkd-segmented__icon--filled { display: block; }
.onkd-segmented__btn[aria-selected="true"] .onkd-segmented__icon--outline { display: none; }

/* View panels */
.onkd-overzicht__panel {
  display: none;
}

.onkd-overzicht__panel.is-active {
  display: block;
}

/* ----- Lijst view (Overzicht-1): POI grid ----- */

.onkd-poi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Figma "POI List": 2px tussenruimte, géén grijze container-achtergrond —
     de gaps zijn wit (ClickUp 869dqcxku). */
  gap: 2px;
  margin: 8px 2px 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

.onkd-tours-shell .onkd-poi-grid,
.onkd-tours-shell .onkd-poi-grid li {
  list-style: none;
  list-style-type: none;
  /* Volledige margin- én padding-reset. De globale build-CSS
     (blocks.hexcore/custom) zet o.a. `li{padding:.25rem 0}` en
     `ul{padding-bottom:.5rem}`; die lekten door de grid-cellen en maakten de
     gaps groter dan de 2px uit het ontwerp (alleen padding-left werd eerder
     gereset). 869dqcxku. */
  margin: 0;
  padding: 0;
}
/* De overzicht-lijst loopt tot 2px van de schermranden (Figma "POI List":
   371 in een 375-frame = 2px zijkanten), symmetrisch met de 2px tussen de
   kolommen. De reset hierboven zette de grid-marge binnen de shell op 0,
   waardoor de cards tegen de rand kwamen — 869dqcxku (horizontale gap). */
.onkd-tours-shell--overzicht #onkd-panel-lijst .onkd-poi-grid {
  /* Geen top-marge: de 12px bottom-marge van de toggle levert de ruimte al;
     de extra 8px stapelde tot 20px (ClickUp 869dqcxku). 2px zijkanten = Figma
     "POI List"-randmarge, symmetrisch met de 2px kolom-gaps. */
  margin: 0 2px;
}

.onkd-poi-grid__item {
  position: relative;
  display: block;
  background: var(--onkd-tour-thumb-bg);
  background-size: cover;
  background-position: center;
  aspect-ratio: 184 / 144;
  text-decoration: none;
  color: white;
  cursor: pointer;
  border: 0;
  width: 100%;
  padding: 0;
  font: inherit;
}

.onkd-poi-grid__item::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Shadow-overlay komt hoger (start op 50% i.p.v. 70%) zodat de witte naam
     leesbaar blijft zónder text-shadow — ClickUp 869duurg4. */
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6));
  pointer-events: none;
}

.onkd-poi-grid__num {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--onkd-tour-primary);
  /* Figma "POI"-card (REST 326:7104): navy cirkel ZONDER witte rand
     (ontwerp aangepast 2026-06-23) — ClickUp 869duurg4. */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--onkd-type-badge);
  z-index: 2;
}

.onkd-poi-grid__name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  /* List-card naam: Roboto Bold 14px voor betere leesbaarheid (ClickUp 869dvhh4r),
     wit over de gradient. */
  font: 700 0.875rem/1.25 var(--onkd-tour-font);
  color: white;
  z-index: 2;
  /* Drop-shadow op de naam verwijderd; de hogere gradient-overlay zorgt voor
     contrast (ClickUp 869duurg4). */
}

/* ----- Kaart view (Overzicht-2 / 3) ----- */

.onkd-overzicht-map {
  position: relative;
  /* Contain Leaflet's z-index 400-800 panes so they can't poke through the
     bottom sheet that sits above this element. */
  isolation: isolate;
  z-index: 0;
  height: calc(100vh - 320px);
  min-height: 420px;
  max-height: 700px;
  /* Figma "Overzicht-2": grijze kaart-achtergrond, géén border/stroke,
     géén border-radius (overschrijft .onkd-map). ClickUp 869dqcgdu. */
  background: var(--onkd-tour-map-bg);
  border: 0;
  border-radius: 0;
  margin: 0;
}

.onkd-overzicht-map .onkd-map__leaflet {
  width: 100%;
  height: 100%;
}

.onkd-overzicht-map__hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(16, 38, 60, 0.8);
  color: white;
  padding: 8px 14px;
  border-radius: 999px;
  font: var(--onkd-type-caption);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Boven Leaflet's panes (markers 600, controls 800) zodat de hint
     vóór de kaart staat i.p.v. erachter. */
  z-index: 1000;
  pointer-events: none;
}

.onkd-overzicht-map__hint.is-hidden {
  display: none;
}

/* ----- Bottom sheet (Frame 83) — POI preview ----- */

.onkd-poi-sheet {
  position: sticky;
  bottom: 64px; /* above bottom nav */
  left: 0; right: 0;
  background: var(--onkd-tour-bg);
  border-top: 1px solid var(--onkd-tour-border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(20, 30, 50, 0.18); /* iets aanweziger (ClickUp 869duv9kd) */
  padding: 16px; /* 16px rondom (ClickUp 869duv9kd) */
  display: none;
  /* Sit above Leaflet markers (z-index 600) and controls (800) — the map
     itself uses isolation:isolate so this only competes with shell-level UI. */
  z-index: 1000;
}

.onkd-poi-sheet.is-open {
  display: block;
  animation: onkd-slide-up 0.22s ease-out;
}

.onkd-poi-sheet__row {
  display: flex;
  gap: 16px;
  align-items: center; /* content naast de afbeelding verticaal centreren (869duv9kd) */
}

.onkd-poi-sheet__thumb {
  width: 80px;
  height: 80px;
  border-radius: 0; /* geen afgeronde hoeken (ClickUp 869duv9kd) */
  background: var(--onkd-tour-thumb-bg);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.onkd-poi-sheet__body {
  flex: 1;
  min-width: 0;
}

.onkd-poi-sheet__name {
  font: var(--onkd-type-h3);
  margin: 0 0 4px; /* 4px gap heading→description (ClickUp 869duv9kd) */
  color: var(--onkd-tour-primary); /* heading #10263C (ClickUp 869duv9kd) */
  letter-spacing: -0.01em;
}

.onkd-poi-sheet__text {
  /* Omschrijving: Roboto Regular 14, #333333, max 3 regels + truncation
     (ClickUp 869duv9kd). */
  font: var(--onkd-type-body-sm);
  color: var(--onkd-tour-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.onkd-poi-sheet__cta {
  margin-top: 12px;
}

/* ----- Bottom navigation (Figma Bottom bar) ----- */

.onkd-tours-shell__bottomnav {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--onkd-tour-bg);
  border-top: 1px solid var(--onkd-tour-border);
  z-index: 7;
  padding: 6px 0 8px;
}

/* Variant met de optionele Routes-tab (zie "toonRoutes" op het pagetype). */
.onkd-tours-shell__bottomnav--routes {
  grid-template-columns: repeat(4, 1fr);
}

.onkd-tours-shell__bottomnav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--onkd-tour-inactive);
  font: var(--onkd-type-navlabel); /* Figma bottom-nav: Roboto 500 10/12.5 */
  background: transparent;
  border: 0;
  cursor: pointer;
}

.onkd-tours-shell__bottomnav-item[aria-current="page"],
.onkd-tours-shell__bottomnav-item.is-active {
  color: var(--onkd-tour-primary);
  font-weight: 700;
}

.onkd-tours-shell__bottomnav-item svg {
  display: block;
}

/* Op tour-/POI-detailpagina's staat dezelfde volle-breedte balk onderaan
   het artikel; margin-top:auto duwt hem bij korte inhoud naar de onderkant
   van de viewport (de artikelen zijn flex-kolommen met min-height 100vh). */
.onkd-tour-detail .onkd-tours-shell__bottomnav,
.onkd-poi-detail .onkd-tours-shell__bottomnav {
  margin-top: auto;
}

/* When the rondleidingen overzicht is shown, also keep secondary
   routes-list cleanly spaced from the map. */
.onkd-tours-shell--overzicht .onkd-tours-overview {
  padding-top: 8px;
}

@media (max-width: 480px) {
  .onkd-overzicht-map { height: calc(100vh - 280px); }
}

/* ============================================================
   Tablet & up — the base layout is mobile-first (480px shells).
   On tablets we widen the shells so the page doesn't look like a
   narrow phone column floating on a big screen, give headings &
   the map more presence, and switch a couple of single-column
   stacks to multi-column grids.
   ============================================================ */

@media (min-width: 768px) {
  .onkd-tours-shell { max-width: 720px; }
  .onkd-tour-detail { max-width: 720px; padding-bottom: 40px; }
  .onkd-active-route .onkd-active-route__panel { max-width: 720px; }

  .onkd-tours-overview { padding: 24px; }
  .onkd-tour-detail .onkd-tour-detail__body { padding: 24px; }
  .onkd-tour-detail .onkd-tour-detail__header { padding: 16px 24px; }
  .onkd-tours-shell__topbar { padding: 16px 24px; }
  .onkd-segmented { margin: 16px 24px 8px; }

  /* Type-scale (cp87) geldt op alle breedtes via de --onkd-type-tokens;
     géén aparte font-size-overrides op tablet/desktop (Figma definieert
     één typeschaal). Layout/padding-overrides hieronder blijven wel. */
  .onkd-tour-detail .onkd-map { height: 420px; }
  .onkd-overzicht-map { min-height: 520px; }

  .onkd-poi-grid { grid-template-columns: repeat(3, 1fr); }

  .onkd-tours-overview .onkd-tours-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .onkd-tours-overview .onkd-tour-card { padding: 14px; gap: 16px; }
  .onkd-tours-overview .onkd-tour-card__thumb { width: 64px; height: 80px; }

  .onkd-tour-detail .onkd-poi-list__item { padding: 10px 16px; min-height: 72px; }

  .onkd-active-route .onkd-active-route__body { padding: 0 24px 20px; }
  .onkd-active-route .onkd-active-route__nav { padding: 16px 24px 20px; }
  .onkd-active-route .onkd-active-route__header { padding: 8px 24px 12px; }
}

@media (min-width: 1024px) {
  .onkd-tours-shell { max-width: 820px; }
  .onkd-tour-detail { max-width: 820px; }
  .onkd-active-route .onkd-active-route__panel { max-width: 820px; }

  .onkd-tour-detail .onkd-map { height: 480px; }
  .onkd-overzicht-map { min-height: 600px; }
}

@media (min-width: 1280px) {
  .onkd-tours-shell { max-width: 1000px; }
  .onkd-tour-detail { max-width: 1000px; }
  .onkd-active-route .onkd-active-route__panel { max-width: 1000px; }

  .onkd-poi-grid { grid-template-columns: repeat(4, 1fr); }

  .onkd-tours-overview .onkd-tours-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .onkd-tour-detail .onkd-map { height: 520px; }
  .onkd-overzicht-map { min-height: 640px; }
}

/* ============================================================
   QR scanner overlay
   ============================================================ */

/* Full-bleed camera-UI met witte headerbalk (Figma "Scan"). */
.onkd-qr-scanner {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: #fff;
}
.onkd-qr-scanner.is-open { display: flex; }
body.onkd-qr-scanner-open { overflow: hidden; }

.onkd-qr-scanner *,
.onkd-qr-scanner *::before,
.onkd-qr-scanner *::after { box-sizing: border-box; }

.onkd-qr-scanner .onkd-qr-scanner__panel {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--onkd-tour-font);
  color: var(--onkd-tour-text);
}

/* Witte headerbalk: terugknop links, titel gecentreerd (Figma "Scan"). */
.onkd-qr-scanner .onkd-qr-scanner__header {
  position: relative;
  flex: 0 0 auto;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onkd-qr-scanner .onkd-qr-scanner__close {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--onkd-tour-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onkd-qr-scanner .onkd-qr-scanner__close:hover,
.onkd-qr-scanner .onkd-qr-scanner__close:focus-visible {
  background: rgba(16, 38, 60, 0.08);
  outline: none;
}

.onkd-qr-scanner .onkd-qr-scanner__title {
  margin: 0;
  font: var(--onkd-type-h3);
  color: var(--onkd-tour-primary);
  text-align: center;
}

/* Camera vult de resterende hoogte, rand-tot-rand zonder afronding. */
.onkd-qr-scanner .onkd-qr-scanner__viewport {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  background: #0a0d12;
  border-radius: 0;
  overflow: hidden;
}
.onkd-qr-scanner .onkd-qr-scanner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Zoekerkader (Figma "QR Code Markers"): vierkant van ~280px bovenin het
   camerabeeld (48px zijmarge op smalle schermen), níet uitgerekt over de
   volle hoogte — anders verdwijnen de onderste hoeken achter de
   instructiekaart. */
.onkd-qr-scanner .onkd-qr-scanner__frame {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, calc(100vw - 96px));
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.onkd-qr-scanner .onkd-qr-scanner__frame span {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
}
.onkd-qr-scanner .onkd-qr-scanner__frame span:nth-child(1) {
  top: 0; left: 0; border-right: 0; border-bottom: 0;
}
.onkd-qr-scanner .onkd-qr-scanner__frame span:nth-child(2) {
  top: 0; right: 0; border-left: 0; border-bottom: 0;
}
.onkd-qr-scanner .onkd-qr-scanner__frame span:nth-child(3) {
  bottom: 0; left: 0; border-right: 0; border-top: 0;
}
.onkd-qr-scanner .onkd-qr-scanner__frame span:nth-child(4) {
  bottom: 0; right: 0; border-left: 0; border-top: 0;
}

/* Instructiekaart (Figma "Instruction Container") — doorschijnende donkerblauwe
   kaart die over de camera zweeft, met hint, status + handmatige invoer als
   functionele fallback. */
.onkd-qr-scanner .onkd-qr-scanner__instruction {
  position: absolute;
  left: 50%;
  /* Onder het zoekerkader (Figma: 48px eronder), nooit erovan. Let op: de
     kaart positioneert t.o.v. het panel (inclusief de 64px headerbalk),
     het kader t.o.v. de viewport (ónder de header) — tel de header mee. */
  top: calc(64px + 140px + min(280px, 100vw - 96px) + 48px);
  transform: translateX(-50%);
  width: 295px;
  max-width: calc(100% - 64px);
  background: rgba(16, 38, 60, 0.75);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
  text-align: center;
}

/* Lage schermen (bv. iPhone SE): compacter zoekerkader zodat kader +
   instructiekaart sámen in het camerabeeld passen. */
@media (max-height: 779px) {
  .onkd-qr-scanner .onkd-qr-scanner__frame {
    top: 96px;
    width: min(220px, calc(100vw - 96px));
  }
  .onkd-qr-scanner .onkd-qr-scanner__instruction {
    /* Inclusief de 64px headerbalk (zie opmerking bij de basisregel). */
    top: calc(64px + 96px + min(220px, 100vw - 96px) + 24px);
  }
}


.onkd-qr-scanner .onkd-qr-scanner__hint {
  margin: 0;
  color: #fff;
  font: var(--onkd-type-body);
  text-align: center;
}

.onkd-qr-scanner .onkd-qr-scanner__status {
  margin: 0;
  font: var(--onkd-type-caption);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  min-height: 1.2em;
}
/* Bij cameratoestemming blijft de statusregel leeg; dan mag hij geen ruimte
   (min-height + flex-gap) onder de instructietekst reserveren — de container
   hugt zo de zichtbare tekst (ClickUp 869dqcbbx). Vult alleen bij camera-fout. */
.onkd-qr-scanner .onkd-qr-scanner__status:empty {
  display: none;
}

.onkd-qr-scanner .onkd-qr-scanner__manual {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 12px;
  margin: 0;
}
.onkd-qr-scanner .onkd-qr-scanner__manual-label {
  font: var(--onkd-type-caption);
  color: rgba(255, 255, 255, 0.85);
}
.onkd-qr-scanner .onkd-qr-scanner__manual-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.onkd-qr-scanner .onkd-qr-scanner__manual-input {
  flex: 1 1 0;
  /* Without this an input refuses to shrink below its placeholder width,
     which on narrow phones pushes the submit button off-screen. */
  min-width: 0;
  width: auto;
  border: 1px solid var(--onkd-tour-border);
  border-radius: 10px;
  padding: 10px 12px;
  font: var(--onkd-type-body);
  color: var(--onkd-tour-text);
  background: var(--onkd-tour-bg);
}
.onkd-qr-scanner .onkd-qr-scanner__manual-input:focus {
  outline: 2px solid var(--onkd-tour-primary);
  outline-offset: 1px;
}
.onkd-qr-scanner .onkd-qr-scanner__manual .onkd-tour-cta {
  /* Override .onkd-tour-cta's default width:100% so the button doesn't claim
     the entire row inside this flex context. 50/50 with the input. */
  flex: 1 1 0;
  width: auto;
  padding: 10px 18px;
  font-size: 0.9rem;
}
@media (max-width: 420px) {
  .onkd-qr-scanner .onkd-qr-scanner__instruction {
    max-width: calc(100% - 32px);
  }
  .onkd-qr-scanner .onkd-qr-scanner__manual-row {
    gap: 6px;
  }
  .onkd-qr-scanner .onkd-qr-scanner__manual-input {
    padding: 9px 10px;
    font-size: 0.9rem;
  }
  .onkd-qr-scanner .onkd-qr-scanner__manual .onkd-tour-cta {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

/* ============================================================
   POI detail / info page (geopend na een QR-scan)
   ============================================================ */
.onkd-poi-detail {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--onkd-tour-bg);
  font-family: var(--onkd-tour-font);
  color: var(--onkd-tour-text);
  min-height: 100vh;
  /* `clip` i.p.v. `hidden`: voorkomt horizontale scroll (869dqc0jw) ZONDER een
     scroll-container te maken, zodat de sticky topbar blijft plakken (869durmxj). */
  overflow-x: clip;
}
.onkd-poi-detail *,
.onkd-poi-detail *::before,
.onkd-poi-detail *::after {
  box-sizing: border-box;
}
.onkd-poi-detail .onkd-poi-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--onkd-tour-border);
  position: sticky;
  top: 0;
  background: var(--onkd-tour-bg);
  z-index: 5;
}
.onkd-poi-detail .onkd-poi-detail__crumb {
  margin: 0;
  flex: 1;
  font: var(--onkd-type-caption);
  color: var(--onkd-tour-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onkd-poi-detail .onkd-poi-detail__lang select {
  border: 1px solid var(--onkd-tour-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--onkd-tour-bg);
  font: inherit;
}
.onkd-poi-detail .onkd-poi-detail__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 272; /* Figma "Route Image" */
  background: var(--onkd-tour-thumb-bg) center/cover no-repeat;
}
.onkd-poi-detail .onkd-poi-detail__num {
  position: absolute;
  left: 16px;
  top: 16px; /* Figma "Detail": nummer-cirkel linksboven in de afbeelding */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--onkd-tour-primary);
  border: 1px solid #fff; /* Figma: witte rand (brand/on-secondary), 1px solid; geen shadow */
  color: #fff;
  font: 700 1rem/1 var(--onkd-tour-font); /* Figma H3: Roboto Bold 16 */
}
.onkd-poi-detail .onkd-poi-detail__body {
  padding: 24px 16px 40px; /* 40px bottom-padding onder content (ClickUp 869dqc7q9) */
}
.onkd-poi-detail .onkd-poi-detail__title {
  margin: 0 0 16px; /* 16px onder de main heading H1 (ClickUp 869dqc7q9) */
  font: var(--onkd-type-h1);
  color: var(--onkd-tour-primary); /* headings #10263C (ClickUp 869dvb74k) */
}
/* Introductietekst: geaccentueerde intro-alinea onder de titel (Figma "Detail" →
   "Introduction": Roboto 400 18/27, #10263C — groter + navy t.o.v. de body).
   ClickUp 869dqc8hr. */
.onkd-poi-detail .onkd-poi-detail__intro {
  margin: 0 0 24px;
  font: 400 1.125rem/1.5 var(--onkd-tour-font);
  color: var(--onkd-tour-primary);
  hyphens: manual;
  overflow-wrap: break-word;
}
.onkd-poi-detail .onkd-poi-detail__intro p {
  margin: 0 0 16px;
}
.onkd-poi-detail .onkd-poi-detail__intro p:last-child {
  margin-bottom: 0;
}
.onkd-poi-detail .onkd-poi-detail__text {
  font: var(--onkd-type-body);
  color: var(--onkd-tour-text);
  /* Geen automatische woordafbreking (ClickUp 869duv4ax): hyphens:auto brak te
     vaak verkeerd af én brak namen af. hyphens:manual = alleen op expliciete
     soft-hyphens (die staan niet in de content), dus in de praktijk geen
     afbreking. overflow-wrap:break-word blijft enkel als vangnet voor een
     uitzonderlijk lang token dat anders horizontaal zou overlopen. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.onkd-poi-detail .onkd-poi-detail__text p {
  margin: 0 0 24px; /* 24px tussen alinea's (ClickUp 869dqc7q9) */
}
.onkd-poi-detail .onkd-poi-detail__text p:last-child {
  margin-bottom: 0;
}

/* Video-embeds uit de rich text editor (YouTube/Vimeo via oEmbed). Umbraco zet
   de afmetingen die de provider teruggeeft hard op de iframe (bijv. 500x281),
   waardoor de video op mobiel niet meeschaalt en uit de body-padding liep.
   De holder is standaard een inline <span> in een <p> — daarom display:block.
   Edge-to-edge over de 16px body-padding heen op verzoek van de klant. */
.onkd-poi-detail .onkd-poi-detail__text .umb-embed-holder {
  display: block;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}
.onkd-poi-detail .onkd-poi-detail__text .umb-embed-holder iframe {
  display: block;
  width: 100%;
  height: auto;
  /* 16/9 dekt YouTube/Vimeo-landscape; de meegeleverde height wordt genegeerd. */
  aspect-ratio: 16 / 9;
  border: 0;
}

/* CTA-lijst onderaan (Figma "Detail"): link-rijen met full-width dividers
   ervóór, ertussen én eronder, met 8px gaps (zelfde patroon als het menu).
   Marge -4px t.o.v. de 16px body-padding → 12px zijpadding, uitzonderlijk
   voor de CTA-list (ClickUp 869dvazgv). */
.onkd-poi-detail .onkd-poi-detail__cta-list {
  margin: 32px -4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 8px tussen de CTA-rijen én dividers (ClickUp 869dqc9q8 / 869dvazgv) */
}
.onkd-poi-detail .onkd-poi-detail__cta-divider {
  flex-shrink: 0;
  height: 1px;
  background: var(--onkd-tour-border);
}
.onkd-poi-detail .onkd-poi-detail__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px; /* CTA-items 48px hoog (ClickUp 869dqc9q8) */
  padding: 0;
  border: 0;
  background: none;
  color: var(--onkd-tour-primary);
  font: var(--onkd-type-subheading); /* Figma Subheading 1: Roboto Medium 16 */
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.onkd-poi-detail .onkd-poi-detail__cta:hover,
.onkd-poi-detail .onkd-poi-detail__cta:focus-visible {
  color: var(--onkd-tour-accent);
}
.onkd-poi-detail .onkd-poi-detail__cta svg {
  flex: 0 0 auto;
}

/* Audio player ("voorlees-knop") on the POI infopage — compacte pill
   conform Figma "Audio Button" (36px hoog, icoon + label). */
/* Audiospeler (Figma "Detail" — Beluister audio). Idle-pill die uitklapt naar
   play/pause + opnieuw + voortgang. Zie tourAudioPlayer.cshtml + audio-player.js. */
.onkd-poi-detail .onkd-poi-audio {
  margin: 0 0 18px;
}
.onkd-poi-detail .onkd-poi-audio__start[hidden],
.onkd-poi-detail .onkd-poi-audio__player[hidden] {
  display: none;
}
/* Idle "Beluister audio"-pill (oranje, 36px hoog, volledig rond) */
.onkd-poi-detail .onkd-poi-audio__start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--onkd-tour-border); /* Figma: 1px #e5e7eb */
  border-radius: 9999px;
  background: var(--onkd-tour-accent);
  color: #fff;
  font: 500 0.875rem/1 var(--onkd-tour-font); /* Roboto 500 / 14 */
  cursor: pointer;
  transition: background 0.15s;
}
.onkd-poi-detail .onkd-poi-audio__start:active {
  transform: translateY(1px);
}
.onkd-poi-detail .onkd-poi-audio__start svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
/* Uitgeklapte speler-rij: [play/pause] [opnieuw] [voortgang-pill] */
.onkd-poi-detail .onkd-poi-audio__player {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
}
.onkd-poi-detail .onkd-poi-audio__btn {
  flex: 0 0 auto;
  width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--onkd-tour-border); /* Figma: 1px #e5e7eb op alle audio-knoppen */
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.05s;
}
.onkd-poi-detail .onkd-poi-audio__btn:active {
  transform: translateY(1px);
}
.onkd-poi-detail .onkd-poi-audio__btn svg {
  width: 18px;
  height: 18px;
}
/* Verbergen-attribuut op de iconen mag niet overschreven worden door de Tailwind
   preflight (svg{display:block}); expliciet maken zodat het play/pause-icoon wisselt. */
.onkd-poi-detail .onkd-poi-audio svg[hidden] {
  display: none;
}
.onkd-poi-detail .onkd-poi-audio__btn--play {
  background: var(--onkd-tour-accent);
  color: #fff;
}
.onkd-poi-detail .onkd-poi-audio__btn--restart {
  background: transparent; /* transparante knop met 1px #e5e7eb outline + navy icoon */
  color: var(--onkd-tour-primary);
}
/* Voortgang-pill: tijd + scrubber (of statuslabel in TTS-modus) */
.onkd-poi-detail .onkd-poi-audio__progress {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  min-width: 0;
  padding: 0 12px;
  /* Figma: 1px #e5e7eb outline, volledig rond; achtergrond transparant (geen grijze vulling). */
  border: 1px solid var(--onkd-tour-border);
  border-radius: 9999px;
  background: transparent;
}
.onkd-poi-detail .onkd-poi-audio__time {
  flex: 0 0 auto;
  margin: 0;
  font: 400 0.75rem/1 var(--onkd-tour-font); /* Roboto 400 / 12 */
  font-variant-numeric: tabular-nums;
  color: var(--onkd-tour-text-muted);
}
.onkd-poi-detail .onkd-poi-audio__status {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 0.75rem/1.2 var(--onkd-tour-font);
  color: var(--onkd-tour-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Scrubber — native range, cross-browser gestyled naar de Figma-thumb/track */
.onkd-poi-detail .onkd-poi-audio__scrubber {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 20px; /* ruimte voor de 20px thumb (16 navy + 2px witte rand) → geen clipping */
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.onkd-poi-detail .onkd-poi-audio__scrubber::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--onkd-tour-primary) 0 var(--onkd-audio-fill, 0%),
    var(--onkd-tour-border) var(--onkd-audio-fill, 0%) 100%
  );
}
.onkd-poi-detail .onkd-poi-audio__scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  /* Centreer de 16px thumb op de 8px track: (8 - 16) / 2 = -4px. */
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--onkd-tour-primary);
  /* Witte rand via box-shadow i.p.v. border: verandert de box-grootte niet, dus
     de verticale centrering blijft exact (Figma: navy thumb + 2px witte rand). */
  box-shadow: 0 0 0 2px #fff;
}
.onkd-poi-detail .onkd-poi-audio__scrubber::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: var(--onkd-tour-border);
}
.onkd-poi-detail .onkd-poi-audio__scrubber::-moz-range-progress {
  height: 8px;
  border-radius: 99px;
  background: var(--onkd-tour-primary);
}
.onkd-poi-detail .onkd-poi-audio__scrubber::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--onkd-tour-primary);
  box-shadow: 0 0 0 2px #fff; /* witte rand (Figma) zonder de box-grootte te wijzigen */
}
/* Géén rechthoekige outline om de balk + dot (niet in Figma); subtiele focusring
   alleen op de thumb voor toetsenbord-toegankelijkheid. */
.onkd-poi-detail .onkd-poi-audio__scrubber:focus-visible {
  outline: none;
}
.onkd-poi-detail .onkd-poi-audio__scrubber:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(16, 38, 60, 0.35);
}
.onkd-poi-detail .onkd-poi-audio__scrubber:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(16, 38, 60, 0.35);
}

/* Aanbevolen POI's (Figma "Recommendations") */
.onkd-poi-detail .onkd-poi-detail__recommendations {
  margin-top: 32px; /* 32px content-block-ritme (Figma "Bekijk hierna") — 869dqcak6 */
}
.onkd-poi-detail .onkd-poi-detail__section-title {
  margin: 0 0 12px;
  font: var(--onkd-type-h2);
  /* Heading-kleur #10263C i.p.v. #333333 (ClickUp 869dvhgfb) — consistent met
     de overige headings (primary), niet de body-tekstkleur. */
  color: var(--onkd-tour-primary);
}
.onkd-poi-detail .onkd-poi-grid,
.onkd-poi-detail .onkd-poi-grid li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* "Bekijk hierna"-cards lopen tot 2px van de schermranden (zoals de
   overzichtsgrid), terwijl de sectietitel zijn 16px side-spacing houdt
   (ClickUp 869duuze3). Body-padding is 16px → -14px haalt de grid naar 2px. */
.onkd-poi-detail .onkd-poi-detail__recommendations .onkd-poi-grid {
  margin-left: -14px;
  margin-right: -14px;
}

/* ============================================================
   Onboarding & Handleiding (Figma "Onboarding - 1..4" / "Handleiding")
   Eigen designtokens conform het vernieuwde ontwerp.
   ============================================================ */
:root {
  --onkd-onb-navy: var(--onkd-tour-primary);   /* Brand/Secondary */
  --onkd-onb-orange: var(--onkd-tour-accent);  /* Brand/Primary */
  --onkd-onb-dim: rgba(0, 0, 0, 0.75);
}

/* POI-topbar: de Home-knop links uitlijnen, acties rechts */
.onkd-poi-detail .onkd-poi-detail__topbar {
  justify-content: space-between;
}
.onkd-poi-detail__home {
  color: var(--onkd-onb-navy);
}

/* ---- Onboarding coach-mark overlay ---- */
.onkd-onb {
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: flex-end;
  justify-content: center;
}
.onkd-onb:not([hidden]) {
  display: flex;
}
body.onkd-onb-open {
  overflow: hidden;
}

/* De "spotlight": een oranje ring met een enorme box-shadow die de rest
   van het scherm dimt. Zit onder de uitlegkaart. */
.onkd-onb__spotlight {
  position: fixed;
  border: 2px solid var(--onkd-onb-orange);
  border-radius: 999px;
  box-shadow: 0 0 0 9999px var(--onkd-onb-dim);
  pointer-events: none;
  z-index: 1;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
/* Laatste stap heeft geen highlight: dim het hele scherm, verberg de ring. */
.onkd-onb--nofocus {
  background: var(--onkd-onb-dim);
}
.onkd-onb--nofocus .onkd-onb__spotlight {
  display: none;
}

.onkd-onb__card {
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  max-width: 448px;
  margin: 0 16px 24px;
  padding: 12px 16px 16px;
  background: var(--onkd-onb-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--onkd-tour-shadow-lg);
  pointer-events: auto;
}
.onkd-onb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onkd-onb__avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.onkd-onb__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
}
.onkd-onb__close:hover { opacity: 1; }
.onkd-onb__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onkd-onb__title {
  margin: 0;
  font: var(--onkd-type-h3);
}
.onkd-onb__body {
  margin: 0;
  font: var(--onkd-type-body);
  color: rgba(255, 255, 255, 0.88);
}
.onkd-onb__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.onkd-onb__step {
  font: var(--onkd-type-caption);
  color: rgba(255, 255, 255, 0.9);
}
.onkd-onb__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.onkd-onb__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 10px 16px;
  min-height: 40px;
  background: var(--onkd-onb-orange);
  border: 0;
  border-radius: var(--onkd-tour-btn-radius);
  color: #fff;
  cursor: pointer;
  font: var(--onkd-type-button);
}
.onkd-onb__next:hover { filter: brightness(1.05); }
.onkd-onb__next:active { transform: translateY(1px); }

/* ---- Handleiding ---- */
.onkd-handleiding {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--onkd-tour-bg);
  /* Vaste-hoogte shell zodat de bottom-nav onderaan verankerd blijft i.p.v.
     mee te scrollen (ClickUp 869dqcext). Alleen de body scrollt. */
  overflow: hidden;
}
.onkd-handleiding:not([hidden]) {
  display: block;
}
body.onkd-manual-open {
  overflow: hidden;
}
.onkd-handleiding__inner {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--onkd-tour-bg);
  font-family: var(--onkd-tour-font);
}
.onkd-handleiding__inner *,
.onkd-handleiding__inner *::before,
.onkd-handleiding__inner *::after {
  box-sizing: border-box;
}
.onkd-handleiding__home,
.onkd-handleiding__topbar .onkd-tours-shell__topbar-action {
  color: var(--onkd-onb-navy);
}
.onkd-handleiding__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Figma "Handleiding" (326:3702): 24px boven de titel (ClickUp 869dqcmey). */
  padding: 24px 16px 24px;
}
.onkd-handleiding__title {
  /* Figma: Roboto Bold 20 (H2), 12px tot de intro (ClickUp 869dqcmey). */
  margin: 0 0 12px;
  font: var(--onkd-type-h2);
  color: var(--onkd-onb-navy);
}
.onkd-handleiding__intro {
  margin: 0 0 40px; /* 40px tot de stappenlijst (ClickUp 869dqcmey) */
  font: var(--onkd-type-body);
  color: var(--onkd-tour-text); /* Figma intro #333333 */
}
.onkd-handleiding__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.onkd-handleiding__step {
  position: relative;
  display: flex;
  /* 20px tussen de nummer-kolom en de content (Figma "Instructions" 343 = 32 + 20 + 291). */
  gap: 20px;
  /* Volledige margin/padding-reset: de globale build-CSS zet op li zowel
     padding:.25rem 0 als margin-left:20px. Dat laatste duwde de hele stap
     20px naar rechts (Mats: "stappen staan te ver naar rechts" — ClickUp
     869dv023t); het eerste lekt 4px bovenaan. Beide hier platslaan zodat de
     nummer-cirkel exact op de side-marge van de pagina uitlijnt
     (zie tours-css-cascade-verify). */
  margin: 0;
  padding: 0 0 32px; /* 32px tussen de stappen (Figma; ClickUp 869dqcmey) */
}
/* Verticale verbindingslijn tussen de genummerde stappen. Laat 8px ruimte
   boven én onder zodat de lijn de cirkels niet raakt (Figma: vector start 8px
   onder de 32px cirkel, eindigt 8px boven de volgende — ClickUp 869dv023t). */
.onkd-handleiding__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 8px;
  width: 2px;
  background: var(--onkd-tour-border); /* #E5E7EB */
}
.onkd-handleiding__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--onkd-onb-navy);
  color: #fff;
  /* Figma "Step N number" = Roboto Bold 16/20 (REST 326:3702). NB: Mats schatte
     14px; Figma-bron = exact 16px, aangehouden zoals afgesproken — ClickUp 869dv023t. */
  font: 700 1rem/1 var(--onkd-tour-font);
}
.onkd-handleiding__step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font: var(--onkd-type-h3);
  color: var(--onkd-onb-navy);
}
.onkd-handleiding__step-title svg {
  flex-shrink: 0;
  color: var(--onkd-onb-navy);
}
.onkd-handleiding__step-text {
  margin: 4px 0 0;
  font: var(--onkd-type-body);
  color: var(--onkd-tour-text-muted);
}
.onkd-handleiding__bottomnav {
  grid-template-columns: repeat(3, 1fr);
  position: static; /* in de flex-shell verankerd, niet sticky (ClickUp 869dqcext) */
  flex: 0 0 auto;
}

/* ============================================================
   POI content blocks (poiBlocks — Heading / Tekst / Afbeelding)
   ============================================================ */
.onkd-poi-detail .onkd-poi-detail__blocks {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 32px tussen content-blokken (ClickUp 869dqc7q9) */
  /* Geen auto-afbreking (ClickUp 869duv4ax): manual i.p.v. auto zodat woorden en
     namen niet verkeerd worden afgebroken; overflow-wrap blijft als vangnet. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.onkd-poi-detail .onkd-poi-detail__block-heading {
  /* 8px onder een subheading (H2): negatieve marge haalt 24px van de 32px
     block-gap af zodat de heading dicht bij zijn eigen content staat
     (32 − 24 = 8px) — ClickUp 869dqc7q9. */
  margin: 0 0 -24px;
  font: var(--onkd-type-h2);
  color: var(--onkd-tour-primary); /* headings #10263C (ClickUp 869dvb74k) */
}
.onkd-poi-detail .onkd-poi-detail__block-image {
  margin: 0;
}
/* Vlakke hoeken conform Figma "Detail - 1" (content-afbeeldingen zijn
   niet afgerond, net als de hero en de "Bekijk hierna"-thumbs). */
.onkd-poi-detail .onkd-poi-detail__block-image img {
  display: block;
  width: 100%;
  height: auto;
  /* Begrens de hoogte zodat (portret-)afbeeldingen de pagina niet domineren;
     cover voorkomt vervorming bij het clampen (ClickUp 869dqc7q9). */
  max-height: 264px;
  object-fit: cover;
}
.onkd-poi-detail .onkd-poi-detail__block-caption {
  margin: 10px 0 0; /* 10px tussen afbeelding en bijschrift (ClickUp 869dqc7q9) */
  font: var(--onkd-type-caption);
  letter-spacing: 0.01em; /* bijschrift letter-spacing 1% (ClickUp 869dqc7q9) */
  color: var(--onkd-tour-text-muted);
}

/* ============================================================
   Menu (Figma "Menu") — full-screen overlay met links + versie-footer
   ============================================================ */
.onkd-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--onkd-tour-bg);
  /* Vaste-hoogte shell: bottom-nav onderaan verankerd, alleen de lijst scrollt
     (ClickUp 869dqcext — zelfde patroon als de handleiding). */
  overflow: hidden;
}
.onkd-menu:not([hidden]) {
  display: block;
}
body.onkd-menu-open {
  overflow: hidden;
}
.onkd-menu__inner {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--onkd-tour-bg);
  font-family: var(--onkd-tour-font);
}
.onkd-menu__inner *,
.onkd-menu__inner *::before,
.onkd-menu__inner *::after {
  box-sizing: border-box;
}
.onkd-menu__topbar .onkd-tours-shell__topbar-action {
  color: var(--onkd-onb-navy);
}
.onkd-menu__list {
  display: flex;
  flex-direction: column;
  /* Figma "Menu" (REST 326:7564): 8px gaps tussen items en dividers. */
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
}
/* Full-width hairline-divider vóór én ná elk menu-item (Figma Menu). */
.onkd-menu__divider {
  flex-shrink: 0;
  height: 1px;
  background: var(--onkd-tour-border);
}
.onkd-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Figma menu-item: 48px hoog, 12px verticale padding, géén chevron. */
  height: 48px;
  padding: 12px 0;
  text-decoration: none;
  color: var(--onkd-onb-navy);
  font: var(--onkd-type-subheading); /* Figma Subheading 1: Roboto Medium 16 */
}
.onkd-menu__item svg,
.onkd-menu__item i {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--onkd-onb-navy);
}
.onkd-menu__item-label {
  flex: 1;
  min-width: 0;
}
.onkd-menu__item:hover {
  color: var(--onkd-onb-orange);
}
.onkd-menu__item:hover svg,
.onkd-menu__item:hover i {
  color: var(--onkd-onb-orange);
}
.onkd-menu__footer {
  margin: 16px 0;
  text-align: center;
  font: var(--onkd-type-tiny);
  font-weight: 400; /* ClickUp 869dqcnb4: ondertekst 400 i.p.v. 500 */
  color: var(--onkd-tour-text-muted);
}
.onkd-menu__bottomnav {
  grid-template-columns: repeat(3, 1fr);
  position: static; /* in de flex-shell verankerd, niet sticky (ClickUp 869dqcext) */
  flex: 0 0 auto;
}

/* Lege staat: gekozen taal zonder gepubliceerde rondleidingen */
.onkd-tours-shell--empty {
  min-height: 60vh;
}
.onkd-tours-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px;
  text-align: center;
  color: var(--onkd-tour-text-muted);
}
.onkd-tours-empty svg {
  color: var(--onkd-tour-border);
}
.onkd-tours-empty p {
  margin: 0;
  max-width: 320px;
  font: var(--onkd-type-body);
}