#bookingVehicleStep {
  padding: 0;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

/* All 4 booking steps' own top-level content wrappers (the sticky date
   bar, the vehicle grid, and Search/Extras/Checkout's own forms) used to
   carry their own px-3 through xl:px-8 Tailwind padding on top of
   #mainContent's padding underneath (see custom.css for #mainContent's
   own scale — the single source of truth for this app-wide gutter now).
   Zeroed here so booking gets that one gutter exactly once, same as
   every other page, instead of a wider, doubled-up margin — this used to
   be solved with a per-page negative-margin breakout against
   #mainContent (removed now that #mainContent's own padding was cut
   down to match what booking needed, making the breakout redundant).
   Direct-child combinator on the 3 form steps so this doesn't also
   zero-out an unrelated nested .w-full somewhere inside them (e.g. a car
   card <img>, which needs its own padding intact). */
#bookingStickyBarInner,
#bookingVehicleStepInner,
#bookingSearchStep > .w-full,
#bookingExtrasStep > .w-full,
#bookingCheckoutStep > .w-full {
  padding-left: 0;
  padding-right: 0;
}

/* Search bar pinned to the LEFT end of the row, pills pinned to the right
   — previously centered in the full row via a 3-column grid with an
   invisible spacer balancing the filter pills' width, but a centered
   search box read as adrift/misplaced rather than intentional (reported).
   A plain flex row with justify-content:space-between puts the search box
   at its natural left position and the filters at the right, with
   whatever space is left between them — no spacer column needed. Below
   640px it stays the original stacked flex layout (search full-width on
   top, pills wrapping below) — this only matters once there's a wide
   single row to lay out; .veh-search-row-spacer is unused now but kept
   (display:none) in case markup elsewhere still references it. Plain CSS,
   not Tailwind utilities: this exact justify-content combo isn't used
   elsewhere in the compiled tailwind.css (a purged, pre-built file), so a
   new utility class for it would silently have no effect without a
   rebuild. */
.veh-search-row-spacer {
  display: none;
}
/* The element's own `min-w-[200px]` Tailwind class has no effect at
   all — an arbitrary-value class not already present elsewhere in the
   compiled, purged tailwind.css is silently dropped, same reason plain
   CSS is used instead of new utility classes throughout this file.
   Without an actual min-width, this flex item (row is `flex flex-wrap`)
   shrank all the way down to its content's true minimum — a few px, not
   even enough to show the search icon — on any viewport too narrow to
   fit it at its intended size alongside the filter pills, instead of
   properly wrapping to its own line first. The search input then visibly
   overflowed its collapsed box, rendering on top of the filters/dropdown
   instead of the two stacking cleanly (reported: search field overlapping
   the filter row on phones). */
.veh-search-row-box {
  min-width: 200px;
}

@media (min-width: 640px) {
  .veh-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .veh-search-row-box {
    width: 100%;
    max-width: 24rem; /* matches the element's own Tailwind max-w-sm class */
  }
}

/* ── Booking header: step indicator vs. date/title column ─────────────────
   The full 4-circle progress indicator (index.html: "hidden sm:flex") and
   the compact "Step X of 4" text badge ("sm:hidden") switch at Tailwind's
   sm: breakpoint (640px) — fine on genuine phones (badge) and on wide
   desktop (circles, plenty of room), but in between (~640-1000px: small
   tablets, half-width laptop windows) the circles' own minimum width
   (4 circles + 3 connecting lines + padding, a few hundred px) doesn't
   leave the title/date column enough room, and #stickyDateSummary's
   matching sm:whitespace-nowrap forces the date range onto one line
   regardless — so it doesn't wrap to fit, it just overflows and visually
   overlaps the circles instead (reported: booking header "not coming
   correctly" on smaller/tablet-ish screens). Re-pointing both switches at
   1024px keeps the badge (and text wrap) through that whole cramped
   range, matching it to the width where .progress-step-circle's own
   xl-scale rule (1280px, elsewhere in this file) confirms there's
   supposed to be room to spare. Plain CSS overriding Tailwind's sm:
   classes here for the same reason as the grid fix above: lg:flex/
   lg:hidden/lg:whitespace-nowrap aren't in the compiled, purged
   tailwind.css, so using those class names directly would silently do
   nothing without a rebuild. */
