/* LiveMap booking concept 1: scoped presentation, original APIs and map retained. */
#ride-booking-section { background: #F4F8FF; padding: 48px 0; scroll-margin-top: 90px; --mf-blue: #003DA5; --mf-navy: #092551; }
#ride-booking-section > .mf-container { width: calc(100% - 64px); max-width: 1480px; }
#ride-booking-section .mf-section-header-center { margin-bottom: 22px; }
#ride-booking-section .mf-badge-pill { display: inline-flex; width: auto; padding: 6px 16px; border-radius: 30px; background: #E8F1FF; color: #003DA5; }
#ride-booking-section .mf-section-title { font-size: clamp(28px,2.7vw,40px); font-weight: 800; color: #092551; }
#ride-booking-section .mf-section-subtitle { color: #64748B; font-size: 16px; }
#ride-booking-section .mf-highlight-blue { color: #003DA5; }
#ride-booking-section .mf-ride-category-tabs { gap: 12px; margin-bottom: 28px; }
#ride-booking-section .mf-cat-tab { padding: 13px 22px; font-size: 15px; background: white; color: #092551; border: 1px solid #DCE6F2; }
#ride-booking-section .mf-cat-tab.is-active { background: #003DA5; border-color: #003DA5; color: white; }
#ride-booking-section .mf-booking-layout { grid-template-columns: minmax(280px,1fr) minmax(0,2fr) minmax(280px,1fr); gap: 20px; align-items: stretch; }
#ride-booking-section .mf-booking-layout > * { min-width: 0; border-radius: 22px; border: 1px solid #E0E9F5; box-shadow: 0 8px 28px rgba(6,43,111,.06); background: white; }
#ride-booking-section .mf-booking-card-form, #ride-booking-section .mf-booking-driver-list { padding: 22px; }
#ride-booking-section .mf-booking-form-head, #ride-booking-section .mf-driver-list-header { align-items: flex-start; gap: 8px; margin-bottom: 20px; padding-bottom: 16px; }
#ride-booking-section .mf-card-title { font-size: 19px; line-height: 1.5; color: #092551; }
#ride-booking-section .mf-badge-status-real { font-size: 11px; background: #E8F1FF; color: #003DA5; border-color: #DCE6F2; }
#ride-booking-section .mf-label-with-icon, #ride-booking-section .mf-form-label { font-size: 15px; margin-bottom: 10px; }
#ride-booking-section .mf-form-group { margin-bottom: 20px; }
#ride-booking-section .mf-booking-card-form .mf-form-control { min-height: 52px; border-radius: 12px; padding: 12px; font-size: 14px; background: #FFF; border: 1px solid #CFDDF0; }
#ride-booking-section #map-pickup-input { padding-right: 42px; }
#ride-booking-section .mf-btn-map-locate { right: 9px; }
#ride-booking-section .mf-vehicle-selector-grid { gap: 12px; }
#ride-booking-section .mf-vehicle-card-option { min-height: 88px; padding: 14px; gap: 14px; border-radius: 14px; background: #FFF; }
#ride-booking-section .mf-vehicle-card-option.is-selected { background: #EAF3FF; border-color: #003DA5; box-shadow: inset 0 0 0 1px #003DA5; }
#ride-booking-section .mf-vt-icon { font-size: 30px; }
#ride-booking-section .mf-vt-name { font-size: 16px; }
#ride-booking-section .mf-vt-price { font-size: 16px; color: #003DA5; font-weight: 800; }
#ride-booking-section .mf-vt-eta { font-size: 12px; color: #64748B; }
#ride-booking-section .mf-btn-cta-find-driver { min-height: 54px; border-radius: 14px; font-size: 16px; background: #FFC400; color: #092551; }
#ride-booking-section .mf-real-note { color: #64748B; margin: 12px 0 0; font-size: 11px; }
#ride-booking-section .mf-booking-map-container { align-self: stretch; display: flex; flex-direction: column; }
#ride-booking-section .mf-map-top-bar { border-radius: 22px 22px 0 0; display: flex; flex-wrap: wrap; padding: 14px; gap: 10px; background: #FFF; }
#ride-booking-section .mf-map-search-box { flex: 1 1 100%; min-height: 44px; background: #F4F7FC; border-radius: 12px; }
#ride-booking-section .mf-map-search-input { font-size: 14px; }
#ride-booking-section .mf-map-quick-filters { width: 100%; justify-content: flex-end; }
#ride-booking-section .mf-map-filter-btn { padding: 8px 12px; font-size: 12px; }
#ride-booking-section .mf-map-filter-btn.is-active { background: #062B6F; color: white; }
#ride-booking-section .mf-map-wrapper { flex: 1; height: auto; min-height: 560px; border-radius: 0 0 22px 22px; }
#ride-booking-section .mf-map-canvas { height: 100%; min-height: 560px; }
#ride-booking-section .mf-map-legend { display: flex; flex-wrap: wrap; gap: 8px; left: 12px; right: 48px; bottom: 25px; padding: 9px; font-size: 10px; width: auto; }
#ride-booking-section .mf-driver-count-chip { display: block; margin-top: 4px; font-size: 13px; color: #059669; }
#ride-booking-section .mf-link-view-all { font-size: 12px; color: #003DA5; }
#ride-booking-section .mf-driver-cards-container { flex: 1; max-height: 560px; gap: 16px; align-content: start; }
#ride-booking-section .mf-driver-item-card { grid-template-columns: 44px minmax(0,1fr); padding: 16px; gap: 10px; border-radius: 16px; background: #FFF; }
#ride-booking-section .mf-driver-avatar-circle { width: 44px; height: 44px; background: #E8F1FF; border: none; }
#ride-booking-section .mf-driver-name { font-size: 16px; }
#ride-booking-section .mf-driver-rating { display: none; } /* No verified rating field in the current driver query. */
#ride-booking-section .mf-driver-time { color: #64748B; font-size: 12px; }
#ride-booking-section .mf-driver-dist { display: inline-block; padding: 3px 8px; background: #ECFDF5; color: #047857; border-radius: 20px; font-size: 12px; }
#ride-booking-section .mf-driver-vehicle-badge { margin-top: 6px; background: #F4F7FC; padding: 5px 8px; }
#ride-booking-section .mf-driver-action-col { grid-column: 1 / -1; width: 100%; }
#ride-booking-section .mf-btn-call-driver { width: 100%; min-height: 42px; border-radius: 10px; color: #092551; font-size: 14px; }
#ride-booking-section .mf-driver-list-footer .mf-btn { color: #003DA5; border-color: #003DA5; min-height: 46px; border-radius: 12px; }
#ride-booking-section .mf-booking-layout :is(button,input,a,[role="button"]):focus-visible { outline: 3px solid #003DA5; outline-offset: 3px; }
@media (max-width:1199px) {
 #ride-booking-section .mf-booking-layout { grid-template-columns: minmax(280px,1fr) minmax(0,2fr); }
 #ride-booking-section .mf-booking-driver-list { grid-column: 1 / -1; }
 #ride-booking-section .mf-driver-cards-container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
}
@media (max-width:767px) {
 #ride-booking-section { padding: 32px 0; }
 #ride-booking-section > .mf-container { width: calc(100% - 32px); }
 #ride-booking-section .mf-section-title { font-size: 27px; }
 #ride-booking-section .mf-section-subtitle { font-size: 14px; }
 #ride-booking-section .mf-ride-category-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 #ride-booking-section .mf-cat-tab { padding: 11px 8px; font-size: 12px; }
 #ride-booking-section .mf-booking-layout { grid-template-columns: minmax(0,1fr); }
 #ride-booking-section .mf-booking-card-form, #ride-booking-section .mf-booking-driver-list { padding: 20px; }
 #ride-booking-section .mf-map-wrapper, #ride-booking-section .mf-map-canvas { min-height: 360px; height: 360px; }
 #ride-booking-section .mf-map-search-box { width: 100%; flex: 1 1 100%; }
 #ride-booking-section .mf-driver-cards-container { grid-template-columns: minmax(0,1fr); }
 #ride-booking-section .mf-modal-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
}