/* "Pas aan"-configurator (2026-10-18) — handoff design_handoff_pas_aan_configurator.
   Alleen actief met .cfg-on op #sidePanel / #mobSheet (gezet door lr-configurator.js).
   Variabelen komen uit de cockpit-bridge in single-auto.php (--cool, --soft, --pink-d, --ease). */

/* Container: mobiele sheet vanaf 56px onder de bovenrand, kop + tabs sticky */
.mob-sheet.cfg-on{top:56px;max-height:none;display:flex;flex-direction:column;}
.mob-sheet.cfg-on .ms-body{flex:1 0 auto;}
.side-panel.cfg-on .sp-head,.mob-sheet.cfg-on .ms-head{border-bottom:none;z-index:4;}

/* Stappen-tabs */
.cfg-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--cool);position:sticky;top:68px;background:#fff;z-index:3;flex-shrink:0;}
.cfg-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:4px 4px 12px;min-height:44px;cursor:pointer;font:600 15px/1 var(--sans);color:var(--soft);transition:color .2s var(--ease),border-color .2s var(--ease);white-space:nowrap;}
.cfg-tab[data-st="on"]{color:var(--navy);border-bottom-color:var(--pink);}
.cfg-num{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--sans);background:#F1F2F7;color:var(--soft);flex:none;}
.cfg-tab[data-st="on"] .cfg-num{background:var(--navy);color:#fff;}
.cfg-tab[data-st="done"] .cfg-num{background:#FDEAF1;color:var(--pink-d);}
.cfg-tab:focus-visible{outline:2px solid var(--pink);outline-offset:-2px;border-radius:6px;}

/* Panes */
.side-panel .cfg-pane{padding:24px 22px 8px;flex:1;}
.mob-sheet .cfg-pane{padding:4px 0 0;}
[data-cfg-pane][hidden]{display:none !important;}

/* Fiscale waarde + bijtelling in de binnacle */
.cfg-fisc{position:relative;z-index:1;margin-top:10px;display:flex;flex-direction:column;gap:10px;align-items:center;font-variant-numeric:tabular-nums;}
.cfg-fw{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);color:rgba(255,255,255,.86);}
.cfg-fw-l{color:rgba(255,255,255,.5);font-weight:500;}
.cfg-bijt-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;color:rgba(255,255,255,.8);font:600 11px/1 var(--sans);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.cfg-bijt-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.cfg-bijt-btn .cfg-chev{width:10px;height:10px;transition:transform .2s var(--ease);}
.cfg-bijt-btn[aria-expanded="true"] .cfg-chev{transform:rotate(180deg);}
.cfg-schijven{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
.cfg-schijven[hidden]{display:none;}
.cfg-sj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:300px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;}
.cfg-sj{display:flex;flex-direction:column;align-items:center;gap:5px;}
.cfg-sj + .cfg-sj{border-left:1px solid rgba(255,255,255,.08);}
.cfg-sj-l{font:600 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);}
.cfg-sj-v{font:600 13px/1 var(--sans);color:#fff;white-space:nowrap;}
.cfg-sj-u{font-weight:500;color:rgba(255,255,255,.45);font-size:10px;}
.cfg-sj-note{display:flex;align-items:center;gap:6px;font:500 10px/1.3 var(--sans);color:rgba(255,255,255,.42);}
.cfg-i{position:relative;width:18px;height:18px;border-radius:50%;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7);font:600 10px/1 var(--sans);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none;}
.cfg-i::before{content:'';position:absolute;inset:-13px;} /* raakvlak 44px */
.cfg-i:hover{border-color:rgba(255,255,255,.7);color:#fff;}
.cfg-tip{position:absolute;left:4px;right:4px;bottom:calc(100% - 22px);background:#080E38;border:1px solid rgba(250,158,188,.22);color:rgba(255,255,255,.78);font:400 12px/1.6 var(--sans);border-radius:10px;padding:13px 15px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:5;text-align:left;}
.cfg-tip[hidden]{display:none;}

/* Koppen in de panes (zelfde als .sp-ctrl-head) */
.cfg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.cfg-lbl{font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.cfg-val{font:700 17px/1 var(--sans);color:var(--navy);letter-spacing:-.01em;}

/* Tank-/laadpas en winterbanden */
.cfg-extras{margin-top:-8px;}
.cfg-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--cool);}
.cfg-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.cfg-row-n{font:600 14px/1.25 var(--sans);color:var(--navy);}
.cfg-row-s{font:400 11px/1.35 var(--sans);color:var(--soft);}
.cfg-row-p{flex:none;font:600 13px/1 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums;}

/* Klimaattoets 42 × 34 (key() in het prototype). Licht: groen. */
.cfg-key{--k-check:#6EF0A8;--k-glow:drop-shadow(0 0 2px rgba(110,240,168,.95)) drop-shadow(0 0 6px rgba(46,204,113,.65));--k-led:linear-gradient(90deg,#34C774,#A8F7CB,#34C774);--k-ledglow:0 0 3px rgba(130,245,180,1),0 0 9px 2px rgba(46,204,113,.55);--k-spill:radial-gradient(70% 60% at 50% 0%,rgba(46,204,113,.30) 0%,rgba(46,204,113,0) 100%);
  flex:none;position:relative;display:block;width:42px;height:34px;padding:0;border:none;border-radius:10px;cursor:pointer;
  background:conic-gradient(from 200deg,#f4f5f7,#a9b0ba 14%,#eceef1 28%,#8c94a0 42%,#f4f5f7 56%,#b3bac4 72%,#eceef1 86%,#f4f5f7);
  box-shadow:0 0 0 .5px rgba(15,27,47,.35),0 2px 6px rgba(15,27,47,.18);-webkit-tap-highlight-color:transparent;}
.cfg-key::before{content:'';position:absolute;inset:-5px -1px;} /* raakvlak 44px hoog, toets zelf blijft 42 × 34 */
.cfg-key:disabled{cursor:default;}
.cfg-key:focus-visible{outline:2px solid var(--pink);outline-offset:3px;}
.cfg-key .k-well{position:absolute;inset:2px;border-radius:8px;background:#07090c;box-shadow:inset 0 1px 2px rgba(0,0,0,.7);}
.cfg-key .k-face{position:absolute;left:3px;right:3px;top:3px;bottom:4px;border-radius:7px;overflow:hidden;
  background:linear-gradient(180deg,#2d323b 0%,#181b21 48%,#0c0e12 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.7),0 1px 0 #000,0 2px 3px rgba(0,0,0,.5);
  transition:transform 120ms ease,box-shadow 160ms ease;}
.cfg-key .k-gloss{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%);pointer-events:none;}
.cfg-key .k-spill{position:absolute;inset:0;background:var(--k-spill);opacity:0;transition:opacity 260ms ease;pointer-events:none;}
.cfg-key .k-led{position:absolute;top:4px;left:50%;width:11px;height:2.5px;margin-left:-5.5px;border-radius:2px;background:#2a2f37;box-shadow:inset 0 1px 1px rgba(0,0,0,.9),0 .5px 0 rgba(255,255,255,.10);transition:background 200ms ease,box-shadow 260ms ease;}
.cfg-key .k-check{position:absolute;left:50%;top:10px;margin-left:-7px;stroke:rgba(255,255,255,.32);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke 200ms ease;}
.cfg-key[data-st="on"] .k-face,.cfg-key[data-st="pkg"] .k-face{background:linear-gradient(180deg,#252a32 0%,#13161b 48%,#0a0c0f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.7);transform:translateY(1px);}
.cfg-key[data-st="on"] .k-spill{opacity:1;}
.cfg-key[data-st="on"] .k-led{background:var(--k-led);box-shadow:var(--k-ledglow);}
.cfg-key[data-st="on"] .k-check{stroke:var(--k-check);filter:var(--k-glow);}
.cfg-key[data-st="pkg"] .k-led{background:rgba(255,255,255,.7);box-shadow:0 0 3px rgba(255,255,255,.3);}
.cfg-key[data-st="pkg"] .k-check{stroke:rgba(255,255,255,.62);}

/* Stap 2 · Kleur */
.cfg-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:24px;}
.cfg-color{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:14px;cursor:pointer;text-align:left;background:var(--cream);border:1.5px solid var(--line);box-shadow:none;transition:all .2s var(--ease);font-family:var(--sans);}
.cfg-color[aria-pressed="true"]{background:#fff;border-color:var(--navy);box-shadow:0 4px 10px -6px rgba(15,27,84,.25);}
.cfg-color:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.cfg-swatch{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),var(--sw);box-shadow:inset 0 0 0 1px rgba(15,27,84,.14);}
.cfg-color-txt{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cfg-color-n{font:600 13px/1.15 var(--sans);color:var(--navy);}
.cfg-color-p{font:600 13px/1 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums;}

/* Stap 3 · Opties (variant 4d): twee groottes, 15/600 en 13/400 */
.cfg-groups{display:flex;flex-direction:column;gap:24px;margin-bottom:24px;}
.cfg-group{display:flex;flex-direction:column;}
.cfg-eyebrow{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--navy);}
.cfg-road{width:28px;height:4px;flex:none;background:linear-gradient(to right,var(--pink) 50%,transparent 50%);background-size:10px 4px;}
.cfg-opt{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-bottom:1px solid var(--cool);}
.cfg-opt-top{display:flex;align-items:center;gap:14px;}
.cfg-opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.cfg-opt-n{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;text-align:left;cursor:pointer;font:600 15px/1.3 var(--sans);color:var(--navy);}
.cfg-opt-n .cfg-chev{flex:none;transition:transform .2s var(--ease);}
.cfg-opt-n[aria-expanded="true"] .cfg-chev{transform:rotate(180deg);}
.cfg-opt-n:hover{color:var(--pink-d);}
.cfg-opt-m{font:400 13px/1.4 var(--sans);color:var(--muted);}
.cfg-opt-m[hidden]{display:none;}
.cfg-opt-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:600 15px/1.3 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cfg-opt-pm{font:400 12px/1.3 var(--sans);color:var(--muted);}
.cfg-opt-pm[hidden]{display:none;}
span.cfg-opt-n{cursor:default;}
span.cfg-opt-n:hover{color:var(--navy);}
.cfg-exp{display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--cream);border-radius:14px;}
.cfg-exp[hidden]{display:none;}
.cfg-inhoud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;}
.cfg-inh{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.4 var(--sans);color:var(--navy);}
.cfg-inh svg{flex:none;margin-top:3px;}
.cfg-exp-t{font:400 13px/1.4 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;text-wrap:pretty;}

/* Vorige / Volgende */
.cfg-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 18px;min-height:25px;}
.side-panel .cfg-nav{padding:0 22px;}
.cfg-nav span{flex:1;}
.cfg-prev,.cfg-next{background:none;border:none;padding:6px 0;min-height:44px;cursor:pointer;font:600 15px/1 var(--sans);transition:color .2s var(--ease);}
.cfg-prev{color:var(--muted);}
.cfg-next{color:var(--pink-d);}
.cfg-prev:hover,.cfg-next:hover{color:var(--navy);}
.cfg-prev[hidden],.cfg-next[hidden]{display:none;}

@media (prefers-reduced-motion:reduce){
  .cfg-tab,.cfg-key .k-face,.cfg-key .k-led,.cfg-key .k-spill,.cfg-color,.cfg-chev{transition:none !important;}
}
/* ── Einde van de flow (Teun 19-10): één hoofdknop per stap, laatste stap = overzicht + Offerte aanvragen ── */
[data-cfg-stap] #btnSave,[data-cfg-stap] #msSave{display:none!important;}
[data-cfg-stap] .cfg-nav,[data-cfg-stap] .cfg-pane,[data-cfg-stap] [data-cfg-pane]{flex-shrink:0;} /* zijpaneel is een kolom met vaste hoogte: niet laten inklappen onder de hogere footer */
[data-cfg-stap] .cfg-nav{flex-wrap:wrap;margin:6px 0 4px;}
[data-cfg-stap] .cfg-nav span{display:none;}
[data-cfg-stap] .cfg-next{order:-1;flex:1 0 100%;min-height:54px;border-radius:999px;background:var(--navy);color:#fff;font:600 16px/1 var(--sans);transition:background .2s var(--ease),transform .2s var(--ease);}
[data-cfg-stap] .cfg-next:hover{background:var(--pink-d);color:#fff;transform:translateY(-1px);}
[data-cfg-stap] .cfg-prev{padding:10px 0 0;}
[data-cfg-stap="tussen"] #ctaSide,[data-cfg-stap="tussen"] #msCtaSheet{justify-content:center;background:none;color:var(--muted);padding:6px 0;min-height:44px;text-decoration:underline;text-underline-offset:3px;font-weight:600;}
[data-cfg-stap="tussen"] #ctaSide:hover,[data-cfg-stap="tussen"] #msCtaSheet:hover{background:none;color:var(--navy);transform:none;}
[data-cfg-stap="tussen"] #ctaSide svg,[data-cfg-stap="tussen"] #msCtaSheet svg,[data-cfg-stap="tussen"] #ctaSide .cta-arr,[data-cfg-stap="tussen"] #msCtaSheet .cta-arr{display:none;}
[data-cfg-stap="laatste"] #ctaSide,[data-cfg-stap="laatste"] #msCtaSheet{background:#E88AA3;min-height:56px;font-size:16px;}
[data-cfg-stap="laatste"] #ctaSide:hover,[data-cfg-stap="laatste"] #msCtaSheet:hover{background:#D9708F;}
.cfg-sum{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;}
.cfg-sum[hidden]{display:none;}
.cfg-sum-t{font:700 17px/1.2 var(--sans);color:var(--navy);}
.cfg-sum-s{font:500 13px/1.3 var(--sans);color:var(--muted);margin-top:-6px;}
.cfg-sum dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font:400 14px/1.3 var(--sans);}
.cfg-sum dt{color:var(--muted);}
.cfg-sum dd{margin:0;color:var(--navy);font-weight:600;text-align:right;}
.cfg-sum-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:10px;}
.cfg-sum-tot span{font:500 13px/1 var(--sans);color:var(--muted);}
.cfg-sum-tot b{font:700 24px/1 var(--sans);color:var(--navy);letter-spacing:-.02em;}
.cfg-sluit{background:none;border:none;padding:8px 0;min-height:44px;cursor:pointer;color:var(--muted);font:500 13.5px/1.3 var(--sans);text-align:center;}
.cfg-sluit:hover{color:var(--navy);}
.cfg-sluit[hidden]{display:none;}
/* Aan/uit-toets variant B (Teun 19-10): aan = roze met wit vinkje */
.cfg-key[data-st="on"] .k-well{background:#B9566F;}
.cfg-key[data-st="on"] .k-face{background:linear-gradient(180deg,#F5B3C7 0%,#E88AA3 55%,#D9708F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.cfg-key[data-st="on"] .k-check{stroke:#fff;filter:none;}
.cfg-key[data-st="on"] .k-led{background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8);}
.cfg-key[data-st="on"] .k-spill{opacity:0;}
/* Kleinste schermen (<= 350px): tabs en Vorige/Volgende op één regel houden (Teun 19-10: tekst 15px) */
@media(max-width:350px){.cfg-tab{font-size:13.5px;gap:5px;}.cfg-prev,.cfg-next{font-size:13px;}}
/* Zelfde breedte op elk tabblad: ruimte voor de schuifbalk altijd vasthouden; korte tabs (Opties) gaven anders 15px meer breedte (Teun 19-10) */
#sidePanel,#mobSheet{scrollbar-gutter:stable;scrollbar-width:thin;}

/* 19-10-2026 (Teun): zijpaneel breder op tablet/desktop (teller blijft bovenaan) */
@media (min-width:768px){#sidePanel.side-panel{width:min(520px,calc(100vw - 72px));}}
@media (min-width:1100px){#sidePanel.side-panel{width:600px;}}