/* Calculatorkaart (spec §1.2, §2.1): een wit vlak op de donkere pagina. De kaart herdefinieert de rollen, zodat
   dezelfde componentregels (velden, knoppen, pillen) hier licht renderen. Goud-donker haalt op wit 3,3:1: alleen
   voor de grote prijs, focusringen en lijnen, nooit kleine tekst. De primaire knop in de kaart ("Bereken mijn
   prijs") is goud en staat altijd aan (kwaliteitsherstel 2026-09-29 §6): de zwarte knop die grijs werd zolang hij
   uit stond, las als kapot. Een leeg adresveld krijgt bij klikken een melding (.calc-melding), geen disabled. */
.calculator {
  --achtergrond: var(--kaart-achtergrond);
  --vlak: var(--wit);
  --vlak-hoog: var(--wit);
  --lijn: var(--kaart-lijn);
  --veldrand: var(--kaart-veldrand);
  --tekst: var(--zwart);
  --tekst-zacht: var(--kaart-tekst-zacht);
  --accent: var(--goud-donker);
  --accent-tekst: var(--zwart);
  --prijs: var(--goud-donker);
  --fout: var(--kaart-fout);
  --ok: var(--kaart-ok);
  position: relative; z-index: 1;
  color: var(--tekst); background: var(--wit); color-scheme: light;
  border-radius: var(--radius-groot); box-shadow: var(--schaduw-kaart);
  padding: clamp(var(--ruimte-4), 3vw, var(--ruimte-8));
  margin-block: var(--ruimte-6);
}
.calculator .knop-primair { background: var(--goud); color: var(--zwart); border-color: var(--goud-donker); } /* rand: 3,3:1 op wit */
.calculator .knop-primair:hover { background: var(--goud-licht); color: var(--zwart); }
.calc-melding { margin: var(--ruimte-2) 0 0; color: var(--fout); font-size: var(--maat-klein); font-weight: 600; }
.calculator .icoon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--kaart-tekst-zacht); }
.calculator p, .calculator li { max-width: none; }

/* 7. Calculator ------------------------------------------------------------------------------------ */
/* Op de calculatorpagina's een smallere kolom (tekst links uitgelijnd); de calculator breekt uit de paginakop */
.pagina-kop {
  padding-bottom: calc(var(--ruimte-12) + 3.5rem);
  padding-inline: max(0px, calc((100% - 48rem) / 2));
}
.pagina-kop + .calculator { max-width: 48rem; margin: -3.5rem auto var(--ruimte-6); }

.calc-modus {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4);
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--achtergrond); border-radius: var(--radius);
  font-size: var(--maat-klein);
}
.calc-modus__tekst { margin: 0; flex: 1 1 18rem; color: var(--tekst-zacht); }
.calc-modus__tekst strong { color: var(--tekst); }
.calc-modus__wissel { font-weight: 600; overflow-wrap: normal; }

.calc-uitleg { margin-top: var(--ruimte-3); font-size: var(--maat-klein); }
.calc-uitleg summary { display: inline-block; padding-block: var(--ruimte-2); }
.calc-uitleg p { margin: var(--ruimte-2) 0 0; color: var(--tekst-zacht); }

.calc-form { margin-top: var(--ruimte-2); }
.calc-stap { border: 0; margin: 0; min-width: 0; padding: var(--ruimte-6) 0 0; }
.calc-stap + .calc-stap { margin-top: var(--ruimte-6); border-top: 1px solid var(--lijn); }
.calc-label {
  display: flex; align-items: center; gap: var(--ruimte-3); float: none; width: 100%;
  margin: 0 0 var(--ruimte-3); padding: 0;
  font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem; color: var(--tekst);
}
/* Legend zweeft, zodat hij niet in de fieldset-rand valt en de haarlijn tussen de stappen doorloopt */
legend.calc-label { float: left; }
legend.calc-label + * { clear: both; }
.calc-stap__nr {
  flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--zwart); color: var(--wit); font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.calc-helper { margin: var(--ruimte-2) 0 0; font-size: var(--maat-klein); color: var(--tekst-zacht); }
