/*
Theme Name:   Kela Kilometervrij
Theme URI:    https://kela-kmvrij.nl
Author:       iFago
Author URI:   https://ifago.nl
Description:  Maatwerkthema voor Kela Kilometervrij — kilometervrij én reclamevrij bussen huren in Zoetermeer. Ontworpen voor gebruik met de Kela Fleet-plugin (boekingswidget, vloot en tarieven).
Version:      1.2.4
Requires at least: 6.0
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  kela
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --ac: #00B41E;
  --ac-h: #009A18;
  --ac-d: #0E7A3C;
  --ac-t: #0E8A2E;
  --ac-on: #04270B;
  --ac-lt: #7DE58C;
  --ac-soft: #EDFBEF;
  --ac-line: #C8EFCE;
  --ac-sh: rgba(0, 180, 30, 0.28);
  --ac-band: linear-gradient(135deg, #0E7A3C, #00B41E);

  --ink-900: #0E1620;
  --ink-800: #1B2430;
  --ink-700: #2C3642;
  --ink-600: #4A5563;
  --ink-500: #6B7683;
  --ink-400: #94A0AE;
  --ink-300: #C3CBD4;
  --ink-200: #E2E7ED;
  --ink-100: #F1F4F7;
  --ink-50:  #F8FAFC;

  --dark-bg: #0E1620;
  --dark-surface: #17212E;
  --dark-elev: #1F2B3A;

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(14,22,32,0.06), 0 1px 2px rgba(14,22,32,0.04);
  --shadow-md: 0 8px 20px rgba(14,22,32,0.08), 0 2px 6px rgba(14,22,32,0.05);
  --shadow-lg: 0 20px 40px rgba(14,22,32,0.10), 0 6px 12px rgba(14,22,32,0.06);
  --shadow-hover: 0 14px 30px rgba(14,22,32,0.10), 0 4px 10px rgba(14,22,32,0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--font-body);
  color: var(--ink-900);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ac-d); text-decoration: none; transition: color 150ms; }
a:hover { color: var(--ac-t); }
input, select, button, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); text-wrap: balance; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.sectie { padding: 96px 0; }
.sectie--grijs { background: var(--ink-50); border-top: 1px solid var(--ink-100); }
.sectie--donker { background: var(--dark-bg); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.eyebrow {
  display: block;
  font: 600 12px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-t);
  margin-bottom: 14px;
}
.sectie--donker .eyebrow { color: var(--ac-lt); }

.sectie-kop { max-width: 660px; margin-bottom: 48px; }
.sectie-kop--midden { margin-left: auto; margin-right: auto; text-align: center; }
.sectie-kop h1 { margin: 0; font: 700 clamp(32px, 3.6vw, 44px)/1.1 var(--font-display); letter-spacing: -0.022em; }
.sectie-kop h2 { margin: 0; font: 700 clamp(28px, 3.2vw, 36px)/1.12 var(--font-display); letter-spacing: -0.02em; }
.sectie-kop p { margin: 14px 0 0; color: var(--ink-600); font-size: 17px; line-height: 1.65; }
.sectie--donker .sectie-kop h2 { color: #FFFFFF; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px var(--font-display);
  padding: 13px 26px;
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.knop:active { transform: translateY(1px); }
.knop--primair { background: var(--ac); color: var(--ac-on); }
.knop--primair:hover { background: var(--ac-h); color: var(--ac-on); }
.knop--primair.knop--schaduw { box-shadow: 0 12px 32px var(--ac-sh); }
.knop--donker { background: var(--ink-900); color: #FFFFFF; }
.knop--donker:hover { background: var(--ink-700); color: #FFFFFF; }
.knop--outline { background: transparent; color: var(--ink-900); border: 1.5px solid var(--ink-300); }
.knop--outline:hover { background: var(--ac); color: var(--ac-on); border-color: var(--ac); }
.knop--wit-outline { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.45); }
.knop--wit-outline:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.knop--breed { width: 100%; }
.knop--klein { font-size: 14px; padding: 12px 20px; }

/* Kaarten */
.kaart {
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.kaart--hover { transition: box-shadow 220ms var(--ease), transform 220ms var(--ease); }
.kaart--hover:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.kaart--pad { padding: 32px; }

/* Grids */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--vloot { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--vloot-breed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--vergelijk { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); gap: 20px; }
.grid--stappen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; }

