/*
 * "Locate me" on the vehicle single page's pick up / drop off fields.
 *
 * Vehicle module only - see resources/views/front/single.noderframe's
 * `if isVehicle` guards around every include of this file. The map itself is
 * Leaflet (already vendored for the admin/owner property forms), reused here
 * rather than the read-only static-tile viewer osm-map.js draws, because this
 * one needs a marker a visitor can drag or tap to correct - not just look at.
 */
.bh-locate {
  position: relative;
}

.bh-locate .searchMenu-loc {
  position: relative;
  padding-right: 12px;
}

/* Anchor suggestions to their own field and keep them inside the card width. */
.listing-search .bh-locate .bh-location-popup {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

/* The field whose suggestions are open sits above everything after it in the
   card - its own open map panel, the Drop location field (a later positioned
   sibling that would otherwise paint over Pick up's list) and Travel Date. */
.bh-locate:has(.bh-location-popup.open) {
  z-index: 30;
}

.bh-locate .searchMenu-loc:has(.bh-location-popup.open) {
  z-index: 30;
}

.bh-locate .bh-location-popup.open {
  z-index: 30;
}

.bh-locate__trigger {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  border: 1px solid #d9e2ef;
  border-radius: 50%;
  background: #f3f7fd;
  color: #0877bb;
  font-size: 16px;
  cursor: pointer;
}

.bh-locate__trigger:hover,
.bh-locate__trigger.is-active {
  border-color: #0877bb;
  background: #0877bb;
  color: #fff;
}

.bh-locate__panel {
  margin-top: 10px;
}

.bh-locate__map {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #eaf1f8;
  /* Leaflet's panes and zoom controls carry z-index 400-1000. Without a
     stacking context of its own the map draws them over the suggestion list
     dropping down from the field above it. */
  z-index: 0;
  isolation: isolate;
}

/* Leaflet measures its container on init; a map created while its panel is
   still `hidden` sizes itself to nothing and never recovers without this. */
.bh-locate__panel[hidden] {
  display: none;
}

.bh-locate__hint {
  margin: 8px 0 0;
  color: #66768c;
  font-size: 12px;
  font-style: italic;
}

.bh-locate__hint.is-error {
  color: #c5162e;
}

.bh-locate-marker {
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #0877bb;
  box-shadow: 0 2px 8px rgba(0, 42, 96, 0.35);
  transform: rotate(-45deg);
}

@media (max-width: 480px) {
  .bh-locate__map {
    height: 180px;
  }
}

/* The read-only "Car Location" map further down the page - a fixed pin at
   the listing's own coordinates, not a picker. */
.bh-vehicle-map {
  width: 100%;
  height: 360px;
  overflow: hidden;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #eaf1f8;
}

@media (max-width: 640px) {
  .bh-vehicle-map {
    height: 260px;
  }
}

/*
 * The sticky mini search bar (main.css's `.singleMenu`, fixed to the top of
 * the viewport once you scroll past the gallery) carries the same search
 * form as the one further down the page, stacked above the section nav and
 * the price/Book Now row inside that one fixed box. Every module gets this,
 * but only the vehicle form has six stacked fields (pick up, drop off, type,
 * date, guest, button) once it collapses to one column on a narrow screen -
 * tall enough there to fill the whole viewport, leaving nothing of the page
 * visible underneath while it is pinned in place. The nav links and the
 * price/Book Now row are still worth keeping stuck to the top; the form is
 * not, since the same fields are always reachable a short scroll up in the
 * page's own non-sticky search band.
 */
@media (max-width: 767px) {
  .singleMenu .listing-search-band:has(.mainSearch.-bh-col-vehicle) {
    display: none;
  }
}

/*
 * The section nav (Overview / Rooms / Reviews / Facilities / Faq) in that
 * same sticky bar, once the vehicle form above is hidden and it's the first
 * thing in the box. Bootstrap's .row wraps by default, and five links with
 * 30px of gap between them don't fit one line under about 390px - "Faq"
 * drops to a second row, widening the whole sticky bar. The same template.css
 * `.tabs__controls` pattern used up in the header - one line, scrollable,
 * scrollbar hidden - fits it without touching the wording or the anchors,
 * which are shared markup every module renders identically.
 */
@media (max-width: 767px) {
  .singleMenu:has(.mainSearch.-bh-col-vehicle) .singleMenu__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .singleMenu:has(.mainSearch.-bh-col-vehicle) .singleMenu__links::-webkit-scrollbar {
    display: none;
  }

  .singleMenu:has(.mainSearch.-bh-col-vehicle) .singleMenu__links .col-auto {
    white-space: nowrap;
  }
}

/*
 * The sidebar booking card's own Travel Date box (separate from the search
 * bands above - this one sits next to "Book Now" and used to be plain
 * static text with no calendar behind it at all). Its popup reuses the
 * theme's shared .bh-date-popup/.bh-calendar-months, so only the
 * vehicle-only arrival-time row and the trigger's own layout need styling
 * here.
 *
 * The popup is nested inside this trigger (not a sibling of it, the way the
 * theme's own single-row search bars nest theirs) because this card's form
 * spans several stacked rows - Pick up, Drop off, Travel Date, Seats, Book
 * Now. The shared `.listing-search .bh-search-popup{top:100%}` positions
 * against the nearest positioned ancestor, which would be the whole form;
 * scoping position:relative down to the trigger itself keeps the popup
 * anchored under this one field instead of dropping below Book Now.
 */
[data-vehicle-travel-date] {
  position: relative;
}

/* The sidebar has room for one month; the shared two-month popup overflows it. */
.listing-search [data-vehicle-travel-date] .bh-date-popup {
  top: calc(100% + 2px);
  left: auto;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  max-height: 80dvh;
  margin-top: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: default;
}

[data-vehicle-travel-date] .bh-calendar-months {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

[data-vehicle-travel-date] .bh-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

[data-vehicle-travel-date] .bh-calendar-grid > button {
  max-width: 100%;
}

@media (min-width: 1400px) {
  .listing-search [data-vehicle-travel-date] .bh-date-popup {
    left: 0;
    right: auto;
  }
}

@media (max-width: 767px) {
  .listing-search [data-vehicle-travel-date] .bh-date-popup {
    width: 100%;
  }
}

.listing-search [data-vehicle-travel-date] .bh-popup-head button {
  flex: 0 0 32px;
  width: 32px;
}

[data-vehicle-travel-date] .bh-popup-head strong {
  font-size: 14px;
  text-align: center;
}

[data-vehicle-travel-date] .bh-arrival-time select {
  width: 100%;
  min-width: 0;
}

[data-vehicle-travel-date] .bh-calendar-actions {
  position: sticky;
  bottom: -14px;
  gap: 8px;
  padding: 12px 0;
  background: #fff;
}

[data-vehicle-travel-date] .bh-calendar-apply {
  flex-shrink: 0;
}

@media (max-width: 380px) {
  [data-vehicle-travel-date] .bh-calendar-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Sidebar booking card's "Return trip" box - a checkbox that opens a return
   date and time under Travel Date. */
.bh-return-trip__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.bh-return-trip__toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #315bdd;
  cursor: pointer;
}

.bh-return-trip__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e7ef;
}

.bh-return-trip__fields[hidden] {
  display: none;
}

.bh-return-trip__fields label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.bh-return-trip__fields input,
.bh-return-trip__fields select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #d8dce5;
  border-radius: 4px;
  color: #12213d;
  background: #fff;
  font: 14px Jost, sans-serif;
}

