/* Two steps on the existing native form. Search, map and checkout stay native. */
html body form[data-ride-booking][data-ride-step] {
  --ride-ink: #231b22;
  --ride-muted: #5d5057;
  --ride-line: #a5969f;
  --ride-paper: #fff;
  --ride-accent: #8b1737;
  --ride-deep: #441025;
  --ride-light: #f9eef2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-flow: row !important;
  gap: .8rem;
  align-content: start;
  color: var(--ride-ink);
  background: var(--ride-paper);
  border: 1px solid #dad1d7;
  border-radius: 1.1rem;
  padding: clamp(1rem, 2.4vw, 2.25rem) !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  box-sizing: border-box;
  grid-column: 1 / -1 !important;
  box-shadow: 0 14px 44px #211b2412;
}
form[data-ride-booking] > * { min-inline-size: 0; }
html body form[data-ride-booking][data-ride-step] > :not(dialog) {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  order: 0 !important;
}
html body form[data-ride-booking][data-ride-step] > .ride-steps { order: -60 !important; }
html body form[data-ride-booking][data-ride-step] > .ride-heading { order: -50 !important; }
html body form[data-ride-booking][data-ride-step] > .ride-trip-summary { order: -49 !important; }
html body form[data-ride-booking][data-ride-step] > [data-ride-step-back] { order: -48 !important; }
html body form[data-ride-booking][data-ride-step] > .p114-fixed-picker { order: -30 !important; }
html body form[data-ride-booking][data-ride-step] > .ride-validation { order: 30 !important; }
html body form[data-ride-booking][data-ride-step] > [data-ride-step-next] { order: 31 !important; }
html body form[data-ride-booking][data-ride-step] > [data-search-status] { order: 32 !important; }
html body form[data-ride-booking][data-ride-step] > .scc-clear-search {
  order: 33 !important;
  inline-size: fit-content;
  min-block-size: 2.75rem;
  color: var(--ride-muted);
  border: 0;
  background: transparent;
  text-decoration: underline;
}
form[data-ride-booking] [hidden],
form[data-ride-booking] .planner-head,
form[data-ride-booking] .studio-overview,
form[data-ride-booking] .studio-section-title,
form[data-ride-booking] :is(.studio-hint, .route-field-help, .detail-grid-help, .search-note),
form[data-ride-booking] [id="pickup-advance-note"],
html body form[data-ride-booking][data-ride-step="route"] :is(.ride-details-only, .studio-day, .studio-party, .studio-departure,
  .mc-core-fields, .mc-desktop-action, .mc-refinements, .studio-actions, .detail-grid-primary,
  [data-return-fields], [data-p114-preferences-ssr], .journey-options-trigger, .p114-search-options, .search-submit),