/* Pills */
.pill {
  font: 700 13.5px var(--font-display);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-200);
  background: #FFFFFF;
  color: var(--ink-600);
  cursor: pointer;
  transition: all 150ms;
}
.pill:hover { border-color: var(--ac); }
.pill.is-actief, .pill[aria-pressed="true"] { background: var(--ac); border-color: var(--ac); color: var(--ac-on); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  width: 100%;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-100);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; height: 76px; }
.site-header__logo img, .custom-logo-link img { height: 42px; width: auto; }
.site-header__logo--donker { display: none; }
.heeft-donkere-header .site-header__logo--licht { display: none; }
.heeft-donkere-header .site-header__logo--donker { display: block; }
.site-header__nav { display: flex; gap: 4px; margin: 0 auto; }
.site-header__nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-header__nav a {
  font: 600 15px var(--font-body);
  color: var(--ink-600);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  transition: color 150ms, background 150ms;
}
.site-header__nav a:hover { color: var(--ink-900); }
.site-header__nav .current-menu-item a, .site-header__nav a.is-actief { color: var(--ac-d); background: var(--ac-soft); }
.site-header__tel { font: 700 15px var(--font-display); color: var(--ink-900); white-space: nowrap; }
.site-header__tel:hover { color: var(--ac); }
.menu-knop {
  display: none;
  background: transparent; border: 1.5px solid var(--ink-200); border-radius: 10px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--ink-900); cursor: pointer;
}
.mobiel-menu { display: none; border-top: 1px solid var(--ink-100); background: #FFFFFF; padding: 12px 0 18px; }
.mobiel-menu.is-open { display: block; }
.mobiel-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mobiel-menu a { display: block; font: 600 17px var(--font-body); color: var(--ink-800); padding: 13px 8px; border-radius: var(--radius-sm); }
.mobiel-menu a:hover { background: var(--ac-soft); color: var(--ac-d); }

/* WordPress-adminbalk: sticky header eronder laten aansluiten */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Donkere header op de homepage (over de zwarte hero) */
.heeft-donkere-header .site-header {
  background: rgba(5, 8, 12, 0.82);
  border-bottom-color: rgba(255,255,255,0.10);
}
.heeft-donkere-header .site-header__nav a { color: var(--ink-400); }
.heeft-donkere-header .site-header__nav a:hover { color: #FFFFFF; }
.heeft-donkere-header .site-header__nav .current-menu-item a,
.heeft-donkere-header .site-header__nav a.is-actief { color: var(--ac-lt); background: rgba(255,255,255,0.07); }
.heeft-donkere-header .site-header__tel { color: #FFFFFF; }
.heeft-donkere-header .menu-knop { border-color: rgba(255,255,255,0.25); color: #FFFFFF; }
.heeft-donkere-header .mobiel-menu { background: var(--dark-bg); border-top-color: rgba(255,255,255,0.10); }
.heeft-donkere-header .mobiel-menu a { color: var(--ink-300); }
.heeft-donkere-header .mobiel-menu a:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  background:
    radial-gradient(1100px 520px at 50% -14%, rgba(0,180,30,0.20), transparent 62%),
    radial-gradient(760px 380px at 88% 8%, rgba(0,180,30,0.07), transparent 60%),
    linear-gradient(180deg, #05080C, #0E1620);
  color: #FFFFFF;
}
.hero__inner { max-width: 920px; margin: 0 auto; padding: 80px clamp(16px,4vw,40px) 88px; text-align: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ac-lt);
  font: 600 13.5px var(--font-body);
  padding: 9px 18px; border-radius: var(--radius-pill); margin-bottom: 30px;
  transition: border-color 150ms;
  animation: heroUp 480ms var(--ease) both;
}
.hero__badge:hover { border-color: var(--ac); color: var(--ac-lt); }
.hero__badge .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); flex: none; }
.hero h1 {
  margin: 0;
  font: 800 clamp(40px, 5.2vw, 62px)/1.06 var(--font-display);
  letter-spacing: -0.025em;
  color: #FFFFFF;
  animation: heroUp 480ms var(--ease) 60ms both;
}
.hero h1 em {
  font-style: normal;
  color: var(--ac);
  background: linear-gradient(180deg, transparent 82%, var(--ac-sh) 82%);
  padding: 0 2px; border-radius: 2px;
}
.hero__sub {
  margin: 22px auto 0; max-width: 54ch;
  font-size: 18px; line-height: 1.65; color: var(--ink-400);
  animation: heroUp 480ms var(--ease) 120ms both;
}
.hero__noot { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-400); animation: heroUp 480ms var(--ease) 240ms both; }
.hero__noot a { font-weight: 600; color: var(--ac-lt); }

