/* NRG — onderhoudscalculator. Gebruikt de variabelen en .apk-* klassen uit style.css.
   UI 2026-10-03: compacte serviceconfigurator (mobiel eerst). Spacing 4/8/12/16/24/32.
   Alleen presentatie - logica, prijzen en WhatsApp-tekst in kalkulator.js / -kern.js. */
.nrg-calc{max-width:880px;container-type:inline-size;container-name:nrgcalc}

/* ── kenteken + Bereken: één module ─────────────────────────── */
.nrg-calc .apk-check-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.nrg-calc .apk-input{
  min-width:0;width:100%;min-height:60px;padding:8px 12px;
  font-size:26px;letter-spacing:4px;background:#0d0d0d;border:2px solid #2c2c2c;
  transition:border-color .15s
}
.nrg-calc .apk-input:focus{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:2px}
.nrg-calc .apk-btn{
  min-height:60px;min-width:132px;padding:12px 24px;font-size:17px;letter-spacing:2px;
  cursor:pointer;transition:background .15s
}
.nrg-calc .apk-btn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.nrg-calc .apk-btn:active:not(:disabled){background:var(--orange-dark)}
/* KALK D7: na telefonie kenteken i knop naast elkaar - 'zonder kenteken' blijft
   boven de vouw (360 px); pas onder 300 px onder elkaar */
@container nrgcalc (max-width:479px){
  .nrg-calc .apk-btn{min-height:56px;padding-left:16px;padding-right:16px}
}
@container nrgcalc (max-width:299px){
  .nrg-calc .apk-check-form{grid-template-columns:1fr}
  .nrg-calc .apk-btn{width:100%}
}
.nrg-calc .apk-check-note{margin-top:12px}

.nrg-calc-link{
  display:inline-block;background:none;border:none;padding:8px 0;margin-top:8px;min-height:44px;
  color:var(--gray);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer
}
.nrg-calc-link:hover,.nrg-calc-link:focus-visible{color:var(--orange)}
.nrg-calc-hand{display:grid;gap:12px;margin-top:8px}
.nrg-calc-veld{display:grid;gap:4px;min-width:0;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:1px}
.nrg-calc-veld-klein{margin:12px 4px 0;max-width:200px}
.nrg-calc-select{
  width:100%;min-width:0;max-width:100%;min-height:48px;background:var(--black);color:var(--white);
  border:1px solid #2c2c2c;padding:10px 12px;font:inherit;font-size:15px;text-transform:none;letter-spacing:0
}
.nrg-calc-select:focus{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:1px}
.nrg-calc-select:disabled{opacity:.5}
.nrg-calc-uit:empty{display:none}

/* ── resultaatkaart (geen groene balk: oranje accent NRG) ───── */
.nrg-calc .nrg-calc-kaart{
  margin-top:16px;padding:16px;background:var(--black-mid);
  border:1px solid var(--black-border);border-left:1px solid var(--black-border);border-top:2px solid var(--orange)
}
.nrg-calc .nrg-calc-kaart .apk-result-msg{font-size:13px;line-height:1.5;margin-top:8px}

/* 1. VOERTUIG */
.nrg-calc-auto{display:grid;gap:4px}
.nrg-calc-auto-titel{
  font-family:var(--font-head);font-weight:900;font-size:24px;line-height:1.05;
  text-transform:uppercase;letter-spacing:.5px;color:var(--white)
}
.nrg-calc-auto-meta{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0}
.nrg-calc-auto-meta span{
  font-size:13px;line-height:1.3;color:var(--gray);padding:2px 8px;border:1px solid #2c2c2c;background:#0d0d0d
}
.nrg-calc-auto-meta + .nrg-calc-auto-meta span{border-color:transparent;background:none;padding:0 8px 0 0;font-size:12px}

