/* ==========================================================================
   DZH Transport — calculator.css (Task 2.5)
   Ontwerpwereld "Nachtrit" (docs/design/DESIGN-SITE.md is de wet).
   Het ene georkestreerde moment van deze pagina is de prijs-aankomst:
   tijdens "bezig" rijdt de wegmarkering, bij het resultaat komt de meter
   tellend tot stilstand, schuiven de opbouwregels als passerende borden in
   en gaat de natriumgloed boven de prijs aan. Al het andere beweegt niet
   of hoogstens 0.16s (kleur/rand). Alles achter prefers-reduced-motion
   (site.css onderaan dooft élke animatie/transitie).
   ========================================================================== */

/* --- pagina-kop ----------------------------------------------------------- */

.calc {
  padding-block: var(--maat-6) 0;
}

.calc__kop {
  max-width: 44rem;
  display: grid;
  gap: var(--maat-3);
  margin-bottom: var(--maat-5);
}

.calc__kop h1 {
  font-size: clamp(2.25rem, 3.6vw + 1rem, 3.5rem);
}

.calc__sub {
  color: var(--kleur-tekst-zacht);
  font-size: 1.0625rem;
  max-width: 38em;
}

/* Zonder JavaScript: korte uitleg + bel/contact-alternatief. */
.calc-noscript {
  margin-bottom: var(--maat-4);
  padding: var(--maat-4);
  display: grid;
  gap: var(--maat-2);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.calc-noscript a {
  color: var(--kleur-accent-fel);
}

/* --- raster: invoer links, uitkomst rechts -------------------------------- */

.calc__raster {
  display: grid;
  gap: var(--maat-4);
  align-items: start;
}

@media (min-width: 60rem) {
  .calc__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--maat-5);
  }
}

/* --- invoerpaneel ---------------------------------------------------------- */

.calc-vorm {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: clamp(var(--maat-4), 3vw, var(--maat-5));
}

.calc-vorm__velden {
  display: grid;
}

.veld {
  display: grid;
  gap: var(--maat-2);
  margin-top: var(--maat-4);
  border: 0;
  padding: 0;
  min-width: 0;
}

.veld[data-veld="dienst"] {
  margin-top: 0;
}

.veld[hidden] {
  display: none;
}

/* Alleen nieuw verschenen velden komen aan; wat al stond, blijft stil. */
@media (prefers-reduced-motion: no-preference) {
  .veld--in {
    animation: calc-aankomen 0.24s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
}

/* Veldlabels spreken de signage-stem: class="veld__label signage"
   (utility in site.css) — hier alleen de layout-bijzonderheden. */
.veld--keuze legend.veld__label {
  padding: 0;
  margin-bottom: var(--maat-2);
}

.invoer {
  width: 100%;
  padding: 0.65em 0.85em;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.16s ease;
  caret-color: var(--kleur-accent);
}

.invoer::placeholder {
  color: var(--kleur-tekst-zacht);
  opacity: 1;
}

.invoer:hover {
  border-color: var(--kleur-tekst-zacht);
}

.invoer:focus {
  border-color: var(--kleur-accent);
}

.invoer--tekstvak {
  min-height: 9.5rem; /* de vooringevulde samenvatting past zonder scrollen */
  resize: vertical;
}

/* Nummervelden: spinners onderdrukken, tabellaire cijfers. */
input[type="number"].invoer {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

input[type="number"].invoer::-webkit-outer-spin-button,
input[type="number"].invoer::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Select met eigen chevron (inline SVG, lijnstijl). */
.select-omhulsel {
  position: relative;
}

.select-omhulsel select.invoer {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
}

.select-omhulsel__chevron {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--kleur-tekst-zacht);
  transition: color 0.16s ease;
}

.select-omhulsel:focus-within .select-omhulsel__chevron {
  color: var(--kleur-accent);
}

/* Eenheid-suffix (kg) in het invoerwel. */
.invoer-eenheid {
  position: relative;
}

.invoer-eenheid .invoer {
  padding-right: 3rem;
}

.invoer-eenheid__suffix {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
  pointer-events: none;
}

/* Segmenten (bestemming, formaat): chips in één hairline-band. */
.segmenten {
  display: flex;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  overflow: hidden;
}

.segment {
  flex: 1;
  min-width: 0;
}

.segment + .segment {
  border-left: 1px solid var(--kleur-lijn);
}

.segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.segment span {
  display: block;
  padding: 0.55em 0.5em;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--kleur-tekst-zacht);
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.segment span:hover {
  color: var(--kleur-tekst);
}

.segment input:checked + span {
  background: var(--kleur-vlak-hoog);
  color: var(--kleur-accent-fel);
}

.segment input:focus-visible + span {
  outline: 2px solid var(--kleur-accent);
  outline-offset: -2px;
}

/* Schakelaar "buiten kantooruren" (role=switch). */
.veld--schakel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--maat-3);
}