/* Zoekbalk */
.zoekbalk {
  margin: 36px auto 0; max-width: 840px;
  background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
  text-align: left;
  animation: heroUp 480ms var(--ease) 180ms both;
}
.zoekbalk__veld { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.zoekbalk__veld--type { flex: 1.4; min-width: 180px; }
.zoekbalk label {
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
}
.zoekbalk select, .zoekbalk input {
  font: 500 15px var(--font-body);
  border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--ink-50); width: 100%; color: var(--ink-900);
}
.zoekbalk .knop { flex: none; }

@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* USP-band */
.usp-band { background: var(--ac-soft); border-top: 1px solid var(--ac-line); border-bottom: 1px solid var(--ac-line); }
.usp-band__inner { padding: 16px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.usp-band__item { display: flex; align-items: center; gap: 10px; font: 600 14.5px var(--font-display); color: var(--ink-800); }
.usp-band__item svg { width: 20px; height: 20px; flex: none; color: var(--ac-d); }

/* ==========================================================================
   Feature-/dienstkaarten
   ========================================================================== */
.feature-kaart .icoon { display: inline-flex; color: var(--ac-t); }
.feature-kaart .icoon svg { width: 24px; height: 24px; }
.feature-kaart h3 { margin: 18px 0 0; font: 600 19px var(--font-display); letter-spacing: -0.01em; }
.feature-kaart p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-600); }

/* Vinklijst */
.vinklijst { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.vinklijst li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-800); }
.vinklijst svg { width: 20px; height: 20px; flex: none; color: var(--ac); margin-top: 3px; }

/* ==========================================================================
   Vlootkaarten
   ========================================================================== */
.vloot-kaart { overflow: hidden; display: flex; flex-direction: column; }
.vloot-kaart__foto { position: relative; aspect-ratio: 16/10; background: var(--ink-100); }
.vloot-kaart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vloot-kaart__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-400); font: 600 13px var(--font-body); text-align: center; padding: 20px;
  border: 2px dashed var(--ink-200); border-radius: 0;
}
.vloot-kaart__tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--ac); color: var(--ac-on);
  font: 700 11px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 6px 12px; pointer-events: none;
}
.vloot-kaart__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.vloot-kaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vloot-kaart__kop h3 { margin: 0; font: 600 19px var(--font-display); letter-spacing: -0.01em; }
.vloot-kaart__kop h3 a { color: var(--ink-900); }
.vloot-kaart__kop h3 a:hover { color: var(--ac-t); }
.vloot-kaart__volume { font: 800 14px var(--font-display); color: var(--ac-d); white-space: nowrap; }
.vloot-kaart__sub { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-500); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  font: 600 12.5px var(--font-body);
  background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  padding: 5px 10px; color: var(--ink-600);
}
.vloot-kaart__specs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 16px; }
.vloot-kaart__specs td { padding: 7px 10px; }
.vloot-kaart__specs td:first-child { color: var(--ink-500); width: 46%; }
.vloot-kaart__specs td:last-child { font-weight: 600; color: var(--ink-800); }
.vloot-kaart__specs tr:nth-child(odd) { background: var(--ink-50); }
.vloot-kaart__prijs { margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.vloot-kaart__prijs strong { font: 800 24px var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); }
.vloot-kaart__prijs span { font: 600 13px var(--font-body); color: var(--ink-500); }
.vloot-kaart .knop { margin-top: 10px; }
.vloot-kaart .knop:first-of-type { margin-top: 14px; }

/* ==========================================================================
   Vergelijker (home)
   ========================================================================== */
