/* Nueva Tierra — Public Booking
   3-step flow (Parameters -> Vehicle selection -> Contact & confirm ->
   Success), booking-bar UX pattern borrowed from major rent-a-car
   flows, rendered in Nueva Tierra's Deep Navy/Ivory brand language — no
   skeuomorphism, no decorative serif, no generic-SaaS chrome.
   See .impeccable/surfaces/public-booking-static-index-html.md for the
   direction contract. */

:root {
  --bg: #F5EFE3;
  --bg-card: #FFFFFF;
  --bg-sunken: #EAE4D9;
  --ink: #172635;
  --ink-soft: #44515D;
  --ink-faint: #5C6873;
  --line: #D9D3C8;
  --green: #172635;
  --green-dark: #0E1822;
  --green-tint: #E7EBEE;
  --gold: #C6532D;
  --gold-dark: #934023;
  --gold-tint: #F5E4DD;
  --white: #FFFFFF;
  --graphite: #23262B;
  --danger: #A63F27;
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(23,38,53,0.04), 0 8px 24px -12px rgba(23,38,53,0.18);
  --shadow-pop: 0 12px 32px -8px rgba(23,38,53,0.28);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

::selection { background: var(--green); color: var(--bg); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
body::-webkit-scrollbar-thumb:hover { background: var(--gold); }

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Topbar — Graphite brand block (reverse logo, Ivory/white
   icons, Burnt Orange reserved for the active-language accent only —
   never a full-header fill) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--graphite);
  padding: calc(5px + var(--safe-top)) 14px 5px;
  box-shadow: 0 5px 18px rgba(20, 25, 31, 0.14);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-right { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.wordmark {
  display: block;
  position: relative;
  width: 78px;
  height: 44px;
  overflow: hidden;
  line-height: 0;
}
.wordmark img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}
.social-links { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid rgba(245, 239, 227, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--bg);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.social-link svg { width: 15px; height: 15px; display: block; }
.social-link:hover,
.social-link:focus-visible { border-color: var(--gold); background: var(--gold); color: var(--white); }

.lang-switch { display: inline-flex; gap: 2px; background: rgba(245, 239, 227, 0.1); border-radius: 999px; padding: 2px; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  min-height: 30px;
  border: none;
  background: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 7px;
  border-radius: 999px;
  cursor: pointer;
}
.lang-btn.active { background: var(--gold); color: var(--white); }

/* Narrowest phones (iPhone SE class, 320-359px): trim the wordmark a
   touch so logo + four 44px social icons share the row without
   wrapping or forcing horizontal scroll. */
@media (max-width: 359px) {
  .topbar { padding-inline: 10px; }
  .topbar-right { gap: 4px; }
  .wordmark { width: 62px; height: 38px; }
  .social-links { gap: 2px; }
  .social-link { width: 27px; height: 27px; }
  .social-link svg { width: 13px; height: 13px; }
  .lang-btn { min-width: 28px; min-height: 27px; padding-inline: 5px; font-size: 9px; }
}

main { max-width: 640px; margin: 0 auto; }

.step-panel { padding: 0 20px; }
.step-panel[hidden] { display: none; }
.step-head {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 28px 0 14px;
}

/* ---------- Shared "plate" placeholder (generic hero + vehicle photos) ---------- */
.plate-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(250,246,237,0.4);
  opacity: 0.9;
}
.plate-corner.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.plate-corner.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.plate-corner.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.plate-corner.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

.plate-placeholder-fill {
  background:
    repeating-linear-gradient(135deg, rgba(250,246,237,0.05) 0px, rgba(250,246,237,0.05) 1px, transparent 1px, transparent 34px),
    linear-gradient(175deg, #294156 0%, var(--green) 62%, var(--green-dark) 100%);
}

/* ---------- Step 1: hero band ---------- */
.hero-band {
  position: relative;
  margin: 0;
  height: 26vh;
  min-height: 160px;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hero-band {
  background: var(--green) url('/static/assets/hero/buenos-aires-drive.jpg?v=2') center bottom / cover no-repeat;
}
.hero-band.plate-placeholder-fill,
.hero-band { }
.hero-band::before {
  content: "";
  position: absolute; inset: 0;
  background: none;
}
.hero-copy {
  width: 100%;
  margin: 8px 0 14px;
  padding: 0 2px;
}
.hero-subtitle {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  max-width: 520px;
  font-weight: 600;
  text-shadow: none;
}

/* ---------- Booking card (Step 1) ---------- */
.booking-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-top: 14px;
  padding: 22px 20px calc(20px + var(--safe-bottom));
  box-shadow: var(--shadow-pop);
  z-index: 2;
}

.select-field { display: block; margin-bottom: 14px; }
.select-field[hidden] { display: none; }
.select-field.half { flex: 1; margin-bottom: 0; }
.select-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.location-map-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 10px 0 0;
  padding: 7px 2px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.location-map-title {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.location-map-address {
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.location-map-note {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
}
.location-map-link:hover .location-map-address { color: var(--gold-dark); }

.select-field select {
  width: 100%;
  appearance: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%2363645C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center;
  background-size: 16px;
  padding: 11px 34px 11px 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  min-height: 44px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.checkbox-row.compact { padding: 10px 2px; border-bottom: none; }
.checkbox-row.compact .txt { font-size: 13.5px; color: var(--ink-soft); }

.panel-dates {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  border: none;
  margin-top: 10px;
}
#return-location-field { margin-bottom: 0; }
.date-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.date-caption {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.date-display {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  width: 100%;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
}
.date-display span { color: var(--ink-faint); }
.date-display.has-value span { color: var(--ink); }
.date-display:focus-visible { outline: none; border-color: var(--green); }
.date-display[aria-expanded="true"] { border-color: var(--green); }
.date-display:disabled { cursor: not-allowed; opacity: 0.42; }
.date-field.has-error .date-display { color: var(--danger); border-color: var(--danger); }
.date-field.has-error .date-display span { color: var(--danger); }

/* ---------- Calendar panel — below 900px this is a fixed overlay card
   centered near the top of the *visible* viewport (real-iPhone tested:
   an earlier inline-in-flow version got clipped under Safari's
   collapsing bottom toolbar and mis-fired the outside-click handler on
   scroll; 100dvh + safe-area insets + a locked background scroll fix
   both). At 900px+ it's the same fixed-overlay mechanism, just narrower
   and anchored to the active field instead of centered (JS sets
   top/left in openCalendar/positionCalendarPopup — see that block
   below for the desktop override). */
.calendar-panel {
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 50;
}
.calendar-panel[hidden] { display: none; }
.calendar-close {
  position: static;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--ink-faint);
  border-radius: 50%;
  cursor: pointer;
}
.calendar-close:hover,
.calendar-close:focus-visible { background: var(--green-tint); color: var(--ink); outline: none; }
.calendar-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px 28px;
  align-items: center;
  padding: 0;
  margin-bottom: 3px;
}
.calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.calendar-nav:hover,
.calendar-nav:focus-visible { background: var(--green-tint); outline: none; }
.calendar-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.calendar-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
  /* First-letter capitalization is done in JS (calendarMonthTitle) —
     text-transform:capitalize would also uppercase the trailing "г."
     that Intl's ru-RU long month format appends. */
}
.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid { grid-auto-rows: 44px; }
.calendar-weekdays {
  margin-bottom: 0;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 2px 0;
}
.calendar-day {
  position: relative;
  aspect-ratio: unset;
  height: 44px; /* explicit, not aspect-ratio-driven — keeps the tap
    target >=44px tall regardless of the panel's fluid column width */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
  cursor: pointer;
}
.calendar-day:hover,
.calendar-day:focus-visible { background: var(--green-tint); outline: none; }
.calendar-day.is-today { font-weight: 600; color: var(--gold-dark); }
.calendar-day.is-selected { background: var(--green); color: var(--bg); font-weight: 600; }
.calendar-day.is-selected:hover,
.calendar-day.is-selected:focus-visible { background: var(--green); }
.calendar-day.is-disabled {
  color: var(--ink-faint);
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.calendar-day.is-blank { visibility: hidden; cursor: default; pointer-events: none; }

.dates-note { font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.dates-note.is-error { color: var(--danger); }
.duration-badge[hidden] { display: none; }
.duration-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-tint);
  padding: 5px 12px;
  border-radius: 999px;
}

.time-row { display: flex; gap: 12px; margin-top: 16px; }

.panel-cta {
  width: 100%;
  margin-top: 20px;
  padding: 17px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  min-height: 52px;
  transition: background .15s ease, transform .1s ease;
}
.panel-cta:active { transform: scale(0.99); }

@media (max-width: 899px) {
  #step-1 .booking-card {
    padding-bottom: calc(92px + var(--safe-bottom));
  }

  #show-cars-btn {
    position: fixed;
    left: 50%;
    bottom: calc(10px + var(--safe-bottom));
    z-index: 90;
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 0;
    box-shadow: 0 10px 28px rgba(20, 25, 31, 0.24);
    transform: translateX(-50%);
  }

  #show-cars-btn:active { transform: translateX(-50%) scale(0.99); }
}

/* ---------- Trust row ---------- */
.trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 16px 0 18px;
}
.trust-item {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-check { color: var(--green); font-weight: 800; }

/* ---------- Step 2: summary strip + vehicle list ---------- */
.summary-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0 0;
}
.summary-back {
  background: none;
  border: none;
  color: var(--green);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 0;
}
/* Structured summary — one fact per line instead of one long run-on
   string ("08.09 – 18.09 · 10 дн. · Nueva Tierra → там же") that read
   as a single hard-to-parse phrase. */