/* APK: klein status-label, geen keuring door NRG */
.nrg-calc-apk{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px;padding:4px 10px;width:fit-content;max-width:100%;
  border:1px solid rgba(63,191,111,.4);background:rgba(63,191,111,.08)
}
.nrg-calc-apk strong{color:#6FDB99;font-size:13px;font-weight:500}
.nrg-calc-apk-ikoon{color:#6FDB99;font-weight:700;font-size:13px}
.nrg-calc-apk small{flex-basis:100%;color:var(--gray);font-size:12px;line-height:1.4;padding-bottom:2px}
.nrg-calc-apk-let-op{border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.08)}
.nrg-calc-apk-let-op strong,.nrg-calc-apk-let-op .nrg-calc-apk-ikoon,.nrg-calc-apk-let-op small{color:#ffb020}

/* motorkeuze (meerdere motoren) */
.nrg-calc-motoren{display:grid;gap:8px;margin-top:12px}
.nrg-calc-motor{
  text-align:left;background:var(--black);color:var(--white);min-height:48px;
  border:1px solid #2c2c2c;padding:12px 14px;font:inherit;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s
}
.nrg-calc-motor:hover,.nrg-calc-motor:focus-visible{border-color:var(--orange)}
.nrg-calc-motor:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nrg-calc-motor[aria-pressed="true"]{border-color:var(--orange);background:rgba(255,107,0,.08)}

/* resultaat: kolom keuze + samenvatting */
.nrg-calc-res{display:block;margin-top:16px}
.nrg-calc-res:empty{display:none}

/* 2. PAKKET: twee selecteerbare kaarten */
.nrg-calc-pakketten{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.nrg-calc-pakket{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;
  padding:12px 32px 12px 12px;border:1px solid #2c2c2c;background:var(--black);color:inherit;text-align:left;
  cursor:pointer;border-radius:var(--radius,2px);transition:border-color .15s,background .15s
}
.nrg-calc-pakket strong{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.1;text-transform:uppercase;letter-spacing:.5px;color:var(--white)}
.nrg-calc-pakket small{color:var(--gray);font-size:13px;line-height:1.3}
.nrg-calc-pakket:hover{border-color:#555}
.nrg-calc-pakket.actief{border-color:var(--orange);background:rgba(255,107,0,.08)}
.nrg-calc-pakket.actief::after{
  content:'✓';position:absolute;top:8px;right:8px;width:18px;height:18px;display:grid;place-content:center;
  background:var(--orange);color:var(--black);font-size:12px;font-weight:700;line-height:1
}
.nrg-calc-pakket:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* 3. SERVICE ROWS: checkbox · naam/spec · prijs in één rij */
.nrg-calc-lijst{display:grid;border-top:1px solid var(--black-border)}
.nrg-calc-pos{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:12px;align-items:start;
  min-height:64px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;
  transition:background .15s
}
.nrg-calc-pos:hover{background:rgba(255,255,255,.02)}
.nrg-calc-pos.aan{background:rgba(255,107,0,.06)}
.nrg-calc-pos input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;flex:none;
  border:2px solid #5a5a5a;border-radius:4px;background:#0d0d0d;display:grid;place-content:center;cursor:pointer;
  transition:background .15s,border-color .15s
}
.nrg-calc-pos input[type="checkbox"]::before{
  content:'';width:11px;height:6px;border-left:3px solid var(--black);border-bottom:3px solid var(--black);
  transform:rotate(-45deg) translate(1px,-1px);opacity:0
}
.nrg-calc-pos input[type="checkbox"]:checked{background:var(--orange);border-color:var(--orange)}
.nrg-calc-pos input[type="checkbox"]:checked::before{opacity:1}
.nrg-calc-pos input[type="checkbox"]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nrg-calc-pos:hover input[type="checkbox"]:not(:checked){border-color:#8a8a8a}
.nrg-calc-naam{display:grid;gap:2px;min-width:0}
.nrg-calc-naam strong{
  font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.15;letter-spacing:.3px;color:var(--white)
}
.nrg-calc-naam small{color:var(--gray);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.nrg-calc-prijs{
  color:var(--white);font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.15;
  white-space:nowrap;text-align:right;padding-top:1px
}
.nrg-calc-dienst .nrg-calc-naam small{color:#e7a874}

/* 4. SAMENVATTING: totaal is het grootste getal */
.nrg-calc-samen{display:grid;gap:12px;margin-top:16px}
.nrg-calc-som{padding:16px;background:var(--black);border:1px solid var(--black-border);border-top:2px solid var(--orange)}
.nrg-calc-som-label{
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin:0
}
.nrg-calc-som-bedrag{
  font-family:var(--font-head);font-weight:900;font-size:34px;line-height:1.05;color:var(--white);margin:4px 0 0;
  font-variant-numeric:tabular-nums
}
.nrg-calc-som-incl{font-size:13px;color:var(--gray);margin:2px 0 0}
.nrg-calc-indicatie{font-size:13px;color:var(--gray);line-height:1.45;margin:8px 0 0}
.nrg-calc-som-regels{display:grid;gap:4px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--black-border)}
.nrg-calc-som-regels:empty{display:none}
.nrg-calc-som-regels div{display:flex;justify-content:space-between;gap:12px}
.nrg-calc-som-regels dt{font-size:14px;color:var(--gray)}
.nrg-calc-som-regels dd{margin:0;font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--white);white-space:nowrap}
.nrg-calc .apk-result-cta{margin:0;width:100%}

/* 5. WHATSAPP CTA (groen = uitzondering in het NRG-systeem) */
.nrg-calc-wa{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:12px 16px;
  background:#25D366;color:#0A0A0A;font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.15;
  letter-spacing:1px;text-transform:uppercase;text-decoration:none;text-align:center;transition:background .15s
}
.nrg-calc-wa svg{flex:none}
.nrg-calc-wa:hover{background:#1EB257}
.nrg-calc-wa:focus-visible{outline:2px solid var(--white);outline-offset:2px}

.nrg-calc-twijfel{margin-top:12px;padding:10px 12px;font-size:13px;color:var(--gray);line-height:1.5;border:1px dashed #2c2c2c}
.nrg-calc-twijfel a{color:#25D366;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.nrg-calc-twijfel a:hover,.nrg-calc-twijfel a:focus-visible{color:var(--white)}

/* desktop / brede kalkulator: keuze links, samenvatting rechts (sticky) */
@container nrgcalc (min-width:720px){
  .nrg-calc-res{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  .nrg-calc-samen{position:sticky;top:104px;margin-top:0}
  .nrg-calc .nrg-calc-kaart{padding:24px}
}

/* sticky totaal + WhatsApp op mobiel (boven de bestaande CTA-balk) */
.nrg-calc-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:8200;display:grid;gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(10,10,10,.97);border-top:2px solid var(--orange)
}
.nrg-calc-sticky[hidden]{display:none}
.nrg-calc-sticky-som{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
.nrg-calc-sticky-som span{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray)}
.nrg-calc-sticky-bedrag{font-family:var(--font-head);font-weight:900;font-size:24px;line-height:1;color:var(--white);white-space:nowrap}
.nrg-calc-sticky .nrg-calc-wa{min-height:52px}
body.nrg-calc-sticky-aan .wa-float,body.nrg-calc-sticky-aan .wa-float-static{visibility:hidden}
@media (min-width:900px){.nrg-calc-sticky{display:none !important}}
@media (max-width:379px){
  .nrg-calc-wa{font-size:14px;letter-spacing:.5px;gap:8px}
  .nrg-calc-sticky .nrg-calc-wa{min-height:48px}
  .nrg-calc-pakket strong{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .nrg-calc *,.nrg-calc-sticky *{transition:none !important}
}

/* 2026-10-10: [hidden] wygrywa z .apk-check-form{display:grid} ze style.css (reczny wybor chowa kenteken) */
[data-nrg-calc] [hidden]{display:none!important}

/* KALK D1 (CLS): ruimte voor het formulier voordat het script laadt (gemeten 161 px op 360 px, 143 px desktop) */
.nrg-calc[data-nrg-calc]:empty{min-height:161px}
@media (min-width:600px){.nrg-calc[data-nrg-calc]:empty{min-height:143px}}
/* KALK B5: prijs kleine beurt per kandidaat-motor */
.nrg-calc-motor-prijs{display:block;margin-top:4px;color:var(--orange);font-size:13px}
/* M0.12 / KALK D4: voorkeursmomenten + bellen */
.nrg-calc-voorkeur-blok{margin:0 0 12px}
.nrg-calc-voorkeur-vraag{margin:0 0 6px;font-size:13px;color:var(--gray)}
.nrg-calc-voorkeur{display:flex;flex-wrap:wrap;gap:6px}
.nrg-calc-chip{min-height:40px;padding:6px 12px;background:var(--black);color:var(--white);border:1px solid var(--black-border);font:inherit;font-size:13px;cursor:pointer}
.nrg-calc-chip[aria-pressed="true"]{border-color:var(--orange);background:rgba(255,107,0,.12)}
.nrg-calc-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nrg-calc-tel{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;border:1px solid var(--black-border);color:var(--white);text-decoration:none;font-weight:700}
.nrg-calc-tel:hover,.nrg-calc-tel:focus-visible{border-color:var(--orange)}
/* 2026-10-13: Meer gegevens (ingeklapt) */
.nrg-calc-meer{margin:10px 0 4px;font-size:13px;color:var(--gray)}
.nrg-calc-meer summary{cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:4px 0;list-style-position:inside}
.nrg-calc-meer[open] summary{margin-bottom:6px}
.nrg-calc-meer-kop{margin:8px 0 4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.nrg-calc-meer-lijst{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:2px 10px;margin:0}
.nrg-calc-meer-lijst dt{opacity:.75}
.nrg-calc-meer-lijst dd{margin:0;word-break:break-word}
.nrg-calc-meer-leeg{margin:0;font-style:italic}