.bh-return-trip__error {
  grid-column: 1 / -1;
  margin: 0;
  color: #c5162e;
  font-size: 13px;
}

.bh-return-trip__error[hidden] {
  display: none;
}

@media (max-width: 380px) {
  .bh-return-trip__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bh-arrival-time {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e7ef;
}

.bh-arrival-time label {
  display: grid;
  gap: 6px;
}

.bh-arrival-time strong {
  font-size: 13px;
}

.bh-arrival-time select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d8dce5;
  border-radius: 4px;
  color: #12213d;
  background: #fff;
  font: 14px Jost, sans-serif;
}

/*
 * A Back button next to "Check availability" (the in-page search band) and
 * next to "Book Now" (the sidebar card) - mobile only. On mobile there is no
 * back button in the browser chrome the way a desktop tab bar has one, and
 * once either action is tapped the traveller is on a fresh page with no
 * obvious way back to the pick up/drop off/date they had set up here.
 * Vehicle-only: this file only ever loads behind `if isVehicle`.
 */
.bh-back-button {
  display: none;
}

@media (max-width: 767px) {
  .bh-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
}

/*
 * Both forms - the top search band and the sidebar booking card - stack
 * Pick up/Drop/Vehicle Type/Travel Date/Guest (or Seats) tall enough on a
 * narrow screen to push the rest of the page well below the fold before a
 * visitor has even scrolled. Collapsed by default there, behind a single
 * "Check availability" / "Book Now" toggle that swaps for the real form
 * (with its own real submit button and Back button already in it) once
 * tapped. Desktop is untouched - .bh-mobile-toggle only exists in the
 * markup for the vehicle module, and even there this rule only fires
 * inside the ≤767px block below.
 */
