/* File: /wp-content/plugins/energy-label-form/assets/css/elf-form.css */
:root{
  --elf-green:#0A3F17;
  --elf-btn: var(--main, #4e8f22); /* inherits theme primary color */
  --elf-orange:#E39F2F;
  --elf-white:#ffffff;
  --elf-cream:#FFF7D6;
}

/* Common */
.elf-field{margin:0 0 18px;position:relative}
.elf-field label{
  color:#fff;
  font-weight:500;
  display:block;
  margin:0 0 8px;
  font-size:16px;
}
.req{color:#ff5b5b;margin-left:2px}

.elf-control{position:relative}
.elf-control select{
  width:100%;
  height:54px;
  border-radius:6px;
  border:0;
  outline:0;
  background:#fff;
  padding:0 46px 0 18px;
  font-size:18px;
  font-weight:600;
  color:#0b3b1a;
  appearance:none;
}
.elf-control .elf-chevron{
  position:absolute;
  right:18px; top:50%;
  width:10px; height:10px;
  border-right:2px solid #1f3f2a;
  border-bottom:2px solid #1f3f2a;
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}

.elf-grid-2{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-items:start}
.elf-grid-2-tight{column-gap:26px}

/* =====================================================
   CUSTOM DROPDOWN COMPONENT
   ===================================================== */

.elf-dropdown {
  position: relative;
  width: 100%;
}

.elf-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.elf-dropdown-trigger:hover {
  border-color: var(--elf-btn);
}

.elf-dropdown.is-open .elf-dropdown-trigger {
  border-color: var(--elf-btn);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.elf-dropdown-value {
    font-size: 14px;
    font-weight: 600;
    color: #0A3F17;
}

.elf-dropdown-arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid #0A3F17;
  border-bottom: 2px solid #0A3F17;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.elf-dropdown.is-open .elf-dropdown-arrow {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.elf-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--elf-btn);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 100;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.elf-dropdown.is-open .elf-dropdown-menu {
  max-height: 250px;
  overflow-y: auto;
  opacity: 1;
}

.elf-dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.15s ease;
}

.elf-dropdown-item:hover {
  background: #F9FAFB;
}

.elf-dropdown-item.is-selected {
  font-weight: 700;
  color: #0A3F17;
}

/* Hover state - show yellow background */
.elf-dropdown.is-open .elf-dropdown-trigger,
.elf-dropdown.is-open .elf-dropdown-menu {
  background: var(--elf-cream);
}

.elf-dropdown.is-open .elf-dropdown-item:hover {
  background: rgba(139, 186, 63, 0.1);
}

/* Valid state */
.elf-field.has-success .elf-dropdown-trigger {
  background: var(--elf-cream);
  border-color: var(--elf-btn);
}

/* Error state */
.elf-field.has-error .elf-dropdown-trigger {
  border-color: #EF4444;
}

.elf-field input,
.elf-field textarea{
  width:100%;
  border-radius:4px;
  border:0;
  outline:0;
  background:var(--elf-cream);
  padding:12px 14px;
  font-size:16px;
}
.elf-field input::placeholder,
.elf-field textarea::placeholder{color:#9aa59a}

/* Buttons */
.elf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--elf-btn);
  color:#fff;
  border:0;
  border-radius:var(--radius-btn, 50px);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.elf-btn-lg{height:78px;width:100%;font-size:26px}
.elf-btn-sm{height:44px;min-width:138px;padding:0 18px;font-size:14px}
.elf-arrow{
  width:10px;height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* Progress */
.elf-progress{margin:18px 0 22px}
.elf-progress-row{
  display:grid;
  grid-template-columns:28px 1fr 28px 1fr 28px;
  align-items:center;
  gap:0;
}
.elf-dot{
  width:28px;height:28px;border-radius:999px;
  background:#183b22;
  display:flex;align-items:center;justify-content:center;
  color:#8ea592;font-weight:800;font-size:12px;
}
.elf-dot.is-active{background:var(--elf-orange);color:#1b2e1b}
.elf-line{height:3px;background:#2a4a34}
.elf-line.is-active{background:var(--elf-orange)}
.elf-progress-labels{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  font-size:12px;
  color:#8ea592;
  text-align:center;
}
.elf-progress-labels .is-active{color:var(--elf-orange);font-weight:700}

/* Adres-bevestiging op stap 1 (overgenomen van homepage-invoer) */
.elf-addr-ack{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 20px;padding:11px 14px;
  background:rgba(139,186,63,.12);
  border:1px solid rgba(139,186,63,.40);
  border-radius:10px;
  color:#2c5118;font-size:14px;line-height:1.4;
}
.elf-addr-ack[hidden]{display:none}
.elf-addr-ack svg{flex:0 0 auto;color:#6fa832}
.elf-addr-ack strong{font-weight:700;color:#1f3d12}

/* Wide progress bar for steps page - full width layout */
.elf-progress-wide {
  margin: 0 0 28px;
}
.elf-progress-wide .elf-progress-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.elf-progress-wide .elf-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 11px;
  font-weight: 700;
  background: var(--elf-orange);
  color: #1a3d24;
  opacity: 0.5;
}
.elf-progress-wide .elf-dot.is-active {
  opacity: 1;
}
.elf-progress-wide .elf-line {
  flex: 1;
  height: 2px;
  background: var(--elf-orange);
  opacity: 0.35;
}
.elf-progress-wide .elf-line.is-active {
  opacity: 1;
}
.elf-progress-wide .elf-progress-labels {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
}
.elf-progress-wide .elf-progress-labels > div {
  color: var(--elf-orange);
  opacity: 0.35;
}
.elf-progress-wide .elf-progress-labels > div:first-child {
  text-align: left;
}
.elf-progress-wide .elf-progress-labels > div:nth-child(2) {
  text-align: center;
}
.elf-progress-wide .elf-progress-labels > div:last-child {
  text-align: right;
}
.elf-progress-wide .elf-progress-labels > div.is-active {
  opacity: 1;
  font-weight: 700;
}

/* =========================================================
   HOME CARD (Figma / No wave cut)
   - Page builder controls section background
   - Only the orange angled block sits behind the green card
   ========================================================= */

.elf-home-card-wrap{
  position:relative;
  padding:0;
  z-index:10;
  overflow:visible; /* IMPORTANT so orange can show */
}

/* card */
.elf-home-card {
    position: relative;
    background: var(--elf-green);
    border-radius: 10px;
    padding: 20px;
    max-width: 400px;
    margin-left: auto;
    overflow: visible;
    margin-top: -145px;
    padding-left: 10px;
}

/* orange shape behind (exact style approach from Figma) */
.elf-home-card::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 50px;
    bottom: 80px;
    width: 96px;
    background: var(--elf-orange);
    border-radius: 10px;
    transform: rotate(-8deg);
    z-index: -1;
}
.elf-home-card::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 140px; /* breder (was 84): door de skewX schuift de onderrand zó ver naar links
                     dat z'n rechterkant de afgeronde kaarthoek niet meer afdekte → daar viel
                     het V-gaatje. Breder = de rechterkant dekt de hoek wél af, achter de kaart. */
    background: var(--elf-green);
    border-radius: 12px; /* rondom afgerond (zoals origineel); de inkeping is opgelost via de breedte hierboven, niet via de hoeken */
    transform: skewX(-9deg);
    transform-origin: top left;
    z-index: -1;
}

/* title */
.elf-home-title{
  text-align:center;
  color:#fff;
  font-size:20px;
  font-weight:700;
  margin:0 0 14px;
  letter-spacing:-0.3px;
}

/* progress (compact) */
.elf-home-card .elf-progress{margin:0 0 20px}
.elf-home-card .elf-progress-row {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    max-width: 75%;
    margin: 0 auto;
}
/* Inactieve stap = omlijnd rondje (oranje op donkergroen = 5,3:1), actieve stap =
   gevuld oranje. Geen halve opacity meer — die maakte de cijfers onleesbaar (55+). */
.elf-home-card .elf-dot{
  width:22px;
  height:22px;
  font-size:12px;
  font-weight:700;
  background:transparent;
  border:2px solid var(--elf-orange);
  color:var(--elf-orange);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.elf-home-card .elf-dot.is-active{
  background:var(--elf-orange);
  color:#1a3d24;
}
.elf-home-card .elf-line{
  height:2px;
  background:var(--elf-orange);
  opacity: 0.5;
}
.elf-home-card .elf-line.is-active{
  opacity: 1;
}
.elf-home-card .elf-progress-labels{
  margin:8px auto 0;
  max-width:75%;
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:13px;
  text-align:center;
  font-weight:500;
}
/* Volle dekking: oranje op donkergroen = 5,3:1 (was 50% opacity ≈ onleesbaar). */
.elf-home-card .elf-progress-labels > div{
  color:var(--elf-orange);
}
.elf-home-card .elf-progress-labels > div:first-child{text-align:left}
.elf-home-card .elf-progress-labels > div:last-child{text-align:right}
.elf-home-card .elf-progress-labels > div.is-active{
  font-weight:700;
}

/* fields */
.elf-home-card .elf-field{margin:0 0 14px}
.elf-home-card .elf-field label{
  font-size:15px;
  margin:0 0 8px;
  font-weight:500;
  color:#fff;
  display:block;
}

/* selects */
.elf-home-card .elf-control select{
  height:44px;
  border-radius:6px;
  padding:0 40px 0 16px;
  font-size:15px;
  font-weight:600;
  color:#0a3f17;
  background:#ffffff;
  border:none;
  box-shadow:none;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.elf-home-card .elf-control select:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(139, 186, 63, 0.3);
}
.elf-home-card .elf-control .elf-chevron{
  right:16px;
  width:8px;
  height:8px;
  border-right:2px solid #0a3f17;
  border-bottom:2px solid #0a3f17;
}

/* grid gap */
.elf-home-card .elf-grid-2{column-gap:14px}

/* button */
.elf-home-card .elf-btn-lg{
  height:56px;
  font-size:18px;
  font-weight:600;
  border-radius:var(--radius-btn, 50px);
  margin-top:8px;
  background:var(--elf-btn);
  color:#fff;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  cursor:pointer;
  transition:background 0.2s ease;
}
.elf-home-card .elf-btn-lg:hover{background:#9cc84a}

/* =========================================================
   STEPS SHELL (Screenshots #2-6)
   ========================================================= */

.elf-steps-shell{
  background:var(--elf-green);
  padding:28px 0 36px;
}
.elf-steps-inner{
  width:min(840px, calc(100% - 0px));
  margin:0 auto;
}
.elf-step-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
}
.elf-step-actions-right{justify-content:flex-end}
.elf-step-actions-summary{
  margin-top:18px;
  align-items:center;
}

/* Back square button */
.elf-back-square{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:4px;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.elf-back-square:before{
  content:"";
  position:absolute;
  left:14px; top:50%;
  width:8px;height:8px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-50%) rotate(45deg);
}

/* Summary (Screenshot #5) */
.elf-summary-card{
  background:#edf6ee;
  border-radius:6px;
  overflow:hidden;
  margin-top:18px;
}
.elf-summary-head {
    background: var(--elf-orange);
    color: #0a2d13;
    font-weight: 900;
    text-align: center;
    font-size: 28px;
    padding: 18px 60px;
    position: relative;
}

/* Inner wrapper */
.elf-summary-head-inner {
    position: relative;
    z-index: 2;
}

/* Dark green corner - Left */
.elf-summary-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 57px solid var(--elf-green);
    border-right: 40px solid transparent;
}

/* Dark green corner - Right */
.elf-summary-head::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 57px solid var(--elf-green);
    border-left: 40px solid transparent;
}

/* Lime accent - Left (diagonal stripe inside dark green) */
.elf-summary-head-inner::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -60px;
    width: 0;
    height: 0;
    border-top: 57px solid var(--elf-btn);
    border-right: 15px solid transparent;
}

/* Lime accent - Right (diagonal stripe inside dark green) */
.elf-summary-head-inner::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -60px;
    width: 0;
    height: 0;
    border-bottom: 57px solid var(--elf-btn);
    border-left: 15px solid transparent;
}