.calc-veld { margin-top: var(--ruimte-3); }
.calc-promo-status--ok { color: var(--ok); font-weight: 600; }
.calc-promo-status--fout { color: var(--fout); font-weight: 600; }

@supports (-webkit-touch-callout: none) {
  /* iOS: datum/tijd-velden krijgen anders een eigen minimale breedte en duwen de kolom breder */
  .calc-input[type="datetime-local"] { -webkit-appearance: none; appearance: none; text-align: left; }
}

.calc-adressen { display: grid; gap: var(--ruimte-2); }
.address-group { position: relative; min-width: 0; }
.stop-row { display: flex; align-items: flex-start; gap: var(--ruimte-2); }
.stop-row .address-group { flex: 1 1 auto; }
.remove-stop-btn {
  flex: none; width: 48px; height: 48px; padding: 0;
  background: var(--vlak); color: var(--tekst-zacht);
  border: 1px solid var(--lijn); border-radius: var(--radius-klein);
}
.remove-stop-btn:hover { color: var(--fout); border-color: color-mix(in srgb, var(--fout) 40%, var(--lijn)); }

.suggestions-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 18rem; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: var(--ruimte-1); list-style: none;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 31, 46, 0.14), 0 2px 6px rgba(15, 31, 46, 0.06);
}
.suggestion-item {
  display: flex; flex-direction: column; gap: 2px; max-width: none; margin: 0;
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-klein);
  cursor: pointer; overflow-wrap: anywhere;
}
.suggestion-item + .suggestion-item { margin-top: 0; }
.suggestion-item:hover, .suggestion-item.actief { background: var(--achtergrond); }
.suggestion-item.actief { box-shadow: inset 3px 0 0 var(--zwart); }
.suggestion-main { font-weight: 600; }
.suggestion-secondary { font-size: var(--maat-klein); color: var(--tekst-zacht); }

.add-stop-btn {
  display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: 44px;
  margin-top: var(--ruimte-1); padding: 0 var(--ruimte-1);
  background: none; border: 0; border-radius: var(--radius-klein);
  color: var(--accent); font-weight: 600; font-size: 0.9375rem; text-align: left;
}
.add-stop-btn:hover { color: var(--zwart); }
.add-stop-btn:disabled { color: var(--tekst-zacht); opacity: 0.55; cursor: not-allowed; }
.plus-icon {
  flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--achtergrond); color: var(--accent); font-weight: 800; line-height: 1;
}

.calc-vlucht { margin-top: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); background: var(--achtergrond); border-radius: var(--radius); }
.calc-vlucht .calc-helper { margin: 0 0 var(--ruimte-3); }
.calc-vlucht .option-pills + .option-pills { margin-top: var(--ruimte-2); }

.option-pills { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.option-pill {
  position: relative; display: inline-flex; align-items: center; gap: var(--ruimte-2);
  min-height: 44px; padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--lijn); border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; line-height: 1.25; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.option-pill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--lijn)); }
.option-pill.selected, .option-pill:has(:checked) {
  background: var(--achtergrond); border-color: var(--zwart); color: var(--zwart);
}
/* De radio blijft in de tabvolgorde; de pil toont de focus */
.option-pill input[type="radio"], .option-pill input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* Luxe rit: een aan/uit-pil; uitgeschakeld zodra een bus nodig is (alleen sedan, eigenaar 2026-09-29) */
.calc-luxe { margin-top: var(--ruimte-4); display: grid; gap: var(--ruimte-2); justify-items: start; }
.calc-luxe .calc-helper { margin: 0; }
.option-pill.is-uit { opacity: 0.5; cursor: not-allowed; }
.option-pill.is-uit:hover { border-color: var(--lijn); }
.option-pill:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-icon { color: var(--accent); font-weight: 700; }