.bh-mobile-toggle {
  display: none;
}

@media (max-width: 767px) {
  /* Clears the sticky mini search bar (main.css's .singleMenu, pinned to the
     top of the viewport once scrolled past the gallery, ~160px tall with its
     nav links and price/Book Now row) when the JS above scrolls a
     just-expanded form to the top of the page. */
  .bh-mobile-search {
    scroll-margin-top: 165px;
  }

  /* Scoped to :has(.bh-mobile-toggle) rather than a bare .bh-mobile-search
     form rule - the sidebar's own toggle only renders inside the vehicle
     branch, but the top search band's wrapper is shared markup that every
     module's form sits inside, and hiding it unconditionally here would
     have collapsed hotels/tours/etc.'s forms with no toggle left to reopen
     them. */
  .bh-mobile-search:has(.bh-mobile-toggle) form {
    display: none;
  }

  .bh-mobile-search:has(.bh-mobile-toggle) .bh-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #315bdd;
    font: 600 15px Jost, sans-serif;
  }

  .bh-mobile-search.is-expanded form {
    display: block;
  }

  .bh-mobile-search.is-expanded .bh-mobile-toggle {
    display: none;
  }
}

/*
 * A quick "Book Now" next to the top "Check availability" toggle - a
 * traveller who already knows this is the vehicle they want otherwise has
 * to scroll all the way past the gallery and details to reach the
 * sidebar's own Book Now. It's a toggle for that sidebar form (see
 * data-expand-target in vehicle-locate.js), not a direct link to checkout -
 * jumping straight to checkout with no pick up/drop off/date chosen yet
 * just sent every guest straight on to sign in with nothing to come back
 * to. Mobile + vehicle only, same as the toggle above.
 */
.bh-mobile-book-now {
  display: none;
}

@media (max-width: 767px) {
  .bh-mobile-search:has(.bh-mobile-toggle) .bh-mobile-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    appearance: none;
    cursor: pointer;
    border: 1px solid #315bdd;
    border-radius: 4px;
    color: #315bdd;
    background: #fff;
    font: 600 15px Jost, sans-serif;
  }
}

/*
 * The "Driver" section's profile photo. Was borrowing the hotel room
 * gallery's .ratio.ratio-1:1 / .img-ratio markup, which fills its grid
 * column (col-12 on mobile, up to several hundred px wide) - fine for a room
 * photo, far too large for a face. A fixed-size circle, avatar-style, the
 * same idea as .bh-account-menu__trigger > img in template-header.css.
 */
.bh-driver-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}