/* ==========================================================================
   EuropeVignettes.eu — Routeplanner (routeplanner.css)
   Los bestand t.o.v. style.css / map.css — hergebruikt dezelfde design-tokens
   (--ev-*, --flag-*) en de bestaande kaart-basisstijl uit map.css (marker-
   vorm, popup, hint-overlay). Dit bestand voegt alleen de route-specifieke
   UI toe: klikbare volgorde-chips, genummerde markerbadges, de "wat u nodig
   heeft"-lijst en het bestelformulier.
   Laadvolgorde: style.css → map.css → routeplanner.css.
   ========================================================================== */

/* ── Hero (foto-achtergrond, zelfde wash-patroon als de landpagina's) ──
   Bewust maar licht ingekort t.o.v. de landpagina's eigen hero — het
   Van/Naar-formulier mag net iets eerder in beeld komen zonder te scrollen,
   maar de hero moet duidelijk substantieel blijven (dat vindt de gebruiker
   mooi), dus alleen de onderste marge is verkleind. */
.ev-rp-hero {
  position: relative;
  padding: 48px 0 64px;
  background:
    linear-gradient(100deg, var(--ev-paper) 0%, var(--ev-paper) 42%, rgba(247,248,250,.72) 60%, rgba(247,248,250,.3) 100%),
    radial-gradient(1100px 480px at 12% -10%, rgba(240,98,60,.14), transparent 60%),
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tremola_on_the_Gotthard_Pass.jpg/1280px-Tremola_on_the_Gotthard_Pass.jpg') center 62% / cover no-repeat,
    var(--ev-paper);
}
.ev-rp-hero h1 { max-width: 16ch; margin-top: 6px; }
.ev-rp-hero > .ev-wrap > p { margin-top: 14px; margin-bottom: 0; }

/* Planner-sectie schuift iets ÍN de hero — het paneel "tilt op" tegen de
   foto aan, voller/eleganter dan een harde overgang tussen twee vlakke
   secties. */
.ev-rp-planner-section { padding-top: 0; margin-top: -56px; position: relative; z-index: 5; }

/* ── Planner-grid: links het formulier, rechts de kaart — zelfde
   grondgedachte als Google Maps (zoekpaneel + kaart naast elkaar), in het
   eigen visuele merk van de site. ── */
.ev-rp-planner-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
}
/* Geen align-items:start — de kolommen moeten precies even hoog sluiten als
   de kaart rechts (grid-default is stretch), dus het formulierkaartje rekt
   altijd mee tot de hoogte van #ev-live-map, links en rechts sluiten netjes
   op dezelfde onderrand aan. */
.ev-rp-form-col { display: flex; flex-direction: column; box-shadow: var(--ev-shadow-lift); height: 100%; }
.ev-rp-form-col-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ev-rp-map-col { box-shadow: var(--ev-shadow-lift); height: 100%; }
@media (max-width: 980px) {
  .ev-rp-planner-layout { grid-template-columns: 1fr; }
  .ev-rp-form-col, .ev-rp-map-col { height: auto; }
  .ev-rp-planner-section { margin-top: -36px; }
}

/* ── Legenda onder de kaart — legt uit wat de druppel-markers betekenen én
   dat vignet vs. milieusticker twee verschillende soorten stappen zijn (één
   gebundelde bestelling vs. een aparte handmatige aanvraag). Zonder dit was
   niet vanzelfsprekend wat een blauwe/gouden vlag-druppel op de kaart
   betekende, en zeker niet dat ze verschillend afgehandeld worden. ── */
.ev-rp-marker-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin-top: 18px;
  font-size: .78rem; font-weight: 600; color: var(--ev-ink-60);
}
.ev-rp-marker-legend strong { color: var(--ev-ink); font-weight: 700; }
.ev-rp-marker-legend-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) translateY(-1px);
  margin-right: 3px;
}
.ev-rp-marker-legend-dot-vignet { background: var(--ev-white); border: 2px solid var(--ev-blue-900); }
.ev-rp-marker-legend-dot-milieu { background: var(--ev-white); border: 2px solid var(--ev-gold); }
@media (max-width: 640px) {
  .ev-rp-marker-legend { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
}

/* ── Scroll-hint onder de planner — een écht klikbare pil (geen passieve
   tekst) die naar het resultatenblok springt, want anders bleef onduidelijk
   dat er nog veel meer info verderop staat. De "Meer info →"-knop trekt
   bewust de aandacht (koraal, met bounce-pijltje), de tekst ernaast legt uit
   wát er te vinden is. ── */
.ev-rp-scroll-cue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 22px;
  padding: 14px 20px;
  border-radius: var(--ev-radius-lg);
  background: var(--ev-white);
  box-shadow: var(--ev-shadow-card);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ev-rp-scroll-cue:hover { box-shadow: var(--ev-shadow-lift); transform: translateY(-1px); }
.ev-rp-scroll-cue > span:first-child { font-size: .86rem; font-weight: 600; color: var(--ev-ink-60); text-align: center; }
.ev-rp-scroll-cue-cta {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ev-coral);
  color: var(--ev-white);
  font-size: .82rem; font-weight: 700;
  white-space: nowrap;
}
.ev-rp-scroll-cue-cta svg { width: 14px; height: 14px; animation: ev-rp-scroll-cue-bounce 1.8s ease-in-out infinite; }
@keyframes ev-rp-scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-rp-scroll-cue-cta svg { animation: none; }
}
@media (max-width: 640px) {
  .ev-rp-scroll-cue { flex-direction: column; padding: 14px 16px; }
  .ev-rp-scroll-cue > span:first-child { font-size: .8rem; }
}

/* Route-balk als lichte, inline balk binnen het witte formulierpaneel
   (i.p.v. de donkerblauwe balk die oorspronkelijk bovenop de kaart lag). */
/* .ev-rp-route-bar.ev-rp-route-bar-inline (dubbele class) i.p.v. losse
   selector — anders wint de latere .ev-rp-route-bar-regel (donkerblauwe
   achtergrond, bedoeld voor de oude balk bovenop de kaart) alsnog de
   cascade, zelfde bug-patroon als eerder bij .ev-rp-vn-field-light. */
