/* ============================================
   VitroWorks — Offerte form & multi-step wizard
   Loaded only on the offerte-aanvragen page (see $extraStyles).
   Reuses the shared .form-field / .radio-group / .radio-option rules
   from components.css; this file adds labels, steps, errors and the
   phone-only wizard behaviour.
   ============================================ */

.offerte-page {
  padding-block: var(--space-9);
  max-width: 560px;
}

/* Matches the article pages (see css/article.css). */
.offerte-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

/* The form column is narrower than the breadcrumb container above it;
   narrow the breadcrumbs to match so both share a left edge. */
.breadcrumbs:has(+ .offerte-page) .content-container {
  max-width: 560px;
}

.offerte-page__intro {
  color: var(--color-navy-soft);
  margin-bottom: var(--space-7);
}

/* ---- Form layout ---- */
.offerte-form__alert {
  background: #fdecec;
  border: 1px solid #f3b5b5;
  color: #8a1f1f;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
}

.form-step {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.form-step__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-5);
}

.form-field {
  margin-bottom: var(--space-5);
}

.form-field > label,
.radio-field > legend {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.radio-field {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.form-field input[aria-invalid="true"] {
  border-color: #d64545;
}

.form-field__error {
  color: #b3261e;
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
}

.form-field__hint {
  color: var(--color-navy-soft);
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
}

.offerte-form__privacy {
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
  margin-bottom: var(--space-6);
}

/* Explains the red asterisks once, at the end of the form / last step. */
.offerte-form__required-note {
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
  margin-bottom: var(--space-4);
}

.offerte-form__privacy a {
  text-decoration: underline;
}

.offerte-form__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The .btn author rule sets display:inline-flex, which beats the UA
   [hidden]{display:none} rule — so the hidden attribute alone won't hide
   these buttons (on desktop, or for no-JS users). Re-assert it here. */
.offerte-form__nav .btn[hidden] {
  display: none;
}

/* Desktop / no-JS group headings; hidden inside the overlay stepper. */
.offerte-section-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-5);
}

/* Per-step question titles only exist inside the overlay stepper. */
.form-step__title {
  display: none;
}

/* Start button (phones with JS only; unhidden by quote-form.js). */
.offerte-start {
  width: 100%;
  padding-block: var(--space-3);
  font-size: var(--fs-md);
}

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

/* Honeypot — kept in the layout (not display:none) but off-screen, so
   bots that skip display:none still fill it and get flagged. */
.offerte-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Full-screen overlay stepper (phones only) ----
   On narrow viewports JS collapses the form behind the start button
   (.is-collapsed) and opens it as a fixed full-screen overlay
   (.is-overlay) showing one short step per screen. Without JS, or on
   wider screens, the form stays one plain page. */

.offerte-form.is-collapsed {
  display: none;
}

body.offerte-overlay-open {
  overflow: hidden;
}

.offerte-form.is-overlay {
  position: fixed;
  inset: 0;
  /* Below the legal overlay (600) so the privacy policy opens on top. */
  z-index: 500;
  background: var(--color-white, #fff);
  display: flex;
  flex-direction: column;
}

/* Chrome: progress bar + step counter + close */
.offerte-form__chrome[hidden] {
  display: none;
}

.offerte-form__bar {
  height: 4px;
  background: #e6ebee;
}

.offerte-form__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-cyan);
  transition: width 0.25s ease;
}

.offerte-form__chrome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
}

.offerte-form__overlay-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin: 0;
}

.offerte-form__progress {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-navy-soft);
  margin: 0;
}

.offerte-form__close {
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  color: var(--color-navy);
  cursor: pointer;
}

/* Scrollable step area between chrome and nav */
.offerte-form.is-overlay .offerte-form__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6) var(--space-5);
}

.offerte-form.is-overlay .offerte-section-title {
  display: none;
}

.offerte-form.is-overlay .form-step {
  display: none;
}

.offerte-form.is-overlay .form-step.is-active {
  display: block;
}

.offerte-form.is-overlay .form-step__title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-5);
}

.offerte-form.is-overlay .radio-field > legend {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

/* Radio choices become large tappable cards */
.offerte-form.is-overlay .radio-group {
  flex-direction: column;
  gap: var(--space-3);
}

/* Two-option questions stay on one row, so a step with several questions
   fits the screen. flex-wrap keeps very long labels from overflowing on
   narrow phones — they drop to two rows rather than being squeezed. */
.offerte-form.is-overlay .radio-group--pair {
  flex-direction: row;
  flex-wrap: wrap;
}

.offerte-form.is-overlay .radio-option {
  border: 2px solid #dfe5e9;
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--fs-md);
  gap: var(--space-3);
  cursor: pointer;
  align-items: center;
  line-height: 1.25;
}

