/* ==========================================================================
   Offerteaanvraag, /offerte/{slug}
   Mobile-first, een kolom. Bouwt voort op de calculator-componenten
   (.calc-section, .calc-option, .calc-cta) die page-kosten.css al naar de
   linnen-tokens tilt. Hier alleen de of-* laag.
   ========================================================================== */

.of-root {
  background: var(--color-surface);
  padding: var(--space-4) 0 var(--space-7);
}

/* Het hidden-attribuut moet winnen van componenten die zelf een display zetten,
   zoals .calc-cta uit app.css. Zonder dit blijft de verzendknop in de mobiele
   stapmodus zichtbaar terwijl de gebruiker nog vragen aan het beantwoorden is. */
.of-root [hidden] {
  display: none;
}

/* ---- Terugkoppeling naar het profiel ---- */
.of-back {
  margin-bottom: var(--space-3);
}

.of-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
}

.of-back a::before {
  content: '\2190';
  font-size: 1rem;
}

.of-back a:hover,
.of-back a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
}

.of-back a:focus-visible {
  outline: var(--ring-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Kop met bedrijfsfoto ---- */
.of-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.of-back {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Compact gehouden op mobiel: de bedrijfsnaam heeft de breedte harder nodig. */
.of-head-img {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-deep);
}

.of-head-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--hero-y, 50%);
  display: block;
}

/* De kop op twee regels: eerst waar het om gaat, dan bij wie. */
.of-head h1 {
  margin: 0 0 6px;
  min-width: 0;
}

/* Een kop over twee regels, in dezelfde letter en grootte. */
.of-titel-klein,
.of-titel-naam {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-ink);
}

/* De bedrijfsnaam blijft op een regel. Past hij niet, dan afkappen met puntjes,
   want een naam die over drie regels breekt duwt het formulier weg. */
.of-titel-naam {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De flexkolom moet mogen krimpen, anders kapt de naam nooit af. */
.of-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.of-sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* De beoordeling hoort op het profiel, niet op het aanvraagformulier. Op mobiel
   laten we hem daarom weg en houden we de kop tot het hoognodige beperkt. */
.of-rating {
  display: none;
  margin-top: 4px;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .of-rating {
    display: block;
  }
}

/* ---- Layout ----
   Een kolom, gecentreerd. Twee kolommen schaadt de afrondingsgraad bij
   formulieren, dus dat doen we bewust niet. */
.of-layout {
  display: block;
}

.of-main {
  max-width: 640px;
  margin: 0 auto;
}

.of-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

/* ---- Stappen ----
   Alleen een omlijning die vraag en antwoorden bij elkaar houdt. Geen eigen
   vlakvulling, zodat de linnen achtergrond doorloopt en de witte antwoordkaarten
   het enige lichte vlak in de groep blijven. */
.of-step {
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0 0 var(--space-3);
}

.of-step .calc-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.of-step-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
}

.of-step:has(input:checked) .of-step-num {
  background: var(--color-primary);
  color: var(--color-surface-card);
}