.ev-rp-route-bar.ev-rp-route-bar-inline {
  background: var(--ev-paper-2);
  color: var(--ev-ink);
  border-radius: var(--ev-radius-md);
  margin-top: 14px;
  font-size: .82rem;
}
.ev-rp-route-bar.ev-rp-route-bar-inline .ev-rp-pref-btn {
  border-color: var(--ev-border);
  color: var(--ev-ink-60);
}
.ev-rp-route-bar.ev-rp-route-bar-inline .ev-rp-pref-btn.active { background: var(--ev-blue-900); color: var(--ev-white); border-color: var(--ev-blue-900); }
.ev-rp-route-bar.ev-rp-route-bar-inline .ev-rp-route-clear { color: var(--ev-ink-40); }
.ev-rp-route-bar.ev-rp-route-bar-inline .ev-rp-route-clear:hover { color: var(--ev-coral-dark); }

/* ── Expliciete "Route berekenen"-knop — een duidelijke, klikbare bevestiging
   i.p.v. alleen impliciet gedrag bij het kiezen van een zoekresultaat. ── */
.ev-rp-plan-btn {
  width: 100%; justify-content: center;
  margin-top: 14px;
}
.ev-rp-plan-btn svg { width: 17px; height: 17px; }
.ev-rp-plan-btn:disabled { opacity: .6; cursor: default; transform: none !important; box-shadow: none !important; }
.ev-rp-plan-btn-loading svg { animation: ev-rp-spin .8s linear infinite; }
@keyframes ev-rp-spin { to { transform: rotate(360deg); } }

/* ── Resultatenkolom onder de kaart (route-stats, schema, milieu/tips/discover) ── */
.ev-rp-results-col { display: flex; flex-direction: column; gap: 18px; }
.ev-rp-empty-results {
  text-align: center;
  padding: 40px 24px;
  color: var(--ev-ink-40);
  font-size: .92rem;
  border: 1.5px dashed var(--ev-border);
  border-radius: var(--ev-radius-lg);
  background: var(--ev-white);
}
/* De 4 blokken hieronder hadden elk al hun EIGEN achtergrondkleur (schema=wit,
   milieu=goud, tips=teal, discover=blauw) — die kleurcodering blijft
   ongemoeid; hier resetten we alleen de marge (was ontworpen om ín de oude
   kaart-kaart te passen, nu staan ze los in .ev-rp-results-col) en geven we
   ze allemaal dezelfde kaart-achtige afronding/schaduw. */
.ev-rp-results-col .ev-rp-route-result,
.ev-rp-results-col .ev-rp-schedule-block,
.ev-rp-results-col .ev-rp-milieu-block,
.ev-rp-results-col .ev-rp-tips-block,
.ev-rp-results-col .ev-rp-discover-block {
  margin: 0;
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
}
.ev-rp-results-col .ev-rp-route-result { background: var(--ev-white); border: 1px solid var(--ev-border); padding: 16px 20px; }

/* ── Zoekresultaten-dropdown (gedeeld door de Van/Naar-velden) ── */
.ev-rp-search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: .88rem;
  border-bottom: 1px solid var(--ev-border);
}
.ev-rp-search-result:last-child { border-bottom: none; }
.ev-rp-search-result:hover { background: var(--ev-paper-2); }
.ev-rp-search-result .fi { width: 1.2em; border-radius: 3px; flex-shrink: 0; }
.ev-rp-search-result-place { font-weight: 600; color: var(--ev-ink); }
.ev-rp-search-result-sub { font-size: .76rem; color: var(--ev-ink-40); }
.ev-rp-search-empty { padding: 14px 16px; font-size: .84rem; color: var(--ev-ink-40); }

/* ── Van/Naar in de hero — lichte variant van .ev-rp-vn-field ──
   Altijd verticaal (Van → eventuele tussenstops → Naar → eventuele
   terugreis) zodat er naast elke plaats ruimte is voor een datumveld. ── */
.ev-rp-hero-vn {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  max-width: 680px;
  margin-top: 30px;
}
.ev-rp-vn-row { display: flex; align-items: stretch; gap: 10px; }
/* flex-basis 0 (i.p.v. auto) i.p.v. content-breedte — zo zijn Van- en
   Naar-blok altijd exact even breed, ongeacht dat "Naar" een letter langer
   is dan "Van", en krijgt het veld de ruimte die het datumveld hiernaast
   inlevert. */
.ev-rp-vn-row .ev-rp-vn-field { flex: 1 1 0%; }
/* .ev-rp-vn-field.ev-rp-vn-field-light (dubbele class) i.p.v. losse selector
   — anders wint de latere .ev-rp-vn-field input-regel (witte tekst, bedoeld
   voor de donkerblauwe route-bar-variant) de cascade en wordt ingetypte
   tekst hier bijna onzichtbaar wit-op-wit. */
.ev-rp-vn-field.ev-rp-vn-field-light {
  background: var(--ev-white);
  border-color: var(--ev-border);
  box-shadow: var(--ev-shadow-card);
}
.ev-rp-vn-field.ev-rp-vn-field-light input { color: var(--ev-ink); }
.ev-rp-vn-field.ev-rp-vn-field-light input::placeholder { color: var(--ev-ink-40); font-weight: 400; }
.ev-rp-vn-field.ev-rp-vn-field-light:focus-within { border-color: var(--ev-blue-900); background: var(--ev-white); }
/* Waarschuwing als een plaats getypt maar nooit uit de lijst gekozen is —
   typen alleen zet geen routepunt, en zonder dit was dat totaal onzichtbaar. */
.ev-rp-vn-field.ev-rp-vn-field-invalid { border-color: var(--ev-warn); }
.ev-rp-vn-warn {
  display: none;
  font-size: .74rem; font-weight: 600; color: var(--ev-warn);
  margin: -4px 0 8px;
}
.ev-rp-vn-warn.show { display: block; }

/* ── Datumvelden naast Van/Naar/tussenstop/terugreis — label BOVEN de datum
   i.p.v. ernaast, zodat het vakje smal kan blijven zonder de datumwaarde
   te verdrukken; de zo vrijgekomen breedte gaat naar het Van/Naar-veld
   ernaast (flex:1 daar, zie .ev-rp-vn-row .ev-rp-vn-field hierboven), zodat
   er ruimte is om een volledige plaatsnaam te typen. ── */