/* Side-by-side cards get less inner padding than the full-width ones and a
   slightly smaller label, so both options fit half a phone screen. */
.offerte-form.is-overlay .radio-group--pair .radio-option {
  font-size: var(--fs-sm);
  gap: var(--space-2);
  padding-inline: var(--space-3);
}

.offerte-form.is-overlay .radio-option:has(input:checked) {
  border-color: var(--color-cyan);
}

/* Privacy note: only on the final step of the overlay (JS sets .is-last);
   always visible in the plain single-page form. */
.offerte-form.is-overlay .offerte-form__privacy {
  display: none;
}

.offerte-form.is-overlay.is-last .offerte-form__privacy {
  display: block;
}

/* ---- Compact, viewport-adaptive spacing inside the overlay ----
   Every vertical margin/padding scales with the small viewport height
   (svh) between a compressed minimum and the regular value, so a step
   always fits a short phone screen without scrolling. Each rule keeps a
   plain fallback line for browsers without svh support; the body stays
   overflow-y:auto as a last resort. */
.offerte-form.is-overlay .offerte-form__body {
  padding-block: var(--space-4);
  padding-block: clamp(var(--space-3), 2.5svh, var(--space-6));
}

.offerte-form.is-overlay .form-step__title {
  margin-bottom: var(--space-4);
  margin-bottom: clamp(var(--space-3), 2.5svh, var(--space-5));
}

.offerte-form.is-overlay .form-field {
  margin-bottom: var(--space-4);
  margin-bottom: clamp(var(--space-2), 2svh, var(--space-5));
}

.offerte-form.is-overlay .form-field input[type="text"],
.offerte-form.is-overlay .form-field input[type="email"],
.offerte-form.is-overlay .form-field input[type="tel"] {
  padding-block: var(--space-2);
  padding-block: clamp(var(--space-2), 1.5svh, var(--space-3));
}

/* The optional free-text box: a couple of lines is enough on a phone, and
   it scrolls internally rather than pushing the step past one screen. */
.offerte-form.is-overlay .form-field textarea {
  padding-block: var(--space-2);
  min-height: 0;
  height: clamp(56px, 12svh, 110px);
}

.offerte-form.is-overlay .radio-field {
  margin-bottom: var(--space-4);
  margin-bottom: clamp(var(--space-2), 2svh, var(--space-5));
}

.offerte-form.is-overlay .radio-field > legend {
  margin-bottom: var(--space-3);
  margin-bottom: clamp(var(--space-2), 1.5svh, var(--space-4));
}

.offerte-form.is-overlay .radio-group {
  gap: var(--space-2);
  gap: clamp(var(--space-2), 1.2svh, var(--space-3));
}

.offerte-form.is-overlay .radio-option {
  padding: var(--space-3) var(--space-4);
  padding: clamp(var(--space-2), 1.8svh, var(--space-4)) var(--space-4);
}

.offerte-form.is-overlay .offerte-form__privacy {
  margin-bottom: 0;
}

/* Bottom nav pinned under the scroll area */
.offerte-form.is-overlay .offerte-form__nav {
  border-top: 1px solid #e6ebee;
  padding: var(--space-4) var(--space-5);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  justify-content: space-between;
  flex-wrap: nowrap;
}

.offerte-form.is-overlay .offerte-form__nav .btn--primary {
  flex: 1;
}

/* Very short screens (old/small phones, landscape): tighten type and
   chrome further so the densest step still fits without scrolling.
   Placed after every base overlay rule so these overrides win. */
@media (max-height: 620px) {
  .offerte-form.is-overlay .offerte-form__chrome-row {
    padding-block: var(--space-1);
  }

  .offerte-form.is-overlay .offerte-form__body {
    padding-block: var(--space-2);
  }

  .offerte-form.is-overlay .form-step__title {
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
  }

  .offerte-form.is-overlay .form-field,
  .offerte-form.is-overlay .radio-field {
    margin-bottom: var(--space-3);
  }

  .offerte-form.is-overlay .radio-field > legend {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
  }

  .offerte-form.is-overlay .radio-option {
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
  }

  .offerte-form.is-overlay .form-field textarea {
    height: 52px;
  }

  .offerte-form.is-overlay .offerte-form__privacy,
  .offerte-form.is-overlay .offerte-form__required-note {
    font-size: 11px;
  }

  .offerte-form.is-overlay .offerte-form__required-note {
    margin-bottom: var(--space-2);
  }

  .offerte-form.is-overlay .offerte-form__nav {
    padding-block: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }
}