.vergelijker__periodes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vergelijk-kaart { padding: 26px 22px; text-align: center; display: flex; flex-direction: column; }
.vergelijk-kaart h3 { margin: 0; font: 700 16.5px var(--font-display); }
.vergelijk-kaart__vol { margin: 3px 0 0; font-size: 13px; color: var(--ink-500); }
.vergelijk-kaart__prijs { font: 800 30px var(--font-display); letter-spacing: -0.02em; margin-top: 12px; color: var(--ink-900); }
.vergelijk-kaart__per { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-500); }
.vergelijk-kaart__m3 {
  display: inline-block; margin: 12px auto 2px;
  font: 600 12.5px var(--font-body);
  background: var(--ac-soft); border: 1px solid var(--ac-line); color: var(--ac-d);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.vergelijker__noot { text-align: center; margin: 24px 0 0; font-size: 13.5px; color: var(--ink-500); }

/* Reviews */
.review-kaart { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.review-kaart .sterren { color: var(--ac-t); letter-spacing: 2px; font-size: 16px; }
.review-kaart p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-700); }
.review-kaart footer { margin-top: auto; font: 700 14px var(--font-display); color: var(--ink-900); }
.review-kaart footer span { display: block; font: 500 13px var(--font-body); color: var(--ink-500); }

/* Over-sectie */
.over-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: center; }
.over-grid__foto { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--ink-100); }
.over-grid__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* CTA-band */
.cta-band {
  background: var(--ac-band);
  border-radius: 24px;
  padding: 56px 48px;
  color: #FFFFFF;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { margin: 0; font: 800 clamp(24px, 3vw, 34px)/1.15 var(--font-display); letter-spacing: -0.02em; color: #FFFFFF; max-width: 22ch; }
.cta-band p { margin: 10px 0 0; color: rgba(233, 251, 234, 0.92); max-width: 44ch; line-height: 1.6; }
.cta-band__knoppen { display: flex; gap: 14px; flex-wrap: wrap; }

/* Stappen (donker) */
.stap-kaart { background: var(--dark-surface); border: 1px solid var(--dark-elev); border-radius: var(--radius-lg); padding: 24px 20px; }
.stap-kaart__nr {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--ac); color: var(--ac-on);
  display: flex; align-items: center; justify-content: center;
  font: 800 15px var(--font-display);
}
.stap-kaart h3 { margin: 16px 0 0; font: 600 16px var(--font-display); color: #FFFFFF; }
.stap-kaart p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-400); }

/* FAQ */
.faq-lijst { max-width: 780px; margin: 0 auto; }
.faq-item { border: 1px solid var(--ink-200); border-radius: 14px; background: #FFFFFF; margin-bottom: 12px; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 24px;
  font: 700 16px var(--font-display); color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 600 22px/1 var(--font-display); color: var(--ac-t); flex: none; transition: transform 220ms var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 24px 20px; color: var(--ink-600); font-size: 15px; line-height: 1.65; }