.summary-text { display: flex; flex-direction: column; gap: 3px; }
.summary-line { font-size: 12.5px; color: var(--ink-soft); }
.summary-line-dates { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* ---------- Step indicator (1 → 2 → 3), shown on Step 2 and Step 3 so a
   visitor arriving on either always knows where they are in the flow. ---------- */
.step-indicator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  font-family: var(--font-display);
}
.step-indicator-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.step-indicator-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line);
  color: var(--bg-card);
  font-size: 9.5px;
  font-weight: 800;
}
.step-indicator-sep { color: var(--line); font-size: 11px; }
.step-indicator-item[aria-current="step"] { color: var(--ink); }
.step-indicator-item[aria-current="step"] .step-indicator-num { background: var(--gold); color: var(--white); }
.step-indicator-item.is-done { color: var(--ink-soft); }
.step-indicator-item.is-done .step-indicator-num { background: var(--green); color: var(--bg); }

.vehicle-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 30px; }

.vehicle-card {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vehicle-photo {
  position: relative;
  aspect-ratio: 1376 / 768;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehicle-photo.is-loading {
  background: var(--bg-card);
}
/* contain, never cover — the whole car (roof to bumpers, all wheels)
   must always stay in frame. The container's aspect ratio matches the
   final production PNGs exactly (1376x768), which already carry their
   own finished framing/margins/scale as a matched set — this rule is
   identical for all four vehicles, no per-car adjustment. */
.vehicle-photo.has-photo { background-size: contain; background-repeat: no-repeat; background-position: center; }
.vehicle-photo-name {
  position: relative;
  z-index: 1;
  color: var(--bg);
  font-weight: 800;
  font-size: 17px;
  text-align: center;
  padding: 0 10%;
}
.vehicle-body { padding: 16px 18px calc(16px + var(--safe-bottom)); }
.vehicle-name { font-size: 18px; font-weight: 800; letter-spacing: -0.005em; }
.vehicle-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.vehicle-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  margin-top: 12px;
}
.vehicle-spec {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.vehicle-spec > span {
  display: inline-flex;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
}
.vehicle-technical {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}
.vehicle-technical > div + div {
  margin-top: 3px;
  color: var(--ink-soft);
  font-weight: 550;
}
.vehicle-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.vehicle-features > span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}
.rental-period-line {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.rental-period-line strong { color: var(--ink); font-weight: 800; }

.price-breakdown { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-faint);
  padding: 3px 0;
}
.price-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.price-total .k { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.price-total .v { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.vehicle-deposit { margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }
.vehicle-deposit strong { color: var(--ink-soft); font-weight: 700; }

.vehicle-select-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  min-height: 46px;
}
.vehicle-select-btn:active { transform: scale(0.99); }

/* ---------- Step 3: recap panel + contact ---------- */
.panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 20px calc(18px + var(--safe-bottom));
  margin-top: 16px;
}
.recap-photo {
  position: relative;
  aspect-ratio: 1376 / 768;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
}
/* contain, never cover — see .vehicle-photo.has-photo for rationale. */
.recap-photo.has-photo { background-size: contain; background-repeat: no-repeat; background-position: center; }
.recap-photo-name { position: relative; z-index: 1; color: var(--bg); font-weight: 800; font-size: 13px; }
.recap-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.recap-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.recap-row:last-of-type { border-bottom: none; }
.recap-row .k { color: var(--ink-faint); }
.recap-row .v { font-weight: 700; text-align: right; }
.recap-row.is-total .k, .recap-row.is-total .v { font-size: 16px; font-weight: 800; color: var(--ink); }
.recap-row.is-deposit { color: var(--ink-faint); }

.summary-back.step3 { margin-top: 16px; }

/* ---------- Step 3: compact vehicle summary — replaces the old full
   recap card (big photo) that made a visitor land back on "the photo"
   after tapping Select and not realize the form had continued below
   it. Small thumbnail + key facts only; full breakdown already shown
   once on Step 2, not repeated here. ---------- */
.vehicle-summary {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-top: 16px;
}
.vehicle-summary-top { display: flex; gap: 12px; align-items: flex-start; }
.vehicle-summary-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-sunken);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.vehicle-summary-info { min-width: 0; flex: 1; }
.vehicle-summary-name { font-size: 16px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); }
.vehicle-summary-line { margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.vehicle-summary-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.vehicle-summary-price .k { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.vehicle-summary-price .v { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.vehicle-summary-deposit { margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.vehicle-summary-deposit strong { color: var(--ink-soft); font-weight: 700; }
.vehicle-summary-change {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.contact-block { padding: 20px 0 12px; }
.contact-head {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.contact-subtitle {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0 0 16px;
}

.form-error-banner {
  display: none;
  background: #FBEAE4;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.form-error-banner.show { display: block; }

.field-plain {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 9px 13px 4px;
  margin-bottom: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-plain label {
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.required-mark { color: var(--danger); }
.field-plain input {
  width: 100%;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 0 10px;
  color: var(--ink);
}
.field-plain input::placeholder { color: var(--ink-faint); opacity: 0.78; font-weight: 400; }
.field-plain input:focus-visible { outline: none; }
.field-plain:focus-within { border-color: var(--green); box-shadow: none; }
.field-plain.has-success { border-color: #2E7D5B; }
.field-plain.has-success input { color: #2E7D5B; }
.field-plain.has-error { border-color: var(--danger); }
.field-plain.has-error input { color: var(--danger); }

/* ---------- Phone input: country selector + national number ---------- */
.phone-input {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.phone-country-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 7px 8px 10px 0;
  margin-right: 2px;
  border-right: 1.5px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.phone-country-flag { font-size: 17px; line-height: 1; }
.phone-country-caret { color: var(--ink-faint); flex-shrink: 0; }
.phone-country-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.phone-input input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.phone-error-text {
  display: none;
  font-size: 12px;
  color: var(--danger);
  margin: -8px 0 12px;
  padding-left: 2px;
}
.field-plain.has-error .phone-error-text { display: block; }

/* Fixed-position popover, sized/placed in JS (positionCountryList) —
   matches #calendar-panel's desktop pattern so it is never clipped by
   .step3-layout's overflow:hidden and never overlaps neighboring
   fields, on any viewport. */
.phone-country-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  max-width: calc(100vw - 32px);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 60;
}
.phone-country-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.phone-country-option .flag { font-size: 16px; }
.phone-country-option .name { flex: 1 1 auto; }
.phone-country-option .dial { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.phone-country-option:hover,
.phone-country-option.is-active { background: var(--bg); }
.phone-country-option.is-selected { font-weight: 700; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px;
  border-bottom: 1.5px solid var(--line);
  cursor: pointer;
}
.checkbox-row input { width: 20px; height: 20px; accent-color: var(--green); flex-shrink: 0; }
.checkbox-row .txt { font-size: 14.5px; flex: 1; }
.checkbox-row .free-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-tint);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.submit-btn {
  width: 100%;
  margin-top: 22px;
  padding: 17px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  min-height: 52px;
  transition: background .15s ease, transform .1s ease;
}
.submit-btn:active { transform: scale(0.99); }
.submit-btn:disabled { background: var(--ink-faint); cursor: not-allowed; }
.submit-hint { text-align: center; font-size: 12px; color: var(--ink-faint); margin-top: 12px; }

/* ================= SUCCESS ================= */
.success-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  overflow-y: auto;
  padding: calc(40px + var(--safe-top)) 20px 40px;
}
.success-overlay.show { display: block; }
.success-inner {
  max-width: 440px;
  margin: 0 auto;
  padding-bottom: calc(28px + var(--safe-bottom));
  text-align: center;
}
.success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  animation: pop .5s cubic-bezier(.16,1,.3,1);
}
@keyframes pop { from { transform: scale(0.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-overlay h2 { font-size: 23px; font-weight: 800; margin: 0 0 8px; }
.success-overlay p.sub {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 6px;
}
.success-overlay .recap-panel { text-align: left; margin-top: 20px; }
.whatsapp-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--green);
  color: var(--bg);
  border-radius: var(--radius-md);
  padding: 15px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin: 22px 0 10px;
  min-height: 52px;
  box-shadow: 0 8px 22px rgba(14,24,34,0.14);
  transition: background .15s ease, transform .1s ease;
}
.whatsapp-fallback:active { transform: scale(0.99); }
.reset-btn {
  width: 100%;
  min-height: 48px;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 12px 18px;
  transition: border-color .15s ease, color .15s ease, transform .1s ease;
}
.reset-btn:active { transform: scale(0.99); }
.reset-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ================= Footer ================= */
footer { padding: 16px 0 calc(20px + var(--safe-bottom)); text-align: center; }
footer .tag { font-size: 12.5px; color: var(--ink-faint); }

/* ================= Desktop ================= */
@media (min-width: 900px) {
  main { max-width: 1160px; }
  .topbar-inner { max-width: 720px; padding: 0 24px; }
  .step-panel { padding: 0 24px; }

  .hero-band {
    max-width: 720px;
    margin: 0 auto;
    height: 34vh;
    min-height: 260px;
    max-height: 360px;
  }
  .hero-band::before { border-radius: inherit; }
  .hero-copy {
    max-width: 720px;
    margin: 24px auto 14px;
  }
  .location-map-link {
    max-width: 720px;
    margin: 10px auto 0;
  }

  .booking-card {
    max-width: 720px;
    margin: 18px auto 0;
    padding: 30px 32px;
  }
  .time-row { max-width: 100%; }

  /* Calendar becomes a compact floating popup instead of pushing the
     form down — taken clean out of document flow (position:fixed), so
     it cannot affect the page's scrollHeight or any sibling's layout.
     top/left are set in JS per open, anchored to whichever date field
     triggered it (openCalendar/positionCalendarPopup). */
  .calendar-panel {
    position: fixed;
    top: 0;
    left: 0;
    transform: none; /* reset the base rule's mobile centering transform —
      JS sets exact top/left px for the desktop anchored popup instead */
    display: block;
    flex-grow: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: 340px;
    margin: 0;
    padding: 8px 10px 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    z-index: 50;
    overflow: visible;
  }
  .calendar-close { display: none; }
  .calendar-panel .calendar-head { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .calendar-panel .calendar-head { margin-bottom: 4px; }
  .calendar-panel .calendar-weekdays span { padding: 2px 0; }
  .calendar-panel .calendar-grid,
  .calendar-panel .calendar-weekdays { grid-template-columns: repeat(7, 1fr); }
  .calendar-panel .calendar-grid { grid-auto-rows: 38px; }
  .calendar-day {
    aspect-ratio: unset;
    height: 38px;
    min-height: 0;
    flex-grow: 0;
    font-size: 12px;
  }

  .trust-row {
    max-width: 720px;
    margin: 20px auto 24px;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 8px 28px;
  }

  .vehicle-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
  }
  .vehicle-list .vehicle-photo-name { font-size: 15px; }

  .step3-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
  }
  .step3-layout .panel { margin-top: 0; padding: 28px 28px 26px; }
  .step3-layout .contact-block { padding-top: 4px; }
  .step3-layout .recap-name { font-size: 23px; }
  .step3-layout .recap-row.is-total .v { font-size: 24px; }
  .step3-layout .vehicle-summary { margin-top: 0; padding: 20px; }

  footer { padding-bottom: 56px; }
}

/* ---------- Step 3 desktop (>=1024px): the two-column grid above reads
   as two disconnected blocks (a floating summary card + fields sitting
   bare on the page background) — merge them into one white card with
   the back-link/stepper aligned to the same column above it. 768–1023px
   keeps the >=900px rules above as-is; <768px (mobile) is untouched. ---------- */
@media (min-width: 1024px) {
  /* Sync the header row with the main content's own centering chain
     (main{max-width:1160}} + .step-panel{padding:0 24px}) rather than a
     flat 1140px, so the logo/icons land on the exact same left/right
     coordinates as the step-3 card and any other 1160px-capped content —
     a literal max-width:1140px here would drift a few px off at wide
     viewports where the card itself is capped by that outer chain. */
  .topbar { padding-inline: 0; }
  .topbar-inner {
    max-width: 1160px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 24px;
  }
  #step-3 .summary-back {
    display: block;
    max-width: 1140px;
    margin: 0 auto;
  }
  #step-3 .step-indicator {
    max-width: 1140px;
    margin: 14px auto 0;
  }
  .step3-layout {
    grid-template-columns: 42% 58%;
    gap: 0;
    align-items: stretch;
    max-width: 1140px;
    margin: 24px auto 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
  }
  .step3-layout .vehicle-summary {
    background: none;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 32px 28px;
  }
  .step3-layout .contact-block {
    padding: 32px 32px 28px;
  }
}