/* ---- Below-form contact/expectation copy ---- */
.offerte-page__extra {
  margin-top: var(--space-7);
}

.offerte-page__extra p {
  color: var(--color-navy-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.offerte-page__extra a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.offerte-page__note {
  font-size: var(--fs-xs) !important;
}

/* ---- Thank-you state ---- */
.offerte-thanks {
  padding-block: var(--space-6);
  max-width: 40ch;
}

.offerte-thanks__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.offerte-thanks__body {
  color: var(--color-navy-soft);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Offerte modal stepper (rebuild 2026-07) — .ofm
   The flow lives in a modal on every viewport: centered card on desktop
   and tablet, full-screen sheet on phones. Closed until JS adds .is-open;
   the noscript block on the page turns it into a plain in-page form.
   Earlier .offerte-form stepper styles above are retired with the old
   markup and no longer match anything.
   ========================================================================== */

.offerte-explain {
  max-width: 560px;
  margin: var(--space-5, 24px) 0 var(--space-6, 32px);
}

.offerte-explain__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
}

.offerte-explain__list {
  list-style: decimal;
  padding-left: 22px;
  margin-bottom: 20px;
  color: var(--color-navy-soft);
  display: grid;
  gap: 6px;
}

.offerte-explain__resume {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--color-navy-soft);
}

.ofm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800; /* above header (700), below nothing that matters here */
}

.ofm.is-open { display: block; }

/* Scroll lock while the modal is open. overflow:hidden alone is ignored
   by iOS Safari for touch scrolling, so the body is pinned with
   position:fixed — the JS stores the scroll offset in `top` on open and
   restores it on close. */
body.ofm-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.ofm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 27, 0.55);
}

.ofm__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  /* Vaste hoogte, geen max-height. De kaart hangt in het midden, dus een
     kaart die met de inhoud meegroeit duwt bij élke wijziging de knoppen
     onderaan weg: een stap verder, een foutmelding erbij, of de
     woonplaatskeuze die onder de postcode verschijnt. Met een vaste
     hoogte staan de balk bovenaan en de knoppen onderaan altijd op
     dezelfde plek en schuift alleen de inhoud ertussen. */
  height: min(86vh, 640px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(20, 24, 27, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Same centered card as desktop, with a slim rim of backdrop around
     it so it clearly reads as a modal. The cap uses dvh — the dynamic
     unit keeps the button bar above the browser's toolbar (100vh
     famously doesn't on iOS). */
  .ofm__dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 44px);
    border-radius: 12px;
  }

  @supports (height: 100dvh) {
    .ofm__dialog { height: calc(100dvh - 20px); }
  }

  .ofm__nav {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

.ofm__chrome {
  flex: none;
  border-bottom: 1px solid rgba(20, 24, 27, 0.08);
}

.ofm__bar {
  height: 4px;
  background: rgba(18, 165, 212, 0.15);
}

.ofm__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-cyan);
  transition: width 0.25s ease;
}

.ofm__chrome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.ofm__progress {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-navy-soft);
  margin: 0;
}

.ofm__close {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-navy-soft);
  cursor: pointer;
  padding: 2px 6px;
}

.ofm__close:hover { color: var(--color-navy); }

.ofm__alert {
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #fdecea;
  color: #b3261e;
  font-size: var(--fs-sm);
}

.ofm__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* modal scroll never chains to the page */
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px;
}

.ofm__step { display: none; border: 0; padding: 0; margin: 0; }
.ofm__step.is-active { display: block; }

.ofm__q {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin: 0 0 18px;
}

/* Choice buttons: the radio hides, the label is the button. */
.ofm__choices {
  display: grid;
  gap: 10px;
}

.ofm__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ofm__choice > span {
  display: block;
  padding: 14px 18px;
  border: 1.5px solid rgba(20, 24, 27, 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

/* Noot binnen een keuze ("Iets anders"). Blok, zodat hij onder het woord
   valt in plaats van erachter, en lichter zodat de keuze zelf de regel
   blijft die je leest. Geen eigen rand of achtergrond: hij hoort bij de
   knop eromheen, hij is er geen tweede naast. */
.ofm__choice-hint {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular, 400);
  line-height: 1.45;
  color: var(--color-navy-soft);
}

.ofm__choice:hover > span { border-color: var(--color-cyan); }

.ofm__choice input:checked + span {
  border-color: var(--color-cyan);
  background: rgba(18, 165, 212, 0.08);
}

.ofm__choice input:focus-visible + span {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

.ofm__consent { margin-top: 18px; }

.ofm__consent-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-navy);
  cursor: pointer;
}

