/* Cab / Vehicle booking (Uber-like) */ #cabMap { width: 100%; height: 320px; border-radius: 12px; } /* ==================== THEME-AWARE STYLING ==================== * Ensure good contrast in both light and dark modes * using Metronic's data-bs-theme attribute on . */ /* Light mode defaults (unchanged semantics, but explicit so we can override for dark) */ html[data-bs-theme="light"] .cab-card { background-color: #ffffff; } html[data-bs-theme="light"] .cab-fare-card { background-color: #ffffff; border-color: rgba(0,0,0,.10); } html[data-bs-theme="light"] .cab-muted { color: rgba(0,0,0,.60); } /* Dark mode tweaks: raise cards from background and increase text contrast */ html[data-bs-theme="dark"] .cab-card { background-color: #151521; /* Metronic dark card bg */ border-color: rgba(255,255,255,.08); } html[data-bs-theme="dark"] .cab-card .card-title, html[data-bs-theme="dark"] .cab-card .card-body, html[data-bs-theme="dark"] .cab-card h5, html[data-bs-theme="dark"] .cab-card label, html[data-bs-theme="dark"] .cab-card .form-label { color: #f9f9f9; } html[data-bs-theme="dark"] .cab-fare-card { background-color: #1e1e2d; border-color: rgba(255,255,255,.12); } html[data-bs-theme="dark"] .cab-fare-card:hover { box-shadow: 0 8px 18px rgba(0,0,0,.65); } html[data-bs-theme="dark"] .cab-fare-card.is-selected { border-color: rgba(25,135,84,.75); box-shadow: 0 0 0 3px rgba(25,135,84,.35); } html[data-bs-theme="dark"] .cab-fare-name, html[data-bs-theme="dark"] .cab-fare-price { color: #ffffff; } html[data-bs-theme="dark"] .cab-muted, html[data-bs-theme="dark"] .cab-mini, html[data-bs-theme="dark"] .cab-breakdown-row { color: rgba(255,255,255,.70); } /* Autocomplete dropdowns */ html[data-bs-theme="dark"] .cab-suggest { background-color: #1e1e2d; border-color: rgba(255,255,255,.15); box-shadow: 0 10px 24px rgba(0,0,0,.80); } html[data-bs-theme="dark"] .cab-suggest .cab-suggest-item { color: #f9f9f9; } html[data-bs-theme="dark"] .cab-suggest .cab-suggest-item:hover { background-color: rgba(13,110,253,.35); } /* Helper text / hints inside cards */ html[data-bs-theme="dark"] .cab-card .text-muted, html[data-bs-theme="dark"] .cab-card .form-text, html[data-bs-theme="dark"] #routeSummary, html[data-bs-theme="dark"] #fareHint { color: rgba(255,255,255,.60) !important; } .cab-card { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; } .cab-card .card-title { letter-spacing: .2px; } .cab-input-wrap { position: relative; overflow: visible; } /* Metronic sometimes clips absolute elements inside cards */ .cab-card, .cab-card .card-body { overflow: visible; } .cab-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9999; /* must be above Metronic cards/menus */ background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.12); overflow: hidden; max-height: 240px; overflow-y: auto; } .cab-suggest .cab-suggest-item { padding: 10px 12px; font-size: 13px; line-height: 1.25; cursor: pointer; } .cab-suggest .cab-suggest-item:hover { background: rgba(13,110,253,.08); } .cab-fare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 992px) { .cab-fare-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cab-fare-card { border: 1px solid rgba(0,0,0,.1); border-radius: 14px; padding: 12px; cursor: pointer; transition: all .15s ease; background: #fff; } .cab-fare-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); } .cab-fare-card.is-selected { border-color: rgba(25,135,84,.55); box-shadow: 0 0 0 3px rgba(25,135,84,.12); } .cab-fare-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .cab-fare-name { font-weight: 700; } .cab-fare-price { font-weight: 800; } .cab-muted { color: rgba(0,0,0,.6); } .cab-mini { font-size: 12px; } .cab-breakdown-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .cab-breakdown-row + .cab-breakdown-row { margin-top: 6px; }