/* ==========================================================================
   winkel.css — de zijkar, de knop en de winkelonderdelen van BEXX Verhuur.

   Deze stijl staat op elke pagina, dus alles begint met wk- of shop-. Zo raakt
   hij niets van wat er al staat. De kleuren staan hier nog eens als eigen
   variabelen: de bestaande pagina's zetten hun tokens in hun eigen <style>, en
   dit bestand mag daar niet van afhangen.
   ========================================================================== */
.wk, :root{
  --wk-or:#FF7D38; --wk-or-d:#E86420; --wk-or-l:#FFF3EB; --wk-or-lijn:#F6D9C4;
  --wk-ink:#14161A; --wk-ink2:#3E464F; --wk-zacht:#6E7883;
  --wk-wit:#FFFFFF; --wk-papier:#F5F3F0; --wk-lijn:#E3E0DB;
  --wk-groen:#137A4A; --wk-rood:#B3261E;
}

/* ---------- de zwevende knop ---------- */
/* De hoek rechtsonder wordt gedeeld: onderaan zit de chatbel, daarboven het
   mandje, en op de telefoon staat op de meeste pagina's ook nog de vaste
   onderbalk. Alle hoogtes komen uit deze twee variabelen, zodat er nooit iets
   over elkaar valt.

   ⚠️ De chat staat LINKSONDER en het mandje RECHTSONDER. Ze stonden vroeger
      in dezelfde hoek boven elkaar; zet ze daar niet opnieuw samen. --wk-bel
      wordt nu alleen nog door chat.css gebruikt, om het venster boven de bel
      te laten beginnen. */
:root{ --wk-hoek:18px; --wk-bel:66px; }
@media(max-width:860px){ :root{ --wk-hoek:12px; } }
body.wk-onderbalk{ --wk-hoek:18px; }
@media(max-width:860px){ body.wk-onderbalk{ --wk-hoek:calc(80px + env(safe-area-inset-bottom)); } }