.ev-rp-vn-date-field {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: var(--ev-white);
  border: 1.5px solid var(--ev-border);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 0 0 120px;
  box-shadow: var(--ev-shadow-card);
  transition: border-color .15s ease;
}
.ev-rp-vn-date-field:focus-within { border-color: var(--ev-blue-900); }
.ev-rp-vn-date-field input[type="date"] {
  width: 100%; border: none; outline: none; background: transparent; padding: 0;
  font-family: var(--ev-font-body); font-size: .82rem; font-weight: 600; color: var(--ev-ink);
}
.ev-rp-terug-row { align-items: center; }
.ev-rp-terug-row .ev-rp-vn-date-field { flex: 1 1 auto; }
@media (max-width: 640px) {
  .ev-rp-vn-row { flex-direction: column; align-items: stretch; }
  .ev-rp-vn-date-field { flex: 1 1 auto; }
}

/* ── Tussenstops: extra zoekvelden tussen Van en Naar — zichtbaar zodra er
   minstens één is toegevoegd. ── */
.ev-rp-waypoints { display: none; flex-direction: column; gap: 10px; }
.ev-rp-hero-vn-stacked .ev-rp-waypoints { display: flex; }
.ev-rp-vn-field-waypoint { padding: 8px 12px; }
.ev-rp-wp-date {
  flex: 0 0 128px;
  border: none; outline: none;
  background: var(--ev-paper-2);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--ev-font-body); font-size: .78rem; font-weight: 600; color: var(--ev-ink);
}
.ev-rp-vn-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ev-blue-900); color: var(--ev-white);
  font-family: var(--ev-font-mono); font-size: .66rem; font-weight: 700;
  flex-shrink: 0;
}
.ev-rp-vn-remove {
  background: none; border: none; cursor: pointer;
  color: var(--ev-ink-40); font-size: .95rem; line-height: 1; padding: 2px;
  flex-shrink: 0;
}
.ev-rp-vn-remove:hover { color: var(--ev-coral); }

.ev-rp-add-waypoint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ev-font-body); font-weight: 700; font-size: .82rem;
  color: var(--ev-blue-900);
  padding: 0;
}
.ev-rp-add-waypoint:hover { color: var(--ev-coral-dark); }
.ev-rp-add-waypoint-ic { width: 14px; height: 14px; flex-shrink: 0; }
/* Uitleg bij "Terugreis toevoegen" — zonder deze regel realiseerden mensen
   zich niet dat een latere, losse terugreis door hetzelfde land invloed
   heeft op hoe lang het vignet geldig moet blijven. */
.ev-rp-terug-hint { font-size: .74rem; line-height: 1.5; color: var(--ev-ink-40); margin: 6px 0 0; max-width: 44ch; }

/* ── Populaire-routes snelkeuze — verticale lijst met vlaggetjes, past beter
   in de smalle formulierkolom dan de eerdere wrappende pillen (die in deze
   breedte rommelig uiteenvielen). ── */
.ev-rp-presets { margin-top: 18px; }
/* Duwt de presets-lijst (en evt. chips-wrap erna) naar de onderkant van het
   kaartje wanneer de kolom uitrekt tot de hoogte van de kaart rechts — zo
   voelt de extra ruimte als bedoelde witruimte i.p.v. een gat onderaan. */
#rpRouteInputs { margin-bottom: auto; }
.ev-rp-presets > span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ev-ink-40); margin-bottom: 8px; }
.ev-rp-presets-list { display: flex; flex-direction: column; gap: 8px; }
.ev-rp-preset {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--ev-white);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  padding: 9px 12px;
  font-size: .84rem; font-weight: 600; color: var(--ev-blue-900);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, transform .1s ease;
}
.ev-rp-preset:hover { border-color: var(--ev-coral); transform: translateY(-1px); }
.ev-rp-preset-ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--ev-coral); }
.ev-rp-preset-flags { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.ev-rp-preset-flags .fi { width: 1.2em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); }
.ev-rp-preset-label { flex: 1; }

/* ── Twee-koloms layout: kaart+chips links, planner-paneel rechts ── */
.ev-rp-layout {
  display: grid;
  /* De kaart staat nu in haar eigen .ev-rp-mapstage-sectie erboven — dit grid
     bevat alleen nog de resultatenkolom + het bestelpaneel, vandaar een
     evenwichtiger verhouding dan toen de kaart hier ook in stond. */
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start;
}

/* ── Modus-schakelaar: landen aanklikken vs. exacte route ── */
.ev-rp-mode-switch { display: flex; }
.ev-rp-mode {
  flex: 1;
  padding: 14px 16px;
  border: none;
  background: var(--ev-paper-2);
  color: var(--ev-ink-40);
  font-family: var(--ev-font-body);
  font-weight: 700; font-size: .86rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.ev-rp-mode.active { background: var(--ev-white); color: var(--ev-blue-900); border-bottom-color: var(--ev-coral); }
.ev-rp-mode-ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.ev-rp-mode:not(.active):hover { background: var(--ev-white); }

/* ── Route-balk (zichtbaar in "exacte route"-modus) ── */
.ev-rp-route-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 14px 20px;
  background: var(--ev-blue-900);
  color: var(--ev-white);
  font-size: .86rem;
}
.ev-rp-route-bar strong { color: var(--ev-gold); }

/* ── "Van" / "Naar"-zoekvelden — het Google-Maps-achtige stuk ── */
.ev-rp-vn-field {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.ev-rp-vn-field:focus-within { background: var(--ev-white); border-color: var(--ev-white); }
.ev-rp-vn-field:focus-within input { color: var(--ev-ink); }
.ev-rp-vn-field:focus-within input::placeholder { color: var(--ev-ink-40); }
.ev-rp-vn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ev-rp-vn-dot-a { background: #158A78; box-shadow: 0 0 0 3px rgba(21,138,120,.3); }
.ev-rp-vn-dot-b { background: #F0623C; box-shadow: 0 0 0 3px rgba(240,98,60,.3); }
.ev-rp-vn-label {
  flex-shrink: 0;
  font-family: var(--ev-font-mono);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ev-ink-40);
}
.ev-rp-vn-field:not(.ev-rp-vn-field-light) .ev-rp-vn-label { color: rgba(255,255,255,.55); }
.ev-rp-vn-field input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--ev-font-body); font-size: .9rem; font-weight: 600;
  color: var(--ev-white);
}
.ev-rp-vn-field input::placeholder { color: rgba(255,255,255,.5); font-weight: 400; }
.ev-rp-vn-arrow { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255,255,255,.4); }
.ev-rp-vn-results {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--ev-white);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  box-shadow: var(--ev-shadow-lift);
  overflow: hidden;
  z-index: 30;
}
.ev-rp-vn-results.show { display: block; }

