/* ==========================================================================
   Mobiele weergave (telefoon, tot 720px) — app-achtig:
   swipe-kaartjes voor de auto's, onderbalk op de homepage en de
   reserveerstappen als pop-up (bottom sheet) van onderaan.
   Wordt alleen geladen op smalle schermen (media-attribuut in de <link>).
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; }
body{ overscroll-behavior-y:none; }
.container{ padding-left:18px; padding-right:18px; }

/* ---------- Homepage ---------- */
.brand__tag{ display:none; }
.brand__logo{ height:28px; }
.topbar__inner{ padding-top:10px; padding-bottom:10px; }
.hero{ padding:44px 0 36px; }
.section{ padding-top:44px; padding-bottom:44px; }
.section-head{ text-align:left; margin-bottom:22px; }
.section-head h2{ font-size:1.6rem; }

body.has-mbar{ padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
.mbar{
  display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.mbar .btn{ flex:1; justify-content:center; padding:13px 14px; font-size:.92rem; }

/* Auto's: horizontaal swipe-kaartjes (Airbnb-stijl) */
.fleet-slider__arrow, .fleet-slider__thumbs{ display:none !important; }
.fleet-slider__slides{
  display:flex; gap:14px; width:auto; aspect-ratio:auto !important;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:none; box-shadow:none; border-radius:0; perspective:none;
  margin:0 -18px; padding:4px 18px 18px; scroll-padding:0 18px;
}
.fleet-slider__slides::-webkit-scrollbar{ display:none; }
.fleet-slide, .fleet-slide.is-active{
  position:relative !important; inset:auto; flex:0 0 82%; max-width:340px;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(20,21,26,.35);
}
.fleet-slide__img, .fleet-slide.is-active .fleet-slide__img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transform:none !important;
}
.fleet-slide__shine, .fleet-slide__scrim{ display:none; }
.fleet-slide__info{ position:static; padding:16px 16px 18px; color:var(--ink); }
.fleet-slide__info > *{ opacity:1 !important; transform:none !important; transition:none; }
.fleet-slide__info h3{ font-size:1.2rem; }
.fleet-slide__specs{ color:var(--slate); font-size:.82rem; }
.fleet-slide__pricing{ margin-top:12px; }
.fleet-slide__price{ font-size:1.05rem; }
.fleet-slide__deposit{ border-color:var(--line); color:var(--slate); font-size:.8rem; }
.fleet-slide__reserve{ display:flex; width:100%; justify-content:center; margin-top:14px; padding:13px 20px; }

/* ---------- Reserveren / bedankt / voorwaarden: pop-up (bottom sheet) ---------- */
@keyframes sheetUp{ from{ transform:translateY(70px); opacity:0; } to{ transform:none; opacity:1; } }
body.is-sheet{ background:var(--ink); }
body.is-sheet .topbar, body.is-sheet .footer, body.is-sheet .reserve-back{ display:none; }
body.is-sheet .reserve-page{
  margin-top:44px; padding:8px 0 140px; background:var(--paper);
  border-radius:24px 24px 0 0; min-height:calc(100dvh - 44px);
  box-shadow:0 -12px 40px rgba(0,0,0,.4); animation:sheetUp .42s cubic-bezier(.22,.61,.36,1);
}
.sheet-head{ display:flex; justify-content:center; position:relative; padding:4px 0 14px; }
.sheet-grab{ width:44px; height:5px; border-radius:3px; background:var(--line); }
.sheet-close{
  position:absolute; right:0; top:-2px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
}
.sheet-close svg{ width:16px; height:16px; }
body.is-sheet .reserve-title{ font-size:1.35rem; }
body.is-sheet .reserve-subtitle{ display:none; }
.reserve-title{ margin-bottom:16px; }
.steps{ margin-bottom:22px; }

.car-summary{ flex-direction:column; align-items:stretch; padding:0; gap:0; overflow:hidden; border-radius:18px; }
.car-summary__img{ width:100%; height:170px; border-radius:0; }
.car-summary > div:nth-child(2){ padding:14px 16px 4px; }
.car-summary__price{ margin:0; text-align:left; padding:0 16px 14px; }

.field input{ font-size:16px; min-height:50px; border-radius:12px; }
.field label{ font-size:.85rem; }
.form-row{ grid-template-columns:1fr; gap:0; }
[data-step-panel="1"] .form-row:first-child{ grid-template-columns:1fr 1fr; gap:12px; }
.step-panel.is-active{ animation:none; }
.summary-list{ border-radius:16px; }
.terms{ font-size:.9rem; }
.terms input{ width:22px; height:22px; flex:none; }
.reserve-loading{ margin-bottom:8px; }

/* Vaste actiebalk onderaan (zoals bij Airbnb) */
.wizard-actions{
  position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--white); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -12px rgba(20,21,26,.18);
}
.wizard-actions .btn{ flex:1; justify-content:center; padding:15px 18px; }
.wizard-actions > span:empty{ display:none; }

.confirm-box{ padding:32px 20px; border-radius:18px; }
.legal{ border-radius:16px; }

/* Voorwaarden als pop-up boven de reserveerstap */
.terms-modal{ position:fixed; inset:0; z-index:100; display:none; background:rgba(15,16,20,.6); }
.terms-modal.is-open{ display:block; }
.terms-modal__sheet{
  position:absolute; left:0; right:0; bottom:0; height:88dvh; background:var(--paper);
  border-radius:24px 24px 0 0; overflow:hidden; display:flex; flex-direction:column;
  animation:sheetUp .35s cubic-bezier(.22,.61,.36,1);
}
.terms-modal__bar{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:800; background:var(--white);
}
.terms-modal__bar button{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  font-size:1.2rem; line-height:1; color:var(--ink);
}
.terms-modal iframe{ flex:1; border:0; width:100%; background:var(--paper); }