/* Stable light booking form. Loaded last so old dark-card rules cannot leak into it. */
body.taxi-home .order-card {
  color: #111820 !important;
  border: 1px solid rgba(17, 24, 32, .09) !important;
  background: rgba(255, 255, 255, .94) !important;
  background-image: none !important;
  box-shadow: 0 28px 70px rgba(17, 24, 32, .18), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(22px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(115%) !important;
}

html body.taxi-home #time_input[hidden] {
  display: none !important;
}

/* Desktop map selection: keep the MapLibre canvas reachable by a mouse or
   trackpad even when older responsive styles disable the resting map. */
@media (min-width: 761px) {
  html body.taxi-home .hero .hero-live-map,
  html body.taxi-home .hero .hero-live-map:not(.is-picking),
  html body.taxi-home .hero .hero-live-map #heroRouteMap,
  html body.taxi-home .hero .hero-live-map .maplibregl-map,
  html body.taxi-home .hero .hero-live-map .maplibregl-canvas-container,
  html body.taxi-home .hero .hero-live-map .maplibregl-canvas,
  html body.taxi-home .hero .hero-live-map.is-picking,
  html body.taxi-home .hero .hero-live-map.is-picking #heroRouteMap,
  html body.taxi-home .hero .hero-live-map.is-picking .maplibregl-map,
  html body.taxi-home .hero .hero-live-map.is-picking .maplibregl-canvas-container,
  html body.taxi-home .hero .hero-live-map.is-picking .maplibregl-canvas {
    pointer-events: auto !important;
  }

  html body.taxi-home .hero .hero-live-map.is-picking #heroRouteMap,
  html body.taxi-home .hero .hero-live-map.is-picking .maplibregl-canvas {
    cursor: grab !important;
    touch-action: none !important;
  }

  html body.taxi-home .hero .hero-live-map.is-picking #heroRouteMap:active,
  html body.taxi-home .hero .hero-live-map.is-picking .maplibregl-canvas:active {
    cursor: grabbing !important;
  }
}

/* The first step is always a light form, including the narrow/mobile layout. */
html body.taxi-home .hero .order-card:has(#step1.active),
html body.taxi-home .hero .hero-live-map.is-picking ~ .order-card:has(#step1.active) {
  color: #111820 !important;
  border-color: rgba(17, 24, 32, .09) !important;
  background: rgba(255, 255, 255, .97) !important;
  background-image: none !important;
  box-shadow: 0 28px 70px rgba(17, 24, 32, .18), inset 0 1px 0 #fff !important;
}

body.taxi-home .order-card h2,
body.taxi-home .order-card h3,
body.taxi-home .order-card h4,
body.taxi-home .order-card .order-card-heading h2 {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

html body.taxi-home .hero .order-card:has(#step1.active) .order-card-heading h2 {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

body.taxi-home .order-card .order-card-sub,
body.taxi-home .order-card .form-status,
body.taxi-home .order-card small {
  color: #68717d !important;
}

body.taxi-home .order-card #step1 .route-panel {
  padding: 8px 10px 8px 34px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 20px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 10px 30px rgba(17, 24, 32, .07), inset 0 1px 0 #fff !important;
  color: #111820 !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel {
  color: #111820 !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel::before,
html body.taxi-home .hero .order-card #step1 .taxi-route-rail {
  display: none !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel .route-group {
  position: relative !important;
  margin: 0 0 9px !important;
  padding: 0 14px 0 46px !important;
  overflow: visible !important;
  border: 1px solid #dce1e6 !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(17, 24, 32, .055) !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel .route-group::before {
  left: 14px !important;
  top: 19px !important;
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  border-width: 3px !important;
  background: #fff !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel .route-divider {
  height: 32px !important;
  margin: -5px 18px 4px !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel .route-divider .route-line {
  background: #e1e5e9 !important;
}

body.taxi-home .order-card #step1 .route-panel .field {
  color: #111820 !important;
  background: transparent !important;
}

body.taxi-home .order-card #step1 .route-panel .route-group .field + .field {
  border-top-color: #e5e8ec !important;
}

body.taxi-home .order-card #step1 .field-content label,
body.taxi-home .order-card #step1 .taxi-house-field label {
  color: #6d7580 !important;
  -webkit-text-fill-color: #6d7580 !important;
}

body.taxi-home .order-card #step1 .field-content input,
body.taxi-home .order-card #step1 .field-content select,
body.taxi-home .order-card #step1 .taxi-house-field input {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  caret-color: #111820 !important;
}