.veld--schakel__tekst {
  display: grid;
  gap: var(--maat-1);
}

.schakel {
  position: relative;
  width: 46px;
  height: 26px;
  flex: none;
  padding: 0;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-rond);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.schakel__knop {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-rond);
  background: var(--kleur-tekst-zacht);
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.schakel[aria-checked="true"] {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
}

.schakel[aria-checked="true"] .schakel__knop {
  background: var(--kleur-accent-contrast);
  transform: translateX(20px);
}

/* Hints en fouten. */
.veld-hint {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.veld-hint[hidden],
.veld-fout[hidden] {
  display: none;
}

.veld-fout {
  font-size: 0.875rem;
  color: var(--kleur-fout);
}

.veld--fout .invoer,
.veld--fout .segmenten {
  border-color: var(--kleur-fout);
}

/* Geldig-staat (nu alleen het e-mailveld): gedempte salie-rand. */
.veld--ok .invoer {
  border-color: var(--kleur-ok);
}

/* --- adreskeuze: het invoerveld met suggestielijst ------------------------
   Eén zwevende laag, dus: --kleur-vlak-hoog met --schaduw (de enige twee
   tokens die daarvoor bestaan) en niets van een eigen kleurwereld. De
   gekozen regel draagt het violet dat de rest van de pagina ook als
   "hier gebeurt het" gebruikt.
   De lijst hangt absoluut ónder het veld en klapt niet mee in de layout: hij
   verschijnt en verdwijnt tussen twee toetsaanslagen door, en een formulier
   dat daarbij op en neer springt is onbruikbaar. Zonder JavaScript is deze
   hele laag er niet (de <ul> blijft leeg en [hidden]). */
.adreskeuze {
  position: relative;
}

.adreslijst {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + var(--maat-1));
  margin: 0;
  padding: var(--maat-1);
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kleur-vlak-hoog);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

.adreslijst[hidden] {
  display: none;
}

.adreslijst__optie {
  padding: 0.5em 0.65em;
  border-radius: var(--radius-klein);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--kleur-tekst);
  cursor: pointer;
}

/* Muis en toetsenbord wijzen dezelfde regel op dezelfde manier aan — een
   lijst met twee soorten "actief" laat je twee keer kijken. */
.adreslijst__optie:hover,
.adreslijst__optie--actief {
  background: var(--kleur-tint);
  color: var(--kleur-accent-fel);
}

/* Gekozen: het veld draagt de actiekleur, zoals elk afgerond onderdeel op
   deze pagina. Geen vinkje erbij — de ingevulde regel ís het bewijs. */
.adreskeuze--gekozen .invoer {
  border-color: var(--kleur-accent);
}

.adres-melding {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.adres-melding[hidden] {
  display: none;
}

.calc-vorm__actie {
  margin-top: var(--maat-4);
  padding-top: var(--maat-4);
  border-top: 1px solid var(--kleur-lijn);
}

.calc-vorm__knop {
  width: 100%;
  justify-content: center;
}

/* --- uitkomstpaneel -------------------------------------------------------- */

.calc-uitkomst {
  position: relative;
  overflow: hidden;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: clamp(var(--maat-4), 3vw, var(--maat-5));
  min-height: 20rem;
  scroll-margin-top: 5.5rem; /* scrollIntoView landt niet onder de sticky kop */
}

/* Op breed scherm reist het paneel mee (ná de basisregel hierboven: die
   zet position: relative en zou een eerdere sticky-declaratie overrulen). */
@media (min-width: 60rem) {
  .calc-uitkomst {
    position: sticky;
    top: 5.5rem; /* onder de sticky site-kop */
  }
}

/* De natriumgloed gaat aan zodra er een prijs onder het licht staat. */
.calc-uitkomst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    28rem 16rem at 80% -14%,
    rgba(109, 40, 217, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.calc-uitkomst[data-staat="resultaat"]::before {
  opacity: 1;
}

.calc-uitkomst > * {
  position: relative;
}

/* Vier states; er is er altijd precies één zichtbaar. */
.calc-staat {
  display: none;
}

.calc-uitkomst[data-staat="leeg"] .calc-staat--leeg,
.calc-uitkomst[data-staat="bezig"] .calc-staat--bezig,
.calc-uitkomst[data-staat="resultaat"] .calc-staat--resultaat,
.calc-uitkomst[data-staat="maatwerk"] .calc-staat--maatwerk {
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
}

@media (prefers-reduced-motion: no-preference) {
  .calc-uitkomst[data-staat="leeg"] .calc-staat--leeg,
  .calc-uitkomst[data-staat="bezig"] .calc-staat--bezig,
  .calc-uitkomst[data-staat="resultaat"] .calc-staat--resultaat,
  .calc-uitkomst[data-staat="maatwerk"] .calc-staat--maatwerk {
    animation: calc-aankomen 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
}

.ruit {
  width: 9px;
  height: 9px;
  background: var(--kleur-accent);
  transform: rotate(45deg);
}

.calc-staat__kop {
  font-size: 1.5rem;
}

.calc-staat__tekst {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
  max-width: 30em;
}

/* Bezig: de weg schuift sneller onder je door dan in rust. */
.calc-staat--bezig {
  min-height: 14rem;
  align-content: center;
  justify-items: stretch;
}

.markeringslijn--rijdt {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .markeringslijn--rijdt::before,
  .markeringslijn--rijdt::after {
    animation-duration: 2.4s;
  }
}

.calc-staat__tekst--bezig {
  justify-self: center;
}

/* Resultaat: het meter-moment (label spreekt de signage-stem, zie site.css). */
.calc-bedrag {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-top: calc(-1 * var(--maat-2));
}

.calc-bedrag__vanaf {
  font-size: 1.0625rem;
  color: var(--kleur-tekst-zacht);
}

.calc-bedrag__waarde {
  font-size: clamp(2.4rem, 2.2vw + 1.6rem, 3.25rem);
  font-weight: 620;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--kleur-tekst);
  font-variant-numeric: tabular-nums;
}

.calc-regels {
  width: 100%;
  margin-top: var(--maat-2);
}

.calc-regels li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--maat-3);
  padding-block: 0.55rem;
  border-top: 1px solid var(--kleur-lijn);
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .calc-regels li {
    animation: calc-aankomen 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--vertraging, 0s);
  }
}