/* Keuzehulp */
.keuzehulp { background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); max-width: 860px; margin: 0 auto; }
.keuzehulp h3 { margin: 0; font: 800 21px var(--font-display); letter-spacing: -0.01em; }
.keuzehulp > p { margin: 6px 0 18px; color: var(--ink-600); font-size: 15px; }
.keuzehulp__opties { display: flex; flex-wrap: wrap; gap: 8px; }
.keuzehulp__resultaat { margin-top: 20px; background: var(--ac-soft); border: 1px solid var(--ac-line); border-radius: 14px; padding: 24px; }
.keuzehulp__resultaat[hidden] { display: none; }
.keuzehulp__resultaat h4 { margin: 0; font: 800 18px var(--font-display); color: var(--ac-d); }
.keuzehulp__resultaat p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.keuzehulp__knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Contact */
.contact-kaart { padding: 32px; display: flex; flex-direction: column; }
.contact-kaart h2 { margin: 0; font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.contact-lijst { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; font-size: 15px; line-height: 1.55; color: var(--ink-800); }
.contact-lijst li { display: flex; gap: 12px; }
.contact-lijst svg { width: 20px; height: 20px; flex: none; color: var(--ac-d); margin-top: 2px; }
.contact-kaart__knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; }
.knop--whatsapp { background: #25D366; color: #06301C; }
.knop--whatsapp:hover { background: #1FBF5B; color: #06301C; }
.contact-kaart-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: stretch; }
.contact-kaart-wrap iframe { border: 0; width: 100%; height: 100%; min-height: 340px; display: block; }
.contact-kaart-wrap .kaart--map { overflow: hidden; min-height: 340px; }

/* ==========================================================================
   Voertuigen-overzicht
   ========================================================================== */
.pagina-band { background: linear-gradient(180deg, #FFFFFF 0%, var(--ac-soft) 100%); border-bottom: 1px solid var(--ac-line); }
.pagina-band__inner { padding: 64px 0 88px; }
.pagina-band--bus .pagina-band__inner { padding: 32px 0 84px; }
.pagina-band h1 { margin: 0; font: 700 clamp(32px, 3.6vw, 44px)/1.1 var(--font-display); letter-spacing: -0.022em; }
.pagina-band p { margin: 14px 0 0; color: var(--ink-600); font-size: 17px; line-height: 1.65; max-width: 660px; }

.vloot-toolbar {
  position: relative; margin-top: -46px;
  background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.vloot-toolbar__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.vloot-toolbar__rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.vloot-toolbar__streep { width: 1px; height: 26px; background: var(--ink-200); }
.vloot-toolbar label { font: 600 14px var(--font-body); color: var(--ink-500); display: flex; align-items: center; gap: 10px; }
.vloot-toolbar select {
  padding: 9px 14px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm);
  font: 600 14px var(--font-body); background: #FFFFFF; color: var(--ink-900); cursor: pointer;
}
.keuzehulp-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px var(--font-display);
  padding: 12px 22px; border-radius: var(--radius-pill);
  background: var(--ac-soft); border: 1px solid var(--ac-line); color: var(--ac-d);
  transition: border-color 150ms;
}
.keuzehulp-link:hover { border-color: var(--ac); color: var(--ac-d); }

/* ==========================================================================
   Buspagina
   ========================================================================== */
.bus-terug { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); color: var(--ac-d); }
.bus-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.bus-kop__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.bus-foto {
  position: relative; margin-top: -44px;
  aspect-ratio: 21/9; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--ink-100); border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-lg);
}
.bus-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bus-foto .vloot-kaart__placeholder { border: none; }

.specs-tabel { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 16px; }
.specs-tabel td { padding: 9px 10px; }
.specs-tabel td:first-child { color: var(--ink-500); width: 46%; }
.specs-tabel td:last-child { font-weight: 600; color: var(--ink-800); }
.specs-tabel tr:nth-child(odd) { background: var(--ink-50); }

.tarieven-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 16px; }
.tarieven-tabel td { padding: 11px 0; border-bottom: 1px dashed var(--ink-200); color: var(--ink-700); }
.tarieven-tabel td:last-child { text-align: right; font: 800 16px var(--font-display); color: var(--ink-900); }

.info-blok {
  margin-top: 16px;
  background: var(--ac-soft); border: 1px solid var(--ac-line); border-radius: var(--radius-md);
  padding: 13px 14px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);
}
.info-blok b { color: var(--ac-d); }

.mini-vinklijst { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.mini-vinklijst li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-800); }
.mini-vinklijst svg { width: 18px; height: 18px; flex: none; color: var(--ac); margin-top: 2px; }

.andere-bus { display: flex; flex-direction: column; gap: 3px; padding: 24px; }
.andere-bus > span:first-child { font: 600 17px var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.andere-bus__vol { font: 500 13.5px var(--font-body); color: var(--ink-500); }
.andere-bus__prijs { margin-top: 12px; font: 800 18px var(--font-display); color: var(--ink-900); }
.andere-bus__prijs span { font: 600 12.5px var(--font-body); color: var(--ink-500); }
.andere-bus__link { margin-top: 10px; font: 700 14px var(--font-display); color: var(--ac-d); }

/* Reserveren-sectie + widgetkaart */
.reserveren-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 44px; align-items: start; }
.reserveren-grid h2 { margin: 0; font: 700 clamp(26px, 3vw, 34px)/1.12 var(--font-display); letter-spacing: -0.02em; }
.reserveren-grid > div > p { margin: 14px 0 0; color: var(--ink-600); font-size: 16.5px; line-height: 1.65; }
.stappen-lijst { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.stappen-lijst li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-800); }
.stappen-lijst .nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ac-soft); border: 1px solid var(--ac-line); color: var(--ac-d);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-display);
}
.reserveren-noot { margin: 24px 0 0; font-size: 13.5px; color: var(--ink-500); }

