/* ==========================================================================
   DZH Transport — offerte.css
   Het volledige offerteformulier per dienst (stap 2 achter de calculator).

   Ligt bovenop site.css (tokens, knoppen, typografie) en calculator.css
   (.veld, .invoer, .segmenten, .select-omhulsel, .hp-veld): dit bestand voegt
   alléén toe wat een lang formulier nodig heeft en dat de calculator niet
   kent — secties, twee kolommen op breed scherm, de kavelregels, de
   RDW-melding en het bewaarblok. Geen nieuwe kleurwaarden: alles komt uit de
   --kleur-*-tokens.

   De ordenende gedachte: een formulier van dertig vragen mag geen muur zijn.
   Daarom staat het in kaarten met een kop, staan korte velden met z'n tweeën
   naast elkaar zodra er ruimte is, en staat de sectie met de
   dienstspecifieke vragen bovenaan — dat is waar de bezoeker voor komt.
   ========================================================================== */

.omslag--smal {
  max-width: 58rem;
}

.offerte {
  padding-block: var(--maat-6) var(--maat-7);
}

.offerte__kop-blok {
  max-width: 42rem;
  margin-bottom: var(--maat-5);
}

.offerte__kop {
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.875rem);
  margin-block: var(--maat-2);
}

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

/* --- de berekening uit stap 1 --------------------------------------------- */
/* Wat de bezoeker net op het scherm zag, blijft in beeld: hij vult dit
   formulier in omdát daar een bedrag stond. */

.offerte-berekening {
  margin-bottom: var(--maat-5);
  padding: clamp(var(--maat-3), 2.4vw, var(--maat-4));
  background: var(--kleur-tint);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

.offerte-berekening__kop {
  font-size: 0.8125rem;
  margin-bottom: var(--maat-2);
}

.offerte-berekening__bedrag {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--kleur-accent-fel);
}

.offerte-berekening__lijst {
  display: grid;
  gap: var(--maat-1);
  margin-block: var(--maat-3) var(--maat-2);
}

.offerte-berekening__regel {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--maat-2);
  font-size: 0.9375rem;
  padding-block: 0.15rem;
  border-top: 1px solid var(--kleur-lijn);
}

.offerte-berekening__regel:first-child {
  border-top: 0;
}

.offerte-berekening__regel dt {
  color: var(--kleur-tekst-zacht);
}

.offerte-berekening__regel dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- meldingsregel boven het formulier ------------------------------------ */

.offerte-melding {
  margin-bottom: var(--maat-4);
  padding: var(--maat-3);
  border-radius: var(--radius-klein);
  border: 1px solid var(--kleur-lijn);
  font-size: 0.9375rem;
}

.offerte-melding--fout {
  border-color: var(--kleur-fout);
  color: var(--kleur-fout);
}

.offerte-melding--ok {
  border-color: var(--kleur-ok);
  color: var(--kleur-ok);
}

/* --- secties --------------------------------------------------------------- */

.offerte-sectie {
  margin: 0 0 var(--maat-4);
  padding: clamp(var(--maat-3), 2.4vw, var(--maat-5));
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  min-width: 0;
}

/* Een <legend> is geen gewoon kind: hij hangt in de rand van de fieldset.
   Daarom staat de velden-grid in een eigen wrapper eronder. */
.offerte-sectie__kop {
  padding: 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--kleur-tekst);
}

.offerte-sectie__velden {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--maat-3) var(--maat-4);
  margin-top: var(--maat-2);
}

@media (min-width: 44rem) {
  .offerte-sectie__velden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offerte-sectie__velden > .veld--breed,
  .offerte-sectie__velden > .offerte-regels {
    grid-column: 1 / -1;
  }
}

/* .veld draagt in calculator.css een margin-top voor de gestapelde
   calculatorkolom; in een grid doet de gap dat werk al. */
.offerte-sectie__velden > .veld,
.offerte-sectie__velden > .offerte-regels {
  margin-top: 0;
  align-content: start;
}

/* Veldlabels spreken hier NIET de signage-stem (Archivo, kapitalen, wijd
   gespatieerd) zoals op de calculator. Daar zijn de labels twee woorden
   ("Van", "Naar"); hier zijn het hele vragen — "WIE KUNNEN WIJ BELLEN OP HET
   OPHAALADRES?" leest in kapitalen als geschreeuw en kost op een smal scherm
   ook nog een extra regel. Gewone zinsvorm, één stapje zwaarder dan de tekst
   eromheen. */
