:root {
  --ink: #0F4C5C;
  --ink-2: #5B7B8A;
  --accent: #E67E22;
  --accent-2: #F9F6EE;
  --paper: #F8F6F3;
  --card: rgba(255, 255, 255, 0.94);
  --soft: #E5E0D8;
  --muted: #7A8B8B;
  --line: #E5E0D8;
  --danger: #D9534F;
  --shadow: 0 24px 70px rgba(16, 36, 63, 0.18);
  --radius: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: linear-gradient(135deg, #f6f0e4 0%, #eef4f7 100%); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.page-shell { min-height: 100vh; overflow: hidden; }
.app-frame, .map-stage { position: relative; width: 100vw; height: 100vh; }
.map-canvas { width: 100%; height: 100%; background: #dfe6ec; }
.floating-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(18px); }

.top-bar {
  position: absolute; top: 24px; left: 24px; right: 24px; z-index: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
}
.top-copy { min-width: 0; width: min(720px, calc(100vw - 260px)); }
.eyebrow { margin: 0 0 8px; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 850; }
.pickup-display {
  width: 100%; min-height: 58px; display: flex; align-items: center; gap: 13px; text-align: left;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.86); color: var(--ink);
  padding: 11px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.pickup-display:hover { border-color: rgba(201, 162, 77, .65); }
.pickup-display-copy { min-width: 0; display: block; }
.pickup-display-copy strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(16px, 2vw, 21px); line-height: 1.15; font-weight: 950; letter-spacing: -0.02em; }
.pickup-display-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
.pickup-editor { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.88); }
.pickup-search-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 8px; align-items: center; }
.pickup-search-row.compact { grid-template-columns: minmax(260px, 1fr) auto auto; }
.pickup-input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); padding: 0 13px; outline: none; font-weight: 750; }
.pickup-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.18); }
.mini-btn { min-height: 46px; border: 0; border-radius: 15px; padding: 0 14px; background: var(--ink); color: #fff; font-weight: 900; white-space: nowrap; }
.mini-btn-light { background: #eef2f6; color: var(--ink); border: 1px solid var(--line); }
.mini-btn-danger { background: #fff1f0; color: var(--danger); border: 1px solid rgba(180,35,24,.24); }
.saved-payment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pickup-help { display: block; min-height: 17px; margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-location { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 13px; font-weight: 750; }
.current-location strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 900; }
.location-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(201,162,77,.16); flex: 0 0 auto; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(24px, 4vw, 38px); line-height: 1.05; letter-spacing: -0.04em; }
h2 { margin-bottom: 8px; letter-spacing: -0.03em; }
.muted { color: var(--muted); margin-bottom: 0; }
.status-pill, .timer-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 9px 14px; background: var(--ink); color: white; font-size: 13px; font-weight: 800; white-space: nowrap; }
.timer-pill { background: var(--accent); color: var(--ink); min-width: 58px; }

.booking-panel {
  position: absolute; z-index: 650; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 28px)); padding: 18px;
}
.panel-step { display: none; }
.panel-step.active { display: block; }
.field-label { display: block; font-size: 14px; font-weight: 850; margin: 0 0 8px; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.text-input, .select-input, .pricing-form input {
  width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 18px;
  background: #fff; color: var(--ink); padding: 0 16px; outline: none; font-weight: 650;
}
.text-input:focus, .select-input:focus, .pricing-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.18); }

.btn { border: 0; border-radius: 18px; min-height: 54px; padding: 0 18px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--ink), var(--ink-2)); color: white; box-shadow: 0 14px 34px rgba(16, 36, 63, .22); }
.btn-secondary { background: var(--accent); color: var(--ink); }
.btn-ghost { background: #eef2f6; color: var(--ink); border: 1px solid var(--line); }
.btn-large { width: 100%; margin-top: 14px; font-size: 18px; min-height: 62px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.location-info { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 18px; background: #fbfcfd; padding: 11px 13px; }
.location-info strong { display: block; color: var(--ink); font-weight: 950; margin-bottom: 4px; }
.location-info span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; font-weight: 700; }

.ride-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.ride-type-card { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 20px; padding: 14px; min-height: 78px; text-align: left; }
.ride-type-card strong, .ride-type-card span { display: block; }
.ride-type-card strong { font-size: 16px; margin-bottom: 4px; }
.ride-type-card span { color: var(--muted); font-size: 13px; }
.ride-type-card.active { border-color: rgba(201, 162, 77, .7); background: linear-gradient(135deg, rgba(201, 162, 77, .18), rgba(255,255,255,.98)); box-shadow: inset 0 0 0 2px rgba(201, 162, 77, .16); }

.estimate-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink); color: white; border-radius: 22px; padding: 16px; margin: 10px 0; }
.estimate-card .muted { color: rgba(255,255,255,.7); }
.estimate-card h2 { margin: 0; font-size: 34px; }
.mini-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mini-stats span { background: rgba(255,255,255,.13); border-radius: 999px; padding: 8px 10px; font-weight: 800; }
.payment-line { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 10px; }
.payment-line label { font-weight: 850; }
.message-line { min-height: 22px; color: var(--muted); margin: 12px 0 0; font-size: 14px; }
.simple-status { display: flex; gap: 16px; align-items: center; }
.pulse-dot { width: 18px; height: 18px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 10px rgba(201,162,77,.18); animation: pulse 1.5s infinite; flex: 0 0 auto; }
@keyframes pulse { 0%, 100% { transform: scale(.96); opacity: .9; } 50% { transform: scale(1.1); opacity: 1; } }
.driver-summary { margin-top: 14px; border: 1px solid var(--line); border-radius: 20px; padding: 14px; background: #fff; }
.hidden { display: none !important; }

.driver-layout { display: grid; grid-template-columns: minmax(360px, 460px) 1fr; height: 100vh; gap: 18px; padding: 18px; }
.driver-panel { padding: 20px; overflow-y: auto; }
.driver-map-wrap { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.driver-header, .admin-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.status-toggle { border: 0; border-radius: 999px; min-height: 48px; padding: 0 18px; font-weight: 900; }
.status-toggle.online { background: var(--ink); color: white; }
.status-toggle.offline { background: #e7e8eb; color: var(--muted); }
.empty-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 24px; padding: 26px; }
.empty-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 950; font-size: 26px; margin-bottom: 14px; }
.offer-card { border: 1px solid var(--line); border-radius: 24px; padding: 18px; background: #fff; }
.offer-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.info-grid div { border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: #fbfcfd; }
.info-grid span, .payout-box span { display: block; font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.info-grid strong { display: block; margin-top: 5px; font-size: 18px; }
.payout-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--ink), var(--ink-2)); color: white; border-radius: 20px; padding: 16px; margin-top: 12px; }
.payout-box span { color: rgba(255,255,255,.7); }
.payout-box strong { font-size: 28px; }
.payout-box.compact strong { font-size: 22px; }
.button-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; }

.admin-page { display: grid; place-items: center; padding: 22px; overflow: auto; }
.admin-shell { width: min(940px, 100%); padding: 24px; }
.pricing-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pricing-form label { font-size: 14px; font-weight: 850; color: var(--ink); }
.pricing-form input { margin-top: 8px; }
.pricing-form .btn, .pricing-form .message-line { grid-column: 1 / -1; }