/* Kela Fleet boekingswidget — herstijl naar sitedesign */
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw {
  --kela-bw-primary: #0E1620;
  --kela-bw-accent: #00B41E;
  --kela-bw-radius: 16px;
  max-width: none;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  font-family: var(--font-body);
}
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-title { font: 600 20px var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); margin: 0 0 18px; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-field span { font: 600 12.5px var(--font-body); color: var(--ink-500); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw input,
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw select,
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw textarea {
  font: 500 15px var(--font-body);
  border: 1.5px solid var(--ink-300); border-radius: var(--radius-sm);
  padding: 10px 12px; background: #FFFFFF; color: var(--ink-900); width: 100%;
}
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw input:focus,
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw select:focus,
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw textarea:focus { border-color: var(--ac); outline: none; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-card { border: 1.5px solid var(--ink-200); border-radius: var(--radius-md); background: #FFFFFF; cursor: pointer; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-card.is-active { border-color: var(--ac); background: var(--ac-soft); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-cardprice { font: 800 17px var(--font-display); color: var(--ac-d); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-btn {
  font: 700 15px var(--font-display);
  background: var(--ac); color: var(--ac-on);
  border: none; border-radius: var(--radius-md); padding: 13px; width: 100%; cursor: pointer;
  transition: background 150ms;
}
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-btn:hover { background: var(--ac-h); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-btn:disabled { opacity: 0.55; cursor: default; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-msg { font: 600 14px var(--font-body); color: var(--ac-d); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-msg.is-error { color: #B3261E; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-total strong { font: 800 17px var(--font-display); color: var(--ink-900); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-sub { color: var(--ink-500); font-size: 13px; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-success h3 { font: 700 22px var(--font-display); color: var(--ink-900); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-extras h4 { margin: 4px 0 0; font: 600 14px var(--font-display); color: var(--ink-900); }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-check { display: flex; gap: 10px; align-items: flex-start; font: 500 13.5px var(--font-body); color: var(--ink-700); cursor: pointer; }
:is(.reserveren-grid, .kela-bw-modalwrap) .kela-bw-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ac); flex: none; margin-top: 1px; }

/* ==========================================================================
   WooCommerce — betaalpagina (order-pay), bedankt- en accountloze checkout
   in sitestijl. De Kela Fleet-plugin stuurt na het reserveren door naar de
   order-pay pagina; deze regels laten die pagina's bij het design passen.
   ========================================================================== */
.woocommerce-page .pagina-inhoud { max-width: 820px; }
.woocommerce ul.woocommerce-error,
.woocommerce ul.woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-notice {
  list-style: none; margin: 0 0 20px; padding: 14px 18px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--bg-2); color: var(--ink-700); font-size: 14.5px;
}
.woocommerce ul.woocommerce-error { border-color: #E5B6B2; background: #FCF3F2; color: #8C1D18; }
.woocommerce table.shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--ink-200); border-radius: var(--radius-md); overflow: hidden;
  font-size: 14.5px; margin: 0 0 24px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 12px 16px; border-bottom: 1px solid var(--ink-100); text-align: left; }
.woocommerce table.shop_table th { font: 600 12.5px var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); background: var(--bg-2); }
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { font-weight: 700; color: var(--ink-900); }
.woocommerce .woocommerce-order-overview {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-size: 13.5px; color: var(--ink-500);
}
.woocommerce .woocommerce-order-overview li { border-left: 3px solid var(--ac); padding-left: 10px; }
.woocommerce .woocommerce-order-overview strong { display: block; color: var(--ink-900); font-size: 15px; }
.woocommerce .woocommerce-thankyou-order-received {
  font: 700 clamp(22px,2.6vw,28px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink-900);
  margin: 0 0 20px;
}
#payment.woocommerce-checkout-payment,
.woocommerce #payment {
  background: var(--bg-2); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
}
.woocommerce #payment ul.payment_methods { list-style: none; margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--ink-200); display: grid; gap: 10px; }
.woocommerce #payment ul.payment_methods li { font: 600 15px var(--font-body); color: var(--ink-900); }
.woocommerce #payment ul.payment_methods input[type="radio"] { accent-color: var(--ac); margin-right: 8px; }
.woocommerce #payment div.payment_box { margin: 8px 0 0; padding: 10px 14px; background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--ink-600); }
.woocommerce #payment .form-row { padding: 16px 20px; margin: 0; }
.woocommerce .button,
.woocommerce button.button,
.woocommerce #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 15px var(--font-display); padding: 13px 26px;
  border-radius: var(--radius-md); border: none; cursor: pointer;
  background: var(--ac); color: var(--ac-on);
  box-shadow: var(--shadow-brand);
  transition: background 150ms;
  text-decoration: none; white-space: nowrap;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover { background: var(--ac-h); color: var(--ac-on); }