html body.taxi-home .hero .order-card #step1 .field-content input,
html body.taxi-home .hero .order-card #step1 .field-content select {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

html body.taxi-home .hero .order-card #step1 .route-panel .route-group > .field:first-child select,
html body.taxi-home .hero .order-card #step1 .route-panel .route-group > .field:first-child select:invalid {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  opacity: 1 !important;
}

body.taxi-home .order-card #step1 input::placeholder {
  color: #9299a2 !important;
  -webkit-text-fill-color: #9299a2 !important;
  opacity: 1 !important;
}

body.taxi-home .order-card #step1 select option {
  color: #111820 !important;
  background: #fff !important;
}

body.taxi-home .order-card #step1 .taxi-pick-map-btn,
body.taxi-home .order-card #step1 .web-add-stop {
  border-color: #d9dee4 !important;
  background: #f4f6f8 !important;
  color: #111820 !important;
  box-shadow: none !important;
}

body.taxi-home .order-card #step1 .taxi-pick-map-btn:hover,
body.taxi-home .order-card #step1 .web-add-stop:hover {
  border-color: #c6cdd5 !important;
  background: #eceff3 !important;
}

body.taxi-home .order-card #step1 .order-quick-options button {
  border: 1px solid #d9dee4 !important;
  background: #f4f6f8 !important;
  color: #111820 !important;
  box-shadow: none !important;
}

body.taxi-home .order-card #step1 .order-quick-options button:hover {
  background: #eceff3 !important;
}

html body.taxi-home .hero .order-card #step1 .order-quick-options button strong,
html body.taxi-home .hero .order-card #step1 .order-quick-options button .quick-option-icon,
html body.taxi-home .hero .order-card #step1 .order-quick-options button .quick-chevron {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  opacity: 1 !important;
}

html body.taxi-home .hero .order-card #step1 .order-quick-options button:disabled {
  opacity: .72 !important;
}

html body.taxi-home .hero .order-card #step1 .order-quick-options button:disabled strong,
html body.taxi-home .hero .order-card #step1 .order-quick-options button:disabled .quick-option-icon,
html body.taxi-home .hero .order-card #step1 .order-quick-options button:disabled .quick-chevron {
  color: #56616d !important;
  -webkit-text-fill-color: #56616d !important;
}

body.taxi-home .order-card #step1 .quick-option-panel,
body.taxi-home .order-card #step1 .quick-order-option-panel,
body.taxi-home .order-card #step1 .quick-option-list {
  color: #111820 !important;
  background: #fff !important;
}

body.taxi-home .order-card #step1 .quick-option-list button {
  color: #111820 !important;
  background: #f7f8fa !important;
  border-color: #e1e5e9 !important;
}

body.taxi-home .order-card #step1 .web-quote-preview {
  border-color: rgba(203, 151, 0, .28) !important;
  background: #fff8df !important;
  color: #111820 !important;
}

body.taxi-home .order-card #step1 .web-quote-copy span,
body.taxi-home .order-card #step1 .web-quote-copy small {
  color: #6d7580 !important;
}

body.taxi-home .order-card #step1 .web-quote-copy strong,
body.taxi-home .order-card #step1 .btn-next {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

body.taxi-home .order-card #step1 .btn-next:disabled {
  opacity: .62 !important;
}

@media (max-width: 620px) {
  body.taxi-home .order-card {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 18px 44px rgba(17, 24, 32, .14), inset 0 1px 0 #fff !important;
  }
}