.calc-tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-3); }
.calc-teller {
  display: flex; flex-direction: column; gap: var(--ruimte-2);
  min-width: 0; padding: var(--ruimte-3); border: 1px solid var(--lijn); border-radius: var(--radius);
}
.counter-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--tekst-zacht); }
.counter-label .icoon { flex: none; }
.counter { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
.counter button {
  width: 44px; height: 44px; padding: 0;
  background: var(--vlak); color: var(--accent);
  border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  font-size: 1.25rem; font-weight: 700; line-height: 1;
  transition: background-color 0.15s, border-color 0.15s;
}
.counter button:hover { background: var(--achtergrond); border-color: var(--accent); }
.counter button:disabled { opacity: 0.4; cursor: not-allowed; background: var(--vlak); border-color: var(--lijn); }
.counter input[type="number"] {
  width: 3rem; min-height: 44px; padding: 0; text-align: center;
  background: transparent; border: 0; box-shadow: none;
  font-family: var(--font-kop); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.counter input[type="number"]::-webkit-inner-spin-button,
.counter input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.counter input[type="number"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-klein); }
.counter input[type="number"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.calc-return-time { margin-top: var(--ruimte-4); }
.calc-return-time .calc-label { font-size: 0.9375rem; }
.wait-hint {
  margin: var(--ruimte-3) 0 0; padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--achtergrond); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: var(--maat-klein); color: var(--tekst-zacht);
}
.wait-hint strong { color: var(--tekst); }

.calc-summary { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-6); }
.calc-summary:empty { display: none; }
.calc-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--ruimte-3);
  background: var(--achtergrond); color: var(--zwart); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
}
.calc-tag.warn { background: color-mix(in srgb, var(--fout) 9%, var(--wit)); color: var(--fout); }

.calc-acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-top: var(--ruimte-6); }
.calc-acties .knop-primair { flex: 1 1 16rem; min-height: 52px; font-size: 1.0625rem; }

.calc-loading { display: flex; align-items: center; gap: var(--ruimte-3); margin: var(--ruimte-6) 0 0; color: var(--tekst-zacht); font-weight: 600; }
.spinner {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--lijn); border-top-color: var(--zwart);
  animation: draai 0.8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.calc-error {
  margin-top: var(--ruimte-6); padding: var(--ruimte-4);
  background: color-mix(in srgb, var(--fout) 7%, var(--wit));
  border: 1px solid color-mix(in srgb, var(--fout) 28%, var(--wit));
  border-radius: var(--radius); color: var(--fout);
}
.calc-error p { margin: 0; }
.calc-error p + p { margin-top: var(--ruimte-3); }
.calc-error a:not(.knop) { color: var(--fout); font-weight: 600; }

/* Het resultaat: een witte kaart met een goud-donker bovenrand; alleen het bedrag zelf staat op goud-donker
   (.prijs.prijs-vlak). Zo blijft de accentkleur voorbehouden aan de prijs en de belknop in de kop. */