@media (max-width: 1023px) {
  #bookingPage .progress-container {
    display: none !important;
  }
  #mobileStepIndicator {
    display: block !important;
  }
  #stickyDateSummary {
    white-space: normal !important;
  }
}
/* Below ~480px (older/smaller phones) even the compact "Step X of 4"
   badge plus the back button leave too little width for the
   whitespace-nowrap "EliteSteer Booking" title to fit on one line — it
   was overflowing and getting clipped to "EliteSteer Boo…" instead of
   wrapping. Letting it wrap here trades a slightly taller header (two
   short lines instead of one) for never truncating the brand name, which
   reads as more broken than a taller header does. */
@media (max-width: 479px) {
  #bookingPage h1.whitespace-nowrap {
    white-space: normal;
  }
  /* On Steps 2-4 the "Step X of 4" text is always duplicated right below
     the title — "N vehicles • Step 2 of 4", "Step 3 of 4 • Add-ons &
     Extras", "Step 4 of 4 • Complete Booking" — so on the narrowest
     phones this top-right badge is pure duplicate information costing
     real width the date range needs; without it the date wrapped down to
     nearly one word per line. Step 1 has no such duplicate (its subtitle
     is "Premium vehicles...", not a step count) and no long date text to
     make room for either, so it's the one step this should stay visible
     on — #bookingHeaderSubtitle only carries the `.hidden` class once
     Step 1's search has run and the date summary has taken its place,
     which :has() uses here as that signal instead of hiding it
     unconditionally. */
  #bookingPage:has(#bookingHeaderSubtitle.hidden) #mobileStepIndicator {
    display: none !important;
  }
}

/* ── Booking header, mobile: date range collapses to icon-only ───────────
   On Steps 2-4, the full "DD Mon, H:MM am → DD Mon, H:MM am" date range
   was rendered inline with the title and wrapped onto its own line(s)
   below it once it didn't fit — readable, but tall, and pushed the title
   row's height around between steps. Below 640px (the same width this
   header already treats as "mobile" — #stickyDateSummary's own
   sm:whitespace-nowrap class switches here) it now collapses to just the
   calendar/pencil icon pair, right-aligned on the SAME line as the
   title, with the actual dates left to the "N vehicles • Step 2 of 4" /
   "Step 3 of 4 • ..." line already sitting right below — tapping the
   icons still opens the exact same edit-dates panel as before, nothing
   about that behavior changes. 640px and up is untouched: the full date
   text still renders inline exactly as it always has. */
@media (max-width: 639px) {
  /* Scoped to when the date-info block is actually the visible sibling
     (Steps 2-4) — Step 1 shows the plain subtitle instead and should
     keep packing left like it always has, not spread apart. */
  #bookingHeaderTitleRow:has(#bookingHeaderStep2Info:not(.hidden)) {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  #stickyDateSummaryText {
    display: none;
  }
  #stickyDateSummary {
    gap: 0.625rem;
  }
  /* The edit-dates dropdown centers itself (left:50%/-translate-x-1/2)
     on its trigger by default, which worked when the trigger sat inline
     with the date text near the row's middle — now that the trigger is
     just the icon pair pushed to the row's right edge, centering on it
     ran the panel (up to 420px wide) straight off the right side of the
     screen. Anchoring its own right edge to the trigger's right edge
     instead keeps the whole panel on-screen, extending left from there. */
  #stickyDateEditPanel {
    left: auto;
    right: -0.5rem;
    transform: none;
  }
}

#bookingVehicleStep .vehicle-grid,
#vehicleCardsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 0;
  width: 100%;
}

@media (max-width: 640px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1281px) and (max-width: 1536px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1537px) and (max-width: 1920px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1921px) {
  #bookingVehicleStep .vehicle-grid,
  #vehicleCardsContainer {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
}