.offerte-vorm .veld__label {
  font-family: var(--font-tekst);
  font-size: 0.9375rem;
  font-weight: 560;
  font-stretch: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kleur-tekst);
  line-height: 1.35;
}

/* Tekstvakken zijn op de calculator hoog omdat de samenvatting erin past;
   hier staan er zeven onder elkaar en telt elke centimeter. */
.offerte-vorm .invoer--tekstvak {
  min-height: 5rem;
}

.veld__verplicht {
  margin-left: 0.35em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--kleur-accent-fel);
  text-transform: none;
}

/* Ja/nee is een keuze uit twee, geen bandbreedte van een halve pagina. */
.veld--keuze .segmenten {
  max-width: 15rem;
}

/* Bedrag: het euroteken vóór het bedrag (NL-notatie), niet erachter. */
.invoer-eenheid--voor .invoer {
  padding-right: 0.85em;
  padding-left: 2.1rem;
}

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

/* Tijdvak: van/tot naast elkaar, met eigen kleine labels. */
.tijdvak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--maat-2);
}

.tijdvak__helft {
  display: grid;
  gap: var(--maat-1);
  min-width: 0;
}

.tijdvak__label {
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
}

.invoer--bestand {
  padding: 0.5em 0.6em;
  font-size: 0.9375rem;
}

.invoer--kenteken {
  max-width: 12rem;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- RDW-uitkomst ---------------------------------------------------------- */
/* Gevonden voertuig: stil bevestigend. Niet WAM-verzekerd: opvallend, maar
   nooit blokkerend — de RDW loopt achter en een pas verzekerde auto mag geen
   aanvraag kosten. */

.offerte-rdw {
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.offerte-rdw[hidden] {
  display: none;
}

.offerte-rdw--gevonden {
  color: var(--kleur-tekst);
}

.offerte-rdw--waarschuwing {
  padding: var(--maat-2) var(--maat-3);
  border: 1px solid var(--kleur-fout);
  border-radius: var(--radius-klein, 5px);
  background: var(--kleur-vlak-hoog);
  color: var(--kleur-fout);
}

/* --- herhaalbare regels (kavels) ------------------------------------------- */

.offerte-regels {
  display: grid;
  gap: var(--maat-2);
  min-width: 0;
}

.offerte-regels__lijst {
  display: grid;
  gap: var(--maat-3);
}

.offerte-regel {
  margin: 0;
  padding: var(--maat-3);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  background: var(--kleur-achtergrond);
  min-width: 0;
}

.offerte-regel__kop {
  padding: 0 0.4em;
  margin-left: -0.4em;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

/* auto-fit met een minimum van 7rem: op 360 px staat elk kolomveld onder
   elkaar, op een breed scherm staan de vijf kavelvelden op één regel. */
.offerte-regel__velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--maat-2) var(--maat-3);
}

.offerte-regel__velden > .veld {
  margin-top: 0;
  gap: var(--maat-1);
}

/* Kolomlabels staan vijf keer naast elkaar: kleiner en gedempt, zodat het
   oog de rij als één regel leest en niet als vijf losse vragen. */
.offerte-vorm .offerte-regel__velden .veld__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
}

.offerte-regel__velden .invoer {
  padding: 0.45em 0.6em;
  font-size: 0.9375rem;
}

.offerte-regel__weg,
.offerte-regels__erbij {
  justify-self: start;
}

.offerte-regel__weg {
  margin-top: var(--maat-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-tekst);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.offerte-regel__weg:hover {
  color: var(--kleur-fout);
}

.offerte-regel__weg[hidden],
.offerte-regels__erbij[hidden] {
  display: none;
}

/* --- acties ---------------------------------------------------------------- */

.offerte-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maat-3);
  margin-top: var(--maat-5);
}