.ev-rp-route-pref { display: flex; gap: 6px; margin-left: auto; }
.ev-rp-pref-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
}
.ev-rp-pref-btn.active { background: var(--ev-white); color: var(--ev-blue-900); border-color: var(--ev-white); }
.ev-rp-pref-ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 1px; }
.ev-rp-route-clear {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: .8rem; font-weight: 600;
  text-decoration: underline;
}
.ev-rp-route-clear:hover { color: var(--ev-white); }

/* ── On-map kaartlagen-paneel — zwevend, verticaal knoppenrijtje rechtsboven
   IN de kaart zelf (net als de "laag"-knop in Google Maps/Earth), i.p.v. de
   oude tekst-knoppenrij in de route-bar. Absoluut gepositioneerd binnen
   .ev-map-wrap-live (position:relative, zie map.css). Onderliggende logica
   (togglePoi/fetchPoi/caching/timeout) blijft ongewijzigd — alleen de
   UI-laag is verplaatst, zie routeplanner.js. ── */
.ev-map-layers {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 640;
  display: flex; flex-direction: column; gap: 8px;
}
/* Pil-knoppen met icoon + label i.p.v. kale ronde icoontjes — elke laag heeft
   ook in RUSTENDE staat al zijn eigen kleur (niet pas na klikken), zodat de
   4 knoppen op het eerste gezicht uit elkaar te houden zijn. */
.ev-map-layer-btn {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--ev-border);
  background: var(--ev-white);
  box-shadow: var(--ev-shadow-card);
  cursor: pointer;
  font-family: var(--ev-font-body); font-weight: 700; font-size: .78rem;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ev-map-layer-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ev-map-layer-btn:hover { transform: translateY(-1px); box-shadow: var(--ev-shadow-lift); }
.ev-map-layer-btn:focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 2px; }
.ev-map-layer-btn .ev-map-layer-label { display: none; }
/* Elke laag houdt "zijn eigen" kleur aan, ook inactief — dezelfde kleuren als
   de bijbehorende kaartstipjes hieronder, zodat de knop-kleur direct
   voorspelt welke kleur stipjes er verschijnen. */
.ev-map-layer-fuel { color: #8B8478; border-color: rgba(139,132,120,.4); }
.ev-map-layer-charging { color: #5E7A88; border-color: rgba(94,122,136,.4); }
.ev-map-layer-restaurant { color: #9B5B3E; border-color: rgba(155,91,62,.4); }
.ev-map-layer-highlights { color: var(--ev-teal); border-color: rgba(21,138,120,.4); }
.ev-map-layer-tol { color: var(--ev-coral-dark); border-color: rgba(216,80,50,.4); }
.ev-map-layer-fuel.active { background: #8B8478; border-color: #8B8478; color: var(--ev-white); }
.ev-map-layer-charging.active { background: #5E7A88; border-color: #5E7A88; color: var(--ev-white); }
.ev-map-layer-restaurant.active { background: #9B5B3E; border-color: #9B5B3E; color: var(--ev-white); }
.ev-map-layer-highlights.active { background: var(--ev-teal); border-color: var(--ev-teal); color: var(--ev-white); }
.ev-map-layer-tol.active { background: var(--ev-coral-dark); border-color: var(--ev-coral-dark); color: var(--ev-white); }
@media (min-width: 700px) {
  .ev-map-layer-btn .ev-map-layer-label { display: inline; }
}

/* ── Route-badge — zwevende kaart linksboven IN de kaart zelf met afstand +
   rijtijd + landvlaggen, zodra een route berekend is. Toont deze info
   gelijk mét de getekende route (geen scroll naar het resultatenblok
   onderaan de pagina nodig) — zelfde cijfers als #rpRouteResult daar. ── */
.ev-rp-map-route-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 640;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  background: var(--ev-white);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--ev-shadow-lift);
  max-width: calc(100% - 32px);
}
.ev-rp-map-route-badge .ev-rp-route-stat-val { font-size: 1.05rem; }
.ev-rp-map-route-badge .ev-rp-route-countries { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-rp-map-route-badge .ev-rp-route-countries .fi { width: 1.15em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10,47,82,.15); }
/* Milieusticker-vlaggen in de badge — apart, goudgetint zodat het nooit
   voor "nóg een vignetland" wordt aangezien (zelfde onderscheid als het
   milieusticker-blok verderop en de ruitvormige homepage-markers). */
.ev-rp-route-countries-milieu {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: rgba(226,167,60,.14);
}
.ev-rp-route-countries-milieu::before {
  content: 'Sticker';
  font-family: var(--ev-font-mono);
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ev-gold-dark, #B9832A);
  margin-right: 2px;
}
.ev-rp-route-countries-milieu .fi { width: 1.1em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(226,167,60,.5); }
@media (max-width: 480px) {
  .ev-rp-map-route-badge { top: 10px; left: 10px; gap: 10px; padding: 8px 12px; }
  .ev-rp-map-route-badge .ev-rp-route-stat-val { font-size: .92rem; }
}

/* ── Statusregel (laden/foutmelding) — kleine zwevende pil linksonder in de
   kaart, alleen zichtbaar zolang er tekst in staat. ── */
.ev-map-layers-status {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 640;
  background: rgba(10, 47, 82, .88);
  color: var(--ev-white);
  font-family: var(--ev-font-mono);
  font-size: .72rem; font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(10, 47, 82, .28);
}
.ev-map-layers-status:empty { display: none; }
@media (max-width: 480px) {
  .ev-map-layers { top: 10px; right: 10px; gap: 6px; }
  .ev-map-layer-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .ev-map-layer-btn svg { width: 16px; height: 16px; }
}

.ev-rp-route-result {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ev-border);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ev-rp-route-stat { display: flex; flex-direction: column; }
.ev-rp-route-stat-val { font-family: var(--ev-font-mono); font-weight: 700; font-size: 1.15rem; color: var(--ev-blue-900); }
.ev-rp-route-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-ink-40); }
.ev-rp-route-countries { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ev-rp-route-countries .fi { width: 1.3em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); }
/* Vignet-vlaggen met een eigen klein label — zelfde principe als de
   goudgetinte STICKER-pil hiernaast, maar in de gewone inktkleur (dit is de
   standaard/primaire categorie, de milieusticker is de aparte uitzondering
   die extra nadruk verdient). Zonder label was onduidelijk wát die vlag
   betekende. */
.ev-rp-route-countries-vignet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-rp-route-countries-vignet::before {
  content: 'Vignet';
  font-family: var(--ev-font-mono);
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ev-ink-40);
}
.ev-rp-route-countries-vignet .fi { width: 1.3em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); }
.ev-rp-map-route-badge .ev-rp-route-countries-vignet { margin-left: 0; }
.ev-rp-map-route-badge .ev-rp-route-countries-vignet .fi { width: 1.15em; box-shadow: 0 0 0 1px rgba(10,47,82,.15); }