.calc-result { margin-top: var(--ruimte-6); scroll-margin-block: 6rem; }
.calc-result .prijs-kaart {
  display: grid; gap: var(--ruimte-3);
  padding: clamp(var(--ruimte-4), 4vw, var(--ruimte-8));
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--goud-donker);
  border-radius: var(--radius-groot);
}
.prijs-kaart p { margin: 0; }
.prijs-eyebrow { font-family: var(--font-kop); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kaart-tekst-zacht); }
/* Route en details (eigenaar 2026-09-29: rustiger, zakelijker): kleine labels links, waarden rechts. */
.prijs-route, .prijs-details { margin: 0; }
.prijs-route { display: grid; gap: var(--ruimte-1); }
.prijs-route__stop, .prijs-detail { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--ruimte-3); align-items: baseline; }
.prijs-route dt, .prijs-details dt { font-size: 0.8125rem; font-weight: 600; color: var(--kaart-tekst-zacht); }
.prijs-route dd, .prijs-details dd { margin: 0; min-width: 0; }
.prijs-route dd { font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.prijs-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ruimte-1) var(--ruimte-6);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--lijn); font-size: var(--maat-klein);
}
.prijs-regel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4);
  padding-top: var(--ruimte-4); border-top: 1px solid var(--lijn);
}
.calc-result .prijs { line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.calc-result .prijs.prijs-vlak { display: inline-block; justify-self: start; padding: 0; background: none; color: var(--prijs); }
.prijs-soort { font-weight: 600; }
/* Bewezen urgentie direct onder de prijs (spec 2026-09-29 §1.4): geen getallen of nepschaarste, altijd
   dezelfde toon als de rest van de kaart — geen apart gekleurd waarschuwingsvlak. */
.prijs-urgentie { border-left: 3px solid var(--accent); padding-left: var(--ruimte-3); font-size: var(--maat-klein); color: var(--tekst-zacht); }
.prijs-urgentie p + p { margin-top: var(--ruimte-1); }
.prijs-items {
  margin: 0; padding: var(--ruimte-1) 0; list-style: none;
  background: var(--achtergrond); border-radius: var(--radius);
  font-size: 0.9375rem;
}
.prijs-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-3);
  max-width: none; margin: 0; padding: var(--ruimte-2) var(--ruimte-4);
}
.prijs-item + .prijs-item { margin-top: 0; border-top: 1px solid var(--lijn); }
.prijs-item__label { min-width: 0; }
.prijs-item__bedrag { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: normal; }
.prijs-item--totaal { font-family: var(--font-kop); font-weight: 800; }
.prijs-item--totaal .prijs-item__bedrag { font-weight: 800; }
.prijs-item--noot { font-size: var(--maat-klein); color: var(--tekst-zacht); }
.badge {
  display: inline-block; margin-left: var(--ruimte-2); padding: 1px var(--ruimte-2);
  background: var(--achtergrond); color: var(--zwart); border-radius: 999px;
  font-family: var(--font-tekst); font-size: 0.75rem; font-weight: 600; vertical-align: 0.1em; white-space: nowrap;
}
.prijs-opbouw summary {
  cursor: pointer; width: fit-content; font-size: var(--maat-klein); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.prijs-opbouw[open] summary { margin-bottom: var(--ruimte-2); }
.prijs-voorwaarden {
  display: grid; gap: var(--ruimte-1); margin: 0; padding: var(--ruimte-3) 0 0 1.1em;
  border-top: 1px solid var(--lijn); font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-zacht);
}
.prijs-voorwaarden li { max-width: none; margin: 0; }
.prijs-kaart .knoppen { margin-top: var(--ruimte-2); }
.prijs-kaart .knoppen .knop { flex: 1 1 12rem; min-height: 52px; }
.prijs-kaart a:not(.knop) { font-weight: 600; }

/* Sectie 10 (oude site.css): calculatorspecifieke media-query-regels ---------------------------------- */
@media (max-width: 720px) {
  .pagina-kop { padding-bottom: calc(var(--ruimte-8) + 2.5rem); }
  .pagina-kop + .calculator { margin-top: -2.5rem; }
}

@media (max-width: 480px) {
  .calculator { border-radius: var(--radius); }
  .pagina-kop + .calculator { margin-top: 0; }
  .pagina-kop { padding-bottom: var(--ruimte-6); }
  .calc-result .prijs-kaart { border-radius: var(--radius); }
  .calc-acties .knop { flex: 1 1 100%; width: 100%; }
  .calc-tellers { gap: var(--ruimte-2); }
  .calc-teller { padding: var(--ruimte-2); gap: var(--ruimte-1); }
  .counter-label { font-size: 0.75rem; }
  .counter { gap: 2px; }
  .counter button { width: 36px; height: 36px; font-size: 1.0625rem; }
  .counter input[type="number"] { width: 1.75rem; min-height: 36px; font-size: 1.0625rem; }
}

