/* ==========================================================================
   stappen.css — de balk die bij een huur op elke stap meeloopt.

   Alles begint met tr- (van trechter). Dit bestand staat alleen op de drie
   stappagina's en raakt niets van wat er elders al staat.
   ========================================================================== */
/* ⚠️ De sticky hangt HIER, op de buitenste bak, niet op .tr-balk daarbinnen.
   Een sticky element kan alleen bewegen binnen de doos van zijn ouder, en .tr is
   even hoog als de balk zelf. Stond de sticky op .tr-balk, dan had hij nul
   ruimte om in te schuiven en rolde de balk gewoon mee naar boven weg. Precies
   daarom moest de bezoeker terugscrollen om verder te kunnen.
   ⚠️ Werkt alleen zolang body geen scrollbak is: op elke pagina staat daarom
   overflow-x:clip en niet overflow-x:hidden. Wie dat terugzet, breekt dit. */
.tr{ background:var(--wk-ink,#14161A); color:#fff;
     position:sticky; top:var(--tr-top,84px); z-index:60; }

/* ---------- de vier stappen ---------- */
.tr-rijbak{ max-width:1180px; margin:0 auto; padding:16px clamp(16px,4vw,28px) 0; }
.tr-rij-stappen{
  list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0;
  overflow-x:auto; scrollbar-width:none;
}
.tr-rij-stappen::-webkit-scrollbar{ display:none; }
.tr-st{ display:flex; align-items:center; flex:0 0 auto; }
.tr-st + .tr-st::before{
  content:''; width:clamp(14px,4vw,46px); height:1px; margin:0 clamp(6px,1.4vw,12px);
  background:rgba(255,255,255,.24); flex:0 0 auto;
}
.tr-st > *{ display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.tr-st b{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  font:700 12.5px/1 'Inter',system-ui,sans-serif;
  border:1px solid rgba(255,255,255,.34); color:rgba(255,255,255,.72);
}
.tr-st span{ font:600 13.5px/1 'Inter',system-ui,sans-serif; color:rgba(255,255,255,.66); white-space:nowrap; }
.tr-nu b{ background:var(--wk-or,#FF7D38); border-color:var(--wk-or,#FF7D38); color:#241000; }
.tr-nu span{ color:#fff; }
.tr-af b{ background:rgba(255,255,255,.16); border-color:transparent; color:#fff; }
.tr-af span{ color:rgba(255,255,255,.86); }
.tr-af a:hover span{ color:#fff; text-decoration:underline; }
.tr-af a{ min-height:44px; }
.tr-straks b, .tr-straks span{ opacity:.72; }

/* ---------- de balk met periode, bedrag en de knop vooruit ---------- */
/* ⚠️ De navigatiebalk van de site is zelf al sticky op top:0 met z-index 90.
   Zou deze balk daar ook op top:0 blijven plakken, dan schuift hij eronder weg
   en ziet de bezoeker zijn periode en zijn totaal niet meer. Daarom hangt hij
   onder de navigatie, en meet stappen.js hoe hoog die op dat scherm echt is. */
.tr-balk{ background:var(--wk-ink,#14161A); }
/* de wachter die zegt wanneer de balk mag krimpen; hij mag niets innemen */
#trWacht{ height:0; }
/* Gekrompen: de rij met stapnummers gaat weg, want die weet u dan al. Op een
   smal scherm gaat ook de periodeknop weg en blijft het totaal met de knop
   vooruit over, samen op een regel. */
.tr.tr-klein .tr-rijbak{ display:none; }
.tr.tr-klein .tr-in{ padding-top:10px; padding-bottom:10px; }
.tr-k{ display:none; }
.tr-in{
  max-width:1180px; margin:0 auto; padding:14px clamp(16px,4vw,28px) 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.tr-pil{
  flex:1 1 340px; min-width:0; min-height:52px;
  display:flex; align-items:center; gap:12px;
  padding:0 8px 0 16px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  color:#fff; text-align:left; font:inherit;
}
.tr-pil:hover{ background:rgba(255,255,255,.15); }
.tr-pil-plek{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font:600 13.5px/1 'Inter',system-ui,sans-serif; color:rgba(255,255,255,.72);
  padding-right:12px; border-right:1px solid rgba(255,255,255,.18);
}
.tr-pil-datum{
  flex:1 1 auto; min-width:0; font:700 14.5px/1.25 'Inter',system-ui,sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tr-pil-datum i{ font-style:normal; color:var(--wk-or,#FF7D38); padding:0 4px; }
.tr-pil-stift{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff;
}
.tr-pil:hover .tr-pil-stift{ background:var(--wk-or,#FF7D38); color:#241000; }
.tr-verborgen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.tr-eind{ display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-left:auto; }
.tr-som{ display:flex; flex-direction:column; line-height:1.1; text-align:right;
  background:none; border:0; padding:4px 6px; margin:-4px -6px; border-radius:10px;
  color:#fff; cursor:pointer; font:inherit; }
.tr-som:hover{ background:rgba(255,255,255,.1); }
.tr-som i{ font-style:normal; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:700; }
/* Sinds de terugknop erbij staat is de balk krapper. Een bedrag dat over twee
   regels breekt leest als twee bedragen, dus dat mag hier nooit. */
.tr-som b{ font:800 19px/1.15 'Archivo','Inter',system-ui,sans-serif;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.tr-som{ flex:0 0 auto; }
.tr-som svg{ opacity:.72; transition:transform .18s ease; }
.tr-som[aria-expanded=true] svg{ transform:rotate(180deg); }

/* ---------- de prijsspecificatie ---------- */
.tr-spec{ background:#1C1F24; border-top:1px solid rgba(255,255,255,.1); }
.tr-spec-in{ max-width:1180px; margin:0 auto; padding:18px clamp(16px,4vw,28px) 20px; }
.tr-spec h3{ margin:0 0 12px; font:700 11.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.tr-spec ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.tr-spec li{ display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.tr-spec li span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tr-spec li b{ font:600 14.5px/1.3 'Inter',system-ui,sans-serif; }
.tr-spec li i{ font-style:normal; font-size:12.5px; color:rgba(255,255,255,.58); }
.tr-spec li em{ font-style:normal; font:700 15px/1.2 'Inter',system-ui,sans-serif; white-space:nowrap; }
.tr-spec-som{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); }
.tr-spec-som span{ font-size:14.5px; color:rgba(255,255,255,.8); }
.tr-spec-som b{ font:800 22px/1.1 'Archivo','Inter',system-ui,sans-serif; }
.tr-spec-nb{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.56); }
.tr-verder{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--wk-or,#FF7D38); color:#241000; text-decoration:none;
  font:700 15px/1 'Inter',system-ui,sans-serif; white-space:nowrap;
}
.tr-verder:hover{ background:var(--wk-or-d,#E86420); color:#fff; }
.tr-verder.tr-uit{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.5); cursor:not-allowed; }
.tr-verder.tr-uit:hover{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.5); }

/* ---------- de lade met de datums ---------- */
/* een stap terug, stil naast de knop vooruit */
.tr-terug{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px;
  border-radius:999px; color:rgba(255,255,255,.66); text-decoration:none;
  font:600 13.5px/1 'Inter',system-ui,sans-serif; white-space:nowrap;
}
.tr-terug:hover{ color:#fff; background:rgba(255,255,255,.08); }
/* Op een telefoon past het totaal, de weg terug én de knop vooruit niet meer
   op één regel: de knop liep tot 24-08-2026 het scherm uit. De knop krijgt dus
   zijn eigen regel over de volle breedte, wat op een telefoon toch de beste
   plaats voor een duimknop is. */
@media(max-width:560px){
  .tr-terug span{ display:none; }
  .tr-terug{ padding:0 10px; }
  .tr-eind{ flex-wrap:wrap; width:100%; margin-left:0; row-gap:10px; }
  .tr-som{ flex:0 0 auto; }
  .tr-terug{ margin-left:auto; }
  .tr-verder{ flex:1 1 100%; width:100%; padding:0 18px; }
}

/* de btw, klein onder de opsomming */
.tr-spec-btw{
  display:grid; grid-template-columns:1fr auto; gap:3px 14px; padding:10px 0 0;
  margin-top:8px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.62);
}
.tr-spec-btw b{ font-weight:600; color:rgba(255,255,255,.82); }

.tr-lade{ background:#1C1F24; border-top:1px solid rgba(255,255,255,.1); }
/* De lade is donker, de kalender is licht. Wij zetten hem dus in een wit
   kaartje in plaats van de kalender een tweede, donkere jas aan te meten:
   één kalender die overal hetzelfde werkt is minder om stuk te maken. */
.tr-lade-in{
  max-width:760px; margin:0 auto; padding:0; background:#fff;
  border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.tr-lade{ padding:16px clamp(16px,4vw,28px) 4px; }
.tr-lade .kal-vast .kal-paneel{ padding:16px; }
/* het vangnet zonder kalender.js */
.tr-lade-in>.tr-veld{ padding:14px 16px 0; }
.tr-lade-in>.tr-veld span{ color:#6E7883; }
.tr-lade-in>.tr-bij{ margin:12px 16px 16px; }
.tr-veld span{
  display:block; font:700 11.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:7px;
}
.tr-rij{ display:flex; gap:8px; }
.tr-rij input, .tr-rij select{
  min-height:48px; border-radius:10px; padding:0 12px; font:600 15px/1 'Inter',system-ui,sans-serif;
  background:#fff; color:var(--wk-ink,#14161A); border:1px solid rgba(255,255,255,.2);
}
.tr-rij input{ flex:1 1 auto; min-width:0; }
.tr-rij select{ flex:0 0 auto; }
.tr-bij{
  min-height:48px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:var(--wk-ink,#14161A); font:700 14.5px/1 'Inter',system-ui,sans-serif;
}
.tr-bij:hover{ background:var(--wk-or,#FF7D38); color:#241000; }
.tr-lade-nb{
  max-width:760px; margin:0 auto; padding:10px 2px 14px;
  font-size:12.5px; color:rgba(255,255,255,.56);
}

/* ---------- dezelfde knop, onderaan de pagina ----------
   De balk bovenaan blijft staan, maar wie een lang scherm uitleest hoort onderaan
   niet te moeten terugscrollen om verder te kunnen. */
.trv{ display:block; margin:26px 0 0; }
.trv-in{
  display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid rgba(20,22,26,.12);
}
.trv-terug{
  display:inline-flex; align-items:center; gap:7px; min-height:52px; padding:0 18px;
  border-radius:999px; border:1px solid rgba(20,22,26,.22); background:transparent;
  color:#14161A; text-decoration:none; font:600 15px/1 'Inter',system-ui,sans-serif;
  margin-right:auto;
}
.trv-terug:hover{ border-color:#14161A; background:rgba(20,22,26,.05); }
.trv-verder{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  background:var(--wk-or,#FF7D38); color:#241000; text-decoration:none;
  font:700 15.5px/1 'Inter',system-ui,sans-serif;
}
.trv-verder:hover{ background:var(--wk-or-d,#E86420); color:#fff; }
.trv-verder.trv-uit{ background:rgba(20,22,26,.12); color:rgba(20,22,26,.45); cursor:not-allowed; }
.trv-verder.trv-uit:hover{ background:rgba(20,22,26,.12); color:rgba(20,22,26,.45); }
/* op een donkere pagina hoort de lijn en de terugknop licht te zijn */
.trv-op-donker .trv-in{ border-top-color:rgba(255,255,255,.14); }
.trv-op-donker .trv-terug{ border-color:rgba(255,255,255,.26); color:#fff; }
.trv-op-donker .trv-terug:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
@media(max-width:560px){
  .trv-in{ flex-direction:column-reverse; align-items:center; }
  /* De terugknop blijft smal en gecentreerd. Over de volle breedte liep hij
     onder de chatbel links en de huurbel rechts door, en dat leest slordig. */
  .trv-terug{ margin-right:0; justify-content:center; align-self:center; }
  .trv-verder{ width:100%; }
  /* Onderaan een stuk lucht, zodat de laatste knop niet tegen de zwevende
     bellen aan komt te staan. */
  .trv{ padding-bottom:12px; }
}

/* ---------- de melding als een wagen wegvalt ---------- */
.tr-melding{
  background:#FFF3EB; border-bottom:1px solid #F6D9C4; color:#5A2A0B;
  padding:14px clamp(16px,4vw,28px); font-size:14.5px;
}
.tr-melding b{ display:block; }
.tr-melding span{ display:block; margin-top:3px; color:#7A4A26; }

@media(max-width:760px){
  .tr-in{ gap:10px; padding-bottom:14px; }
  .tr-pil{ flex:1 1 100%; }
  .tr-eind{ flex:1 1 100%; margin-left:0; }
  .tr-verder{ flex:1 1 auto; }
  .tr-som{ text-align:left; }
  .tr-bij{ width:100%; }
  .tr-st span{ font-size:12.5px; }
}
@media(max-width:430px){
  .tr-pil-plek{ display:none; }
  .tr-st + .tr-st::before{ width:10px; margin:0 6px; }
  /* Vier woorden naast elkaar passen niet op 390 px, en dan wordt "Klaar"
     halverwege afgesneden. Alleen de stap waar de bezoeker nu staat houdt zijn
     woord; de andere zijn aan hun cijfer en hun vinkje genoeg te herkennen. */
  .tr-af span, .tr-straks span{ display:none; }
}

/* ==========================================================================
   HET ZOEKVAK — waar een huur begint
   Staat op de startpagina en op het wagenpark, boven de vouw. Alles begint met
   zb- en raakt niets van wat er al staat.
   ========================================================================== */
.zb{ display:block; }
.zb-in{
  background:#fff; border-radius:16px; box-shadow:0 18px 44px rgba(20,22,26,.22);
  padding:14px; display:grid; gap:12px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) auto;
  align-items:end;
}
.zb-veld{ min-width:0; }
.zb-lab{
  display:block; font:700 11px/1 'Inter',system-ui,sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:#6E7883; margin:0 0 7px 2px;
}
.zb-plaats{
  display:flex; align-items:center; gap:8px; min-height:52px; padding:0 14px;
  border:1px solid #E3E0DB; border-radius:11px; background:#F5F3F0; color:#14161A;
}
.zb-plaats svg{ color:#FF7D38; flex:0 0 auto; }
.zb-plaats-tekst{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.zb-plaats b{
  font:600 15px/1.2 'Inter',system-ui,sans-serif; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.zb-plaats i{
  font-style:normal; font-size:12.5px; color:#6E7883; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.zb-rij{ display:flex; gap:8px; }
.zb-rij input, .zb-rij select{
  min-height:52px; border:1px solid #E3E0DB; border-radius:11px; background:#fff;
  padding:0 12px; color:#14161A; font:600 15px/1 'Inter',system-ui,sans-serif;
}
/* Een datumveld toont "25/08/2026" plus zijn kalenderknopje. Onder de 138 px
   knipt de browser dat af tot "08/25/2..." en dan staat er onzin. */
.zb-rij input{ flex:1 1 auto; min-width:138px; }
/* Zonder ondergrens knijpt het raster het uurvakje dicht en verdwijnt zijn pijltje. */
.zb-rij select{ flex:0 0 auto; min-width:96px; }
.zb-rij input:focus, .zb-rij select:focus{ outline:2px solid #FF7D38; outline-offset:1px; }
.zb-knop{
  min-height:52px; padding:0 26px; border:0; border-radius:11px; cursor:pointer;
  background:#FF7D38; color:#241000; font:700 15.5px/1 'Inter',system-ui,sans-serif;
  white-space:nowrap;
}
.zb-knop:hover{ background:#E86420; color:#fff; }
.zb-nb{ margin:11px 2px 0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.78); }
.zb-op-licht .zb-nb{ color:#6E7883; }

/* Het datumveld is sinds 24-08-2026 één knop met een eigen laatje, zie
   js/kalender.js. Het laatje hangt absoluut onder die knop, dus mag het vak
   eromheen niet afknippen. */
.zb-datums{ position:relative; }
.zb-in{ overflow:visible; }

@media(max-width:900px){
  .zb-in{ grid-template-columns:1fr 1fr; }
  .zb-plek{ grid-column:1/-1; }
  .zb-datums{ grid-column:1/-1; }
  .zb-knop{ grid-column:1/-1; }
}
@media(max-width:560px){
  .zb-in{ grid-template-columns:1fr; padding:12px; }
}

/* ---------- de gekrompen balk ----------
   ⚠️ Dit blok staat BEWUST helemaal onderaan. Hierboven zet een @media
      (max-width:560px) de knop en het einde op width:100%, en bij gelijke
      gewichten wint wat het laatst staat. Zet dit hogerop en de knop loopt
      op een telefoon van het scherm. */
@media(max-width:820px){
  .tr.tr-klein .tr-pil{ display:none; }
  /* De weg terug staat in de gekrompen balk niet meer: hij staat onderaan de
     pagina en in de stappenrij, en hier is elke pixel er een te veel. */
  .tr.tr-klein .tr-terug{ display:none; }
  .tr.tr-klein .tr-in{ flex-wrap:nowrap; gap:10px; }
  /* het totaal links, de knop tegen de rechterrand, zoals Sixt het onderaan doet */
  .tr.tr-klein .tr-eind{ flex-wrap:nowrap; width:auto; flex:1 1 auto;
                         justify-content:space-between; }
  .tr.tr-klein .tr-verder{ flex:0 0 auto; width:auto; padding:0 22px; }
  .tr.tr-klein .tr-l{ display:none; }
  .tr.tr-klein .tr-k{ display:inline; }
}
/* Op de smalste toestellen (320 px) mag de knop krapper staan; anders duwt hij
   het totaal van het scherm. Nog altijd 44 px hoog. */
@media(max-width:360px){
  .tr.tr-klein .tr-verder{ padding:0 16px; font-size:14.5px; }
  .tr.tr-klein .tr-som b{ font-size:17px; }
}