/* ── Reisschema-tijdlijn — samenvatting van Van/tussenstop(pen)/Naar/Terug
   met datums, direct onder de routestatistieken. Puur informatief. ── */
.ev-rp-schedule-block {
  margin: 0 20px 18px;
  padding: 16px 20px 18px;
  border-radius: var(--ev-radius-md);
  background: var(--ev-white);
  border: 1.5px dashed var(--ev-border);
}
.ev-rp-schedule-block strong {
  display: block;
  font-family: var(--ev-font-display); font-size: .92rem; color: var(--ev-blue-900);
  margin-bottom: 12px;
}
.ev-rp-schedule-timeline { display: flex; flex-wrap: wrap; align-items: flex-start; }
.ev-rp-schedule-node { display: flex; flex-direction: column; gap: 5px; min-width: 90px; }
.ev-rp-schedule-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-blue-900); }
.ev-rp-schedule-node.role-terug .ev-rp-schedule-dot { background: var(--ev-coral); }
.ev-rp-schedule-place { font-weight: 700; font-size: .82rem; color: var(--ev-ink); }
.ev-rp-schedule-date { font-family: var(--ev-font-mono); font-size: .72rem; color: var(--ev-ink-40); }
.ev-rp-schedule-connector {
  flex: 0 0 30px; height: 1.5px; margin: 5px 6px 0;
  background: repeating-linear-gradient(90deg, var(--ev-border) 0 6px, transparent 6px 11px);
}
@media (max-width: 560px) {
  .ev-rp-schedule-timeline { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ev-rp-schedule-connector { display: none; }
}

/* ── Milieusticker-signalering (FR/ES/DE) — bewust ANDERE kleur (goud i.p.v.
   blauw/koraal) en apart van de vignet-lijst, om te benadrukken dat dit een
   ander product is: handmatig aangevraagd, niet automatisch meebesteld. ── */
.ev-rp-milieu-block {
  margin: 0 20px 18px;
  padding: 16px 18px;
  border-radius: var(--ev-radius-md);
  background: var(--ev-gold-bg, #FBF2DF);
  border: 1.5px solid var(--ev-gold, #E2A73C);
}
.ev-rp-milieu-head { display: flex; gap: 12px; align-items: flex-start; }
.ev-rp-milieu-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--ev-gold-dark, #B9832A); margin-top: 1px; }
.ev-rp-milieu-head strong { display: block; font-family: var(--ev-font-display); font-size: .96rem; color: var(--ev-blue-900); margin-bottom: 3px; }
.ev-rp-milieu-head p { font-size: .8rem; color: var(--ev-ink-60); margin: 0; line-height: 1.5; }
.ev-rp-milieu-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ev-rp-milieu-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--ev-white);
  border: 1px solid rgba(226,167,60,.4);
  border-radius: var(--ev-radius-sm, 6px);
  padding: 9px 12px;
}
.ev-rp-milieu-item .fi { width: 1.4em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); flex-shrink: 0; }
.ev-rp-milieu-info { flex: 1; min-width: 0; }
.ev-rp-milieu-name { font-weight: 700; font-size: .84rem; color: var(--ev-ink); }
.ev-rp-milieu-sub { font-size: .74rem; color: var(--ev-ink-40); margin-top: 1px; }
.ev-rp-milieu-link {
  flex-shrink: 0;
  font-size: .8rem; font-weight: 700;
  color: var(--ev-gold-dark, #B9832A);
  text-decoration: none;
  white-space: nowrap;
}
.ev-rp-milieu-link:hover { text-decoration: underline; }

/* ── Rijtips-blok (het "paradepaardje") — bewust teal i.p.v. het goud van het
   milieusticker-blok hierboven, zodat de twee nooit verward worden: dit is
   puur informatief (geen apart product, geen aparte aanvraag), gewoon
   praktische kennis bovenop het vignet. Zelfde ticket-motief (gestippelde
   lijnen, mono-labels) als de rest van dit paneel. ── */
.ev-rp-tips-block {
  margin: 0 20px 18px;
  padding: 16px 18px;
  border-radius: var(--ev-radius-md);
  background: rgba(21,138,120,.06);
  border: 1.5px solid rgba(21,138,120,.35);
}
.ev-rp-tips-head { display: flex; gap: 12px; align-items: flex-start; }
.ev-rp-tips-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--ev-teal); margin-top: 1px; }
.ev-rp-tips-head strong { display: block; font-family: var(--ev-font-display); font-size: .96rem; color: var(--ev-blue-900); margin-bottom: 3px; }
.ev-rp-tips-head p { font-size: .8rem; color: var(--ev-ink-60); margin: 0; line-height: 1.5; }

/* ── Belangrijkste tolwegen — prominent bovenaan het rijtips-blok, bewust
   koraal i.p.v. teal zodat deze specifieke, geld-relevante tips er
   duidelijk uitspringen tussen de algemenere rijtips eronder. ── */
.ev-rp-tol-block {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: var(--ev-radius-sm, 6px);
  background: rgba(240,98,60,.07);
  border: 1.5px solid rgba(240,98,60,.35);
}
.ev-rp-tol-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ev-rp-tol-ic { display: inline-flex; color: var(--ev-coral-dark); }
.ev-rp-tol-ic svg { width: 19px; height: 19px; }
.ev-rp-tol-head strong { font-family: var(--ev-font-display); font-size: .88rem; color: var(--ev-blue-900); }
.ev-rp-tol-list { display: flex; flex-direction: column; gap: 8px; }
.ev-rp-tol-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ev-white);
  border: 1px solid rgba(240,98,60,.25);
  border-radius: var(--ev-radius-sm, 6px);
  padding: 10px 12px;
}
.ev-rp-tol-item .fi { width: 1.2em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); flex-shrink: 0; margin-top: 2px; }
.ev-rp-tol-info { flex: 1; min-width: 0; }
.ev-rp-tol-title { font-weight: 700; font-size: .82rem; color: var(--ev-ink); margin-bottom: 2px; }
.ev-rp-tol-text { font-size: .78rem; color: var(--ev-ink-60); line-height: 1.5; }

