/* BEXX Verhuur — de overzichtskaart naast de stap.
   Hoort bij js/overzicht.js. Op een breed scherm hangt zij plakkend naast de
   inhoud; daaronder schuift zij er gewoon onder. */

.stapcol{ display:block; }
@media(min-width:1080px){
  .stapcol{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,3vw,44px);
            align-items:start; }
  /* 84 px navigatie + 72 px gekrompen balk + lucht */
  .ovz{ position:sticky; top:172px; }
}

.ovz[hidden]{ display:none; }
.ovz-in{
  background:#fff; border:1px solid #E3E0DB; border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 10px 30px rgba(20,22,26,.05);
}
.ovz-kop{
  margin:0 0 14px; font:700 12px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:#8B9199;
}

/* Elke gekozen wagen krijgt zijn eigen regel met beeld, naam en bedrag.
   Een lijst en geen "en 1 andere wagen": wie er twee huurt, ziet er twee. */
.ovz-wagens{ list-style:none; margin:0 0 15px; padding:0; }
.ovz-wagen{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:10px 0;
}
.ovz-wagen + .ovz-wagen{ border-top:1px solid #EFEDE9; }
.ovz-wagens .ovz-wagen:first-child{ padding-top:0; }
.ovz-beeld{
  grid-column:1; height:48px; border-radius:10px; overflow:hidden; background:#F1EFEB;
}
.ovz-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Zonder foto schuift de naam op tot tegen de rand, anders staat er een gat. */
.ovz-wagen > .ovz-naam:first-child{ grid-column:1 / 3; }
.ovz-naam{ grid-column:2; min-width:0; }
.ovz-naam b{ display:block; font:700 15px/1.25 'Archivo',system-ui,sans-serif; color:#14161A; }
.ovz-naam span{ display:block; margin-top:2px; font-size:12px; line-height:1.4; color:#8B9199; }
.ovz-prijs{
  grid-column:3; align-self:center; font:700 14.5px/1.2 'Archivo',system-ui,sans-serif;
  color:#14161A; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ovz-prijs i{ font-style:normal; font-weight:600; font-size:12.5px; color:#8B9199; }
.ovz-wagen.is-weg .ovz-naam b{ color:#B3261E; }

.ovz-lijst{
  margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px;
  padding:14px 0; border-top:1px solid #EFEDE9; border-bottom:1px solid #EFEDE9;
}
.ovz-lijst dt{ font-size:12.5px; color:#8B9199; }
.ovz-lijst dd{ margin:0; text-align:right; font-size:13.5px; color:#14161A; font-weight:600; }
.ovz-lijst dd i{ display:block; font-style:normal; font-weight:400; font-size:12px; color:#8B9199; margin-top:1px; }

.ovz-regels{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 14px;
  padding:14px 0; font-size:13.5px;
}
.ovz-regels span{ color:#4A5058; min-width:0; }
.ovz-regels span i{ font-style:normal; color:#8B9199; }
.ovz-regels b{ color:#14161A; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ovz-regels b i{ font-style:normal; font-weight:600; color:#8B9199; font-size:12.5px; }

.ovz-btw{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px;
  padding:0 0 12px; font-size:12.5px; color:#8B9199;
}
.ovz-btw b{ color:#4A5058; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }

.ovz-som{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-top:12px; border-top:1px solid #EFEDE9;
}
.ovz-som span{ font-size:13.5px; color:#4A5058; }
.ovz-som b{ font:800 20px/1.1 'Archivo',system-ui,sans-serif; color:#14161A; white-space:nowrap; }
.ovz-som b i{ font-style:normal; font-size:13px; font-weight:600; color:#8B9199; }

.ovz-nb{ margin:10px 0 0; font-size:12px; line-height:1.55; color:#8B9199; }

/* de huur is korter dan het minimum in de drukke periode (punt 37) */
.ovz-kort{grid-column:1 / -1;margin:0;padding:8px 10px;border-radius:8px;background:#FFF4E5;
  border:1px solid #F1C27A;color:#7A4C08;font-size:12.5px;line-height:1.45}
.ovz-kort a{color:inherit;font-weight:700}