.offerte-acties__status {
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.offerte-acties__status:empty {
  display: none;
}

/* --- bewaarblok ------------------------------------------------------------ */
/* Een halfingevuld formulier mag niet verdampen: hier staat de link waarmee
   de bezoeker later verdergaat. */

.offerte-bewaar {
  margin-top: var(--maat-5);
  padding: clamp(var(--maat-3), 2.4vw, var(--maat-4));
  border: 1px dashed var(--kleur-lijn);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.offerte-bewaar__kop {
  font-size: 0.8125rem;
  color: var(--kleur-tekst);
  margin-bottom: var(--maat-2);
}

.offerte-bewaar__link {
  margin-block: var(--maat-2);
  font-family: var(--font-display);
  overflow-wrap: anywhere;
}

.offerte-bewaar__link a {
  color: var(--kleur-accent-fel);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offerte-bewaar__noot {
  font-size: 0.8125rem;
}

/* --- klaar / verlopen ------------------------------------------------------ */

.offerte-klaar {
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
  max-width: 40rem;
  padding-block: var(--maat-5);
}

.offerte-klaar__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
  margin-top: var(--maat-2);
}

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

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

  .offerte-berekening__regel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .offerte-acties .knop {
    width: 100%;
    justify-content: center;
  }
}

/* Blok 3: de verstuurde offerte (/offerte/<token>, template site/aanbod.html).
   De kern (.offerte-kern) komt uit website/offerte/render.py en is dezelfde
   HTML als in de mail; hier krijgt hij alleen ruimte en een tabelopmaak. */
.aanbod-status {
  font-weight: 600;
  margin: 0 0 1rem;
}
.aanbod-status--verlopen,
.aanbod-status--afgewezen,
.aanbod-status--vervangen {
  color: var(--kleur-tekst-stil, #5a5a5a);
}
.aanbod-dank {
  background: var(--kleur-tint, #f1edfc);
  border: 1px solid var(--kleur-lijn, #e5e0f3);
  border-radius: var(--radius, 8px);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
}
.offerte-kern h2 {
  margin-top: 0;
}
.offerte-kern small {
  font-weight: 400;
  color: var(--kleur-tekst-stil, #5a5a5a);
}
.offerte-opbouw {
  border-collapse: collapse;
  margin: 1rem 0;
}
.offerte-opbouw caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.25rem;
}
.offerte-opbouw td {
  padding: 0.2rem 1.5rem 0.2rem 0;
}
.offerte-opbouw td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.offerte-opbouw tr:last-child td {
  font-weight: 700;
  border-top: 1px solid currentColor;
}
.aanbod .offerte-knop {
  display: none; /* op de pagina zelf is de knop het akkoordformulier hieronder */
}
.aanbod-artikelen td {
  padding: 0.2rem 1rem 0.2rem 0;
  vertical-align: top;
}
.aanbod-acties {
  margin-top: 2rem;
  border-top: 1px solid var(--kleur-lijn, #ddd);
  padding-top: 1rem;
}
.aanbod-form {
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.aanbod-form label {
  display: grid;
  gap: 0.25rem;
}
.aanbod-form input[type="text"],
.aanbod-form textarea {
  font: inherit;
  font-size: 16px;
  padding: 0.5rem;
  min-height: 44px;
}
.aanbod-vink {
  display: block;
}
.aanbod-afwijzen summary {
  cursor: pointer;
  color: var(--kleur-tekst-stil, #5a5a5a);
}
@media print {
  .site-kop,
  .site-voet,
  .aanbod-acties,
  .aanbod-print,
  .cijferstrook,
  .taalkeuze {
    display: none !important;
  }
  .aanbod .omslag {
    max-width: none;
  }
}

/* Blok 3c: de klantpagina /mijn — kop met naam en uitloggen, tabbladen,
   lijsten. Hergebruikt .aanbod-form voor formulieren en .offerte-regels voor de
   artikelkaarten (zelfde markup als het offerteformulier, dus offerte.js werkt). */
.mijn-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.mijn-kop__wie {
  margin: 0;
  font-weight: 600;
}
.mijn-kop__adres {
  display: block;
  font-weight: 400;
  color: var(--kleur-tekst-stil, #5a5a5a);
  font-size: 0.9rem;
}
.mijn-kop__uit {
  margin: 0;
}
.mijn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--kleur-lijn, #ddd);
}
.mijn-tabs__tab {
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.mijn-tabs__tab--aan {
  border-bottom-color: var(--kleur-accent, #ffb400);
  font-weight: 600;
}
.mijn-lijst {
  padding-left: 1.2rem;
}
.mijn-lijst li {
  margin: 0.35rem 0;
}
.mijn-kaart {
  border: 1px solid var(--kleur-lijn, #ddd);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.mijn-kaart__status {
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.mijn-kaart__meta {
  color: var(--kleur-tekst-stil, #5a5a5a);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.mijn-code {
  font-family: "Overpass Mono", ui-monospace, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
.mijn-adresblok {
  background: var(--kleur-tint, #f1edfc);
  border: 1px solid var(--kleur-lijn, #e5e0f3);
  border-radius: var(--radius, 8px);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  white-space: pre-line;
}

/* Klantenpaneel fase 1, taak 6 — de schil (ontwerp §7.2): menu links op desktop
   (220 px) met de klant onderaan, inhoud maximaal 1080 px; op mobiel één kolom
   met een vaste onderbalk van vijf items. De kaart "Nu" is het enige donkere vlak
   en de enige grote schaduw (§7.1). Tokens uit site.css, niets nieuws verzonnen. */
.mijn-schil {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--maat-5, 2.5rem);
  align-items: start;
}
.mijn-inhoud {
  min-width: 0;
  max-width: 1080px;
}
.mijn-menu {
  display: flex;
  flex-direction: column;
  gap: var(--maat-3, 1rem);
  position: sticky;
  top: var(--maat-4, 1.5rem);
  min-width: 0;
}
.mijn-menu__merk {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mijn-menu__ruit {
  width: 10px;
  height: 10px;
  background: var(--kleur-accent, #6d28d9);
  transform: rotate(45deg);
  display: inline-block;
  flex: none;
}
.mijn-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mijn-menu__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius, 8px);
  color: var(--kleur-tekst, #141020);
  text-decoration: none;
}
.mijn-menu__item:hover {
  background: var(--kleur-vlak, #f8f6fe);
}
.mijn-menu__item--aan {
  background: var(--kleur-tint, #f1edfc);
  color: var(--kleur-accent-fel, #5b21b6);
  font-weight: 600;
}
.mijn-menu__klant {
  margin-top: auto;
  color: var(--kleur-tekst-zacht, #565068);
  font-size: 0.9rem;
  line-height: 1.35;
  display: grid;
  gap: 0.35rem;
}
.mijn-menu__klant strong {
  color: var(--kleur-tekst, #141020);
  overflow-wrap: anywhere;
}
.mijn-menu__klant form {
  margin: 0.35rem 0 0;
}
.mijn-onderbalk {
  display: none;
}
.mijn-nu {
  background: var(--kleur-diep, #160f2b);
  color: var(--kleur-diep-tekst, #efebfa);
  border-radius: var(--radius, 8px);
  padding: var(--maat-4, 1.5rem) var(--maat-4, 1.5rem) var(--maat-3, 1rem);
  box-shadow: var(--schaduw, 0 18px 44px rgba(22, 15, 43, 0.16));
  margin: 0 0 var(--maat-4, 1.5rem);
  min-width: 0;
}
.mijn-nu__label {
  margin: 0 0 0.2rem;
  color: var(--kleur-diep-zacht, rgba(239, 235, 250, 0.72));
  font-size: 0.9rem;
}
.mijn-nu__titel {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--kleur-diep-tekst, #efebfa);
  overflow-wrap: anywhere;
}
.mijn-nu__acties {
  display: flex;
  gap: var(--maat-2, 0.5rem);
  flex-wrap: wrap;
  padding-top: var(--maat-2, 0.5rem);
  margin-top: var(--maat-3, 1rem);
  border-top: 1px solid var(--kleur-diep-lijn, rgba(239, 235, 250, 0.16));
}
@media (max-width: 820px) {
  .mijn-schil {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 5.5rem;
  }
  .mijn-menu {
    display: none;
  }
  .mijn-onderbalk {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--kleur-achtergrond, #fff);
    border-top: 1px solid var(--kleur-lijn, #e5e0f3);
    padding: 0.35rem 0 max(0.35rem, env(safe-area-inset-bottom));
    z-index: 5;
  }
  .mijn-onderbalk a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--kleur-tekst-zacht, #565068);
    min-width: 0;
    text-align: center;
  }
  .mijn-onderbalk a[aria-current] {
    color: var(--kleur-accent-fel, #5b21b6);
    font-weight: 600;
  }
}