/* Vakantiehuis Toxopeus — routepagina's (routes, route, kaart, locatie, wizard) in de stijl van de site:
   koppen, tekst en kleuren via tokens.css (--f-head, --f-body, --c-*), witte kaarten (8px).
   Dit bestand overschrijft de rol-variabelen (--clr-*, --ox-*) en een paar vormen van site.css; het laadt na site.css en toxopeus.css. */

:root {
	--clr-bg:        var(--c-sand);
	--clr-surface:   #ffffff;
	--clr-elevated:  #ffffff;
	--clr-border:    var(--c-rose);
	--clr-border-lt: var(--c-rose-2);
	--clr-accent:    var(--c-taupe);
	--clr-accent-lt: var(--c-taupe-2);
	--clr-accent-bg: var(--c-sand);
	--clr-warm:      var(--c-taupe);
	--clr-text:      var(--c-plum);
	--clr-body:      var(--c-plum);
	--clr-muted:     var(--c-taupe);
	--clr-dim:       var(--c-taupe-3);
	--font-body:     var(--f-body);
	--font-display:  var(--f-head), var(--f-body);
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 8px;
	--r-xl: 8px;
	--shadow-sm: none;
	--shadow-md: 0 2px 10px color-mix(in srgb, var(--c-plum) 12%, transparent);
}

html { font-size: 16.5px; }
body { line-height: 1.8; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--clr-text); }
h1 { line-height: 1.05; }

/* ---------- foto-CTA onderaan: lichte neutrale schaduw i.p.v. de blauwe laag ---------- */
.ox-cta { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.42)), var(--bg) center/cover no-repeat; }
.ox-cta h2, .ox-cta p { text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ---------- knoppen: oranje pil, wit ---------- */
.split-flow .btn,
.btn { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.2; padding: 15px 22px; border-radius: 252px; }
.split-flow .btn-primary,
.btn-primary { background: linear-gradient(var(--c-taupe-2) 0%, var(--c-taupe) 100%); color: #fff; border-color: transparent; }
.split-flow .btn-primary:hover,
.btn-primary:hover { background: linear-gradient(var(--c-taupe-2) 0%, var(--c-taupe) 100%); color: #fff; filter: brightness(1.07); transform: none; }
.split-flow .btn-ghost,
.btn-ghost { background: transparent; color: var(--clr-accent); border: 2px solid var(--clr-accent); }
.split-flow .btn-ghost:hover,
.btn-ghost:hover { background: var(--clr-accent-bg); color: var(--clr-accent); }

/* ---------- hero-pin: foto met neutrale (niet-groene) schaduw ---------- */
.hero-pin { background: #555; }
.hero-pin-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.66) 100%); }
.hero-pin-content { padding: 40px; }
.hero-pin-content h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
.hero-pin-sub { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.7; }
.place-hero-content { background: linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.3) 60%, transparent 100%); }

/* ---------- secties ---------- */
.home-section--tinted { background: rgba(255, 255, 255, .28); }
.home-section-kicker { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; color: var(--clr-accent); }
.home-section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.section-sub { color: var(--clr-body); }

/* ---------- routekaarten ---------- */
.route-card { border-radius: 8px; padding: 22px 26px; border-left: 4px solid var(--clr-accent); box-shadow: none; }
.route-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-left-color: var(--clr-accent-lt); }
.route-card h2 { font-size: 1.45rem; }
.route-card p { font-size: .95rem; color: var(--clr-muted); }
.rc-meta span { font-family: var(--font-display); font-weight: 700; color: var(--clr-dim); background: var(--c-cream); border-radius: 99px; }
.rc-meta span:first-child { color: var(--c-plum); background: var(--clr-accent-bg); }
.route-card--eigen { border-left-color: var(--clr-accent-lt); }
.route-card--eigen .rc-meta span:last-child { color: var(--c-plum); background: var(--clr-accent-bg); }

/* ---------- route-detail ---------- */
.route-header h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 12px; }
.route-header p { font-size: 1.05rem; color: var(--clr-body); }
.route-meta .tag { font-family: var(--font-display); font-weight: 700; background: var(--clr-accent-bg); color: var(--c-plum); }
.route-meta .tag--muted { background: var(--c-cream); color: var(--clr-muted); }
.stops-section h2 { font-size: 1.5rem; }
.bs-position { font-family: var(--font-display); font-size: .8rem; box-shadow: 0 0 0 4px var(--clr-bg); }
.bs-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.bs-desc { font-size: .92rem; color: var(--clr-body); line-height: 1.6; }
.bs-link { font-family: var(--font-display); font-weight: 700; }
.routes-leeg { background: #fff; border-radius: 8px; }

/* ---------- kaart ---------- */
.split-pin { background: var(--c-rose-2); }
.leaflet-container { font-family: var(--font-body); background: var(--c-rose-2); }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-popup-content { font-family: var(--font-body); font-size: 14px; line-height: 1.5; }

/* ---------- wizard ---------- */
.wz-input { border-radius: 8px; font-family: var(--font-body); }
.wz-input:focus { outline: 2px solid var(--clr-accent); border-color: var(--clr-accent); }

/* ---------- routes-pagina's: tekst rechts direct onder de hero/header (geen dode ruimte) ---------- */
body main.routes-pg.split .split-flow { padding-top: 0 !important; }
main.routes-pg .split-flow > .home-section:first-child { padding-top: var(--sp-xl); }
.wz .split-header h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 12px; }
.wz .split-header p { font-size: 1.05rem; color: var(--clr-body); }

