/* Offerte-aanvragen-pagina (page-offerte-aanvragen.php) — uit inline <style> gehaald. */
/* ── Offerte aanvragen ────────────────────────────────────────────────────── */
.lc-off {
  /* Aliassen aan globale palette (style.css :root). */
  --off-deep:        var(--color-green-deep-2);
  --off-green:       var(--color-green-medium-2);
  --off-green-soft:  var(--color-green-bright);
  --off-orange:      var(--color-orange);
  --off-orange-d:    var(--color-orange-deep);
  --off-orange-text: var(--color-orange-dark);
  --off-yellow:      #FBBC04;
  --off-cream:       var(--color-cream);
  --off-border:      var(--color-border);
  --off-border-s:    var(--color-border-soft);
  --off-ink-soft:    var(--color-ink-soft);
  --off-muted:       var(--color-muted);
}
.lc-off *, .lc-off *::before, .lc-off *::after { box-sizing: border-box; }
.lc-off a { text-decoration: none; color: inherit; }

/* ── Page hero — compact H1 boven de wizard ─────────────────────────────── */
.lc-off-hero { padding: 0; background: #fff; } /* H1 is screen-reader-text (onzichtbaar, blijft voor SEO/a11y) — geen zichtbare hero-ruimte */
.lc-off-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.lc-off-hero h1 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--off-deep);
  margin: 14px 0 0;
  letter-spacing: -0.02em;
}
.lc-off-hero h1 .accent { color: var(--off-orange-text); }
.lc-off-price-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.lc-off-price-badge { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; background: var(--off-deep); color: #fff; font-size: 15px; font-weight: 700; }
.lc-off-price-badge strong { color: var(--color-orange, #e39f2f); font-size: 17px; }
.lc-off-price-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--color-cream, #faf5ec); border: 1px solid var(--color-border, #e8e2d2); color: var(--off-deep); font-size: 13.5px; font-weight: 600; }
.lc-off-price-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-green, #8bba3f); }
.lc-off-price-chip--guarantee { background: var(--off-deep); color: #fff; border-color: var(--off-deep); font-weight: 700; }
.lc-off-price-chip--guarantee::before { display: none; }
/* ── Inbegrepen / value-stack + snelheidsgarantie (secties binnen de sidebar-kaart) ── */
.lc-off-include__title { font-size: 14px; font-weight: 800; color: var(--off-deep); margin: 0 0 11px; }
.lc-off-include-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-off-include-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: var(--color-ink-soft, #41474d); }
.lc-off-include-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #2d6a4f; font-weight: 800; }
.lc-off-guarantee { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 11px 13px; border-radius: 10px; background: rgba(227,159,47,0.1); border: 1px solid rgba(227,159,47,0.35); font-size: 13px; line-height: 1.5; color: var(--off-deep); }
.lc-off-guarantee__icon { font-size: 17px; line-height: 1.2; }
.lc-off-guarantee strong { color: #8E5C00; }
.lc-off-proof { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--color-ink-soft, #41474d); line-height: 1.4; }
.lc-off-proof__stars { color: #e39f2f; font-size: 13px; letter-spacing: 1px; flex: 0 0 auto; }
.lc-off-proof strong { color: var(--off-deep); }
.lc-off-hero p {
  color: var(--off-ink-soft);
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

/* ── Wizard section ──────────────────────────────────────────────────────── */
.lc-off-wizard { padding: 36px 0 80px; background: #fff; }
.lc-off-wizard-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Plugin form reskin — white card (matches Offerte.html) ─────────────── */

/* 1. Shell → white card, single-column (price panel moved to sidebar via JS) */
.lc-off-form-col .elf-steps-shell {
  background: #fff;
  border: 1px solid #E8E2D2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(14,61,34,0.05), 0 14px 32px -18px rgba(14,61,34,0.20);
  padding: 0;
  grid-template-columns: 1fr !important;
}

/* 2. Form column: full-width, no padding (progress bar sits flush at top) */
.lc-off-form-col .elf-steps-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 3. Step body padding (not progress bar) */
.lc-off-form-col .elf-step {
  padding: 28px 32px 32px;
}

/* Progress bar → strakke genummerde stappen (zachte cirkels, geen strepen). v2 = 2 stappen. */
.lc-off-form-col .elf-steps-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  border-bottom: 1px solid #F1ECE2;
  padding: 6px 12px;
}
.lc-off-form-col .elf-step-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 12px;
  position: relative;
  color: #5F6A64; /* was #aeb4b0 = 2,1:1 op wit; nu 5,6:1 (AA) */
  font-size: 14px;
  font-weight: 600;
  transition: color .15s;
}
.lc-off-form-col .elf-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #F0EFEA;
  color: #5F6A64; /* 4,9:1 op #F0EFEA (AA) */
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  border: none;
  transition: all .2s;
}
.lc-off-form-col .elf-step-lbl { font-weight: 700; }
.lc-off-form-col .elf-step-tab.is-active { color: #0E3D22; }
.lc-off-form-col .elf-step-tab.is-active .elf-step-num { background: #0E3D22; color: #fff; }
.lc-off-form-col .elf-step-tab.is-done { color: #0E3D22; }
.lc-off-form-col .elf-step-tab.is-done .elf-step-num { background: #E89D2C; color: #fff; }
@media (max-width: 600px) {
  /* Staplabels 'Adres'/'Gegevens' NIET verbergen — klein onder de bolletjes,
     zodat ook mobiel duidelijk is welke stap volgt. */
  .lc-off-form-col .elf-step-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 8px 7px; }
  .lc-off-form-col .elf-step-lbl { font-size: 12px; line-height: 1.1; }
  /* Kleinere stap-bolletjes op mobiel. */
  .lc-off-form-col .elf-steps-bar { padding: 4px 8px; }
  .lc-off-form-col .elf-step-num { width: 24px; height: 24px; font-size: 12px; }
}

.lc-off-form-col .elf-step[data-step="1"] { display: flex; flex-direction: column; }
.lc-off-form-col .elf-step[data-step="1"] > .elf-step-head      { order: 0; }
.lc-off-form-col .elf-step[data-step="1"] > .elf-addr-ack       { order: 1; }
.lc-off-form-col .elf-step[data-step="1"] > .elf-opties-section { order: 3; }
.lc-off-form-col .elf-step[data-step="1"] > .elf-dienst-error   { order: 8; }
.lc-off-form-col .elf-step[data-step="1"] > .elf-step-actions   { order: 9; }

/* 5. Step intro text (was white) */
.lc-off-form-col .elf-step-intro { color: #0E3D22; opacity: 1; }

/* 6. Service/dienst cards — main cards (iets compacter) */
.lc-off-form-col .elf-dienst-card {
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(14,61,34,0.07), 0 2px 8px rgba(14,61,34,0.06);
  padding: 14px 18px;
  gap: 7px;
}
.lc-off-form-col .elf-dienst-card .elf-dienst-icon { width: 42px; height: 42px; }
.lc-off-form-col .elf-dienst-card:hover {
  background: #FAF5EC;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(14,61,34,0.10), 0 6px 16px rgba(14,61,34,0.12);
}
/* Selected main card: neutrale, professionele markering — dunne donkere rand + zachte schaduw, géén kleur/ring/tint */
.lc-off-form-col .elf-dienst-card.is-selected {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(14,61,34,0.13);
}
.lc-off-form-col .elf-dienst-card[data-cat="main"].is-selected::after { color: #9aa19c; }

/* Unselected card icon + text colors */
.lc-off-form-col .elf-dienst-icon { background: #FAF5EC; }
.lc-off-form-col .elf-dienst-icon svg { stroke: #0E3D22; }
.lc-off-form-col .elf-dienst-name { color: #0E3D22; }
.lc-off-form-col .elf-dienst-desc { color: #4a5550; }
.lc-off-form-col .elf-dienst-price { color: var(--off-orange-text); } /* was #E89D2C → 2.26:1 op wit; nu 5.65:1 ✅ */
.lc-off-form-col .elf-dienst-price.elf-dienst-price-aanvraag { color: #636e6b; font-size: 12px; }
.lc-off-form-col .elf-dienst-error { color: #EF4444; }

/* ── Addon cards (NEN 2580, WWS) ─────────────────────────────────────── */
/* Hide icon — addon cards don't use it */
.lc-off-form-col .elf-dienst-addon .elf-dienst-icon { display: none; }

/* De uitklap-sectie heeft overflow:hidden + max-height voor de slide-down-animatie;
   dat knipte de neerwaartse box-shadow (0 8px 22px) van de addon-kaarten onderaan af.
   Geef de sectie onderaan ruimte zodat de schaduw past — animatie blijft intact. */
.lc-off-form-col .elf-addons-section { padding-bottom: 30px; }
.lc-off-form-col .elf-addons-section.is-visible { max-height: 500px; }

/* "Prijs gebaseerd op {m²} en {woningtype}" — de variabelen groen + bold zodat de klant
   meteen ziet waarop de prijs is gebaseerd (matcht de groene totaalprijs #1c7a33). */
.elf-pp-basis__var { color: #1c7a33; font-weight: 700; }

/* Price as bordered pill, dark green text */
.lc-off-form-col .elf-dienst-addon .elf-dienst-price {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1.5px solid #D8D0BC;
  background: #fff;
  color: #0E3D22 !important;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

/* Selected addon: prijs-pill blijft neutraal — selectie blijkt uit de rand + het vinkje, niet uit kleur */
.lc-off-form-col .elf-dienst-addon.is-selected .elf-dienst-price {
  border-color: #D8D0BC;
  background: #fff;
  color: #0E3D22 !important;
}

/* Check circle */
.lc-off-form-col .elf-addon-check {
  border-color: #D8D0BC;
  width: 26px; height: 26px;
}
.lc-off-form-col .elf-dienst-addon.is-selected .elf-addon-check {
  background: #1C7A33;
  border-color: #1C7A33;
}

/* 7. Addon title + optie rows */
.lc-off-form-col .elf-addons-title {
  color: #636e6b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.lc-off-form-col .elf-optie-row {
  background: #FAF5EC;
  border-color: transparent;
}
.lc-off-form-col .elf-optie-row:hover { background: #F0EBE0; border-color: transparent; }
.lc-off-form-col .elf-optie-row.is-selected { background: #F4F2EC; border-color: transparent; }
/* Optie dot → CSS toggle pill */
.lc-off-form-col .elf-optie-dot {
  width: 44px; height: 26px; min-width: 44px;
  border-radius: 999px;
  background: #D8D0BC;
  border: none;
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.lc-off-form-col .elf-optie-dot::after {
  content: "" !important;
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff !important;
  border: none !important;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform .15s;
}
.lc-off-form-col .elf-optie-row.is-selected .elf-optie-dot {
  background: #1C7A33;
  border: none;
}
.lc-off-form-col .elf-optie-row.is-selected .elf-optie-dot::after {
  transform: translateX(18px) !important;
}
.lc-off-form-col .elf-optie-name { color: #0E3D22; }
.lc-off-form-col .elf-optie-desc { color: #636e6b; }
.lc-off-form-col .elf-optie-price { color: var(--off-orange-text); } /* was #E89D2C → 2.08:1 op crème; nu 5.20:1 ✅ */
.lc-off-form-col .elf-optie-icon  { display: none; } /* iconen bij Besparingsadvies/Spoedservice weg */

/* (i)-infoknop bij extra's — op desktop verborgen (omschrijving staat al inline). */
.lc-off-form-col .elf-optie-info { display: none; }

/* ── Extra's op mobiel: simpele CHECKBOX i.p.v. de toggle-pill + (i) voor de uitleg ──
   Makkelijker tikken, korter (omschrijving verborgen achter de i). Alleen ≤600px;
   desktop houdt de toggle-pill met inline-omschrijving. */
@media (max-width: 600px) {
  .lc-off-form-col .elf-optie-dot {
    width: 22px; height: 22px; min-width: 22px;
    border-radius: 6px;
    background: #fff;
    border: 1.6px solid #C9C1AD;
  }
  .lc-off-form-col .elf-optie-dot::after {
    content: "" !important;
    left: 7px !important; top: 3px !important;
    width: 6px !important; height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
  }
  .lc-off-form-col .elf-optie-row.is-selected .elf-optie-dot {
    background: #1C7A33; border-color: #1C7A33;
  }
  .lc-off-form-col .elf-optie-row.is-selected .elf-optie-dot::after {
    transform: rotate(45deg) !important; opacity: 1 !important;
  }

  /* Omschrijving standaard verborgen → verschijnt onder de naam zodra (i) aan staat. */
  .lc-off-form-col .elf-optie-desc { display: none; }
  .lc-off-form-col .elf-optie-row.is-info-open .elf-optie-desc {
    display: block; margin-top: 6px; font-size: 12.5px;
  }

  /* De (i)-knop tonen + stylen. */
  .lc-off-form-col .elf-optie-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; min-width: 20px; flex: 0 0 auto;
    border-radius: 50%; border: 1.5px solid #C9C1AD;
    background: #fff; color: #6b756f;
    font: italic 700 12px/1 Georgia, "Times New Roman", serif;
    cursor: pointer;
  }
  .lc-off-form-col .elf-optie-row.is-info-open .elf-optie-info {
    background: #0E3D22; color: #fff; border-color: #0E3D22;
  }

  /* Compactere rijen op mobiel (lager + dichter op elkaar), nog goed tikbaar. */
  .lc-off-form-col .elf-opties-compact { gap: 6px; }
  .lc-off-form-col .elf-optie-row { padding: 9px 12px; gap: 11px; }
  .lc-off-form-col .elf-optie-name { font-size: 14.5px; }
}

/* 7b. Extra's-groepen (Rapporten & metingen / Levering) + Totaal-extra's-footer */
.lc-off-form-col .elf-extras-group-title { margin-top: 20px; }
.lc-off-form-col .elf-opties-section .elf-extras-group-title:first-child { margin-top: 0; }
.lc-off-form-col .elf-extras-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid #E7E0D2;
}
.lc-off-form-col .elf-extras-foot .elf-step-actions { margin: 0; gap: 14px; border-top: 0; padding-top: 0; }
.lc-off-form-col .elf-extras-total-label {
  display: block; color: #636e6b;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; margin: 0 0 3px;
}
.lc-off-form-col .elf-extras-total-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lc-off-form-col .elf-extras-total-val { color: var(--off-orange-text); font-size: 22px; font-weight: 800; line-height: 1; }
.lc-off-form-col .elf-extras-total-hint { color: #636e6b; font-size: 13px; }

/* 8. Form labels */
.lc-off-form-col .elf-field label { color: #0E3D22; }

/* 8b. 2-kolomsraster uitlijnen: labels boven, invoervakken onderaan op gelijke hoogte —
   ook als één label naar 2 regels wrapt (bijv. "Woonoppervlakte (m²)" naast "Bouwjaar"
   op smal scherm). Het raster blijft 2-koloms; alleen de hoogtes lijnen netjes uit. */
.lc-off-form-col .elf-grid-2 { align-items: stretch; } /* cellen even hoog → margin-top:auto kan de invoervakken uitlijnen (plugin staat op align-items:start) */
.lc-off-form-col .elf-grid-2 > .elf-field { display: flex; flex-direction: column; }
.lc-off-form-col .elf-grid-2 > .elf-field > .elf-control { margin-top: auto; }

/* 8c. Opmerkingen-veld inklapbaar (optioneel → standaard dicht, scheelt ruimte). */
.lc-off-form-col details.elf-opmerkingen { margin: 0 0 18px; }
.lc-off-form-col .elf-opmerkingen > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #1C7A33; padding: 4px 0;
}
.lc-off-form-col .elf-opmerkingen > summary::-webkit-details-marker { display: none; }
.lc-off-form-col .elf-opmerkingen > summary::before {
  content: "+"; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; line-height: 1;
}
.lc-off-form-col .elf-opmerkingen[open] > summary::before { content: "\2212"; } /* − */
.lc-off-form-col .elf-opmerkingen > summary span { color: #636e6b; font-weight: 400; }

/* "Voor: [adres] · vanaf €X — wijzig"-regel bovenaan Extra's. */
.lc-off-form-col .elf-step2-confirm {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 0 0 18px; padding: 10px 14px;
  background: #FAF5EC; border: 1px solid #ECE5D4; border-radius: 10px;
  font-size: 14px; line-height: 1.4; color: #4a5550;
}
.lc-off-form-col .elf-step2-confirm__text { flex: 1 1 auto; }
.lc-off-form-col .elf-step2-confirm__text strong { color: #0E3D22; }
.lc-off-form-col .elf-step2-confirm__edit {
  flex: 0 0 auto; margin-left: auto; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--off-orange-text, #b06f00); font-weight: 700; font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Lijn boven de actieknoppen ("Volgende" enz.) op mobiel weg — rustiger beeld. */
@media (max-width: 600px) {
  .lc-off-form-col .elf-extras-foot,
  .lc-off-form-col .elf-step-actions,
  .lc-off-form-col .elf-step-actions-right { border-top: none; }
}

/* 9. Hardcoded white text */
.lc-off-form-col .elf-terms { color: #4a5550; }
.lc-off-form-col .elf-check { color: #4a5550; }
.lc-off-form-col .elf-thanks-title { color: #0E3D22; }
.lc-off-form-col .elf-thanks-sub { color: #4a5550; }
.lc-off-form-col .elf-step-actions-summary .elf-summary-loading { color: #4a5550; }

/* 10. Step footer border */
.lc-off-form-col .elf-step-actions { border-top: 1px solid #E8E2D2; margin-top: 24px; padding-top: 20px; }

/* 10b. Volgende / form buttons → orange (overrides theme --main green) */
.lc-off-form-col .elf-btn { background: #E89D2C !important; color: #0E3D22 !important; } /* wit op oranje = 2.26:1; donkergroen 5.34:1 ✅ */
.lc-off-form-col .elf-btn:hover { background: #C97F11 !important; }

/* 10c. Back button → ghost dark-green on white card */
.lc-off-form-col .elf-back-square {
  border-color: #D8D0BC;
  background: #FAF5EC;
}
.lc-off-form-col .elf-back-square::before {
  border-color: #0E3D22;
}

/* 10d. Step 4 back button → pill with text "← Vorige" */
.lc-off-form-col .elf-back-pill {
  width: auto;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid #D8D0BC;
  background: #fff;
  color: #0E3D22;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.lc-off-form-col .elf-back-pill::before { display: none; }

/* ── Step 4 summary groups ────────────────────────────────────────────────── */
.lc-off-form-col .elf-sc-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.lc-off-form-col .elf-summary-loading {
  color: #636e6b;
  font-size: 14px;
  padding: 8px 0;
}
.lc-off-form-col .elf-sc-group {
  background: #FAF5EC;
  border: 1px solid #E8E2D2;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.lc-off-form-col .elf-sc-group:last-child { margin-bottom: 0; }
.lc-off-form-col .elf-sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px solid #E8E2D2;
}
.lc-off-form-col .elf-sc-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #636e6b;
  text-transform: uppercase;
}
.lc-off-form-col .elf-sc-wijzig {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--off-orange-text); /* was #E89D2C → 2.08:1 op crème; nu 5.20:1 ✅ */
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lc-off-form-col .elf-sc-wijzig:hover { color: #6a4800; } /* donkerder amber hover — 7.9:1 ✅ */
.lc-off-form-col .elf-sc-rows { padding: 4px 18px 10px; }
.lc-off-form-col .elf-scrow--totaal { border-top: 1px solid #E8E2D2; margin-top: 4px; padding-top: 8px; }
.lc-off-form-col .elf-scrow--totaal .elf-scrow-label { font-weight: 800; color: #0E3D22; }
.lc-off-form-col .elf-scrow--totaal .elf-scrow-val { font-weight: 800; color: #0E3D22; font-size: 16px; }
.lc-off-form-col .elf-scrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #E8E2D2;
  font-size: 14.5px;
}
.lc-off-form-col .elf-scrow:last-child { border-bottom: none; }
.lc-off-form-col .elf-scrow-label { color: #4a5550; }
.lc-off-form-col .elf-scrow-val { color: #0E3D22; font-weight: 800; text-align: right; }
.lc-off-form-col .elf-scrow-val.is-aanvraag { color: #636e6b; font-weight: 600; font-style: italic; }

/* ── Step 4 terms checkbox ────────────────────────────────────────────────── */
.lc-off-form-col .elf-terms {
  margin: 0 0 4px;
  color: inherit;
  font-size: inherit;
}
.lc-off-form-col .elf-terms .elf-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FAF5EC;
  border: 1px solid #E8E2D2;
  border-radius: 12px;
  padding: 14px 16px;
}
.lc-off-form-col .elf-terms .elf-checkbox-box {
  background: #fff;
  border-color: #D8D0BC;
  flex-shrink: 0;
  margin-top: 2px;
}
.lc-off-form-col .elf-terms .elf-checkbox input[type="checkbox"]:checked + .elf-checkbox-box {
  background: #1B5E2A;
  border-color: #1B5E2A;
}
.lc-off-form-col .elf-terms .elf-checkbox-text {
  color: #4a5550;
  font-size: 14px;
  line-height: 1.55;
}
.lc-off-form-col .elf-terms .elf-checkbox-text a {
  color: #0E3D22;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lc-off-form-col .elf-terms .elf-checkbox-text a:hover { color: #1B5E2A; }

/* Hide the old elf-summary-card / elf-summary-head */
.lc-off-form-col .elf-summary-card { background: transparent; border-radius: 0; overflow: visible; margin: 0; }
.lc-off-form-col .elf-summary-head { display: none; }
.lc-off-form-col .elf-summary-body { padding: 0; }

/* 11. Plugin's price column — hidden; price panel lives in sidebar as .lc-price-card */
.lc-off-form-col .elf-steps-col-price { display: none !important; }

/* ── Prijsoverzicht (licht, in de samengevoegde sidebar — geen groene vlakken/prijzen) ── */
/* Neutraliseer de eigen chrome van de plugin-panel (donkere tint, rand, padding, radius) */
.lc-off-sidebar .elf-price-panel.lc-pp { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.lc-pp .elf-pp-eyebrow { display: none; }
.lc-pp .elf-pp-heading {
  font-size: 17px;
  font-weight: 800;
  color: var(--off-deep);
  margin: 0 0 2px;
}
/* Intro onder de kop — maakt duidelijk dat dit een keuzemenu is, geen statische lijst. */
.lc-pp .elf-pp-intro {
  font-size: 14px;
  color: #6b756f;
  line-height: 1.4;
  margin: 0 0 12px;
}
/* Minimale uitklapbare uitleg-balk: "combineren is voordeliger met een energielabel". */
.lc-pp .elf-pp-uitleg {
  background: #EFF6E6; border: 1px solid transparent; border-radius: 8px;
  margin: 0 0 14px; overflow: hidden;
}
.lc-pp .elf-pp-uitleg > summary {
  list-style: none; cursor: pointer; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #1f3d12;
}
.lc-pp .elf-pp-uitleg > summary::-webkit-details-marker { display: none; }
.lc-pp .elf-pp-uitleg > summary > span { flex: 1; }
.lc-pp .elf-pp-uitleg-ic { flex: none; color: #1C7A33; }
.lc-pp .elf-pp-uitleg-chev { flex: none; color: #6a8a5a; transition: transform .2s ease; }
.lc-pp .elf-pp-uitleg[open] .elf-pp-uitleg-chev { transform: rotate(180deg); }
.lc-pp .elf-pp-uitleg p {
  margin: 0; padding: 0 12px 11px 36px;
  font-size: 12.5px; line-height: 1.5; color: #3a4a30;
}
/* Sub-kop boven het Prijsoverzicht (onder de diensten-toggles) */
.lc-pp .elf-pp-heading--sub {
  font-size: 14px;
  font-weight: 800;
  color: var(--off-deep);
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid #ECE5D4;
}

/* ── Diensten-keuze in het paneel (v2) — COMPACTE prijslijst-regels (geen kaarten/
   bolletjes/beschrijvingen). Naam links, prijs rechts, klein +/×-knopje. Hergebruikt
   de bestaande prijsoverzicht-kleuren (donkergroene labels, groene prijs, divider). ── */
.lc-pp .elf-pp-diensten { display: flex; flex-direction: column; }
.lc-pp .elf-pp-diensten .elf-optie-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #F1ECE2;
  max-height: 120px;
  overflow: hidden;
  transition: opacity .25s ease, max-height .3s ease, padding .3s ease, margin .3s ease, visibility 0s;
}
.lc-pp .elf-pp-diensten .elf-optie-row:last-of-type { border-bottom: 0; }
/* Verschijnen/verdwijnen van een dienst (bv. Energieadvies als het energielabel aan/uit gaat):
   zacht in/uit-faden + dichtklappen i.p.v. abrupt — zodat 55+ niet schrikt van een plotse wijziging. */
.lc-pp .elf-pp-diensten .elf-optie-row.is-disabled {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0;
  pointer-events: none;
  visibility: hidden; /* pas verbergen ná de fade (delay), zodat het zacht uitfadet i.p.v. meteen weg */
  transition: opacity .25s ease, max-height .3s ease, padding .3s ease, margin .3s ease, visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
  .lc-pp .elf-pp-diensten .elf-optie-row { transition: none; }
}
/* Spoedservice staat los ónder de diensten (het is een optie/toeslag, geen losse dienst). */
.lc-pp .elf-pp-diensten .elf-optie-row[data-cat="optie"] {
  margin-top: 14px;
  border-top: 1px solid #e7e3d5;
  padding-top: 18px;
}
/* Uitgeschakeld (bv. Spoed bij utiliteit): de scheidings-marge/rand/padding hierboven wint anders
   op specificiteit van .is-disabled → laat een gat. Deze override klapt de optie-rij volledig dicht. */
.lc-pp .elf-pp-diensten .elf-optie-row[data-cat="optie"].is-disabled {
  margin-top: 0; border-top-width: 0; padding-top: 0;
}
.lc-pp .elf-pp-diensten .elf-optie-row[data-cat="addon"]:has(+ .elf-optie-row[data-cat="optie"]) {
  border-bottom: 0;
}
.lc-pp .elf-pp-diensten .elf-optie-icon,
.lc-pp .elf-pp-diensten .elf-optie-dot,
.lc-pp .elf-pp-diensten .elf-optie-desc,
.lc-pp .elf-pp-diensten .elf-optie-info { display: none; }

/* Naam links (donkergroen, zoals de andere paneel-labels). */
.lc-pp .elf-pp-diensten .elf-optie-name {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: 14px; font-weight: 600; color: #0E3D22; line-height: 1.3;
}
/* Niet-toegevoegd: naam iets gedempt zodat "toegevoegd" duidelijk opvalt. */
.lc-pp .elf-pp-diensten .elf-optie-row:not(.is-selected) .elf-optie-name { color: #4a5550; }
/* "normaal € 225 los"-regeltje onder de naam (variant B): klein + gedempt, maar WCAG-leesbaar
   (#636e6b = 5.29:1 op wit). Laat de losprijs zien zonder de verwarrende doorstreping. */
.lc-pp .elf-pp-diensten .elf-optie-normaal { font-size: 14px; font-weight: 400; color: #636e6b; line-height: 1.25; }

/* Prijs rechts — groen voor toegevoegd (telt mee), gedempt voor de "+ €"-suggestie.
   #636e6b haalt 5.29:1 op wit → WCAG AA (was #7a847f = 3.86:1, te licht). */
.lc-pp .elf-pp-diensten .elf-optie-price {
  font-size: 13.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  color: #636e6b;
}
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-price { color: #1C7A33; }
.lc-pp .elf-pp-diensten .elf-optie-price--main { font-weight: 700; }
/* Placeholder vóór invullen ("Vul uw gegevens in") = rustige hint i.p.v. een prijs. */
.lc-pp .elf-pp-diensten .elf-optie-row .elf-optie-price.is-placeholder {
  font-weight: 500;
  font-style: italic;
  font-size: 12.5px;
  color: #636e6b;
}
.lc-pp .elf-pp-diensten .elf-optie-price-btw { font-weight: 400; font-size: .82em; }
/* Doorgestreepte losse prijs + de combinatieprijs die u betaalt. */
.lc-pp .elf-pp-diensten .elf-optie-los {
  color: #636e6b; text-decoration: line-through; font-weight: 600; font-size: .9em; margin-right: 6px; /* #636e6b = 5.29:1 op wit (WCAG AA); was #9aa39d = ~2,3:1 */
}
.lc-pp .elf-pp-diensten .elf-optie-pay { font-weight: 700; }
/* Prijs-wissel (los ↔ combinatieprijs): alléén een zachte fade — bewust géén schuivende
   beweging, dat is rustiger en duidelijker voor 55+. Klasse door de JS, alleen bij een échte
   wijziging → geen geflikker bij elke herberekening. */
.lc-pp .elf-pp-diensten .elf-optie-price.elf-price-anim { animation: lc-price-in .22s ease both; }
@keyframes lc-price-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lc-pp .elf-pp-diensten .elf-optie-price.elf-price-anim { animation: none; }
}
/* Geselecteerd = zachte groene "pil" met lucht eromheen, zodat meerdere gekozen diensten
   losse kaartjes lijken i.p.v. één aan-elkaar-geplakt groen blok. */
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected {
  background: #EFF6E6;
  border-radius: 12px;
  border-bottom-color: transparent;
  margin: 4px 0;
}
/* Rij direct ná een gekozen pil verliest z'n bovenlijn niet nodig — maar een gekozen pil die
   op een gewone rij volgt, mag geen dubbel lijntje+gap geven: haal de divider van de rij
   erbóven weg als de volgende gekozen is. */
.lc-pp .elf-pp-diensten .elf-optie-row:not(.is-selected):has(+ .elf-optie-row.is-selected) { border-bottom-color: transparent; }

/* Toevoegen-knop — pil mét tekst ("+ Toevoegen") zodat de actie meteen duidelijk is.
   Toegevoegd → compact ×-rondje (verwijderen). */
.lc-pp .elf-pp-diensten .elf-optie-toggle {
  flex: 0 0 auto; margin-left: 2px;
  padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px;
  border: 1.5px solid #1C7A33; background: #fff; color: #1C7A33;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; position: relative;
  transition: background .15s, color .15s, border-color .15s;
}
.lc-pp .elf-pp-diensten .elf-optie-toggle::before {
  content: "+"; font-size: 16px; font-weight: 700; line-height: 1;
}
/* Tap-target ≥ 40×40 (onzichtbare hitarea) — de knop blijft visueel subtiel; de
   hele rij is bovendien al klikbaar, dus overlap met de rij is geen probleem. */
.lc-pp .elf-pp-diensten .elf-optie-toggle::after {
  content: "";
  position: absolute;
  inset: -9px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
}
.lc-pp .elf-pp-diensten .elf-optie-toggle:hover { background: #EAF4E4; }
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-toggle {
  padding: 0; width: 24px; height: 24px; gap: 0; justify-content: center;
  /* Verwijderen = neutraal-grijs ×: leest als "weghalen" zonder de "dit is goed"-lading van
     groen of het alarm van rood. #586256 op #e3e1d7 = ruim WCAG AA. */
  background: #e3e1d7; border-color: #d6d3c7; color: #586256;
}
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-toggle .elf-tg-txt { display: none; }
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-toggle::before { content: "\00D7"; font-size: 16px; }
.lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-toggle:hover { background: #d6d3c7; border-color: #c7c3b4; }
.lc-pp .elf-pp-diensten .elf-optie-toggle:focus-visible { outline: 2px solid #1C7A33; outline-offset: 2px; }
/* Smal scherm (telefoons): nu de doorgestreepte dubbelprijs weg is, past de volledige
   "+ Toevoegen"-tekstpil weer op één regel — die houden we (duidelijker voor 55+ dan een los
   +-icoon). Het ×-rondje (verwijderen) blijft compact, iets groter voor een goede touch-target. */
@media (max-width: 480px) {
  .lc-off-sidebar { padding: 16px 13px; }
  .lc-pp .elf-pp-diensten .elf-optie-row { padding: 12px 4px; gap: 8px; }
  .lc-pp .elf-pp-diensten .elf-optie-toggle { padding: 6px 10px; }
  .lc-pp .elf-pp-diensten .elf-optie-row.is-selected .elf-optie-toggle {
    width: 28px; height: 28px; padding: 0;
  }
}
/* "Inbegrepen"-label op het energielabel — toont dat het al erin zit (× = eruit halen). */
.lc-pp .elf-pp-diensten .elf-optie-tag {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 600; color: #27500A;
  background: #E2EFD0; border-radius: 999px; padding: 2px 8px;
  margin-left: 6px; vertical-align: middle; white-space: nowrap;
}
.lc-pp .elf-pp-diensten .elf-optie-row:not(.is-selected) .elf-optie-tag { display: none; }

.lc-pp .elf-pp-diensten .elf-dienst-error {
  margin-top: 8px; padding: 8px 11px;
  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.3); border-radius: 8px;
  color: #b53224; font-size: 14px; font-weight: 600; line-height: 1.4;
}
/* Subtiele uitleg-regel onder de diensten-lijst (los vs add-on) — tekst gezet door elf-steps.js. */
.lc-pp .elf-pp-addon-note {
  margin: 9px 2px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #636e6b; /* AA-contrast (≥4.5:1) op wit — gelijk aan de paneel-prijzen */
}
/* v2: de diensten-regels (.elf-pp-diensten) ZIJN de zichtbare lijst; .elf-pp-items wordt
   alleen nog door de JS gebruikt om het totaal te berekenen → visueel verbergen. */
.lc-pp .elf-pp-items { display: none; }
.lc-pp .elf-pp-empty {
  color: #5b6660;
  font-size: 14px;
  line-height: 1.55;
  opacity: 1 !important; /* override plugin's opacity:0.5 */
}
.lc-pp .elf-pp-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  font-size: 14.5px;
  border-bottom: 1px solid #F1ECE2;
}
.lc-pp .elf-pp-item-name { color: #4a5550; flex: 1 1 auto; }
.lc-pp .elf-pp-item-price { color: #1a1f1c; font-weight: 700; white-space: nowrap; } /* zwart */
.lc-pp .elf-pp-item-price.is-aanvraag { color: #7a847f; font-style: italic; font-size: 13px; }
/* Cart-stijl verwijderknop (×) per gekozen extra — direct uit het overzicht halen. */
.lc-pp .elf-pp-remove {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-left: 2px;
  border: 0; background: transparent; color: #b08a7e; cursor: pointer;
  font-size: 18px; line-height: 1; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.lc-pp .elf-pp-remove:hover { background: #f3e6e1; color: #c0392b; }
.lc-pp .elf-pp-remove:focus-visible { outline: 2px solid #c0392b; outline-offset: 1px; }
/* Scheiding tussen de diensten-regels en het totaal (de diensten-lijst heeft geen
   onderrand op de laatste regel → deze dunne lijn markeert de overgang). */
.lc-pp .elf-pp-divider { height: 0; border-top: 1px solid #ECE5D4; background: transparent; margin: 12px 0 0; }
/* Eén positieve besparingsregel ónder het totaal: "U bespaart € 175 met uw energielabel". */
.lc-pp .elf-pp-voordeel {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: #1C7A33; padding: 8px 2px 2px;
}
.lc-pp .elf-pp-voordeel-ic { flex: none; color: #1C7A33; }
.lc-pp .elf-pp-voordeel-val { font-weight: 700; }
.lc-pp .elf-pp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 800;
  color: #1a1f1c;
  padding: 2px 0 0;
}
.lc-pp .elf-pp-total-val { color: #1C7A33; font-size: 21px; font-weight: 800; }
.lc-pp .elf-pp-btw {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #4a5550;
  padding: 3px 0 0;
}
.lc-pp .elf-pp-btw-val { color: #1a1f1c; font-weight: 600; }
.lc-pp .elf-pp-basis {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: #2b333a;
}
/* ── Zachte reveal van het prijs-/totalenblok (was: instant display-flip → schokte de
   inhoud erboven omhoog). Zelfde recept + easing als .elf-optie-row: max-height + opacity
   + visibility-delay, met een prefers-reduced-motion-uitzondering. De prijs vouwt zo rustig
   ván onderen uit i.p.v. er plots in te springen. ─────────────────────────────────────── */
.lc-pp .elf-pp-totals {
  overflow: hidden;
  max-height: 360px;
  opacity: 1;
  transition: opacity .25s ease, max-height .35s ease, visibility 0s;
}
.lc-pp .elf-pp-totals.is-hidden {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, max-height .35s ease, visibility 0s linear .35s;
}
.lc-pp .elf-pp-voordeel,
.lc-pp .elf-pp-subtotal {
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: opacity .25s ease, max-height .3s ease, padding .3s ease, visibility 0s;
}
.lc-pp .elf-pp-voordeel.is-hidden,
.lc-pp .elf-pp-subtotal.is-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
  transition: opacity .25s ease, max-height .3s ease, padding .3s ease, visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
  .lc-pp .elf-pp-totals,
  .lc-pp .elf-pp-voordeel,
  .lc-pp .elf-pp-subtotal { transition: none; }
}
/* Anti-jump: schakel browser-scroll-anchoring uit binnen de wizard, zodat de opties/inhoud
   BOVEN het paneel niet omhoogschieten wanneer de prijs eronder in-/uitvouwt. */
.lc-off, .lc-off-sidebar, .lc-pp { overflow-anchor: none; }
.lc-pp .elf-pp-aanvraag-note {
  margin-top: 10px;
  font-size: 12px;
  color: #7a847f;
  line-height: 1.5;
  font-style: italic;
}
.lc-pp .elf-pp-blocked-note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  background: rgba(227,159,47,0.12);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.55;
  color: #7a5a14;
}
.lc-pp .elf-pp-blocked-note a { color: var(--off-deep); text-decoration: underline; }
/* Bouwjaar 2021+-waarschuwing (plugin): border weg, amber vlak blijft — thema-override (update-veilig). */
.lc-off .elf-bouwjaar-warning { border-color: transparent; }
.lc-pp .elf-pp-item-price.is-blocked {
  color: #b4791c;
  font-style: italic;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ── Step headers ─────────────────────────────────────────────────────────── */
.lc-off-form-col .elf-step-head { margin-bottom: 24px; }
.lc-off-form-col .elf-step-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--off-orange-text); /* was #E89D2C → 2.26:1 op wit; nu 5.65:1 ✅ */
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lc-off-form-col .elf-step-head h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0E3D22;
  margin: 0 0 8px;
  line-height: 1.25;
}
.lc-off-form-col .elf-step-head p {
  font-size: 14px;
  color: #4a5550;
  margin: 0;
  line-height: 1.6;
}

/* ── BAG status card ──────────────────────────────────────────────────────── */
.lc-off-form-col .elf-bag-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(27,94,42,0.06);
  border: 1.5px dashed #2A8F47;
  border-radius: 12px;
  margin: 4px 0 8px;
}
.lc-off-form-col .elf-bag-card-icon { color: #2A8F47; flex-shrink: 0; margin-top: 2px; }
.lc-off-form-col .elf-bag-card-body {
  flex: 1;
  font-size: 14px;
  color: #0E3D22;
  line-height: 1.5;
}
.lc-off-form-col .elf-bag-idle strong { color: #0E3D22; }
.lc-off-form-col .elf-bag-found { color: #0E3D22; font-weight: 600; font-size: 14px; }
.lc-off-form-col .elf-bag-notfound { color: #7a3f00; font-size: 14px; }
/* "Handmatig invullen" — bewuste reddingsroute op een eigen regel, als rustige
   onderstreepte tekst-link (een pill-knop midden in de zin oogde als losse
   UI-brok). Tap-doel blijft ≥40px via min-height; padding is onzichtbaar. */
.lc-off-form-col .elf-bag-manual-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  margin: 2px 0 0;
  color: #1B5E2A;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lc-off-form-col .elf-bag-manual-btn:hover { background: none; color: #0E3D22; }
.lc-off-form-col .elf-bag-loading { color: #1B5E2A; font-size: 14px; }
.lc-off-form-col .elf-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(27,94,42,0.2);
  border-top-color: #1B5E2A;
  border-radius: 50%;
  animation: elf-spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes elf-spin { to { transform: rotate(360deg); } }

/* 12. Oppervlakte box */
.lc-off-form-col .elf-oppervlakte-box {
  background: #FAF5EC;
  border-color: #D8D0BC;
}
.lc-off-form-col .elf-oppervlakte-title { color: #0E3D22; }
.lc-off-form-col .elf-oppervlakte-desc { color: #4a5550; }

/* 13. Checkbox text */
.lc-off-form-col .elf-checkbox-text { color: #4a5550; }

/* 14. Klanttype toggle (Particulier / Zakelijk) */
.lc-off-form-col .elf-klanttype-toggle {
  background: #FAF5EC;
  border-color: #E8E2D2;
}
.lc-off-form-col .elf-klanttype-btn {
  color: #636e6b;
}
.lc-off-form-col .elf-klanttype-btn:not(.is-active):hover {
  color: #0E3D22;
  background: #EDE8DA;
}
/* Actieve knop: brand-groen (zelfde als ✓/stip/totaalprijs) */
.lc-off-form-col .elf-klanttype-btn.is-active {
  background: #1C7A33;
  color: #fff;
}

/* 15. Custom select (elf-select) */
.lc-off-form-col .elf-select {
  background: #fff;
  border-color: #D8D0BC;
  color: #0E3D22;
}
.lc-off-form-col .elf-select:focus {
  border-color: #1B5E2A;
}
.lc-off-form-col .elf-control:has(.elf-select)::after {
  border-color: #0E3D22;
}

/* 16. Address preview (step 2) */
.lc-off-form-col .elf-address-preview {
  background: rgba(14,61,34,0.06);
  border-color: rgba(14,61,34,0.20);
}
.lc-off-form-col .elf-address-text { color: #0E3D22; }

/* 17. Field hint text */
.lc-off-form-col .elf-field-hint { color: #636e6b; }

/* ── Sidebar = één samengevoegde kaart (vectorizer-stijl: wit, zachte rand + schaduw) ── */
.lc-off-sidebar {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid #E7E1D4;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(14,61,34,0.06);
  padding: 22px 22px 20px;
}
.lc-off-side-sep { height: 1px; background: #F1ECE2; margin: 18px 0; }
/* Hoofdscheiding ná het prijs-gedeelte: dunne lijn + dikke witruimte zodat alles eronder duidelijk losstaat van de prijs */
.lc-off-side-sep--major { background: #E7E1D4; margin: 26px 0 20px; }
/* Urgentie: compacte regel (staat nu ónder de hoofdscheiding, dus geen eigen bovenmarge) */
.lc-off-side-urgency { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #1a1f1c; }
.lc-off-side-urgency strong { color: #1a1f1c; }
/* Trust footer: prijsanker onder de reviews */
.lc-off-side-anchor { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #1a1f1c; }
.lc-off-side-anchor strong { color: #0a3f17; font-size: 16px; }
.lc-off-side-trust {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 0 14px rgba(14,61,34,0.07), 0 2px 8px rgba(14,61,34,0.06);
}
.lc-off-side-help {
  background: var(--off-cream);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 0 14px rgba(14,61,34,0.07), 0 2px 8px rgba(14,61,34,0.06);
}
/* "In het kort"-feitenkaart in de sidebar: alle borders weg (ook de oranje linkerrand) + zachte rondom-schaduw */
.lc-off-sidebar .lc-facts {
  border: 1px solid transparent;
  box-shadow: 0 0 14px rgba(14,61,34,0.07), 0 2px 8px rgba(14,61,34,0.06);
}
.lc-off-side-trust h3,
.lc-off-side-help h3,
.lc-off-side-trust h4,
.lc-off-side-help h4 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--off-orange-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lc-off-side-trust h3::before,
.lc-off-side-help h3::before,
.lc-off-side-trust h4::before,
.lc-off-side-help h4::before { content: "–"; }

.lc-off-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lc-off-trust-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--off-ink-soft);
}
.lc-off-trust-list li svg { color: var(--off-green-soft); flex-shrink: 0; margin-top: 3px; }
.lc-off-trust-list li strong { color: var(--off-deep); }

.lc-off-help-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--off-border-s);
  font-size: 14px;
  color: var(--off-ink-soft);
}
.lc-off-help-row:last-child { border-bottom: 0; }
.lc-off-help-row .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--off-green-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lc-off-help-row .bd { flex: 1; }
.lc-off-help-row .bd strong { color: var(--off-deep); font-weight: 700; display: block; font-size: 14px; }
.lc-off-help-row .bd span { color: var(--off-muted); font-size: 12.5px; }

/* ── CTA banner ──────────────────────────────────────────────────────────── */
.lc-off-cta { padding: 80px 0 100px; background: var(--off-cream); }
.lc-off-cta-inner {
  background: var(--off-deep); color: #fff; border-radius: 28px; padding: 64px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
  position: relative; overflow: hidden;
}
.lc-off-cta-inner::before {
  content: ""; position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,157,44,0.15), transparent 70%);
  pointer-events: none;
}
.lc-off-cta-content { position: relative; z-index: 1; }
.lc-off-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 19px; font-weight: 700; color: var(--off-orange); /* 19px — uniform met alle site-eyebrows (was 15px) */
}
.lc-off-eyebrow::before { content: "–"; }
.lc-off-cta-content h2 {
  font-size: clamp(26px, 3vw, 38px); line-height: 1.12;
  color: #fff; font-weight: 800; margin: 14px 0 0;
}
.lc-off-cta-content h2 .accent { color: var(--off-orange); }
.lc-off-cta-content p { color: rgba(255,255,255,0.78); margin: 14px 0 0; font-size: 16px; line-height: 1.65; }
.lc-off-cta-bullets {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 9px;
}
.lc-off-cta-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: rgba(255,255,255,0.82); font-weight: 500;
}
.lc-off-cta-bullets li svg { color: var(--off-green-soft); flex-shrink: 0; }
.lc-off-cta-actions { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.lc-off-btn-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 16px;
  background: var(--off-orange); color: var(--off-deep) !important; text-decoration: none; border: none;
  transition: background .15s, transform .12s;
} /* wit op #e39f2f = 2.26:1; donkergroen 5.34:1 ✅ */
.lc-off-btn-o:hover { background: #ffb340; color: var(--off-deep) !important; transform: translateY(-1px); }
.lc-off-btn-g {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 16px;
  background: transparent; color: #fff !important; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: background .15s, border-color .15s;
}
.lc-off-btn-g:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.lc-off-cta-trust { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: rgba(255,255,255,0.65); font-size: 13px; }
.lc-off-cta-trust .stars { color: var(--off-yellow); letter-spacing: 1px; }

/* ── FAQ — white background on this page ────────────────────────────────── */
.lc-faq-block { background: #fff; }

/* ── Pakketten-vergelijkingstabel ────────────────────────────────────────── */
.lc-off-compare { background: var(--off-cream); padding: 56px 0; }
.lc-off-compare__head { text-align: center; margin-bottom: 26px; }
.lc-off-compare__eyebrow { font-size: 19px; font-weight: 700; color: var(--off-orange-text); } /* 19px bold = large text → 3:1 voldoende (AA) + gelijk aan eyebrow-systeem */
.lc-off-compare__head h2 { font-size: clamp(24px,3vw,32px); color: var(--off-deep); margin: 8px 0 0; font-weight: 800; }
.lc-off-compare__scroll { overflow-x: auto; max-width: 900px; margin: 0 auto; -webkit-overflow-scrolling: touch; }
.lc-off-compare__table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px -14px rgba(10,63,23,.25); }
.lc-off-compare__table th, .lc-off-compare__table td { padding: 13px 14px; text-align: center; font-size: 14px; border-bottom: 1px solid #EEE8DA; }
.lc-off-compare__table thead th { background: var(--off-deep); color: #fff; font-weight: 800; }
.lc-off-compare__table thead th.is-featured { background: #0a3f17; box-shadow: inset 0 -3px 0 var(--off-orange); }
.lc-off-compare__table tbody th { text-align: left; font-weight: 600; color: #41474d; }
.lc-off-compare__table td.is-featured { background: rgba(227,159,47,.09); }
.lc-off-compare__table .ci-yes { color: #2d6a4f; font-weight: 800; font-size: 16px; }
.lc-off-compare__table .ci-no { color: #c3bdab; }
.lc-off-compare__price th, .lc-off-compare__price td { font-weight: 800; color: var(--off-deep); border-top: 2px solid #E8E2D2; border-bottom: none; }
.lc-off-compare__note { text-align: center; font-size: 13px; color: #636e6b; margin: 16px auto 0; max-width: 760px; line-height: 1.6; }
.lc-off-compare__note strong { color: var(--off-deep); }
@media (max-width: 600px) { .lc-off-compare__table th, .lc-off-compare__table td { padding: 10px 8px; font-size: 12.5px; } }
/* Diensten & prijzen variant: links uitgelijnde tekst, prijs rechts */
.lc-off-compare__table--diensten { border-radius: 12px; min-width: 520px; }
.lc-off-compare__table--diensten thead th { text-align: left; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.lc-off-compare__table--diensten thead th:last-child { text-align: right; }
.lc-off-compare__table--diensten tbody th { font-weight: 800; color: var(--off-deep); white-space: nowrap; }
.lc-off-compare__table--diensten tbody td { text-align: left; color: #54605b; line-height: 1.5; }
.lc-off-compare__table--diensten tbody tr:last-child td, .lc-off-compare__table--diensten tbody tr:last-child th { border-bottom: none; }
.lc-off-compare__table--diensten td.lc-off-compare__p { text-align: right; font-weight: 800; color: var(--off-deep); white-space: nowrap; }
/* 4-koloms woning-tabel: "Los" náást "Met energielabel". Prijs-koppen rechts; de combi-kolom
   = het voordeel → licht groen uitgelicht + oranje accent onder de kop. "—" = niet los. */
.lc-off-compare__table--diensten { min-width: 620px; }
.lc-off-compare__table--diensten thead th:nth-child(3),
.lc-off-compare__table--diensten thead th:nth-child(4) { text-align: right; }
.lc-off-compare__table--diensten thead th.lc-off-compare__th--combi { box-shadow: inset 0 -3px 0 var(--off-orange); }
.lc-off-compare__table--diensten td.lc-off-compare__p--combi { background: #EFF6E6; color: #155E27; } /* #155E27 op #EFF6E6 ≈ 6:1 (WCAG AA); #1C7A33 was ~4,4:1 */
.lc-off-compare__table--diensten td.lc-off-compare__p--nvt { color: #6f756e; }
/* Energielabel = basisdienst → lege (transparante) combi-cel, geen "—", geen groen. */
.lc-off-compare__table--diensten td.lc-off-compare__p--empty { background: transparent; }
/* Spoedservice = vaste toeslag over béide prijskolommen (colspan) → geen los/combi-splitsing. */
.lc-off-compare__flatnote { font-weight: 600; font-size: 12px; color: #636e6b; margin-left: 4px; } /* #636e6b = 5,29:1 op wit (AA) */
/* ── Mobiel (≤700px): tabel klapt om naar kaartjes ──────────────────────────
   Op smal scherm passen 3-4 kolommen niet → horizontaal scrollen verbergt de
   prijzen (het hele punt). Daarom wordt elke rij een kaartje: dienstnaam = kop,
   omschrijving eronder, prijzen als gelabelde regels (label via data-label).
   Combi-regel = groen pilletje binnen de kaart. Puur CSS; desktop ongewijzigd. */
@media (max-width: 700px) {
  .lc-off-compare__scroll { overflow-x: visible; }
  .lc-off-compare__table--diensten { min-width: 0; border-radius: 0; background: transparent; box-shadow: none; }
  /* Kop verbergen (visueel); labels komen per cel terug via data-label. */
  .lc-off-compare__table--diensten thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
  .lc-off-compare__table--diensten tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #E8E2D2;
    border-radius: 12px;
    box-shadow: 0 6px 18px -12px rgba(10,63,23,.28);
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .lc-off-compare__table--diensten tbody tr:last-child { margin-bottom: 0; }
  .lc-off-compare__table--diensten tbody th,
  .lc-off-compare__table--diensten tbody td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; }
  /* Dienstnaam = kaart-kop. */
  .lc-off-compare__table--diensten tbody th { font-size: 15.5px; margin-bottom: 3px; }
  /* "Wat het is" = de cel zonder prijs-class. */
  .lc-off-compare__table--diensten tbody td:not(.lc-off-compare__p) { color: #54605b; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
  /* Prijs-cellen = gelabelde regel: label links (auto-marge), bedrag rechts. */
  .lc-off-compare__table--diensten tbody td.lc-off-compare__p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid #F1ECE2;
    font-size: 14.5px;
  }
  .lc-off-compare__table--diensten tbody td.lc-off-compare__p::before {
    content: attr(data-label);
    margin-right: auto;
    font-weight: 600;
    color: #54605b;
    font-size: 13px;
  }
  /* Combi-regel = het voordeel → groen pilletje binnen de kaart. */
  .lc-off-compare__table--diensten tbody td.lc-off-compare__p--combi {
    background: #EFF6E6;
    border-top: 0;
    border-radius: 8px;
    padding: 8px 11px;
    margin-top: 7px;
  }
  .lc-off-compare__table--diensten tbody td.lc-off-compare__p--combi::before { color: #155E27; }
  /* Basisdienst heeft geen combi-cel → verberg de lege plek in de kaart. */
  .lc-off-compare__table--diensten tbody td.lc-off-compare__p--empty { display: none; }
}

/* ── Diensten-toggle: Woningen ↔ Bedrijfspanden (pure CSS, geen JS) ────────── */
.lc-off-compare__cats { max-width: 900px; margin: 0 auto; text-align: center; }
.lc-off-compare__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lc-off-compare__pills { display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 24px; background: #fff; border: 1px solid #E7E1D4; border-radius: 999px; box-shadow: 0 6px 18px -12px rgba(10,63,23,.28); }
.lc-off-compare__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 800; color: #54605b; cursor: pointer; transition: background .2s, color .2s; user-select: none; -webkit-user-select: none; }
.lc-off-compare__pill svg { opacity: .85; transition: opacity .2s; }
.lc-off-compare__pill:hover { color: var(--off-deep); }
.lc-off-compare__panel { display: none; }
.lc-off-compare__btw { font-weight: 700; font-size: 12px; color: #7a857f; letter-spacing: .01em; }
/* Actieve pill + bijbehorend paneel via :checked ~ sibling */
#lc-off-cat-won:checked ~ .lc-off-compare__pills label[for="lc-off-cat-won"],
#lc-off-cat-uti:checked ~ .lc-off-compare__pills label[for="lc-off-cat-uti"] { background: var(--off-deep); color: #fff; }
#lc-off-cat-won:checked ~ .lc-off-compare__pills label[for="lc-off-cat-won"] svg,
#lc-off-cat-uti:checked ~ .lc-off-compare__pills label[for="lc-off-cat-uti"] svg { opacity: 1; }
#lc-off-cat-won:checked ~ .lc-off-compare__panel--won,
#lc-off-cat-uti:checked ~ .lc-off-compare__panel--uti { display: block; }
/* Toetsenbord-focus zichtbaar op de gefocuste pill */
#lc-off-cat-won:focus-visible ~ .lc-off-compare__pills label[for="lc-off-cat-won"],
#lc-off-cat-uti:focus-visible ~ .lc-off-compare__pills label[for="lc-off-cat-uti"] { outline: 2px solid var(--off-orange); outline-offset: 2px; }
@media (max-width: 600px) { .lc-off-compare__pill { padding: 9px 18px; font-size: 13.5px; } }

/* ── Slanke focus-header (mobiel, alleen /offerte-aanvragen/): logo + telefoon ──
   Verbergt de volledige Neve-header + groene topbar tijdens het aanvragen → minder
   uitgangen/afleiding. Desktop houdt de normale header (.lc-focus-bar blijft verborgen). */
.lc-focus-bar { display: none; }
@media (max-width: 960px) {
  body.lc-focus-flow .topbar-extra,
  body.lc-focus-flow .labelcert-breadcrumb-bar,
  body.lc-focus-flow header.header { display: none !important; }
  body.lc-focus-flow .lc-focus-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 100;
    padding: 10px 16px; background: #fff;
    border-bottom: 1px solid #E8E2D2;
    box-shadow: 0 1px 6px rgba(14,61,34,0.06);
  }
  body.lc-focus-flow .lc-focus-bar__logo { display: inline-flex; align-items: center; font-weight: 800; color: #0E3D22; text-decoration: none; font-size: 18px; }
  body.lc-focus-flow .lc-focus-bar__logo img,
  body.lc-focus-flow .lc-focus-bar .custom-logo { height: 30px; width: auto; display: block; }
  body.lc-focus-flow .lc-focus-bar__tel {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 14px; color: #0E3D22; text-decoration: none; white-space: nowrap;
  }
  body.lc-focus-flow .lc-focus-bar__tel svg { color: #1C7A33; }
}

/* ── Mobiele trust-strip boven de wizard (desktop heeft de sidebar-proof al) ── */
.lc-off-trust { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* v2-mobiel: het prijspaneel (met diensten-toggles + live prijs) MOET boven het
     contactformulier staan, zodat de bezoeker eerst kiest+ziet wat het kost. We
     stapelen daarom met flex en zetten de sidebar vóór de form-kolom (order). */
  .lc-off-wizard-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .lc-off-sidebar { position: static; order: 0; }
  .lc-off-form-col { order: 1; }
  .lc-off-cta-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px; }

  .lc-off-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px;
    margin: 0 0 14px; padding: 11px 14px;
    background: #fff; border: 1px solid #E8E2D2; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(14,61,34,0.05);
    font-size: 13px; line-height: 1.3; color: #0E3D22; font-weight: 600;
  }
  /* Gestapeld staat de sidebar-reviewregel pal bóven deze trust-strip →
     zelfde sterren/EP-adviseur 2x onder elkaar. Eén keer is genoeg (verzoek
     Bas 02-07): op mobiel wint de strip bij het formulier, de sidebar-regel
     (+ de losse scheidingslijn erboven) gaat uit. */
  .lc-off-proof,
  .lc-off-side-sep:not(.lc-off-side-sep--major) { display: none; }
  .lc-off-trust__item { display: inline-flex; align-items: center; }
  .lc-off-trust__item svg { color: #1B5E2A; }
  .lc-off-trust__stars { color: #E89D2C; letter-spacing: 1px; margin-right: 5px; }
  .lc-off-trust a { color: inherit; text-decoration: none; }
}

/* Mobiele sticky prijsbalk verwijderd — de prijs staat al bovenaan in het paneel; de bezoeker scrollt gewoon. */