html body form[data-ride-booking][data-ride-step="details"] :is(.ride-route-only, .studio-route, .route-fields, .p114-fixed-picker) {
  display: none !important;
}
form[data-ride-booking] :is(.studio-panel,.mc-essentials,.mc-core-fields,.studio-departure,.mc-refinements,.route-fields,.detail-grid-primary) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
form[data-ride-booking] .p114-fixed-picker {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
form[data-ride-booking] .p114-fixed-modes { max-inline-size: 32rem; }
html body form[data-ride-booking] :is(input:not([type=radio],[type=checkbox],[type=hidden]),select) {
  color: var(--ride-ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--ride-line) !important;
  border-radius: .6rem;
  min-block-size: 3rem;
  max-inline-size: 100%;
}
form[data-ride-booking] :is(button,input,select,summary):focus-visible {
  outline: 3px solid var(--ride-accent);
  outline-offset: 3px;
}
form[data-ride-booking] .ride-steps {
  margin: 0;
  padding: .65rem .9rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  color: #fff;
  background: var(--ride-deep);
  border-radius: .6rem;
  scroll-margin-block-start: 7rem;
}
.ride-steps li { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.ride-steps li > span:first-child {
  min-inline-size: 1.5rem;
  block-size: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff9c;
  border-radius: 50%;
}
.ride-steps [aria-current=step] { font-weight: 750; }
.ride-steps [aria-current=step] > span:first-child { background: #fff; color: var(--ride-deep); }
form[data-ride-booking] .ride-heading { color: var(--ride-ink); margin: .2rem 0 0; font-size: clamp(1.25rem, 2.1vw, 1.8rem); line-height: 1.2; }
.ride-heading:focus { outline: none; }
form[data-ride-booking] :is(.studio-panel,.ride-preferences,.search-field,.field,.studio-route-fields,.detail-grid,.studio-day-fields,.studio-party-fields,.studio-actions) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
form[data-ride-booking] :is(.search-field,.studio-actions) :is(input,select,button) { max-inline-size: 100%; }
form[data-ride-booking] .ride-heading + .p114-fixed-picker legend { font-size: .9rem; }
form[data-ride-booking] > [data-search-status]:not(:empty) { grid-row: auto; }
form[data-ride-booking] > [data-search-status]:empty { display: none; }
form[data-ride-booking][data-ride-step="route"] > [data-search-status]:not([aria-live]) { display: none; }
form[data-ride-booking] .ride-trip-summary { color: var(--ride-muted); margin: 0; overflow-wrap: anywhere; font-size: .9rem; }
form[data-ride-booking] .ride-validation { color: #9c1930; margin: 0; min-block-size: 1.3rem; font-size: .9rem; }
form[data-ride-booking] :is([data-ride-step-next], .search-submit) {
  inline-size: fit-content;
  min-inline-size: 11rem;
  min-block-size: 3.2rem;
  padding: .7rem 1.2rem;
  border-radius: .65rem;
  border: 1px solid transparent;
  background: var(--ride-accent) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  box-shadow: none;
}
form[data-ride-booking] [data-ride-step-next]::after { content: ' →'; }
html body form[data-ride-booking] .search-submit {
  position: static !important;
  transform: none !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
  justify-self: start;
  grid-column: 1 / -1 !important;
  white-space: normal;
}
form[data-ride-booking] .studio-actions {
  grid-template-columns: minmax(0,1fr) !important;
}
html body form[data-ride-booking] .studio-actions > :not([hidden]) {
  grid-area: auto !important;
}
html body form[data-ride-booking] .studio-actions > .search-submit {
  order: 20 !important;
}
html body form[data-ride-booking] .mc-desktop-action {
  align-content: start;
  gap: .65rem;
  margin: 0;
  padding: 0;
  min-block-size: 0;
}
html body form[data-ride-booking][data-ride-step="route"] .detail-grid.detail-grid-primary,
html body form[data-ride-booking][data-ride-step="route"] > .search-field:has([name=pickup_date],[name=pickup_time],[name=adults]),
html body form[data-ride-booking][data-ride-step="details"] > [data-scc-google-address-field],
html body form[data-ride-booking][data-ride-step="route"] :is([name=pickup_date],[name=pickup_time],
  .p114cal-host, [data-p114-calendar-feedback-ssr], .p114-booking-short-choice, .search-note,
  label:has(>input[name=pickup_time])) {
  display: none !important;
}
html body form[data-ride-booking][data-ride-step="route"][data-p114-hire-active="1"]
  .studio-actions:has([name=p114_hire_same_pickup]) {
  display: grid !important;
}
html body form[data-ride-booking][data-ride-step="route"][data-p114-hire-active="1"]
  .studio-actions:has([name=p114_hire_same_pickup]) > :not(:has([name=p114_hire_same_pickup])),
html body form[data-ride-booking][data-ride-step="details"]
  .studio-actions > fieldset:has([name=p114_hire_same_pickup]) {
  display: none !important;
}
html body form[data-ride-booking] .mc-essentials {
  display: grid !important;
  grid-template: auto / minmax(0,1fr) !important;
  gap: .9rem;
}
html body form[data-ride-booking] .mc-essentials > :not([hidden]) {
  grid-area: auto !important;
  min-inline-size: 0;
}
html body form[data-ride-booking] .mc-desktop-action,
html body form[data-ride-booking] .studio-actions {
  min-inline-size: 0;
}
form[data-ride-booking] [data-ride-step-back] {
  min-block-size: 2.75rem;
  inline-size: fit-content;
  padding: .35rem .65rem;
  background: transparent;
  color: var(--ride-accent);
  border: 1px solid var(--ride-line);
  border-radius: .5rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
form[data-ride-booking] .ride-preferences { color: var(--ride-muted); max-inline-size: 46rem; }
form[data-ride-booking] .ride-preferences summary { min-block-size: 2.75rem; padding-block: .6rem; cursor: pointer; font-weight: 650; }
form[data-ride-booking] :is(.scc-google-address-status,[data-scc-google-address-status]) { min-block-size: 1.3rem; }
form[data-ride-booking] :is(.journey-options-trigger,.p114-search-options) {
  min-block-size: 2.75rem;
  inline-size: fit-content;
  color: var(--ride-accent);
  background: var(--ride-light);
  border: 1px solid var(--ride-line);
  border-radius: .55rem;
}

html body form[data-ride-booking="HUT"][data-ride-step] {
  --ride-ink: #241e13; --ride-muted: #544939; --ride-line: #9a8b70;
  --ride-paper: #fcfbf4; --ride-accent: #765019; --ride-deep: #322718; --ride-light: #f3ead8;
  border-radius: .5rem;
  border-block-start: .3rem solid #a3894e;
}
form[data-ride-booking="HUT"] .ride-steps { background: transparent; color: var(--ride-ink); padding-inline: 0; border-block-end: 1px solid #cbcbbb; border-radius: 0; }
form[data-ride-booking="HUT"] .ride-steps li > span:first-child { border-color: #536f5e; }
form[data-ride-booking="HUT"] .ride-steps [aria-current=step] > span:first-child { background: var(--ride-accent); color: #fff; }
form[data-ride-booking="HUT"] .ride-heading { font-family: Georgia, serif; font-weight: 600; }
html body form[data-ride-booking="MC"][data-ride-step] {
  --ride-ink: #192b23; --ride-muted: #465c50; --ride-line: #8d9e94;
  --ride-paper: #faf9f2; --ride-accent: #215443; --ride-deep: #16352c; --ride-light: #eaf1ea;
  border-radius: .25rem;
  border-inline-end: .35rem solid #688778;
}
form[data-ride-booking="MC"] .ride-heading { font-family: Georgia, serif; font-weight: 500; }
form[data-ride-booking="MC"] .ride-steps { border-radius: .15rem; }
html body form[data-ride-booking="JC"][data-ride-step] {
  --ride-ink: #132839; --ride-muted: #40596b; --ride-line: #8299a7;
  --ride-accent: #0b5468; --ride-deep: #112d3e; --ride-light: #eaf4f6;
  border-radius: .75rem;
}
form[data-ride-booking="JC"] .ride-steps { border-radius: .35rem; justify-content: space-between; }
form[data-ride-booking="JC"] .ride-steps li > span:first-child { border-radius: .2rem; }

@media (min-width: 66rem) {
  :is(.search-studio, .search-card-hut) form[data-ride-booking] { min-block-size: 24rem; }
  html body .search-studio form[data-ride-booking="PT"][data-ride-step] { grid-template-columns: minmax(8.5rem, 16%) minmax(0,1fr) !important; column-gap: 1.5rem; }
  html body .search-studio form[data-ride-booking="PT"][data-ride-step] > :not(.ride-steps,dialog) { grid-column: 2 !important; }
  html body .search-studio form[data-ride-booking="PT"][data-ride-step] > .ride-steps {
    grid-column: 1 !important; grid-row: 1 / span 9 !important; flex-flow: column; align-self: start; padding: 1.3rem .9rem;
  }
  html body .search-studio form[data-ride-booking="MC"][data-ride-step] { grid-template-columns: minmax(0,1fr) minmax(8.5rem, 17%) !important; column-gap: 1.6rem; }
  html body .search-studio form[data-ride-booking="MC"][data-ride-step] > :not(.ride-steps,dialog) { grid-column: 1 !important; }
  html body .search-studio form[data-ride-booking="MC"][data-ride-step] > .ride-steps {
    grid-column: 2 !important; grid-row: 1 / span 9 !important; flex-flow: column; align-self: start; margin-block-start: .2rem;
  }
  form[data-ride-booking="JC"] .ride-steps { inline-size: min(100%,28rem); }
  html body form[data-ride-booking="JC"] .studio-route-fields {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 1rem;
  }
  html body form[data-ride-booking="JC"] .studio-route-fields > * {
    grid-column: auto !important;
  }
}
html body form[data-ride-booking="MC"][data-ride-step="details"] .mc-suggestions { display: none !important; }
@media (max-width: 42rem) {
  html body form[data-ride-booking] { grid-template-columns: minmax(0,1fr) !important; }
  form[data-ride-booking] :is(.route-fields,.studio-route-fields,.mc-core-fields,.studio-departure,.studio-actions) {
    grid-template-columns: minmax(0,1fr) !important;
    column-gap: .5rem;
  }
  html body form[data-ride-booking] :is([data-ride-step-next],.search-submit) {
    inline-size: 100% !important;
    min-inline-size: 0;
  }
  form[data-ride-booking] :is(input:not([type=radio],[type=checkbox],[type=hidden]),select) { font-size: 1rem; }
  form[data-ride-booking] .ride-steps { scroll-margin-block-start: 5.5rem; }
}