.of-hint {
  margin: -4px 0 12px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

/* Bewust klein en terughoudend: het is een geruststelling, geen mededeling. */
.of-overgenomen {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.of-overgenomen::before {
  content: '\2713';
  color: var(--color-primary);
  font-size: 0.8rem;
}

/* Ruime tikdoelen: op mobiel is elke optie minstens 48px hoog. */
.of-options .calc-option {
  min-height: 48px;
}

/* ---- Getalveld met eenheid, zelfde vorm als het gastenveld in de calculator ---- */
.of-aantal-row {
  margin-top: 4px;
}

.of-aantal-input {
  width: 92px;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.of-aantal-input:hover {
  background: var(--color-surface-deep);
}

.of-aantal-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* De toelichting hoort naast de vraag, niet boven op het nummer. */
.of-step .calc-section-title .calc-info-wrap {
  vertical-align: baseline;
}

/* ---- Tekstvelden ---- */
.of-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: var(--space-3) 0 6px;
}

.of-label:first-of-type {
  margin-top: 0;
}

/* Datumveld: iOS Safari geeft input[type=date] een eigen intrinsieke breedte
   die buiten het scherm kan steken; appearance uit plus expliciete breedte
   houdt hem binnen de kolom. De eigen plaatshouder toont "dd/mm/jjjj" in het
   Nederlands, want de ingebouwde tekst van de browser is niet aan te passen. */
.of-datum-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.of-input--datum {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  text-align: left;
}

.of-datum-ph {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 1rem;
  pointer-events: none;
  display: none;
}

.of-input--datum.is-leeg + .of-datum-ph {
  display: block;
}

/* De browser-eigen formaattekst (dd/mm/yyyy) onzichtbaar zolang het veld leeg
   en niet gefocust is; onze Nederlandse plaatshouder staat eroverheen. */
.of-input--datum.is-leeg:not(:focus)::-webkit-datetime-edit {
  color: transparent;
}

.of-input--datum:focus + .of-datum-ph {
  display: none;
}

.of-vereist {
  margin-left: 4px;
  color: var(--color-danger);
  font-weight: 700;
}

.of-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}

.of-input:hover {
  border-color: var(--color-text-muted);
}

.of-input:focus-visible {
  outline: var(--ring-focus);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.of-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

/* ---- Verzenden ---- */
.of-submit {
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-4);
  font-size: 1rem;
  cursor: pointer;
  border: none;
}

.of-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.of-submit:active {
  transform: translateY(1px);
}

.of-disclaimer {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- Meldingen ---- */
.of-alert {
  padding: 12px 16px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-danger-line);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 0.92rem;
}

.of-bedankt {
  padding: var(--space-5);
  border: 1px solid var(--color-success-line);
  border-radius: var(--radius-lg);
  background: var(--color-success-soft);
}

.of-bedankt h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 10px;
  color: var(--color-ink);
}

.of-bedankt p {
  margin: 0 0 8px;
  color: var(--color-ink);
}

.of-terug-link {
  color: var(--color-primary);
  font-weight: 600;
}

.of-terug-link:focus-visible {
  outline: var(--ring-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Honeypot: onzichtbaar voor mensen, invulbaar voor bots. */
.of-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Mobiele stapmodus: een vraag per scherm met voortgang
   ========================================================================== */

.of-progress {
  margin-bottom: var(--space-4);
}

.of-progress-text {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.of-progress-baan {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
  overflow: hidden;
}

.of-progress-vul {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* In stapmodus draagt de zichtbare vraag zelf het scherm, dus geen omlijning
   en geen nummerbolletje: de voortgangsbalk vertelt al waar je bent. */
.of-form--stappen .of-step {
  border: none;
  padding: 0;
  margin: 0;
}

.of-form--stappen .of-step-num {
  display: none;
}

.of-form--stappen .calc-section-title {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.of-nav {
  display: flex;
  gap: 10px;
  margin-top: var(--space-4);
}

.of-nav-knop {
  min-height: 50px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.of-nav-terug {
  flex: 0 0 auto;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-line);
}

.of-nav-terug:hover {
  background: var(--color-surface-deep);
  color: var(--color-ink);
}

.of-nav-verder {
  flex: 1 1 auto;
  background: var(--color-primary);
  color: var(--color-surface-card);
  border: 1px solid var(--color-primary);
}

.of-nav-verder:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.of-nav-knop:focus-visible {
  outline: var(--ring-focus);
  outline-offset: 2px;
}

.of-nav-knop:active {
  transform: translateY(1px);
}

/* In stapmodus staat de verzendknop alleen op de laatste stap. */
.of-form--stappen .of-submit {
  margin-top: var(--space-4);
}

/* Op de laatste stap verhuist de verzendknop in de navigatiebalk (zie
   offerte.js), zodat "Vorige" en "Aanvraag versturen" naast elkaar staan
   in plaats van onder elkaar. Staat na de regel hierboven, zodat deze wint. */
.of-nav .of-submit {
  flex: 1 1 auto;
  width: auto;
  min-height: 50px;
  margin-top: 0;
}

/* ---- Bredere schermen ---- */
@media (min-width: 700px) {
  .of-root {
    padding-top: var(--space-5);
  }

  .of-head-img {
    width: 144px;
    height: 144px;
  }

  .of-step {
    padding: var(--space-4) var(--space-5);
  }

  .of-submit {
    width: auto;
    min-width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .of-input,
  .of-submit,
  .of-nav-knop,
  .of-progress-vul {
    transition: none;
  }

  .of-submit:active,
  .of-nav-knop:active {
    transform: none;
  }
}