/* Focused polish for the Trip step. Kept separate from the generated bundle. */
#root,
#root main,
#root .surface-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Keep the generated flow's own max-width utilities intact. The Trip step is
   intentionally capped at 820px; forcing every section to max-width:100%
   stretched the form across the dashboard and public booking shell. */
#root section {
  min-width: 0;
  box-sizing: border-box;
}

#root {
  width: 100%;
  overflow-x: clip;
}

#root .booking-flow-screen {
  overflow-x: clip;
}

.booking-trip-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking-trip-fields > .booking-trip-field {
  order: 10;
  margin-top: 0 !important;
}

.booking-trip-fields > .booking-service-switch {
  order: 1;
  padding: 4px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--secondary) / 0.6);
  box-shadow: inset 0 1px 2px hsl(var(--foreground) / 0.04);
}

.booking-trip-fields > .booking-trip-field--pickup {
  order: 2;
}

/* Pickup and Drop-off share one stable field treatment. Do not depend on their
   generated DOM position: Hourly replaces Drop-off and would otherwise shift
   all nth-child selectors. */
.booking-trip-fields > .booking-trip-field--pickup,
.booking-trip-fields > .booking-trip-field--dropoff {
  width: 100%;
  min-width: 0;
}

.booking-trip-fields > .booking-trip-field--pickup > .relative,
.booking-stop-field .relative,
.booking-trip-fields > .booking-trip-field--dropoff > .relative {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 1px solid hsl(var(--border));
  border-radius: 18px !important;
  background: hsl(var(--secondary) / 0.55);
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.booking-trip-fields > .booking-trip-field--pickup > .relative:hover,
.booking-stop-field .relative:hover,
.booking-stop-field .relative:focus-within,
.booking-trip-fields > .booking-trip-field--dropoff > .relative:hover,
.booking-trip-fields > .booking-trip-field--pickup > .relative:focus-within,
.booking-trip-fields > .booking-trip-field--dropoff > .relative:focus-within {
  border-color: hsl(var(--accent) / 0.55);
  background: hsl(var(--accent) / 0.035);
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.08);
}

.booking-trip-fields > .booking-trip-field--pickup input[placeholder="Address, airport, hotel..."],
.booking-stop-field input,
.booking-trip-fields > .booking-trip-field--dropoff input[placeholder="Address, airport, hotel..."] {
  width: 100%;
  min-height: 52px;
  padding: 0 44px 0 16px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 18px;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 16px !important;
  line-height: 22px !important;
  box-shadow: none;
}

.booking-hourly-duration-row {
  animation: booking-duration-in 140ms ease-out;
}

@keyframes booking-duration-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

#root .booking-service-switch > div {
  gap: 4px;
}

#root .booking-service-switch button {
  height: 46px;
  border: 0;
  border-radius: 999px;
  color: hsl(var(--foreground));
  font-size: 15px !important;
  font-weight: 650;
  line-height: 1 !important;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}

#root .booking-service-switch button:not(.bg-foreground) {
  background: transparent;
  color: hsl(var(--foreground) / 0.72);
}

#root .booking-service-switch button:not(.bg-foreground):hover {
  color: hsl(var(--foreground));
}

#root .booking-service-switch button.bg-foreground,
#root .booking-service-switch button.bg-foreground:hover {
  color: hsl(var(--background)) !important;
}

#root .booking-bundle-option {
  display: flex;
  min-height: 168px;
  flex-direction: column;
  cursor: pointer;
  box-shadow: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

#root .booking-bundle-option:hover,
#root .booking-bundle-option:focus-visible {
  border-color: hsl(var(--accent) / 0.7) !important;
  background: hsl(var(--accent) / 0.09) !important;
  box-shadow: none !important;
  outline: none;
  transform: none;
}

#root .booking-bundle-option > div:first-child {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#root .booking-bundle-option > div:first-child > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

#root .booking-bundle-option > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

#root .booking-bundle-option__action {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  margin-top: auto !important;
  padding: 8px 13px;
  border: 1px solid hsl(var(--accent) / 0.4);
  border-radius: 999px;
  background: hsl(var(--accent) / 0.08);
  color: hsl(var(--accent));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#root .booking-bundle-option.is-selected .booking-bundle-option__action {
  width: 100%;
  border-color: hsl(var(--foreground));
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

#root .booking-map-marker {
  transform: translateY(-12px) !important;
  filter: drop-shadow(0 4px 8px hsl(var(--foreground) / 0.22));
}

@media (max-width: 767px) {
  #root .booking-bundle-option {
    min-height: 156px;
  }
}

#root .booking-invite-card > .booking-invite-label {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

#root .booking-invite-card > .booking-invite-control {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--background));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#root .booking-invite-card > .booking-invite-control:focus-within {
  border-color: hsl(var(--accent) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.08);
}

#root .booking-invite-input {
  display: block;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  color: hsl(var(--foreground));
  opacity: 1;
}

#root .booking-invite-remove,
#root .booking-invite-apply {
  position: static;
  width: auto;
  min-height: 32px;
  line-height: 1 !important;
}

#root .booking-invite-remove {
  flex: 0 0 32px;
  padding: 0 !important;
}

#root .booking-invite-apply {
  flex: 0 0 auto;
  padding: 0 16px !important;
}

#root .booking-invite-remove::after,
#root .booking-invite-apply::after {
  display: none;
}

@media (max-width: 639px) {
  .booking-trip-fields {
    gap: 14px;
  }

  .booking-trip-fields > .booking-trip-field--pickup input[placeholder="Address, airport, hotel..."],
  .booking-stop-field input,
  .booking-trip-fields > .booking-trip-field--dropoff input[placeholder="Address, airport, hotel..."] {
    min-height: 50px;
    padding-left: 15px !important;
    font-size: 15px !important;
    line-height: 21px !important;
  }

  #root .booking-invite-card > .booking-invite-label {
    justify-content: flex-start;
  }

  #root .booking-invite-card > .booking-invite-control {
    padding-left: 14px;
  }
}