.ofm__consent-label input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.ofm__privacy {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
}

/* Postcode: het invoerveld is smal (vier cijfers is vier cijfers) en de
   woonplaats verschijnt eronder — als bevestiging bij één treffer, als
   keuzeknoppen zodra er meerdere aan die postcode hangen. Geen display
   op .ofm__place: het hidden-attribuut moet blijven werken. */
/* Alleen het viercijferveld is smal. Zonder deze afbakening ving de regel
   ook het zoekveld eronder, dat juist de volle breedte nodig heeft. */
.ofm__postcode [data-ofm-postcode-plain] input { max-width: 8em; }

.ofm__place { margin-top: 4px; }

.ofm__place-echo {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

.ofm__place-title {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--color-navy-soft);
}

.ofm__choices--klein { gap: 8px; }

.ofm__choices--klein .ofm__choice > span {
  padding: 10px 14px;
  font-size: var(--fs-sm);
}

.ofm__pair {
  display: grid;
  gap: 0 14px;
}

@media (min-width: 480px) {
  .ofm__pair { grid-template-columns: 1fr 1fr; }
}

.ofm__extra summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-cyan);
  margin: 6px 0 10px;
}

.ofm__required-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
}

/* --- Zoeken op postcode of gemeente --------------------------------------
   Dit is stap 3 zelf, geen laag erover. De lijst krijgt een eigen maximum en
   scrollt binnenin, zodat de vraag en het zoekveld erboven blijven staan waar
   ze staan terwijl de resultaten veranderen. */
.ofm__search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ofm__search[hidden] { display: none; }

.ofm__search-label {
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

/* Het veld en zijn wisknop delen één doos, zodat de knop binnen de rand
   valt in plaats van ernaast. */
.ofm__search-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* Ruimte rechts vrijhouden, anders loopt een lange naam onder het kruisje
   door ("9040 Sint-Amandsberg" is breed genoeg om dat te halen). */
.ofm__search-field .ofm__search-input { padding-right: 44px; }

.ofm__search-clear {
  position: absolute;
  right: 0;
  /* 44px raakvlak, maar visueel niet meer dan het kruisje zelf. */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--color-navy-soft);
  cursor: pointer;
}

.ofm__search-clear[hidden] { display: none; }
.ofm__search-clear:hover { color: var(--color-navy); }
.ofm__search-clear svg { width: 16px; height: 16px; }

.ofm__search-input {
  flex: none;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(20, 24, 27, 0.15);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-navy);
}

.ofm__search-input:focus-visible {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(18, 165, 212, 0.18);
}

.ofm__search-hint {
  flex: none;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-navy-soft);
}