.wk-knop{
  position:fixed; right:18px; bottom:var(--wk-hoek); z-index:9000;
  display:inline-flex; align-items:center; gap:9px;
  min-height:56px; padding:0 20px; border:0; border-radius:999px;
  background:var(--wk-ink); color:#fff; cursor:pointer;
  font:600 15px/1 'Inter',system-ui,-apple-system,sans-serif;
  box-shadow:0 10px 26px rgba(20,22,26,.26);
}
.wk-knop:hover{ background:#000; }
.wk-knop .wk-tel{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--wk-or); color:#241000; font-size:12.5px; font-weight:700;
}
.wk-knop-leeg .wk-tel{ background:#3E464F; color:#C8CCD2; }
@media(max-width:520px){
  .wk-knop{ right:12px; padding:0 16px; }
  .wk-knop .wk-knop-tekst{ display:none; }
}

/* ⚠️ OP DE TELEFOON VERDWIJNT EEN LEEG MANDJE. Onderaan staat op de meeste
   pagina's al een vaste balk met Bel en Nu huren. Een mandje waar niets in zit
   heeft de bezoeker toch niets te vertellen; ligt er wel iets in, dan komt hij
   vanzelf terug. */
@media(max-width:860px){
  .wk-knop-leeg{ display:none; }
}

/* ---------- de knop in de menubalk ---------- */
.wk-navknop{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:0 17px; border-radius:999px;
  background:var(--wk-or); color:#241000 !important;
  font-weight:700; font-size:14.5px; text-decoration:none; white-space:nowrap;
}
.wk-navknop:hover{ background:var(--wk-or-d); color:#fff !important; }
@media(max-width:860px){
  .wk-navknop{ min-height:50px; margin-top:8px; }
}

/* ---------- de laag en het paneel ---------- */
.wk-laag{
  position:fixed; inset:0; z-index:9100; background:rgba(15,17,20,.55);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.wk-laag.aan{ opacity:1; visibility:visible; }
body.wk-vast{ overflow:hidden; }

.wk-kar{
  position:absolute; top:0; right:0; height:100%; width:min(430px,100%);
  background:var(--wk-papier); color:var(--wk-ink);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  font:400 15px/1.55 'Inter',system-ui,-apple-system,sans-serif;
  box-shadow:-18px 0 44px rgba(15,17,20,.22);
}
.wk-laag.aan .wk-kar{ transform:translateX(0); }
@media(prefers-reduced-motion:reduce){
  .wk-kar{ transition:none; } .wk-laag{ transition:none; }
}

.wk-kop{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; background:var(--wk-ink); color:#fff; flex:0 0 auto;
}
.wk-kop h2{ margin:0; font:700 18px/1.2 'Archivo',system-ui,sans-serif; }
.wk-sluit{
  appearance:none; border:0; background:transparent; color:#fff; cursor:pointer;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; margin:-8px -10px -8px 0;
}
.wk-sluit:hover{ background:rgba(255,255,255,.12); }

.wk-lijf{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px 8px; }

.wk-periode{
  background:var(--wk-wit); border:1px solid var(--wk-lijn); border-radius:10px;
  padding:12px 14px; margin:0 0 16px;
}
.wk-periode span{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wk-zacht); font-weight:700; margin-bottom:3px; }
.wk-periode b{ display:block; font-size:14.5px; line-height:1.45; }
.wk-periode i{ display:block; font-style:normal; font-size:13px; color:var(--wk-zacht); margin-top:3px; }
.wk-periode-leeg a{ color:var(--wk-or-d); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; display:inline-block; min-height:44px; line-height:44px; }

.wk-leeg{ text-align:center; padding:26px 10px 30px; }
.wk-leeg p{ margin:0 0 16px; color:var(--wk-zacht); }

.wk-lijst{ list-style:none; margin:0; padding:0; }
.wk-regel{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--wk-wit); border:1px solid var(--wk-lijn); border-radius:10px;
  padding:12px; margin:0 0 10px;
}
/* Een toebehoren heeft geen beeld in de lijst en hoort ondergeschikt te lezen
   aan de wagen erboven: het is wat er meegaat, niet wat er gehuurd wordt. */
.wk-regel-extra{ background:var(--wk-or-l); border-color:var(--wk-or-lijn); padding:10px 12px; }
.wk-regel-extra .wk-mid b{ font-size:14px; }
.wk-regel-extra .wk-beeld{ flex:0 0 56px; width:56px; height:42px; border:1px solid var(--wk-or-lijn); }

.wk-beeld{ flex:0 0 82px; width:82px; height:62px; background:#fff; border-radius:6px;
  overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wk-beeld img{ width:100%; height:100%; object-fit:contain; display:block; }
.wk-mid{ flex:1 1 auto; min-width:0; }
.wk-mid b{ display:block; font-size:15px; line-height:1.32; }
.wk-mid span{ display:block; font-size:13px; color:var(--wk-zacht); margin-top:2px; }
.wk-rechts{ flex:0 0 auto; text-align:right; }
.wk-rechts b{ display:block; font-size:15px; white-space:nowrap; }
.wk-rechts b i{ font-style:normal; color:var(--wk-zacht); font-weight:400; font-size:13px; }
.wk-weg{
  appearance:none; border:0; background:none; padding:8px 0 0; cursor:pointer;
  font:400 12.5px/1 'Inter',system-ui,sans-serif; color:var(--wk-zacht);
  text-decoration:underline; text-underline-offset:3px; min-height:34px;
}
.wk-weg:hover{ color:var(--wk-rood); }

/* ---------- de eindeloze carrousel met toebehoren ---------- */
.wk-erbij{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--wk-lijn); }
.wk-erbij-kop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.wk-erbij h3{
  margin:0; font:700 12px/1.4 'Inter',system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.09em; color:var(--wk-zacht);
}
.wk-pijlen{ display:flex; gap:6px; }
.wk-pijl{
  appearance:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid var(--wk-lijn); background:var(--wk-wit); color:var(--wk-ink2);
}
.wk-pijl:hover{ border-color:var(--wk-or); color:var(--wk-or-d); }

/* ⚠️ De baan is de enige plek in de kar die opzij schuift. scroll-snap houdt de
   kaartjes netjes op hun plaats, en de schuifbalk zelf verbergen wij: de pijlen
   en de veeg doen het werk. */
.wk-baan{
  display:flex; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.wk-baan::-webkit-scrollbar{ display:none; }
.wk-baan:focus-visible{ outline:2px solid var(--wk-or); outline-offset:3px; border-radius:12px; }

.wk-tb{
  position:relative; flex:0 0 152px; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:8px;
  padding:10px; border:1px solid var(--wk-lijn); border-radius:12px;
  background:var(--wk-wit);
}
.wk-tb-in{ border-color:var(--wk-or); background:var(--wk-or-l); }
.wk-tb-beeld{
  aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--wk-papier);
}
.wk-tb-beeld img{ width:100%; height:100%; object-fit:contain; display:block; }
.wk-tb-vlag{
  position:absolute; top:16px; left:16px;
  padding:3px 8px; border-radius:999px;
  background:rgba(20,22,26,.82); color:#fff;
  font:600 10px/1.4 'Inter',system-ui,sans-serif; letter-spacing:.04em;
}
.wk-tb-tekst{ display:flex; flex-direction:column; gap:2px; min-height:52px; }
.wk-tb-tekst b{ font-size:13.5px; line-height:1.3; color:var(--wk-ink); }
.wk-tb-prijs{ font-size:12px; line-height:1.35; color:var(--wk-zacht); }
/* de plus- en minknoppen. 44 x 44 px, want daar mikt een duim op. */
.wk-stap{ display:inline-flex; align-items:center; gap:2px; }
.wk-stap b{ min-width:30px; text-align:center; font-size:15px; }
.wk-stap button{
  appearance:none; width:44px; height:44px; border-radius:8px; cursor:pointer; flex:none;
  border:1px solid var(--wk-or-lijn); background:var(--wk-wit); color:var(--wk-ink);
  font:600 19px/1 'Inter',system-ui,-apple-system,sans-serif;
}
.wk-stap button:hover{ border-color:var(--wk-or); color:var(--wk-or-d); }

/* ⚠️ 44 x 44 px blijft 44 x 44 px, ook hier. Kleiner is netter op zo'n smal
   kaartje, maar dan mist een duim de knop. De kaart is er breed genoeg voor:
   130 px binnenwerk tegen 44 + 22 + 44. */
.wk-tb .wk-stap{ display:flex; justify-content:space-between; gap:0; }
.wk-tb .wk-stap b{ min-width:22px; font-size:14px; }

.wk-erbij-nb{ margin:11px 0 0; font-size:12px; line-height:1.5; color:var(--wk-zacht); }


.wk-voet{ flex:0 0 auto; border-top:1px solid var(--wk-lijn); background:var(--wk-wit); padding:16px 20px 20px; }
.wk-som{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 6px; }
.wk-som span{ color:var(--wk-ink2); }
.wk-som b{ font:700 19px/1.2 'Archivo',system-ui,sans-serif; white-space:nowrap; }
.wk-som b i{ font-style:normal; font-size:12.5px; font-weight:400; color:var(--wk-zacht); }
.wk-som-fijn span, .wk-som-fijn b{ font-size:13.5px; color:var(--wk-zacht); font-weight:400; }
.wk-fijn{ margin:8px 0 14px; font-size:12.5px; line-height:1.6; color:var(--wk-zacht); }

.wk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 24px; border-radius:999px; border:1px solid transparent;
  font:600 15px/1 'Inter',system-ui,sans-serif; text-decoration:none; cursor:pointer;
}
.wk-btn-or{ background:var(--wk-or); color:#241000; }
.wk-btn-or:hover{ background:var(--wk-or-d); color:#fff; }
.wk-vol{ width:100%; }
.wk-leegmaak{
  display:block; width:100%; margin:10px 0 0; appearance:none; border:0; background:none;
  cursor:pointer; min-height:44px; font:400 13px/1 'Inter',system-ui,sans-serif;
  color:var(--wk-zacht); text-decoration:underline; text-underline-offset:3px;
}
.wk-leegmaak:hover{ color:var(--wk-rood); }

/* ---------- het bewijs in de voet van de zijkar ---------- */
.wk-bewijs{
  display:flex; justify-content:center;
  padding:10px 0 12px; margin-top:2px;
  border-top:1px solid var(--wk-lijn);
}

/* ==========================================================================
   HET BOEKINGSBLOK OP EEN WAGENPAGINA
   Staat op een lichte band onder de donkere kop van de pagina.
   ========================================================================== */
.wh-boek{
  max-width:1320px; margin:0 auto; padding:clamp(28px,4vw,44px) clamp(20px,5vw,64px) clamp(34px,4vw,52px);
}
.wh-boek-band{ background:var(--wk-wit); border-bottom:1px solid var(--wk-lijn); }

.wb-kop{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.wb-kop h2{
  font-family:Archivo,system-ui,sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.6vw,2rem); color:var(--wk-ink); margin:0;
}
.wb-live{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--wk-zacht); }
.wb-live i{
  width:8px; height:8px; border-radius:50%; background:var(--wk-groen); flex:none;
  box-shadow:0 0 0 3px rgba(19,122,74,.16);
}

.wb-datums{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wb-veld{ display:block; }
.wb-veld > span{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wk-zacht); margin-bottom:7px;
}
.wb-rij{ display:flex; gap:8px; }
.wb-rij input, .wb-rij select{
  min-height:52px; padding:0 14px; border:1px solid var(--wk-lijn); border-radius:11px;
  background:var(--wk-wit); color:var(--wk-ink);
  font:500 16px/1 'Inter',system-ui,-apple-system,sans-serif;
}
.wb-rij input[type=date]{ flex:1 1 auto; min-width:0; }
.wb-rij select{ flex:0 0 104px; }
.wb-rij input:focus-visible, .wb-rij select:focus-visible{ outline:2px solid var(--wk-or); outline-offset:1px; }

.wb-uitslag{
  display:flex; flex-direction:column; gap:5px;
  margin-top:16px; padding:15px 17px; border-radius:12px;
  font-size:.96rem; line-height:1.5; color:var(--wk-ink2);
}
.wb-uitslag b{ color:var(--wk-ink); font-weight:700; }
.wb-vrij{ background:rgba(19,122,74,.08); border:1px solid rgba(19,122,74,.24); }
.wb-vrij > b{ color:var(--wk-groen); }
.wb-bezet{ background:var(--wk-or-l); border:1px solid var(--wk-or-lijn); }
.wb-fout, .wb-wacht{ background:var(--wk-papier); border:1px solid var(--wk-lijn); color:var(--wk-zacht); }
.wb-prijs{ font-variant-numeric:tabular-nums; }
.wb-tot{ font-size:1.12em; }
.wb-borg{ font-size:.86rem; color:var(--wk-zacht); }
.wb-spring, .wb-ander{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--wk-or-d); font:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.wb-ander{ align-self:flex-start; margin-top:3px; font-size:.9rem; }
/* ⚠️ Raakvlakken. .wb-spring staat MIDDEN IN EEN ZIN ("kan hij wel vanaf
   woensdag 26 augustus"), dus die mag geen blok worden: inline-flex houdt hem
   in de regel en geeft hem toch 44 px hoogte. .wb-ander staat op zijn eigen
   regel en mag dus wel een blok zijn. */
@media(max-width:860px){
  .wb-spring{ min-height:44px; display:inline-flex; align-items:center; }
  .wb-ander{ min-height:44px; display:inline-flex; align-items:center; margin-top:0; }
}

.wb-actie{ margin-top:16px; }
.wb-knop{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 30px; border:0; border-radius:999px;
  background:var(--wk-or); color:#241000; cursor:pointer;
  font:700 16px/1 'Inter',system-ui,-apple-system,sans-serif;
}
.wb-knop:hover:not(:disabled){ background:var(--wk-or-d); color:#fff; }
.wb-knop:disabled{ background:var(--wk-papier); color:#A2A9B2; cursor:not-allowed; }
.wb-bewijs{ margin-top:18px; max-width:62ch; }
.wb-fijn{ margin:14px 0 0; font-size:.85rem; color:var(--wk-zacht); max-width:62ch; }

@media(max-width:720px){
  .wb-datums{ grid-template-columns:1fr; }
  .wb-knop{ width:100%; }
}

/* ---------- de telefoonknop naast Direct huren ---------- */
/* ⚠️ Twee identieke oranje pillen naast elkaar in de menubalk lezen als één knop
   die per ongeluk dubbel staat. Direct huren blijft de volle knop, de telefoon
   wordt omlijnd. Dit bestand laadt na de <style> van de pagina zelf, dus deze
   regel wint zonder !important-oorlog; alleen de kleur moet er wel tegenop. */
.nav-links .wk-navknop + .nav-tel{
  background:transparent;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.3);
}
.nav-links .wk-navknop + .nav-tel:hover{
  background:rgba(255,255,255,.08);
  border-color:#fff;
  color:#fff !important;
}

/* ---------- de specificatieband op een wagenpagina ---------- */
/* ⚠️ Deze band staat in de <style> van elke wagenpagina zelf, maar dit bestand
   laadt daarna, dus deze twee regels gelden overal zonder 43 bestanden te
   moeten aanraken. Reden: sinds er merk en model bij staan, lopen er zeven
   kolommen naast elkaar en wikkelt een lang label als "MAXIMAAL TOEGELATEN
   MASSA" over twee regels. Zonder deze uitlijning zakt dan alleen dat ene
   getal een regel naar beneden en staat de hele band scheef. */
.specs .sp{ display:flex; flex-direction:column; }
.specs .sp dd{ margin-top:auto; }

/* ⚠️ De verticale streepjes blijven staan zoals ze waren (border-right op elke
   cel). Een gap-raster met de lijnkleur als achtergrond is geprobeerd: dat lost
   het hangende streepje aan het einde van een gebroken rij op, maar dan schijnt
   die lijnkleur door in het lege stuk van die rij, en dat is erger. Op de
   gangbare schermbreedtes past de band toch op een rij. */