.elf-summary-body{padding:18px 20px 22px}
.elf-summary-loading{color:#234;opacity:.8}

/* Homepage-draft laad-indicator — kort zichtbaar tot de BAG-lookup de juiste stap kiest
   (voorkomt dat stap 1 even flitst voordat 'ie naar Extra's springt). */
.elf-boot-loader{display:flex;align-items:center;justify-content:center;gap:10px;padding:64px 20px;color:#234;font-size:15px;font-weight:600;text-align:center;}
.elf-srow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(10,63,23,.12);
  font-size:14px;
}
.elf-srow:last-child{border-bottom:0}
.elf-sleft{display:flex;align-items:center;gap:10px}
.elf-sicon{width:18px;display:inline-flex;justify-content:center;align-items:center}
.elf-sicon-img{width:18px;height:18px;object-fit:contain}
.elf-slabel{color:#1a3b21}
.elf-svalue{color:#1a3b21;font-weight:800;text-align:right}
.elf-sdivider{
  height:1px;
  background:rgba(10,63,23,.15);
  margin:10px 0 8px;
}

.elf-terms{
  margin-top:14px;
  color:#fff;
  font-size:12px;
}
.elf-terms-title{font-weight:800;margin-bottom:6px}
.elf-check{display:flex;align-items:center;gap:8px;color:#d9e7dc}
.elf-check input{accent-color:var(--elf-btn)}

/* Thank you (Screenshot #6) */
.elf-thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 10px;
}
.elf-thanks-icon{
  width:56px;height:56px;border-radius:999px;
  border:2px solid var(--elf-btn);
  position:relative;
}
.elf-thanks-icon:after{
  content:"";
  position:absolute;
  left:18px; top:18px;
  width:16px;height:10px;
  border-left:3px solid var(--elf-btn);
  border-bottom:3px solid var(--elf-btn);
  transform:rotate(-45deg);
}
.elf-thanks-title{
  color:#fff;
  font-size:26px;
  font-weight:900;
}
.elf-thanks-sub {
    color: #d9e7dc;
    font-size: 12px;
    max-width: 520px;
    margin-bottom: 20px;
}

/* Step 2 - Oppervlakte panel (when address not found) */
.elf-oppervlakte-box{
  background:#fff7d6;
  border:1px solid rgba(10,63,23,.25);
  border-radius:4px;
  padding:14px 14px 10px;
  margin:16px 0 18px;
}
.elf-oppervlakte-title{
  font-weight:800;
  color:#0a2d13;
  margin-bottom:6px;
}
.elf-oppervlakte-desc{
  font-size:12px;
  color:#3a543d;
  line-height:1.4;
  margin-bottom:10px;
}
.elf-field--compact{margin:0}

/* White inputs (email/phone/textarea in screenshot #4) */
.elf-input-white{background:#ffffff !important}

/* =====================================================
   INPUT FIELD STATES (Normal, Focus, Error)
   ===================================================== */

/* Normal State */
.elf-field input[type="text"],
.elf-field input[type="email"],
.elf-field input[type="tel"],
.elf-field input[type="number"],
.elf-field textarea,
.elf-field select {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  color: #0A3F17;
  outline: none;
  transition: all 0.2s ease;
}

/* Native number-spinner (op/neer-pijltjes) verbergen: die botste met het groene
   validatie-vinkje rechts in het veld (zelfde positie). Veld blijft numeriek. */
.elf-field input[type="number"]::-webkit-outer-spin-button,
.elf-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.elf-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.elf-field textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

.elf-field input::placeholder,
.elf-field textarea::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

/* Labels */
.elf-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 500;
}

.elf-field label .req {
  color: #EF4444;
  margin-left: 2px;
}

/* Hover State */
.elf-field input:hover,
.elf-field textarea:hover,
.elf-field select:hover {
  border-color: var(--elf-btn);
}

/* Focus State */
.elf-field input:focus,
.elf-field textarea:focus,
.elf-field select:focus {
  background-color: var(--elf-cream, #FFF7D6);
  border-color: var(--elf-btn);
  box-shadow: none;
}

/* Error State */
.elf-field.has-error input,
.elf-field.has-error textarea,
.elf-field.has-error select,
.elf-field input.is-invalid,
.elf-field textarea.is-invalid,
.elf-field select.is-invalid {
  background-color: #ffffff;
  border-color: #EF4444;
  padding-right: 44px;
}

/* Error Icon (warning triangle) */
.elf-field.has-error .elf-control::after,
.elf-field .elf-control.has-error::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 3.83L19.17 19H4.83L12 5.83zM11 16h2v2h-2v-2zm0-6h2v4h-2v-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Error Message — ≥14px + donker rood (#B3261E = 6,5:1 op wit, 6,0:1 op crème):
   foutmeldingen zijn hét afhaakmoment; die moeten juist het best leesbaar zijn. */
.elf-error-msg {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.35;
  color: #B3261E;
  font-weight: 600;
}
/* Op de donkergroene homepage-kaart is donkerrood onleesbaar → lichte rood-tint
   (#FFB4A8 op #0A3F17 = 7,1:1). */
.elf-home-card .elf-error-msg { color: #FFB4A8; }
/* Desktop: foutmelding absoluut onder het veld → de veldhoogte verandert niet,
   dus het formulier verspringt niet wanneer de melding verschijnt/verdwijnt. */
@media (min-width: 769px) {
  .elf-field { margin-bottom: 28px; }
  .elf-error-msg {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 3px;
  }
  /* …behalve in het stappenformulier: daar staat direct onder de velden de
     BAG-kaart, en een melding van 2 regels (bv. de postcode-hint) liep daar
     dwars doorheen. In de flow schuift de kaart gewoon mee omlaag. */
  .elf-steps-shell .elf-error-msg {
    position: static;
    margin-top: 6px;
  }
  /* Idem op de compacte homecard: de velden staan dicht op elkaar (14px), waardoor
     een absolute 2-regelige postcode-melding over het "Toevoeging"-label heen viel
     (onleesbaar). In de flow duwt de melding netjes mee omlaag. */
  .elf-home-card .elf-error-msg {
    position: static;
    margin-top: 6px;
  }
}

/* =====================================================
   CHECKBOX STYLES
   ===================================================== */

/* Hide default checkbox */
.elf-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.elf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.elf-checkbox-box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #9CA3AF;
  border-radius: 4px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Checkbox checkmark (hidden by default) */
.elf-checkbox-box::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Checkbox hover */
.elf-checkbox:hover .elf-checkbox-box {
  border-color: var(--elf-btn);
}

/* Checkbox checked state */
.elf-checkbox input[type="checkbox"]:checked + .elf-checkbox-box {
  background-color: var(--elf-btn);
  border-color: var(--elf-btn);
}

.elf-checkbox input[type="checkbox"]:checked + .elf-checkbox-box::after {
  opacity: 1;
}

/* Checkbox label text */
.elf-checkbox-text {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.4;
}

.elf-checkbox-text a {
  color: var(--elf-btn);
  text-decoration: underline;
}

/* Checkbox error state */
.elf-checkbox.has-error .elf-checkbox-box {
  border-color: #EF4444;
}

/* =====================================================
   RADIO BUTTON STYLES
   ===================================================== */

.elf-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.elf-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.elf-radio-circle {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #9CA3AF;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.elf-radio-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--elf-btn);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.elf-radio:hover .elf-radio-circle {
  border-color: var(--elf-btn);
}

.elf-radio input[type="radio"]:checked + .elf-radio-circle {
  border-color: var(--elf-btn);
}

.elf-radio input[type="radio"]:checked + .elf-radio-circle::after {
  opacity: 1;
}

/* =====================================================
   SELECT DROPDOWN STYLES
   ===================================================== */

.elf-select-wrap {
  position: relative;
}

.elf-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.elf-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #0A3F17;
  border-bottom: 2px solid #0A3F17;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.elf-select-wrap select:focus + .elf-select-wrap::after,
.elf-select-wrap:focus-within::after {
  border-color: var(--elf-btn);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* @media (max-width: 959px) {
  .elf-home-card-wrap{margin-top:-30px}
  .elf-home-card{max-width:320px}
  .elf-home-card::before{
    left:-40px;
    width:82px;
    transform:rotate(-8deg);
  }
} */

@media (max-width: 781px) {
.elf-home-card-wrap {
    margin-top: 48px !important;
    padding: 0px 0px;
}
  .elf-home-card{
    max-width:100%;
    margin:0 auto;
    padding-left: 20px;
  }
  .elf-home-card::after {
    top: -30px;
    bottom: 0px;
    left: 0px;
    width: 100%;

    transform: skewY(-2deg);
    transform-origin: bottom right;
    z-index: -1;
    height: 80px;
}
.elf-home-card::before {
    left: 27px;
    top: -30px;
    bottom: 15px;
    width: 90%;
    transform: rotate(3deg);
    height: 80px;
}

}

/* =====================================================
   GLOBAL ERROR BOX
   ===================================================== */

.elf-error,
.elf-steps-error {
  background-color: #FEE2E2;
  border: 1px solid #EF4444;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #DC2626;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.elf-error::before,
.elf-steps-error::before {
  content: "";
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2626'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* =====================================================
   BUTTON LOADING STATE
   ===================================================== */

.elf-btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.elf-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: elf-spin 0.8s linear infinite;
  right: 16px;
}

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

/* =====================================================
   TERMS CHECKBOX (Step 3)
   ===================================================== */

.elf-terms .elf-checkbox {
  color: #d9e7dc;
}

.elf-terms .elf-checkbox-box {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.elf-terms .elf-checkbox:hover .elf-checkbox-box {
  border-color: var(--elf-btn);
}

.elf-terms .elf-checkbox input[type="checkbox"]:checked + .elf-checkbox-box {
  background-color: var(--elf-btn);
  border-color: var(--elf-btn);
}

.elf-terms .elf-checkbox-text {
  color: #d9e7dc;
  font-size: 13px;
}

.elf-terms .elf-checkbox-text a {
  color: var(--elf-btn);
  text-decoration: underline;
}

.elf-terms .elf-checkbox-text a:hover {
  color: #9cc84a;
}

/* Terms checkbox error state */
.elf-terms .elf-checkbox.has-error .elf-checkbox-box {
  border-color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

/* =====================================================
   FORM INPUT PLACEHOLDERS (Step 2)
   ===================================================== */

.elf-form-step2 input::placeholder,
.elf-form-step2 textarea::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

/* =====================================================
   ZICHTBARE FOCUS (WCAG 2.4.7)
   De velden hebben border:0/outline:0 als basisstijl; deze ring maakt focus
   ALTIJD zichtbaar: donkergroene outline (op witte kaart) + witte binnenring
   (op de donkergroene homepage-kaart).
   ===================================================== */

.elf-field input:focus-visible,
.elf-field textarea:focus-visible,
.elf-field select:focus-visible,
.elf-select:focus-visible {
  outline: 3px solid var(--elf-green, #0A3F17);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.elf-control:focus-within {
  border-radius: 6px;
  outline: 3px solid var(--elf-green, #0A3F17);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Knoppen en de (visueel verborgen) akkoord-checkbox: zelfde duidelijke ring. */
.elf-btn:focus-visible,
.elf-bag-manual-btn:focus-visible,
.elf-klanttype-btn:focus-visible,
.elf-back-square:focus-visible,
.elf-optie-row:focus-visible,
.elf-dienst-card:focus-visible {
  outline: 3px solid var(--elf-green, #0A3F17);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.elf-checkbox input[type="checkbox"]:focus-visible + .elf-checkbox-box {
  outline: 3px solid var(--elf-green, #0A3F17);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Binnen een .elf-control tekent de wrapper de ring al (:focus-within) — geen
   dubbele ring op het veld zelf. */
.elf-control input:focus-visible,
.elf-control textarea:focus-visible,
.elf-control select:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =====================================================
   DISABLED STATE
   ===================================================== */

.elf-field input:disabled,
.elf-field textarea:disabled,
.elf-field select:disabled {
  background-color: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
  opacity: 0.7;
}

/* =====================================================
   SUCCESS/VALID STATE (Filled & Validated)
   ===================================================== */

.elf-field.has-success input,
.elf-field.has-success textarea,
.elf-field.has-success select,
.elf-field input.is-valid,
.elf-field textarea.is-valid,
.elf-field select.is-valid {
  background-color: #FEFBD7;
  border-color: var(--elf-btn);
}

/* Groen "geldig"-vinkje — NIET op dropdowns: die hebben al hun chevron op dezelfde
   ::after (.elf-control:has(.elf-select)) + groene rand/achtergrond als geldig-signaal.
   Zonder deze :not() lekken de chevron-randen over het vinkje (type/m²-bereik/bouwperiode). */
.elf-field.has-success .elf-control:not(:has(.elf-select))::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234e8f22'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* =====================================================
   SHAKE ANIMATION FOR ERRORS
   ===================================================== */

@keyframes elf-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.elf-field.has-error input,
.elf-field.has-error textarea,
.elf-field.has-error select {
  animation: elf-shake 0.4s ease-in-out;
}

/* Reduced motion: geen schud-animatie bij fouten; spinners blijven (maar rustiger). */
@media (prefers-reduced-motion: reduce) {
  .elf-field.has-error input,
  .elf-field.has-error textarea,
  .elf-field.has-error select {
    animation: none;
  }
  .elf-spinner,
  .elf-btn.is-loading::after {
    animation-duration: 1.6s;
  }
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS FOR VALIDATION
   ===================================================== */

@media (max-width: 768px) {
  .elf-error,
  .elf-steps-error {
    font-size: 14px;
    padding: 10px 14px;
  }

  .elf-error-msg {
    font-size: 14px;
  }

  .elf-field input[type="text"],
  .elf-field input[type="email"],
  .elf-field input[type="tel"],
  .elf-field input[type="number"],
  .elf-field textarea,
  .elf-field select {
    height: 44px;
    padding: 10px 14px;
    font-size: 15px;
  }

  .elf-field.has-error input,
  .elf-field.has-error textarea,
  .elf-field.has-error select {
    padding-right: 40px;
  }

  .elf-field.has-error .elf-control::after,
  .elf-field .elf-control.has-error::after {
    width: 16px;
    height: 16px;
    right: 12px;
  }
.elf-btn-sm {
    width: 100%;
}
.elf-grid-2-tight {
    column-gap: 10px;
}
.elf-field {
    margin: 0 0 10px;
}
.elf-field label {
    margin-bottom: 0px;
}
}

/* =====================================================
   STEP INTRO TEXT
   ===================================================== */

.elf-step-intro {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 20px;
  opacity: .9;
}

/* =====================================================
   DIENST CARDS — Step 1
   ===================================================== */

.elf-dienst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .elf-dienst-grid {
    grid-template-columns: 1fr;
  }
}

.elf-dienst-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .18s, border-color .18s, transform .15s;
  width: 100%;
  position: relative; /* for deselect indicator */
}

.elf-dienst-card:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.38);
  transform: translateY(-1px);
}

.elf-dienst-card.is-selected {
  background: rgba(139,186,63,.16);
  border-color: var(--elf-orange);
  box-shadow: 0 0 0 1.5px rgba(227,159,47,.20);
}

/* Deselect × indicator on selected main cards */
.elf-dienst-card[data-cat="main"].is-selected::after {
  content: '×';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 15px;
  line-height: 1;
  color: rgba(255,255,255,0.45);
  font-weight: 300;
  pointer-events: none;
}

.elf-dienst-icon {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s;
}

.elf-dienst-card.is-selected .elf-dienst-icon {
  background: rgba(227,159,47,.25);
}

.elf-dienst-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.elf-dienst-name {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.elf-dienst-desc {
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1.4;
}

.elf-dienst-error {
  color: #ffb3b3;
  font-size: 13px;
  margin-top: 10px;
  font-weight: 500;
}

/* =====================================================
   3-COLUMN GRID (postcode / huisnummer / toevoeging)
   ===================================================== */

.elf-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 14px;
}

@media (max-width: 520px) {
  .elf-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .elf-grid-3 > .elf-field:last-child {
    grid-column: 1 / -1;
  }
}

/* =====================================================
   BAG LOOKUP STATUS
   ===================================================== */

.elf-bag-status {
  margin: 4px 0 16px;
}

.elf-bag-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(255,255,255,.07);
  border-radius: 6px;
}

.elf-bag-notfound {
  color: #ffe082;
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(255,224,130,.1);
  border: 1px solid rgba(255,224,130,.3);
  border-radius: 6px;
}

/* "Handmatig invullen" / "Klopt het adres niet?" — échte secundaire knop (≥40px
   hoog, 15px tekst): dit is de reddingsroute als BAG het adres niet vindt. */
.elf-bag-manual-btn {
  display: flex;            /* eigen regel: inline brak de zin ("…huisnummer [knop] in.") */
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: transparent;
  border: 1.5px solid #8bba3f;
  border-radius: 999px;
  padding: 8px 18px;
  margin: 8px 0 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #a6d65e;
  text-decoration: none;
  cursor: pointer;
}
.elf-bag-manual-btn:hover { background: rgba(139,186,63,.15); color: #c2e68a; }
/* In de "adres gevonden"-status iets meer ruimte */
.elf-bag-found .elf-bag-edit-btn {
  display: flex;
  width: fit-content;
  margin-top: 8px;
  margin-left: 0;
}

/* Address preview (when BAG found) */
.elf-address-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(139,186,63,.15);
  border: 1px solid rgba(139,186,63,.4);
  border-radius: 6px;
}

.elf-address-preview svg {
  width: 16px;
  height: 16px;
  stroke: #8bba3f;
  flex-shrink: 0;
}

.elf-address-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* =====================================================
   FIELD HINT (below oppervlakte / bouwjaar)
   ===================================================== */

.elf-field-hint {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}

/* =====================================================
   SPINNER
   ===================================================== */

.elf-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: elf-spin .7s linear infinite;
  flex-shrink: 0;
}

/* =====================================================
   KLANTTYPE TOGGLE (Particulier / Zakelijk)
   ===================================================== */

.elf-klanttype-wrap {
  margin-bottom: 20px;
}

.elf-klanttype-toggle {
  display: inline-flex;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: 3px;
  gap: 3px;
}

.elf-klanttype-btn {
  padding: 8px 22px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.elf-klanttype-btn.is-active {
  background: #0E3D22;
  color: #fff;
}

.elf-klanttype-btn:not(.is-active):hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* =====================================================
   4-STEP PROGRESS LABELS alignment
   ===================================================== */

/* Override the "3 columns" grid for labels when 4 items present */
.elf-progress-wide .elf-progress-labels {
  display: flex;
  justify-content: space-between;
}

/* ── Trust-regel onder de home-form knop ─────────────────────────────────── */
.elf-home-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #d9e0d6; /* leesbaar op de donkergroene kaart (was #8a8a83 = 3,5:1) */
    text-align: center;
}
.elf-home-trust svg {
    flex-shrink: 0;
    color: var(--elf-btn);
}
/* Resume-link: alleen zichtbaar (via JS) als er een lopend concept is. */
/* Hervat-chip: subtiele banner boven de velden op de donkergroene homecard.
   Alleen zichtbaar voor terugkerende bezoekers met een lopend concept; wordt
   synchroon uit de localStorage-cache getoond (geen sprong na async). */
.elf-home-resume-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 8px 8px 12px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #eaf3e0;
}
.elf-home-resume-chip[hidden] { display: none; }
.elf-home-resume-chip__ic { color: var(--elf-orange); flex: 0 0 auto; }
.elf-home-resume-chip__txt { flex: 1 1 auto; }
.elf-home-resume-chip__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #cdd6cd;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.elf-home-resume-chip__x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.elf-home-resume-chip__x:focus-visible { outline: 2px solid var(--elf-orange); outline-offset: 1px; }

/* '(optioneel)'-hint bij Toevoeging. Licht op de donkergroene homecard. */
.elf-opt-hint { font-weight: 400; color: #cdd6cd; }

/* Light-card (lcs-embed): de chip + hint waren voor de donkergroene homecard
   ontworpen (lichte tekst op glas) en vielen op de WITTE lcs-kaart wég
   (.lcs-hero7 .elf-home-card = #fff). Hier de leesbare variant, gehaakt aan de
   ECHTE context `.lcs` (het diensten-blok) zodat álle lcs-embed-pagina's kloppen
   (kosten/boete/huurwoning/kantoor/…). Was eerder aan `.lcs-embed-form` gehaakt,
   maar die class wordt NERGENS uitgevoerd → override vuurde nooit (04-07 gefixt).
   De homepage-form staat buiten `.lcs` (donkergroene kaart) en houdt de glas-look.
   Een licht doosje met donkere tekst is óók op een groene kaart leesbaar, dus
   deze scope kan niet regressen op andere lcs-kaarten. */
.lcs .elf-home-resume-chip,
.lcs-wform .elf-home-resume-chip {
    background: #eaf4ea;
    border-color: #c7e0cd;
    color: #0a3f17;
}
.lcs .elf-home-resume-chip__x,
.lcs-wform .elf-home-resume-chip__x { color: #5b7060; }
.lcs .elf-home-resume-chip__x:hover,
.lcs-wform .elf-home-resume-chip__x:hover { background: rgba(10, 63, 23, .08); color: #0a3f17; }
/* Beide witte-kaart-wrappers: `.lcs-hero7 .elf-home-card` (lcs-diensten, binnen
   `.lcs`) én `.lcs-wform .elf-home-card` (werkgebied-overzicht, BUITEN `.lcs`,
   inline-style in page-werkgebied-overzicht.php). Die laatste maakte de
   `(optioneel)`-hint #cdd6cd onleesbaar op wit (a11y color-contrast). */
.lcs .elf-opt-hint,
.lcs-wform .elf-opt-hint { color: #627065; } /* 5.2:1 op wit = WCAG AA (#7a8a7d was 3.65 = fail) */

/* =====================================================
   2-COLUMN SHELL LAYOUT
   ===================================================== */
.elf-steps-shell {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 700px) {
  .elf-steps-shell {
    grid-template-columns: 1fr;
  }
  .elf-steps-col-price {
    order: 10;
  }
}

/* =====================================================
   PRICE PANEL
   ===================================================== */
.elf-price-sticky {
  position: sticky;
  top: 20px;
}
.elf-price-panel {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 20px 16px 22px;
  color: #fff;
}
.elf-pp-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.45;
  margin: 0 0 12px;
}
.elf-pp-empty {
  font-size: 13px;
  opacity: 0.5;
  line-height: 1.55;
}
.elf-pp-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
  line-height: 1.4;
}
.elf-pp-item:last-child { border-bottom: none; }
.elf-pp-item-name { flex: 1; opacity: 0.85; }
.elf-pp-item-price {
  font-weight: 700;
  color: #7ed874;
  white-space: nowrap;
  font-size: 13px;
}
.elf-pp-item-price.is-aanvraag {
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  font-size: 11px;
  padding-top: 2px;
}
.elf-pp-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.13);
  margin: 10px 0 8px;
}
.elf-pp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 3px;
  opacity: 0.9;
}
.elf-pp-total-val {
  color: #7ed874;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.elf-pp-note {
  font-size: 11px;
  opacity: 0.38;
  margin: 0 0 16px;
}
.elf-pp-usps {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.elf-pp-usp {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.elf-pp-usp::before {
  content: '✓';
  color: #7ed874;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================================================
   STEP 1 — MULTI-SELECT CARDS
   ===================================================== */

/* Price badge in the card */
.elf-dienst-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #7ed874;
  letter-spacing: -0.2px;
}
.elf-dienst-price.elf-dienst-price-aanvraag {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0;
}

/* Addon card: checkbox indicator */
.elf-dienst-addon {
  position: relative;
}
.elf-addon-check {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.28);
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.elf-addon-check::after {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s;
}
.elf-dienst-addon.is-selected .elf-addon-check {
  background: #2b333a;
  border-color: #2b333a;
}
.elf-dienst-addon.is-selected .elf-addon-check::after {
  opacity: 1;
}

/* Disabled addon */
.elf-dienst-card.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Addons section — smooth reveal */
.elf-addons-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1),
              opacity 0.32s ease,
              margin-top 0.32s ease;
  margin-top: 0;
}
.elf-addons-section.is-visible {
  max-height: 400px;
  opacity: 1;
  margin-top: 20px;
}
.elf-addons-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.3px;
  margin: 0 0 12px;
}

/* =====================================================
   STEP 3 — ZAKELIJK SMOOTH EXPAND
   ===================================================== */
.elf-zakelijk-fields {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1),
              opacity 0.28s ease;
}
.elf-zakelijk-fields.is-open {
  max-height: 260px;
  opacity: 1;
}

/* =====================================================
   OPTIES SECTION (Spoedservice / Adviesrapport)
   ===================================================== */
.elf-opties-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1),
              opacity 0.32s ease,
              margin-top 0.32s ease;
  margin-top: 0;
}
.elf-opties-section.is-visible {
  max-height: 400px;
  opacity: 1;
  margin-top: 20px;
}

/* =====================================================
   GEBRUIKSDOEL SELECT — step 2
   ===================================================== */
.elf-gebruiksdoel-wrap {
  display: none; /* shown via JS when main dienst selected */
}
.elf-select {
  width: 100%;
  height: 54px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.18);
  outline: 0;
  background: rgba(255,255,255,0.08);
  padding: 0 46px 0 18px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.elf-select:focus {
  border-color: rgba(255,255,255,0.5);
}
.elf-select option,
.elf-select optgroup {
  color: #0b3b1a;
  background: #fff;
}
.elf-field.has-error .elf-select {
  border-color: #ff5b5b;
}
/* Chevron for elf-select inside elf-control */
.elf-control:has(.elf-select)::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.6);
  border-bottom: 2px solid rgba(255,255,255,0.6);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

/* =====================================================
   PRICE PANEL — item styles
   ===================================================== */
.elf-pp-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.elf-pp-item:last-child {
  border-bottom: none;
}
.elf-pp-item-name {
  color: rgba(255,255,255,0.80);
  flex: 1;
  min-width: 0;
}
.elf-pp-item-price {
  font-weight: 700;
  color: #7ed874;
  white-space: nowrap;
  flex-shrink: 0;
}
.elf-pp-item-price.is-aanvraag {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}

/* =====================================================
   COMPACT OPTIE ROWS (Spoedservice / Adviesrapport)
   ===================================================== */
.elf-opties-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.elf-optie-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .18s, border-color .18s;
  width: 100%;
  color: inherit;
  font: inherit;
}
.elf-optie-row:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
.elf-optie-row.is-selected {
  background: rgba(139,186,63,.12);
  border-color: var(--elf-orange);
}
/* WWS (huurpuntentelling) geldt alleen voor woningen → bij utiliteit verbergt de JS
   de rij via .is-disabled (applyAddonRules). */
.elf-optie-row.is-disabled {
  display: none;
}
.elf-optie-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
  position: relative;
}
.elf-optie-row.is-selected .elf-optie-dot {
  background: #2b333a;
  border-color: #2b333a;
}
.elf-optie-dot::after {
  content: '';
  position: absolute;
  top: 3px; left: 2px;
  width: 8px; height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity .15s;
}
.elf-optie-row.is-selected .elf-optie-dot::after { opacity: 1; }
.elf-optie-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5d020;
}
.elf-optie-icon svg { width: 14px; height: 14px; }
.elf-optie-body { flex: 1; min-width: 0; }
.elf-optie-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.elf-optie-desc {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.50);
  line-height: 1.3;
  margin-top: 1px;
}
.elf-optie-price {
  font-size: 13px;
  font-weight: 700;
  color: #7ed874;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =====================================================
   PRICE PANEL — BTW totals rows
   ===================================================== */
.elf-pp-totals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.elf-pp-subtotal,
.elf-pp-btw,
.elf-pp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}
.elf-pp-subtotal-val,
.elf-pp-btw-val {
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
}
.elf-pp-total {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.elf-pp-total-val {
  color: #7ed874;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

/* =====================================================
   MOBILE — Step 2/3 action buttons
   ===================================================== */
@media (max-width: 600px) {
  .elf-step-actions {
    gap: 10px;
  }
  .elf-step-actions .elf-btn-sm {
    min-width: 0;
    flex: 1;
    font-size: 13px;
    padding: 0 14px;
    height: 42px;
  }
}

/* ── Bouwjaar ≥ 2021 — detailmethodiek tijdelijk niet beschikbaar ─────────── */
.elf-bouwjaar-warning {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  background: #FFF6E6;
  border: 1px solid #E3B964;
  color: #8E5C00; /* AA op licht-amber ✅ */
  font-size: 13px;
  line-height: 1.5;
}
.elf-bouwjaar-warning strong { color: #7A4E00; }
.elf-bouwjaar-warning a { color: #8E5C00; font-weight: 700; text-decoration: underline; }


/* ── Bedankt-scherm ───────────────────────────────────────────────────────── */
.elf-thanks-home { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: #2d6a4f; text-decoration: underline; text-underline-offset: 3px; }