.ofm__search-list {
  /* Terugval voor browsers zonder :has() — het blok hieronder vervangt dit
     door een hoogte die de navigatiebalk wél meetelt. */
  max-height: 44vh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrollt nooit door naar de dialoog */
  -webkit-overflow-scrolling: touch;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* De lijst mag niet met vh gemeten worden. vh is de hoogte van het vénster
   en weet niets van de stappenbalk erboven, de vraag, het zoekveld, of de
   75 px navigatie eronder. Gemeten op 375 breed: bij 700 hoog paste het net,
   bij 560 en 480 liep de lijst ónder de navigatie door én ging het lichaam
   óók scrollen — twee scrollgebieden over elkaar, en dan beweegt bij het
   slepen het verkeerde.
   Daarom laten we flex de hoogte bepalen: de stap vult het lichaam, en de
   lijst krijgt wat er na de vraag en het veld overblijft. Het lichaam houdt
   zo één scrollgebied, en dat kan per definitie niet voorbij de navigatie
   komen. min-height:0 op elke schakel, anders weigert een flexitem kleiner
   te worden dan zijn inhoud en lekt de hoogte er alsnog uit. */
.ofm__body:has(> [data-ofm-step="3"].is-active) {
  display: flex;
  flex-direction: column;
}

.ofm__body:has(> [data-ofm-step="3"].is-active) [data-ofm-step="3"].is-active,
.ofm__body:has(> [data-ofm-step="3"].is-active) .ofm__postcode,
.ofm__body:has(> [data-ofm-step="3"].is-active) .ofm__search {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Laag venster (telefoon met open toetsenbord): haal de ruimte weg waar ze
   het minst kost, zodat de lijst zijn twee rijen krijgt zonder onder de
   navigatie te schuiven. De bestaande 620px-regel verderop gaat over de
   oude .offerte-form-overlay en raakt deze dialoog niet. */
@media (max-height: 620px) {
  .ofm__body { padding-block: 12px; }
}

.ofm__body:has(> [data-ofm-step="3"].is-active) .ofm__search-list {
  flex: 1;
  /* Twee rijen is de bodem. Op een heel laag venster (telefoon met open
     toetsenbord) hield "wat er overblijft" er 9 px van over, en dat is geen
     lijst meer. Past dat niet, dan scrollt het lichaam alsnog — vervelend,
     maar minder erg dan een lijst die je niet kan lezen. */
  min-height: 88px;
  max-height: none;
}

.ofm__search-option {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  color: var(--color-navy);
  cursor: pointer;
}

/* De toetsenbordcursor en de muisaanwijzer krijgen dezelfde markering: twee
   verschillende "hier sta je" is er een te veel. */
.ofm__search-option:hover,
.ofm__search-option.is-active {
  background: rgba(18, 165, 212, 0.1);
}

.ofm__search-option__pc {
  font-variant-numeric: tabular-nums;
  color: var(--color-navy-soft);
  margin-right: 8px;
}

/* Knop onder het postcodeveld; alleen zichtbaar mét JavaScript. */
.ofm__search-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(20, 24, 27, 0.15);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-navy-soft);
  cursor: pointer;
}

.ofm__search-button:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.ofm__search-button svg { width: 15px; height: 15px; flex: none; }

.ofm__nav {
  flex: none;
  display: flex;
  justify-content: flex-start;   /* prev/next together on the left */
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(20, 24, 27, 0.08);
}

.ofm__nav .btn { margin: 0; }

/* Versturen duurt een paar tellen (de server praat met de mailservers).
   De knop zegt dat zelf, met een draaiend rondje ernaast, en neemt geen
   tweede klik meer aan. */
.btn.is-busy {
  cursor: progress;
  opacity: 0.85;
}

.btn.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.55em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vw-spin 0.7s linear infinite;
}

@keyframes vw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::after { animation-duration: 2.4s; }
}

/* The submit stands alone on the right. */
.ofm__nav [data-ofm-submit] { margin-left: auto; }

.ofm__nav[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ofm__bar-fill, .ofm__choice > span { transition: none; }
}

.offerte-explain__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.offerte-explain__actions .btn { margin: 0; }

/* Round icon buttons for prev/next in the modal nav. The .btn and
   .ofm__navbtn display rules would beat the UA [hidden] style, so
   re-assert hidden here — this is why "Volgende" once showed next to
   "Verstuur" on the last step. */
.ofm__nav [hidden] {
  display: none !important;
}

.ofm__navbtn {
  width: 46px;
  height: 46px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(20, 24, 27, 0.2);
  border-radius: 50%;
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.ofm__navbtn:hover:not(:disabled) { border-color: var(--color-navy); }

/* Op stap 1 staat "terug" er wel maar doet hij niets. Zichtbaar genoeg om
   de rij op zijn plaats te houden, flauw genoeg om niet uit te nodigen. */
.ofm__navbtn:disabled {
  opacity: 0.3;
  cursor: default;
}

.ofm__navbtn--primary {
  border: 0;
  background: var(--color-orange);
  color: var(--color-white);
}

/* "Volgende →": een woord in plaats van alleen een pijl. Hij kan uit staan,
   en een uitgezette ronde chevron zegt niet waaróm je niet verder kan. */
.ofm__navbtn--verder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;          /* even hoog als de ronde terugknop ernaast */
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease;
}

.ofm__navbtn--verder:hover:not(:disabled) { background: var(--color-orange-hover); }
.ofm__navbtn--verder svg { width: 18px; height: 18px; flex: none; }

/* Uitgezet blijft hij staan waar hij stond — de knop ernaast mag niet
   verspringen omdat deze even niet mag. */
.ofm__navbtn--verder:disabled {
  opacity: 0.4;
  cursor: default;
}

.ofm__navbtn--verder[hidden] { display: none; }

.ofm__navbtn--primary:hover { background: var(--color-orange-hover); }

.ofm__navbtn svg {
  width: 20px;
  height: 20px;
}