.map-marker { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 950; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(16,36,63,.22); }
.marker-driver { background: var(--ink); }
.marker-pickup { background: var(--accent); color: var(--ink); }
.marker-current { background: var(--primary); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(16,36,63,.18), 0 14px 28px rgba(16,36,63,.18); }
.marker-destination { background: #6b5430; }
.marker-car { background: var(--ink-2); }
.leaflet-tooltip.orbit-tooltip { border: 0; border-radius: 999px; background: var(--ink); color: white; font-weight: 900; padding: 8px 12px; box-shadow: 0 10px 25px rgba(16,36,63,.22); }

@media (max-width: 860px) {
  html, body { min-height: 100%; }
  .page-shell { overflow: auto; }
  .app-frame, .map-stage { width: 100%; height: auto; min-height: 100vh; display: flex; flex-direction: column; }
  .top-bar {
    position: relative; order: 1; top: auto; left: auto; right: auto; z-index: 20;
    margin: 12px 12px 10px; padding: 14px 16px; border-radius: 22px;
    align-items: flex-start;
  }
  .status-pill { margin-top: 2px; padding: 8px 11px; font-size: 12px; }
  h1 { font-size: 25px; }
  .top-copy { width: 100%; }
  .pickup-display { min-height: 54px; border-radius: 18px; padding: 10px 12px; }
  .pickup-display-copy strong { font-size: 16px; white-space: normal; }
  .pickup-display-copy small { font-size: 11px; }
  .pickup-editor { width: 100%; margin-top: 8px; padding: 9px; border-radius: 18px; }
  .pickup-search-row, .pickup-search-row.compact { grid-template-columns: 1fr; }
  .pickup-input, .mini-btn { min-height: 46px; border-radius: 14px; }
  .pickup-help { white-space: normal; }
  .current-location { width: 100%; max-width: calc(100vw - 104px); margin-top: 8px; font-size: 12px; padding: 7px 9px; }
  .map-canvas {
    order: 2; width: calc(100% - 24px); height: 42vh; min-height: 290px;
    margin: 0 12px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .booking-panel {
    position: relative; order: 3; left: auto; bottom: auto; transform: none; z-index: 10;
    width: auto; margin: 12px; padding: 14px; border-radius: 24px; max-height: none; overflow: visible;
  }
  .ride-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ride-type-card { min-height: 68px; padding: 10px; border-radius: 16px; }
  .ride-type-card strong { font-size: 14px; }
  .ride-type-card span { font-size: 11px; line-height: 1.25; }
  .input-row { grid-template-columns: 1fr; }
  .payment-line { grid-template-columns: 1fr; gap: 8px; }
  .estimate-card { align-items: flex-start; flex-direction: column; }
  .btn-large { min-height: 58px; }
  .driver-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; height: auto; min-height: 100vh; }
  .driver-map-wrap { min-height: 420px; }
  .pricing-form { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .top-bar { flex-direction: column; gap: 10px; }
  .status-pill { align-self: flex-start; }
  .pickup-editor, .pickup-display, .current-location { max-width: 100%; }
  .ride-type-grid { grid-template-columns: 1fr; }
}

.header-actions, .driver-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mini-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 900; font-size: 13px; }
.gps-box { border: 1px solid var(--line); border-radius: 22px; padding: 14px; background: #fbfcfd; margin-bottom: 14px; }
.gps-box strong { display: block; margin-bottom: 4px; }
.gps-box .btn { min-height: 44px; width: 100%; margin-top: 10px; }
.wait-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.wait-box div { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #fbfcfd; }
.wait-box span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.wait-box strong { display: block; margin-top: 5px; font-size: 18px; }
.steps-list { margin-top: 12px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.step-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.step-row:last-child { border-bottom: 0; }
.step-row span { width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 950; font-size: 12px; }
.step-row strong { font-size: 13px; line-height: 1.25; }
.step-row em { font-style: normal; color: var(--muted); font-weight: 850; font-size: 12px; }
.trip-actions { grid-template-columns: 1fr 1fr; }
.auth-page { display: grid; place-items: center; padding: 24px; overflow: auto; }
.auth-card { width: min(520px, 100%); padding: 28px; }
.auth-form { display: grid; gap: 13px; margin-top: 18px; }
.auth-form label { font-weight: 850; color: var(--ink); }
.auth-form input, .auth-form select { margin-top: 7px; }
.auth-error { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(163,58,58,.1); color: var(--danger); font-weight: 850; border: 1px solid rgba(163,58,58,.18); }
.auth-card a { color: var(--ink); font-weight: 900; }

@media (max-width: 860px) {
  .header-actions { align-items: flex-start; }
  .driver-actions { justify-content: flex-start; }
  .wait-box { grid-template-columns: 1fr; }
  .trip-actions { grid-template-columns: 1fr; }
  .steps-list { max-height: 180px; overflow: auto; }
  .auth-card { padding: 20px; }
}

/* Customer menu + destination dropdown refinements */
.hamburger-btn {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
  margin: 2px 0;
}
.customer-menu {
  position: absolute;
  top: 84px;
  left: 22px;
  z-index: 900;
  width: min(300px, calc(100vw - 44px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 60px rgba(16,36,63,.20);
  backdrop-filter: blur(18px);
}
.customer-menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
}
.customer-menu a:hover { background: rgba(201,162,77,.16); }
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: transparent;
}
.destination-field { position: relative; }
.destination-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 850;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 45px rgba(16,36,63,.16);
  backdrop-filter: blur(18px);
  max-height: 260px;
  overflow-y: auto;
}
.destination-option {
  width: 100%;
  min-height: 54px;
  display: block;
  text-align: left;
  border: 0;
  border-radius: 15px;
  background: transparent;
  padding: 10px 12px;
  color: var(--ink);
}
.destination-option:hover,
.destination-option:focus { background: rgba(201,162,77,.16); outline: none; }
.destination-option strong,
.destination-option span { display: block; }
.destination-option strong { font-size: 14px; font-weight: 950; margin-bottom: 2px; }
.destination-option span { font-size: 12px; line-height: 1.35; color: var(--muted); font-weight: 750; }
.destination-option.typed strong { color: var(--ink); }
.destination-option.typed { background: rgba(16,36,63,.05); }
.simple-page { min-height: 100vh; overflow: auto; padding: 24px; display: grid; place-items: start center; }
.simple-shell { width: min(760px, 100%); padding: 24px; }
.simple-list { display: grid; gap: 12px; margin-top: 18px; }
.simple-list article { border: 1px solid var(--line); border-radius: 20px; padding: 16px; background: #fff; }
.simple-list strong { display: block; margin-bottom: 6px; }

@media (max-width: 860px) {
  .top-bar { gap: 10px; }
  .hamburger-btn { width: 46px; height: 46px; border-radius: 16px; }
  .customer-menu { top: 72px; left: 14px; }
  .destination-dropdown { position: relative; top: auto; margin-top: 8px; max-height: 220px; }
}

@media (max-width: 390px) {
  .top-bar { flex-direction: row; align-items: flex-start; }
  .header-actions { width: auto; margin-left: auto; }
}

/* Payment method flow */
.payment-selector-block { align-items: start; }
.payment-select-wrap { display: grid; gap: 6px; }
.payment-help { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.35; }
.payment-manage-link { color: var(--ink); font-size: 13px; font-weight: 900; text-decoration: none; }
.payment-manage-link:hover { text-decoration: underline; }
.simple-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.payment-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.payment-card-area, .payment-add-area { border: 1px solid var(--line); border-radius: 24px; padding: 18px; background: rgba(255,255,255,.78); }
.saved-payments { display: grid; gap: 12px; }
.saved-payment-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 20px; padding: 14px; background: #fff; }
.saved-payment-card.default { border-color: rgba(201,162,77,.72); box-shadow: inset 0 0 0 2px rgba(201,162,77,.16); }
.saved-payment-card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.saved-payment-card p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.payment-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 14px; }
.payment-tab { min-height: 46px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font-weight: 900; }
.payment-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.payment-form { display: grid; gap: 12px; }
.payment-form label { display: block; font-weight: 850; }
.payment-form label input { margin-top: 7px; }
.payment-fields { display: grid; gap: 12px; }
.two-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.small-copy { font-size: 13px; line-height: 1.45; }

@media (max-width: 760px) {
  .simple-header-row { flex-direction: column; }
  .payment-page-grid { grid-template-columns: 1fr; }
  .saved-payment-card { align-items: stretch; flex-direction: column; }
  .payment-tabs { grid-template-columns: 1fr; }
  .two-field-row { grid-template-columns: 1fr; }
}

/* Multi-stop booking form */
.route-form { display: grid; gap: 9px; }
.location-field { position: relative; }
.location-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 900;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 45px rgba(16,36,63,.16);
  backdrop-filter: blur(18px);
  max-height: 260px;
  overflow-y: auto;
}
.stops-container { display: grid; gap: 9px; }
.stop-row {
  border-left: 3px solid rgba(201,162,77,.75);
  padding-left: 10px;
}
.add-stop-btn {
  min-height: 44px;
  border: 1px dashed rgba(16,36,63,.24);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-weight: 950;
  text-align: center;
}
.add-stop-btn:hover { background: rgba(201,162,77,.14); border-color: rgba(201,162,77,.7); }
.stop-input-row { grid-template-columns: 1fr auto; }
.remove-stop-btn { min-height: 54px; }
.marker-stop { background: var(--accent); color: var(--ink); border-color: rgba(16,36,63,.24); }

@media (max-width: 860px) {
  .location-dropdown { position: relative; top: auto; margin-top: 8px; max-height: 220px; }
  .stop-input-row { grid-template-columns: 1fr; }
}
.booking-panel { max-height: calc(100vh - 178px); overflow-y: auto; }
@media (max-width: 860px) { .booking-panel { max-height: none; overflow: visible; } }
.success-text { color: #0e766e !important; }
.warning-text { color: #b7791f !important; }
.error-text { color: #b42318 !important; }
.gps-box .btn:disabled { opacity: .75; cursor: not-allowed; }

/* More reliable selectable address dropdowns */
.destination-option { cursor: pointer; touch-action: manipulation; }
.destination-option.is-selecting { opacity: .72; }
.selected-location-input { border-color: rgba(14,118,110,.58) !important; box-shadow: 0 0 0 4px rgba(14,118,110,.10) !important; }

/* Live payment provider UI */
.provider-notice {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.07);
  color: #7a271a;
  font-weight: 700;
}
.payment-live-panel {
  margin-top: 16px;
}
.payment-live-panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink, #122236);
}
.stripe-card-box {
  margin: 8px 0 14px;
  padding: 15px 14px;
  min-height: 48px;
  border: 1px solid rgba(18, 34, 54, 0.16);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stripe accept-a-payment modal */
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 18px;
}
.payment-modal.hidden { display: none; }
.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 38, 0.62);
  backdrop-filter: blur(6px);
}
.payment-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(10, 22, 36, 0.35);
  border: 1px solid rgba(255,255,255,0.7);
}
.payment-modal-card h2 { margin: 2px 0 8px; color: var(--ink, #122236); }
.modal-close-btn {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(18,34,54,.08);
  color: var(--ink, #122236);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.stripe-payment-box {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(18,34,54,0.12);
  border-radius: 18px;
  background: rgba(246,248,251,.86);
}
@media (max-width: 640px) {
  .payment-modal { align-items: end; padding: 0; }
  .payment-modal-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 26px 26px 0 0;
    padding: 22px 18px;
  }
}

/* Victoria driver-partner document verification */
.wide-auth-card { width: min(880px, 100%); }
.compliance-form { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: #fbfcfd; }
.compliance-head { margin-bottom: 14px; }
.compliance-head h2 { margin-bottom: 4px; }
.compliance-head p { margin-bottom: 0; color: var(--muted); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.document-upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.document-upload-grid label { display: block; border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: #fff; font-weight: 900; }
.document-upload-grid small { display: block; color: var(--muted); margin: 5px 0 10px; font-weight: 700; line-height: 1.35; }
.document-upload-grid input[type="file"] { width: 100%; min-height: 42px; border: 1px dashed var(--line); border-radius: 14px; padding: 8px; background: #fbfcfd; }
.optional-doc { opacity: .72; }
.optional-doc::after { content: "Optional unless applicable"; display: inline-flex; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.approval-banner { display: grid; gap: 6px; margin: 16px 0; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.approval-banner strong { font-size: 16px; }
.approval-banner span { color: var(--muted); font-weight: 700; line-height: 1.35; }
.approval-banner.approved { border-color: rgba(14,118,110,.25); background: rgba(14,118,110,.08); }
.approval-banner.rejected { border-color: rgba(163,58,58,.25); background: rgba(163,58,58,.08); }
.compliance-only-shell { margin: 28px auto; }
.single-action-row { grid-template-columns: 1fr 1fr; }
.approval-mini { margin-bottom: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(14,118,110,.08); border: 1px solid rgba(14,118,110,.18); font-weight: 900; }
.document-list { margin-top: 18px; border: 1px solid var(--line); border-radius: 22px; padding: 14px; background: #fff; }
.document-list h2 { font-size: 18px; margin-bottom: 10px; }
.document-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 900; }
.document-list a:first-of-type { border-top: 0; }
.document-list a span { color: var(--muted); font-weight: 700; text-align: right; }
.admin-driver-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.compact-admin-header { margin-top: 0; }
.driver-approval-list { display: grid; gap: 14px; }
.admin-driver-card { border: 1px solid var(--line); border-radius: 24px; background: #fff; padding: 16px; }
.admin-driver-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-driver-top h2 { margin-bottom: 4px; }
.admin-status-pill { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: #eef2f6; color: var(--ink); font-weight: 950; text-transform: capitalize; white-space: nowrap; }
.admin-status-pill.approved { background: rgba(14,118,110,.1); color: #0e766e; }
.admin-status-pill.rejected { background: rgba(163,58,58,.1); color: var(--danger); }
.admin-status-pill.pending_review { background: rgba(201,162,77,.18); color: var(--ink); }
.admin-driver-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.admin-driver-meta span { background: #fbfcfd; border: 1px solid var(--line); border-radius: 14px; padding: 9px 10px; color: var(--muted); font-weight: 800; font-size: 13px; }
.admin-doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.admin-doc-link { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fbfcfd; color: var(--ink); text-decoration: none; }
.admin-doc-link strong { font-size: 13px; }
.admin-doc-link span { color: var(--muted); font-size: 12px; font-weight: 750; word-break: break-word; }
.admin-driver-actions { grid-template-columns: 1fr 1fr; }
.compact-empty { min-height: 180px; }
.success-text { color: #0e766e !important; }
.warning-text { color: #946600 !important; }
.error-text { color: var(--danger) !important; }

@media (max-width: 860px) {
  .form-grid-2, .document-upload-grid, .admin-driver-meta, .admin-doc-grid, .single-action-row { grid-template-columns: 1fr; }
  .admin-driver-top { flex-direction: column; }
  .document-list a { flex-direction: column; }
  .document-list a span { text-align: left; }
}

/* Professional admin console */
.admin-console-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background:
    radial-gradient(circle at 10% 0%, rgba(201,162,77,.16), transparent 28%),
    linear-gradient(135deg, #f7f3eb 0%, #edf4f7 100%);
  overflow: auto;
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  background: rgba(16,36,63,.96);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 18px 0 50px rgba(16,36,63,.16);
}
.admin-brand-block { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand-mark { width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 950; font-size: 22px; }
.admin-brand-block strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.admin-brand-block span { color: rgba(255,255,255,.68); font-size: 13px; font-weight: 800; }
.admin-nav { display: grid; gap: 8px; }
.admin-nav-item {
  width: 100%; min-height: 48px; border: 1px solid transparent; border-radius: 16px; background: transparent;
  color: rgba(255,255,255,.78); text-align: left; padding: 0 14px; font-weight: 900;
}
.admin-nav-item:hover, .admin-nav-item.active { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.13); }
.admin-nav-item.super-only { color: #ffe6a4; }
.admin-user-card { margin-top: auto; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.1); display: grid; gap: 6px; }
.admin-user-card span { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 800; }
.admin-user-card strong { color: #fff; }
.admin-user-card a { color: var(--accent-2); font-weight: 900; text-decoration: none; }
.admin-console-main { padding: 28px; min-width: 0; }
.admin-console-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.admin-tab { display: none; }
.admin-tab.active { display: block; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.admin-stat-card, .admin-panel-card, #customers, #applications, #drivers, #archive, #pricing {
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 18px 50px rgba(16,36,63,.09);
}
.admin-stat-card { padding: 18px; display: grid; gap: 6px; }
.admin-stat-card span { color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.admin-stat-card strong { font-size: 34px; letter-spacing: -.04em; }
.admin-stat-card small { color: var(--muted); font-weight: 750; }
.admin-two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: 16px; }
.admin-panel-card { padding: 18px; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.panel-title-row h2 { margin-bottom: 5px; }
#customers, #applications, #drivers, #archive, #pricing { padding: 20px; }
.admin-search-input { min-height: 48px; width: min(340px, 100%); border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; background: #fff; outline: none; font-weight: 800; }
.admin-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201,162,77,.14); }
.admin-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.admin-table th { text-align: left; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 16px; background: #f7f9fb; }
.admin-table td { padding: 15px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table td span { color: var(--muted); font-size: 13px; font-weight: 750; }
.table-empty { text-align: center; color: var(--muted); font-weight: 850; padding: 28px !important; }
.admin-mini-btn { min-height: 38px; border: 0; border-radius: 12px; padding: 0 12px; color: #fff; background: var(--ink); font-weight: 900; }
.admin-mini-btn.danger { background: var(--danger); }
.admin-mini-btn.restore { background: #0e766e; }
.permission-list { display: grid; gap: 10px; margin-top: 14px; }
.permission-list span { padding: 12px 14px; border-radius: 16px; background: #f7f9fb; border: 1px solid var(--line); font-weight: 850; }
.role-badge { min-height: 38px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 14px; background: var(--accent); color: var(--ink); font-weight: 950; }
.driver-pill-stack { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-status-pill.active { background: rgba(14,118,110,.11); color: #0e766e; }
.admin-status-pill.suspended { background: rgba(163,58,58,.1); color: var(--danger); }
.admin-driver-card { margin-bottom: 12px; }
.btn.danger-outline { color: var(--danger); border-color: rgba(163,58,58,.25); background: rgba(163,58,58,.06); }
.admin-console-page .pricing-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-console-page .pricing-form .btn-large, .admin-console-page .pricing-form .message-line { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .admin-console-page { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; }
  .admin-nav { grid-template-columns: repeat(2, 1fr); }
  .admin-console-header, .panel-title-row { flex-direction: column; }
  .admin-stats-grid, .admin-two-column, .admin-console-page .pricing-form { grid-template-columns: 1fr; }
  .admin-console-main { padding: 16px; }
}
@media (max-width: 560px) {
  .admin-nav { grid-template-columns: 1fr; }
  .admin-sidebar { padding: 16px; }
  .admin-console-main { padding: 12px; }
}

.current-map-display { cursor: default; }
.current-map-display:hover { border-color: rgba(16,36,63,.12); transform: none; }

/* Active trip driver details */
.current-trip-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.current-trip-details div {
  background: rgba(16, 36, 63, 0.06);
  border: 1px solid rgba(16, 36, 63, 0.10);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 0;
}
.current-trip-details span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #667085;
  margin-bottom: 5px;
}
.current-trip-details strong {
  display: block;
  color: #10243f;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .current-trip-details { grid-template-columns: 1fr; }
}

/* Driver queued-offer + metrics updates */
.driver-metrics-card {
  border: 1px solid rgba(16,36,63,.10);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f7fafb);
  margin: 14px 0;
}
.metrics-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.metrics-title-row h2 { margin: 0; font-size: 18px; color: var(--ink); }
.metric-trip-count {
  border: 1px solid rgba(14,118,110,.18);
  background: rgba(14,118,110,.08);
  color: #0e766e;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.driver-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.driver-metrics-grid div {
  border: 1px solid rgba(16,36,63,.09);
  border-radius: 16px;
  padding: 10px 12px;
  background: #fff;
}
.driver-metrics-grid span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #667085;
  font-weight: 850;
}
.driver-metrics-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
}
.queued-card {
  border-color: rgba(201,162,77,.35);
  background: linear-gradient(180deg, #fff, #fffaf0);
}
.queued-card .message-line {
  background: rgba(201,162,77,.12);
  border-color: rgba(201,162,77,.22);
}
@media (max-width: 720px) {
  .driver-metrics-grid { grid-template-columns: 1fr; }
  .metrics-title-row { flex-direction: column; }
  .metric-trip-count { white-space: normal; }
}

/* Uber-style clean driver app view - 2026-05-19 */
.driver-app-page {
  min-height: 100vh;
  overflow: hidden;
  background: #061f1d;
}
.driver-clean-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #061f1d;
}
.driver-clean-shell .driver-map-full {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  z-index: 1;
}
.driver-clean-shell .map-canvas {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.driver-app-topbar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: rgba(7, 31, 29, .88);
  color: #fff;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.driver-menu-btn {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  padding: 14px;
}
.driver-menu-btn span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
  margin: 2px 0;
}
.driver-top-copy { min-width: 0; }
.driver-greeting {
  margin: 0 0 3px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.driver-top-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.driver-top-copy p:last-child {
  margin: 4px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.driver-app-topbar .status-toggle {
  min-height: 46px;
  border-radius: 18px;
  background: linear-gradient(135deg, #18b88f, #0e766e);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(24,184,143,.18), 0 16px 36px rgba(14,118,110,.24);
}
.driver-app-topbar .status-toggle.offline {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  box-shadow: none;
}
.driver-side-menu {
  position: absolute;
  top: max(88px, calc(env(safe-area-inset-top) + 88px));
  left: 16px;
  z-index: 80;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.96);
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.menu-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.menu-close-btn, .offer-close-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(16,36,63,.08);
  color: var(--ink);
  font-size: 28px;
  font-weight: 750;
}
.block-link {
  width: 100%;
  justify-content: flex-start;
  margin: 8px 0;
  min-height: 46px;
}
.driver-gps-chip {
  position: absolute;
  left: 16px;
  top: max(104px, calc(env(safe-area-inset-top) + 104px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  padding: 10px 10px 10px 13px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}
.gps-pulse {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #18b88f;
  box-shadow: 0 0 0 8px rgba(24,184,143,.16);
  animation: gpsPulse 1.4s infinite;
  flex: 0 0 auto;
}
@keyframes gpsPulse {
  0%,100% { transform: scale(.88); opacity: .75; }
  50% { transform: scale(1.04); opacity: 1; }
}
.driver-gps-chip div { min-width: 0; flex: 1; }
.driver-gps-chip strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.driver-gps-chip p { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.driver-gps-chip button {
  border: 0;
  border-radius: 15px;
  min-height: 38px;
  padding: 0 14px;
  background: #071f1d;
  color: #fff;
  font-weight: 900;
}
.driver-searching-card {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(520px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.search-ring {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(from 90deg, #18b88f, #d7b35b, #18b88f);
  animation: spinRing 1.5s linear infinite;
  flex: 0 0 auto;
}
.search-ring span {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 10px rgba(7,31,29,.08);
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.driver-searching-card h2 { margin: 0 0 4px; font-size: 24px; }
.driver-searching-card p:last-child { margin: 0; color: var(--muted); font-weight: 750; }
.driver-offer-overlay {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100vw - 28px));
  padding: 20px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 0 6px rgba(24,184,143,.12), 0 34px 90px rgba(0,0,0,.32);
  overflow: hidden;
  animation: offerFlash 1.1s ease-in-out infinite;
}
@keyframes offerFlash {
  0%,100% { box-shadow: 0 0 0 6px rgba(24,184,143,.12), 0 34px 90px rgba(0,0,0,.32); }
  50% { box-shadow: 0 0 0 10px rgba(215,179,91,.28), 0 34px 90px rgba(0,0,0,.36); }
}
.offer-glow-ring {
  position: absolute;
  inset: -80px auto auto -80px;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(24,184,143,.32), rgba(24,184,143,0) 70%);
  pointer-events: none;
}
.offer-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(163,58,58,.1);
  color: #a33a3a;
}
.flash-pill { animation: timerFlash .8s ease-in-out infinite; }
@keyframes timerFlash { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.offer-info-clean { margin-bottom: 10px; }
.offer-payout-clean { margin-top: 10px; }
.swipe-accept-track {
  position: relative;
  min-height: 68px;
  margin-top: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(135deg, #071f1d, #0e766e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 42px rgba(14,118,110,.28);
}
.swipe-accept-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-100%);
  animation: swipeSheen 1.2s infinite;
}
@keyframes swipeSheen { to { transform: translateX(100%); } }
.swipe-accept-track span {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.swipe-knob {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: #d7b35b;
  color: #071f1d;
  font-size: 34px;
  font-weight: 950;
  z-index: 3;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  touch-action: none;
}
.swipe-accept-track.accepting {
  opacity: .7;
  pointer-events: none;
}
.queued-trip-pill {
  position: absolute;
  top: max(184px, calc(env(safe-area-inset-top) + 184px));
  right: 16px;
  z-index: 22;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(7,31,29,.9);
  color: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
}
.queued-trip-pill .eyebrow { margin-bottom: 6px; }
.queued-trip-pill strong, .queued-trip-pill span, .queued-trip-pill em { display: block; }
.queued-trip-pill strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queued-trip-pill span { color: rgba(255,255,255,.76); font-size: 12px; margin-top: 5px; }
.queued-trip-pill em { margin-top: 8px; font-style: normal; color: #d7b35b; font-weight: 950; }
.driver-trip-drawer {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 42;
  width: min(720px, calc(100vw - 24px));
  max-height: min(62vh, 650px);
  overflow: auto;
  padding: 16px;
  border-radius: 34px 34px 26px 26px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.98);
  box-shadow: 0 34px 90px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}
.drawer-handle {
  width: 54px;
  height: 5px;
  border-radius: 99px;
  margin: 0 auto 12px;
  background: rgba(16,36,63,.22);
}
.driver-trip-drawer h2 { margin: 0 0 4px; font-size: 28px; }
.trip-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.trip-focus-grid div {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcfd;
  padding: 11px 12px;
  min-width: 0;
}
.trip-focus-grid div.wide { grid-column: 1 / -1; }
.trip-focus-grid span, .drawer-payment-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.trip-focus-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #071f1d;
  color: #fff;
}
.drawer-payment-row span { color: rgba(255,255,255,.62); }
.drawer-payment-row strong { color: #d7b35b; }
.trip-action-dock {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 18%);
}
.trip-action-dock .btn {
  min-height: 62px;
  border-radius: 22px;
  font-size: 17px;
}
.trip-action-dock #completeTripBtn:not(.hidden),
.trip-action-dock #startTripBtn:not(.hidden) {
  display: flex !important;
  width: 100%;
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #071f1d, #0e766e);
  color: #fff;
  animation: primaryActionGlow 1.8s ease-in-out infinite;
}
@keyframes primaryActionGlow {
  0%,100% { box-shadow: 0 18px 42px rgba(14,118,110,.22); }
  50% { box-shadow: 0 18px 52px rgba(215,179,91,.34); }
}
.driver-steps-clean {
  max-height: 168px;
  overflow: auto;
}
@media (max-width: 860px) {
  .driver-clean-shell .map-canvas { width: 100%; height: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  .driver-app-topbar { left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); grid-template-columns: 48px minmax(0, 1fr) auto; border-radius: 23px; padding: 10px; }
  .driver-menu-btn { width: 48px; height: 48px; border-radius: 16px; }
  .driver-app-topbar .status-toggle { min-height: 42px; padding: 0 12px; font-size: 12px; }
  .driver-gps-chip { left: 10px; top: max(86px, calc(env(safe-area-inset-top) + 86px)); width: calc(100vw - 20px); }
  .queued-trip-pill { top: max(154px, calc(env(safe-area-inset-top) + 154px)); right: 10px; width: calc(100vw - 20px); }
  .driver-searching-card { width: calc(100vw - 20px); bottom: max(12px, env(safe-area-inset-bottom)); border-radius: 26px; padding: 14px; }
  .driver-offer-overlay { width: calc(100vw - 20px); bottom: max(12px, env(safe-area-inset-bottom)); border-radius: 30px; padding: 18px; }
  .driver-trip-drawer { width: calc(100vw - 16px); max-height: 66vh; bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 30px 30px 22px 22px; }
  .trip-focus-grid { grid-template-columns: 1fr 1fr; }
  .driver-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 430px) {
  .driver-top-copy h1 { font-size: 20px; }
  .driver-greeting, .driver-top-copy p:last-child { font-size: 11px; }
  .driver-gps-chip p { max-width: 190px; }
  .offer-info-clean { grid-template-columns: repeat(2, 1fr); }
  .trip-focus-grid { grid-template-columns: 1fr; }
  .trip-focus-grid div.wide { grid-column: auto; }
  .wait-box { grid-template-columns: 1fr; }
}

/* Driver screen cleanup: DiDi/Uber-style minimal offer + action drawer */
.driver-page .didi-offer {
  width: min(520px, calc(100vw - 24px));
  padding: 18px;
  border-radius: 32px;
  background: rgba(255,255,255,.985);
}
.didi-offer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.duration-corner {
  min-width: 76px;
  text-align: center;
  background: #071f1d;
  color: #fff;
  box-shadow: 0 10px 26px rgba(7,31,29,.18);
}
.didi-route-stack {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 6px 0 4px;
}
.didi-route-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.didi-route-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.didi-route-row strong {
  display: block;
  color: #071f1d;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -.02em;
  word-break: break-word;
}
.route-dot {
  width: 16px;
  height: 16px;
  margin-top: 20px;
  border-radius: 999px;
  background: #18b88f;
  box-shadow: 0 0 0 5px rgba(24,184,143,.15);
}
.destination-dot {
  border-radius: 5px;
  background: #071f1d;
  box-shadow: 0 0 0 5px rgba(7,31,29,.12);
}
.route-thread {
  position: absolute;
  left: 7px;
  top: 42px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(#18b88f, #071f1d);
  opacity: .4;
}
.didi-fare-row {
  margin: 16px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border-radius: 22px;
  background: #071f1d;
  color: #fff;
}
.didi-fare-row span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.didi-fare-row strong {
  color: #d7b35b;
  font-size: 32px;
  line-height: 1;
  font-weight: 1000;
}
.didi-offer-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.offer-countdown-flash {
  position: absolute;
  top: 58px;
  right: 18px;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(215,179,91,.18);
  color: #071f1d;
  font-weight: 950;
  animation: timerFlash .8s ease-in-out infinite;
}
.didi-trip-drawer {
  width: min(520px, calc(100vw - 20px));
  max-height: min(48vh, 440px);
  overflow: auto;
  padding: 16px;
  border-radius: 32px 32px 24px 24px;
}
.didi-trip-drawer h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.didi-trip-drawer .message-line {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 850;
  font-size: 14px;
}
.trip-simple-target {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fbfcfd;
  margin: 10px 0;
}
.trip-simple-target span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.trip-simple-target strong {
  display: block;
  color: #071f1d;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 950;
}
.compact-navigation-steps {
  max-height: 132px;
  overflow: auto;
  margin-top: 10px;
}
.compact-navigation-steps .step-row {
  padding: 9px 10px;
  border-radius: 14px;
}
.didi-trip-actions {
  display: grid;
  gap: 8px;
}
.didi-trip-actions .btn,
.didi-trip-actions .swipe-accept-track {
  width: 100%;
  min-height: 62px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 950;
}
.swipe-start-track {
  margin-top: 0;
}
.btn.is-busy,
.swipe-accept-track.accepting {
  filter: saturate(.85);
  cursor: wait;
}
@media (max-width: 720px) {
  .driver-gps-chip {
    display: none;
  }
  .driver-searching-card {
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .driver-page .didi-offer {
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 16px;
    border-radius: 28px;
  }
  .didi-route-row strong {
    font-size: 17px;
  }
  .didi-fare-row strong {
    font-size: 28px;
  }
  .didi-trip-drawer {
    width: calc(100vw - 14px);
    max-height: 52vh;
    bottom: max(7px, env(safe-area-inset-bottom));
  }
}

/* 2026-05-19: Uber/DiDi-style rider + driver slide menus and cleaner customer sheet */
.app-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1180;
  background: rgba(5, 15, 28, 0);
  backdrop-filter: blur(0px);
  transition: background .22s ease, backdrop-filter .22s ease;
}
.app-menu-backdrop.open {
  background: rgba(5, 15, 28, .34);
  backdrop-filter: blur(2px);
}
.customer-menu.app-side-menu,
.driver-side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1200;
  width: min(390px, 88vw);
  max-width: 88vw;
  padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0 34px 34px 0;
  background: rgba(255,255,255,.985);
  box-shadow: 28px 0 80px rgba(5, 15, 28, .28);
  transform: translateX(-104%);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  backdrop-filter: blur(18px);
}
.customer-menu.app-side-menu.open,
.driver-side-menu.open {
  transform: translateX(0);
}
.customer-menu.app-side-menu .menu-card-head,
.driver-side-menu .menu-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 4px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.customer-menu.app-side-menu .menu-card-head h2,
.driver-side-menu .menu-card-head h2 {
  margin: 0 0 5px;
  font-size: 26px;
  line-height: 1.05;
}
.menu-close-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.customer-menu.app-side-menu a,
.driver-side-menu a.block-link {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(16,36,63,.06);
}
.customer-menu.app-side-menu a small,
.driver-side-menu a.block-link small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.customer-menu.app-side-menu a:hover,
.driver-side-menu a.block-link:hover {
  background: linear-gradient(135deg, rgba(201,162,77,.16), #fff);
  border-color: rgba(201,162,77,.35);
}

.customer-page .top-bar {
  width: min(620px, calc(100vw - 48px));
  right: auto;
  padding: 12px 14px;
  border-radius: 28px;
  gap: 12px;
}
.customer-page .top-copy {
  width: auto;
  flex: 1 1 auto;
}
.customer-page .pickup-display {
  min-height: 48px;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.customer-page .pickup-display:hover { border-color: transparent; }
.customer-page .pickup-display-copy strong { font-size: 17px; }
.customer-page .header-actions { flex: 0 0 auto; }
.customer-page .header-actions .mini-link { display: none; }
.customer-page .status-pill {
  background: rgba(16,36,63,.08);
  color: var(--ink);
  border: 1px solid var(--line);
}
.customer-bottom-sheet {
  width: min(520px, calc(100vw - 24px));
  border-radius: 34px 34px 26px 26px;
  padding: 14px 16px 16px;
  max-height: min(72vh, 680px);
  overflow-y: auto;
}
.sheet-handle {
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: rgba(16,36,63,.18);
  margin: 0 auto 14px;
}
.rider-sheet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
.rider-sheet-title h2 {
  margin: 0;
  font-size: clamp(24px, 5.2vw, 34px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.rider-sheet-title.compact { margin-bottom: 16px; }
.rider-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #071f1d;
  color: #fff;
  font-weight: 950;
  font-size: 13px;
}
.customer-bottom-sheet .route-form {
  display: grid;
  gap: 8px;
}
.customer-bottom-sheet .field-label {
  margin: 0 0 -2px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.customer-bottom-sheet .text-input,
.customer-bottom-sheet .select-input {
  min-height: 52px;
  border-radius: 18px;
  background: #f8fafc;
  border-color: rgba(16,36,63,.10);
  font-weight: 850;
}
.customer-bottom-sheet .text-input::placeholder { color: rgba(101,114,134,.8); }
.customer-bottom-sheet .add-stop-btn {
  justify-self: flex-start;
  border: 0;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 13px;
  background: rgba(201,162,77,.18);
  color: var(--ink);
  font-weight: 950;
}
.customer-bottom-sheet .ride-type-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 10px;
}
.customer-bottom-sheet .ride-type-card {
  min-height: 70px;
  border-radius: 20px;
  padding: 11px 12px;
}
.customer-bottom-sheet .estimate-card {
  border-radius: 24px;
  margin: 10px 0 12px;
  background: linear-gradient(135deg, #071f1d, #10243f);
}
.customer-bottom-sheet #requestRideBtn {
  min-height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #071f1d, #0e766e);
  box-shadow: 0 18px 46px rgba(14,118,110,.28);
}
.customer-bottom-sheet #cancelRideBtn {
  border-radius: 999px;
}
.customer-bottom-sheet .simple-status h2 {
  margin-bottom: 4px;
  font-size: 26px;
}
.customer-bottom-sheet .driver-summary {
  border-radius: 24px;
  padding: 14px;
  background: #f8fafc;
}
.rider-driver-mini-card {
  display: grid;
  gap: 8px;
}
.rider-driver-mini-card .driver-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.rider-driver-mini-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}
.rider-driver-mini-card .fare-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: #071f1d;
  color: #d7b35b;
  font-weight: 1000;
}
.rider-driver-mini-card .route-copy {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 860px) {
  .customer-page { overflow: hidden; }
  .customer-page .app-frame,
  .customer-page .map-stage {
    height: 100vh;
    min-height: 100vh;
    display: block;
  }
  .customer-page .map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .customer-page .top-bar {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
    padding: 10px;
    z-index: 700;
    align-items: center;
    border-radius: 25px;
  }
  .customer-page .hamburger-btn {
    width: 48px;
    height: 48px;
    border-radius: 17px;
  }
  .customer-page .eyebrow { font-size: 10px; margin-bottom: 4px; }
  .customer-page .pickup-display-copy strong {
    font-size: 15px;
    white-space: nowrap;
  }
  .customer-page .pickup-display-copy small { display: none; }
  .customer-page .status-pill { display: none; }
  .customer-bottom-sheet {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-height: 58vh;
    margin: 0;
    padding: 12px 13px 14px;
    z-index: 690;
    border-radius: 30px 30px 22px 22px;
  }
  .rider-sheet-title h2 { font-size: 25px; }
  .customer-bottom-sheet .ride-type-grid { gap: 7px; }
  .customer-bottom-sheet .ride-type-card { min-height: 60px; padding: 9px; border-radius: 16px; }
  .customer-bottom-sheet .ride-type-card strong { font-size: 13px; }
  .customer-bottom-sheet .ride-type-card span { font-size: 10px; }
  .customer-bottom-sheet .input-row { grid-template-columns: 1fr; }
  .customer-bottom-sheet .text-input,
  .customer-bottom-sheet .select-input { min-height: 48px; border-radius: 16px; }
}

@media (max-width: 420px) {
  .customer-bottom-sheet { max-height: 62vh; }
  .rider-sheet-title { align-items: flex-start; }
  .rider-mini-badge { min-height: 32px; padding: 0 10px; font-size: 11px; }
  .customer-bottom-sheet .estimate-card h2 { font-size: 28px; }
}

/* 2026-05-19: Professional customer/rider UI upgrade + fixed side menu layering */
.customer-page {
  --rider-navy: #061b2b;
  --rider-navy-2: #0d2f49;
  --rider-teal: #12a092;
  --rider-teal-dark: #08786e;
  --rider-cream: #fffaf0;
  --rider-card: rgba(255, 255, 255, .96);
  background:
    radial-gradient(circle at 20% 8%, rgba(18,160,146,.20), transparent 32%),
    radial-gradient(circle at 92% 20%, rgba(201,162,77,.18), transparent 30%),
    linear-gradient(135deg, #edf7f6 0%, #f8f4eb 52%, #eef4f8 100%);
}

.customer-page .map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 520;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,27,43,.22) 0%, rgba(6,27,43,0) 22%, rgba(6,27,43,0) 64%, rgba(6,27,43,.18) 100%);
}

.customer-page .map-canvas {
  filter: saturate(.92) contrast(1.04);
}

.customer-page .rider-topbar {
  z-index: 1850;
  min-height: 78px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(255,255,255,.64);
  background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  box-shadow: 0 24px 60px rgba(6,27,43,.18);
}

.customer-page .rider-topbar .hamburger-btn {
  position: relative;
  z-index: 1860;
  border: 0;
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-navy-2));
  box-shadow: 0 14px 30px rgba(6,27,43,.28);
}
.customer-page .rider-topbar .hamburger-btn span { background: #fff; }
.customer-page .rider-topbar .hamburger-btn.active,
.customer-page .rider-topbar .hamburger-btn:hover {
  background: linear-gradient(135deg, var(--rider-teal-dark), var(--rider-teal));
  transform: translateY(-1px);
}

.customer-page .rider-location-card .eyebrow {
  margin: 0 0 4px;
  color: var(--rider-teal-dark);
  letter-spacing: .16em;
}
.customer-page .current-map-display {
  min-height: 42px;
  gap: 8px;
}
.customer-page .location-dot {
  background: var(--rider-teal);
  box-shadow: 0 0 0 6px rgba(18,160,146,.16), 0 0 26px rgba(18,160,146,.45);
}
.customer-page .pickup-display-copy strong {
  color: var(--rider-navy);
  font-weight: 1000;
}
.customer-page .pickup-display-copy small { color: rgba(6,27,43,.58); }
.customer-page .status-pill {
  background: rgba(18,160,146,.10);
  color: var(--rider-teal-dark);
  border: 1px solid rgba(18,160,146,.22);
}

.customer-page .customer-bottom-sheet {
  z-index: 1760;
  border: 1px solid rgba(255,255,255,.66);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow: 0 28px 85px rgba(6,27,43,.23);
}
.customer-page .sheet-handle { background: rgba(6,27,43,.20); }
.customer-page .rider-sheet-title h2 { color: var(--rider-navy); font-weight: 1000; }
.customer-page .rider-mini-badge {
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-navy-2));
  box-shadow: 0 12px 26px rgba(6,27,43,.18);
}
.customer-page .pro-route-form {
  position: relative;
  padding: 2px 0 0;
}
.customer-page .pro-route-form::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 36px;
  bottom: 82px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rider-teal), rgba(6,27,43,.18));
  opacity: .55;
}
.customer-page .field-label {
  position: relative;
  padding-left: 27px;
  color: rgba(6,27,43,.62);
}
.customer-page .field-label::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--rider-teal);
  box-shadow: 0 0 0 4px rgba(18,160,146,.12);
}
.customer-page .destination-field + .location-info,
.customer-page .location-info { margin-left: 0; }
.customer-page .text-input,
.customer-page .select-input {
  border: 1px solid rgba(6,27,43,.10);
  background: rgba(248,251,252,.98);
  color: var(--rider-navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.customer-page .text-input:focus,
.customer-page .select-input:focus {
  border-color: rgba(18,160,146,.60);
  box-shadow: 0 0 0 4px rgba(18,160,146,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.customer-page .btn-secondary {
  background: linear-gradient(135deg, #e9f7f5, #d5f2ee);
  color: var(--rider-teal-dark);
  border: 1px solid rgba(18,160,146,.20);
}
.customer-page .add-stop-btn {
  background: rgba(18,160,146,.10);
  color: var(--rider-teal-dark);
}
.customer-page .ride-type-card {
  background: linear-gradient(180deg, #fff, #f7fbfb);
  border: 1px solid rgba(6,27,43,.10);
  box-shadow: 0 12px 28px rgba(6,27,43,.05);
}
.customer-page .ride-type-card.active {
  border-color: rgba(18,160,146,.56);
  background: linear-gradient(135deg, rgba(18,160,146,.14), rgba(255,255,255,.96));
  box-shadow: 0 14px 34px rgba(18,160,146,.12), inset 0 0 0 2px rgba(18,160,146,.10);
}
.customer-page .estimate-card {
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-teal-dark));
  box-shadow: 0 18px 44px rgba(6,27,43,.20);
}
.customer-page #requestRideBtn {
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-teal-dark));
  box-shadow: 0 18px 48px rgba(18,160,146,.26);
}
.customer-page #requestRideBtn:hover { box-shadow: 0 22px 58px rgba(18,160,146,.34); }

/* Side menu must live above map, header and bottom sheet */
body.customer-page.rider-menu-open { overflow: hidden; }
.customer-page .app-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background: rgba(3, 14, 25, 0);
  backdrop-filter: blur(0);
  transition: background .24s ease, backdrop-filter .24s ease;
}
.customer-page .app-menu-backdrop.open {
  background: rgba(3, 14, 25, .48);
  backdrop-filter: blur(4px);
}
.customer-page .customer-menu.app-side-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 9100 !important;
  width: min(410px, 90vw);
  max-width: 90vw;
  padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0 34px 34px 0;
  background:
    radial-gradient(circle at 20% 8%, rgba(18,160,146,.18), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,252,252,.98));
  box-shadow: 34px 0 90px rgba(3,14,25,.35);
  transform: translateX(-106%);
  transition: transform .28s cubic-bezier(.2,.84,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(22px);
}
.customer-page .customer-menu.app-side-menu.open { transform: translateX(0); }
.customer-page .menu-brand-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 13px;
  padding: 8px 2px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(6,27,43,.10);
}
.customer-page .menu-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-teal-dark));
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
  box-shadow: 0 14px 32px rgba(6,27,43,.22);
}
.customer-page .menu-brand-row h2 {
  margin: 0 0 3px;
  font-size: 24px;
  color: var(--rider-navy);
  line-height: 1.08;
}
.customer-page .menu-brand-row .muted {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-page .menu-close-btn {
  border: 0;
  background: rgba(6,27,43,.06);
}
.customer-page .rider-menu-links {
  display: grid;
  gap: 8px;
}
.customer-page .customer-menu.app-side-menu a {
  position: relative;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 13px 46px 13px 16px;
  margin: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(6,27,43,.09);
  color: var(--rider-navy);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(6,27,43,.06);
}
.customer-page .customer-menu.app-side-menu a::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rider-teal-dark);
  font-size: 26px;
  font-weight: 900;
}
.customer-page .customer-menu.app-side-menu a span {
  font-size: 16px;
  font-weight: 1000;
}
.customer-page .customer-menu.app-side-menu a small {
  color: rgba(6,27,43,.56);
  font-weight: 800;
}
.customer-page .customer-menu.app-side-menu a:hover,
.customer-page .customer-menu.app-side-menu a:focus-visible {
  background: linear-gradient(135deg, rgba(18,160,146,.13), rgba(255,255,255,.96));
  border-color: rgba(18,160,146,.30);
  outline: none;
}
.customer-page .customer-menu.app-side-menu a.logout-link {
  margin-top: 8px;
  background: rgba(163,58,58,.07);
}
.customer-page .customer-menu.app-side-menu a.logout-link::after { color: var(--danger); }

.customer-page .location-dropdown,
.customer-page .destination-dropdown {
  z-index: 2200 !important;
  border: 1px solid rgba(6,27,43,.10);
  box-shadow: 0 22px 52px rgba(6,27,43,.18);
}

@media (min-width: 861px) {
  .customer-page .rider-topbar {
    top: 22px;
    left: 22px;
    right: auto;
    width: min(660px, calc(100vw - 44px));
  }
  .customer-page .customer-bottom-sheet {
    left: 28px;
    bottom: 28px;
    transform: none;
    width: min(480px, calc(100vw - 56px));
  }
}

@media (max-width: 860px) {
  .customer-page .map-stage::before {
    background: linear-gradient(180deg, rgba(6,27,43,.18) 0%, rgba(6,27,43,0) 28%, rgba(6,27,43,0) 58%, rgba(6,27,43,.24) 100%);
  }
  .customer-page .rider-topbar {
    grid-template-columns: 50px minmax(0, 1fr);
    width: auto;
    min-height: 68px;
    padding: 9px;
    z-index: 1850;
  }
  .customer-page .rider-topbar .header-actions { display: none; }
  .customer-page .current-map-display { min-height: 44px; }
  .customer-page .pickup-display-copy strong { font-size: 14px; }
  .customer-page .customer-bottom-sheet {
    z-index: 1760;
    max-height: 56vh;
    border-radius: 28px 28px 20px 20px;
  }
  .customer-page .rider-sheet-title h2 { font-size: 23px; }
  .customer-page .pro-route-form::before { left: 9px; top: 32px; bottom: 78px; }
  .customer-page .field-label { padding-left: 24px; }
  .customer-page .customer-menu.app-side-menu {
    width: min(360px, 92vw);
    max-width: 92vw;
    border-radius: 0 30px 30px 0;
  }
  .customer-page .destination-dropdown,
  .customer-page .location-dropdown {
    max-height: 210px;
  }
}

@media (max-width: 430px) {
  .customer-page .customer-bottom-sheet { max-height: 59vh; padding: 11px 12px 13px; }
  .customer-page .ride-type-grid { grid-template-columns: 1fr 1fr 1fr; }
  .customer-page .customer-menu.app-side-menu { width: 94vw; max-width: 94vw; }
  .customer-page .menu-brand-row { grid-template-columns: 52px minmax(0, 1fr) 42px; }
  .customer-page .menu-avatar { width: 52px; height: 52px; border-radius: 19px; }
}

/* 2026-05-19: Rider 3-step booking sheet, collapsible card and DiDi/Uber-style ride options */
.customer-page .rider-booking-steps {
  padding-top: 10px;
  transition: transform .34s cubic-bezier(.2,.82,.2,1), max-height .28s ease, box-shadow .28s ease;
  will-change: transform;
  overflow-y: auto;
  scrollbar-width: thin;
}
.customer-page .sheet-toggle-btn {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0 2px 8px;
  margin: 0 0 4px;
  background: transparent;
  color: rgba(6,27,43,.55);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.customer-page .sheet-toggle-btn .sheet-handle {
  grid-column: 2;
  margin: 0;
  width: 56px;
  height: 5px;
  background: rgba(6,27,43,.22);
}
.customer-page .sheet-toggle-btn strong {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(18,160,146,.10);
  color: var(--rider-teal-dark);
}
.customer-page .customer-bottom-sheet.is-collapsed {
  max-height: 64px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 38px rgba(6,27,43,.18);
}
@media (min-width: 861px) {
  .customer-page .customer-bottom-sheet.is-collapsed { transform: translateY(calc(100% - 64px)) !important; }
}
@media (max-width: 860px) {
  .customer-page .customer-bottom-sheet.is-collapsed { transform: translate(-50%, calc(100% - 64px)) !important; }
}
.customer-page .panel-step.active {
  animation: riderStepIn .24s ease both;
}
@keyframes riderStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.customer-page .three-step-route-form {
  gap: 8px;
}
.customer-page .single-input-row {
  grid-template-columns: 1fr !important;
}
.customer-page .destination-action-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch;
}
.customer-page .add-stop-inline-btn {
  min-width: 92px;
  min-height: 52px;
  border: 1px solid rgba(18,160,146,.20);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18,160,146,.12), rgba(18,160,146,.06));
  color: var(--rider-teal-dark);
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.customer-page .add-stop-inline-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(18,160,146,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.customer-page .stop-row {
  margin: 2px 0 0;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(18,160,146,.10);
  background: rgba(18,160,146,.045);
}
.customer-page .stop-row .field-label { margin-bottom: 7px; }
.customer-page .stop-input-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.customer-page .remove-stop-btn {
  min-height: 52px;
  border-radius: 18px;
}
.customer-page #searchRideBtn,
.customer-page #requestRideBtn {
  min-height: 62px;
  border-radius: 999px;
  font-size: 17px;
  letter-spacing: -.01em;
}
.customer-page .route-summary-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  margin-bottom: 12px;
  border-radius: 24px;
  border: 1px solid rgba(6,27,43,.10);
  background: linear-gradient(135deg, rgba(18,160,146,.08), rgba(255,255,255,.94));
}
.customer-page .route-summary-card strong,
.customer-page .route-summary-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-page .route-summary-card strong {
  font-size: 15px;
  color: var(--rider-navy);
  font-weight: 1000;
}
.customer-page .route-summary-card small {
  margin-top: 3px;
  color: rgba(6,27,43,.62);
  font-weight: 800;
}
.customer-page .route-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.customer-page .route-summary-stats span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(6,27,43,.07);
  color: rgba(6,27,43,.72);
  font-size: 12px;
  font-weight: 950;
}
.customer-page .ride-options-list {
  display: grid;
  gap: 8px;
}
.customer-page .ride-option-card {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(6,27,43,.10);
  border-radius: 24px;
  padding: 13px 14px;
  background: linear-gradient(180deg, #ffffff, #f6fbfb);
  color: var(--rider-navy);
  text-align: left;
  box-shadow: 0 12px 28px rgba(6,27,43,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.customer-page .ride-option-card:hover {
  transform: translateY(-1px);
  border-color: rgba(18,160,146,.34);
  box-shadow: 0 18px 38px rgba(6,27,43,.10);
}
.customer-page .ride-option-card.active {
  border-color: rgba(18,160,146,.68);
  background: linear-gradient(135deg, rgba(18,160,146,.16), rgba(255,255,255,.98));
  box-shadow: 0 18px 42px rgba(18,160,146,.13), inset 0 0 0 2px rgba(18,160,146,.10);
}
.customer-page .ride-option-main strong,
.customer-page .ride-option-main span,
.customer-page .ride-option-price strong,
.customer-page .ride-option-price span {
  display: block;
}
.customer-page .ride-option-main strong {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.02em;
}
.customer-page .ride-option-main span {
  margin-top: 4px;
  color: rgba(6,27,43,.58);
  font-size: 13px;
  font-weight: 850;
}
.customer-page .ride-option-price {
  text-align: right;
}
.customer-page .ride-option-price strong {
  font-size: 19px;
  font-weight: 1000;
}
.customer-page .ride-option-price span {
  margin-top: 4px;
  color: var(--rider-teal-dark);
  font-size: 12px;
  font-weight: 950;
}
.customer-page .mini-pill-btn {
  min-height: 38px;
  border: 1px solid rgba(6,27,43,.10);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255,255,255,.86);
  color: var(--rider-teal-dark);
  font-weight: 1000;
}
.customer-page .compact-payment-block {
  margin-top: 12px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(248,251,252,.92);
  border: 1px solid rgba(6,27,43,.08);
}
.customer-page .waiting-driver-status {
  border: 1px solid rgba(18,160,146,.14);
  background: linear-gradient(135deg, rgba(18,160,146,.12), rgba(255,255,255,.92));
}
@media (max-width: 520px) {
  .customer-page .destination-action-row { grid-template-columns: minmax(0, 1fr) 82px !important; gap: 8px; }
  .customer-page .add-stop-inline-btn { min-width: 82px; padding: 0 8px; font-size: 13px; }
  .customer-page .stop-input-row { grid-template-columns: minmax(0, 1fr) 84px !important; gap: 8px; }
  .customer-page .remove-stop-btn { padding: 0 10px; font-size: 13px; }
  .customer-page .ride-option-card { min-height: 76px; padding: 12px; border-radius: 21px; }
  .customer-page .ride-option-main strong { font-size: 16px; }
  .customer-page .ride-option-price strong { font-size: 17px; }
}

/* 2026-05-19 patch: keep the origin/destination timeline outside the inputs */
.customer-page .three-step-route-form {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 32px !important;
}
.customer-page .three-step-route-form::before {
  left: 12px !important;
  top: 28px !important;
  bottom: 96px !important;
  width: 2px !important;
  z-index: 0 !important;
  pointer-events: none;
}
.customer-page .three-step-route-form > .field-label,
.customer-page .three-step-route-form > .location-field,
.customer-page .three-step-route-form > .stops-container,
.customer-page .three-step-route-form > .location-info {
  position: relative;
  z-index: 1;
}
.customer-page .three-step-route-form > .field-label {
  padding-left: 0 !important;
  margin: 0 0 -1px !important;
}
.customer-page .three-step-route-form > .field-label::before {
  left: -28px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  background: #fff !important;
  border: 3px solid var(--rider-teal) !important;
  box-shadow: 0 0 0 5px rgba(18,160,146,.12) !important;
  z-index: 3 !important;
}
.customer-page .three-step-route-form .text-input {
  min-height: 64px;
  border-radius: 22px;
  border-color: rgba(18,160,146,.34);
  background: rgba(248,252,253,.98);
  box-shadow: 0 12px 28px rgba(6,27,43,.06), inset 0 1px 0 rgba(255,255,255,.95);
}
.customer-page .three-step-route-form .destination-action-row,
.customer-page .three-step-route-form .single-input-row,
.customer-page .three-step-route-form .stop-input-row {
  position: relative;
  z-index: 2;
}
.customer-page .three-step-route-form .add-stop-inline-btn,
.customer-page .three-step-route-form .remove-stop-btn {
  min-height: 64px;
  border-radius: 20px;
}
.customer-page .three-step-route-form .location-dropdown {
  z-index: 2600 !important;
}
.customer-page .three-step-route-form .stop-row {
  position: relative;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
}
.customer-page .three-step-route-form .stop-row .field-label::before {
  left: -28px !important;
}
.customer-page .three-step-route-form .stop-row .location-field {
  position: relative;
  z-index: 2;
}
@media (max-width: 520px) {
  .customer-page .three-step-route-form {
    padding-left: 28px !important;
    gap: 8px;
  }
  .customer-page .three-step-route-form::before {
    left: 10px !important;
    top: 27px !important;
    bottom: 90px !important;
  }
  .customer-page .three-step-route-form > .field-label::before,
  .customer-page .three-step-route-form .stop-row .field-label::before {
    left: -26px !important;
    width: 15px !important;
    height: 15px !important;
  }
  .customer-page .three-step-route-form .text-input,
  .customer-page .three-step-route-form .add-stop-inline-btn,
  .customer-page .three-step-route-form .remove-stop-btn {
    min-height: 58px;
    border-radius: 18px;
  }
  .customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }
  .customer-page .add-stop-inline-btn {
    min-width: 92px;
    font-size: 14px;
  }
}


/* 2026-05-19 patch 2: clean Google-style address suggestions and prevent dropdown overlap */
.customer-page .three-step-route-form .location-field {
  position: relative;
  min-width: 0;
}
.customer-page .three-step-route-form .location-dropdown,
.customer-page .three-step-route-form .destination-dropdown {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 8px !important;
  padding: 7px !important;
  max-height: 238px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(18,160,146,.16) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 42px rgba(6,27,43,.14) !important;
  backdrop-filter: blur(16px);
  z-index: 20 !important;
}
.customer-page .three-step-route-form .location-dropdown.hidden,
.customer-page .three-step-route-form .destination-dropdown.hidden {
  display: none !important;
}
.customer-page .three-step-route-form .destination-option {
  width: 100%;
  min-height: 56px;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--rider-navy);
  text-align: left;
  cursor: pointer;
}
.customer-page .three-step-route-form .destination-option:hover,
.customer-page .three-step-route-form .destination-option:focus-visible,
.customer-page .three-step-route-form .destination-option.is-selecting {
  background: linear-gradient(135deg, rgba(18,160,146,.12), rgba(248,252,253,.96));
  outline: none;
}
.customer-page .three-step-route-form .destination-option.typed {
  margin-top: 4px;
  border-top: 1px solid rgba(6,27,43,.07);
  background: rgba(6,27,43,.025);
}
.customer-page .three-step-route-form .destination-option.google .location-option-icon {
  color: #fff;
  background: var(--rider-teal-dark);
}
.customer-page .three-step-route-form .location-option-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--rider-teal-dark);
  background: rgba(18,160,146,.12);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
}
.customer-page .three-step-route-form .location-option-copy {
  min-width: 0;
  display: block;
}
.customer-page .three-step-route-form .location-option-copy strong {
  display: block;
  margin: 0 0 3px;
  color: var(--rider-navy);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-page .three-step-route-form .location-option-copy span {
  display: block;
  color: rgba(6,27,43,.58);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-page .three-step-route-form .text-input.selected-location-input {
  border-color: rgba(18,160,146,.72) !important;
  background: #fff !important;
}
.pac-container {
  z-index: 99999 !important;
  border: 1px solid rgba(18,160,146,.16) !important;
  border-radius: 18px !important;
  margin-top: 8px !important;
  box-shadow: 0 18px 42px rgba(6,27,43,.16) !important;
  overflow: hidden !important;
  font-family: inherit !important;
}
.pac-item {
  padding: 9px 12px !important;
  min-height: 46px !important;
  cursor: pointer !important;
}
.pac-item:hover { background: rgba(18,160,146,.09) !important; }
@media (max-width: 520px) {
  .customer-page .three-step-route-form .location-dropdown,
  .customer-page .three-step-route-form .destination-dropdown {
    max-height: 194px !important;
  }
  .customer-page .three-step-route-form .destination-option {
    min-height: 52px;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 9px;
  }
  .customer-page .three-step-route-form .location-option-icon {
    width: 31px;
    height: 31px;
    border-radius: 12px;
  }
}


/* 2026-05-19 v3: single Orbit-themed address dropdown only; hide Google native PAC dropdown */
.pac-container,
.pac-logo,
body > .pac-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.customer-page .three-step-route-form .location-dropdown,
.customer-page .three-step-route-form .destination-dropdown {
  margin-top: 10px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(18,160,146,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,252,252,.99)) !important;
  box-shadow: 0 18px 44px rgba(6,27,43,.16) !important;
  position: relative !important;
  z-index: 50 !important;
}
.customer-page .three-step-route-form .destination-option {
  min-height: 58px !important;
  border-radius: 17px !important;
  margin: 2px 0 !important;
  border: 1px solid transparent !important;
}
.customer-page .three-step-route-form .destination-option:hover,
.customer-page .three-step-route-form .destination-option:focus-visible,
.customer-page .three-step-route-form .destination-option.is-selecting {
  border-color: rgba(18,160,146,.18) !important;
  background: linear-gradient(135deg, rgba(18,160,146,.13), rgba(255,255,255,.98)) !important;
}
.customer-page .three-step-route-form .destination-option.typed {
  background: rgba(6,27,43,.025) !important;
}
.customer-page .three-step-route-form .destination-option.google .location-option-icon {
  background: #0e766e !important;
  color: #fff !important;
}
.customer-page .three-step-route-form .location-option-copy strong,
.customer-page .three-step-route-form .location-option-copy span {
  max-width: 100% !important;
}
@media (max-width: 520px) {
  .customer-page .three-step-route-form .location-dropdown,
  .customer-page .three-step-route-form .destination-dropdown {
    max-height: 218px !important;
  }
}


/* 2026-05-19 v4: address search reliability polish */
.customer-page .three-step-route-form .destination-option.typed .location-option-icon {
  background: rgba(16,36,63,.10) !important;
  color: #10243f !important;
}
.customer-page .three-step-route-form .text-input.selected-location-input {
  box-shadow: 0 0 0 4px rgba(18,160,146,.10), 0 12px 28px rgba(6,27,43,.06) !important;
}
html body .pac-container,
html body .pac-logo,
body > .pac-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Launch area v7 controls */
.launch-area-form { border-color: rgba(20, 184, 166, 0.28); }
.full-span { grid-column: 1 / -1; }
.admin-table small, .driver-card .muted { color: #64748b; font-size: 12px; }
.admin-status-pill.active { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.admin-status-pill.suspended { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.btn-small { padding: 8px 12px; font-size: 12px; border-radius: 12px; }


/* v8 suburb serviceability map overlays */
.coverage-map-legend {
  position: absolute;
  left: 18px;
  top: 92px;
  z-index: 7;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,35,52,.10);
  box-shadow: 0 18px 45px rgba(15,35,52,.14);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 900;
  color: #10243f;
}
.coverage-map-legend .legend-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.coverage-map-legend .legend-dot { width: 13px; height: 13px; border-radius: 999px; display: inline-block; }
.coverage-map-legend .legend-dot.open { background: #16a34a; }
.coverage-map-legend .legend-dot.closed { background: #dc2626; }
.coverage-alert-card {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 155px;
  z-index: 8;
  max-width: 470px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(220,38,38,.22);
  box-shadow: 0 24px 60px rgba(15,35,52,.18);
  color: #10243f;
}
.coverage-alert-card strong { display: block; margin-bottom: 4px; font-size: 15px; }
.coverage-alert-card span { display: block; color: #64748b; font-size: 13px; line-height: 1.4; }
.coverage-alert-card.hidden { display: none; }
@media (max-width: 620px) {
  .coverage-map-legend { top: 84px; left: 12px; padding: 10px 12px; }
  .coverage-alert-card { top: 145px; left: 12px; right: 12px; }
}

/* V14 production driver arrived flow */
.driver-trip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.trip-live-pill {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(24, 184, 143, .12);
  color: #0e766e;
  border: 1px solid rgba(24, 184, 143, .22);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
}
.arrived-rider-card {
  margin: 12px 0;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #f7fbfb);
  border: 1px solid rgba(15, 35, 52, .1);
  box-shadow: 0 16px 42px rgba(15, 35, 52, .08);
}
.arrived-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.arrived-pill,
.arrived-timer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.arrived-pill {
  background: rgba(24, 184, 143, .13);
  color: #0e766e;
  border: 1px solid rgba(24, 184, 143, .24);
}
.arrived-timer-pill {
  background: #0f2334;
  color: #fff;
  border: 1px solid rgba(15, 35, 52, .12);
}
.rider-card-main {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
}
.rider-avatar {
  width: 50px;
  height: 50px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f2334, #164264);
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(15, 35, 52, .2);
}
.rider-card-copy { min-width: 0; }
.rider-card-copy span,
.arrived-pickup-box span {
  display: block;
  color: #6b7788;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rider-card-copy strong {
  display: block;
  color: #071f1d;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rider-card-copy em {
  display: block;
  color: #6b7788;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  margin-top: 3px;
}
.rider-card-actions {
  display: flex;
  gap: 8px;
}
.rider-action-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #edf6f5;
  color: #0e766e;
  font-size: 18px;
  font-weight: 950;
}
.arrived-pickup-box {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 20px;
  border: 1px solid rgba(15, 35, 52, .08);
  background: #fff;
}
.arrived-pickup-box strong {
  display: block;
  margin-top: 4px;
  color: #10243f;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}
.didi-trip-drawer .wait-box {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 12px;
}
.didi-trip-drawer .wait-box div {
  padding: 11px 10px;
  border-radius: 18px;
  background: #f8fbfc;
}
.didi-trip-actions .swipe-start-track {
  min-height: 70px;
  overflow: hidden;
  background: linear-gradient(135deg, #13b99f, #0e766e 55%, #063f3a);
  box-shadow: 0 20px 46px rgba(14, 118, 110, .3), inset 0 1px 0 rgba(255,255,255,.25);
}
.didi-trip-actions .swipe-start-track span {
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 18px;
}
.didi-trip-actions .swipe-start-track .swipe-knob {
  width: 58px;
  height: 58px;
  top: 6px;
  left: 6px;
  background: #fff;
  color: #0e766e;
  font-size: 32px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.didi-trip-actions #cancelNoShowBtn {
  min-height: 54px;
  background: #fff;
  color: #a33a3a;
  border: 1px solid rgba(163,58,58,.18);
  box-shadow: 0 10px 28px rgba(15,35,52,.06);
}
.didi-trip-actions #cancelNoShowBtn:disabled {
  color: #6b7788;
  background: #f4f7f9;
  border-color: rgba(15,35,52,.08);
  opacity: 1;
}
@media (max-width: 720px) {
  .didi-trip-drawer {
    max-height: min(72vh, 580px);
  }
  .rider-card-main {
    grid-template-columns: 48px 1fr auto;
  }
  .rider-avatar { width: 48px; height: 48px; border-radius: 18px; }
  .rider-action-btn { width: 40px; height: 40px; border-radius: 14px; }
  .didi-trip-drawer .wait-box { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .didi-trip-drawer .wait-box strong { font-size: 15px; }
}

/* V15 production driver pickup / swipe UI polish */
.driver-page .didi-trip-drawer {
  border-radius: 30px 30px 0 0;
  border: 1px solid rgba(15, 35, 52, .08);
  box-shadow: 0 -18px 55px rgba(15, 35, 52, .18);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(18px);
}
.driver-trip-header { margin-bottom: 14px; }
.driver-trip-header h2 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: .98;
  letter-spacing: -.055em;
  margin: 2px 0 8px;
}
.driver-trip-header .message-line {
  font-size: 14px;
  color: #64748b;
  font-weight: 850;
}
.arrived-rider-card {
  border-radius: 28px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  border: 1px solid rgba(15, 35, 52, .09);
  box-shadow: 0 16px 40px rgba(15, 35, 52, .09);
}
.arrived-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.arrived-pill,
.arrived-timer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.arrived-pill {
  background: #e8fbf7;
  color: #08786e;
  border: 1px solid rgba(13, 148, 136, .2);
}
.arrived-timer-pill {
  background: #0d2338;
  color: #fff;
  box-shadow: 0 10px 22px rgba(13, 35, 56, .18);
}
.rider-card-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.rider-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #102b49;
  color: #fff;
  font-size: 27px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(16, 43, 73, .22);
}
.rider-card-copy { min-width: 0; }
.rider-card-copy span {
  display: block;
  color: #7a8798;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.rider-card-copy strong {
  display: block;
  color: #071f1d;
  font-size: 22px;
  line-height: 1.04;
  font-weight: 950;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rider-card-copy em {
  display: block;
  margin-top: 4px;
  color: #697789;
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rider-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rider-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  border: 0;
  background: #edf8f6;
  color: #08786e;
  font-size: 20px;
  font-weight: 950;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(15, 35, 52, .06);
}
.arrived-pickup-box {
  margin-top: 15px;
  padding: 14px 16px;
  border-radius: 22px;
  background: #f8fbfc;
  border: 1px solid rgba(15, 35, 52, .07);
}
.arrived-pickup-box span {
  color: #7a8798;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.arrived-pickup-box strong {
  margin-top: 4px;
  color: #10243f;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.didi-trip-actions {
  margin-top: 14px;
  gap: 11px;
}
.didi-trip-actions .swipe-start-track {
  --swipe-progress: 0%;
  position: relative;
  min-height: 64px !important;
  height: 64px;
  padding: 0 74px;
  border-radius: 999px;
  overflow: hidden;
  background: #e9f5f3 !important;
  border: 1px solid rgba(13, 148, 136, .18);
  box-shadow: 0 18px 42px rgba(13, 148, 136, .18), inset 0 1px 0 rgba(255,255,255,.85);
}
.didi-trip-actions .swipe-start-track::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(72px + var(--swipe-progress));
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #18b89f, #0e766e 70%, #07564f);
  transition: width .16s ease;
  z-index: 0;
}
.didi-trip-actions .swipe-start-track::after {
  z-index: 1;
  opacity: .6;
}
.didi-trip-actions .swipe-start-track span {
  position: relative;
  z-index: 2;
  color: #0d3d39;
  font-size: 17px !important;
  font-weight: 950;
  text-transform: none;
  letter-spacing: -.01em;
  text-shadow: none;
  pointer-events: none;
}
.didi-trip-actions .swipe-start-track.accepting span,
.didi-trip-actions .swipe-start-track.swiped span {
  color: #fff;
}
.didi-trip-actions .swipe-start-track .swipe-knob {
  width: 52px !important;
  height: 52px !important;
  top: 5px !important;
  left: 6px !important;
  background: #fff !important;
  color: #08786e !important;
  font-size: 0 !important;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 28px rgba(7, 31, 29, .24), inset 0 1px 0 rgba(255,255,255,.9);
  cursor: grab;
}
.didi-trip-actions .swipe-start-track .swipe-knob:active { cursor: grabbing; }
.didi-trip-actions .swipe-start-track .swipe-knob::before {
  content: "›";
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  transform: translateY(-1px);
}
.didi-trip-actions #cancelNoShowBtn {
  min-height: 48px !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #9b2f2f !important;
  border: 1px solid rgba(155,47,47,.18) !important;
  box-shadow: 0 8px 20px rgba(15,35,52,.06) !important;
  font-size: 15px !important;
}
.didi-trip-actions #cancelNoShowBtn:disabled {
  color: #738195 !important;
  background: #f6f9fb !important;
  border-color: rgba(15,35,52,.08) !important;
  box-shadow: none !important;
}
@media (max-width: 520px) {
  .driver-page .didi-trip-drawer {
    width: calc(100vw - 10px);
    max-height: 68vh;
    padding: 14px;
  }
  .driver-trip-header h2 { font-size: 30px; }
  .arrived-rider-card { padding: 14px; border-radius: 24px; }
  .rider-card-main { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .rider-avatar { width: 56px; height: 56px; border-radius: 18px; }
  .rider-card-copy strong { font-size: 20px; }
  .rider-card-actions { gap: 7px; }
  .rider-action-btn { width: 46px; height: 46px; border-radius: 16px; }
  .didi-trip-actions .swipe-start-track { height: 62px; min-height: 62px !important; padding: 0 66px; }
  .didi-trip-actions .swipe-start-track .swipe-knob { width: 50px !important; height: 50px !important; }
}


/* V16 driver driving-navigation mode */
.driver-navigation-active .driver-trip-drawer,
.driver-navigation-active .didi-trip-drawer {
  display: none !important;
}
.driver-navigation-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}
.driver-navigation-overlay.hidden { display: none !important; }
.driver-nav-top-card {
  position: absolute;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 30px;
  background: rgba(7, 31, 29, .96);
  color: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}
.driver-nav-turn-icon {
  width: 66px;
  height: 66px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #18b89f;
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 32px rgba(0,0,0,.22);
}
.driver-nav-copy { min-width: 0; }
.driver-nav-copy span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.driver-nav-copy strong {
  display: block;
  font-size: clamp(20px, 4.6vw, 34px);
  line-height: 1.03;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.driver-nav-copy em {
  display: block;
  margin-top: 6px;
  color: #d7b35b;
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
}
.driver-nav-bottom-card {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
  border: 1px solid rgba(15,35,52,.08);
  pointer-events: auto;
}
.driver-nav-bottom-card span {
  display: block;
  color: #738195;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.driver-nav-bottom-card strong {
  display: block;
  margin-top: 3px;
  color: #10243f;
  font-size: 17px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.driver-nav-end-btn {
  border: 0;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #10243f;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(16,36,63,.26);
}
.nav-step-row {
  grid-template-columns: 42px 1fr auto !important;
  gap: 12px !important;
  border: 1px solid rgba(15,35,52,.06) !important;
  margin-bottom: 8px;
  background: #fff;
}
.nav-step-row.is-current {
  background: #eefbf8;
  border-color: rgba(13,148,136,.22) !important;
}
.nav-step-row .nav-step-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  background: #10243f !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}
.nav-step-row.is-current .nav-step-icon { background: #0e766e !important; }
.nav-step-row strong { font-size: 14px !important; }
.nav-step-row em { color: #0e766e !important; font-weight: 950 !important; }
@media (max-width: 520px) {
  .driver-nav-top-card {
    grid-template-columns: 62px 1fr;
    padding: 12px;
    border-radius: 24px;
    top: max(10px, env(safe-area-inset-top));
  }
  .driver-nav-turn-icon { width: 56px; height: 56px; border-radius: 20px; font-size: 36px; }
  .driver-nav-copy strong { font-size: 22px; }
  .driver-nav-bottom-card { bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 22px; padding: 12px; }
  .driver-nav-end-btn { min-height: 48px; padding: 0 16px; }
}

/* V17 production driver navigation upgrades */
.driver-navigation-active .driver-app-topbar,
.driver-navigation-active #gpsChip,
.driver-navigation-active .driver-gps-chip,
.driver-navigation-active #coverageMapLegend,
.driver-navigation-active .coverage-map-legend,
.driver-navigation-active #coverageAlertCard,
.driver-navigation-active .coverage-alert-card,
.driver-navigation-active #queuedCard,
.driver-navigation-active .queued-trip-pill {
  display: none !important;
}
.driver-navigation-active .driver-map-full,
.driver-navigation-active .driver-map-wrap {
  inset: 0 !important;
  height: 100vh !important;
}
.driver-navigation-active .map-canvas {
  height: 100vh !important;
}
.driver-nav-route-overview {
  position: absolute;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  transform: translateX(-50%) translateY(-130%);
  width: min(720px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 26px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  border: 1px solid rgba(15,35,52,.08);
  pointer-events: auto;
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.driver-navigation-overlay.route-overview-active .driver-nav-route-overview {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.driver-navigation-overlay.route-overview-active .driver-nav-top-card {
  transform: translateX(-50%) translateY(112px) scale(.96);
  opacity: .82;
}
.driver-nav-route-overview span,
.driver-lane-card span {
  display: block;
  color: #738195;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.driver-nav-route-overview strong,
.driver-lane-card strong {
  display: block;
  margin-top: 3px;
  color: #10243f;
  font-size: 18px;
  font-weight: 950;
}
.driver-nav-route-overview em {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}
.driver-nav-route-overview button,
.driver-nav-map-btn {
  border: 0;
  min-height: 48px;
  padding: 0 17px;
  border-radius: 999px;
  background: #e9fbf8;
  color: #08766d;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}
.driver-lane-card,
.driver-traffic-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  pointer-events: none;
}
.driver-lane-card {
  top: max(118px, calc(env(safe-area-inset-top) + 118px));
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,35,52,.08);
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.driver-lane-card strong { font-size: 16px; }
.driver-traffic-card {
  top: max(190px, calc(env(safe-area-inset-top) + 190px));
  width: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,35,52,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.13);
}
.traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.traffic-dot.moderate { background: #f59e0b; }
.traffic-dot.heavy { background: #dc2626; }
.driver-traffic-card strong {
  font-size: 12px;
  font-weight: 950;
  color: #10243f;
  margin-right: 5px;
}
.driver-nav-bottom-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.driver-nav-night .map-canvas {
  filter: saturate(.75) brightness(.72) contrast(1.15);
}
.driver-nav-night .driver-nav-top-card {
  background: rgba(0, 13, 23, .97);
}
.driver-nav-night .driver-nav-bottom-card,
.driver-nav-night .driver-lane-card,
.driver-nav-night .driver-traffic-card,
.driver-nav-night .driver-nav-route-overview {
  background: rgba(8, 22, 32, .94);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.driver-nav-night .driver-nav-bottom-card strong,
.driver-nav-night .driver-lane-card strong,
.driver-nav-night .driver-nav-route-overview strong,
.driver-nav-night .driver-traffic-card strong { color: #fff; }
.driver-nav-night .driver-nav-bottom-card span,
.driver-nav-night .driver-lane-card span,
.driver-nav-night .driver-nav-route-overview span,
.driver-nav-night .driver-nav-route-overview em { color: rgba(255,255,255,.70); }
@media (max-width: 520px) {
  .driver-nav-route-overview {
    top: max(10px, env(safe-area-inset-top));
    border-radius: 22px;
    padding: 12px;
  }
  .driver-navigation-overlay.route-overview-active .driver-nav-top-card {
    transform: translateX(-50%) translateY(100px) scale(.95);
  }
  .driver-lane-card { top: max(104px, calc(env(safe-area-inset-top) + 104px)); border-radius: 18px; padding: 10px 12px; }
  .driver-traffic-card { top: max(164px, calc(env(safe-area-inset-top) + 164px)); }
  .driver-nav-bottom-card { grid-template-columns: 1fr; }
  .driver-nav-map-btn,
  .driver-nav-end-btn { width: 100%; }
}

/* V18 Go Online + production 3D navigation mode */
.driver-go-online-panel {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 62;
  width: min(520px, calc(100vw - 28px));
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,35,52,.08);
  box-shadow: 0 34px 90px rgba(15,35,52,.28);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
}
.driver-go-online-panel.hidden { display: none !important; }
.go-online-orb {
  width: 70px;
  height: 70px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #3ff4dc, #08675e 70%);
  box-shadow: 0 20px 44px rgba(13,148,136,.32);
}
.go-online-orb span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 12px rgba(255,255,255,.22);
  animation: gpsPulse 1.65s infinite;
}
.go-online-copy { min-width: 0; }
.go-online-copy h2 {
  margin: 2px 0 5px;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1;
  color: #0f2334;
  font-weight: 950;
  letter-spacing: -.04em;
}
.go-online-copy p:last-child {
  margin: 0;
  color: #68778c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.go-online-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #00c7b1, #063f3a);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .04em;
  box-shadow: 0 18px 44px rgba(8,103,94,.36);
  cursor: pointer;
}
.go-online-btn:disabled { opacity: .72; cursor: progress; }
#goOnlineHelp {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  color: #77859a;
  font-weight: 800;
}
.driver-navigation-active .driver-go-online-panel,
.driver-navigation-active #goOnlinePanel {
  display: none !important;
}
.driver-navigation-active .gm-style {
  filter: saturate(1.08) contrast(1.03);
}
.driver-navigation-active.driver-nav-night .gm-style {
  filter: invert(.9) hue-rotate(180deg) brightness(.78) saturate(.8);
}
.driver-navigation-active .driver-nav-top-card {
  background: linear-gradient(135deg, rgba(3, 26, 24, .97), rgba(8, 89, 82, .95));
  border: 1px solid rgba(255,255,255,.13);
}
.driver-navigation-active .driver-nav-turn-icon {
  background: linear-gradient(135deg, #25e0c7, #0e766e);
}
.driver-nav-top-card::after {
  content: "3D";
  position: absolute;
  right: 18px;
  top: -10px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #0e766e;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
@media (max-width: 520px) {
  .driver-go-online-panel {
    grid-template-columns: 58px 1fr;
    padding: 14px;
    border-radius: 28px;
  }
  .go-online-orb { width: 58px; height: 58px; border-radius: 22px; }
  .go-online-btn { min-height: 58px; border-radius: 22px; }
}

/* V20 native navigation handoff: remove fake web 3D/lane overlays */
.driver-native-navigation-active .driver-app-topbar,
.driver-native-navigation-active #gpsChip,
.driver-native-navigation-active .driver-gps-chip,
.driver-native-navigation-active #coverageMapLegend,
.driver-native-navigation-active .coverage-map-legend,
.driver-native-navigation-active #coverageAlertCard,
.driver-native-navigation-active .coverage-alert-card,
.driver-native-navigation-active #queuedCard,
.driver-native-navigation-active .queued-trip-pill,
.driver-native-navigation-active .driver-trip-drawer,
.driver-native-navigation-active .didi-trip-drawer,
.driver-native-navigation-active #tripCard,
.driver-native-navigation-active #offerCard,
.driver-native-navigation-active #offerEmpty {
  display: none !important;
}
.driver-navigation-overlay.native-handoff {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 18, 31, .10), rgba(4, 18, 31, .02) 42%, rgba(4, 18, 31, .18));
}
.driver-navigation-overlay.native-handoff.hidden { display: none !important; }
.driver-native-nav-card {
  position: absolute;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 70px rgba(15, 35, 52, .24);
  border: 1px solid rgba(15, 35, 52, .08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
.native-nav-icon {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #00c7b1, #073d38);
  color: #fff;
  font-size: 30px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(8, 103, 94, .28);
}
.native-nav-copy { min-width: 0; }
.native-nav-copy span,
.driver-native-destination-card span {
  display: block;
  color: #68778c;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.native-nav-copy strong,
.driver-native-destination-card strong {
  display: block;
  margin-top: 2px;
  color: #0f2334;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.native-nav-copy em {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.native-nav-primary,
.native-nav-end {
  border: 0;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}
.native-nav-primary {
  background: #e9fbf8;
  color: #08766d;
}
.native-nav-end {
  background: #10243f;
  color: #fff;
  box-shadow: 0 14px 34px rgba(16, 36, 63, .26);
}
.driver-native-destination-card {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 70px rgba(15, 35, 52, .24);
  border: 1px solid rgba(15, 35, 52, .08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
.driver-native-navigation-active .driver-nav-top-card,
.driver-native-navigation-active .driver-lane-card,
.driver-native-navigation-active .driver-traffic-card,
.driver-native-navigation-active .driver-nav-route-overview,
.driver-native-navigation-active .driver-nav-bottom-card { display: none !important; }
@media (max-width: 560px) {
  .driver-native-nav-card {
    grid-template-columns: 52px minmax(0, 1fr);
    border-radius: 24px;
    padding: 12px;
  }
  .native-nav-icon { width: 52px; height: 52px; border-radius: 20px; font-size: 28px; }
  .native-nav-primary { grid-column: 1 / -1; width: 100%; }
  .native-nav-copy strong { font-size: 18px; }
  .native-nav-copy em { white-space: normal; }
  .driver-native-destination-card { grid-template-columns: 1fr; border-radius: 24px; }
  .native-nav-end { width: 100%; }
}

/* V21 driver production coverage cleanup */
.driver-page .coverage-map-legend {
  top: auto !important;
  left: 14px !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 12 !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 14px 34px rgba(15,35,52,.14) !important;
  font-size: 11px !important;
  transform: translateZ(0);
}
.driver-page .coverage-map-legend .legend-row:nth-child(2) span:last-child::before {
  content: "Pickup closed";
  font-size: 0;
}
.driver-page .coverage-map-legend .legend-row:nth-child(2) span:last-child {
  font-size: 0;
}
.driver-page .coverage-map-legend .legend-row:nth-child(2) span:last-child::before {
  font-size: 11px;
}
.driver-page .coverage-alert-card {
  top: auto !important;
  left: 14px !important;
  right: 14px !important;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)) !important;
  max-width: 390px !important;
  z-index: 18 !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 42px rgba(15,35,52,.16) !important;
}
.driver-page .driver-go-online-panel {
  z-index: 64 !important;
  bottom: max(24px, env(safe-area-inset-bottom)) !important;
  width: min(460px, calc(100vw - 28px)) !important;
  grid-template-columns: 62px 1fr !important;
  border-radius: 30px !important;
  padding: 16px !important;
}
.driver-page .go-online-orb {
  width: 62px !important;
  height: 62px !important;
  border-radius: 23px !important;
}
.driver-page .go-online-copy h2 {
  font-size: clamp(21px, 4.4vw, 28px) !important;
}
.driver-page .go-online-btn {
  min-height: 58px !important;
  border-radius: 21px !important;
}
.driver-page .driver-go-online-panel:not(.hidden) ~ #offerEmpty,
.driver-page #goOnlinePanel:not(.hidden) ~ #offerEmpty {
  display: none !important;
}
.driver-page .driver-searching-card.hidden,
.driver-page #offerEmpty.hidden {
  display: none !important;
}
.driver-page:not(.driver-navigation-active):not(.driver-native-navigation-active) .gm-style [style*="font-size: 10px"] {
  pointer-events: none !important;
}
@media (max-width: 520px) {
  .driver-page .coverage-map-legend {
    left: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .driver-page .driver-go-online-panel {
    width: calc(100vw - 22px) !important;
    grid-template-columns: 54px 1fr !important;
    padding: 14px !important;
  }
  .driver-page .go-online-orb {
    width: 54px !important;
    height: 54px !important;
  }
}

/* V22 Orbit Driver Drive Mode - mobile navigation style */
body.orbit-drive-navigation-active,
body.driver-navigation-active {
  background: #050b10;
}
.orbit-drive-navigation-active .driver-app-topbar,
.orbit-drive-navigation-active #gpsChip,
.orbit-drive-navigation-active .driver-gps-chip,
.orbit-drive-navigation-active #coverageMapLegend,
.orbit-drive-navigation-active .coverage-map-legend,
.orbit-drive-navigation-active #coverageAlertCard,
.orbit-drive-navigation-active .coverage-alert-card,
.orbit-drive-navigation-active #queuedCard,
.orbit-drive-navigation-active .queued-trip-pill,
.orbit-drive-navigation-active #tripCard,
.orbit-drive-navigation-active #offerCard,
.orbit-drive-navigation-active #offerEmpty,
.orbit-drive-navigation-active #goOnlinePanel {
  display: none !important;
}
.orbit-drive-navigation-active .driver-map-full,
.orbit-drive-navigation-active .driver-map-wrap,
.orbit-drive-navigation-active .map-canvas {
  inset: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
}
.orbit-drive-navigation-active .gm-style {
  filter: saturate(1.08) contrast(1.05);
}
.orbit-drive-navigation-active.driver-nav-night .gm-style {
  filter: brightness(.72) contrast(1.14) saturate(.86);
}
.driver-navigation-overlay.orbit-drive-mode {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10), transparent 22%, transparent 58%, rgba(0,0,0,.20));
  font-family: inherit;
}
.driver-navigation-overlay.orbit-drive-mode.hidden { display: none !important; }
.orbit-nav-instruction-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: max(146px, calc(132px + env(safe-area-inset-top)));
  padding: max(16px, env(safe-area-inset-top)) 18px 18px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  color: #fff;
  background: #050505;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
  pointer-events: auto;
}
.orbit-nav-turn-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  font-size: 54px;
  line-height: 1;
  font-weight: 950;
  color: #fff;
}
.orbit-nav-instruction-copy { min-width: 0; }
.orbit-nav-instruction-copy > span {
  display: block;
  color: #e5e7eb;
  font-size: clamp(18px, 4.8vw, 30px);
  font-weight: 950;
  line-height: 1;
  margin-bottom: 5px;
}
.orbit-nav-instruction-copy > strong {
  display: block;
  color: #fff;
  font-size: clamp(30px, 8.5vw, 54px);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orbit-lane-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(36px, 1fr));
  gap: 0;
  align-items: center;
  margin-top: 14px;
  max-width: 360px;
  height: 38px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.16);
}
.orbit-lane-strip b {
  display: grid;
  place-items: center;
  height: 38px;
  color: rgba(255,255,255,.44);
  font-size: 30px;
  border-right: 1px solid rgba(255,255,255,.16);
}
.orbit-lane-strip b:last-child { border-right: 0; }
.orbit-lane-strip b.active { color: #46e38c; }
.orbit-drive-route-chip,
.orbit-drive-speed-chip {
  position: absolute;
  left: 16px;
  z-index: 98;
  width: 62px;
  min-height: 62px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  padding: 6px 4px;
  background: rgba(255,255,255,.96);
  color: #111827;
  box-shadow: 0 12px 34px rgba(0,0,0,.20);
  border: 1px solid rgba(17,24,39,.10);
  pointer-events: none;
}
.orbit-drive-route-chip { bottom: 188px; }
.orbit-drive-speed-chip { bottom: 116px; background: rgba(5,5,5,.92); color: #fff; }
.orbit-drive-route-chip span,
.orbit-drive-speed-chip span { font-size: 24px; line-height: 1; font-weight: 950; }
.orbit-drive-route-chip em,
.orbit-drive-speed-chip em { font-style: normal; font-size: 10px; text-transform: uppercase; font-weight: 950; letter-spacing: .02em; }
.orbit-drive-side-actions {
  position: absolute;
  right: 14px;
  top: 42%;
  transform: translateY(-50%);
  z-index: 98;
  display: grid;
  gap: 14px;
  pointer-events: auto;
}
.orbit-drive-side-actions button,
.orbit-nav-round-btn {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.96);
  color: #111827;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  cursor: pointer;
}
.orbit-drive-bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px 64px;
  gap: 12px;
  align-items: center;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -22px 54px rgba(0,0,0,.22);
  pointer-events: auto;
}
.orbit-nav-trip-summary {
  min-width: 0;
  text-align: center;
}
.orbit-nav-trip-summary strong {
  display: block;
  color: #18a875;
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}
.orbit-nav-trip-summary span {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: clamp(18px, 4.7vw, 28px);
  font-weight: 900;
}
.orbit-nav-destination-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 18px 0 12px;
  border-top: 1px solid rgba(15,23,42,.10);
}
.orbit-nav-destination-row::before {
  content: "\1F464";
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #0f172a;
}
.orbit-nav-destination-row span {
  grid-column: 2;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.orbit-nav-destination-row strong {
  grid-column: 2 / -1;
  color: #0f172a;
  font-size: clamp(18px, 4.8vw, 25px);
  line-height: 1.1;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orbit-end-trip-btn {
  grid-column: 1 / -1;
  min-height: 54px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #dc2626;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}
.orbit-drive-bottom-sheet.collapsed .orbit-nav-destination-row,
.orbit-drive-bottom-sheet.collapsed .orbit-end-trip-btn { display: none; }
@media (min-width: 720px) {
  .orbit-nav-instruction-card {
    left: 50%;
    right: auto;
    top: max(14px, env(safe-area-inset-top));
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 24px));
    border-radius: 28px;
    min-height: 130px;
    padding: 20px;
  }
  .orbit-drive-bottom-sheet {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 24px));
    border-radius: 28px;
    bottom: 14px;
    padding-bottom: 16px;
  }
}
@media (max-width: 460px) {
  .orbit-nav-instruction-card { grid-template-columns: 58px minmax(0,1fr); gap: 10px; min-height: 124px; }
  .orbit-nav-turn-icon { width: 56px; height: 56px; font-size: 42px; }
  .orbit-lane-strip { margin-top: 9px; height: 30px; }
  .orbit-lane-strip b { height: 30px; font-size: 24px; }
  .orbit-drive-side-actions { right: 10px; gap: 10px; }
  .orbit-drive-side-actions button,
  .orbit-nav-round-btn { width: 54px; height: 54px; }
  .orbit-drive-bottom-sheet { grid-template-columns: 58px minmax(0, 1fr) 58px 58px; gap: 8px; padding-left: 12px; padding-right: 12px; }
}

/* V23 Driver Drive Mode polish - compact native-style UI */
.orbit-drive-navigation-active .coverage-map-legend,
.orbit-drive-navigation-active #coverageMapLegend,
.orbit-drive-navigation-active .coverage-alert-card,
.orbit-drive-navigation-active #coverageAlertCard,
.orbit-drive-navigation-active .driver-go-online-panel,
.orbit-drive-navigation-active #goOnlinePanel,
.orbit-drive-navigation-active .driver-native-nav-card,
.orbit-drive-navigation-active .driver-native-destination-card {
  display: none !important;
}

.driver-navigation-overlay.orbit-drive-mode {
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, transparent 26%, transparent 64%, rgba(0,0,0,.18) 100%) !important;
}

.orbit-nav-instruction-card {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  transform: none !important;
  width: min(470px, calc(100vw - 24px)) !important;
  min-height: 116px !important;
  padding: 16px 18px 16px !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  border-radius: 24px !important;
  background: rgba(3, 7, 18, .97) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.36) !important;
  overflow: hidden !important;
}

.orbit-nav-turn-icon {
  width: 68px !important;
  height: 68px !important;
  font-size: 56px !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.25) !important;
}