#bookingExtrasStep,
#bookingCheckoutStep {
}

.progress-container {
  /* display is controlled by the "hidden sm:flex" utility classes on the
     element itself — setting it here too would fight that at mobile
     widths, since both rules share the same specificity. */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

.progress-step-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background: rgba(51, 65, 85, 0.5);
  border: 2px solid rgba(100, 116, 139, 0.3);
  color: rgb(148, 163, 184);
  transition: all 0.3s ease;
}

.progress-step-circle.active {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-color: #22d3ee;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

.progress-step-circle.completed {
  background: rgba(34, 211, 238, 0.2);
  border-color: #22d3ee;
  color: #22d3ee;
}

.progress-line {
  width: 3rem;
  height: 2px;
  background: rgba(100, 116, 139, 0.3);
}

.progress-line.active {
  background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%);
}

@media (max-width: 640px) {
  .progress-step-circle {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  .progress-line {
    width: 1.5rem;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.booking-step {
  animation: fadeInUp 0.5s ease-out;
}

/* ============================================
   XL / 2XL BOOKING ENHANCEMENTS
   ============================================ */

/* Checkout form: scale padding on xl */
@media (min-width: 1280px) {
  #checkoutForm .bg-slate-800 {
    padding: 1.75rem;
  }
}

/* Progress step circles: scale on xl+ */
@media (min-width: 1280px) {
  .progress-step-circle {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
  }
  .progress-line {
    width: 4rem;
  }
}

/* Sticky bar's "edit dates" popup — index.html positions it with
   Tailwind's absolute/left-1/2/-translate-x-1/2, which centers it against
   its own trigger (#stickyDateSummary, the small "07 Sept 10:00am → ..."
   text) rather than the viewport. That trigger sits wherever the date
   text happens to land in the header's flex-wrap row — often well
   left-of-center on a phone — so centering a ~90vw-wide panel on it
   pushed the panel's left edge off-screen (reported: the popup rendering
   cut off on the left, showing only its right portion). Desktop was
   never affected: the header has more room there and the trigger sits
   closer to center.
   Below 640px this switches to position:fixed with plain left/right
   viewport insets instead of centering math — an ID selector, so it
   outranks the Tailwind utility classes in the markup without
   !important. transform/margin-top are reset since the Tailwind
   translate-x-1/2 and mt-2 classes still apply otherwise, shifting the
   fixed-positioned panel by an extra half-width/half-rem it no longer
   needs. `top` can't be expressed in this CSS-only fix — a fixed
   element's `top-full` Tailwind class means 100% of the *viewport*
   height, not "below the trigger" — so booking.js's
   _toggleStickyEditPanel() sets it inline from the trigger's actual
   rendered position each time the panel opens. */
@media (max-width: 639.98px) {
  #stickyDateEditPanel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
    transform: none;
    margin-top: 0;
  }
}

/* Checkout form fields (First Name, Email, Phone, Driver's License, etc.):
   reported as having too much empty space before the text starts and
   taking up more vertical room than needed. The shared field system in
   custom.css (padding: 0.625rem 1rem, min-height: 44px — the app-wide
   touch-target minimum) is a plain tag+attribute selector that already
   outranks these inputs' own Tailwind px-4/py-3 classes regardless of
   source order (same trap documented there for the fuel-level and
   dt-compact fields) — this is a more specific #checkoutForm-scoped
   selector so it wins the same way without touching that shared rule
   and rippling into every other input/select/textarea in the app.
   min-height is trimmed to 40px rather than the 36px "compact toolbar"
   token — still meaningfully shorter, while staying comfortable to tap
   into on a phone for what's a payment-adjacent step. Same values at
   every width; nothing here needs to change between mobile and desktop. */
#checkoutForm input[type="text"],
#checkoutForm input[type="email"],
#checkoutForm input[type="tel"],
#checkoutForm input[type="date"],
#checkoutForm select {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
}