.woocommerce #place_order { width: 100%; font-size: 16px; }
.woocommerce .woocommerce-customer-details { display: none; } /* geen adresblok nodig bij huur */

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark-bg); color: var(--ink-400); padding: 64px 0 32px; border-top: 4px solid var(--ac); }
.site-footer a { color: var(--ink-400); }
.site-footer a:hover { color: var(--ac-lt); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.site-footer img { height: 44px; width: auto; }
.site-footer h4 { margin: 0 0 14px; font: 700 15px var(--font-display); color: #FFFFFF; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.site-footer p { font-size: 14.5px; line-height: 1.65; }
.site-footer__onder {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--dark-elev);
  display: flex; justify-content: space-between; gap: 16px; font-size: 13px; flex-wrap: wrap; color: var(--ink-500);
}

/* WhatsApp-knop */
.wa-knop {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #06301C;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(14,22,32,0.28);
  transition: box-shadow 150ms;
}
.wa-knop:hover { box-shadow: 0 14px 34px rgba(14,22,32,0.38); color: #06301C; }
.wa-knop svg { width: 30px; height: 30px; }

/* Standaardpagina's */
.pagina-inhoud { max-width: 780px; margin: 0 auto; padding: 72px clamp(16px,4vw,40px) 96px; }
.pagina-inhoud h1 { font: 700 clamp(32px,3.6vw,44px)/1.1 var(--font-display); letter-spacing: -0.022em; }

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width: 1023px) {
  .site-header__nav, .site-header__tel, .site-header__cta { display: none; }
  .menu-knop { display: flex; margin-left: auto; }
  .site-header__mobiel-cta { display: inline-flex; margin-left: auto; }
  .sectie { padding: 64px 0; }
  .over-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 40px 28px; }
  .bus-kop { align-items: flex-start; }
}
@media (min-width: 1024px) {
  .site-header__mobiel-cta { display: none; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .zoekbalk { flex-direction: column; align-items: stretch; }
  .keuzehulp { padding: 24px; }
  .cta-band__knoppen { width: 100%; }
  .cta-band .knop { flex: 1; }
}

/* ==========================================================================
   Kela Fleet 1.3 — popup-knop, modal en voertuigengrid in huisstijl
   ========================================================================== */
button.kela-bw-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto;
  font: 700 15px var(--font-display);
  padding: 13px 26px;
  border: none; border-radius: var(--radius-md);
  background: var(--ac); color: var(--ac-on);
  box-shadow: var(--shadow-brand);
  cursor: pointer; white-space: nowrap;
  transition: background 150ms;
}
button.kela-bw-open:hover { background: var(--ac-h); filter: none; }
button.kela-bw-open.knop--klein { font-size: 14px; padding: 10px 16px; border-radius: 10px; box-shadow: none; }
.vloot-kaart__body button.kela-bw-open,
.vergelijk-kaart button.kela-bw-open { display: flex; width: 100%; }

.kela-bw-overlay { background: rgba(14, 22, 32, 0.62); backdrop-filter: blur(3px); }
.kela-bw-modalwrap { max-width: 620px; }
.kela-bw-modalwrap .kela-bw { border: none; border-radius: var(--radius-lg); padding: 28px 28px 30px; box-shadow: 0 24px 64px rgba(14,22,32,0.32); }
.kela-bw-modalwrap .kela-bw-close {
  top: 12px; right: 12px; width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-2); color: var(--ink-700); font-size: 22px;
  transition: background 150ms, color 150ms;
}
.kela-bw-modalwrap .kela-bw-close:hover { background: var(--ink-100); color: var(--ink-900); }