/* ---------- reiswijze (lopen / fiets / auto) ---------- */
.rt-modus { display: inline-flex; gap: 6px; margin: 6px 0 14px; }
.rt-modus-knop { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-body); padding: 10px 16px; border-radius: 99px; border: 2px solid var(--clr-accent); background: transparent; color: var(--clr-accent); cursor: pointer; }
.rt-modus-knop.is-actief { background: var(--clr-accent); color: #fff; }
.rt-modus-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 8px; }
.rt-modus-info { font-size: .95rem; color: var(--clr-body); }
.rt-vanmij { font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }

/* kleine terug-link boven de kop */
.route-terug { display: inline-block; margin-bottom: 10px; font-size: .85rem; font-weight: 600; color: var(--clr-accent); text-decoration: none; }
.route-terug:hover { text-decoration: underline; }

/* ---------- wizard: zoeken met type-filter en uitklaplijst ---------- */
.wz-combo { position: relative; }
.wz-zoek { grid-template-columns: 1fr 2fr 1fr; align-items: stretch; }
.wz-hits { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 30; max-height: 22rem; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 8px 28px color-mix(in srgb, var(--c-plum) 28%, transparent); }
.wz-hits[hidden], .rt-vanmij[hidden] { display: none; }
@media (max-width: 720px) {
}
.route-acties--onder { margin-top: var(--sp-lg); }