.orbit-nav-instruction-copy > span {
  color: #36d68b !important;
  font-size: clamp(22px, 4.8vw, 32px) !important;
  font-weight: 950 !important;
  margin: 0 0 4px !important;
  letter-spacing: -.035em !important;
}

.orbit-nav-instruction-copy > strong {
  max-width: 100% !important;
  color: #fff !important;
  font-size: clamp(30px, 7.5vw, 48px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.orbit-lane-strip {
  margin-top: 12px !important;
  width: min(300px, 100%) !important;
  max-width: 300px !important;
  height: 34px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  opacity: .96 !important;
}

.orbit-lane-strip b {
  height: 34px !important;
  font-size: 25px !important;
  color: rgba(255,255,255,.35) !important;
}
.orbit-lane-strip b.active { color: #35e388 !important; }

.orbit-drive-route-chip,
.orbit-drive-speed-chip {
  left: max(14px, env(safe-area-inset-left)) !important;
  width: 58px !important;
  min-height: 58px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}
.orbit-drive-route-chip { bottom: max(198px, calc(env(safe-area-inset-bottom) + 198px)) !important; }
.orbit-drive-speed-chip { bottom: max(128px, calc(env(safe-area-inset-bottom) + 128px)) !important; }

.orbit-drive-side-actions {
  right: max(14px, env(safe-area-inset-right)) !important;
  top: 51% !important;
  gap: 12px !important;
}
.orbit-drive-side-actions button,
.orbit-nav-round-btn {
  width: 56px !important;
  height: 56px !important;
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
  font-size: 25px !important;
}

.orbit-drive-bottom-sheet {
  left: 50% !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(470px, calc(100vw - 24px)) !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 56px 56px !important;
  gap: 10px !important;
  padding: 14px 14px 16px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 -16px 48px rgba(15,23,42,.22) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  backdrop-filter: blur(20px) !important;
}

.orbit-nav-trip-summary strong {
  font-size: clamp(26px, 6.4vw, 34px) !important;
  color: #25a96f !important;
  letter-spacing: -.04em !important;
}
.orbit-nav-trip-summary span {
  margin-top: 5px !important;
  font-size: clamp(16px, 4.2vw, 22px) !important;
  color: #0f172a !important;
}

.orbit-nav-destination-row {
  margin-top: 6px !important;
  padding: 15px 0 8px !important;
  grid-template-columns: 38px minmax(0, 1fr) 36px !important;
}
.orbit-nav-destination-row::before {
  width: 38px !important;
  height: 38px !important;
  content: "\1F464" !important;
}
.orbit-nav-destination-row span { font-size: 10px !important; }
.orbit-nav-destination-row strong {
  font-size: clamp(18px, 4.3vw, 24px) !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.orbit-end-trip-btn {
  min-height: 46px !important;
  font-size: 16px !important;
  color: #dc2626 !important;
  letter-spacing: .02em !important;
}

@media (min-width: 700px) {
  .orbit-nav-instruction-card {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .orbit-drive-bottom-sheet {
    width: min(470px, calc(100vw - 24px)) !important;
  }
}

@media (max-width: 430px) {
  .orbit-nav-instruction-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 106px !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .orbit-nav-turn-icon { width: 56px !important; height: 56px !important; font-size: 44px !important; }
  .orbit-lane-strip { height: 30px !important; margin-top: 9px !important; }
  .orbit-lane-strip b { height: 30px !important; font-size: 22px !important; }
  .orbit-drive-bottom-sheet {
    grid-template-columns: 52px minmax(0,1fr) 52px 52px !important;
    width: calc(100vw - 20px) !important;
    padding: 12px !important;
  }
  .orbit-drive-side-actions button,
  .orbit-nav-round-btn { width: 52px !important; height: 52px !important; }
}

/* v26: Registration no longer asks for launch suburb. Serviceability is checked at pickup/go-online. */
.subtle-launch-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(240, 253, 250, 0.7));
  color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.subtle-launch-note strong { font-size: 14px; font-weight: 900; color: #0f766e; }
.subtle-launch-note span { font-size: 13px; line-height: 1.45; color: #475569; }

/* 2026-05-20 V27: true mobile-first customer booking layout
   Fixes the squeezed desktop look on phones: compact header, dominant map,
   cleaner coverage chip, smaller inputs, and a native-style bottom sheet. */
@media (max-width: 860px) {
  html,
  body,
  body.customer-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.customer-page .app-frame,
  body.customer-page .map-stage {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    display: block !important;
  }

  body.customer-page .map-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1;
  }

  body.customer-page .map-stage::before {
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(3,14,25,.14) 0%, rgba(3,14,25,0) 22%, rgba(3,14,25,0) 54%, rgba(3,14,25,.18) 100%);
  }

  body.customer-page .rider-topbar {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    border-radius: 24px !important;
    z-index: 80 !important;
    box-shadow: 0 16px 38px rgba(6,27,43,.18) !important;
  }

  body.customer-page .rider-topbar .hamburger-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
  }

  body.customer-page .rider-location-card .eyebrow {
    margin: 0 0 2px !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }

  body.customer-page .current-map-display {
    min-height: 34px !important;
    gap: 8px !important;
  }

  body.customer-page .location-dot {
    width: 9px !important;
    height: 9px !important;
    box-shadow: 0 0 0 5px rgba(18,160,146,.13) !important;
  }

  body.customer-page .pickup-display-copy strong {
    font-size: 14px !important;
    line-height: 1.1 !important;
    max-width: calc(100vw - 116px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.customer-page .pickup-display-copy small,
  body.customer-page .header-actions {
    display: none !important;
  }

  body.customer-page .coverage-map-legend {
    top: max(84px, calc(env(safe-area-inset-top) + 82px)) !important;
    left: 12px !important;
    right: auto !important;
    z-index: 70 !important;
    display: inline-flex !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 12px 28px rgba(6,27,43,.14) !important;
  }

  body.customer-page .coverage-map-legend .legend-row {
    gap: 6px !important;
  }

  body.customer-page .coverage-map-legend .legend-dot {
    width: 10px !important;
    height: 10px !important;
  }

  body.customer-page .coverage-alert-card {
    top: max(122px, calc(env(safe-area-inset-top) + 120px)) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 72 !important;
    max-width: none !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

  body.customer-page .customer-bottom-sheet {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-height: min(50dvh, 440px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 9px 14px 13px !important;
    border-radius: 28px 28px 22px 22px !important;
    z-index: 75 !important;
    box-shadow: 0 -10px 46px rgba(6,27,43,.22) !important;
  }

  body.customer-page .sheet-toggle-btn {
    min-height: 28px !important;
    margin: 0 0 2px !important;
    padding: 0 0 4px !important;
  }

  body.customer-page .sheet-toggle-btn .sheet-handle {
    width: 50px !important;
    height: 4px !important;
  }

  body.customer-page .sheet-toggle-btn strong {
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  body.customer-page .rider-sheet-title {
    margin: 0 0 9px !important;
    align-items: center !important;
  }

  body.customer-page .rider-sheet-title .eyebrow {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  body.customer-page .rider-sheet-title h2 {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.02 !important;
  }

  body.customer-page .rider-mini-badge {
    min-height: 36px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  body.customer-page .three-step-route-form,
  body.customer-page .customer-bottom-sheet .route-form {
    gap: 7px !important;
  }

  body.customer-page .pro-route-form::before {
    left: 10px !important;
    top: 30px !important;
    bottom: 66px !important;
    opacity: .42 !important;
  }

  body.customer-page .field-label {
    margin: 0 0 3px !important;
    padding-left: 26px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body.customer-page .field-label::before {
    left: 3px !important;
    width: 13px !important;
    height: 13px !important;
    border-width: 3px !important;
  }

  body.customer-page .location-field {
    position: relative !important;
    z-index: 2;
  }

  body.customer-page .text-input,
  body.customer-page .select-input {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 19px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
  }

  body.customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 10px !important;
  }

  body.customer-page .add-stop-inline-btn {
    min-width: 104px !important;
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 19px !important;
    font-size: 15px !important;
  }

  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn {
    min-height: 58px !important;
    margin-top: 12px !important;
    border-radius: 999px !important;
    font-size: 17px !important;
  }

  body.customer-page .message-line {
    margin-top: 9px !important;
    min-height: 18px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.customer-page .location-dropdown,
  body.customer-page .destination-dropdown {
    max-height: 178px !important;
    border-radius: 18px !important;
    z-index: 4000 !important;
  }

  body.customer-page .customer-bottom-sheet.is-collapsed {
    max-height: 58px !important;
    transform: translateY(calc(100% - 58px)) !important;
  }
}

@media (max-width: 430px) {
  body.customer-page .coverage-map-legend {
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
  }

  body.customer-page .coverage-map-legend .legend-row span:last-child {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.customer-page .customer-bottom-sheet {
    max-height: min(52dvh, 450px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }

  body.customer-page .add-stop-inline-btn {
    min-width: 92px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  body.customer-page .rider-sheet-title h2 { font-size: 23px !important; }
  body.customer-page .text-input,
  body.customer-page .select-input,
  body.customer-page .add-stop-inline-btn { min-height: 50px !important; height: 50px !important; }
  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn { min-height: 54px !important; }
}

/* ==========================================================
   V28 CUSTOMER MOBILE NATIVE APP UI
   Mobile-only rebuild to match real rideshare app proportions.
   Desktop/tablet layout remains untouched.
   ========================================================== */
@media (max-width: 768px) {
  html,
  body.customer-page {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background: #eef7f4 !important;
  }

  body.customer-page .app-frame,
  body.customer-page .map-stage,
  body.customer-page .map-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.customer-page .map-canvas {
    z-index: 1 !important;
  }

  body.customer-page .map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(247, 252, 250, .32) 0%, rgba(247, 252, 250, 0) 18%, rgba(247, 252, 250, 0) 64%, rgba(247, 252, 250, .26) 100%);
  }

  body.customer-page .rider-topbar {
    position: absolute !important;
    top: max(14px, calc(env(safe-area-inset-top) + 12px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-height: 64px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 50px rgba(9, 25, 43, .16) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  body.customer-page .hamburger-btn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 26px !important;
    background: #092238 !important;
    box-shadow: 0 12px 28px rgba(9, 34, 56, .22) !important;
    justify-self: start !important;
  }

  body.customer-page .hamburger-btn span {
    width: 22px !important;
    height: 2.4px !important;
    background: #fff !important;
    border-radius: 99px !important;
  }

  body.customer-page .rider-location-card,
  body.customer-page .top-copy {
    min-width: 0 !important;
    display: block !important;
  }

  body.customer-page .top-copy .eyebrow {
    margin: 0 0 2px !important;
    font-size: 10px !important;
    letter-spacing: 2.3px !important;
    line-height: 1 !important;
    color: #007f72 !important;
  }

  body.customer-page .pickup-display {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body.customer-page .pickup-display .location-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #0fb49e !important;
    box-shadow: 0 0 0 8px rgba(15, 180, 158, .13) !important;
  }

  body.customer-page .pickup-display-copy strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: #0a2034 !important;
  }

  body.customer-page .pickup-display-copy small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    color: #7b8799 !important;
  }

  body.customer-page .header-actions {
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.customer-page .status-pill {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    background: rgba(4, 24, 39, .045) !important;
    border: 0 !important;
  }

  body.customer-page .status-pill::after {
    content: "›";
    font-size: 28px;
    line-height: 34px;
    color: #0e2638;
    font-weight: 800;
  }

  body.customer-page .coverage-map-legend {
    top: max(92px, calc(env(safe-area-inset-top) + 90px)) !important;
    left: 18px !important;
    right: auto !important;
    z-index: 78 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 12px 30px rgba(8,31,49,.14) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  body.customer-page .coverage-map-legend .legend-row {
    gap: 8px !important;
    line-height: 1.05 !important;
  }

  body.customer-page .coverage-map-legend .legend-dot {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
  }

  body.customer-page .coverage-alert-card {
    top: max(145px, calc(env(safe-area-inset-top) + 142px)) !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 79 !important;
    border-radius: 18px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  body.customer-page .customer-bottom-sheet {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 90 !important;
    max-height: min(46dvh, 410px) !important;
    min-height: min(44dvh, 390px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 12px 20px calc(92px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: rgba(255,255,255,.965) !important;
    box-shadow: 0 -18px 55px rgba(8,31,49,.22) !important;
    border: 0 !important;
    transform: translate3d(0,0,0) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), max-height .28s cubic-bezier(.2,.8,.2,1), min-height .28s cubic-bezier(.2,.8,.2,1) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    scrollbar-width: none !important;
  }

  body.customer-page .customer-bottom-sheet::-webkit-scrollbar { display: none !important; }

  body.customer-page .customer-bottom-sheet.sheet-dragging {
    transition: none !important;
  }

  body.customer-page .customer-bottom-sheet.is-expanded {
    max-height: calc(88dvh - env(safe-area-inset-top)) !important;
    min-height: calc(82dvh - env(safe-area-inset-top)) !important;
  }

  body.customer-page .customer-bottom-sheet.is-collapsed {
    min-height: 88px !important;
    max-height: 88px !important;
    transform: translate3d(0, calc(100% - 88px - env(safe-area-inset-bottom)), 0) !important;
    overflow: hidden !important;
  }

  body.customer-page .sheet-toggle-btn {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    min-height: 22px !important;
    margin: -2px 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.customer-page .sheet-toggle-btn .sheet-handle {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 48px !important;
    height: 5px !important;
    border-radius: 99px !important;
    background: #bfc7cf !important;
    margin: 0 !important;
  }

  body.customer-page .sheet-toggle-btn strong {
    position: absolute !important;
    right: 0 !important;
    top: -2px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #e7fbf7 !important;
    color: #007b70 !important;
    font-size: 11px !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
  }

  body.customer-page .rider-sheet-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
  }

  body.customer-page .rider-sheet-title .eyebrow {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    line-height: 1 !important;
    color: #bd8f2e !important;
  }

  body.customer-page .rider-sheet-title h2 {
    font-size: 29px !important;
    line-height: .98 !important;
    letter-spacing: -1.1px !important;
    margin: 0 !important;
    color: #081f33 !important;
  }

  body.customer-page .ride-time-pill,
  body.customer-page .rider-mini-badge {
    min-height: 44px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eaf8f5 !important;
    color: #0a2134 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body.customer-page .time-icon {
    color: #079883;
    font-size: 17px;
    line-height: 1;
  }

  body.customer-page .chev { color: #0a2134; opacity: .8; }

  body.customer-page .three-step-route-form,
  body.customer-page .customer-bottom-sheet .route-form {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.customer-page .pro-route-form::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 38px !important;
    bottom: 40px !important;
    width: 3px !important;
    border-radius: 99px !important;
    background: linear-gradient(180deg, #24bba9 0%, rgba(36,187,169,.28) 100%) !important;
    opacity: .65 !important;
    z-index: 0 !important;
  }

  body.customer-page .field-label {
    grid-column: 2 !important;
    position: relative !important;
    margin: 0 0 -4px !important;
    padding: 0 !important;
    color: #7a8798 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .8px !important;
    font-weight: 950 !important;
    text-transform: none !important;
  }

  body.customer-page .field-label::before {
    content: "" !important;
    position: absolute !important;
    left: -38px !important;
    top: 21px !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 5px solid #18b7a6 !important;
    box-shadow: 0 0 0 7px rgba(24,183,166,.12) !important;
    z-index: 2 !important;
  }

  body.customer-page .location-field,
  body.customer-page .stops-container,
  body.customer-page .location-info {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  body.customer-page .input-row,
  body.customer-page .destination-action-row {
    display: grid !important;
    min-width: 0 !important;
  }

  body.customer-page .pickup-native-row {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
  }

  body.customer-page .text-input,
  body.customer-page .select-input {
    height: 60px !important;
    min-height: 60px !important;
    width: 100% !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(14, 174, 157, .44) !important;
    background: rgba(251, 254, 255, .84) !important;
    box-shadow: 0 10px 24px rgba(7, 31, 50, .05) !important;
    color: #0c2236 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    padding: 18px 18px 7px !important;
    outline: none !important;
  }

  body.customer-page .text-input::placeholder { color: #8a95a5 !important; opacity: 1 !important; }

  body.customer-page .text-input:focus,
  body.customer-page .select-input:focus {
    border-color: #079883 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(15, 180, 158, .12), 0 14px 34px rgba(7, 31, 50, .08) !important;
  }

  body.customer-page .pickup-native-row .text-input {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding-right: 58px !important;
  }

  body.customer-page .input-gps-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 8px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    color: #06927f !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    z-index: 2 !important;
  }

  body.customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 98px !important;
    gap: 10px !important;
  }

  body.customer-page .add-stop-inline-btn {
    height: 60px !important;
    min-height: 60px !important;
    min-width: 98px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #ecfbf8 !important;
    color: #007c70 !important;
    box-shadow: inset 0 0 0 1px rgba(9,152,133,.13) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  body.customer-page .location-field::before {
    position: absolute;
    left: 18px;
    top: 8px;
    z-index: 3;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    color: #008e7d;
    pointer-events: none;
  }

  body.customer-page .location-field:not(.destination-field)::before { content: "Pickup location"; }
  body.customer-page .destination-field::before { content: "Drop-off location"; color: #798596; }

  body.customer-page .location-dropdown,
  body.customer-page .destination-dropdown {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 7px) !important;
    max-height: 180px !important;
    border-radius: 18px !important;
    border: 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 20px 46px rgba(5,26,44,.20) !important;
    z-index: 9999 !important;
    overflow: auto !important;
  }

  body.customer-page #destinationInfo {
    display: none !important;
  }

  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 16px 0 0 !important;
    border-radius: 999px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    letter-spacing: -.2px !important;
    box-shadow: 0 18px 36px rgba(10, 38, 64, .22) !important;
  }

  body.customer-page .message-line {
    margin: 10px 0 0 !important;
    min-height: 18px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #77839a !important;
  }

  body.customer-page .mobile-rider-tabbar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 95 !important;
    height: calc(82px + env(safe-area-inset-bottom)) !important;
    padding: 9px 18px calc(11px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 -14px 36px rgba(8,31,49,.10) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  body.customer-page .mobile-rider-tabbar a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: #8a94a2 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  body.customer-page .mobile-rider-tabbar a.active { color: #079883 !important; }
  body.customer-page .mobile-rider-tabbar .tab-icon { font-size: 20px !important; line-height: 1 !important; }

  body.customer-page .mobile-rider-tabbar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(4px + env(safe-area-inset-bottom));
    width: 116px;
    height: 4px;
    border-radius: 99px;
    background: rgba(0,0,0,.82);
    transform: translateX(-50%);
  }

  body.customer-page .gm-fullscreen-control,
  body.customer-page .gm-svpc,
  body.customer-page .gmnoprint.gm-bundled-control {
    transform: scale(.78) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 430px) {
  body.customer-page .rider-topbar {
    min-height: 60px !important;
    grid-template-columns: 50px minmax(0, 1fr) 34px !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  body.customer-page .hamburger-btn { width: 50px !important; height: 50px !important; }
  body.customer-page .pickup-display-copy strong { font-size: 14px !important; }
  body.customer-page .pickup-display-copy small { font-size: 11px !important; }
  body.customer-page .coverage-map-legend {
    top: max(84px, calc(env(safe-area-inset-top) + 82px)) !important;
    left: 14px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  body.customer-page .customer-bottom-sheet {
    max-height: min(45dvh, 388px) !important;
    min-height: min(43dvh, 372px) !important;
    padding: 10px 16px calc(88px + env(safe-area-inset-bottom)) !important;
    border-radius: 28px 28px 0 0 !important;
  }
  body.customer-page .rider-sheet-title h2 { font-size: 27px !important; }
  body.customer-page .ride-time-pill,
  body.customer-page .rider-mini-badge { min-height: 40px !important; padding: 0 12px !important; font-size: 13px !important; }
  body.customer-page .text-input,
  body.customer-page .select-input { height: 56px !important; min-height: 56px !important; font-size: 16px !important; border-radius: 17px !important; }
  body.customer-page .add-stop-inline-btn { height: 56px !important; min-height: 56px !important; min-width: 90px !important; font-size: 15px !important; }
  body.customer-page .destination-action-row { grid-template-columns: minmax(0, 1fr) 90px !important; gap: 8px !important; }
  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn { height: 58px !important; min-height: 58px !important; }
  body.customer-page .mobile-rider-tabbar { height: calc(78px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 360px) {
  body.customer-page .customer-bottom-sheet { padding-left: 13px !important; padding-right: 13px !important; }
  body.customer-page .rider-sheet-title h2 { font-size: 24px !important; }
  body.customer-page .text-input,
  body.customer-page .select-input { height: 52px !important; min-height: 52px !important; font-size: 15px !important; }
  body.customer-page .add-stop-inline-btn { height: 52px !important; min-height: 52px !important; min-width: 82px !important; font-size: 14px !important; }
  body.customer-page .destination-action-row { grid-template-columns: minmax(0, 1fr) 82px !important; }
}

@media (min-width: 769px) {
  .mobile-rider-tabbar { display: none !important; }
}

/* 2026-05-22 v40: customer three-step fare flow, origin-based route pricing, payment pre-auth and driver queue UI */
.customer-page .customer-booking-stepper {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 6px 13px;
}
.customer-page .stepper-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: rgba(6,27,43,.52);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.customer-page .stepper-pill strong {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(6,27,43,.12);
  background: rgba(255,255,255,.88);
  color: rgba(6,27,43,.62);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.customer-page .stepper-pill small { overflow: hidden; text-overflow: ellipsis; }
.customer-page .stepper-pill.active { color: var(--rider-teal-dark); }
.customer-page .stepper-pill.active strong,
.customer-page .stepper-pill.done strong {
  border-color: rgba(18,160,146,.32);
  background: linear-gradient(135deg, var(--rider-teal-dark), var(--rider-teal));
  color: #fff;
}
.customer-page .stepper-line {
  height: 3px;
  border-radius: 999px;
  background: rgba(6,27,43,.10);
}
.customer-page .stepper-line.done { background: linear-gradient(90deg, var(--rider-teal-dark), var(--rider-teal)); }
.customer-page .route-summary-main {
  display: grid;
  gap: 8px;
}
.customer-page .route-node,
.customer-page .route-summary-stops span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.customer-page .route-node b,
.customer-page .route-summary-stops b {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rider-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
}
.customer-page .route-node.destination b { background: var(--rider-teal-dark); }
.customer-page .route-summary-stops {
  display: grid;
  gap: 6px;
  padding-left: 0;
}
.customer-page .route-summary-stops span {
  min-height: 30px;
  padding: 0;
  background: transparent;
  color: rgba(6,27,43,.72);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-page .route-summary-stops b {
  background: rgba(201,162,77,.22);
  color: var(--rider-navy);
}
.customer-page .route-node small {
  margin: 0 0 2px;
  color: rgba(6,27,43,.52);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
}
.customer-page .route-node strong {
  font-size: 14px;
}
.customer-page .fare-breakdown-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.customer-page .fare-breakdown-mini span {
  min-width: 0;
  border-radius: 16px;
  padding: 8px 9px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(6,27,43,.06);
}
.customer-page .fare-breakdown-mini small,
.customer-page .fare-breakdown-mini strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-page .fare-breakdown-mini small {
  color: rgba(6,27,43,.52);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.customer-page .fare-breakdown-mini strong {
  margin-top: 3px;
  color: var(--rider-navy);
  font-size: 13px;
  font-weight: 1000;
}
.customer-page .ride-option-main small {
  display: block;
  margin-top: 6px;
  color: rgba(6,27,43,.50);
  font-size: 12px;
  font-weight: 850;
}
.customer-page .ride-option-card.active .ride-option-main small { color: rgba(6,27,43,.68); }
.customer-page .compact-payment-block label::after {
  content: " gateway";
  color: rgba(6,27,43,.46);
  font-weight: 850;
}
.customer-page .waiting-driver-status {
  padding: 16px;
  border-radius: 24px;
}
.customer-page .customer-menu.app-side-menu a:first-child {
  border-color: rgba(18,160,146,.30);
  background: linear-gradient(135deg, rgba(18,160,146,.13), rgba(255,255,255,.96));
}
@media (max-width: 520px) {
  .customer-page .customer-booking-stepper { gap: 5px; padding-bottom: 10px; }
  .customer-page .stepper-pill { gap: 4px; font-size: 10px; }
  .customer-page .stepper-pill strong { width: 22px; height: 22px; font-size: 11px; }
  .customer-page .fare-breakdown-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================
   V41 CUSTOMER UBER/DIDI COMPACT BOOKING SHEET
   Keeps the map visible. The booking flow is still 3 steps,
   but the card behaves like a real rideshare bottom sheet.
   ========================================================== */
body.customer-page {
  background: #eef3f1;
}

body.customer-page .map-stage {
  isolation: isolate;
}

body.customer-page .customer-bottom-sheet {
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: min(430px, calc(100vw - 48px)) !important;
  max-height: min(72vh, 650px) !important;
  min-height: 0 !important;
  transform: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 14px 16px 16px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 24px 70px rgba(5, 20, 34, .24) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  scrollbar-width: none !important;
  z-index: 120 !important;
}

body.customer-page .customer-bottom-sheet::-webkit-scrollbar {
  display: none !important;
}

body.customer-page .customer-bottom-sheet.is-collapsed {
  min-height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
  transform: translate3d(0, calc(100% - 72px), 0) !important;
}

body.customer-page .customer-bottom-sheet.is-expanded {
  max-height: min(78vh, 720px) !important;
  min-height: 0 !important;
}

body.customer-page .sheet-toggle-btn {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  width: 100% !important;
  min-height: 28px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 0 0 8px !important;
  margin: 0 0 6px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)) !important;
}

body.customer-page .sheet-toggle-btn .sheet-handle {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 48px !important;
  height: 5px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #c8ced6 !important;
}

body.customer-page .sheet-toggle-btn strong {
  position: absolute !important;
  right: 0 !important;
  top: -2px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #eef8f6 !important;
  color: #067d72 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body.customer-page .customer-booking-stepper {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 0 0 10px !important;
}

body.customer-page .customer-booking-stepper .stepper-line {
  display: none !important;
}

body.customer-page .stepper-pill {
  min-width: 0 !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 8px !important;
  border-radius: 999px !important;
  background: #f2f5f6 !important;
  border: 0 !important;
  color: #7b8798 !important;
}

body.customer-page .stepper-pill strong {
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #dfe7ea !important;
  color: #314153 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body.customer-page .stepper-pill small {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.customer-page .stepper-pill.active {
  background: #061f33 !important;
  color: #fff !important;
}

body.customer-page .stepper-pill.active strong {
  background: #13b8a3 !important;
  color: #fff !important;
}

body.customer-page .rider-sheet-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
}

body.customer-page .rider-sheet-title .eyebrow {
  margin: 0 0 4px !important;
  color: #0a9b8b !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
}

body.customer-page .rider-sheet-title h2 {
  margin: 0 !important;
  color: #071f35 !important;
  font-size: 25px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

body.customer-page .ride-time-pill,
body.customer-page .rider-mini-badge,
body.customer-page .mini-pill-btn {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #edf8f6 !important;
  color: #092237 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

body.customer-page .three-step-route-form,
body.customer-page .customer-bottom-sheet .route-form {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 5px 9px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.customer-page .pro-route-form::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 32px !important;
  bottom: 36px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0fb9a4, rgba(15,185,164,.20)) !important;
  opacity: .72 !important;
  z-index: 0 !important;
}

body.customer-page .field-label,
body.customer-page .location-field,
body.customer-page .stops-container,
body.customer-page .location-info {
  grid-column: 2 !important;
  min-width: 0 !important;
}

body.customer-page .field-label {
  position: relative !important;
  margin: 0 0 -2px !important;
  padding: 0 !important;
  color: #6f7c8d !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

body.customer-page .field-label::before {
  content: "" !important;
  position: absolute !important;
  left: -30px !important;
  top: 19px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 4px solid #0fb9a4 !important;
  box-shadow: 0 0 0 5px rgba(15,185,164,.13) !important;
  z-index: 2 !important;
}

body.customer-page .destination-field + .location-info,
body.customer-page #destinationInfo {
  display: none !important;
}

body.customer-page .input-row,
body.customer-page .destination-action-row,
body.customer-page .pickup-native-row {
  display: grid !important;
  min-width: 0 !important;
}

body.customer-page .pickup-native-row {
  grid-template-columns: minmax(0, 1fr) 44px !important;
}

body.customer-page .destination-action-row {
  grid-template-columns: minmax(0, 1fr) 92px !important;
  gap: 8px !important;
}

body.customer-page .text-input,
body.customer-page .select-input {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border: 1px solid rgba(9, 34, 56, .10) !important;
  border-radius: 17px !important;
  background: #f7f9fa !important;
  color: #071f35 !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  padding: 17px 15px 6px !important;
}

body.customer-page .pickup-native-row .text-input {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  padding-right: 54px !important;
}

body.customer-page .text-input:focus,
body.customer-page .select-input:focus {
  border-color: rgba(14, 164, 148, .62) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(15, 185, 164, .13) !important;
}

body.customer-page .location-field::before {
  position: absolute !important;
  left: 15px !important;
  top: 8px !important;
  z-index: 3 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #009481 !important;
  pointer-events: none !important;
}

body.customer-page .location-field:not(.destination-field)::before { content: "Pickup" !important; }
body.customer-page .destination-field::before { content: "Drop-off" !important; color: #747f90 !important; }

body.customer-page .input-gps-btn {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  width: 39px !important;
  height: 39px !important;
  margin-right: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #078b7e !important;
  box-shadow: 0 6px 16px rgba(9, 34, 56, .10) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  z-index: 2 !important;
}

body.customer-page .add-stop-inline-btn {
  width: 92px !important;
  min-width: 92px !important;
  height: 52px !important;
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: #eaf8f5 !important;
  color: #05786e !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.customer-page .location-dropdown,
body.customer-page .destination-dropdown {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 7px) !important;
  max-height: 176px !important;
  overflow: auto !important;
  z-index: 4000 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 18px 44px rgba(5, 22, 37, .20) !important;
}

body.customer-page #searchRideBtn,
body.customer-page #requestRideBtn,
body.customer-page #cancelRideBtn {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 12px 0 0 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  box-shadow: 0 15px 34px rgba(6, 26, 42, .20) !important;
}

body.customer-page .message-line {
  min-height: 16px !important;
  margin: 8px 0 0 !important;
  color: #728092 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.customer-page .ride-options-list {
  display: grid !important;
  gap: 9px !important;
  margin-top: 8px !important;
}

body.customer-page .ride-option-card,
body.customer-page .ride-type-card {
  min-height: 70px !important;
  padding: 12px 13px !important;
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid rgba(9,34,56,.10) !important;
  box-shadow: 0 10px 24px rgba(6, 26, 42, .06) !important;
}

body.customer-page .route-summary-card,
body.customer-page .payment-selector-block,
body.customer-page .waiting-driver-status,
body.customer-page .driver-summary {
  border-radius: 20px !important;
  background: #f7f9fa !important;
  border: 1px solid rgba(9,34,56,.08) !important;
  padding: 12px !important;
}

body.customer-page .payment-selector-block {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

body.customer-page .mobile-rider-tabbar {
  z-index: 105 !important;
}

body.customer-page .app-menu-backdrop {
  z-index: 900 !important;
}

body.customer-page .customer-menu.app-side-menu {
  z-index: 950 !important;
}

@media (min-width: 769px) {
  body.customer-page .customer-bottom-sheet {
    left: 28px !important;
    right: auto !important;
    bottom: 28px !important;
    width: min(430px, calc(100vw - 56px)) !important;
    max-height: calc(100vh - 148px) !important;
  }
}

@media (max-width: 768px) {
  body.customer-page .customer-bottom-sheet {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(40dvh, 360px) !important;
    min-height: 0 !important;
    padding: 11px 13px 13px !important;
    border-radius: 28px !important;
    z-index: 120 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.customer-page .customer-bottom-sheet.is-expanded {
    max-height: min(64dvh, 560px) !important;
    min-height: 0 !important;
  }

  body.customer-page .customer-bottom-sheet.is-collapsed {
    max-height: 70px !important;
    min-height: 70px !important;
    transform: translate3d(0, calc(100% - 70px), 0) !important;
  }

  body.customer-page .customer-booking-stepper {
    padding-bottom: 8px !important;
  }

  body.customer-page .stepper-pill {
    padding: 6px 6px !important;
  }

  body.customer-page .stepper-pill strong {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  body.customer-page .stepper-pill small {
    font-size: 9px !important;
  }

  body.customer-page .rider-sheet-title {
    margin-bottom: 9px !important;
  }

  body.customer-page .rider-sheet-title h2 {
    font-size: 22px !important;
  }

  body.customer-page .three-step-route-form,
  body.customer-page .customer-bottom-sheet .route-form {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 4px 8px !important;
  }

  body.customer-page .pro-route-form::before {
    left: 8px !important;
    top: 29px !important;
    bottom: 32px !important;
  }

  body.customer-page .field-label::before {
    left: -25px !important;
    top: 17px !important;
    width: 11px !important;
    height: 11px !important;
    border-width: 3px !important;
  }

  body.customer-page .text-input,
  body.customer-page .select-input,
  body.customer-page .add-stop-inline-btn {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }

  body.customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 7px !important;
  }

  body.customer-page .add-stop-inline-btn {
    width: 82px !important;
    min-width: 82px !important;
    font-size: 12px !important;
  }

  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn {
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 10px !important;
    font-size: 15px !important;
  }

  body.customer-page .mobile-rider-tabbar {
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    padding-top: 7px !important;
  }
}

@media (max-width: 430px) {
  body.customer-page .customer-bottom-sheet {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    max-height: min(39dvh, 340px) !important;
    padding: 10px 12px 12px !important;
    border-radius: 26px !important;
  }

  body.customer-page .customer-bottom-sheet.is-expanded {
    max-height: min(62dvh, 520px) !important;
  }

  body.customer-page .stepper-pill small {
    display: none !important;
  }

  body.customer-page .stepper-pill {
    padding: 5px !important;
  }

  body.customer-page .rider-sheet-title h2 {
    font-size: 20px !important;
  }

  body.customer-page .ride-time-pill,
  body.customer-page .rider-mini-badge,
  body.customer-page .mini-pill-btn {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body.customer-page .message-line {
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  body.customer-page .customer-bottom-sheet {
    max-height: min(38dvh, 318px) !important;
  }

  body.customer-page .customer-bottom-sheet.is-expanded {
    max-height: min(60dvh, 492px) !important;
  }

  body.customer-page .destination-action-row {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }

  body.customer-page .add-stop-inline-btn {
    width: 72px !important;
    min-width: 72px !important;
  }
}

/* ==========================================================
   V42 CUSTOMER MENU WALLET + RECENT ACTIVITIES
   Adds in-drawer payment methods and trip activity without
   breaking the Uber/DiDi compact booking sheet.
   ========================================================== */
body.customer-page .customer-menu.app-side-menu {
  width: min(440px, 92vw) !important;
  padding-bottom: 22px !important;
}

body.customer-page .menu-primary-links {
  margin-bottom: 14px;
}

body.customer-page .menu-secondary-links {
  margin-top: 14px;
}

body.customer-page .customer-menu-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(6,27,43,.09);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 36px rgba(6,27,43,.07);
}

body.customer-page .menu-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.customer-page .menu-section-head h3 {
  margin: 0;
  color: var(--rider-navy);
  font-size: 18px;
  line-height: 1.1;
}

body.customer-page .menu-section-copy {
  margin: -2px 0 12px;
  color: rgba(6,27,43,.58);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

body.customer-page .menu-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--rider-teal-dark);
  background: rgba(18,160,146,.12);
  border: 1px solid rgba(18,160,146,.20);
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

body.customer-page .menu-mini-list {
  display: grid;
  gap: 9px;
}

body.customer-page .menu-payment-card,
body.customer-page .menu-trip-card,
body.customer-page .menu-empty-card {
  border: 1px solid rgba(6,27,43,.08);
  border-radius: 20px;
  background: rgba(248,252,252,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

body.customer-page .menu-payment-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

body.customer-page .menu-payment-card.is-default {
  border-color: rgba(18,160,146,.32);
  background: linear-gradient(135deg, rgba(18,160,146,.11), rgba(255,255,255,.95));
}

body.customer-page .menu-payment-icon {
  width: 42px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-teal-dark));
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
}

body.customer-page .menu-payment-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.customer-page .menu-payment-copy strong,
body.customer-page .menu-empty-card strong,
body.customer-page .menu-trip-card strong {
  color: var(--rider-navy);
  font-size: 13px;
  font-weight: 1000;
}

body.customer-page .menu-payment-copy small,
body.customer-page .menu-empty-card span,
body.customer-page .menu-trip-card small {
  color: rgba(6,27,43,.55);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

body.customer-page .menu-payment-card em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(18,160,146,.14);
  color: var(--rider-teal-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.customer-page .menu-empty-card {
  display: grid;
  gap: 4px;
  padding: 12px;
}

body.customer-page .menu-action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

body.customer-page .customer-menu.app-side-menu a.menu-action-btn,
body.customer-page .customer-menu.app-side-menu a.menu-text-link {
  min-height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.customer-page .customer-menu.app-side-menu a.menu-action-btn::after,
body.customer-page .customer-menu.app-side-menu a.menu-text-link::after {
  display: none !important;
}

body.customer-page .customer-menu.app-side-menu a.menu-action-btn {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--rider-navy), var(--rider-teal-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 13px;
  font-weight: 1000;
}

body.customer-page .customer-menu.app-side-menu a.menu-text-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(18,160,146,.10) !important;
  color: var(--rider-teal-dark) !important;
  border: 1px solid rgba(18,160,146,.16) !important;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

body.customer-page .menu-trip-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body.customer-page .menu-trip-group h4 {
  margin: 0;
  color: rgba(6,27,43,.70);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.customer-page .menu-trip-card {
  display: grid;
  gap: 7px;
  padding: 11px;
}

body.customer-page .menu-trip-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

body.customer-page .menu-trip-card p {
  margin: 0;
  color: rgba(6,27,43,.72);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

body.customer-page .menu-trip-card p span {
  color: var(--rider-teal-dark);
  font-weight: 1000;
}

body.customer-page .menu-trip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.customer-page .menu-trip-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(6,27,43,.06);
  color: rgba(6,27,43,.62);
  font-size: 10px;
  font-weight: 950;
}

@media (max-width: 520px) {
  body.customer-page .customer-menu.app-side-menu {
    width: 94vw !important;
    max-width: 94vw !important;
  }
  body.customer-page .menu-payment-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  body.customer-page .menu-payment-card em {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==========================================================
   V43 CUSTOMER UBER/DIDI TRUE BOTTOM SHEET
   Step-specific heights so the card never becomes a full page.
   Route details collapse into a compact summary once fares load.
   ========================================================== */
body.customer-page .customer-bottom-sheet[data-current-step="route"],
body.customer-page .customer-bottom-sheet.is-route-step {
  max-height: min(46dvh, 420px) !important;
}

body.customer-page .customer-bottom-sheet[data-current-step="ride-options"],
body.customer-page .customer-bottom-sheet.is-options-step {
  max-height: min(56dvh, 530px) !important;
}

body.customer-page .customer-bottom-sheet[data-current-step="waiting"],
body.customer-page .customer-bottom-sheet.is-waiting-step {
  max-height: min(42dvh, 430px) !important;
}

body.customer-page .customer-bottom-sheet .panel-step { min-height: 0 !important; }

body.customer-page .customer-bottom-sheet.is-options-step .rider-sheet-title h2,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .rider-sheet-title h2 {
  font-size: 20px !important;
}

body.customer-page .customer-bottom-sheet.is-options-step .route-summary-card,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .route-summary-card {
  display: grid !important;
  gap: 5px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

body.customer-page .customer-bottom-sheet.is-options-step .ride-options-list,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-options-list {
  max-height: 210px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  scrollbar-width: none !important;
}

body.customer-page .customer-bottom-sheet.is-options-step .ride-options-list::-webkit-scrollbar,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-options-list::-webkit-scrollbar {
  display: none !important;
}

body.customer-page .customer-bottom-sheet.is-options-step .ride-option-card,
body.customer-page .customer-bottom-sheet.is-options-step .ride-type-card,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-option-card,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-type-card {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
}

body.customer-page .customer-bottom-sheet.is-options-step .payment-selector-block,
body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .payment-selector-block {
  margin-top: 8px !important;
  padding: 10px 12px !important;
}

@media (max-width: 768px) {
  body.customer-page .customer-bottom-sheet {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    border-radius: 28px 28px 24px 24px !important;
  }
  body.customer-page .customer-booking-stepper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding-bottom: 7px !important;
  }
  body.customer-page .stepper-pill {
    min-height: 26px !important;
    padding: 4px 6px !important;
  }
  body.customer-page .stepper-pill strong {
    width: 17px !important;
    height: 17px !important;
    font-size: 9px !important;
  }
  body.customer-page .stepper-pill small { display: none !important; }
  body.customer-page .customer-bottom-sheet[data-current-step="route"],
  body.customer-page .customer-bottom-sheet.is-route-step {
    max-height: min(43dvh, 390px) !important;
  }
  body.customer-page .customer-bottom-sheet[data-current-step="ride-options"],
  body.customer-page .customer-bottom-sheet.is-options-step {
    max-height: min(53dvh, 480px) !important;
  }
  body.customer-page .customer-bottom-sheet[data-current-step="waiting"],
  body.customer-page .customer-bottom-sheet.is-waiting-step {
    max-height: min(40dvh, 390px) !important;
  }
  body.customer-page .customer-bottom-sheet .rider-sheet-title h2 {
    font-size: 20px !important;
    letter-spacing: -.03em !important;
  }
  body.customer-page .customer-bottom-sheet .text-input,
  body.customer-page .customer-bottom-sheet .select-input,
  body.customer-page .customer-bottom-sheet .add-stop-inline-btn {
    height: 45px !important;
    min-height: 45px !important;
    font-size: 13px !important;
  }
  body.customer-page .customer-bottom-sheet .route-form {
    gap: 3px 7px !important;
  }
  body.customer-page .customer-bottom-sheet.is-options-step .ride-options-list,
  body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-options-list {
    max-height: 188px !important;
  }
  body.customer-page #searchRideBtn,
  body.customer-page #requestRideBtn,
  body.customer-page #cancelRideBtn {
    height: 48px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 390px) {
  body.customer-page .customer-bottom-sheet[data-current-step="ride-options"],
  body.customer-page .customer-bottom-sheet.is-options-step {
    max-height: min(50dvh, 445px) !important;
  }
  body.customer-page .customer-bottom-sheet.is-options-step .ride-options-list,
  body.customer-page .customer-bottom-sheet[data-current-step="ride-options"] .ride-options-list {
    max-height: 164px !important;
  }
}


/* 2026-05-22 v48: Orbit customer colour system from product spec */
:root {
  --orbit-primary: #0F4C5C;
  --orbit-amber: #E67E22;
  --orbit-mauve: #9B6B7C;
  --orbit-bg: #F8F6F3;
  --orbit-card: #FFFFFF;
  --orbit-text: #2C3A3A;
  --orbit-muted: #7A8B8B;
  --orbit-cream: #F9F6EE;
  --orbit-success: #2DAA9E;
  --orbit-warning: #D9534F;
  --orbit-info: #5B7B8A;
  --orbit-line: #E5E0D8;
}

body.customer-page {
  --rider-navy: var(--orbit-text);
  --rider-navy-2: var(--orbit-primary);
  --rider-teal: var(--orbit-success);
  --rider-teal-dark: var(--orbit-primary);
  --rider-cream: var(--orbit-cream);
  --rider-card: rgba(255, 255, 255, .98);
  background:
    radial-gradient(circle at 18% 8%, rgba(45,170,158,.18), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(230,126,34,.15), transparent 28%),
    linear-gradient(135deg, var(--orbit-bg), #fff 48%, var(--orbit-bg));
  color: var(--orbit-text);
}

.customer-page .map-canvas {
  background: var(--orbit-bg);
  filter: saturate(.86) contrast(1.02) sepia(.08);
}

.customer-page .rider-topbar,
.customer-page .customer-bottom-sheet,
.customer-page .stripe-payment-box,
.customer-page .payment-modal-card {
  background: rgba(255,255,255,.98);
  border-color: rgba(229,224,216,.92);
  color: var(--orbit-text);
  box-shadow: 0 28px 78px rgba(15,76,92,.18);
}

.customer-page .rider-topbar .hamburger-btn,
.customer-page .btn-primary,
.customer-page #searchRideBtn,
.customer-page #requestRideBtn,
.customer-page .menu-action-btn.primary,
.customer-page .rider-mini-badge {
  background: linear-gradient(135deg, var(--orbit-primary), #0b3d4a) !important;
  color: var(--orbit-cream) !important;
  box-shadow: 0 18px 42px rgba(15,76,92,.24) !important;
}
.customer-page .rider-topbar .hamburger-btn:hover,
.customer-page .rider-topbar .hamburger-btn.active,
.customer-page .btn-primary:hover,
.customer-page #requestRideBtn:hover {
  background: linear-gradient(135deg, var(--orbit-primary), var(--orbit-amber)) !important;
}

.customer-page .eyebrow,
.customer-page .payment-manage-link,
.customer-page .menu-text-link,
.customer-page .add-stop-inline-btn,
.customer-page .mini-pill-btn,
.customer-page .btn-secondary,
.customer-page .sheet-toggle-btn strong {
  color: var(--orbit-amber) !important;
}
.customer-page .sheet-toggle-btn strong,
.customer-page .add-stop-inline-btn,
.customer-page .mini-pill-btn,
.customer-page .btn-secondary {
  background: #fff !important;
  border-color: rgba(230,126,34,.26) !important;
}

.customer-page .field-label,
.customer-page .message-line,
.customer-page .pickup-display-copy small,
.customer-page .route-summary-card small,
.customer-page .ride-option-main span,
.customer-page .payment-help,
.customer-page .menu-section-copy,
.customer-page .customer-menu.app-side-menu a small {
  color: var(--orbit-muted) !important;
}

.customer-page .three-step-route-form::before,
.customer-page .pro-route-form::before {
  background: linear-gradient(180deg, var(--orbit-success), var(--orbit-mauve), var(--orbit-amber)) !important;
}
.customer-page .three-step-route-form > .field-label::before,
.customer-page .three-step-route-form .stop-row .field-label::before,
.customer-page .field-label::before {
  border-color: var(--orbit-mauve) !important;
  box-shadow: 0 0 0 5px rgba(155,107,124,.14) !important;
}
.customer-page .three-step-route-form > .field-label[for="originInput"]::before {
  border-color: var(--orbit-success) !important;
  box-shadow: 0 0 0 5px rgba(45,170,158,.16) !important;
}
.customer-page .three-step-route-form > .field-label[for="destinationInput"]::before {
  border-color: var(--orbit-amber) !important;
  box-shadow: 0 0 0 5px rgba(230,126,34,.14) !important;
}

.customer-page .text-input,
.customer-page .select-input,
.customer-page .three-step-route-form .text-input {
  background: var(--orbit-card) !important;
  color: var(--orbit-text) !important;
  border-color: var(--orbit-line) !important;
}
.customer-page .text-input:focus,
.customer-page .select-input:focus,
.customer-page .three-step-route-form .text-input:focus {
  border-color: var(--orbit-mauve) !important;
  box-shadow: 0 0 0 4px rgba(155,107,124,.18), 0 12px 28px rgba(15,76,92,.06) !important;
}
.customer-page #originInput:focus { border-color: var(--orbit-success) !important; box-shadow: 0 0 0 4px rgba(45,170,158,.18), 0 12px 28px rgba(15,76,92,.06) !important; }
.customer-page #destinationInput:focus { border-color: var(--orbit-amber) !important; box-shadow: 0 0 0 4px rgba(230,126,34,.16), 0 12px 28px rgba(15,76,92,.06) !important; }

.customer-page .route-summary-card,
.customer-page .compact-payment-block,
.customer-page .payment-selector-block,
.customer-page .menu-payment-card,
.customer-page .menu-trip-card,
.customer-page .menu-empty-card {
  background: var(--orbit-bg) !important;
  border-color: var(--orbit-line) !important;
}
.customer-page .route-node.origin b { background: var(--orbit-success) !important; color: #fff !important; }
.customer-page .route-node.destination b { background: var(--orbit-amber) !important; color: #fff !important; }
.customer-page .route-summary-stops b,
.customer-page .stop-row .field-label::before { background: var(--orbit-mauve) !important; }

.customer-page .ride-option-card,
.customer-page .ride-type-card {
  background: #fff !important;
  color: var(--orbit-text) !important;
  border-color: rgba(155,107,124,.42) !important;
}
.customer-page .ride-option-card.active,
.customer-page .ride-type-card.active {
  background: var(--orbit-primary) !important;
  color: var(--orbit-cream) !important;
  border-color: var(--orbit-primary) !important;
  box-shadow: 0 18px 42px rgba(15,76,92,.20) !important;
}
.customer-page .ride-option-card.active .ride-option-main strong,
.customer-page .ride-option-card.active .ride-option-main span,
.customer-page .ride-option-card.active .ride-option-price strong,
.customer-page .ride-option-card.active .ride-option-price span { color: var(--orbit-cream) !important; }
.customer-page .ride-option-price strong,
.customer-page .estimate-card h2,
.customer-page .price-value { color: var(--orbit-amber) !important; }
.customer-page .ride-option-price span { color: var(--orbit-muted) !important; }
.customer-page .surge-warning,
.customer-page .coverage-alert-card { background: #fff6f5 !important; color: var(--orbit-warning) !important; border-color: rgba(217,83,79,.26) !important; }

.customer-page .waiting-driver-status {
  background: #fff !important;
  border-color: rgba(217,83,79,.22) !important;
}
.customer-page .pulse-dot {
  background: var(--orbit-amber) !important;
  box-shadow: 0 0 0 10px rgba(230,126,34,.18) !important;
}
.customer-page #cancelRideBtn,
.customer-page .logout-link,
.customer-page .menu-close-btn {
  color: var(--orbit-warning) !important;
  border-color: var(--orbit-warning) !important;
}

.customer-page .customer-menu.app-side-menu {
  background: rgba(255,255,255,.98) !important;
  color: var(--orbit-text);
  border-color: rgba(229,224,216,.95) !important;
}
.customer-page .menu-avatar,
.customer-page .menu-payment-icon { background: var(--orbit-primary) !important; color: var(--orbit-cream) !important; }
.customer-page .menu-count-pill,
.customer-page .menu-trip-status,
.customer-page .menu-payment-card.is-default::after { background: rgba(45,170,158,.12) !important; color: var(--orbit-success) !important; }

.map-marker.marker-pickup { background: var(--orbit-success) !important; color: #fff !important; }
.map-marker.marker-destination { background: var(--orbit-amber) !important; color: #fff !important; }
.map-marker.marker-stop { background: var(--orbit-mauve) !important; color: #fff !important; }
.map-marker.marker-current { background: var(--orbit-primary) !important; }
.map-marker.marker-driver,
.map-marker.marker-car { background: var(--orbit-amber) !important; }
.leaflet-tooltip.orbit-tooltip { background: #fff !important; color: var(--orbit-text) !important; border: 1px solid var(--orbit-primary) !important; }

.customer-page .location-dropdown,
.customer-page .destination-dropdown,
.customer-page .three-step-route-form .location-dropdown,
.customer-page .three-step-route-form .destination-dropdown {
  border-color: rgba(91,123,138,.22) !important;
  background: rgba(255,255,255,.99) !important;
}
.customer-page .three-step-route-form .destination-option:hover,
.customer-page .three-step-route-form .destination-option:focus-visible,
.customer-page .three-step-route-form .destination-option.is-selecting {
  background: rgba(91,123,138,.10) !important;
  border-color: rgba(91,123,138,.26) !important;
}
.customer-page .three-step-route-form .destination-option.google .location-option-icon,
.customer-page .three-step-route-form .location-option-icon {
  background: var(--orbit-info) !important;
  color: #fff !important;
}

.customer-page .customer-booking-stepper .stepper-pill.active {
  background: var(--orbit-primary) !important;
  color: var(--orbit-cream) !important;
}
.customer-page .customer-booking-stepper .stepper-line.active,
.customer-page .legend-dot.open { background: var(--orbit-success) !important; }
.customer-page .legend-dot.closed { background: var(--orbit-warning) !important; }


/* v48 route preference and scheduling controls */
.customer-page .route-preference-card,
.customer-page .schedule-later-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--orbit-line);
  border-radius: 22px;
  background: var(--orbit-card);
}
.customer-page .preference-card-head strong,
.customer-page .schedule-switch-row span {
  display: block;
  color: var(--orbit-text);
  font-weight: 1000;
}
.customer-page .preference-card-head small {
  display: block;
  margin-top: 3px;
  color: var(--orbit-muted);
  font-weight: 750;
  font-size: 12px;
}
.customer-page .route-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.customer-page .route-toggle-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  background: var(--orbit-line);
  color: var(--orbit-text);
  font-weight: 950;
  cursor: pointer;
}
.customer-page .route-toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.customer-page .route-toggle-option:has(input:checked) {
  background: var(--orbit-primary);
  color: var(--orbit-cream);
}
.customer-page .schedule-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.customer-page .schedule-switch-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--orbit-primary);
}
.customer-page .schedule-time-input {
  margin-top: 10px;
  min-height: 48px !important;
}
@media (max-width: 520px) {
  .customer-page .route-toggle-group { grid-template-columns: 1fr; }
}

/* V49 Orbit driver theme + dispatch visibility polish */
.driver-app-page,
.driver-clean-shell {
  background: #F8F6F3;
  color: #2C3A3A;
}
.driver-app-topbar {
  background: rgba(15, 76, 92, .94);
  border-color: rgba(249, 246, 238, .22);
  color: #F9F6EE;
}
.driver-menu-btn { background: rgba(249, 246, 238, .16); }
.driver-menu-btn span { background: #F9F6EE; }
.driver-greeting,
.driver-top-copy p:last-child { color: rgba(249, 246, 238, .76); }
.driver-top-copy h1 { color: #F9F6EE; }
.driver-app-topbar .status-toggle {
  background: #2DAA9E;
  color: #F9F6EE;
  box-shadow: 0 0 0 4px rgba(45, 170, 158, .18), 0 16px 36px rgba(15, 76, 92, .24);
}
.driver-app-topbar .status-toggle.offline {
  background: rgba(249, 246, 238, .16);
  color: rgba(249, 246, 238, .86);
}
.driver-side-menu {
  background: rgba(255, 255, 255, .98);
  border-color: #E5E0D8;
  color: #2C3A3A;
}
.driver-gps-chip,
.driver-searching-card,
.driver-trip-drawer,
.driver-page .didi-offer,
.driver-page .didi-trip-drawer,
.driver-native-nav-card,
.driver-native-destination-card {
  background: rgba(255, 255, 255, .98);
  border-color: #E5E0D8;
  color: #2C3A3A;
}
.gps-pulse {
  background: #2DAA9E;
  box-shadow: 0 0 0 8px rgba(45, 170, 158, .18);
}
.driver-gps-chip button,
.swipe-accept-track,
.driver-nav-end-btn,
.driver-nav-map-btn,
.driver-native-nav-btn.primary {
  background: #0F4C5C;
  color: #F9F6EE;
}
.search-ring {
  background: conic-gradient(from 90deg, #0F4C5C, #E67E22, #2DAA9E, #0F4C5C);
}
.driver-offer-overlay {
  border-color: rgba(230, 126, 34, .36);
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 0 0 6px rgba(230, 126, 34, .12), 0 34px 90px rgba(15, 76, 92, .26);
}
@keyframes offerFlash {
  0%,100% { box-shadow: 0 0 0 6px rgba(230, 126, 34, .12), 0 34px 90px rgba(15, 76, 92, .26); }
  50% { box-shadow: 0 0 0 10px rgba(45, 170, 158, .18), 0 34px 90px rgba(15, 76, 92, .30); }
}
.offer-glow-ring {
  background: radial-gradient(circle, rgba(230, 126, 34, .28), rgba(230, 126, 34, 0) 70%);
}
.offer-close-btn,
.menu-close-btn {
  background: rgba(15, 76, 92, .08);
  color: #0F4C5C;
}
.swipe-knob {
  background: #E67E22;
  color: #F9F6EE;
}
.queued-trip-pill,
.driver-nav-top-card {
  background: rgba(15, 76, 92, .94);
  color: #F9F6EE;
  border-color: rgba(249, 246, 238, .20);
}
.queued-trip-pill em,
.driver-nav-copy em,
.driver-nav-route-overview em { color: #E67E22; }
.trip-focus-grid div,
.info-grid div,
.driver-metrics-grid div {
  background: #F8F6F3;
  border-color: #E5E0D8;
}
.driver-searching-card h2,
.driver-trip-drawer h2,
.driver-trip-header h2,
.didi-offer-topline strong { color: #2C3A3A; }
.driver-searching-card p:last-child,
.driver-gps-chip p,
.driver-trip-header .message-line { color: #7A8B8B; }
.marker-driver { background: #E67E22; }

/* V50 customer menu reachability + saved places + in-trip stop approval */
body.customer-page .app-menu-backdrop {
  z-index: 19000 !important;
  pointer-events: auto !important;
}
body.customer-page .customer-menu.app-side-menu {
  z-index: 19100 !important;
  pointer-events: auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.customer-page .hamburger-btn {
  z-index: 19200 !important;
  pointer-events: auto !important;
}
body.customer-page.rider-menu-open .customer-bottom-sheet,
body.customer-page.rider-menu-open .rider-topbar,
body.customer-page.rider-menu-open .mobile-rider-tabbar {
  pointer-events: none !important;
}
.menu-saved-place-card,
.in-trip-stop-panel,
.in-trip-stop-quote {
  background: #F8F6F3;
  border: 1px solid #E5E0D8;
  border-radius: 18px;
}
.menu-saved-place-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.menu-mini-action {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #0F4C5C;
  color: #F9F6EE;
  font-weight: 900;
  cursor: pointer;
}
.menu-mini-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}
button.menu-action-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
}
button.menu-action-btn.secondary {
  background: #FFFFFF;
  color: #E67E22;
  border: 1px solid #E5E0D8;
}
.in-trip-stop-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin: 12px 0;
}
.in-trip-stop-quote {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.in-trip-stop-quote strong {
  color: #0F4C5C;
}
.in-trip-stop-quote small {
  color: #7A8B8B;
  font-weight: 700;
}

/* Orbit v51 customer app polish: native/WebView menu, saved places, compact Uber/DiDi sheet */
.customer-page {
  --orbit-primary:#0F4C5C;
  --orbit-amber:#E67E22;
  --orbit-mauve:#9B6B7C;
  --orbit-bg:#F8F6F3;
  --orbit-card:#FFFFFF;
  --orbit-text:#2C3A3A;
  --orbit-muted:#7A8B8B;
  --orbit-cream:#F9F6EE;
  --orbit-success:#2DAA9E;
  --orbit-warning:#D9534F;
  --orbit-info:#5B7B8A;
  --orbit-line:#E5E0D8;
  background:var(--orbit-bg);
  color:var(--orbit-text);
  overflow:hidden;
}
.customer-page .app-frame,
.customer-page .map-stage,
.customer-page .map-canvas {
  min-height:100dvh;
  height:100dvh;
  width:100%;
}
.customer-page .rider-topbar {
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  left:14px;
  right:14px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:560px;
  margin:0 auto;
  border:1px solid rgba(15,76,92,.10);
  border-radius:28px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 42px rgba(15,76,92,.16);
  backdrop-filter:blur(14px);
}
.customer-page .hamburger-btn {
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:0;
  border-radius:50%;
  background:var(--orbit-primary);
  box-shadow:0 10px 24px rgba(15,76,92,.28);
}
.customer-page .hamburger-btn span {
  background:var(--orbit-cream);
  height:2px;
  width:20px;
}
.customer-page .rider-location-card { min-width:0; }
.customer-page .pickup-display-copy strong,
.customer-page .rider-sheet-title h2,
.customer-page .route-form .field-label { color:var(--orbit-text); }
.customer-page .pickup-display-copy small,
.customer-page .message-line,
.customer-page .menu-section-copy { color:var(--orbit-muted); }
.customer-page .customer-bottom-sheet {
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(76px + env(safe-area-inset-bottom)) !important;
  width:min(94vw, 520px) !important;
  max-height:min(66dvh, 620px) !important;
  min-height:0 !important;
  transform:translateX(-50%);
  overflow:auto;
  z-index:60;
  border:1px solid rgba(15,76,92,.10);
  border-radius:30px !important;
  background:var(--orbit-card);
  box-shadow:0 24px 70px rgba(44,58,58,.25);
}
.customer-page .customer-bottom-sheet.sheet-collapsed {
  max-height:86px !important;
  overflow:hidden;
}
.customer-page .sheet-toggle-btn {
  position:sticky;
  top:0;
  z-index:4;
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 100%);
}
.customer-page .sheet-handle { background:var(--orbit-line); }
.customer-page .customer-booking-stepper {
  background:var(--orbit-bg);
  border:1px solid var(--orbit-line);
  border-radius:18px;
  padding:8px;
  margin:0 14px 12px;
}
.customer-page .stepper-pill.active {
  background:var(--orbit-primary);
  color:var(--orbit-cream);
}
.customer-page .text-input,
.customer-page .select-input {
  border:1px solid var(--orbit-line);
  border-radius:16px;
  background:#fff;
  color:var(--orbit-text);
  min-height:48px;
  box-shadow:none;
}
.customer-page .text-input:focus,
.customer-page .select-input:focus {
  border-color:var(--orbit-mauve);
  box-shadow:0 0 0 4px rgba(155,107,124,.14);
  outline:0;
}
.customer-page .location-field,
.customer-page .route-preference-card,
.customer-page .schedule-later-card,
.customer-page .route-summary-card,
.customer-page .payment-line,
.customer-page .in-trip-stop-panel {
  border:1px solid rgba(15,76,92,.10);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(44,58,58,.06);
}
.customer-page .route-toggle-option:has(input:checked),
.customer-page .ride-option-card.active,
.customer-page .vehicle-card.active {
  background:var(--orbit-primary) !important;
  color:var(--orbit-cream) !important;
  border-color:var(--orbit-primary) !important;
}
.customer-page .btn-primary,
.customer-page .menu-action-btn.primary {
  background:var(--orbit-primary) !important;
  color:var(--orbit-cream) !important;
  border-color:var(--orbit-primary) !important;
}
.customer-page .btn-ghost,
.customer-page .menu-action-btn.tertiary {
  background:#fff !important;
  color:var(--orbit-warning) !important;
  border:1px solid var(--orbit-warning) !important;
}
.customer-page .add-stop-inline-btn,
.customer-page .menu-action-btn.secondary,
.customer-page .payment-manage-link,
.customer-page .menu-text-link {
  color:var(--orbit-amber) !important;
}
.customer-page .app-menu-backdrop {
  position:fixed;
  inset:0;
  z-index:190;
  background:rgba(44,58,58,.38);
  opacity:0;
  transition:opacity .22s ease;
}
.customer-page .app-menu-backdrop.open { opacity:1; }
.customer-page .app-side-menu {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:200;
  width:min(390px, 92vw);
  overflow:auto;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  border-radius:0 32px 32px 0;
  background:var(--orbit-card);
  box-shadow:28px 0 70px rgba(44,58,58,.28);
  transform:translateX(-104%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.customer-page .app-side-menu.open { transform:translateX(0); }
.customer-page .menu-brand-row {
  align-items:flex-start;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--orbit-line);
}
.customer-page .menu-avatar {
  background:var(--orbit-primary);
  color:var(--orbit-cream);
  box-shadow:0 10px 24px rgba(15,76,92,.22);
}
.customer-page .menu-primary-links a,
.customer-page .menu-secondary-links a,
.customer-page .customer-menu-section,
.customer-page .menu-saved-place-card,
.customer-page .menu-empty-card,
.customer-page .menu-address-editor {
  border:1px solid rgba(15,76,92,.10);
  border-radius:20px;
  background:var(--orbit-bg);
  box-shadow:0 10px 28px rgba(44,58,58,.055);
}
.customer-page .menu-primary-links a:hover,
.customer-page .menu-secondary-links a:hover {
  border-color:rgba(230,126,34,.38);
  transform:translateY(-1px);
}
.customer-page .customer-menu-section {
  padding:14px;
  margin-top:14px;
}
.customer-page .saved-place-editor-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:12px 0;
}
.customer-page .menu-address-editor {
  display:grid;
  gap:8px;
  padding:12px;
}
.customer-page .menu-address-editor > span {
  font-size:12px;
  font-weight:900;
  color:var(--orbit-text);
}
.customer-page .menu-action-row.compact {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:0;
}
.customer-page .menu-action-btn {
  min-height:40px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
}
.customer-page .mobile-rider-tabbar {
  position:absolute;
  z-index:72;
  left:50%;
  bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(94vw, 520px);
  border:1px solid rgba(15,76,92,.10);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 42px rgba(44,58,58,.16);
  backdrop-filter:blur(14px);
}
.customer-page .mobile-rider-tabbar a.active {
  background:var(--orbit-primary);
  color:var(--orbit-cream);
}
@media (min-width: 780px) {
  .customer-page .rider-topbar { right:auto; width:520px; }
  .customer-page .customer-bottom-sheet { left:36px !important; transform:none; bottom:32px !important; max-height:min(72dvh, 680px) !important; }
  .customer-page .mobile-rider-tabbar { display:none; }
}

/* v59 customer schedule/stop refinements */
.add-stop-below-destination {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  white-space: nowrap;
}
.schedule-picker-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr .75fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.schedule-picker-row.hidden { display: none !important; }
.schedule-meridiem-input { min-height: 44px; }
.stop-row .stop-input-row::before {
  content: '☰';
  color: #9B6B7C;
  font-weight: 900;
  padding: 0 4px 0 2px;
}
@media (max-width: 520px) {
  .schedule-picker-row { grid-template-columns: 1fr; }
}

/* Orbit v61 driver menu categories */
.driver-menu-groups {
  display: grid;
  gap: 12px;
  margin: 10px 0 16px;
}
.driver-menu-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #E5E0D8;
  border-radius: 22px;
  background: #F8F6F3;
}
.driver-menu-group h3 {
  margin: 0 0 2px;
  color: #0F4C5C;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.driver-menu-group button,
.driver-menu-group a {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #E5E0D8;
  border-radius: 16px;
  background: #FFFFFF;
  color: #2C3A3A;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(15,76,92,.05);
}
.driver-menu-group button::after,
.driver-menu-group a::after {
  content: '›';
  color: #E67E22;
  font-size: 18px;
  font-weight: 950;
}
.driver-menu-group .danger-link {
  color: #D9534F;
}

/* V64 driver menu: clubbed working menu hub */
.driver-menu-groups-compact {
  display: grid;
  gap: 14px;
}
.driver-menu-overview .driver-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.driver-side-menu .driver-menu-grid button,
.driver-side-menu .driver-menu-panel-actions button {
  width: 100%;
  border: 1px solid rgba(15,76,92,.14);
  background: #F8F6F3;
  color: #2C3A3A;
  border-radius: 16px;
  padding: 12px 10px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.driver-side-menu .driver-menu-grid button:hover,
.driver-side-menu .driver-menu-panel-actions button:hover {
  background: rgba(15,76,92,.08);
  color: #0F4C5C;
}
.driver-menu-action-panel {
  border: 1px solid rgba(15,76,92,.12);
  background: #fff;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 16px 36px rgba(15,76,92,.08);
}
.driver-menu-action-panel h3 {
  margin: 3px 0 6px;
  color: #2C3A3A;
  font-size: 18px;
}
.driver-menu-action-panel p:not(.eyebrow) {
  margin: 0 0 12px;
  color: #7A8B8B;
  font-weight: 700;
  line-height: 1.45;
}
.driver-menu-panel-actions {
  display: grid;
  gap: 9px;
}
.driver-menu-panel-actions button:first-child {
  background: #0F4C5C;
  color: #F9F6EE;
}

/* V67 smart driver menu panels */
.driver-smart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.driver-smart-grid > div,
.driver-smart-row,
.driver-trip-card {
  border: 1px solid rgba(15,76,92,.12);
  background: #FFFFFF;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15,76,92,.06);
}
.driver-smart-grid span,
.driver-trip-card small {
  display: block;
  color: #7A8B8B;
  font-size: 11px;
  font-weight: 800;
}
.driver-smart-grid strong {
  display: block;
  margin-top: 3px;
  color: #0F4C5C;
  font-size: 18px;
  font-weight: 950;
}
.driver-smart-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.driver-smart-row b,
.driver-trip-card b {
  color: #2C3A3A;
  font-weight: 950;
}
.driver-smart-row span,
.driver-trip-card span {
  color: #E67E22;
  font-weight: 900;
}
.driver-trip-card {
  display: grid;
  gap: 4px;
  margin: 9px 0;
}
.driver-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.driver-filter-row button {
  border: 1px solid rgba(15,76,92,.14);
  border-radius: 999px;
  padding: 9px 10px;
  background: #F8F6F3;
  color: #0F4C5C;
  font-weight: 900;
}

/* V74 Orbit brand assets: web logo/icon support from root PNGs */
.orbit-brand-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.orbit-web-logo { display: block; width: auto; object-fit: contain; }
.orbit-web-logo.rider-logo { height: 34px; max-width: 128px; }
.orbit-auth-logo { display: block; width: auto; max-width: 180px; max-height: 72px; object-fit: contain; margin: 0 0 14px; }
.auth-card .orbit-auth-logo { margin-left: auto; margin-right: auto; }
.orbit-driver-top-icon { width: 44px; height: 44px; border-radius: 16px; object-fit: cover; box-shadow: 0 12px 28px rgba(15, 76, 92, .20); background: #fff; }
.orbit-menu-avatar { width: 54px; height: 54px; border-radius: 18px; object-fit: cover; box-shadow: 0 12px 30px rgba(15, 76, 92, .18); background: #fff; flex: 0 0 auto; }
.brand-mark-img { width: 42px !important; height: 42px !important; border-radius: 14px; object-fit: cover; padding: 0 !important; background: transparent !important; }
.driver-app-topbar { gap: 10px; }
.customer-page .orbit-brand-row .eyebrow { margin: 0; }
@media (max-width: 520px) {
  .orbit-web-logo.rider-logo { height: 28px; max-width: 96px; }
  .orbit-driver-top-icon { width: 38px; height: 38px; border-radius: 14px; }
  .orbit-auth-logo { max-width: 150px; max-height: 62px; }
}


/* V82 customer booking sheet focus behavior: compact normally, full-screen while editing. */
body.customer-page .customer-bottom-sheet.is-focused,
body.customer-page .customer-bottom-sheet.is-focused[data-current-step],
body.customer-page .customer-bottom-sheet.is-focused.is-route-step,
body.customer-page .customer-bottom-sheet.is-focused.is-options-step,
body.customer-page .customer-bottom-sheet.is-focused.is-waiting-step {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  top: calc(12px + env(safe-area-inset-top)) !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  transform: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-radius: 28px !important;
  z-index: 890 !important;
}

body.customer-page .customer-bottom-sheet.is-focused .route-form {
  gap: 12px !important;
}

body.customer-page .customer-bottom-sheet.is-focused .panel-step.active {
  padding-bottom: 24px !important;
}

body.customer-page .customer-bottom-sheet.is-focused .customer-booking-stepper {
  position: sticky !important;
  top: 35px !important;
  z-index: 7 !important;
  background: rgba(255,255,255,.96) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(5, 20, 34, .08) !important;
}

@media (min-width: 769px) {
  body.customer-page .customer-bottom-sheet.is-focused,
  body.customer-page .customer-bottom-sheet.is-focused[data-current-step],
  body.customer-page .customer-bottom-sheet.is-focused.is-route-step,
  body.customer-page .customer-bottom-sheet.is-focused.is-options-step,
  body.customer-page .customer-bottom-sheet.is-focused.is-waiting-step {
    left: 50% !important;
    right: auto !important;
    top: 24px !important;
    bottom: 24px !important;
    width: min(760px, calc(100vw - 48px)) !important;
    transform: translateX(-50%) !important;
  }
}

body.customer-page .customer-bottom-sheet.is-collapsed.is-focused {
  max-height: 72px !important;
  min-height: 72px !important;
}

/* v85: remove noisy map live/status cluster while keeping DOM targets for JS updates. */
.map-status-cluster-hidden {
  display: none !important;
}

/* v85: premium rating star control used by the customer completion screen. */
.orbit-premium-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.orbit-premium-stars button {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 76, 92, .12);
  color: #ffc145;
  font-size: 29px;
  line-height: 1;
}
.orbit-premium-stars button:not(.selected) {
  color: #d8d1c8;
}

/* v150 Super Admin fare grouping */
.pricing-form fieldset {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  padding: 16px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.72);
}
.pricing-form legend {
  font-weight: 800;
  color: #0f172a;
  padding: 0 8px;
}
.pricing-form fieldset label {
  min-width: 220px;
}