.ev-rp-tip-groups { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.ev-rp-tip-group + .ev-rp-tip-group { padding-top: 16px; border-top: 1.5px dashed rgba(21,138,120,.3); }

.ev-rp-tip-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ev-rp-tip-group-head .fi { width: 1.25em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); flex-shrink: 0; }
.ev-rp-tip-group-head strong {
  font-family: var(--ev-font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0F5F52;
}

.ev-rp-tip-list { display: flex; flex-direction: column; gap: 8px; }
.ev-rp-tip-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ev-white);
  border: 1px solid rgba(21,138,120,.22);
  border-radius: var(--ev-radius-sm, 6px);
  padding: 10px 12px;
}
.ev-rp-tip-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(21,138,120,.1); color: var(--ev-teal);
  flex-shrink: 0; margin-top: 1px;
}
.ev-rp-tip-ic svg { width: 15px; height: 15px; }
.ev-rp-tip-info { flex: 1; min-width: 0; }
.ev-rp-tip-title { font-weight: 700; font-size: .84rem; color: var(--ev-ink); margin-bottom: 2px; }
.ev-rp-tip-text { font-size: .8rem; color: var(--ev-ink-60); line-height: 1.5; }

/* ── Bezienswaardigheden onderweg — foto-kaarten per land op de route.
   Bewust blauw (het hoofdmerkkleur) i.p.v. het goud van milieustickers of
   het teal van rijtips: dit is inspiratie/verwijzing naar bestaande
   content-pagina's, geen apart product en geen waarschuwing. ── */
.ev-rp-discover-block {
  margin: 0 20px 18px;
  padding: 16px 18px 18px;
  border-radius: var(--ev-radius-md);
  background: var(--ev-blue-100);
  border: 1.5px solid rgba(10,47,82,.22);
}
.ev-rp-discover-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ev-rp-discover-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--ev-blue-900); margin-top: 1px; }
.ev-rp-discover-head strong { display: block; font-family: var(--ev-font-display); font-size: .96rem; color: var(--ev-blue-900); margin-bottom: 3px; }
.ev-rp-discover-head p { font-size: .8rem; color: var(--ev-ink-60); margin: 0; line-height: 1.5; }
.ev-rp-discover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ev-rp-discover-card {
  display: flex; flex-direction: column;
  background: var(--ev-white);
  border: 1px solid rgba(10,47,82,.18);
  border-radius: var(--ev-radius-sm, 6px);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ev-rp-discover-card:hover { transform: translateY(-2px); box-shadow: var(--ev-shadow-card); }
.ev-rp-discover-photo { height: 96px; background-size: cover; background-position: center; }
.ev-rp-discover-info { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ev-rp-discover-info-head { display: flex; align-items: center; gap: 7px; }
.ev-rp-discover-info .fi { width: 1.2em; border-radius: 3px; box-shadow: 0 0 0 1px var(--ev-border); flex-shrink: 0; }
.ev-rp-discover-info strong { font-size: .84rem; color: var(--ev-ink); font-family: var(--ev-font-display); }
.ev-rp-discover-info p { font-size: .76rem; color: var(--ev-ink-60); margin: 0; line-height: 1.4; }
.ev-rp-discover-link { font-size: .76rem; font-weight: 700; color: var(--ev-blue-900); margin-top: 2px; }
.ev-rp-discover-card:hover .ev-rp-discover-link { color: var(--ev-coral-dark); }

/* ── Kaartkolom — kaart + chips nu binnen ÉÉN kaart-component ── */
.ev-rp-map-col { padding: 0; overflow: hidden; }
.ev-rp-map-inner { border: none; border-radius: 0; box-shadow: none; }
.ev-rp-map-inner #ev-live-map { border-radius: 0; }
.ev-rp-map-inner .leaflet-container { border-radius: 0 !important; }
.ev-rp-chips-wrap { padding: 20px 22px 22px; }

/* ── Kaart als het echte middelpunt van de pagina (opdracht 4) — hoger dan
   de generieke #ev-live-map uit map.css (die ook door de homepage-kaart
   gedeeld wordt, zie assets/js/interactive-map.js). Scoped via
   .ev-rp-map-inner zodat de homepage-kaart ongemoeid blijft; deze regel
   staat na map.css in de laadvolgorde en wint dus op specificiteit.
   GEEN vaste pixelhoogte meer (was achtereenvolgens 640px, toen 520px) —
   welk vast getal je ook kiest, zodra de linkerkolom een keer korter of
   langer is dan precies dát getal ontstaat er weer een zichtbaar wit gat,
   aan de ene of de andere kant. In plaats daarvan vult de kaart nu altijd
   EXACT de hoogte die de linkerkolom al bepaalt (height:100% door de hele
   keten heen: .ev-rp-map-col → .ev-rp-map-inner → #ev-live-map) — dus nooit
   meer een gat, ongeacht hoeveel tussenstops/terugreis-velden er staan.
   min-height blijft als vangnet tegen een onwerkbaar kleine kaart als de
   linkerkolom zelf een keer heel kort is. ── */
.ev-rp-map-inner { height: 100%; }
.ev-rp-map-inner #ev-live-map { height: 100%; min-height: 420px; }
@media (max-width: 980px) {
  .ev-rp-map-inner #ev-live-map { height: 460px; min-height: 0; }
}
@media (max-width: 640px) {
  .ev-rp-map-inner #ev-live-map { height: 380px; }
}
@media (max-width: 480px) {
  .ev-rp-map-inner #ev-live-map { height: 320px; }
}

.ev-rp-chips-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ev-rp-chips-head strong { font-family: var(--ev-font-display); color: var(--ev-blue-900); font-size: .95rem; font-weight: 600; }
.ev-rp-reset {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--ev-ink-40);
  text-decoration: underline; padding: 0;
}
.ev-rp-reset:hover { color: var(--ev-coral-dark); }

.ev-rp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-rp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ev-border);
  background: var(--ev-white);
  cursor: pointer;
  font-family: var(--ev-font-body);
  font-weight: 600; font-size: .86rem;
  color: var(--ev-ink);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ev-rp-chip:hover { transform: translateY(-1px); }
.ev-rp-chip .fi { border-radius: 3px; width: 1.15em; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ev-rp-chip.selected {
  border-color: var(--chip-color, var(--ev-blue-900));
  background: var(--ev-paper-2);
  box-shadow: 0 0 0 1px var(--chip-color, var(--ev-blue-900)) inset;
}
.ev-rp-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ev-coral); color: var(--ev-white);
  font-family: var(--ev-font-mono); font-size: .66rem; font-weight: 700;
  flex-shrink: 0;
}