/* tags (stops / afstand / duur): witte achtergrond; niet-gevulde knoppen: crème */
.route-meta .tag, .route-meta .tag--muted { background: #fff; }
.split-flow .btn-ghost, .btn-ghost, .rt-modus-knop { background: var(--c-cream); }
.split-flow .btn-ghost:hover, .btn-ghost:hover, .rt-modus-knop:hover { background: var(--c-sand); }
.rt-modus-knop.is-actief, .rt-modus-knop.is-actief:hover { background: var(--clr-accent); }

/* aanklikken = vullen met oranje (knoppen met rand, keuzeknoppen en filterlabels) */
.split-flow .btn-ghost:active, .btn-ghost:active,
.place-info .route-acties .btn-ghost:active, .place-hero-content .route-acties .btn:active,
.rt-modus-knop:active, .bs-knop:active { background: linear-gradient(var(--c-taupe-2) 0%, var(--c-taupe) 100%) !important; border-color: var(--c-taupe) !important; color: #fff !important; }
.poi-filter .poi-filter-list label:has(input:checked) { background: linear-gradient(var(--c-taupe-2) 0%, var(--c-taupe) 100%) !important; border-color: var(--c-taupe) !important; color: #fff; }
.poi-filter .poi-filter-list input { accent-color: #fff; }
.poi-filter .poi-filter-list label { background: var(--c-cream); }
.wz-hit.is-gekozen { background: var(--c-taupe); color: #fff; }
.wz-hit.is-gekozen .wz-hit-teken, .wz-hit.is-gekozen .wz-hit-meta { color: #fff; }

/* kenmerk: locatie zit in een eigen route */
.in-route { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--c-rust-2); color: #fff; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.in-route svg { width: 16px; height: 16px; display: block; }
.in-route:focus-visible { outline: 2px solid var(--c-sand); outline-offset: 2px; }
.in-route--inline { width: 28px; height: 28px; margin-left: 10px; vertical-align: middle; box-shadow: none; }
.in-route--inline svg { width: 15px; height: 15px; }
.place-item-img > .in-route, .place-card-img > .in-route { position: absolute; top: 10px; right: 10px; z-index: 2; }
.place-hero-content h1 .in-route--inline { width: 38px; height: 38px; padding: 0; margin-left: 14px; } .place-hero-content h1 .in-route--inline svg { width: 22px; height: 22px; }

/* ---------- kaart-pin onder het plakkende menu: zoomknoppen blijven zichtbaar bij scrollen ---------- */
body main.routes-pg.split .split-pin { top: var(--hd-h, 100px) !important; height: calc(100vh - var(--hd-h, 100px)) !important; height: calc(100dvh - var(--hd-h, 100px)) !important; }
@media (max-width: 1080px) { body main.routes-pg.split .split-pin { height: 70vh !important; height: 70dvh !important; } }

/* ============ DONKERE VARIANT (opzet) — palet var(--c-plum) var(--c-taupe) var(--c-mauve) var(--c-rose) var(--c-sand) var(--c-cream) ============ */
:root{
	--ox-bg:var(--c-plum); --ox-ink:var(--c-cream); --ox-h:var(--c-cream); --ox-or:var(--c-sand); --ox-or2:var(--c-cream); --ox-tab:var(--c-rose);
	--ox-grad:linear-gradient(var(--c-sand) 0%,var(--c-rose) 100%);
	--clr-bg:var(--c-plum); --clr-surface:var(--c-plum-2); --clr-elevated:var(--c-plum-2); --clr-border:var(--c-taupe); --clr-border-lt:var(--c-plum-3);
	--clr-accent:var(--c-sand); --clr-accent-lt:var(--c-cream); --clr-accent-bg:var(--c-taupe); --clr-warm:var(--c-rose);
	--clr-text:var(--c-cream); --clr-body:var(--c-sand); --clr-muted:var(--c-rose); --clr-dim:var(--c-mauve);
	color-scheme: dark;
}
html,body,body.ox{background:var(--c-plum);color:var(--c-sand)}
/* knoppen: lichte roze pil met donkere tekst */
.ox-btn,.btn-primary,.split-flow .btn-primary{background:linear-gradient(var(--c-sand) 0%,var(--c-rose) 100%)!important;color:var(--c-plum)!important}
.ox-btn--white{background:var(--c-cream)!important;color:var(--c-plum)!important}
.ox-burger span{background:var(--c-plum)}
/* kaarten / vlakken die wit waren */
.ox-card,.ox-book,.ox-soon,.ox-masonry figure,.routes-leeg,.wz-hits,body .place-info,.ox-langmenu{background:var(--c-plum-2)!important;color:var(--c-sand)}
.ox-tile .ox-circ,.ox-m--photo .ox-circ{background:var(--c-sand)!important;color:var(--c-plum)!important}
.route-meta .tag,.route-meta .tag--muted,.place-info-tags .tag{background:var(--c-taupe);color:var(--c-cream);border-color:transparent}
body .place-info h2,body .place-info h3,.ox-card h2,.ox-card h3,.ox-book h2,.ox-book h3{color:var(--c-cream)}
body .place-info .route-acties .btn-ghost,.place-hero-content .route-acties .btn{background:var(--c-sand);color:var(--c-plum);border-color:var(--c-rose)}
.ox-nav li{border-color:var(--c-plum-3)}
hr,.ox-hr{border-color:var(--c-plum-3)}
/* logo: donker olijf -> licht */
.ox-logo img,.mm-logo{filter:brightness(0) invert(1) sepia(.18);opacity:.95}
.ox-usp .ox-circ{background:none!important}
.ox-usp .ox-circ .ox-ic{color:var(--c-sand)!important}
@media (max-width:1060px){.ox-nav ul{background:var(--c-plum-2)!important}}
body.ox .ox-nav a:not(.ox-btn){color:var(--c-sand)}
.ox-nav a:not(.ox-btn):hover{color:var(--c-cream)}
.ox-usp,.ox-usp *{border-color:color-mix(in srgb, var(--c-sand) 25%, transparent)}

/* ---------- kleine schaduw onder foto's en volvlakken ---------- */
:root{--ox-shadow:0 2px 8px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.28)}
.ox-hero,.ox-m,.ox-tile,.ox-photo,.ox-bimg,.ox-card,.ox-book,.ox-soon,.ox-contact,.ox-cta,.ox-masonry figure,
.ps-slide,.route-card,.place-card,.place-item-img,.place-card-img,body .place-info,.routes-leeg,.ox-side>*{box-shadow:var(--ox-shadow)}
.ox-btn,.btn-primary,.ox-burger{box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* ---------- accentkleur: het huidige oranje van de knoppen behouden ---------- */
:root{--ox-or:var(--c-orange-2); --ox-or2:var(--c-orange-2); --ox-grad:linear-gradient(var(--c-orange-2) 0%,var(--c-orange) 100%); --clr-warm:var(--c-orange)}
.ox-btn,.btn-primary,.split-flow .btn-primary{background:linear-gradient(var(--c-orange-2) 0%,var(--c-orange) 100%)!important;color:#fff!important}
.ox-btn--white{background:var(--c-cream)!important;color:var(--c-orange)!important}
body .place-info .route-acties .btn-ghost,.place-hero-content .route-acties .btn{border-color:var(--c-orange)}
.ox-nav a:not(.ox-btn):hover,.ox-nav a:not(.ox-btn).is-active{color:var(--c-orange-2)}
.poi-filter .poi-filter-list label:has(input:checked){background:linear-gradient(var(--c-orange-2) 0%,var(--c-orange) 100%)!important;border-color:var(--c-orange)!important}

/* ---------- hero-knoppen: icoon zonder vlak of schaduw, wit ---------- */
.ox-tile .ox-circ,.ox-m--photo .ox-circ,body .ox-m .ox-circ{background:none!important;box-shadow:none!important;color:#fff!important;border-radius:0}
.ox-tile .ox-circ .ox-ic,.ox-m--photo .ox-circ .ox-ic,.ox-m .ox-circ .ox-ic{color:#fff!important;filter:none!important}
.ox-tile .ox-circ svg,.ox-m .ox-circ svg{filter:none!important;box-shadow:none!important}

/* ---------- lopende tekst wit; titels houden de kleurnuance ---------- */
:root{--clr-body:#fff}
body.ox{color:#fff}
body p,body li,body dd,body td,body figcaption,body .page-text,body .place-info-text,.ox-btext,.ox-usp div{color:#fff}
body h1,body h2,body h3,body h4{color:var(--c-cream)}

/* ---------- kaartfilters: leesbare contrasten ---------- */
.poi-filter .poi-filter-list label{background:var(--c-plum-2)!important;color:var(--c-cream)!important;border:1.5px solid var(--c-mauve)!important;font-weight:500}
.poi-filter .poi-filter-list label:has(input:checked){background:linear-gradient(var(--c-orange-3) 0%,var(--c-orange-2) 100%)!important;color:var(--c-ink-deep)!important;border-color:var(--c-orange-2)!important;font-weight:700}
.poi-filter .poi-filter-list label:hover{border-color:var(--c-sand)!important}
.poi-filter .poi-filter-list input{accent-color:var(--c-ink-deep)}
.poi-filter .poi-filter-list label:has(input:not(:checked)) input{accent-color:var(--c-sand)}
.poi-filter legend{color:var(--c-cream)}

/* ---------- tabs/"harmonica"-titels, pills en iconen in de content: leesbare contrasten ---------- */
.ox-tabrow label,.ox-tabrow a.ox-tablink,.ox-pills label{background:var(--c-plum-2)!important;color:var(--c-cream)!important;border:1.5px solid var(--c-mauve);font-weight:500}
.ox-tabrow label:hover,.ox-tabrow a.ox-tablink:hover,.ox-pills label:hover{border-color:var(--c-sand);filter:none}
#ox-t1:checked~.ox-tabrow label[for=ox-t1],#ox-t2:checked~.ox-tabrow label[for=ox-t2],#ox-t3:checked~.ox-tabrow label[for=ox-t3],#ox-t4:checked~.ox-tabrow label[for=ox-t4],
#ox-f-all:checked~.ox-pills label[for=ox-f-all],#ox-f-Buitenkant:checked~.ox-pills label[for=ox-f-Buitenkant],#ox-f-Binnenkant:checked~.ox-pills label[for=ox-f-Binnenkant],#ox-f-Omgeving:checked~.ox-pills label[for=ox-f-Omgeving],#ox-f-Plattegronden:checked~.ox-pills label[for=ox-f-Plattegronden]{background:linear-gradient(var(--c-orange-3) 0%,var(--c-orange-2) 100%)!important;color:var(--c-ink-deep)!important;border-color:var(--c-orange-2);font-weight:700}
.ox-check li::before{background:var(--c-orange-2);color:var(--c-ink-deep)}

/* ---------- uitklapgroepen (harmonica) en stoplijst: leesbare contrasten ---------- */
.stop-group summary{background:var(--c-plum-2)!important;color:var(--c-cream)!important;border:1.5px solid var(--c-mauve)}
.stop-group summary .sg-n{opacity:1;color:var(--c-sand)}
.stop-group summary svg{fill:var(--c-orange-2)!important}
.stop-group summary svg [fill="var(--c-cream-2)"]{fill:var(--c-plum-2)}
.bs-position{background:var(--c-orange)!important;color:#fff!important}
.bs-position svg{fill:#fff!important}

/* ---------- overige knoppen, selectievelden en labels: voldoende contrast ---------- */
.rt-modus-knop{background:var(--c-plum-2)!important;color:var(--c-cream)!important;border:2px solid var(--c-mauve)!important}
.rt-modus-knop:hover{border-color:var(--c-sand)!important;background:var(--c-plum-2)!important}
.rt-modus-knop.is-actief,.rt-modus-knop.is-actief:hover{background:linear-gradient(var(--c-orange-3) 0%,var(--c-orange-2) 100%)!important;color:var(--c-ink-deep)!important;border-color:var(--c-orange-2)!important}
.rt-modus-knop:active{color:var(--c-ink-deep)!important}
input::placeholder,textarea::placeholder,.wz-input::placeholder{color:var(--c-rose);opacity:1}
.ox-field input::placeholder,.ox-field textarea::placeholder{color:var(--c-taupe);opacity:1}
.rc-meta span{background:var(--c-taupe);color:var(--c-cream)}
/* alle pillen op de kaartkaarten in dezelfde kleur als op de Mijn route-pagina (geen oranje meer) */
.rc-meta span:first-child,.route-card--eigen .rc-meta span:last-child{background:var(--c-taupe);color:var(--c-cream)}
body.ox .ox-nav a.is-active{opacity:1;color:var(--c-orange-2)}
.ox-btn--white{color:var(--c-plum)!important}
.cal-d.is-past{color:var(--c-rose)!important}
.ox-stars{color:var(--c-orange-3)}
.ox-nav a.is-active,.ox-nav a:not(.ox-btn).is-active{opacity:1!important}

/* POI-pagina: categorie als pil (zelfde look als de pillen op de kaartpagina) + icoon als oranje rondje met witte glyph. */
.place-info .place-info-tags { align-items: center; gap: 8px; }
.place-info .place-info-tags .tag { display: inline-block; font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; padding: .35em .8em; border-radius: 2rem; background: var(--c-taupe); color: var(--c-cream); }
.place-info .place-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-orange); flex: 0 0 auto; }
.place-info .place-ic svg { display: block; }
.place-info .place-ic { margin-left: auto; }

/* ---------- oranje verloop (diagonaal, linksboven → rechtsonder) voor knoppen en grote oranje vlakken ---------- */
:root { --ox-grad: linear-gradient(135deg, var(--c-rust) 0%, var(--c-rust-2) 100%); }
.ox-btn, .btn-primary, .split-flow .btn-primary { background: var(--ox-grad) !important; color: #fff !important; }
.ox-btn--white { background: var(--c-cream) !important; color: var(--c-orange) !important; }
.poi-filter .poi-filter-list label:has(input:checked) { background: var(--ox-grad) !important; border-color: var(--c-rust) !important; }
.rt-modus-knop.is-actief, .rt-modus-knop.is-actief:hover { background: var(--ox-grad) !important; border-color: var(--c-rust) !important; }
#ox-t1:checked~.ox-tabrow label[for=ox-t1],#ox-t2:checked~.ox-tabrow label[for=ox-t2],#ox-t3:checked~.ox-tabrow label[for=ox-t3],#ox-t4:checked~.ox-tabrow label[for=ox-t4],
#ox-f-all:checked~.ox-pills label[for=ox-f-all],#ox-f-Buitenkant:checked~.ox-pills label[for=ox-f-Buitenkant],#ox-f-Binnenkant:checked~.ox-pills label[for=ox-f-Binnenkant],#ox-f-Omgeving:checked~.ox-pills label[for=ox-f-Omgeving],#ox-f-Plattegronden:checked~.ox-pills label[for=ox-f-Plattegronden] { background: var(--ox-grad) !important; border-color: var(--c-rust); }

/* witte tekst op alle elementen met het oranje verloop (actieve filters, tabs, pillen, modusknoppen) */
.poi-filter .poi-filter-list label:has(input:checked),
.rt-modus-knop.is-actief, .rt-modus-knop.is-actief:hover, .rt-modus-knop:active,
#ox-t1:checked~.ox-tabrow label[for=ox-t1],#ox-t2:checked~.ox-tabrow label[for=ox-t2],#ox-t3:checked~.ox-tabrow label[for=ox-t3],#ox-t4:checked~.ox-tabrow label[for=ox-t4],
#ox-f-all:checked~.ox-pills label[for=ox-f-all],#ox-f-Buitenkant:checked~.ox-pills label[for=ox-f-Buitenkant],#ox-f-Binnenkant:checked~.ox-pills label[for=ox-f-Binnenkant],#ox-f-Omgeving:checked~.ox-pills label[for=ox-f-Omgeving],#ox-f-Plattegronden:checked~.ox-pills label[for=ox-f-Plattegronden] { color: #fff !important; }

/* greepstreepje bovenin de content (mobiel, kaart + content schuiven): wit */
.split:not(.split--solo):not(.split--full) .split-flow::before { background: #fff !important; }

/* header mobiel: hamburger links, logo gecentreerd, taalkeuze rechts */
@media (max-width: 1060px) {
  .ox-hd-in { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-rows: 68px auto; align-items: center; gap: 0 10px; min-height: 0; }
  .ox-burger { grid-column: 1; grid-row: 1; justify-self: start; order: 0; width: 42px; height: 42px; gap: 4px; background: none !important; box-shadow: none !important; }
  .ox-burger span { width: 18px; background: #fff !important; }
  .ox-logo { grid-column: 2; grid-row: 1; display: flex; align-items: center; }
  .ox-logo img { height: 16px !important; width: auto; }
  .ox-langdd { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .ox-langdd > summary { border-color: transparent !important; padding-left: 6px; padding-right: 4px; }
  .ox-langdd .ox-chev { display: none; }
  .ox-nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 380px) { .ox-logo img { height: 15px !important; } }

/* hamburger -> huisje: bovenste lijn = linkermuur, middelste (twee streepjes "- -") = dak, onderste = rechtermuur */
@media (max-width: 1060px) {
  .ox-burger { position: relative; }
  .ox-burger span { position: absolute; display: block; left: 50%; top: 50%; height: 2px; margin: -1px 0 0 -9px; width: 18px; border-radius: 2px; background: #fff !important; transition: transform .38s cubic-bezier(.5,0,.2,1); }
  .ox-burger span:nth-child(1) { transform: translateY(-6px); }
  .ox-burger span:nth-child(3) { transform: translateY(6px); }
  .ox-burger span:nth-child(2) { width: 8px; transform-origin: 0 50%; transition: transform .38s cubic-bezier(.5,0,.2,1) .06s; }
  .ox-burger span:nth-child(2)::before { content: ""; position: absolute; top: 0; left: calc(100% - 1px); width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .2s .25s; }
  .ox-burger span:nth-child(2)::after { content: ""; position: absolute; top: 0; left: calc(100% + 2px); width: 8px; height: 2px; border-radius: 2px; background: #fff; transform-origin: 0 50%; transition: transform .38s cubic-bezier(.5,0,.2,1) .06s, left .38s cubic-bezier(.5,0,.2,1) .06s; }
  .ox-toggle:checked ~ .ox-burger span:nth-child(1) { transform: translate(-6.1px, 2.1px) rotate(90deg) scaleX(.611); }
  .ox-toggle:checked ~ .ox-burger span:nth-child(3) { transform: translate(6.1px, 2.1px) rotate(90deg) scaleX(.611); }
  .ox-toggle:checked ~ .ox-burger span:nth-child(2) { transform: translate(2.9px, -2.4px) rotate(-40deg); }
  .ox-toggle:checked ~ .ox-burger span:nth-child(2)::after { left: 100%; transform: rotate(80deg); }
  .ox-toggle:checked ~ .ox-burger span:nth-child(2)::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ox-burger span, .ox-burger span::after { transition: none !important; } }

/* Ontdekken: tabrij heeft nog 3 tabs (Locaties-tab vervallen) */
.ox-ontdek .ox-tabrow { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .ox-ontdek .ox-tabrow { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .ox-ontdek .ox-tabrow label { padding: 12px 6px; font-size: 13px; text-align: center; } }

/* wizard: sorteren op afstand tot het huis + afstand per locatie */
.wz-sorteer { margin: 0 0 14px; }
.wz-sorteer[hidden] { display: none; }
.wz-sorteer small { color: var(--c-sand-2); font-size: .85rem; }
.bs-huis { display: inline-block; align-self: flex-start; margin: 2px 0 4px; white-space: nowrap; font: 700 .78rem/1 var(--font-display, inherit); padding: .4em .75em; border-radius: 2rem; background: var(--c-taupe); color: var(--c-cream); }
.bs-huis .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* routelijn op de POI-kaart: per vervoermiddel een eigen lijnstijl (lopen = stipjes, fiets = streepjes, auto = lange streepjes);
   de patronen stromen richting de plek. De dash-som van de patronen (14 / 22 / 38) is de lengte van een animatieronde. */
.route-flow--foot { animation: route-flow-foot 1.1s linear infinite; }
.route-flow--bike { animation: route-flow-bike 1s linear infinite; }
.route-flow--car { animation: route-flow-car .8s linear infinite; }
@keyframes route-flow-foot { to { stroke-dashoffset: -14; } }
@keyframes route-flow-bike { to { stroke-dashoffset: -22; } }
@keyframes route-flow-car { to { stroke-dashoffset: -38; } }
@media (prefers-reduced-motion: reduce) { .route-flow--foot, .route-flow--bike, .route-flow--car { animation: none; } }

/* wizard: onderlinge afstand (•—• vanaf vorige stop) vóór de afstand tot het huis (⌂) */
.bs-afst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; }
.bs-afst .bs-huis, .bs-afst .bs-leg { margin: 0; }
.bs-leg { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; white-space: nowrap; font: 700 .78rem/1 var(--font-display, inherit); padding: .4em .75em; border-radius: 2rem; background: var(--c-taupe); color: var(--c-cream); }
.bs-leg svg { display: block; flex: none; }
.bs-leg .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* contrast: niet-gevulde knoppen op de routepagina's (Bewerk route, Verwijder route, Naar jouw routes, Allebei houden …)
   in dezelfde kleuren als de tabknoppen op Ontdekken */
.routes-pg .btn-ghost, .split--solo .btn-ghost { background: var(--c-plum-2); color: var(--c-cream); border: 1.5px solid var(--c-mauve); font-weight: 500; }
.routes-pg .btn-ghost:hover, .split--solo .btn-ghost:hover { background: var(--c-plum-2); color: var(--c-cream); border-color: var(--c-sand); }
.routes-pg .btn-ghost:active, .split--solo .btn-ghost:active { background: linear-gradient(var(--c-taupe-2) 0%, var(--c-taupe) 100%) !important; border-color: var(--c-taupe) !important; color: #fff !important; }
/* contrast: crème knop met oranje tekst (Beschikbaarheid / Prijzen) → donkerder oranje (≥ 5:1) */
.ox-btn--white { color: var(--c-rust-3) !important; }

/* onderlinge afstand verticaal tussen twee stops, op de tijdlijn */
.bs-tussen { display: flex; align-items: center; gap: var(--sp-md, 16px); min-height: 30px; color: var(--c-sand-2); font: 600 .82rem/1 var(--font-display, inherit); }
.bs-tussen-icoon { display: flex; justify-content: center; width: 28px; flex: none; position: relative; z-index: 1; }
.bs-tussen-icoon svg { display: block; background: var(--clr-bg); padding: 2px 0; box-sizing: content-box; }
.bs-tussen .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* wizard: uitleg bij stap 2 ingeklapt tot twee regels met fade, knop "Meer" */
.wz-uitleg-tekst { margin: 0; overflow: hidden; line-height: 1.5; max-height: calc(2 * 1.5 * .85rem); transition: max-height .25s ease; }
.wz-uitleg-tekst small { display: block; line-height: inherit; }
.wz-uitleg:not(.is-open):not(.is-kort) .wz-uitleg-tekst { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 1.5em, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 1.5em, transparent 100%); }
.wz-uitleg.is-kort .wz-uitleg-tekst { max-height: none; }
.wz-uitleg.is-kort .wz-meer { display: none; }
.wz-meer { display: flex; align-items: center; justify-content: center; gap: .4em; margin: 6px auto 0; padding: .45em .95em; background: var(--c-plum-2); border: 1.5px solid var(--c-mauve); border-radius: 2rem; color: var(--c-cream); font: 600 .8rem/1 var(--font-display, inherit); cursor: pointer; }
.wz-meer:hover { border-color: var(--c-sand); color: #fff; }
.wz-meer:focus-visible { outline: 2px solid var(--c-sand); outline-offset: 3px; }
.wz-meer svg { display: block; transition: transform .2s ease; }
.wz-uitleg.is-open .wz-meer svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .wz-uitleg-tekst, .wz-meer svg { transition: none; } }

/* Mijn route: ruimte tussen de pillen en de vervoerknoppen, minder ruimte tussen de knoppen en de titel Stops */
.rt-modus-slot { margin-top: 18px; }
body[data-route-eigen] .route-header ~ .stops-section { margin-top: 28px; }

/* stoplijst (Mijn route): titel is een link zonder onderstreping, pijltje rechts; nummer, titel en pijltje op één lijn */
.bs-name--link { display: block; margin-top: -3px; padding: calc((28px - 1.25em) / 2) 0; line-height: 1.25; color: inherit; text-decoration: none; }
.bs-name--link:hover, .bs-name--link:focus-visible { color: var(--c-sand); }
.bs-pijl { display: flex; align-items: center; justify-content: center; flex: none; height: 28px; margin-left: auto; color: var(--c-orange); text-decoration: none; }
.bs-pijl:hover { color: var(--c-sand); }
.stop-li .block-stop:has(.bs-pijl) .bs-content { flex: 1; min-width: 0; }

/* wizard: Sorteer op dezelfde regel en dezelfde hoogte als Lopen / Fiets / Auto */
.rt-modus-wrap:has(.wz-sorteerknop) { align-items: stretch; gap: 8px 6px; margin: 6px 0 14px; }
.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus { margin: 0; }
.rt-modus-wrap:has(.wz-sorteerknop) .wz-sorteerknop { align-self: stretch; }
.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus-info { align-self: center; margin-left: 10px; }
@media (max-width: 480px) {
	.rt-modus-wrap:has(.wz-sorteerknop) { gap: 8px 4px; }
	.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus { gap: 4px; }
	.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus-knop { padding: 10px 11px; gap: 5px; font-size: 13px; }
	.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus-knop svg { width: 18px; height: 18px; }
	.rt-modus-wrap:has(.wz-sorteerknop) .rt-modus-info { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 420px) { .rt-modus-wrap:has(.wz-sorteerknop) .wz-sorteerknop svg { display: none; } }
@media (max-width: 370px) { .rt-modus-wrap:has(.wz-sorteerknop) .rt-modus-knop svg { display: none; } }

/* wizard-lijst: nummer, titel en de knoppen (omhoog, omlaag, verwijderen) op één lijn; afstandspillen blijven onder de titel */
.wz-stops .block-stop { align-items: flex-start; }
.wz-stops .bs-name { display: block; margin-top: -3px; padding: calc((28px - 1.25em) / 2) 0; line-height: 1.25; }
.wz-stops .block-stop .bs-acties { align-self: flex-start; margin: -2px 0 0 auto; }

/* linker rand van de routekaarten: donker oranje (zelfde als de oranje knoppen) */
.route-card, .route-card:hover, .route-card--eigen, .route-card--eigen:hover { border-left-color: var(--c-rust); }

/* tekstballon bij het "zit in eigen route"-icoon */
.in-route-ballon { position: absolute; z-index: 10000; max-width: 240px; padding: 9px 13px; border-radius: 10px; background: var(--c-ink-deep); color: var(--c-cream); border: 1.5px solid var(--c-rust); font: 600 .82rem/1.35 var(--font-body, inherit); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); pointer-events: none; }
.in-route-ballon::after { content: ""; position: absolute; left: var(--pijl-x, 50%); width: 10px; height: 10px; background: var(--c-ink-deep); border: 1.5px solid var(--c-rust); transform: translateX(-50%) rotate(45deg); }
.in-route-ballon.is-boven::after { bottom: -6.5px; border-top: 0; border-left: 0; }
.in-route-ballon.is-onder::after { top: -6.5px; border-bottom: 0; border-right: 0; }

/* ---------- wizard: kaartkeuze (uitschuifpaneel onder het zoekveld) ---------- */
/* zoekblok: eerst type, dan zoeken, dan kaart; alle drie even breed en in dezelfde stijl */
.wz-zoek { gap: 10px; }
.wz-zoek .wz-select { order: 1; display: block; min-width: 0; }
.wz-zoek .wz-input { order: 2; display: none; } /* zoeken op tekst verborgen: kiezen gaat via de kaart */
.wz-zoek .wz-kaartknop { order: 3; }
.wz-zoek .wz-select select { width: 100%; height: 100%; min-height: 46px; box-sizing: border-box; padding: .7rem .9rem; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); font: inherit; color: var(--clr-text); }
.wz-kaartknop { min-height: 46px; box-sizing: border-box; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: .6em; width: 100%; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text); font: inherit; cursor: pointer; text-align: left; }
.wz-kaartknop svg { color: var(--c-orange); flex: none; }
.wz-kaartknop[aria-expanded="true"] { border-color: var(--c-orange); }
.wz-kaartpaneel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; margin-top: 12px; scroll-margin-top: calc(var(--hd-h, 100px) + 8px); }
.wz-kaartpaneel.is-open { grid-template-rows: 1fr; }
.wz-kaartpaneel[hidden] { display: none; }
.wz-kaartpaneel-uit { overflow: hidden; min-height: 0; }
.wz-kaartpaneel-in { border-radius: 12px; overflow: hidden; background: var(--c-plum-2); box-shadow: var(--ox-shadow); }
.wz-kaartbalk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: .82rem; line-height: 1.35; color: var(--c-sand); }
.wz-kaarthint { flex: 1; }
.wz-kaartteller { font-weight: 700; color: var(--c-orange-2); white-space: nowrap; }
.wz-kaartdicht { display: inline-flex; align-items: center; gap: .45em; border: 0; background: var(--c-taupe); color: #fff; border-radius: 999px; padding: .45rem .95rem; font: 600 .8rem/1 var(--f-body); cursor: pointer; }
/* Zoekvenster linksonder op de kaart */
.wz-pickwrap { position: relative; }
.wz-pickzoek { position: absolute; left: 10px; bottom: 10px; z-index: 1000; width: min(290px, calc(100% - 150px)); min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.wz-pickin { display: flex; align-items: center; gap: .55em; box-sizing: border-box; min-height: 42px; padding: 0 .8rem; border-radius: 999px; background: var(--clr-surface, #fff); color: var(--clr-text, #2a1f24); border: 1px solid var(--clr-border, rgba(0,0,0,.18)); box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.wz-pickin:focus-within { border-color: var(--c-orange); }
.wz-pickin svg { flex: none; color: var(--c-orange); }
.wz-pickin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: .9rem; padding: .55rem 0; -webkit-appearance: none; appearance: none; }
.wz-pickin input::-webkit-search-cancel-button { cursor: pointer; }
.wz-pickres { list-style: none; margin: 0; padding: 4px; border-radius: 12px; background: var(--clr-surface, #fff); color: var(--clr-text, #2a1f24); box-shadow: 0 2px 12px rgba(0,0,0,.32); max-height: 230px; overflow-y: auto; }
.wz-pickres[hidden] { display: none; }
.wz-pickres li { display: flex; flex-direction: column; gap: 1px; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; line-height: 1.25; }
.wz-pickres li[data-i]:hover, .wz-pickres li.is-act { background: rgba(213,132,50,.16); }
.wz-pickres-naam { font-size: .9rem; font-weight: 600; }
.wz-pickres-meta { font-size: .75rem; opacity: .7; }
.wz-pickres-leeg { cursor: default; font-size: .85rem; opacity: .75; }
.wz-pickmap { width: 100%; height: min(66vh, 540px); min-height: 320px; background: var(--c-rose-2); }
@media (min-width: 1081px) { .wz-pickmap { height: 440px; } }
@media (prefers-reduced-motion: reduce) { .wz-kaartpaneel { transition: none; } }
/* kaartje bij een plek */
.pk-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 12px; }
.pk-popup .leaflet-popup-content { margin: 0; }
.pk-popup a.leaflet-popup-close-button { top: 6px; right: 6px; width: 24px; height: 24px; line-height: 22px; border-radius: 50%; background: color-mix(in srgb, #fff 90%, transparent); color: var(--c-plum); }
.pk { font-family: var(--f-body); color: var(--c-plum); }
.pk .pk-foto { display: block; width: 100%; height: 110px; object-fit: cover; }
.pk .pk-tekst { padding: 10px 12px 2px; }
.pk .pk-naam { display: block; font: 700 1rem/1.25 var(--f-head); color: var(--c-plum); }
.pk .pk-regio { display: block; margin-top: 2px; font-size: .75rem; color: var(--c-taupe); }
.pk .pk-oms { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--c-plum); }
.pk .pk-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px 12px; }
.pk .pk-acties .pk-meer { align-self: flex-end; }
.pk .pk-chk { display: flex; align-items: center; gap: 8px; min-height: 36px; font: 600 .85rem/1.2 var(--f-body); color: var(--c-plum); cursor: pointer; }
/* leeg vakje = alleen een rand; aangevinkt = oranje met wit vinkje */
.pk .pk-chk input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--c-taupe); border-radius: 6px; background: #fff; display: grid; place-content: center; cursor: pointer; }
.pk .pk-chk input::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.pk .pk-chk input:checked { background: var(--c-orange); border-color: var(--c-orange); }
.pk .pk-chk input:checked::after { opacity: 1; }
.pk .pk-chk input:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-orange) 45%, transparent); outline-offset: 2px; }
.pk .pk-meer { font: 600 .8rem/1.2 var(--f-body); color: var(--c-rust) !important; text-decoration: underline; white-space: nowrap; }
.pk .pk-vast { font-size: .82rem; font-weight: 600; color: var(--c-taupe); }
/* gekozen plek: route-slinger (S met een + aan de uiteinden) als label op het icoon */
.leaflet-marker-icon.is-picked::after { content: ''; position: absolute; right: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-orange); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); pointer-events: none; box-sizing: border-box; }
.leaflet-marker-icon.is-picked::before { content: ''; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; z-index: 1; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.wz-hit-teken svg { width: 26px; height: 26px; vertical-align: middle; }

/* melding (toast): goed leesbaar op de donkere basis, boven de tabbalk en de kaart */
.melding { z-index: 1200; background: var(--c-plum-2); color: var(--c-cream); border: 1.5px solid var(--c-orange); font-weight: 600; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 900px) { .melding { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* type-keuze met meerdere categorieën */
.wz-zoek .wz-select { position: relative; }
.wz-multi-knop { display: block; width: 100%; min-height: 46px; box-sizing: border-box; padding: .7rem 2rem .7rem .9rem; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-surface); color: var(--clr-text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.wz-multi-knop::after { content: ''; position: absolute; right: .9rem; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.wz-multi-knop[aria-expanded="true"] { border-color: var(--c-orange); }
.wz-multi-knop.is-leeg { color: var(--c-rose); }
.wz-multi-lijst { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 40; min-width: 220px; background: var(--c-plum-2); border: 1.5px solid var(--c-orange); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); padding: 6px; max-height: 20rem; overflow-y: auto; }
.wz-multi-lijst[hidden] { display: none; }
.wz-multi-rij { display: flex; align-items: center; gap: .6em; padding: .55rem .6rem; border-radius: 6px; color: var(--c-cream); cursor: pointer; }
.wz-multi-rij:hover { background: color-mix(in srgb, var(--c-orange) 18%, transparent); }
.wz-multi-alle { border-bottom: 1px solid var(--clr-border); border-radius: 6px 6px 0 0; margin-bottom: 4px; font-weight: 600; }
.wz-multi-rij input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid var(--c-cream); border-radius: 5px; background: transparent; display: grid; place-content: center; }
.wz-multi-rij input:checked { background: var(--c-orange); border-color: var(--c-orange); }
.wz-multi-rij input:checked::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* type-knop en kaartknop: zelfde lettertype, formaat en kleur; type-knop is 1/4 en mag op twee regels */
.wz-multi-knop, .wz-kaartknop { font-family: var(--f-body); font-size: .95rem; font-weight: 500; line-height: 1.15; color: var(--c-cream); }
.wz-multi-knop.is-leeg { color: var(--c-cream); }
.wz-multi-knop { white-space: normal; padding: .5rem 1.5rem .5rem .7rem; display: flex; align-items: center; }
.wz-multi-knop::after { right: .6rem; }
.wz-multi-lijst { min-width: min(260px, calc(100vw - 32px)); }

/* "Bewaar locatie" op de plekpagina: stand 'in mijn route' */
.route-acties .btn.is-in-route { display: inline-flex; align-items: center; gap: .6em; border-color: var(--c-orange); color: var(--c-orange-2); }
.route-acties .btn.is-in-route svg { flex: none; }

/* de typelijst moet boven de open kaart staan; de kaart houdt zijn eigen (hoge) lagen binnen het paneel */
.wz-zoek { position: relative; z-index: 20; }
.wz-multi-lijst { z-index: 2000; }
.wz-kaartpaneel { position: relative; z-index: 0; isolation: isolate; }
.wz-hits { z-index: 30; }

/* Verras me! + label per stop */
.wz-zoek .wz-verras { order: 4; display: flex; align-items: center; justify-content: flex-start; gap: .4em; min-height: 46px; min-width: 0; box-sizing: border-box; padding: .5rem .9rem; border: 0; border-radius: 8px; background: var(--c-orange); color: #fff; font: 700 .95rem/1.15 var(--f-body); text-align: left; cursor: pointer; }
.wz-zoek .wz-verras svg { flex: none; width: 16px; height: 16px; }
@media (max-width: 420px) { .wz-zoek .wz-verras svg { display: none; } }
.wz-zoek .wz-verras:hover { background: var(--c-orange-2); }
.wz-zoek .wz-verras:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 2px; }
.bs-tag { display: block; width: max-content; max-width: 100%; margin-bottom: 3px; padding: 1px 9px; border-radius: 99px; background: var(--c-orange); color: #fff; font: 700 .68rem/1.5 var(--f-body); letter-spacing: .05em; text-transform: uppercase; }

/* disclaimer onder de selectieknoppen en onderaan de routepagina's */
.route-disclaimer { font-style: normal; font-size: .85rem; line-height: 1.45; color: var(--c-sand-3); margin: 14px 0 0; }
.wz-zoek .route-disclaimer { order: 5; grid-column: 1 / -1; margin: 2px 0 0; }
.wz-zoek .route-disclaimer::before { content: '* '; }