/* Compacte kaart in het eerste scherm (herstel 2026-09-28 §5, optie A): alleen ophaaladres, bestemming,
   datum/tijd en de knop "Bereken mijn prijs" zichtbaar; de rest zit achter de tekstknop "Passagiers, bagage
   en retour" tot .is-uitgeklapt (calc-compact.js). Resultaat/laden/fouten zitten buiten deze kaart-content en
   blijven dus altijd zichtbaar. Kaartbreedte begrensd op ~26rem (alleen ≥1024 px, naast de tekstkolom). */
.calculator--compact { margin-block: 0; }
.calculator__kop { margin: 0 0 var(--ruimte-4); font-family: var(--font-kop); font-weight: 800; font-size: 1.0625rem; }
.calculator--compact #mode-banner,
.calculator--compact .calc-uitleg,
.calculator--compact .add-stop-btn,
.calculator--compact .calc-helper,
.calculator--compact .calc-veld:has(#calc-flight),
.calculator--compact .calc-vlucht,
.calculator--compact .calc-veld:has(#calc-promo),
.calculator--compact .calc-return-time,
.calculator--compact .calc-stap:has(#pax),
.calculator--compact .calc-stap:has(input[name="trip"]),
.calculator--compact .calc-summary,
.calculator--compact #reset-btn,
.calculator--compact .calc-stap__nr {
  display: none;
}
.calculator--compact.is-uitgeklapt #mode-banner,
.calculator--compact.is-uitgeklapt .calc-uitleg,
.calculator--compact.is-uitgeklapt .add-stop-btn,
.calculator--compact.is-uitgeklapt .calc-helper,
.calculator--compact.is-uitgeklapt .calc-veld:has(#calc-flight),
.calculator--compact.is-uitgeklapt .calc-vlucht:not([hidden]),
.calculator--compact.is-uitgeklapt .calc-veld:has(#calc-promo),
.calculator--compact.is-uitgeklapt .calc-stap:has(#pax),
.calculator--compact.is-uitgeklapt .calc-stap:has(input[name="trip"]),
.calculator--compact.is-uitgeklapt .calc-summary,
.calculator--compact.is-uitgeklapt #reset-btn {
  display: revert;
}
.calculator--compact.is-uitgeklapt .calc-stap__nr { display: inline-grid; }
.calc-compact-toggle { display: block; margin-top: var(--ruimte-3); color: #7A5F2A; } /* donker goud op wit: 6,0:1 (goud zelf haalt 2,2:1) */
.calculator--compact.is-uitgeklapt .calc-compact-toggle { display: none; }
@media (min-width: 1024px) {
  .eerste-scherm .calculator--compact { max-width: 34rem; }
  /* Bredere kaart (kwaliteitsherstel 2026-09-29 §1.5): stap 1 (ophaaladres) en stap 2 (bestemming) naast
     elkaar, alle andere velden/knoppen over de volle breedte. Doel: uitgeklapt past binnen de kop op
     1280x800 zonder dat de kaart drie schermen lang wordt. */
  .calculator--compact .calc-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--ruimte-4); }
  .calculator--compact .calc-form > :nth-child(n + 3) { grid-column: 1 / -1; }
}
/* Compacte stand strakker (QA 2026-09-28): geen scheidingslijnen en minder lucht tussen de drie velden, zodat de
   kaart in de kop hooguit ~60 % van de schermhoogte inneemt en de auto onderin vrij blijft. */
.calculator--compact:not(.is-uitgeklapt) .calc-stap { padding-top: var(--ruimte-4); }
.calculator--compact:not(.is-uitgeklapt) .calc-stap + .calc-stap { margin-top: 0; border-top: 0; }
.calculator--compact:not(.is-uitgeklapt) .calc-label { margin-bottom: var(--ruimte-2); font-size: 0.9375rem; }
.calculator--compact:not(.is-uitgeklapt) .calc-acties { margin-top: var(--ruimte-5, 1.25rem); }