/* ── Voertuig / duur mini-wizard boven het paneel ── */
.ev-rp-panel {
  padding: 0 0 28px;
  position: sticky; top: 88px;
  overflow: hidden;
}
.ev-rp-panel-head {
  padding: 22px 28px 24px;
  background: var(--ev-paper-2);
  position: relative;
  margin-bottom: 30px;
  border-bottom: 2px dashed var(--ev-border);
}
.ev-rp-panel-head::before,
.ev-rp-panel-head::after {
  content: '';
  position: absolute; bottom: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ev-paper);
}
.ev-rp-panel-head::before { left: -11px; }
.ev-rp-panel-head::after { right: -11px; }
.ev-rp-ticket-eyebrow {
  display: block;
  font-family: var(--ev-font-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ev-coral-dark);
  margin-bottom: 7px;
}
.ev-rp-panel-head h3 { color: var(--ev-blue-900); font-size: 1.16rem; margin: 0 0 4px; }
.ev-rp-panel-head p { color: var(--ev-ink-60); font-size: .84rem; margin: 0; }
.ev-rp-panel-body { padding: 0 28px; }
.ev-rp-field-label {
  font-family: var(--ev-font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ev-ink-40);
  margin: 0 0 8px;
}
.ev-rp-opt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ev-rp-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--ev-border);
  background: var(--ev-paper);
  font-weight: 600; font-size: .84rem;
  cursor: pointer;
  color: var(--ev-ink);
  transition: border-color .15s ease, background .15s ease;
}
.ev-rp-opt-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ev-white); color: var(--ev-blue-900);
  box-shadow: inset 0 0 0 1px var(--ev-border);
}
.ev-rp-opt-ic svg { width: 14px; height: 14px; }
.ev-rp-opt.active { background: var(--ev-blue-900); border-color: var(--ev-blue-900); color: var(--ev-white); }
.ev-rp-opt.active .ev-rp-opt-ic { background: rgba(255,255,255,.15); color: var(--ev-white); box-shadow: none; }

/* ── Duur-samenvatting — vervangt de oude "kort/maand/jaar"-knoppenrij nu de
   reisduur uit echte datums (Van/Naar/Terug, hierboven in de hero) wordt
   berekend in plaats van uit een vage categorie. ── */
.ev-rp-duur-summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ev-paper-2);
  border: 1.5px solid var(--ev-border);
  font-family: var(--ev-font-mono);
  font-size: .8rem; font-weight: 700;
  color: var(--ev-blue-900);
  margin: 0 0 20px;
}

/* ── Lege staat ── */
.ev-rp-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--ev-ink-40);
  font-size: .92rem;
  border: 1.5px dashed var(--ev-border);
  border-radius: var(--ev-radius-md);
}

/* ── "Wat u nodig heeft"-lijst ── */
.ev-rp-need-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ev-rp-need-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  background: var(--ev-paper);
}
.ev-rp-need-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ev-blue-900); color: var(--ev-white);
  font-family: var(--ev-font-mono); font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
}
.ev-rp-need-flag { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px var(--ev-border); }
.ev-rp-need-info { flex: 1; min-width: 0; }
.ev-rp-need-name { font-family: var(--ev-font-display); font-weight: 600; font-size: .92rem; color: var(--ev-blue-900); }
.ev-rp-need-option { font-size: .78rem; color: var(--ev-ink-60); margin-top: 1px; }
.ev-rp-need-option.ev-rp-none { color: var(--ev-ok); font-weight: 600; }
.ev-rp-need-price { font-family: var(--ev-font-mono); font-weight: 700; font-size: .96rem; color: var(--ev-gold-dark); white-space: nowrap; }
.ev-rp-need-remove {
  background: none; border: none; cursor: pointer;
  color: var(--ev-ink-40); font-size: 1.1rem; line-height: 1; padding: 4px 2px;
  flex-shrink: 0;
}
.ev-rp-need-remove:hover { color: var(--ev-coral); }

.ev-rp-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 4px 4px;
  margin-top: 10px;
  border-top: 2px dashed var(--ev-border);
}
.ev-rp-total-label {
  font-family: var(--ev-font-mono);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ev-ink-40); font-size: .74rem;
}
.ev-rp-total-price { font-family: var(--ev-font-mono); font-weight: 700; font-size: 1.9rem; color: var(--ev-coral-dark); font-variant-numeric: tabular-nums; }

/* ── Bestelformulier ── */
.ev-rp-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ev-border); }
.ev-rp-field { margin-bottom: 14px; }
.ev-rp-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--ev-blue-900); margin-bottom: 6px; }
.ev-rp-field input {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--ev-border); border-radius: var(--ev-radius-md);
  font-family: var(--ev-font-body); font-size: .92rem;
  background: var(--ev-white); color: var(--ev-ink);
}
.ev-rp-field input:focus { outline: none; border-color: var(--ev-blue-900); }
.ev-rp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ev-rp-err {
  display: none; background: var(--ev-warn-bg); color: var(--ev-warn);
  border-radius: var(--ev-radius-sm); padding: 10px 14px;
  font-size: .84rem; font-weight: 600; margin-bottom: 14px;
}
.ev-rp-err.show { display: block; }
.ev-rp-cta { width: 100%; justify-content: center; font-size: 1rem; padding: 15px; margin-top: 6px; }
.ev-rp-cta:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.ev-rp-note { font-size: .76rem; color: var(--ev-ink-40); text-align: center; margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ev-rp-note-ic { width: 13px; height: 13px; flex-shrink: 0; color: var(--ev-teal); }

/* ── A/B-punt-markers (exacte-route-modus) ── */
.ev-rp-point-icon { background: transparent; border: none; }
.ev-rp-point-pin {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--point-color, var(--ev-blue-900));
  border: 2.5px solid var(--ev-white);
  box-shadow: 0 3px 8px rgba(20,16,10,.35);
  display: flex; align-items: center; justify-content: center;
}
.ev-rp-point-pin { color: var(--ev-white); font-family: var(--ev-font-mono); font-weight: 700; font-size: .82rem; }
.ev-rp-point-pin span { transform: rotate(45deg); display: inline-block; }

/* ── Tankstation/laadpunt-markertjes — klein, onopvallend, neutrale kleur
   zodat ze nooit met de hoofdroute (A/B/tussenstop) of landmarkers
   concurreren. Puur decoratief/informatief, geen interactie nodig. ── */