.calc-regel__label {
  color: var(--kleur-tekst-zacht);
}

.calc-regel__bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-disclaimers {
  display: grid;
  gap: var(--maat-1);
  margin-top: var(--maat-2);
}

.calc-disclaimers:empty {
  display: none;
}

.calc-disclaimers li {
  position: relative;
  padding-left: 15px;
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.calc-disclaimers li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--kleur-accent);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .calc-disclaimers li,
  .calc-staat--resultaat .calc-stil,
  .calc-cta {
    animation: calc-aankomen 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--vertraging, 0s);
  }
}

/* De stille regel: klein, zacht, zonder enige nadruk. */
.calc-stil {
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
}

.calc-cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--maat-2);
}

.calc-uitkomst[data-lead="open"] .calc-cta,
.calc-uitkomst[data-lead="succes"] .calc-cta {
  display: none;
}

.calc-maatwerk__detail {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.calc-maatwerk__detail[hidden] {
  display: none;
}

/* --- offerteformulier ------------------------------------------------------ */

.calc-lead {
  display: none;
  margin-top: var(--maat-4);
  padding-top: var(--maat-4);
  border-top: 1px solid var(--kleur-lijn);
}

.calc-uitkomst[data-lead="open"] .calc-lead,
.calc-uitkomst[data-lead="succes"] .calc-lead {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .calc-uitkomst[data-lead="open"] .calc-lead,
  .calc-uitkomst[data-lead="succes"] .calc-lead {
    animation: calc-aankomen 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
}

.calc-uitkomst[data-lead="succes"] .lead-vorm {
  display: none;
}

.calc-lead__kop {
  font-size: 1.25rem;
  margin-bottom: var(--maat-2);
}

.calc-lead .veld {
  margin-top: var(--maat-3);
}

.calc-lead__verstuur {
  width: 100%;
  justify-content: center;
  margin-top: var(--maat-4);
}

.lead-fout {
  margin-top: var(--maat-2);
  font-size: 0.9375rem;
  color: var(--kleur-fout);
}

.lead-fout[hidden] {
  display: none;
}

/* Honeypot: onzichtbaar voor mensen, buiten de tab-order, wél in de DOM. */
.hp-veld {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Succes: de weg loopt door, de belofte is warm (accent-fel op vlak, 7,3:1). */
.lead-succes {
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
}

.lead-succes[hidden] {
  display: none;
}

.lead-succes__lijn {
  width: 100%;
}

.lead-succes__belofte {
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--kleur-accent-fel);
}

/* --- gedeeld aankomst-keyframe -------------------------------------------- */

@keyframes calc-aankomen {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --- responsief ------------------------------------------------------------ */

@media (max-width: 37.5rem) {
  .calc {
    padding-block: var(--maat-5) 0;
  }

  .calc__kop {
    margin-bottom: var(--maat-4);
  }

  .calc-uitkomst {
    min-height: 0;
  }
}