/* Kaart van Nederland met de rit (kaartmotor js/ritkaart.js): kaartlagen, route,
   pinnen en kaartknoppen, plus de kleuren. Gebruikt door ontwerp 7 (Ritkaart) en
   door de boekpagina als je uit ontwerp 6 of 7 komt. */

:root {
  --f-bg: #050F1F;
  --f-diep: #030A16;
  --f-vlak: #0B1B33;
  --f-veld: #10233F;
  --f-rand: #1C3355;
  --f-rand-sterk: #2B4670;
  --f-tekst: #F1F5F9;
  --f-zacht: #A3B4CC;
  --f-blauw: #1453DB;
  --f-blauw-licht: #2A66F0;
  --f-blauw-tekst: #7FA4FF;
  --f-blauw-vlak: #0E2550;
  --f-goud: #E6A726;
  --f-kop: 68px;
}

.f-kaart__svg { width: 100%; height: 100%; }
.f-kaart__svg path, .f-kaart__svg rect { vector-effect: non-scaling-stroke; }
.f-zee { fill: #030B18; }
.f-buren { fill: #08172B; stroke: #13243D; stroke-width: 1; }
.f-provincie { fill: #0F2442; stroke: #1E3D66; stroke-width: 1; stroke-linejoin: round; }
.f-water { fill: #030B18; fill-rule: evenodd; }
.f-rivier { fill: none; stroke: #133461; stroke-width: 1.2; }
.f-weg2 { fill: none; stroke: #1B3559; stroke-width: .9; stroke-linejoin: round; }
.f-weg { fill: none; stroke: #2B4C7E; stroke-width: 1.5; stroke-linejoin: round; }
.f-stad circle { fill: #7FA4FF; }
.f-stad text { fill: #A3B4CC; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; paint-order: stroke; stroke: #030B18; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.f-mantel { fill: none; stroke: #020812; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.f-routelijn { fill: none; stroke: var(--f-blauw-licht); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(42, 102, 240, .85)); }
.f-busje { fill: var(--f-goud); stroke: #FFFFFF; stroke-width: 2; vector-effect: non-scaling-stroke; }

.f-pin { position: absolute; z-index: 2; transform: translate(calc(-50% + var(--schuif, 0px)), calc(-100% - 22px)); padding: 7px 12px; border-radius: 10px; background: rgba(11, 27, 51, .95); border: 1px solid var(--f-rand-sterk); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); white-space: nowrap; line-height: 1.25; pointer-events: none; display: flex; flex-direction: column; text-align: center; }
.f-pin strong { font-size: 14px; color: #FFFFFF; }
.f-pin span { font-size: 12px; color: var(--f-zacht); }
.f-pin::before { content: ''; position: absolute; left: calc(50% - var(--schuif, 0px)); bottom: -16px; width: 2px; height: 15px; background: rgba(255, 255, 255, .7); transform: translateX(-50%); }
.f-pin::after { content: ''; position: absolute; left: calc(50% - var(--schuif, 0px)); bottom: -30px; width: 16px; height: 16px; transform: translateX(-50%); border-radius: 50%; border: 3px solid #FFFFFF; background: var(--f-blauw); box-shadow: 0 0 0 4px rgba(20, 83, 219, .3); }
.f-pin--naar::after { background: var(--f-goud); border-radius: 4px; transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 4px rgba(230, 167, 38, .25); }
.f-pin[hidden] { display: none; }
.f-pin--stop::after { content: attr(data-nr); width: 22px; height: 22px; bottom: -33px; border-width: 2px; background: #07284E; color: #FFFFFF; font: 700 11px/18px 'Montserrat', system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 4px rgba(127, 164, 255, .25); }
/* Pin valt er zacht in (los van de transform, die de plek bepaalt). */
.f-pin.is-in { animation: f-pin-in .55s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes f-pin-in {
  from { opacity: 0; translate: 0 -18px; scale: .92; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.f-routelaag { transition: opacity .3s; }

.f-bron { position: absolute; right: 8px; bottom: 6px; z-index: 2; margin: 0; padding: 2px 6px; border-radius: 4px; background: rgba(3, 10, 22, .7); color: var(--f-zacht); font-size: 10px; line-height: 1.4; pointer-events: none; }
.f-kaart__knoppen { position: absolute; top: 16px; right: 20px; z-index: 2; }
.f-kaartknop { min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--f-rand-sterk); background: rgba(3, 10, 22, .85); color: #FFFFFF; font-weight: 700; font-size: 13px; cursor: pointer; }
.f-kaartknop:hover { border-color: var(--f-blauw-licht); }

@media (max-width: 900px) {
  .f-kaart__knoppen { top: 8px; right: 8px; }
  .f-kaartknop { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .f-pin { padding: 5px 9px; }
  .f-pin strong { font-size: 13px; }
  .f-pin span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .f-pin.is-in { animation: none; }
}

/* Kaart op de boekpagina (ontwerp 6 en 7): klapt open zodra er een postcode is. */
.thema-nacht .bk-kaart { display: grid; grid-template-rows: 0fr; opacity: 0; margin: -8px 0 0; transition: grid-template-rows .7s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, margin .7s cubic-bezier(.2, .8, .2, 1); }
.thema-nacht .bk-kaart.is-open { grid-template-rows: 1fr; opacity: 1; margin: 0 0 28px; }
.bk-kaart__binnen { min-height: 0; overflow: hidden; }
.bk-kaart__vlak { position: relative; height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--f-rand-sterk); background: #030B18; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.bk-kaart__info { min-height: 22px; margin: 10px 2px 0; font-size: 14px; font-weight: 600; color: var(--f-zacht); }
@media (max-width: 560px) {
  .bk-kaart__vlak { height: 320px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .thema-nacht .bk-kaart { transition: none; }
}