/* ============================================================
   SHIFT & LIFT — Aanvraagflow (prijsindicatie)
   Zelfde huisstijl als de rest van de site:
   Zwart #060606 · Oranje #f26a00 · Crème #F8E8D8 · Wit #F3F3F2
   Alle variabelen hebben een fallback, zodat dit bestand ook
   werkt op pagina's die de :root-variabelen (nog) niet laden.
   ============================================================ */

.sl-open{overflow:hidden !important}

/* ---------- overlay ---------- */
.sl-ov{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,6,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  box-sizing:border-box;
  opacity:0; transition:opacity .18s ease;
}
.sl-ov.is-in{opacity:1}
.sl-ov[hidden]{display:none}

/* ---------- venster ---------- */
.sl-modal{
  position:relative; width:100%; max-width:600px;
  max-height:calc(100dvh - 20px); max-height:calc(100vh - 20px); margin-top:0;
  background:var(--paper,#f3f3f2); color:var(--ink,#060606);
  border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(18px); transition:transform .22s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 60px rgba(0,0,0,.5);
  font-family:var(--body,'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}
.sl-ov.is-in .sl-modal{transform:translateY(0)}

/* ---------- kop ---------- */
.sl-head{
  flex:none; background:var(--ink,#060606); color:var(--cream,#f8e8d8);
  padding:16px 18px; display:flex; align-items:center; gap:12px;
  position:relative; overflow:hidden;
}
.sl-head::after{
  content:""; position:absolute; right:-60px; top:-70px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(242,106,0,.34),transparent 66%); pointer-events:none;
}
.sl-head .sl-mark{
  flex:none; width:34px; height:34px; border-radius:3px;
  background:url("logo.png") center/contain no-repeat;
}
.sl-head .sl-t{position:relative; z-index:1; flex:1; min-width:0}
.sl-head h2{
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  font-size:23px; line-height:1; margin:0; color:#fff;
}
.sl-head p{margin:5px 0 0; font-size:13.5px; line-height:1.35; color:#b9b5b1}
.sl-x{
  position:relative; z-index:1; flex:none;
  appearance:none; background:transparent; border:1px solid #3a3a3a; border-radius:4px;
  width:38px; height:38px; color:var(--cream,#f8e8d8); font-size:24px; line-height:1;
  cursor:pointer; display:grid; place-items:center; padding:0;
}
.sl-x:hover{border-color:var(--orange,#f26a00); color:var(--orange,#f26a00)}

/* ---------- scrollend gedeelte ---------- */
.sl-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 18px 28px; overscroll-behavior:contain;
}

/* ---------- blokken ---------- */
.sl-block + .sl-block{margin-top:26px; padding-top:24px; border-top:1px solid var(--line,#e0e0dd)}
.sl-legend{
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:700; text-transform:uppercase; font-size:17px; letter-spacing:.02em;
  color:#fff; margin:0 0 14px; padding:0; display:block;
}

/* ---------- velden ---------- */
.sl-f{margin-bottom:16px}
.sl-f:last-child{margin-bottom:0}
.sl-f > label,
.sl-f .sl-label{
  display:block; font-weight:700; font-size:15.5px; line-height:1.3;
  margin-bottom:7px; color:var(--ink,#060606);
}
.sl-f .sl-opt{font-weight:500; color:var(--muted,#5d5d5a); font-size:14px}
.sl-hint{display:block; font-weight:400; font-size:13.5px; color:var(--muted,#5d5d5a); margin-top:3px}

.sl-in{
  width:100%; font:inherit; font-size:16px; /* 16px voorkomt inzoomen op iOS */
  color:var(--ink,#060606); background:var(--white,#fff);
  border:1.5px solid var(--line,#e0e0dd); border-radius:4px;
  padding:13px 14px; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.sl-in{min-height:88px; resize:vertical; line-height:1.5}
.sl-in::placeholder{color:#9a9793}
.sl-in:hover{border-color:#c9c7c3}
.sl-in:focus{outline:none; border-color:var(--orange,#f26a00); box-shadow:0 0 0 3px rgba(242,106,0,.18)}
.sl-in[aria-invalid="true"]{border-color:#c0392b; background:#fff6f5}

.sl-err{display:none; margin-top:6px; font-size:13.5px; font-weight:600; color:#c0392b}
.sl-f.is-bad .sl-err{display:block}
.sl-err.is-actief{display:block}
.sl-tak-kiezer.is-bad .sl-opt-groot span{box-shadow:inset 0 0 0 2px #c0392b}

/* ---------- keuzeknoppen (verdieping / lift / hulp) ---------- */
.sl-opts{display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0}
.sl-opts.sl-stack{flex-direction:column; gap:9px}
.sl-opt-btn{position:relative; flex:0 1 auto}
.sl-opt-btn input{
  position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer;
}
.sl-opt-btn span{
  display:block; text-align:center; font-size:15.5px; font-weight:600; line-height:1.25;
  background:var(--white,#fff); border:1.5px solid var(--line,#e0e0dd); border-radius:4px;
  padding:12px 14px; color:var(--ink,#060606);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.sl-opts.sl-stack .sl-opt-btn span{text-align:left}
.sl-opt-btn span small{display:block; font-weight:500; font-size:13px; color:var(--muted,#5d5d5a); margin-top:3px}
.sl-opt-btn input:hover + span{border-color:#c9c7c3}
.sl-opt-btn input:checked + span{
  border-color:var(--orange,#f26a00); background:#fff3e8; color:#7a3600;
  box-shadow:inset 0 0 0 1px var(--orange,#f26a00);
}
.sl-opt-btn input:checked + span small{color:#a05010}
.sl-opt-btn input:focus-visible + span{outline:3px solid var(--orange,#f26a00); outline-offset:2px}

/* liftvraag verschijnt alleen als hij nodig is */
.sl-lift{display:none}
.sl-lift.is-on{display:block; animation:sl-fade .18s ease}
@keyframes sl-fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ---------- snelkeuze wat ---------- */
.sl-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; padding:0; list-style:none}
.sl-chip{
  appearance:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
  background:transparent; color:var(--muted,#5d5d5a);
  border:1px solid var(--line,#e0e0dd); border-radius:100px; padding:7px 13px;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.sl-chip:hover{border-color:var(--orange,#f26a00); color:var(--orange,#f26a00); background:#fff}

/* ---------- foto's ---------- */
.sl-drop{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  appearance:none; cursor:pointer; font:inherit;
  background:var(--white,#fff); border:1.5px dashed #cdcbc7; border-radius:4px;
  padding:15px 14px; color:var(--ink,#060606);
  transition:border-color .15s ease, background .15s ease;
}
.sl-drop:hover{border-color:var(--orange,#f26a00); background:#fffaf6}
.sl-drop svg{flex:none; color:var(--orange,#f26a00)}
.sl-drop b{display:block; font-size:15.5px}
.sl-drop small{display:block; font-size:13.5px; color:var(--muted,#5d5d5a); margin-top:2px}
.sl-thumbs{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; padding:0; list-style:none}
.sl-thumbs li{position:relative; width:74px; height:74px; border-radius:4px; overflow:hidden; border:1px solid var(--line,#e0e0dd)}
.sl-thumbs img{width:100%; height:100%; object-fit:cover; display:block}
.sl-thumbs button{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  border:0; cursor:pointer; background:rgba(6,6,6,.78); color:#fff;
  font-size:15px; line-height:1; display:grid; place-items:center; padding:0;
}
.sl-thumbs button:hover{background:var(--orange,#f26a00)}

/* (basisstijl voor .sl-calc is verderop overschreven met de klikbare knopversie) */

/* ---------- vaste voet met verzendknop ---------- */
.sl-foot{
  flex:none; background:var(--white,#fff); border-top:1px solid var(--line,#e0e0dd);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
}
.sl-send[hidden]{display:none}
.sl-send{
  position:relative; display:flex; width:100%; align-items:center; justify-content:center; gap:12px;
  appearance:none; cursor:pointer; font:inherit; border:0; border-radius:6px;
  padding:16px 18px; color:#fff; text-decoration:none; overflow:hidden;
  background:linear-gradient(180deg,var(--orange-hot,#ff7a18) 0%,var(--orange,#f26a00) 40%,var(--orange-deep,#c04f00) 100%);
  box-shadow:0 5px 0 rgba(0,0,0,.3), 0 12px 28px rgba(242,106,0,.32);
  transition:transform .12s ease, box-shadow .18s ease;
}
.sl-send:hover{transform:translateY(-1px); box-shadow:0 6px 0 rgba(0,0,0,.3), 0 16px 34px rgba(242,106,0,.45)}
.sl-send:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.3), 0 8px 18px rgba(242,106,0,.28)}
.sl-send b{
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(19px,5.2vw,23px); line-height:1.05;
}
.sl-send svg{flex:none; width:26px; height:26px}
.sl-foot .sl-note{margin:11px 0 0; text-align:center; font-size:13.5px; color:var(--muted,#5d5d5a); line-height:1.4}
.sl-foot .sl-note a{color:var(--ink,#060606); font-weight:600}

/* ---------- voortgangsbalk ---------- */
.sl-voortgang{flex:none; padding:12px 18px 4px; background:var(--ink,#060606)}
.sl-voortgang-balk-bg{width:100%; height:6px; border-radius:100px; background:rgba(255,255,255,.16); overflow:hidden}
.sl-voortgang-balk{height:100%; background:var(--orange,#f26a00); border-radius:100px; transition:width .25s ease; width:20%}
.sl-voortgang-tekst{display:block; margin-top:7px; font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#b9b5b1}

.sl-lopend{
  flex:none; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  padding:10px 18px; background:#1a1a1a; border-bottom:1px solid rgba(255,255,255,.08);
}
.sl-lopend-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#b9b5b1}
.sl-lopend-bedrag{font-size:22px; font-weight:800; color:var(--orange,#f26a00); transition:transform .15s ease}
.sl-lopend-sub{flex-basis:100%; font-size:12px; color:#918d89}
@media (min-width:560px){ .sl-lopend-sub{flex-basis:auto; margin-left:auto} }

/* ---------- stappen ---------- */
.sl-stap[hidden]{display:none}

/* ---------- terug / volgende ---------- */
.sl-terug[hidden], .sl-volgende[hidden]{display:none}
.sl-foot-nav{display:flex; gap:10px}
.sl-terug{
  flex:0 0 auto; appearance:none; cursor:pointer; font:inherit; font-weight:700; font-size:15px;
  border:1.5px solid #4a4a4a; border-radius:6px; padding:14px 18px; background:transparent; color:var(--cream,#f8e8d8);
}
.sl-terug:hover{border-color:var(--orange,#f26a00); color:#fff}
.sl-volgende{
  flex:1 1 auto; appearance:none; cursor:pointer; font:inherit; border:0; border-radius:6px;
  padding:16px 18px; color:#fff; font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; letter-spacing:.015em; font-size:clamp(17px,5vw,20px);
  background:linear-gradient(180deg,var(--orange-hot,#ff7a18) 0%,var(--orange,#f26a00) 40%,var(--orange-deep,#c04f00) 100%);
  box-shadow:0 5px 0 rgba(0,0,0,.3), 0 12px 28px rgba(242,106,0,.32);
  transition:transform .12s ease, box-shadow .18s ease;
}
.sl-volgende:hover{transform:translateY(-1px)}
.sl-volgende:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.3), 0 8px 18px rgba(242,106,0,.28)}

/* ---------- bevestigingsscherm ---------- */
.sl-done{display:none; padding:30px 20px 26px; text-align:center}
.sl-modal.is-done .sl-body,
.sl-modal.is-done .sl-foot{display:none}
.sl-modal.is-done .sl-done{display:block}
.sl-done .sl-ok{
  width:62px; height:62px; margin:0 auto 16px; border-radius:50%;
  background:var(--orange,#f26a00); display:grid; place-items:center;
}
.sl-done h3{
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; font-size:28px; line-height:1.05; margin:0;
}
.sl-done > p{margin:12px auto 0; max-width:44ch; font-size:16px; color:var(--muted,#5d5d5a); line-height:1.55}
.sl-done .sl-foto-tip{
  margin-top:18px; background:var(--white,#fff); border:1px solid var(--line,#e0e0dd);
  border-radius:4px; padding:15px; text-align:left; font-size:14.5px; line-height:1.5;
  color:var(--muted,#5d5d5a);
}
.sl-done .sl-foto-tip b{color:var(--ink,#060606); display:block; margin-bottom:4px; font-size:15.5px}
.sl-done .sl-again{
  display:inline-block; margin-top:20px; font-weight:600; font-size:15px;
  color:var(--muted,#5d5d5a); background:none; border:0; border-bottom:1px solid #c9c7c3;
  cursor:pointer; padding:0 0 2px; font-family:inherit;
}
.sl-done .sl-again:hover{color:var(--orange,#f26a00); border-bottom-color:var(--orange,#f26a00)}
.sl-share{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:16px;
  appearance:none; cursor:pointer; font-family:var(--display,'Barlow Condensed',sans-serif);
  font-weight:800; text-transform:uppercase; font-size:18px; letter-spacing:.015em;
  background:var(--ink,#060606); color:#fff; border:0; border-radius:4px; padding:13px 22px;
}
.sl-share:hover{background:#1f1f1f}
.sl-share[hidden]{display:none}

/* ---------- desktop ---------- */
@media (min-width:700px){
  .sl-ov{align-items:center; padding:24px}
  .sl-modal{border-radius:8px; max-height:88vh; transform:translateY(0) scale(.97)}
  .sl-ov.is-in .sl-modal{transform:none}
  .sl-body{padding:26px 30px 32px}
  .sl-head{padding:20px 24px}
  .sl-head h2{font-size:27px}
  .sl-foot{padding:18px 30px}
  .sl-done{padding:38px 30px 34px}
}

/* ---------- toegankelijkheid ---------- */
@media (prefers-reduced-motion:reduce){
  .sl-ov,.sl-modal,.sl-send,.sl-lift.is-on{transition:none !important; animation:none !important}
}

/* ============================================================
   PRIJSCALCULATOR — extra stijl (los item / complete inboedel)
   ============================================================ */

/* grotere keuzeknoppen voor los item / compleet */
.sl-tak-kiezer{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:520px){ .sl-tak-kiezer{ grid-template-columns:1fr 1fr; } }
.sl-opt-groot{ display:flex; }
.sl-opt-groot span{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  width:100%; min-height:76px; padding:13px 40px 13px 16px; box-sizing:border-box;
  position:relative; border-radius:8px; border-width:2px;
  box-shadow:0 3px 0 rgba(0,0,0,.28);
  transition:border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.sl-opt-groot span::after{
  content:"›"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:800; line-height:1; opacity:.85;
}
.sl-opt-groot input:hover + span{ transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.3) }
.sl-opt-groot input:active + span{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28) }
.sl-opt-titel{
  display:block; font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:17px; line-height:1.15;
}
.sl-opt-groot small{display:block; font-weight:500; font-size:12.5px; line-height:1.3; color:#3a1c00}
.sl-opt-voorbeeld{ font-style:italic; opacity:.85 }
.sl-opt-groot input:checked + span .sl-opt-voorbeeld,
.sl-opt-groot input:checked + span small{ color:#f6c79a }
/* niet-gekozen kaart blijft duidelijk als knop herkenbaar t.o.v. de gekozen kaart */
.sl-opt-groot input:not(:checked) + span{ opacity:.94 }
.sl-opt-groot input:checked + span::after{ content:"✓"; opacity:1 }

.sl-type-uitleg{
  margin:24px 0 8px; padding:14px 16px; background:var(--white,#fff); border:0; border-radius:8px;
  font-size:14.5px; line-height:1.55; color:var(--ink,#060606); font-weight:400;
}
.sl-type-uitleg-label{ color:var(--orange,#f26a00); font-weight:800 }
.sl-type-uitleg[hidden]{display:none}

/* alleen actieve tak tonen */
.sl-tak[hidden]{display:none}

/* kleine tekstlink (afstand handmatig invullen) */
.sl-link-klein{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:600; color:var(--muted,#5d5d5a);
  text-decoration:underline; text-underline-offset:2px; padding:0; margin-top:8px;
}
.sl-link-klein:hover{color:var(--orange,#f26a00)}

/* status van de automatische afstandsberekening */
.sl-afstand-status{
  margin:12px 0 0; font-size:13.5px; font-weight:600; color:var(--muted,#5d5d5a); line-height:1.4;
}
.sl-afstand-status.is-fout{color:#c0392b}

/* dienstkaarten: Chauffeur / SJOUWFFEUR */
.sl-dienst-kaarten{display:grid; grid-template-columns:1fr; gap:10px}
.sl-dienst-kaart{position:relative; display:block}
.sl-dienst-kaart input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer}
.sl-dienst-inner{
  display:block; background:var(--white,#fff); border:1.5px solid var(--line,#e0e0dd); border-radius:6px;
  padding:14px 16px; transition:border-color .14s ease, background .14s ease;
}
.sl-dienst-inner b{
  display:block; font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; font-size:19px; letter-spacing:.01em; color:var(--ink,#060606);
}
.sl-dienst-inner em{display:block; font-style:normal; font-weight:700; font-size:15px; color:var(--orange,#f26a00); margin-top:2px}
.sl-dienst-inner small{display:block; font-size:13.5px; color:var(--muted,#5d5d5a); margin-top:5px; line-height:1.4}
.sl-dienst-kaart input:hover + .sl-dienst-inner{border-color:#c9c7c3}
.sl-dienst-kaart input:checked + .sl-dienst-inner{
  border-color:var(--orange,#f26a00); background:#fff3e8;
  box-shadow:inset 0 0 0 1px var(--orange,#f26a00);
}
.sl-dienst-kaart input:focus-visible + .sl-dienst-inner{outline:3px solid var(--orange,#f26a00); outline-offset:2px}

.sl-info-btn{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:700; color:var(--ink,#060606); text-decoration:underline;
  text-underline-offset:2px; padding:0; margin-top:8px; display:inline-block;
}
.sl-info-btn:hover{color:var(--orange,#f26a00)}
.sl-uitleg-tekst{
  margin:12px 0 0; padding:13px 14px; background:var(--white,#fff); border:1px solid var(--line,#e0e0dd);
  border-radius:4px; font-size:14px; line-height:1.5; color:var(--muted,#5d5d5a);
}
.sl-uitleg-tekst[hidden]{display:none}

/* extra hulp verschijnt alleen bij SJOUWFFEUR */
.sl-extra-hulp[hidden]{display:none}

/* prijsresultaat — zichtbaar vóór het invoeren van persoonsgegevens */
.sl-calc{
  display:none; width:100%; margin-top:18px; background:#fff3e8; border:1.5px solid #f6c79a; border-radius:6px;
  padding:18px 16px; text-align:center; font:inherit; appearance:none;
  transition:transform .12s ease, box-shadow .18s ease, border-color .15s ease;
}
.sl-calc.is-on{display:block}
.sl-calc:hover{border-color:var(--orange,#f26a00); box-shadow:0 6px 20px rgba(242,106,0,.22)}
.sl-calc-kop{
  display:block; font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:700; text-transform:uppercase; font-size:13.5px; letter-spacing:.03em; color:#a05010;
}
.sl-calc .sl-bedrag{
  display:block; margin-top:4px;
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; font-size:40px; line-height:1.1; color:var(--ink,#060606);
}
.sl-calc-tik{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:15px; color:#fff;
  background:linear-gradient(180deg,var(--orange-hot,#ff7a18) 0%,var(--orange,#f26a00) 40%,var(--orange-deep,#c04f00) 100%);
  border-radius:5px; padding:11px 16px;
}
.sl-calc-tik svg{width:20px; height:20px; flex:none}
.sl-disclaimer{display:block; margin:12px 0 0; font-size:13px; font-weight:600; color:#7a3600; line-height:1.4}

@media (min-width:520px){
  .sl-dienst-kaarten{grid-template-columns:1fr 1fr}
}

/* adressuggesties (klikbaar, vult straat + postcode + plaats automatisch in) */
.sl-f{position:relative}
.sl-suggesties{
  list-style:none; margin:0; padding:4px; position:absolute; left:0; right:0; top:100%; z-index:20;
  background:var(--white,#fff); border:1.5px solid var(--line,#e0e0dd); border-top:0;
  border-radius:0 0 4px 4px; box-shadow:0 10px 24px rgba(0,0,0,.14); max-height:220px; overflow-y:auto;
}
.sl-suggesties[hidden]{display:none}
.sl-suggesties li{
  padding:10px 11px; font-size:14.5px; line-height:1.35; color:var(--ink,#060606);
  border-radius:3px; cursor:pointer;
}
.sl-suggesties li:hover,
.sl-suggesties li:active{background:#fff3e8; color:#7a3600}

/* ============================================================
   DONKER THEMA — zelfde uitstraling als de homepage
   Achtergrond zwart, keuzeknoppen oranje met zwarte letters,
   algemene tekst wit/crème, invoervelden blijven wit (leesbaar
   om in te typen).
   ============================================================ */

.sl-modal{ background:var(--ink,#060606); color:var(--cream,#f8e8d8); }
.sl-block + .sl-block{ border-top-color:rgba(255,255,255,.14); }

.sl-f > label,
.sl-f .sl-label{ color:#fff; }
.sl-f .sl-opt{ color:#fff; }
.sl-hint{ color:#fff; }

/* invoervelden (adres, naam, telefoon, omschrijving) blijven wit — leesbaar om in te typen */
.sl-in{ background:var(--white,#fff); color:var(--ink,#060606); }

/* keuzeknoppen: verdieping, lift, type, producten — standaard oranje, alle letters wit */
.sl-opt-btn span{
  background:var(--orange,#f26a00); border-color:var(--orange,#f26a00); color:#fff;
}
.sl-opt-btn span small{ color:#fff; }
.sl-opt-btn input:hover + span{ background:var(--orange-hot,#ff7a18); border-color:var(--orange-hot,#ff7a18); }
/* geselecteerd: omgekeerd — zwarte achtergrond met oranje rand, tekst blijft wit */
.sl-opt-btn input:checked + span{
  background:var(--ink,#060606); color:#fff;
  border-color:var(--orange,#f26a00); box-shadow:inset 0 0 0 1px var(--orange,#f26a00);
}
.sl-opt-btn input:checked + span small{ color:#fff; }

/* producten (los item): geselecteerd wordt wit, met vinkje — voorkomt per ongeluk aanvinken */
.sl-opt-btn input[name="producten"]:checked + span{
  background:#fff; color:var(--ink,#060606);
  border-color:var(--orange,#f26a00); box-shadow:inset 0 0 0 2px var(--orange,#f26a00);
  position:relative; padding-right:34px;
}
.sl-opt-btn input[name="producten"]:checked + span::after{
  content:'✓'; position:absolute; top:6px; right:8px;
  width:20px; height:20px; border-radius:50%; background:var(--orange,#f26a00); color:#fff;
  font-size:13px; font-weight:800; line-height:20px; text-align:center;
}

/* dienstkaarten Chauffeur / Sjouwffeur — zelfde oranje/zwart-principe, letters altijd wit */
.sl-dienst-inner{ background:var(--orange,#f26a00); border-color:var(--orange,#f26a00); }
.sl-dienst-inner b,
.sl-dienst-inner em,
.sl-dienst-inner small{ color:#fff; }
.sl-dienst-kaart input:hover + .sl-dienst-inner{ background:var(--orange-hot,#ff7a18); }
.sl-dienst-kaart input:checked + .sl-dienst-inner{
  background:var(--ink,#060606); border-color:var(--orange,#f26a00);
}
.sl-dienst-kaart input:checked + .sl-dienst-inner b{ color:#fff; }
.sl-dienst-kaart input:checked + .sl-dienst-inner em{ color:#fff; }
.sl-dienst-kaart input:checked + .sl-dienst-inner small{ color:#fff; }
.sl-dienst-inner .sl-info-btn{ color:#fff; text-decoration-color:rgba(255,255,255,.6); }
.sl-dienst-kaart input:checked + .sl-dienst-inner .sl-info-btn{ color:#fff; }
.sl-dienst-inner .sl-info-btn{ position:relative; z-index:2; }

/* (?) uitlegknoppen en uitlegtekst */
.sl-info-btn{ color:#fff; }
.sl-info-btn:hover{ color:var(--orange,#f26a00); }
.sl-uitleg-tekst{ background:var(--ink-2,#101010); border-color:rgba(255,255,255,.16); color:#fff; }

/* foto-upload knop — ook oranje, zoals de andere knoppen, letters wit */
.sl-drop{ background:var(--orange,#f26a00); border-style:solid; border-color:var(--orange,#f26a00); color:#fff; }
.sl-drop:hover{ background:var(--orange-hot,#ff7a18); border-color:var(--orange-hot,#ff7a18); }
.sl-drop svg{ color:#fff; }
.sl-drop small{ color:#fff; }
.sl-thumbs li{ border-color:rgba(255,255,255,.2); }

/* gekozen producten: verwijderbare chips */
.sl-gekozen-chips{
  list-style:none; display:flex; flex-direction:column; gap:8px; margin:14px 0 0; padding:0;
}
.sl-gekozen-chips li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border:1.5px solid var(--orange,#f26a00); color:var(--ink,#060606);
  border-radius:8px; padding:10px 10px 10px 16px; font-size:14.5px; font-weight:700;
}
.sl-chip-x{
  appearance:none; border:0; cursor:pointer; width:20px; height:20px; border-radius:50%;
  background:var(--orange,#f26a00); color:#fff; font-size:14px; line-height:1;
  display:grid; place-items:center; padding:0; flex:none;
}
.sl-chip-x:hover{ background:var(--orange-hot,#ff7a18); }

/* link "afstand zelf invullen" en afstandsstatus */
.sl-link-klein{ color:#fff; text-decoration-color:rgba(255,255,255,.5); }
.sl-link-klein:hover{ color:var(--orange,#f26a00); }
.sl-afstand-status{ color:#fff; }
.sl-afstand-status.is-fout{ color:#ff8a75; }

/* voettekst met verstuurknop */
.sl-foot{ background:var(--ink,#060606); border-top-color:rgba(255,255,255,.14); }
.sl-foot .sl-note{ color:#fff; }
.sl-foot .sl-note a{ color:#fff; }

/* bevestigingsscherm */
.sl-done > p{ color:#fff; }
.sl-done .sl-foto-tip{ background:var(--ink-2,#101010); border-color:rgba(255,255,255,.16); color:#fff; }
.sl-done .sl-foto-tip b{ color:#fff; }

/* prijskaart — zwart met oranje rand, past bij de rest */
.sl-calc{ background:var(--ink-2,#101010); border-color:var(--orange,#f26a00); }
.sl-calc:hover{ box-shadow:0 6px 24px rgba(242,106,0,.35); }
.sl-calc-kop{ color:#fff; }
.sl-calc .sl-bedrag{ color:#fff; }
.sl-disclaimer{ color:#fff; }

/* iets feller rood voor foutmeldingen, leesbaar op zwart */
.sl-err{ color:#ff6b5e; }


/* Mobile: price indication opens at the top and remains immediately visible */
@media (max-width: 899px){
  .sl-ov{align-items:center;}
  .sl-modal{width:100%; margin-top:0; max-height:calc(100dvh - 20px); max-height:calc(100vh - 20px); border-radius:10px;}
}

/* Anders: afmetingen */
.sl-anders-maten{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin-top:8px}
.sl-anders-maten label{display:block; font-size:13px; margin-bottom:4px}
#sl-anders-oordeel:empty{display:none}

/* ---------- startwizard: stap 0 (route) ---------- */
.sl-modal.is-route .sl-head h2{font-size:clamp(24px,6.4vw,32px); line-height:1.02}
.sl-route .sl-f{margin-bottom:22px}
.sl-route .sl-f:last-child{margin-bottom:0}
.sl-route .sl-route-label{
  font-family:var(--display,'Barlow Condensed','Arial Narrow',sans-serif);
  font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:.02em;
  color:#fff; margin-bottom:9px;
}
.sl-in.sl-in-groot{font-size:17px; padding:17px 16px; border-radius:6px}
.sl-in.sl-in-groot:focus{border-color:var(--orange,#f26a00); box-shadow:0 0 0 3px rgba(242,106,0,.28); outline:none}
.sl-volgende:disabled{opacity:.45; cursor:not-allowed; transform:none}
.sl-modal.is-route .sl-volgende::after{content:" →"}
.sl-modal.is-type .sl-head h2{font-size:clamp(24px,6.4vw,32px); line-height:1.02}
.sl-modal.is-type .sl-stap[data-stap="1"] .sl-legend{display:none}

/* ---------- los item: prijzen in de knoppen, verdieping als keuzelijst ---------- */
.sl-product span small{font-weight:700; font-size:13.5px; opacity:.95}
.sl-adres-verborgen{display:none}
.sl-route-samen{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 18px; padding:12px 14px; border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#fff}
.sl-route-samen span{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:#b9b5b1; width:100%}
.sl-route-samen b{font-weight:700; font-size:15.5px; flex:1; min-width:0}
.sl-route-samen .sl-link-klein{margin:0}
select.sl-vd-select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f26a00' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.sl-f.is-bad .sl-vd-select{border-color:#e5484d}

/* ---------- complete inboedel: prijzen per stap ---------- */
.sl-dienst-prijs{display:block; font-weight:800; font-size:17px; color:#fff; margin:2px 0 4px}
.sl-dienst-kaart input:checked + .sl-dienst-inner .sl-dienst-prijs{color:#fff}
.sl-tarief-balk{flex:none; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px;
  margin:0 18px 4px; padding:10px 14px; border-radius:6px; background:rgba(242,106,0,.14); border:1px solid rgba(242,106,0,.45); color:#fff; font-size:14px}
.sl-tarief-balk b{font-size:16px; color:#fff}
.sl-tarief-balk[hidden]{display:none}
.sl-uren-regel{display:block; margin:6px 0 4px; font-size:14.5px; color:inherit}
.sl-uren-regel:empty{display:none}

/* ---------- los item: zoeken in de itemlijst ---------- */
.sl-item-zoek{position:relative; margin-bottom:12px}
.sl-item-lijst{max-height:min(46vh,340px); overflow-y:auto; -webkit-overflow-scrolling:touch}
.sl-item-lijst li{display:flex; justify-content:space-between; align-items:center; gap:12px}
.sl-item-lijst li b{flex:none; font-weight:800; color:var(--orange,#f26a00); font-size:14.5px}
.sl-item-lijst li.sl-item-anders{font-style:italic}
.sl-gekozen-chips li small{font-weight:700; opacity:.9; margin-left:2px}
[data-producten].is-bad .sl-item-zoek .sl-err{display:block}
[data-producten].is-bad #sl-item-zoek{border-color:#e5484d}
.sl-item-lijst{position:static; border-top:1.5px solid var(--line,#e0e0dd); border-radius:6px; margin-top:6px; font-size:16px}
.sl-item-lijst li{padding:13px 12px; font-size:16px}

/* ---------- los item: plusknop voor een extra item ---------- */
.sl-item-zoek[hidden]{display:none}
.sl-item-plus{display:flex; align-items:center; gap:12px; width:100%; margin:4px 0 12px; padding:12px 14px; cursor:pointer;
  background:transparent; color:#fff; border:1.5px dashed var(--orange,#f26a00); border-radius:6px; font:inherit; text-align:left}
.sl-item-plus[hidden]{display:none}
.sl-item-plus:hover{background:rgba(242,106,0,.12)}
.sl-plus-ico{flex:none; width:34px; height:34px; border-radius:50%; background:var(--orange,#f26a00); color:#fff; display:grid; place-items:center; font-size:24px; font-weight:800; line-height:1}
.sl-item-plus span b, .sl-item-plus > span:last-child{font-weight:700; font-size:15.5px}
.sl-item-plus small{display:block; font-weight:600; font-size:13px; color:var(--orange,#f26a00); margin-top:2px}

/* ---------- gewenste datum(s) ---------- */
.sl-datum-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:7px; margin:8px 0 10px}
.sl-datum{appearance:none; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px;
  border-radius:6px; border:1.5px solid rgba(255,255,255,.22); background:transparent; color:#fff}
.sl-datum span{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#b9b5b1}
.sl-datum b{font-size:19px; line-height:1.1}
.sl-datum small{font-size:12px; color:#b9b5b1}
.sl-datum.is-weekend{border-style:dashed}
.sl-datum[aria-pressed="true"]{background:var(--orange,#f26a00); border-color:var(--orange,#f26a00)}
.sl-datum[aria-pressed="true"] span, .sl-datum[aria-pressed="true"] small{color:#fff}
.sl-datum-ander{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px}
.sl-datum-ander input{flex:1 1 150px; max-width:220px; padding:10px 12px}
.sl-datum-chips:empty{display:none}
.sl-flexibel{display:flex !important; align-items:center; gap:10px; font-weight:600 !important; font-size:15px !important; margin-top:6px}
.sl-flexibel input{width:22px; height:22px; flex:none; accent-color:var(--orange,#f26a00)}
.sl-datum-chips{display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:6px; margin-top:4px !important}
.sl-datum-chips li{flex:0 0 auto; width:auto !important; padding:6px 8px 6px 12px !important; gap:8px; font-size:14px}

/* ---------- prijsopbouw ---------- */
.sl-opbouw{display:block; text-align:left; margin:12px 0 10px; padding:10px 12px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); font-weight:500}
.sl-opbouw-kop{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; opacity:.8; margin-bottom:6px}
.sl-opbouw > div{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:14px; line-height:1.35; border-bottom:1px dashed rgba(255,255,255,.14)}
.sl-opbouw > div b{flex:none; font-weight:700}
.sl-opbouw .sl-opbouw-afr{opacity:.85}
.sl-opbouw .sl-opbouw-tot{border-bottom:0; font-size:15.5px; font-weight:800; padding-top:7px}
.sl-opbouw-uitleg{display:block; text-align:left; font-size:13.5px; line-height:1.45; font-weight:500}
.sl-tarief-extra{display:block; width:100%; font-size:13px; opacity:.9}

.sl-spoed{align-items:flex-start !important; margin:0 0 14px !important; padding:12px 14px; border:1.5px solid var(--orange,#f26a00); border-radius:10px}
.sl-spoed input{margin-top:2px}
.sl-spoed small{display:block; font-weight:500; font-size:13px; opacity:.8; margin-top:2px}