/* Look van de reviewlijst v3: Envoker antraciet en koraal, Figtree en Montserrat, rustige kaarten. */
:root{
  --coral:#fc5754;--coral-soft:#fff0ef;--ink:#212121;--text:#4f4f4f;--muted:#8c8c8c;
  --bg:#f8f9fa;--card:#fff;--line:#ebebeb;--line-strong:#d9d9d9;--chip:#f1f1f1;
  --warn:#b85c00;--warn-soft:#fff4e5;--ok:#1f7a4d;--ok-soft:#e8f5ee;--blue:#2f5fb3;--blue-soft:#eaf0fb;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Montserrat,sans-serif;color:var(--ink);margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.klein{font-size:13px}

/* kop */
header.top{background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.cobrand{display:flex;align-items:center;gap:18px}
.cobrand a{display:block;line-height:0}
.cobrand img{display:block;width:auto}
.brand-envoker img{height:34px}
.brand-slaapwel img{height:36px}
.brand-slaapwel .lt{display:none;font:800 20px Montserrat,sans-serif;color:var(--ink);line-height:1}
.cobrand .x{width:1px;height:30px;background:var(--line-strong)}
.wie{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text)}
.wie #wie b{color:var(--ink);font-weight:600}
.proef{font-size:12px;font-weight:600;background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:2px 8px}
.tekstknop{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;padding:2px}
.tekstknop:hover{color:var(--ink)}

/* knoppen */
.knop{border:1px solid var(--coral);background:var(--coral);color:#fff;border-radius:6px;padding:10px 20px;font-weight:700;font-size:15px}
.knop:hover{filter:brightness(.95)}
.knop.licht{background:var(--card);color:var(--ink);border-color:var(--line-strong);font-weight:600}
.knop.licht:hover{border-color:var(--ink);filter:none}
.knop.klein{padding:5px 12px;font-size:13px}
.knop.groot{font:800 20px/1.2 Montserrat,sans-serif;padding:20px 28px;width:100%;border-radius:8px}
.knop.groot small{display:block;font:500 14px Figtree,sans-serif;opacity:.9;margin-top:4px}
.knop:disabled{background:var(--chip);border-color:var(--line);color:var(--muted);cursor:not-allowed;filter:none}
.knop .n{background:var(--chip);color:var(--text);border-radius:4px;padding:0 6px;margin-left:4px;font-weight:600}

/* tabbladen: breken af in plaats van te scrollen */
nav.tabs{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
nav.tabs .wrap{display:flex;gap:2px;max-width:1280px;padding:0 12px}
.tab{appearance:none;border:0;background:none;font:600 14px/1.25 Figtree,sans-serif;color:var(--muted);padding:11px 6px 9px;border-bottom:3px solid transparent;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;text-align:center;overflow-wrap:anywhere}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral)}
.tab:hover{color:var(--ink)}
.tab .n{display:inline-block;background:var(--chip);color:var(--text);border-radius:4px;padding:0 7px;font-size:12px;font-weight:600}
.tab .n.klaar{background:var(--ok-soft);color:var(--ok)}
@media (max-width:1400px){.tab{font-size:13px}}

main{padding:26px 0 80px}
#groepen{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
#groepen:empty{display:none}
.pil{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:5px 15px;font-size:14px;font-weight:600;color:var(--text)}
.pil.aan{background:var(--ink);border-color:var(--ink);color:#fff}
.pil .n{margin-left:6px;font-weight:500;opacity:.8}

/* bovenaan: waar sta ik */
#status h2{font-size:22px;font-weight:900;line-height:1.25}
#status h2 span{color:var(--coral)}
#status p{margin:4px 0 0;font-size:14px}
#stepper{display:flex;gap:4px;margin:14px 0 22px}
.seg{flex:1;height:8px;border-radius:4px;background:var(--line-strong);border:0;padding:0;min-width:10px}
.seg.klaar{background:var(--ok)}
.seg.nu{outline:2px solid var(--coral);outline-offset:2px}
.seg:hover{filter:brightness(.9)}

/* de vraag */
.vraag{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:30px 32px 26px}
.vk{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.chip{display:inline-flex;align-items:center;background:var(--chip);color:var(--text);border-radius:4px;padding:2px 9px;font-size:12px;font-weight:600;line-height:1.4}
.chip.coral{background:var(--coral-soft);color:var(--coral)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.blue{background:var(--blue-soft);color:var(--blue)}
.vraag h2{font-size:28px;font-weight:900;line-height:1.15;margin:0 0 8px}
.vraag .uitleg{font-size:16px;margin:0 0 20px;max-width:720px}
.vraag .grootrij{display:flex;gap:12px;align-items:stretch;margin-bottom:6px}
.vraag .grootrij .knop.groot{flex:1}
.vraag .grootrij .knop.licht{width:auto;white-space:nowrap;padding:0 24px;font-size:15px}
.vraag .vervolg{margin:12px 0 0;font-size:14px;color:var(--muted)}
.dropchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.dropchips .chip{font-size:14px;padding:5px 12px;background:var(--chip)}

/* groepen binnen een kenmerk */
.groepen{margin-top:26px;border-top:1px solid var(--line)}
.gr{border-bottom:1px solid var(--line);padding:12px 0}
.gr-rij{display:flex;align-items:center;gap:16px}
.gr-naam{flex:1;min-width:0}
.gr-naam b{font:700 17px Figtree,sans-serif;color:var(--ink)}
.gr-naam .n{margin-left:10px;color:var(--text);font-weight:600}
.gr-naam small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.gr-keuze{display:flex;align-items:center;gap:8px;flex:none}
.gr-keuze .knop{padding:7px 18px;font-size:14px}
.gr-keuze .knop.aan.klopt{background:var(--ok);border-color:var(--ok);color:#fff}
.gr-keuze .knop.aan.pas{background:var(--ink);border-color:var(--ink);color:#fff}
.nogkeuze{font-size:13px;color:var(--warn);font-weight:600;margin-right:6px}
.gr-wie{font-size:12px;color:var(--muted);margin-right:4px}
.gr.geen .gr-naam b{color:var(--warn)}
.paneel{margin:12px 0 4px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.paneel p{margin:0 0 10px;font-size:14px;color:var(--ink)}
.kiezer{display:flex;flex-wrap:wrap;gap:6px}
.kz{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:6px;padding:6px 12px;font-size:14px;font-weight:500}
.kz:hover{border-color:var(--ink)}
.kz.gekozen{background:var(--ink);border-color:var(--ink);color:#fff}
.kz.nw{color:var(--coral);border-style:dashed;border-color:var(--coral)}
.kz.geenw{color:var(--muted)}
.nieuwrij{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.nieuwrij input{height:38px;border:1px solid var(--coral);border-radius:6px;padding:0 12px;min-width:240px}
.nieuwrij .fout{font-size:13px;color:var(--warn);width:100%}
.linkje{background:none;border:0;color:var(--coral);font-weight:600;padding:0;font-size:14px}
.linkje:hover{text-decoration:underline}

/* productlijst */
.plijst{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden}
.ptools{display:flex;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--bg);font-size:14px}
.ptools label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.ptools input,.prij input{width:17px;height:17px;accent-color:var(--coral)}
.pbar{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--coral-soft)}
.pbar p{margin:0 0 8px;font-size:14px;color:var(--ink);font-weight:600}
.pbar .knop{margin-top:10px}
.pl{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto}
.prij{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line);font-size:14px}
.prij:last-child{border-bottom:0}
.prij.sel{background:var(--bg)}
.pbeeld{width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:9px;color:var(--muted);text-align:center}
.pbeeld img{max-width:100%;max-height:100%;object-fit:contain}
.pnaam{min-width:0}
.pnaam b{display:block;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnaam small{color:var(--muted);font-size:12px}
.pwaarde{text-align:right;font-size:13px;max-width:280px}
.pwaarde .chip{font-size:13px}
.pwaarde small{display:block;color:var(--warn);font-size:12px}

/* laten vallen, aanpassen */
.vrij{border-top:1px solid var(--line)}
.vrij-rij{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.vrij-rij .t{flex:1}
.vrij-rij b{color:var(--ink);font-weight:600}
.vrij-rij small{display:block;color:var(--muted);font-size:12.5px}
.tweekeuze{display:flex;gap:6px}
.tweekeuze .kz{padding:6px 14px}

/* eindscherm */
.eind{text-align:center;padding:30px 20px 18px}
.eind .vink{width:72px;height:72px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 18px}
.eind .vink svg{width:38px;height:38px}
.eind h2{font-size:28px;margin-bottom:10px}
.eind p{max-width:560px;margin:0 auto 22px;font-size:16px}
.eind .knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.eind .knop{padding:14px 26px;font-size:16px}

/* logboek */
#log{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--card);border-left:1px solid var(--line-strong);box-shadow:-8px 0 30px rgba(0,0,0,.12);z-index:30;padding:20px 22px;overflow-y:auto}
.log-kop{display:flex;justify-content:space-between;align-items:center}
.log-kop h2{font-size:20px}
.loglijst{list-style:none;margin:10px 0 0;padding:0}
.loglijst li{border-top:1px solid var(--line);padding:10px 0;font-size:14px}
.loglijst .t{display:block;font-size:12px;color:var(--muted)}
.loglijst .c{display:block;font-size:12px;color:var(--text)}
.loglijst .w{color:var(--ink)}
.loglijst li.terug .w{text-decoration:line-through;color:var(--muted)}
.loglijst .tekstknop{margin-top:2px}
.log-sub{font-size:15px;font-weight:800;margin:22px 0 0}
.log-sub .n{background:var(--chip);border-radius:4px;padding:0 6px;font:600 12px Figtree,sans-serif}

/* inloggen */
#login{position:fixed;inset:0;z-index:50;background:rgba(33,33,33,.55);display:grid;place-items:center;padding:20px}
.login-kaart{background:var(--card);border-radius:10px;padding:32px 34px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px}
.login-kaart h1{font-size:22px;font-weight:900}
.login-kaart p{margin:0}
.login-kaart label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--ink)}
.login-kaart input{height:42px;border:1px solid var(--line-strong);border-radius:6px;padding:0 12px;font-weight:400}
.login-kaart input:focus,.nieuwrij input:focus{outline:2px solid var(--coral);outline-offset:-1px}
.login-kaart .knop{margin-top:4px;text-align:center}
.login-kaart .fout{font-size:13px;color:var(--warn)}
#fout{display:none;padding:40px;text-align:center;color:var(--warn);white-space:pre-line}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:#fff;border-radius:8px;padding:10px 16px;font-size:14px;z-index:40;display:flex;gap:14px;align-items:center}
.toast button{background:none;border:0;color:#ffb3b1;text-decoration:underline;font-size:14px}

/* ronde 3 */
.linkje.wat{display:block;margin:0 0 10px;font-size:14px}
.uitlegkader{background:var(--blue-soft);border-radius:6px;padding:10px 14px;margin:0 0 14px;max-width:720px}
.uitlegkader p{margin:0;font-size:14px;color:var(--ink)}
.uitlegkader p.muted{color:var(--text);margin-top:3px}
.opm{margin:18px 0 0}
.linkje.klein{font-size:13px;color:var(--muted);font-weight:500;text-decoration:underline}
.opmform{margin-top:18px;max-width:640px;display:flex;flex-direction:column;gap:10px}
.opmform label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink)}
.opmform textarea,.opmform input{border:1px solid var(--line-strong);border-radius:6px;padding:8px 12px;font-weight:400;font-size:14px;resize:vertical}
.opmform textarea:focus,.opmform input:focus{outline:2px solid var(--coral);outline-offset:-1px}
.opmform .rij{display:flex;gap:12px;align-items:center}
.wchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.wchip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);background:var(--card);border-radius:6px;padding:7px 8px 7px 14px;font-size:15px;color:var(--ink)}
.wchip b{font-weight:600}
.wchip span{background:var(--chip);color:var(--text);border-radius:4px;padding:0 8px;font-size:13px;font-weight:600}
.wchip:hover{border-color:var(--ink)}
.wchip.aan{border-color:var(--coral);background:var(--coral-soft)}
.wchip.nul{opacity:.55}
.plink{display:inline-block;margin-left:10px;font-size:12px;font-weight:600;color:var(--coral);text-decoration:none}
.plink:hover{text-decoration:underline}
.herk{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prij .pnaam small.herk{display:inline}
.knop.grootlicht{flex:1;font:700 17px/1.2 Montserrat,sans-serif;padding:18px 20px}
.vraag .grootrij .knop.licht.grootlicht{padding:18px 20px;font:700 17px/1.2 Montserrat,sans-serif;width:auto}
.opmform textarea,.opmform input{font-family:inherit}

/* vallen-vraag: kenmerken om op te klikken */
.dchips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.dchip{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:6px;background:var(--card);overflow:hidden}
.dchip.open{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dchip.kept{border-color:var(--ok);background:var(--ok-soft)}
.dc-naam{border:0;background:none;padding:8px 12px;font-size:15px;font-weight:600;color:var(--ink);position:relative;padding-right:26px}
.dc-naam::after{content:"";position:absolute;right:10px;top:50%;margin-top:-2px;border:4px solid transparent;border-top-color:var(--muted)}
.dchip.open .dc-naam::after{border-top-color:transparent;border-bottom-color:var(--ink);margin-top:-6px}
.dc-naam:hover{background:var(--bg)}
.schak{display:flex;align-items:center;gap:7px;padding:0 12px;border-left:1px solid var(--line);font-size:12.5px;color:var(--text);cursor:pointer;user-select:none}
.schak input{position:absolute;opacity:0;width:0;height:0}
.schak .sl{width:30px;height:17px;border-radius:9px;background:var(--line-strong);position:relative;flex:none;transition:background .15s}
.schak .sl::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .15s}
.schak input:checked + .sl{background:var(--ok)}
.schak input:checked + .sl::after{left:15px}
.schak input:focus-visible + .sl{outline:2px solid var(--coral);outline-offset:2px}
.chipdetail{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:0 0 14px}
.cd-kop b{font:800 17px Montserrat,sans-serif;color:var(--ink)}
.chipdetail p{margin:6px 0 0;font-size:14.5px;color:var(--ink)}
.cd-wat .muted{color:var(--text)}
.cd-waarden{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.wchip.klein{padding:3px 5px 3px 10px;font-size:13px;cursor:default;gap:8px}
.wchip.klein:hover{border-color:var(--line-strong)}
.cd-prod{list-style:none;margin:10px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:6px}
.cd-prod li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 12px;border-top:1px solid var(--line);font-size:14px}
.cd-prod li:first-child{border-top:0}
.cd-waarom{margin-top:12px!important;padding-top:10px;border-top:1px solid var(--line)}

/* gesegmenteerde keuze Laten vallen / Houden */
.dgroep{font:800 15px Montserrat,sans-serif;color:var(--ink);margin:18px 0 10px}
.dchip.kept{background:var(--card);border-color:var(--line-strong)}
.seg2{display:inline-flex;border-left:1px solid var(--line)}
.seg2 button{border:0;background:var(--card);color:var(--text);padding:0 13px;font-size:13px;font-weight:600;border-left:1px solid var(--line)}
.seg2 button:first-child{border-left:0}
.seg2 button:hover{background:var(--bg)}
.seg2 button.aan.vallen{background:var(--ink);color:#fff}
.seg2 button.aan.houden{background:var(--ok);color:#fff}

/* startscherm */
#intro{position:fixed;inset:0;z-index:45;background:rgba(33,33,33,.55);display:grid;place-items:center;padding:16px;overflow:hidden}
.intro-kaart{position:relative;background:var(--card);border-radius:12px;max-width:820px;width:100%;padding:26px 36px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.intro-sluit{position:absolute;top:14px;right:18px}
.intro-oog{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.intro-kaart h1{font-size:28px;font-weight:900;line-height:1.15;margin:4px 0 8px}
.intro-kaart h2{font:800 14px Montserrat,sans-serif;margin:16px 0 8px;color:var(--ink)}
.intro-waarom{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.intro-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.intro-stappen li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 8px;font-size:13.5px;line-height:1.35;color:var(--ink)}
.intro-stappen .ic{grid-row:1;grid-column:1;width:26px;height:26px;color:var(--coral)}
.intro-stappen .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.intro-stappen b{grid-row:1;grid-column:2;justify-self:end;font:800 13px Montserrat,sans-serif;background:var(--coral);color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.intro-stappen li>span:last-child{grid-column:1/-1}
.intro-weten{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:14px;color:var(--ink)}
.intro-weten li{padding-left:18px;position:relative}
.intro-weten li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.intro-tijd{margin:14px 0;padding:10px 14px;background:var(--blue-soft);border-radius:6px;font-size:14px;color:var(--ink)}
.intro-tijd p{margin:0}
.intro-tijd p:empty{display:none}
.intro-kaart .knop.groot{padding:16px 24px;font-size:18px}
@media (max-height:760px){.intro-kaart{padding:18px 30px}.intro-kaart h1{font-size:24px}.intro-kaart h2{margin:10px 0 6px}.intro-tijd{margin:10px 0}}