/* The native hourly select stays as the form value; the enhancer supplies the visible control. */
.booking-custom-select {
  position: relative;
  width: 100%;
}

.booking-custom-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.booking-custom-select__trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px 0 0;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 16px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.booking-custom-select__trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid hsl(var(--muted-foreground));
  border-bottom: 1.5px solid hsl(var(--muted-foreground));
  transform: translateY(-70%) rotate(45deg);
  transition: transform 150ms ease;
}

.booking-custom-select.is-open .booking-custom-select__trigger::after {
  transform: translateY(-25%) rotate(225deg);
}

.booking-custom-select__menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  left: -15px;
  right: -15px;
  display: none;
  max-height: 258px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--popover));
  box-shadow: 0 22px 56px hsl(var(--foreground) / 0.16);
}

.booking-custom-select.is-open .booking-custom-select__menu {
  display: grid;
  gap: 2px;
}

.booking-custom-select__option {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: hsl(var(--popover-foreground));
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.booking-custom-select__option:hover,
.booking-custom-select__option:focus-visible {
  background: hsl(var(--secondary));
  outline: none;
}

.booking-custom-select__option.is-selected {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

/* The public shell owns both the page background and scrolling for the
   embedded booking flow. The iframe document must stay transparent or its
   body canvas cuts the shared aurora off at the exact top edge of the frame.
   The grid remains supplied by the public shell behind the iframe. */
html[data-booking-embedded],
html[data-booking-embedded] body,
html[data-booking-embedded] #root {
  background: transparent !important;
}

/* Keeping
   nested clip/isolation layers on an auto-sized iframe creates oversized
   compositor surfaces in WebKit and can corrupt the right-side raster tiles
   after Rider -> Vehicle navigation at non-zero page scroll. The iframe is
   already the clipping boundary, so these inner paint boundaries are both
   redundant and unsafe. */
html[data-booking-embedded],
html[data-booking-embedded] body,
html[data-booking-embedded] #root,
html[data-booking-embedded] .booking-app-shell,
html[data-booking-embedded] .booking-app-shell > main {
  overflow-x: visible !important;
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
}

html[data-booking-embedded] .booking-app-shell .sticky {
  position: static !important;
}

/* Price Match uses a native dialog so both remove actions share one accessible
   confirmation. These rules are semantic rather than generated utility
   classes, which keeps the dialog intact when the booking bundle is rebuilt. */
#tcConfirmDialog {
  width: min(calc(100vw - 32px), 400px);
  max-width: 400px;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #111827;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

#tcConfirmDialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

#tcConfirmDialog > div {
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  background: #ffffff;
}

#tcConfirmDialog > div > div:first-child {
  padding: 24px;
  text-align: center;
}

#tcConfirmDialog > div > div:first-child > div:first-child {
  display: flex;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fee2e2;
}

#tcConfirmDialog svg {
  width: 32px;
  height: 32px;
  color: #ef4444;
}

#tcConfirmDialog h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

#tcConfirmDialog p {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

#tcConfirmDialog > div > div:last-child {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #f1f5f9;
}

#tcConfirmDialog button {
  min-height: 44px;
  flex: 1 1 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#tcConfirmDialog [data-tc-cancel] {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
}

#tcConfirmDialog [data-tc-cancel]:hover {
  background: #f9fafb;
}

#tcConfirmDialog [data-tc-ok] {
  border: 1px solid #dc2626;
  background: #dc2626;
  color: #ffffff;
}

#tcConfirmDialog [data-tc-ok]:hover {
  background: #b91c1c;
}

@media (max-width: 480px) {
  #tcConfirmDialog > div > div:last-child {
    flex-direction: column-reverse;
  }
}

/* Price Match editor: the collapse control was a "+" that rotated into an "x",
   which read as a second remove button next to the red one on the summary row.
   It opens with a plus and closes with a minus, so only the red control removes
   an offer. U+2212 keeps the same width as the plus, so nothing shifts. */
.booking-price-match-toggle {
  display: inline-flex;
  width: 1rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.booking-price-match-toggle::before {
  content: "+";
}

details[open] > summary .booking-price-match-toggle::before {
  content: "\2212";
}

/* Summary step: the Trip and Vehicle columns share one set of row bands so each
   row stays level with the row beside it. A long pickup or drop-off wraps onto a
   second line and used to push "When" below "Price Match"; subgrid keeps the two
   in step without truncating any address. Scoped to the two-column breakpoint —
   below it the sections stack and there is nothing to line up. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .booking-summary-grid {
      /* Heading + service, pickup, drop-off, time, passengers and bags.
         A subgrid cannot create implicit rows: five bands overlapped the
         final three facts in the last band. */
      grid-template-rows: repeat(7, auto);
      row-gap: 0.75rem;
    }

    .booking-summary-grid.has-stop {
      grid-template-rows: repeat(8, auto);
    }

    .booking-summary-grid > div {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      min-width: 0;
    }

    /* The heading owns row 1; the row gap replaces most of its bottom margin. */
    .booking-summary-grid > div > h3 {
      margin-bottom: 0.25rem;
    }

    /* Lift the rows out of their wrapper so they become bands of the subgrid. */
    .booking-summary-grid > div > .space-y-3 {
      display: contents;
    }

    .booking-summary-grid > div > .space-y-3 > :not([hidden]) ~ :not([hidden]) {
      margin-top: 0;
    }
  }
}