.ride-booking { max-width:1180px; padding-top:36px; padding-bottom:40px; color:#082c3b; }
.ride-booking-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:24px; }
.ride-booking-heading h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.04em; }
.ride-booking-heading p { color:#526b75; }
.ride-booking-heading > a { color:#087856; font-size:.85rem; }
.ride-booking .ride-kicker { color:#087856; font-weight:800; font-size:.72rem; letter-spacing:.14em; margin-bottom:8px; }
.ride-progress { display:flex; gap:8px; margin-bottom:24px; }
.ride-progress button { border:0; background:transparent; display:flex; gap:8px; align-items:center; padding:8px 12px; color:#526b75; font-size:.9rem; }
.ride-progress b { display:grid; place-items:center; height:26px; width:26px; border-radius:50%; background:#e6ece9; }
.ride-progress [aria-current="step"] { color:#006e50; font-weight:800; }
.ride-progress [aria-current="step"] b { background:#00835e; color:#fff; }
.ride-booking-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:start; }
.ride-booking-panel,.ride-journey-panel { border:1px solid #dfe8e4; border-radius:22px; background:#fff; overflow:hidden; }
.ride-booking-panel { padding:28px; }
.ride-booking h2 { font-size:1.5rem; font-weight:750; margin-bottom:20px; letter-spacing:-.02em; }
.ride-booking h3 { font-size:1.1rem; font-weight:750; }
.ride-booking label { font-weight:650; font-size:.9rem; margin-bottom:8px; }
.ride-booking label span { font-weight:400; color:#5a7078; }
.ride-booking .form-control,.ride-booking .form-select { min-height:50px; border:1px solid #cddcd5; border-radius:12px; background:#fcfefd; }
.ride-booking .form-control:focus,.ride-booking .form-select:focus { border-color:#00835e; box-shadow:0 0 0 3px #00835e20; }
.ride-booking [aria-invalid="true"] { border-color:#b42318; }
.ride-text-button { border:0; background:transparent; color:#087856; padding:10px 0; min-height:44px; font-size:.85rem; font-weight:650; }
.ride-route-inputs > label { display:block; }
.ride-route-inputs > label:not(:first-child) { margin-top:8px; }
.ride-schedule-toggle { display:flex; align-items:center; gap:10px; min-height:44px; }
.ride-booking input[type="checkbox"],.ride-booking input[type="radio"] { width:18px; height:18px; flex-shrink:0; accent-color:#00835e; }
.ride-extra { border-top:1px solid #e2ebe6; margin-top:22px; padding-top:18px; }
.ride-extra summary { cursor:pointer; font-size:.9rem; font-weight:650; padding:6px 0; }
.ride-vehicle-options { display:grid; gap:12px; margin-bottom:22px; }
.ride-booking .ride-vehicle { display:flex; align-items:center; gap:14px; border:1px solid #cfddd6; border-radius:14px; padding:18px 14px; margin:0; cursor:pointer; }
.ride-vehicle:has(input:checked) { background:#edf8f2; border-color:#00835e; box-shadow:inset 0 0 0 1px #00835e; }
.ride-vehicle > i { font-size:1.8rem; color:#087856; }
.ride-vehicle strong,.ride-vehicle small { display:block; }
.ride-vehicle small { font-weight:400; margin-top:3px; color:#526b75; }
.ride-fare-box { background:#f1f7f4; border-radius:14px; padding:20px; margin-top:24px; }
.ride-fare-box p,.ride-fare-box small { color:#526b75; font-size:.85rem; }
.ride-map { height:300px; background:#edf4ef; }
.ride-map-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; padding:28px; color:#536d63; }
.ride-map-placeholder i { font-size:2rem; margin-bottom:12px; }
.ride-map-placeholder p { font-size:.9rem; margin-top:12px; }
.ride-route-status { font-size:.8rem; color:#536b75; margin:0; padding:12px 20px; border-bottom:1px solid #e4ebe7; }
.ride-journey-summary { padding:20px; display:grid; gap:10px; overflow-wrap:anywhere; }
.ride-journey-summary span { color:#526b75; font-size:.9rem; }
.ride-availability { display:flex; gap:12px; padding:18px 20px; background:#f7faf8; font-size:.85rem; color:#526b75; }
.ride-availability p { margin:0; }
.ride-booking-actions { position:sticky; bottom:0; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding:16px; border:1px solid #e0e9e3; border-radius:16px; background:#fffffff7; box-shadow:0 -4px 24px #06253508; }
.ride-booking-actions > div { display:flex; align-items:center; gap:14px; }
.ride-booking-actions .btn { min-height:48px; padding:12px 22px; border-radius:12px; font-weight:700; }
#rideStepCount { font-size:.8rem; color:#536b75; }
.ride-review { display:grid; gap:12px; padding:18px; border-radius:14px; background:#f2f7f4; }
.ride-review div { display:grid; grid-template-columns:85px 1fr; gap:12px; font-size:.9rem; overflow-wrap:anywhere; }
.ride-review span { color:#526b75; }
.ride-contact { border-top:1px solid #e0e9e3; margin-top:12px; padding-top:22px; }
.ride-contact p { font-size:.85rem; }
.ride-request-note { margin:22px 0; color:#526b75; font-size:.85rem; }
.ride-confirm { display:flex; align-items:start; gap:10px; }
.ride-booking button:focus-visible,.ride-booking a:focus-visible { outline:3px solid #00835e; outline-offset:3px; }
@media(max-width:767.98px) { .ride-booking { padding:24px 16px; } .ride-booking-heading { display:block; } .ride-booking-grid { grid-template-columns:1fr; gap:16px; } .ride-booking-panel { padding:20px; } .ride-journey-panel { order:2; } .ride-map { height:220px; } .ride-progress { gap:0; justify-content:space-between; } .ride-progress button { font-size:.8rem; padding:8px 4px; gap:5px; } .ride-booking-actions { margin-left:-8px; margin-right:-8px; padding:12px 8px; bottom:0; padding-bottom:max(12px,env(safe-area-inset-bottom)); } .ride-booking-actions .btn { padding:12px 14px; } #rideStepCount { display:none; } .ride-journey-panel[data-compact="true"] .ride-map,.ride-journey-panel[data-compact="true"] .ride-route-status { display:none; } }

.ride-status-progress { display:flex; flex-wrap:wrap; gap:12px 24px; padding-left:20px; margin:24px 0; font-size:.85rem; color:#61756b; } .ride-status-progress .complete { color:#007454; font-weight:750; }
.ride-map-tools { display:flex; gap:8px; padding:8px 16px; border-top:1px solid #e4ebe7; } .ride-map-tools button { flex:1; min-height:44px; border:1px solid #cddcd5; border-radius:8px; background:#fff; color:#087856; font-size:.8rem; } .ride-map-tools button:disabled { color:#75877e; } [data-map-unavailable="true"] .ride-map { height:180px; } [data-map-unavailable="true"] .ride-map-tools { display:none; } @media(max-width:767.98px) { .ride-journey-panel[data-compact="true"] .ride-map-tools { display:none; } }
/* Keep the explicit confirmation visible with its submit action. */
.ride-booking-actions { flex-wrap:wrap; background:#fff; }
.ride-booking-actions > .ride-confirm-action { flex:0 0 100%; display:block; }
.ride-booking-actions > .ride-confirm-action[hidden] { display:none; }
.ride-confirm-action .ride-confirm { margin:0; align-items:center; font-size:.85rem; }
.ride-confirm-action #rideConfirmHelp { display:block; margin:8px 0 0 28px; }
.ride-confirm-action #rideConfirmHelp[hidden] { display:none; }