/* [kela_booking_grid] — kaarten volgen de vlootkaart-stijl */
.kela-fgrid { gap: 24px; }
.kela-fgrid .kela-fcard {
  background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow 150ms, transform 150ms;
}
.kela-fgrid .kela-fcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kela-fgrid .kela-fcard-media { display: block; aspect-ratio: 16 / 10; background: var(--bg-2); }
.kela-fgrid .kela-fcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kela-fgrid .kela-fcard-noimg { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.kela-fgrid .kela-fcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.kela-fgrid .kela-fcard-body h3 { margin: 0; font: 600 19px var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.kela-fgrid .kela-fspecs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kela-fgrid .kela-fspecs li {
  font: 600 12.5px var(--font-body); color: var(--ink-700);
  background: var(--bg-2); border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.kela-fgrid .kela-ffoot { margin-top: auto; padding-top: 18px; }
.kela-fgrid .kela-fprice { margin: 0 0 12px; font: 500 13.5px var(--font-body); color: var(--ink-500); }
.kela-fgrid .kela-fprice strong { font: 800 22px var(--font-display); color: var(--ink-900); }
.kela-fgrid .kela-fcard button.kela-bw-open { display: flex; width: 100%; }
.kela-fgrid .kela-ftel { display: block; font: 700 14px var(--font-display); color: var(--ac-d); }

/* ==========================================================================
   Zoekperiode: beschikbaarheidsbadges op vlootkaarten + periode-notice
   ========================================================================== */
.vloot-kaart__badge {
  position: absolute; top: 14px; right: 14px;
  font: 700 12px var(--font-body);
  padding: 6px 12px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.vloot-kaart__badge.is-vrij { background: var(--ac-soft); color: var(--ac-d); border: 1px solid var(--ac-line); }
.vloot-kaart__badge.is-bezet { background: #FCF3F2; color: #8C1D18; border: 1px solid #E5B6B2; }

.periode-notice {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  margin: 0 0 20px; padding: 11px 16px;
  background: var(--ac-soft); border: 1px solid var(--ac-line); border-radius: var(--radius-md);
  font: 600 14px var(--font-body); color: var(--ac-d);
}
.periode-notice a { color: var(--ac-d); text-decoration: underline; font-weight: 700; }
.periode-notice a:hover { color: var(--ink-900); }

/* ==========================================================================
   Contactpagina + Fluent Forms in huisstijl
   ========================================================================== */
.contact-pagina-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start;
}
.contact-pagina-grid__info { display: grid; gap: 28px; }
.contact-pagina-grid__map iframe { width: 100%; height: 300px; border: 0; display: block; }
@media (max-width: 900px) {
  .contact-pagina-grid { grid-template-columns: 1fr; }
}
.contact-formulier__fallback {
  background: var(--bg-2); border: 1px dashed var(--ink-200); border-radius: var(--radius-md);
  padding: 22px; font-size: 15px; color: var(--ink-700);
}

/* Fluent Forms — velden en knop volgen het thema */
.fluentform .ff-el-input--label label {
  font: 600 12.5px var(--font-body); color: var(--ink-500);
}
.fluentform .ff-el-form-control {
  font: 500 15px var(--font-body); color: var(--ink-900);
  background: #FFFFFF;
  border: 1.5px solid #C3CBD4; border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: none;
}
.fluentform .ff-el-form-control:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 4px rgba(0, 180, 30, 0.14);
  outline: none;
}
.fluentform .ff-el-group { margin-bottom: 18px; }
.fluentform .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 15px var(--font-display);
  padding: 13px 26px;
  border: none; border-radius: var(--radius-md);
  background: var(--ac); color: var(--ac-on);
  box-shadow: var(--shadow-brand);
  cursor: pointer; transition: background 150ms;
}
.fluentform .ff-btn-submit:hover { background: var(--ac-h); }
.fluentform .ff-message-success {
  background: var(--ac-soft); border: 1px solid var(--ac-line); border-radius: var(--radius-md);
  color: var(--ac-d); font: 600 14.5px var(--font-body);
  padding: 14px 18px;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #C6362C; }
.fluentform .error, .fluentform .ff-el-is-error .error {
  color: #B3261E; font: 600 12.5px var(--font-body);
}