.rider-map-layout { isolation: isolate; }
.ride-sheet { color: var(--rider-ink); }
.ride-sheet > h1 { max-width: 12ch; margin-bottom: 10px; }
.ride-quick-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.ride-quick-row button { display: grid; min-height: 66px; place-items: center; align-content: center; gap: 4px; padding: 7px; border: 1px solid var(--rider-line); border-radius: 16px; color: var(--rider-ink); background: white; font-size: 11px; font-weight: 800; }
.ride-quick-row button:hover { border-color: rgba(0, 166, 147, .3); background: #f8fdfc; }
.ride-quick-row button:focus-visible { outline: 3px solid rgba(0, 166, 147, .2); outline-offset: 2px; }
.ride-quick-row .rider-icon { width: 20px; height: 20px; color: var(--rider-turquoise); }
.ride-quick-row #ride-airport-shortcut { border-color: rgba(0, 166, 147, .2); background: var(--rider-mint); }
.ride-stage { margin: 16px 0; padding: 20px; border: 1px solid rgba(0, 166, 147, .2); border-radius: 20px; background: linear-gradient(145deg, #ecfaf7, #fff); }
.ride-stage h2 { margin-bottom: 7px; }
.ride-stage p:last-child { margin: 0; color: var(--rider-muted); font-size: 13px; }
.ride-safety-shortcut { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; width: 100%; min-height: 66px; margin-top: 16px; padding: 12px; border: 1px solid var(--rider-line); border-radius: 18px; color: var(--rider-ink); background: rgba(255, 255, 255, .82); text-align: left; }
.ride-safety-shortcut > .rider-icon { width: 24px; height: 24px; margin: auto; color: var(--rider-green); }
.ride-safety-shortcut strong, .ride-safety-shortcut small { display: block; }
.ride-safety-shortcut small { margin-top: 3px; color: var(--rider-muted); }
.ride-stage-background > :not(#ride-booking-stage) { opacity: .78; }
@media (max-width: 767px) {
  .ride-sheet { bottom: calc(82px + env(safe-area-inset-bottom)); max-height: min(67dvh, 720px); border-radius: 30px 30px 0 0; }
  .ride-sheet > .eyebrow { margin-top: 4px; }
  .ride-sheet > h1 { font-size: 36px; }
}
@media (min-width: 900px) {
  .rider-map-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .6fr); gap: 20px; min-height: calc(100vh - 190px); }
  .rider-map-layout .rider-unified-map { min-height: 690px; }
  .rider-map-layout .ride-sheet { max-height: 760px; padding: 28px; overflow-y: auto; }
}