.ev-rp-poi-icon { background: transparent; border: none; }
.ev-rp-poi-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--poi-color, #8B8478);
  border: 1.5px solid var(--ev-white);
  box-shadow: 0 1px 3px rgba(20,16,10,.3);
  display: flex; align-items: center; justify-content: center;
  opacity: .85;
  cursor: pointer;
  transition: transform .15s ease;
}
.ev-rp-poi-pin:hover { transform: scale(1.12); }
.ev-rp-poi-pin svg { width: 9px; height: 9px; color: var(--ev-white); }
/* Topbeoordeling (≥4.5 sterren, ≥5 reviews) — zelfde goud als de rest van de
   site voor "premium/uitgelicht", subtiel groter en met een gloed i.p.v. een
   volledig andere vorm, zodat het nog steeds als hetzelfde soort punt leest. */
.ev-rp-poi-pin-top {
  width: 20px; height: 20px;
  opacity: 1;
  border: 2px solid var(--ev-gold);
  box-shadow: 0 0 0 3px rgba(226,167,60,.28), 0 2px 8px rgba(20,16,10,.35);
}
.ev-rp-poi-pin-top svg { width: 11px; height: 11px; }
.ev-rp-top-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(226,167,60,.16);
  color: var(--ev-gold-dark, #B9832A);
  font-family: var(--ev-font-mono);
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  vertical-align: middle;
}

/* ── Bezienswaardigheden-markers — duidelijk ánders dan de tank/laad/
   restaurant-stipjes (teal i.p.v. neutrale kleuren, ster-icoon i.p.v. type-
   icoon, iets groter) en anders dan de land-vlagmarkers (geen vlag, geen
   badge) — opdracht 2. Wél interactief: klik toont een mini-popup. ── */
.ev-rp-highlight-icon { background: transparent; border: none; }
.ev-rp-highlight-pin {
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--ev-teal);
  border: 2px solid var(--ev-white);
  box-shadow: 0 2px 6px rgba(20,16,10,.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.ev-rp-highlight-pin:hover { transform: rotate(-45deg) scale(1.12); }
.ev-rp-highlight-pin svg { width: 11px; height: 11px; color: var(--ev-white); transform: rotate(45deg); }

/* ── Tolpunt-markers — duidelijk herkenbaar als "slagboom", koraal net als
   het tolwegen-blok in de rijtips (.ev-rp-tol-block hierboven) zodat de
   kleur consistent "tol/extra kosten" betekent — opdracht 3. ── */
.ev-rp-tolpunt-icon { background: transparent; border: none; }
.ev-rp-tolpunt-pin {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--ev-coral-dark);
  border: 2px solid var(--ev-white);
  box-shadow: 0 2px 6px rgba(20,16,10,.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.ev-rp-tolpunt-pin:hover { transform: scale(1.12); }
.ev-rp-tolpunt-pin svg { width: 14px; height: 14px; color: var(--ev-white); }

/* ── "Vignet/sticker nodig vanaf hier"-markers — druppelvorm zoals de A/B-
   routepunten (herkenbaar als "hier gebeurt iets op de route"), met de
   landvlag erin i.p.v. een letter. Rand-kleur volgt dezelfde taal als de
   VIGNET/STICKER-pillen in het kaartbalkje hierboven: inktblauw voor een
   vignet, goud voor een milieusticker — zodat het onderscheid overal
   hetzelfde betekent. ── */
.ev-rp-border-icon { background: transparent; border: none; }
.ev-rp-border-pin {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ev-white);
  box-shadow: 0 3px 8px rgba(20,16,10,.32);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.ev-rp-border-pin:hover { transform: rotate(-45deg) scale(1.14); }
.ev-rp-border-pin span { transform: rotate(45deg); width: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10,47,82,.15); }
.ev-rp-border-pin-vignet { border: 2.5px solid var(--ev-blue-900); }
.ev-rp-border-pin-milieu { border: 2.5px solid var(--ev-gold); }

/* ── Mini-popup voor bezienswaardigheden/tolpunt-markers — compacte variant
   van .ev-popup-inner (map.css), geen prijs-regel nodig. ── */
.ev-rp-mini-popup { padding: 4px 2px 2px; min-width: 170px; max-width: 220px; }
.ev-rp-mini-popup-title { font-family: var(--ev-font-display); font-weight: 600; font-size: .92rem; color: var(--ev-blue-900); line-height: 1.3; margin-bottom: 4px; }
.ev-rp-mini-popup-text { font-size: .78rem; color: var(--ev-ink-60); line-height: 1.45; margin-bottom: 8px; }
.ev-rp-mini-popup-link { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ev-teal); text-decoration: none; }
.ev-rp-mini-popup-link:hover { color: var(--ev-coral-dark); }
/* ── Sterrenbeoordeling (Google Places) in de POI-mini-popup ── */
.ev-rp-mini-popup-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.ev-rp-mini-popup-rating span { font-family: var(--ev-font-mono); font-size: .72rem; font-weight: 700; color: var(--ev-ink-60); }
.ev-rp-star { color: var(--ev-border); flex-shrink: 0; }
.ev-rp-star-filled { color: var(--ev-gold); }

/* ── Route-markers op de kaart (uitbreiding op map.css) ── */
.ev-rp-marker-icon { background: transparent; border: none; }
.ev-rp-marker-pin {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--marker-color, var(--ev-blue-900));
  border: 2.5px solid var(--ev-white);
  box-shadow: 0 2px 6px rgba(20, 16, 10, .25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.ev-rp-marker-pin:hover, .ev-rp-marker-pin:focus-visible { opacity: .85; transform: scale(1.1); }
.ev-rp-marker-pin.selected {
  opacity: 1;
  transform: scale(1.14);
  box-shadow: 0 4px 14px rgba(20, 16, 10, .32), 0 0 0 3px rgba(255,255,255,.55);
}
.ev-rp-marker-pin:focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 3px; }
.ev-rp-marker-flag {
  width: 18px; height: 18px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 1.5px solid rgba(255,255,255,.9);
  pointer-events: none;
}
.ev-rp-marker-badge {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ev-coral); color: var(--ev-white);
  font-family: var(--ev-font-mono); font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ev-white);
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ev-rp-layout { grid-template-columns: 1fr; }
  .ev-rp-panel { position: static; }
}
@media (max-width: 480px) {
  .ev-rp-field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-rp-chip, .ev-rp-marker-pin, .ev-rp-cta { transition: none !important; }
}