/* World-class search bar polish */

/*
 * Hero search dropdowns (destination / branch) are position:absolute children.
 * They get clipped by:
 *  1) form.glass-strong — backdrop-filter + border-radius forces overflow clip in Chromium/Safari
 *  2) hero section — overflow-hidden + max-h-[100svh]
 *  3) home wrapper — overflow-clip
 * Open listboxes must paint past the white bar onto the hero image.
 */
form.glass-strong.rounded-\[1\.35rem\],
form.relative.glass-strong {
  overflow: visible !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #fff !important;
}

/* Non-hero cards can keep a light glass treatment */
form.card.rounded-3xl {
  overflow: visible !important;
}

/* Raise clipping ancestors only while a combobox is open */
div.overflow-clip:has([aria-expanded="true"][aria-haspopup="listbox"]) {
  overflow: visible !important;
}

section.relative.flex.h-\[100svh\].max-h-\[100svh\].flex-col.overflow-hidden:has(
  [aria-expanded="true"][aria-haspopup="listbox"]
) {
  overflow: visible !important;
  z-index: 40;
}

/* Keep the open menu above following page sections */
form.relative:has([aria-expanded="true"][aria-haspopup="listbox"]) {
  z-index: 50;
}

/* Tighten the search grid rhythm */
form.relative .grid.gap-3 {
  gap: 0.65rem !important;
  align-items: end;
}

@media (min-width: 1024px) {
  form.relative .grid.lg\:grid-cols-4 {
    grid-template-columns: 1.45fr 1.15fr 1.15fr !important;
  }
}

/* Field labels */
form.relative .text-\[11px\].font-semibold.uppercase {
  letter-spacing: 0.07em !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  margin-bottom: 0.15rem;
}

/* Destination / branch triggers — equal height, quieter chrome */
form.relative button[type="button"].w-full,
form.relative .rounded-2xl.border.border-line {
  min-height: 3rem !important;
  border-radius: 0.95rem !important;
  border-color: #e8eaee !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.relative button[type="button"].w-full:hover,
form.relative .rounded-2xl.border.border-line:focus-within {
  border-color: #c7d2fe !important;
  box-shadow: 0 0 0 3px rgba(19, 42, 142, 0.08) !important;
}

/* Compact trip dates + times controls */
.rdp-field__btn,
.rdp-field__surface,
.rdp-timeslot__surface {
  min-height: 3.35rem !important;
  border-radius: 0.95rem !important;
  border-color: #e8eaee !important;
  background: #fff !important;
}

.rdp-field__icon {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 0.65rem !important;
  box-shadow: 0 4px 10px rgba(19, 42, 142, 0.18) !important;
}

.rdp-field__primary,
.rdp-timebtn__value {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.rdp-field__chip {
  font-size: 0.62rem !important;
  padding: 0.22rem 0.45rem !important;
  background: #fff7ed !important;
}

.rdp-field__label {
  font-size: 0.62rem !important;
}

/* Promo + locate row */
form.relative .mt-3.flex {
  margin-top: 0.75rem !important;
  gap: 0.55rem !important;
}

form.relative button[title="Find the nearest branch"] {
  min-width: 2.85rem;
  justify-content: center;
  border-radius: 0.95rem !important;
  background: #fff !important;
}

form.relative button[title="Find the nearest branch"] span {
  display: inline !important;
}

@media (max-width: 640px) {
  form.relative button[title="Find the nearest branch"] span {
    display: none !important;
  }

  .rdp-field__primary {
    font-size: 0.8rem !important;
  }

  .rdp-timebtn__value {
    font-size: 0.78rem !important;
  }

  form.glass-strong,
  form.card {
    padding: 0.85rem !important;
    border-radius: 1.15rem !important;
  }
}

/* Sticky compact search summary on mobile home */
.rdp-field,
.rdp-timeslot {
  min-width: 0;
}

/* —— Phone / PWA search —— */
@media (max-width: 767px) {
  /* Sticky mini-search under header — visible on home + search/vehicles */
  div[data-rms-hide-sticky="1"],
  .sticky.top-0.z-50 > .border-t,
  .sticky.top-0[class*="z-50"] > .border-t {
    display: block !important;
  }

  /* Prep: hide expand panel in-tree before portal (kills header flash) */
  .rms-sheet-prep {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 100%, 0) !important;
  }

  [data-rms-host] {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
  }
  [data-rms-host] > * {
    pointer-events: auto;
  }

  /* Bottom sheet */
  [data-rms-host] .rms-sheet,
  .rms-sheet[data-rms-portaled="1"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: min(88svh, 640px) !important;
    margin: 0 !important;
    z-index: 96 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 1.8rem 1.8rem 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -18px 40px rgba(5, 11, 31, 0.28) !important;
    padding: 0.35rem 0 0 !important;
    transform: translate3d(0, 100%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease !important;
    will-change: transform;
  }

  .rms-sheet.rms-sheet--in {
    transform: translate3d(0, 0, 0) !important;
  }
  .rms-sheet.rms-sheet--out {
    transform: translate3d(0, 105%, 0) !important;
  }

  .rms-grab {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
  }
  .rms-grab span {
    width: 2.75rem;
    height: 0.28rem;
    border-radius: 999px;
    background: #d1d5db;
  }

  form.rms-sheet-form {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.55rem 1rem max(1.25rem, env(safe-area-inset-bottom)) !important;
  }

  /* Backdrop */
  [data-rms-backdrop="1"],
  .rms-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 95 !important;
    margin: 0 !important;
    background: rgba(14, 17, 22, 0.52) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rms-backdrop.rms-backdrop--in {
    opacity: 1;
  }
  .rms-backdrop.rms-backdrop--out {
    opacity: 0;
  }

  html[data-rms-sheet-open="1"] {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Home CTA bottom sheet (Pickup & return) */
  [role="dialog"].absolute.inset-x-0.bottom-0,
  [role="dialog"][data-rms-dialog="1"],
  .rms-home-dialog {
    top: auto !important;
    bottom: 0 !important;
    max-height: min(88svh, 640px) !important;
  }

  /* Stack location → dates → times inside sheets */
  form.rlp-enhanced .grid.gap-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  form.rlp-enhanced .rlp-slot,
  form.rlp-enhanced .rdp-field,
  form.rlp-enhanced .rdp-timeslot {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .rdp-timeslot__labels {
    grid-template-columns: 1fr 1fr;
  }

  .rdp-timeslot__surface {
    min-height: 3.5rem !important;
  }

  .rdp-timebtn {
    min-height: 3.15rem;
    padding: 0.65rem 0.7rem !important;
  }

  .rdp-timebtn__value {
    font-size: 0.9rem !important;
  }

  .rlp-trigger,
  .rdp-field__btn,
  .rdp-field__surface {
    min-height: 3.5rem !important;
  }

  .rlp-extras {
    margin-top: 0.35rem;
  }

  .rlp-check {
    font-size: 0.88rem;
    padding: 0.35rem 0;
  }

  /* Overlays above sticky sheet */
  .rlp-sheet,
  .rdp-root,
  .rdp-timemenu {
    z-index: 240 !important;
  }

  form.relative button[type="submit"] {
    min-height: 3.25rem;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rms-sheet,
  .rms-backdrop {
    transition: none !important;
  }
}

/* Search submit — keep accent but calmer height */
form.relative button[type="submit"] {
  border-radius: 0.95rem !important;
  min-height: 3rem;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}