/* ==========================================================================
   Compacte offerte-aanvraag in de hero.

   Staat op een donkere ondergrond, dus alle kleuren zijn hier lokaal
   vastgelegd in plaats van uit site.css te komen: dat bestand rekent op een
   witte achtergrond.

   Zonder JavaScript staan de drie fieldsets gewoon onder elkaar en werkt het
   geheel als één formulier. De klasse .is-stappen wordt door het script
   gezet; alles wat stappen verbergt, hangt daaraan.
   ========================================================================== */

.ovw-heroform {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--ovw-radius-xl, 32px);
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
  color: #DFF0EE;
}

/* --- Kop ---------------------------------------------------------- */
.ovw-heroform__titel {
  color: #fff;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.ovw-heroform__sub {
  font-size: .9rem;
  color: #B6D8D5;
  margin: 0 0 .7rem;
}
.ovw-heroform__sub strong { color: #fff; }

/* Het argument dat het meest overtuigt, krijgt een eigen regel: de overname
   van meubels verlaagt de factuur, en dat is precies wat een bezoeker niet
   verwacht van een ontruimer. */
.ovw-heroform__winst {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .86rem;
  line-height: 1.45;
  color: #FFE9BC;
  background: rgba(249, 168, 37, .12);
  border-left: 3px solid var(--ovw-secundair, #F9A825);
  border-radius: 0 8px 8px 0;
  padding: .55rem .8rem;
  margin: 0 0 1.1rem;
}
.ovw-heroform__winst i { color: var(--ovw-secundair, #F9A825); margin-top: .18rem; }

/* --- Stappenteller ------------------------------------------------ */
.ovw-heroform__stappen { display: none; gap: .4rem; margin-bottom: 1rem; }
.is-stappen .ovw-heroform__stappen { display: flex; }
.ovw-heroform__stappen span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .18);
  font-size: 0;            /* het cijfer is er voor screenreaders, niet visueel */
  transition: background-color .35s ease;
}
.ovw-heroform__stappen span.is-actief,
.ovw-heroform__stappen span.is-gedaan { background: var(--ovw-primair, #19C1B6); }

/* --- Stappen ------------------------------------------------------ */
.ovw-heroform__stap { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Enkel verbergen wanneer het script de stappen overneemt. */
.is-stappen .ovw-heroform__stap { display: none; }
.is-stappen .ovw-heroform__stap.is-actief { display: block; animation: ovw-hf-in .35s ease; }
.ovw-heroform__stap + .ovw-heroform__stap { margin-top: 1.2rem; }
.is-stappen .ovw-heroform__stap + .ovw-heroform__stap { margin-top: 0; }

@keyframes ovw-hf-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ovw-heroform__stap legend {
  font-family: var(--ovw-titel-font, inherit);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  padding: 0;
  margin-bottom: .75rem;
}

/* --- Keuzeknoppen -------------------------------------------------- */
.ovw-heroform__keuzes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
.ovw-heroform__keuze {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: #EAF6F5;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.ovw-heroform__keuze:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.ovw-heroform__keuze i { color: var(--ovw-primair, #19C1B6); font-size: 1rem; flex: none; }

/* Een echte radio, visueel verborgen: zo blijft het toetsenbord werken en
   leest een screenreader een gewone keuzelijst. */
.ovw-heroform__keuze input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.ovw-heroform__keuze:has(input:checked),
.ovw-heroform__keuze.is-gekozen {
  background: var(--ovw-primair, #19C1B6);
  border-color: var(--ovw-primair, #19C1B6);
  color: #04262c;
}
.ovw-heroform__keuze:has(input:checked) i,
.ovw-heroform__keuze.is-gekozen i { color: #04262c; }
.ovw-heroform__keuze:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }

/* --- Velden -------------------------------------------------------- */
.ovw-heroform__rij { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ovw-heroform__rij .ovw-veld--kort { grid-column: span 1; }
@media (max-width: 460px) { .ovw-heroform__rij { grid-template-columns: 1fr; } }

.ovw-heroform .ovw-veld label {
  color: #DFF0EE;
  font-size: .85rem;
  margin-bottom: .3rem;
}
.ovw-heroform__optioneel { font-weight: 400; color: #9FC4C2; }
.ovw-heroform .ovw-veld input {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
  padding: .75rem .9rem;
  font-size: .95rem;
}
.ovw-heroform .ovw-veld input:focus {
  background: #fff;
  border-color: var(--ovw-primair, #19C1B6);
  box-shadow: 0 0 0 4px rgba(25, 193, 182, .3);
}
.ovw-heroform .ovw-veld input[aria-invalid="true"] {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .55);
}

/* --- Navigatie ----------------------------------------------------- */
.ovw-heroform__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-top: 1rem;
}
.ovw-heroform__verder { margin-top: 1rem; width: 100%; justify-content: center; }
.is-stappen .ovw-heroform__nav .ovw-btn { flex: 1; justify-content: center; }
.ovw-heroform__terug {
  background: none;
  border: 0;
  color: #A9CFCD;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  padding: .5rem .2rem;
  text-decoration: underline;
}
.ovw-heroform__terug:hover { color: #fff; }

.ovw-heroform__hint { font-size: .82rem; color: #9FC4C2; margin: .7rem 0 0; }
.ovw-heroform__hint a { color: #fff; font-weight: 700; }

.ovw-heroform__voet {
  font-size: .82rem;
  color: #9FC4C2;
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ovw-heroform__voet a { color: #fff; }

.ovw-heroform__fout {
  color: #FFC9C9;
  font-size: .82rem;
  margin: .35rem 0 0;
  font-weight: 700;
}

/* --- Plaatsing in de hero ------------------------------------------ */
/* Tekst links, formulier rechts. Onder 940 px stapelt de hero al door
   .ovw-split; het formulier komt dan onder de tekst te staan, wat klopt:
   op een telefoon wil de bezoeker eerst weten waar hij is. */
.ovw-hero__met-form { align-items: start; }
@media (min-width: 941px) {
  .ovw-hero__met-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

@media (prefers-reduced-motion: reduce) {
  .is-stappen .ovw-heroform__stap.is-actief { animation: none; }
  .ovw-heroform__keuze:hover { transform: none; }
}