/* Stap 2: "gereserveerd" en de extra's.
   Zelfde tokens als de configurator, zodat de overgang niet opvalt. */

.kbts-flow{
  --f-navy:var(--ast-global-color-2,#181830);
  --f-tekst:var(--ast-global-color-3,#5E6376);
  --f-accent:var(--ast-global-color-0,#8A6835);
  --f-lijn:var(--ast-global-color-6,rgba(24,24,48,.18));
  --f-vlak:var(--ast-global-color-5,#fff);
  --f-licht:var(--ast-global-color-4,#F1EDE5);
  max-width:860px; margin:0 auto; padding:8px 0 48px; color:var(--f-tekst);
}
.kbts-flow *{box-sizing:border-box}

/* voortgang */
.kbts-stappen{
  display:flex; gap:6px; list-style:none; margin:0 0 26px; padding:0;
  font-size:.78rem; letter-spacing:.06em;
}
.kbts-stappen li{
  flex:1; display:flex; align-items:center; gap:8px; padding:9px 12px;
  border-top:2px solid var(--f-lijn); color:var(--f-tekst); opacity:.55;
}
.kbts-stappen li span{
  width:20px; height:20px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:11px;
  background:var(--f-lijn); color:var(--f-navy);
}
.kbts-stappen .kbts-af{opacity:1}
.kbts-stappen .kbts-af span{background:var(--f-accent);color:#fff}
.kbts-stappen .kbts-nu{opacity:1;border-top-color:var(--f-accent);font-weight:600;color:var(--f-navy)}
.kbts-stappen .kbts-nu span{background:var(--f-navy);color:#fff}

.kbts-flow-kop{margin:0 0 6px;color:var(--f-navy)}
.kbts-flow-sub{margin:0 0 24px;font-size:.9rem}

/* wat er gereserveerd staat */
.kbts-gereserveerd{border:1px solid var(--f-lijn);border-radius:4px;background:var(--f-vlak)}
.kbts-res-regel{
  display:flex; gap:16px; padding:16px 18px; border-bottom:1px solid var(--f-lijn);
  align-items:flex-start;
}
.kbts-res-beeld img{width:74px;height:auto;border-radius:3px;display:block}
.kbts-res-tekst{flex:1;min-width:0}
.kbts-res-tekst strong{color:var(--f-navy);display:block;margin-bottom:6px}
.kbts-res-tekst ul{list-style:none;margin:0;padding:0;font-size:.85rem;line-height:1.7}
.kbts-res-tekst li span{
  display:inline-block; min-width:104px; color:var(--f-tekst); opacity:.75;
  font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
}
.kbts-res-prijs{
  font-size:1.05rem; color:var(--f-navy); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.kbts-res-totaal{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 18px; background:var(--f-licht); font-size:.9rem;
}
.kbts-res-totaal strong{font-size:1.25rem;color:var(--f-navy);font-variant-numeric:tabular-nums}

/* extra's */
.kbts-extras-kop{margin:34px 0 14px;font-size:1.1rem;color:var(--f-navy)}
.kbts-extras{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kbts-extra{
  border:1px solid var(--f-lijn); border-radius:4px; padding:14px;
  background:var(--f-vlak); display:flex; flex-direction:column; gap:7px;
}
.kbts-extra-beeld img{width:100%;height:auto;border-radius:3px;display:block}
.kbts-extra strong{color:var(--f-navy);font-size:.95rem}
.kbts-extra p{margin:0;font-size:.82rem;line-height:1.45}
.kbts-extra-prijs{font-size:.95rem;color:var(--f-navy);margin-top:auto}

/* verder */
.kbts-flow-verder{
  display:flex; align-items:center; gap:18px; margin-top:30px;
  padding-top:20px; border-top:1px solid var(--f-lijn); flex-wrap:wrap;
}
.kbts-flow .kbts-knop{
  display:inline-block; text-decoration:none; text-align:center;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 26px; border-radius:2px; border:1px solid var(--f-accent);
  transition:background .25s,color .25s;
}
.kbts-flow .kbts-primair{background:var(--f-accent);color:#fff;font-weight:500}
.kbts-flow .kbts-primair:hover{background:var(--f-navy);border-color:var(--f-navy);color:#fff}
.kbts-flow .kbts-tweede{background:none;color:var(--f-accent)}
.kbts-flow .kbts-tweede:hover{background:var(--f-licht)}
.kbts-terug-link{font-size:.85rem;color:var(--f-tekst)}

@media(max-width:600px){
  .kbts-stappen li{padding:8px 6px;font-size:.7rem}
  .kbts-stappen li span{width:18px;height:18px;font-size:10px}
  .kbts-res-regel{flex-wrap:wrap}
  .kbts-res-prijs{width:100%;text-align:right}
  .kbts-flow-verder .kbts-knop{width:100%}
}

/* Alleen de balk (op de checkout, zonder de rest van stap 2) */
.kbts-flow-kop-only{max-width:100%;padding-bottom:18px}

/* Reserveringsklok */
.kbts-klok{
  margin:0 0 22px; padding:9px 14px; border-radius:3px;
  background:var(--f-licht,#F1EDE5); color:var(--f-navy,#181830);
  font-size:.85rem; display:inline-block;
}
.kbts-klok strong{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.kbts-klok-bijna{background:#FBEFD8}
.kbts-klok-op{background:#F6E7E3;color:#8A3324}

/* Leverdatum bij het afrekenen */
.kbts-levering{margin-top:18px}
.kbts-levering input[type="date"]{
  width:100%; padding:12px 14px; border:1px solid var(--f-lijn,rgba(24,24,48,.18));
  border-radius:3px; font:inherit; background:#fff;
}
.kbts-ophalen{
  margin:8px 0 0; font-size:.82rem; line-height:1.5;
  color:var(--f-tekst,#5E6376);
}

/* Leverweek bij het afrekenen */
.kbts-levering h3{margin:22px 0 10px;font-size:1.05rem;color:var(--f-navy,#181830)}
.kbts-levering select{
  width:100%; padding:12px 14px; border:1px solid var(--f-lijn,rgba(24,24,48,.18));
  border-radius:3px; font:inherit; background:#fff;
}

/* Offerteformulier */
.kbts-offerteform{margin-top:26px;max-width:520px}
.kbts-offerteform p{margin:0 0 14px}
.kbts-offerteform label{display:block;font-size:.85rem;color:var(--f-navy,#181830)}
.kbts-offerteform input,.kbts-offerteform textarea{
  width:100%; margin-top:5px; padding:11px 13px; font:inherit;
  border:1px solid var(--f-lijn,rgba(24,24,48,.18)); border-radius:3px; background:#fff;
}
.kbts-offerteform button{margin-top:6px;border:0;cursor:pointer}

/* Melding boven het offerteformulier: iets ging mis, de invoer staat er nog. */
.kbts-melding{
  margin:0 0 20px; padding:11px 15px; border-radius:3px;
  background:var(--f-licht,#F1EDE5);
  border-left:3px solid var(--f-accent,#8A6835);
  color:var(--f-navy,#181830); font-size:.92rem;
}