/* RideSwift dashboard stylesheet — merged from 30 inline <style> blocks in original document order
   (cascade unchanged). Edit here; keep new overrides in the last section. */

/* ===== [01] unnamed ===== */
        /* ======================================== */
        /* RESET & BASE */
        /* ======================================== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            
            
            min-height: 100vh;
            overflow-x: hidden;
            padding-bottom: 80px;
        }
        ::-webkit-scrollbar { width: 6px; }
        
        ::-webkit-scrollbar-thumb {  border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.5); }

        /* ======================================== */
        /* ANIMATED BACKGROUND */
        /* ======================================== */
        .bg-animation {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }
        .bg-animation .circle {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: float 20s infinite ease-in-out;
        }
        .bg-animation .circle:nth-child(1) {
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent);
            top: -200px; right: -200px;
        }
        .bg-animation .circle:nth-child(2) {
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255, 107, 107, 0.08), transparent);
            bottom: -100px; left: -100px;
            animation-delay: -5s;
        }
        .bg-animation .circle:nth-child(3) {
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(0, 255, 200, 0.06), transparent);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            animation-delay: -10s;
        }
        @keyframes float {
            0%, 100% { transform: translate(0,0) scale(1); }
            25% { transform: translate(50px, -50px) scale(1.1); }
            50% { transform: translate(-30px, 30px) scale(0.9); }
            75% { transform: translate(40px, 20px) scale(1.05); }
        }

        /* ======================================== */
        /* CONTAINER */
        /* ======================================== */
        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        /* ======================================== */
        /* BACK TO LANDING */
        /* ======================================== */
        .back-to-landing {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            max-width: 300px;
            margin: 0 auto 30px auto;
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 50px;
            padding: 10px 24px;
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .back-to-landing:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,212,255,0.15);
            border-color: rgba(0,212,255,0.2);
        }
        .back-to-landing i { color: #00d4ff; }

        /* ======================================== */
        /* GLASS CARD */
        /* ======================================== */
        .glass-card {
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 40px;
            max-width: 440px;
            margin: 0 auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        /* ======================================== */
        /* BRAND */
        /* ======================================== */
        .brand { text-align: center; margin-bottom: 30px; }
        .brand .logo { font-size: 48px; display: block; margin-bottom: 6px; }
        .brand h1 {
            font-size: 28px;
            font-weight: 800;
            background: linear-gradient(135deg, #00d4ff, #00ff88);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .brand p { color: rgba(255,255,255,.60); font-size: 14px; }

        /* ======================================== */
        /* TABS */
        /* ======================================== */
        .tabs {
            display: flex;
            gap: 8px;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 24px;
        }
        .tab {
            flex: 1;
            padding: 10px;
            border: none;
            background: transparent;
            color: rgba(255,255,255,.60);
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
        }
        .tab:hover { color: rgba(255,255,255,0.7); }
        .tab.active { background: rgba(0,212,255,0.15); color: #00d4ff; }

        /* ======================================== */
        /* INPUTS */
        /* ======================================== */
        .input-group { margin-bottom: 16px; }
        .input-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            margin-bottom: 6px;
        }
        .input-group input, .input-group select {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            color: #fff;
            font-size: 14px;
            transition: all 0.3s;
        }
        .input-group input:focus, .input-group select:focus {
            outline: none;
            border-color: #00d4ff;
            box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
        }
        .input-group input::placeholder { color: rgba(255,255,255,.60); }
        .input-group input:disabled { opacity: 0.5; cursor: not-allowed; }
        .input-group .location-hint {
            font-size: 11px;
            color: rgba(255,255,255,.60);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .input-group .location-hint i { color: #00d4ff; font-size: 12px; }
        .hidden { display: none !important; }
        /* Authentication screens must never display the mobile app navigation. */
        #mobileBottomNav.hidden, #mobileBottomNav.auth-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }

        /* ======================================== */
        /* BUTTONS */
        /* ======================================== */
        .primary-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #00d4ff, #00ff88);
            border: none;
            border-radius: 12px;
            color: #0a0e17;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .primary-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,212,255,0.3);
        }
        .primary-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .primary-btn .spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(10,14,23,0.2);
            border-top: 2px solid #0a0e17;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .primary-btn.loading .spinner { display: inline-block; }
        .primary-btn.loading .btn-text { display: none; }

        /* ======================================== */
        /* LOGIN HINT */
        /* ======================================== */
        .login-hint {
            margin-top: 16px;
            padding: 16px;
            background: rgba(0,212,255,0.05);
            border: 1px solid rgba(0,212,255,0.08);
            border-radius: 12px;
            font-size: 13px;
            color: rgba(255,255,255,.64);
        }
        .login-hint code {
            background: rgba(255,255,255,0.05);
            padding: 2px 8px;
            border-radius: 4px;
            color: #00d4ff;
            font-size: 12px;
        }

        /* ======================================== */
        /* DASHBOARD */
        /* ======================================== */
        
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            
            border-radius: 16px;
            
            flex-wrap: wrap;
            gap: 16px;
        }
        .dashboard-header h2 { font-size: 24px; font-weight: 700; }
        .dashboard-header p { color: rgba(255,255,255,.60); font-size: 14px; }
        .role-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            background: rgba(0,212,255,0.1);
            
        }
        .logout-btn {
            padding: 10px 16px;
            background: rgba(255,107,107,0.1);
            border: 1px solid rgba(255,107,107,0.2);
            border-radius: 10px;
            color: #ff6b6b;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .logout-btn:hover { background: rgba(255,107,107,0.2); }

        /* ======================================== */
        /* STAT CARDS */
        /* ======================================== */
        .rider-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.3s;
        }
        .stat-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.12); }
        .stat-icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .stat-card.primary .stat-icon { background: rgba(0,212,255,0.15); color: #00d4ff; }
        .stat-card.success .stat-icon { background: rgba(0,255,136,0.15); color: #00ff88; }
        .stat-card.info .stat-icon { background: rgba(108,92,231,0.15); color: #6c5ce7; }
        .stat-card.highlight .stat-icon { background: rgba(255,107,107,0.15); color: #ff6b6b; }
        .stat-card.warning .stat-icon { background: rgba(255,217,61,0.15); color: #ffd93d; }
        .stat-content h3 { font-size: 22px; font-weight: 800; transition: all 0.3s; }
        .stat-content p { font-size: 13px; color: rgba(255,255,255,.60); margin-top: 2px; }

        /* ======================================== */
        /* MAP */
        /* ======================================== */
        .map-container {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 16px;
            position: relative;
        }
        #rideMap {
            width: 100%;
            height: 320px;
            background: #0a0e17;
        }
        .map-controls {
            display: flex;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(0,0,0,0.3);
            flex-wrap: wrap;
            align-items: center;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .map-controls .location-info {
            flex: 1;
            font-size: 12px;
            color: rgba(255,255,255,.60);
            min-width: 120px;
        }
        .map-controls .location-info strong {
            color: #fff;
            display: block;
        }
        .map-controls .map-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .map-btn {
            padding: 6px 14px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
            background: rgba(255,255,255,0.03);
            color: rgba(255,255,255,.64);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .map-btn:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
            border-color: rgba(255,255,255,0.15);
        }
        .map-btn.active {
            background: rgba(0,212,255,0.12);
            border-color: rgba(0,212,255,0.2);
            color: #00d4ff;
        }
        .map-btn i { font-size: 14px; }

        /* Custom marker styles */
        .pickup-marker div {
            background: #00d4ff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 0 20px rgba(0,212,255,0.5);
        }
        .dest-marker div {
            background: #ff6b6b;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 0 20px rgba(255,107,107,0.5);
        }
        .current-location-marker div {
            background: #00ff88;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 30px rgba(0,255,136,0.6);
            animation: pulse-location 1.5s ease-in-out infinite;
        }
        @keyframes pulse-location {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        .nearby-drivers-bar {
            display:flex; align-items:center; justify-content:space-between; gap:12px;
            padding:10px 16px; background:rgba(0,212,255,.045);
            border-top:1px solid rgba(255,255,255,.05); flex-wrap:wrap;
        }
        .nearby-drivers-info { display:flex; align-items:center; gap:8px; min-width:220px; font-size:12px; color:rgba(255,255,255,.65); }
        .nearby-drivers-info strong { color:#00d4ff; font-size:15px; }
        .nearby-drivers-info small { color:rgba(255,255,255,.60); margin-left:4px; }
        .nearby-drivers-dot { width:9px; height:9px; border-radius:50%; background:#00ff88; box-shadow:0 0 12px rgba(0,255,136,.7); animation:pulse-location 1.5s infinite; }
        .nearby-driver-marker { background:transparent; border:0; }
        .nearby-driver-marker .driver-pin {
            width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
            background:#00d4ff; border:3px solid #fff; box-shadow:0 4px 16px rgba(0,212,255,.5);
            display:flex; align-items:center; justify-content:center;
        }
        .nearby-driver-marker .driver-pin i { color:#07111d; font-size:15px; transform:rotate(45deg); }
        .nearby-driver-popup { min-width:190px; }
        .nearby-driver-popup .driver-title { font-size:15px; font-weight:800; color:#fff; margin-bottom:4px; }
        .nearby-driver-popup .driver-meta { color:rgba(255,255,255,.55); font-size:12px; margin:3px 0; }
        .nearby-driver-popup .driver-distance { color:#00ff88; font-weight:700; }
        @media (max-width:600px){ .nearby-drivers-info{width:100%;} .nearby-drivers-info small{display:block;} .nearby-drivers-bar .map-actions{width:100%;} }

        /* Leaflet overrides for dark theme */
        .leaflet-tile-pane { filter: brightness(0.7) contrast(1.2) saturate(0.8); }
        .leaflet-popup-content-wrapper {
            background: rgba(10,14,23,0.95);
            color: #e8edf5;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }
        .leaflet-popup-tip { background: rgba(10,14,23,0.95); }
        .leaflet-popup-content { font-size: 13px; line-height: 1.5; }
        .leaflet-popup-content strong { color: #00d4ff; }
        .leaflet-control-zoom a {
            background: rgba(10,14,23,0.8) !important;
            color: #fff !important;
            border-color: rgba(255,255,255,0.08) !important;
        }
        .leaflet-control-zoom a:hover {
            background: rgba(0,212,255,0.2) !important;
        }

        /* ======================================== */
        /* BOOK RIDE */
        /* ======================================== */
        .book-ride-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 30px;
            transition: all 0.3s;
        }
        .book-ride-card:hover { border-color: rgba(0,212,255,0.08); }
        .book-ride-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .book-ride-card h3 i { color: #00d4ff; }
        .row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

        /* ======================================== */
        /* RIDES */
        /* ======================================== */
        .ride-history {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 30px;
        }
        .ride-history h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .ride-history h3 i { color: #00d4ff; }
        .empty-state {
            color: rgba(255,255,255,.60);
            text-align: center;
            padding: 30px 20px;
            font-size: 14px;
        }
        .ride-item {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            
            
            margin-bottom: 12px;
            
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            transition: all 0.3s;
        }
        .ride-item:hover { border-color: rgba(0,212,255,0.08); }
        .ride-item.pulse-border { animation: pulse-border 2s ease-in-out infinite; }
        @keyframes pulse-border {
            0%, 100% { border-color: rgba(255,217,61,0.1); }
            50% { border-color: rgba(255,217,61,0.3); }
        }
        .ride-info { flex: 1; min-width: 200px; }
        .ride-info .route { font-weight: 600; font-size: 15px; }
        .ride-info .details { font-size: 13px; color: rgba(255,255,255,.60); margin-top: 4px; }
        .ride-info .details i { margin-right: 4px; }
        .ride-card-actions {
            display:flex;
            align-items:center;
            gap:7px;
            flex-wrap:wrap;
            
        }
        .ride-action-btn {
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.035);
            color:#dbe7f3;
            border-radius:9px;
            padding:7px 10px;
            font-size:11px;
            font-weight:700;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:6px;
            transition:.2s ease;
        }
        .ride-action-btn:hover {
            background:rgba(0,212,255,.12);
            border-color:rgba(0,212,255,.25);
            color:#fff;
            transform:translateY(-1px);
        }
        .ride-action-btn.primary { color:#00d4ff; }
        .ride-action-btn.danger { color:#ff8b8b; }
        .ride-action-btn.success { color:#00ff88; }
        @media (max-width:700px) {
            .ride-card-actions {  margin-left:0; }
            .ride-action-btn { flex:1; justify-content:center; min-width:82px; }
        }
        .ride-status {
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .ride-status.pending {
            background: rgba(255,217,61,0.15);
            color: #ffd93d;
            animation: pulse-status 1.5s ease-in-out infinite;
        }
        @keyframes pulse-status { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        .ride-status.completed { background: rgba(0,255,136,0.15); color: #00ff88; }
        .ride-status.accepted { background: rgba(0,212,255,0.15); color: #00d4ff; }
        .ride-status.en_route { background: rgba(108,92,231,0.15); color: #6c5ce7; }
        .ride-status.cancelled { background: rgba(255,107,107,0.15); color: #ff6b6b; }
        .ride-fare { font-weight: 700; font-size: 16px; color: #00ff88; white-space: nowrap; }
        
        .driver-proposed-route {
            margin-top: 11px;
            padding: 11px;
            border-radius: 12px;
            border: 1px solid rgba(0,212,255,.16);
            background: rgba(0,0,0,.12);
        }
        .driver-proposed-route-title {
            display:flex;
            align-items:center;
            gap:7px;
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.55px;
            color:#00d4ff;
            margin-bottom:7px;
        }
        .driver-route-summary {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            flex-wrap:wrap;
            font-size:12px;
            color:rgba(255,255,255,.65);
        }
        .driver-route-summary strong {
            color:#fff;
        }

        .accepted-driver-card {
            margin-top: 12px;
            padding: 13px;
            border-radius: 14px;
            border: 1px solid rgba(0,212,255,.18);
            background: linear-gradient(135deg, rgba(0,212,255,.07), rgba(108,92,231,.06));
        }
        .accepted-driver-title {
            display:flex;
            align-items:center;
            gap:8px;
            margin-bottom:10px;
            font-size:12px;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.6px;
            color:#00d4ff;
        }
        .accepted-driver-grid {
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:8px;
        }
        .driver-detail {
            min-width:0;
            padding:9px 10px;
            border-radius:10px;
            background:rgba(255,255,255,.035);
        }
        .driver-detail small {
            display:block;
            color:rgba(255,255,255,.64);
            font-size:11px;
            margin-bottom:3px;
            text-transform:uppercase;
            letter-spacing:.4px;
        }
        .driver-detail strong {
            display:block;
            color:#fff;
            font-size:13px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        
        .driver-contact-actions a {
            flex:1;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            min-height:38px;
            border-radius:10px;
            text-decoration:none;
            font-size:12px;
            font-weight:700;
        }
        .driver-call-btn {
            background:#00d4ff;
            color:#061018;
        }
        .driver-track-btn {
            background:rgba(0,255,136,.12);
            color:#00ff88;
            border:1px solid rgba(0,255,136,.18);
        }
        @media (max-width:600px) {
            .accepted-driver-grid { grid-template-columns:1fr 1fr; }
        }


        /* ======================================== */
        /* ADMIN MANAGEMENT WORKSPACE */
        /* ======================================== */
        #adminManagement { position:fixed; inset:0; z-index:5000; background:rgba(3,7,14,.86); backdrop-filter:blur(14px); padding:20px; overflow:auto; }
        #adminManagement.hidden { display:none !important; }
        .admin-workspace { max-width:1200px; margin:0 auto; background:#0a0f18; border:1px solid rgba(255,255,255,.08); border-radius:22px; min-height:calc(100vh - 40px); box-shadow:0 30px 90px rgba(0,0,0,.55); }
        .admin-workspace-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 22px; background:rgba(10,15,24,.96); border-bottom:1px solid rgba(255,255,255,.07); border-radius:22px 22px 0 0; }
        .admin-workspace-head h2 { margin:0; font-size:20px; }
        .admin-workspace-head p { margin:4px 0 0; color:rgba(255,255,255,.64); font-size:12px; }
        .admin-close { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#fff; width:40px; height:40px; border-radius:11px; cursor:pointer; font-size:18px; }
        .admin-workspace-body { padding:22px; }
        .admin-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
        .admin-toolbar input,.admin-toolbar select,.admin-form input,.admin-form select { flex:1; min-width:160px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); color:#fff; padding:11px 13px; border-radius:10px; outline:none; }
        .admin-toolbar select,.admin-form select { color:#fff; }
        .admin-table-wrap { overflow:auto; border:1px solid rgba(255,255,255,.07); border-radius:14px; }
        .admin-table { width:100%; border-collapse:collapse; min-width:760px; }
        .admin-table th,.admin-table td { padding:12px 13px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; font-size:12px; vertical-align:middle; }
        .admin-table th {  text-transform:uppercase; letter-spacing:.5px; font-size:11px; background:rgba(255,255,255,.025); }
        
        .admin-pill { display:inline-flex; padding:4px 8px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; }
        .admin-pill.online,.admin-pill.completed { background:rgba(0,255,136,.12); color:#00ff88; }
        .admin-pill.offline,.admin-pill.cancelled { background:rgba(255,107,107,.12); color:#ff8b8b; }
        
        .admin-pill.accepted { background:rgba(0,212,255,.12); color:#00d4ff; }
        .admin-pill.en_route { background:rgba(108,92,231,.14); color:#a99cff; }
        .admin-pill.reported { background:rgba(239,68,68,.12); color:#ff9b9b; }
        .admin-pill.investigating { background:rgba(245,158,11,.12); color:#fbbf24; }
        .admin-pill.found { background:rgba(34,197,94,.12); color:#86efac; }
        .admin-pill.returned { background:rgba(34,211,238,.12); color:#67e8f9; }
        .admin-pill.closed,.admin-pill.cancelled { background:rgba(148,163,184,.12); color:#cbd5e1; }
        .admin-btn { border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); color:#fff; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:11px; }
        .admin-btn:hover { background:rgba(0,212,255,.1); border-color:rgba(0,212,255,.25); }
        .admin-btn.danger { color:#ff8b8b; }
        .admin-empty { padding:40px 15px; text-align:center; color:rgba(255,255,255,.60); }
        .admin-loading { padding:40px; text-align:center; color:rgba(255,255,255,.64); }
        .admin-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
        .admin-mini { padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.025); }
        .admin-mini strong { display:block; font-size:20px; margin-bottom:4px; }
        .admin-mini span { color:rgba(255,255,255,.60); font-size:11px; }
        .admin-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
        .admin-form .full { grid-column:1/-1; }
        .admin-form label { display:block; color:rgba(255,255,255,.64); font-size:11px; margin-bottom:5px; }
        .admin-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
        .admin-btn.primary{background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.08));border-color:rgba(212,175,55,.35);color:#f3df9b}
        .admin-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
        .admin-settings-card{padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015))}
        .admin-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.admin-settings-head h3{margin:0;font-size:14px}.admin-settings-head h3 i{color:#d4af37;margin-right:7px}.admin-settings-head p{margin:4px 0 0;color:rgba(255,255,255,.60);font-size:11px}
        .admin-toggle-list{display:grid;gap:8px}.admin-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);cursor:pointer}.admin-toggle-row span{min-width:0}.admin-toggle-row strong{display:block;font-size:12px}.admin-toggle-row small{display:block;color:rgba(255,255,255,.60);font-size:11px;margin-top:3px}.admin-toggle-row input{display:none}.admin-toggle-row i{width:42px;height:24px;border-radius:30px;background:#202934;position:relative;flex:0 0 auto}.admin-toggle-row i:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#8b99aa;transition:.2s}.admin-toggle-row input:checked+i{background:rgba(212,175,55,.25);box-shadow:inset 0 0 0 1px rgba(212,175,55,.3)}.admin-toggle-row input:checked+i:after{left:21px;background:#d4af37}.admin-fare-grid{display:grid;gap:8px}.admin-fare-row{display:grid;grid-template-columns:90px repeat(3,minmax(0,1fr));gap:8px;align-items:end;padding:10px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}.admin-fare-row>strong{font-size:12px;padding-bottom:10px}.admin-fare-row label{margin:0;font-size:11px;color:rgba(255,255,255,.64)}.admin-fare-row input{width:100%;box-sizing:border-box;margin-top:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;padding:9px;border-radius:9px;outline:none}
        .admin-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}.admin-detail-header h3{margin:0;font-size:16px}.admin-detail-header p{margin:5px 0 0;color:rgba(255,255,255,.60);font-size:11px}
        @media(max-width:700px){.admin-settings-grid{grid-template-columns:1fr}.admin-fare-row{grid-template-columns:1fr 1fr}.admin-fare-row>strong{grid-column:1/-1;padding-bottom:2px}.admin-detail-header{flex-direction:column}}
        @media(max-width:700px){ #adminManagement{padding:8px}.admin-workspace{min-height:calc(100vh - 16px);border-radius:16px}.admin-workspace-head{border-radius:16px 16px 0 0}.admin-workspace-body{padding:14px}.admin-form{grid-template-columns:1fr}.admin-form .full{grid-column:auto} }

        /* =========================================================
           ADMIN CONTROL CENTER - PREMIUM DESKTOP/MOBILE UI
           ========================================================= */
        #adminDashboard .admin-control-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
        #adminDashboard .admin-control-bar .control-copy{display:flex;align-items:center;gap:11px;min-width:0}
        #adminDashboard .admin-control-bar .control-copy i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(0,212,255,.1);color:#00d4ff}
        #adminDashboard .admin-control-bar strong{display:block;font-size:13px}
        #adminDashboard .admin-control-bar span{display:block;color:rgba(255,255,255,.60);font-size:11px;margin-top:2px}
        #adminDashboard .admin-refresh-btn{border:1px solid rgba(0,212,255,.2);background:rgba(0,212,255,.07);color:#8beaff;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
        #adminDashboard .admin-refresh-btn:hover{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.35)}
        #adminDashboard .admin-live-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
        #adminDashboard .admin-live-card{position:relative;overflow:hidden;padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
        #adminDashboard .admin-live-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--live-accent,#00d4ff);opacity:.8}
        #adminDashboard .admin-live-card .live-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:rgba(255,255,255,.64);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
        #adminDashboard .admin-live-card .live-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--live-accent,#00d4ff)}
        #adminDashboard .admin-live-card strong{display:block;font-size:23px;line-height:1;margin-top:14px}
        #adminDashboard .admin-live-card small{display:block;color:rgba(255,255,255,.60);font-size:11px;margin-top:5px}
        #adminDashboard .admin-overview-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:12px}
        #adminDashboard .admin-overview-panel{border:1px solid rgba(255,255,255,.07);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));overflow:hidden}
        #adminDashboard .admin-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
        #adminDashboard .admin-panel-head h3{margin:0;font-size:13px}
        #adminDashboard .admin-panel-head span{color:rgba(255,255,255,.60);font-size:11px}
        #adminDashboard .admin-status-bars{padding:15px 16px}
        #adminDashboard .admin-status-row{display:grid;grid-template-columns:88px 1fr 36px;gap:10px;align-items:center;margin:11px 0}
        #adminDashboard .admin-status-row label{font-size:11px;color:rgba(255,255,255,.64);white-space:nowrap}
        #adminDashboard .admin-status-track{height:7px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
        #adminDashboard .admin-status-fill{height:100%;width:0;border-radius:20px;background:var(--status-color,#00d4ff);transition:width .5s ease}
        #adminDashboard .admin-status-row strong{text-align:right;font-size:11px}
        #adminDashboard .admin-activity-list{max-height:300px;overflow:auto}
        #adminDashboard .admin-activity-item{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.045)}
        #adminDashboard .admin-activity-item:last-child{border-bottom:0}
        #adminDashboard .activity-dot{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;place-items:center;background:rgba(0,212,255,.08);color:#00d4ff;font-size:11px}
        #adminDashboard .activity-copy{min-width:0}
        #adminDashboard .activity-copy strong{display:block;font-size:11px}
        #adminDashboard .activity-copy p{margin:3px 0 0;color:rgba(255,255,255,.60);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        #adminDashboard .activity-copy time{display:block;margin-top:4px;color:rgba(255,255,255,.60);font-size:11px}
        #adminDashboard .admin-actions{grid-template-columns:repeat(5,minmax(0,1fr));}
        #adminDashboard .admin-action-card{padding:17px 12px;}
        #adminDashboard .admin-action-card i{font-size:20px;}
        @media(max-width:900px){#adminDashboard .admin-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#adminDashboard .admin-overview-grid{grid-template-columns:1fr}#adminDashboard .admin-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
        @media(max-width:520px){#adminDashboard .admin-control-bar{align-items:flex-start}#adminDashboard .admin-live-grid{grid-template-columns:1fr 1fr;gap:8px}#adminDashboard .admin-live-card{padding:12px}#adminDashboard .admin-live-card strong{font-size:20px}#adminDashboard .admin-actions{grid-template-columns:1fr 1fr}#adminDashboard .admin-action-card{min-height:112px;padding:14px 8px}#adminDashboard .admin-action-card span{font-size:11px}#adminDashboard .admin-status-row{grid-template-columns:72px 1fr 30px}}


        /* ======================================== */
        /* TOAST */
        /* ======================================== */
        #toast {
            position: fixed;
            bottom: 90px;
            right: 30px;
            z-index: 2147483647 !important;
            background: rgba(10,14,23,0.95);
            backdrop-filter: blur(20px);
            padding: 16px 24px;
            border-radius: 12px;
            border: 1px solid rgba(0,212,255,0.15);
            color: #fff;
            font-size: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s ease;
            max-width: 400px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        #toast.show { transform: translateY(0); opacity: 1; }
        #toast .toast-icon { font-size: 20px; flex-shrink: 0; }

        /* ======================================== */
        /* PROFILE MODAL */
        /* ======================================== */
        #profilePage {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        #profilePage.hidden { display: none !important; }
        .profile-modal-content {
            background: rgba(10,14,23,0.95);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 40px;
            max-width: 440px;
            width: 100%;
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 16px; right: 20px;
            background: none;
            border: none;
            color: rgba(255,255,255,.60);
            font-size: 28px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .close-modal:hover { color: #fff; transform: rotate(90deg); }
        .profile-card { text-align: center; margin-bottom: 24px; }
        .profile-card .avatar {
            font-size: 64px;
            margin-bottom: 12px;
            display: block;
        }
        .profile-card h2 { font-size: 24px; font-weight: 700; }
        .profile-card p { color: rgba(255,255,255,.60); margin: 4px 0; }
        .level-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 24px;
            text-align: center;
        }
        .level-card h3 { font-size: 14px; color: rgba(255,255,255,.60); margin-bottom: 8px; }
        .level-card h2 {
            font-size: 36px;
            font-weight: 800;
            background: linear-gradient(135deg, #00d4ff, #00ff88);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .progress {
            width: 100%; height: 6px;
            background: rgba(255,255,255,0.05);
            border-radius: 4px;
            margin-top: 12px;
            overflow: hidden;
        }
        #levelProgress {
            height: 100%;
            background: linear-gradient(90deg, #00d4ff, #00ff88);
            border-radius: 4px;
            transition: width 0.5s;
        }

        /* ======================================== */
        /* BOTTOM NAV */
        /* ======================================== */
        .bottom-nav {
            position: fixed;
            
             right: 0;
            
            
            
            display: flex;
            justify-content: space-around;
            
            z-index: 500;
            display: none;
        }
        .bottom-nav button {
            background: none;
            border: none;
            color: rgba(255,255,255,.60);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-size: 11px;
            padding: 8px 16px;
            
            
        }
        .bottom-nav button i {  transition: all 0.3s; }
        .bottom-nav button:hover { color: rgba(255,255,255,0.7); }
        
        .bottom-nav button .badge {
            position: absolute;
            top: 2px; right: 4px;
            background: #ff6b6b;
            color: #fff;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 50px;
            min-width: 16px;
            text-align: center;
            font-weight: 700;
        }

        /* ======================================== */
        /* LOADER */
        /* ======================================== */
        .loader {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.1);
            border-top: 2px solid #00d4ff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }


        /* ======================================== */
        /* PREMIUM RIDER EXPERIENCE */
        /* ======================================== */
        .rider-premium-hero {
            position:relative; overflow:hidden; margin-bottom:24px; padding:24px;
            border-radius:22px; border:1px solid rgba(0,212,255,.16);
            background:radial-gradient(circle at 90% 20%,rgba(0,212,255,.14),transparent 34%),
                       linear-gradient(135deg,rgba(0,212,255,.08),rgba(255,255,255,.025));
            box-shadow:0 18px 45px rgba(0,0,0,.22);
        }
        .rider-premium-hero-content {
            position:relative; z-index:1; display:flex; justify-content:space-between;
            align-items:center; gap:18px; flex-wrap:wrap;
        }
        .premium-eyebrow {
            display:inline-flex; align-items:center; gap:7px; color:#00d4ff;
            font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px;
        }
        .rider-premium-hero h3 { font-size:22px; margin-bottom:6px; }
        .rider-premium-hero p { color:rgba(255,255,255,.64); font-size:12px; max-width:560px; line-height:1.6; }
        .premium-level {
            min-width:145px; padding:13px 16px; border-radius:16px; background:rgba(0,0,0,.18);
            border:1px solid rgba(255,255,255,.07); text-align:center;
        }
        .premium-level strong { display:block; color:#ffd93d; font-size:17px; }
        .premium-level span { display:block; margin-top:3px; color:rgba(255,255,255,.64); font-size:11px; }
        .rider-quick-grid {
            display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:24px;
        }
        .rider-premium-card {
            min-height:118px; padding:17px; border-radius:18px; border:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.025); transition:.25s ease; cursor:pointer; text-align:left; color:#fff;
        }
        .rider-premium-card:hover {
            transform:translateY(-3px); border-color:rgba(0,212,255,.22); background:rgba(255,255,255,.04);
        }
        .premium-card-icon {
            width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
            margin-bottom:12px; background:rgba(0,212,255,.10); color:#00d4ff;
        }
        .rider-premium-card:nth-child(2) .premium-card-icon { background:rgba(0,255,136,.10); color:#00ff88; }
        .rider-premium-card:nth-child(3) .premium-card-icon { background:rgba(255,217,61,.10); color:#ffd93d; }
        .rider-premium-card:nth-child(4) .premium-card-icon { background:rgba(108,92,231,.12); color:#a99cff; }
        .rider-premium-card strong { display:block; font-size:12px; margin-bottom:4px; }
        .rider-premium-card small { color:rgba(255,255,255,.60); font-size:11px; line-height:1.45; }
        
.premium-cancel-ride-btn{
    margin-top:10px; width:100%; border:1px solid rgba(239,68,68,.35);
    background:rgba(239,68,68,.10); color:#ff9b9b; border-radius:12px;
    padding:10px 14px; font-weight:700; cursor:pointer;
}
.premium-cancel-ride-btn:hover{background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.55);}

.rider-insights {
            display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin-bottom:24px;
        }
        .premium-panel {
            padding:19px; border-radius:18px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025);
        }
        .premium-panel-header {
            display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px;
        }
        .premium-panel-header h4 { font-size:13px; }
        .premium-panel-header span { color:rgba(255,255,255,.60); font-size:11px; }
        .ride-status-strip {
            display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px;
            background:rgba(0,212,255,.055); border:1px solid rgba(0,212,255,.09);
        }
        .ride-status-strip .status-icon {
            width:36px; height:36px; display:grid; place-items:center; border-radius:11px;
            background:rgba(0,212,255,.12); color:#00d4ff;
        }
        .ride-status-strip strong { display:block; font-size:11px; }
        .ride-status-strip small { color:rgba(255,255,255,.60); font-size:11px; }
        .rewards-progress {
            height:7px; overflow:hidden; border-radius:20px; background:rgba(255,255,255,.06); margin:12px 0 8px;
        }
        .rewards-progress span {
            display:block; width:0; height:100%; border-radius:inherit;
            background:linear-gradient(90deg,#00d4ff,#00ff88); transition:width .5s ease;
        }
        .rewards-meta { display:flex; justify-content:space-between; color:rgba(255,255,255,.60); font-size:11px; }

        /* DRIVER PROFILE EDITOR */
        .driver-profile-modal { max-width:760px; width:min(760px,calc(100vw - 28px)); max-height:90vh; overflow-y:auto; }
        .driver-profile-avatar { width:76px; height:76px; margin:0 auto 12px; display:flex!important; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#d4af37,#8d6b12); color:#080808; font-size:34px!important; box-shadow:0 0 28px rgba(212,175,55,.25); }
        .driver-profile-form { margin-top:20px; text-align:left; }
        .profile-form-title { display:flex; align-items:center; gap:9px; margin:18px 0 12px; color:#d4af37; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.06em; }
        .profile-form-title small { margin-left:auto; color:rgba(255,255,255,.60); text-transform:none; font-weight:500; letter-spacing:0; }
        .profile-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
        .profile-form-grid .full { grid-column:1 / -1; }
        .driver-profile-form .input-group { margin-bottom:13px; }
        .driver-profile-form .input-group input { background:rgba(255,255,255,.045); border-color:rgba(212,175,55,.16); }
        .driver-profile-form .input-group input:focus { border-color:#d4af37; box-shadow:0 0 0 3px rgba(212,175,55,.10); }
        .vehicle-title,.security-title { border-top:1px solid rgba(255,255,255,.06); padding-top:18px; }
        .profile-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
        .secondary-profile-btn,.gold-profile-btn { border-radius:11px; padding:12px 17px; cursor:pointer; font-weight:800; }
        .secondary-profile-btn { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#fff; }
        .gold-profile-btn { background:linear-gradient(135deg,#d4af37,#b9911d); border:1px solid #e6ca63; color:#080808; box-shadow:0 8px 22px rgba(212,175,55,.18); }
        .gold-profile-btn:disabled { opacity:.6; cursor:not-allowed; }

        @media (max-width:900px) {
            .rider-quick-grid { grid-template-columns:repeat(2,1fr); }
            .rider-insights { grid-template-columns:1fr; }
        }

        /* ======================================== */
        /* RESPONSIVE */
        /* ======================================== */
        @media (max-width: 768px) {
            .glass-card { padding: 24px; margin: 20px 16px; }
            .row-2col { grid-template-columns: 1fr; }
            .rider-stats {  gap: 12px; }
            .bottom-nav { display: flex; }
            .back-to-landing { max-width: 100%; padding: 8px 16px; font-size: 12px; }
            .dashboard-header { flex-direction: column; align-items: stretch; }
            #toast { right: 16px; left: 16px; bottom: 80px; max-width: none; }
            .profile-modal-content { padding: 24px; }
            
            .map-controls { flex-direction: column; align-items: stretch; }
            .map-controls .location-info { text-align: center; }
            .map-controls .map-actions { justify-content: center; }
        }
        @media (max-width: 480px) {
            .glass-card { padding: 20px; }
            .rider-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
            .stat-card { padding: 14px; }
            .stat-content h3 { font-size: 18px; }
            .ride-item { flex-direction: column; align-items: stretch; }
            .ride-info .route { font-size: 14px; }
            .dashboard-header h2 { font-size: 20px; }
            #rideMap { height: 200px; }
        }


        /* DRIVER HISTORY */
        .driver-history-btn {
            border:1px solid rgba(0,212,255,.16);
            background:rgba(0,212,255,.07);
            color:#00d4ff;
            border-radius:10px;
            padding:8px 12px;
            font-size:11px;
            font-weight:800;
            cursor:pointer;
        }
        .driver-history-btn:hover { background:rgba(0,212,255,.14); color:#fff; }
        .driver-history-modal {
            position:fixed; inset:0; z-index:7000; display:none;
            align-items:center; justify-content:center; padding:20px;
            background:rgba(2,6,12,.78); backdrop-filter:blur(12px);
        }
        .driver-history-modal.show { display:flex; }
        .driver-history-dialog {
            width:min(900px,100%); max-height:min(85vh,760px); overflow:hidden;
            background:#0b111c; border:1px solid rgba(255,255,255,.08);
            border-radius:20px; box-shadow:0 30px 90px rgba(0,0,0,.55);
        }
        .driver-history-head {
            display:flex; justify-content:space-between; align-items:center; gap:15px;
            padding:20px; border-bottom:1px solid rgba(255,255,255,.07);
        }
        .driver-history-head h2 { margin-top:4px; font-size:20px; }
        .history-close { width:38px; height:38px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; font-size:25px; cursor:pointer; }
        .driver-history-body { padding:18px; overflow:auto; max-height:calc(85vh - 90px); }
        .history-loading,.history-empty,.history-error { padding:45px 20px; text-align:center; color:rgba(255,255,255,.64); }
        .history-empty i,.history-error i { font-size:34px; color:#00d4ff; margin-bottom:12px; }
        .history-empty h3,.history-error h3 { color:#fff; margin-bottom:7px; }
        .driver-history-item { padding:15px; margin-bottom:10px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.025); }
        .history-route { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
        .history-route i { color:#00d4ff; }
        .history-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:9px; color:rgba(255,255,255,.60); font-size:11px; }
        .history-meta > strong { color:#00ff88; margin-left:auto; }
        .history-status { padding:4px 8px; border-radius:30px; text-transform:uppercase; font-weight:800; font-size:11px; }
        .history-status.completed { background:rgba(0,255,136,.12); color:#00ff88; }
        .history-status.cancelled { background:rgba(255,107,107,.12); color:#ff8b8b; }
        .history-status.accepted { background:rgba(0,212,255,.12); color:#00d4ff; }
        .history-status.en_route { background:rgba(108,92,231,.12); color:#a99cff; }
        @media(max-width:600px){ .driver-history-btn{padding:7px 9px}.driver-history-body{padding:12px}.history-meta > strong{margin-left:0} }

        /* DRIVER MY RIDES — persistent trip list */
        .driver-my-rides {
            margin-top: 24px;
            padding: 22px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.07);
            border-radius: 20px;
        }
        .driver-my-rides-head {
            display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
            margin-bottom:16px;
        }
        .driver-my-rides-head h2 { margin-top:4px; font-size:20px; }
        .driver-my-rides-actions { display:flex; gap:8px; align-items:center; }
        .driver-my-rides-list { display:grid; gap:10px; }
        .driver-my-ride-card {
            padding:15px; border:1px solid rgba(255,255,255,.06); border-radius:14px;
            background:rgba(255,255,255,.025);
        }
        .driver-my-ride-card { cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
        .driver-my-ride-card:hover { transform:translateY(-2px); border-color:rgba(0,212,255,.24); background:rgba(0,212,255,.04); }
        .driver-my-ride-card .history-route { margin-bottom:9px; }
        .driver-my-ride-card .history-meta { margin-top:0; }
        .driver-my-ride-card .history-rider {
            margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; color:rgba(255,255,255,.55); font-size:12px;
        }

        /* MY RIDES CATEGORY COLOURS — applied to the full rider/driver card */
        #riderRidesContainer .ride-item,
        #driverMyRidesContainer .driver-my-ride-card {
            position:relative;
            overflow:hidden;
            border-left-width:4px !important;
            transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
        }
        #riderRidesContainer .ride-item.ride-category-pending,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-pending {
            background:linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.045)) !important;
            border-color:rgba(245,158,11,.30) !important;
            border-left-color:#f59e0b !important;
            box-shadow:inset 0 0 0 1px rgba(245,158,11,.025);
        }
        #riderRidesContainer .ride-item.ride-category-active,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-active {
            background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(0,212,255,.055)) !important;
            border-color:rgba(59,130,246,.38) !important;
            border-left-color:#3b82f6 !important;
            box-shadow:0 8px 26px rgba(59,130,246,.07), inset 0 0 0 1px rgba(59,130,246,.025);
        }
        #riderRidesContainer .ride-item.ride-category-completed,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-completed {
            background:linear-gradient(135deg, rgba(34,197,94,.17), rgba(0,255,136,.045)) !important;
            border-color:rgba(34,197,94,.34) !important;
            border-left-color:#22c55e !important;
            box-shadow:inset 0 0 0 1px rgba(34,197,94,.025);
        }
        #riderRidesContainer .ride-item.ride-category-cancelled,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-cancelled {
            background:linear-gradient(135deg, rgba(239,68,68,.16), rgba(255,107,107,.04)) !important;
            border-color:rgba(239,68,68,.34) !important;
            border-left-color:#ef4444 !important;
            box-shadow:inset 0 0 0 1px rgba(239,68,68,.025);
        }
        #riderRidesContainer .ride-item.ride-category-active:hover,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-active:hover { border-color:rgba(59,130,246,.62) !important; }
        #riderRidesContainer .ride-item.ride-category-completed:hover,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-completed:hover { border-color:rgba(34,197,94,.56) !important; }
        #riderRidesContainer .ride-item.ride-category-cancelled:hover,
        #driverMyRidesContainer .driver-my-ride-card.ride-category-cancelled:hover { border-color:rgba(239,68,68,.56) !important; }
        .driver-trip-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
        .driver-trip-filter {
            border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:rgba(255,255,255,.65);
            border-radius:30px; padding:7px 11px; cursor:pointer; font-size:11px; font-weight:800;
        }
        .driver-trip-filter.active { border-color:rgba(0,212,255,.35); background:rgba(0,212,255,.12); color:#00d4ff; }
        @media(max-width:600px){ .driver-my-rides{padding:15px}.driver-my-rides-actions{width:100%}.driver-my-rides-actions .driver-history-btn{flex:1} }


        /* DRIVER RIDE DETAIL */
        .driver-ride-detail-modal { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
        .driver-ride-detail-modal.show { display:flex; }
        .driver-ride-detail-dialog { width:min(760px,100%); max-height:92vh; overflow:auto; background:#0b1219; border:1px solid rgba(255,255,255,.09); border-radius:22px; box-shadow:0 25px 80px rgba(0,0,0,.55); }
        .driver-detail-head { position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:20px; background:rgba(11,18,25,.96); border-bottom:1px solid rgba(255,255,255,.06); }
        .driver-detail-head h2 { margin:5px 0 0; font-size:22px; }
        .driver-detail-close { width:40px; height:40px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(255,255,255,.04); color:#fff; font-size:25px; cursor:pointer; }
        .driver-detail-body { padding:18px; }
        .driver-detail-status { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:15px; background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.12); margin-bottom:14px; }
        .driver-detail-status strong { color:#fff; font-size:15px; }
        .driver-detail-fare { color:#00ff88; font-size:20px; font-weight:900; }
        .driver-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
        .driver-detail-card { padding:15px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.025); }
        .driver-detail-card h4 { margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.60); }
        .driver-detail-card p { margin:5px 0; color:#fff; font-size:13px; line-height:1.45; }
        .driver-detail-card p.muted { color:rgba(255,255,255,.64); }
        .driver-contact-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
        .driver-detail-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:9px 12px; background:rgba(255,255,255,.05); color:#fff; text-decoration:none; cursor:pointer; font-weight:800; font-size:11px; }
        .driver-detail-btn.primary { background:linear-gradient(135deg,#00d4ff,#00ff88); color:#071018; border:0; }
        .driver-payment-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:20px; font-size:11px; font-weight:900; text-transform:uppercase; }
        .driver-payment-pill.paid { background:rgba(0,255,136,.12); color:#00ff88; }
        .driver-payment-pill.pending { background:rgba(255,193,7,.12); color:#ffd166; }
        .driver-payment-pill.failed { background:rgba(255,107,107,.12); color:#ff8b8b; }
        .driver-timeline { position:relative; margin-top:5px; padding-left:28px; }
        .driver-timeline:before { content:""; position:absolute; left:9px; top:7px; bottom:7px; width:2px; background:rgba(255,255,255,.08); }
        .driver-timeline-item { position:relative; padding:0 0 18px; }
        .driver-timeline-dot { position:absolute; left:-24px; top:3px; width:12px; height:12px; border-radius:50%; background:#263440; border:2px solid #0b1219; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
        .driver-timeline-item.done .driver-timeline-dot { background:#00d4ff; box-shadow:0 0 0 4px rgba(0,212,255,.08); }
        .driver-timeline-item.current .driver-timeline-dot { background:#00ff88; box-shadow:0 0 0 5px rgba(0,255,136,.09); }
        .driver-timeline-item strong { display:block; color:#fff; font-size:13px; }
        .driver-timeline-item small { display:block; margin-top:3px; color:rgba(255,255,255,.60); font-size:11px; }
        .driver-detail-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; }
        @media(max-width:600px){ .driver-ride-detail-modal{padding:8px}.driver-detail-grid{grid-template-columns:1fr}.driver-detail-body{padding:13px}.driver-detail-head{padding:16px} }

        /* ======================================== */
        /* DRIVER CONTROLS */
        /* ======================================== */
        .driver-status-btn {
            padding: 10px 16px;
            background: rgba(255,107,107,0.1);
            border: 1px solid rgba(255,107,107,0.2);
            border-radius: 10px;
            color: #ff6b6b;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .driver-status-btn:hover { transform: translateY(-2px); }
        .driver-status-btn.online {
            background: rgba(0,255,136,0.1);
            border-color: rgba(0,255,136,0.25);
            color: #00ff88;
        }
        .driver-actions, .admin-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .admin-actions { grid-template-columns: repeat(4, 1fr); }
        .driver-action-card, .admin-action-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 16px;
            padding: 22px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .driver-action-card {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .driver-action-card i, .admin-action-card i {
            font-size: 24px;
            color: #00d4ff;
        }
        .driver-action-card:hover, .admin-action-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0,212,255,0.25);
            background: rgba(0,212,255,0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .admin-action-card { text-align: center; }
        .admin-action-card strong { display: block; margin-top: 12px; font-size: 15px; }
        .admin-action-card span { display: block; margin-top: 6px; color: rgba(255,255,255,.60); font-size: 12px; }

        /* ======================================== */
        /* DRIVER RIDE REQUEST */
        /* ======================================== */
        
        .driver-ride-route {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .driver-ride-details {
            color: rgba(255,255,255,.64);
            font-size: 13px;
            margin-bottom: 14px;
        }
        
        .accept-ride-btn {
            
            padding: 11px;
            border: none;
            border-radius: 10px;
            
            
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
        }
        .accept-ride-btn:hover {  box-shadow: 0 4px 15px rgba(0,212,255,0.3); }
        .reject-ride-btn {
            padding: 11px 18px;
            border: 1px solid rgba(255,107,107,0.25);
            
            
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        

        /* ======================================== */
        /* MOBILE DRIVER / ADMIN */
        /* ======================================== */
        @media (max-width: 768px) {
            .driver-actions, .admin-actions {
                grid-template-columns: 1fr 1fr;
            }
        }
        @media (max-width: 480px) {
            .driver-actions, .admin-actions {
                grid-template-columns: 1fr;
            }
            .driver-status-btn {
                width: 100%;
            }
        }

        /* ======================================== */
        /* PASSWORD TOGGLE */
        /* ======================================== */
        .password-wrapper {
            position: relative;
        }
        .password-wrapper input {
            padding-right: 44px;
        }
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.60);
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            transition: color 0.3s;
        }
        .password-toggle:hover { color: rgba(255,255,255,0.6); }

        /* ======================================== */
        /* RIDE FILTERS */
        /* ======================================== */
        .ride-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .filter-btn {
            padding: 6px 14px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 50px;
            background: transparent;
            color: rgba(255,255,255,.60);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .filter-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); }
        .filter-btn.active {
            background: rgba(0,212,255,0.1);
            border-color: rgba(0,212,255,0.2);
            color: #00d4ff;
        }

        /* ======================================== */
        /* CONFIRMATION MODAL */
        /* ======================================== */
        #confirmModal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }
        #confirmModal.hidden { display: none !important; }
        .confirm-content {
            background: rgba(10,14,23,0.95);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 32px;
            max-width: 400px;
            width: 100%;
            text-align: center;
        }
        .confirm-content h3 { font-size: 20px; margin-bottom: 8px; }
        .confirm-content p { color: rgba(255,255,255,.64); font-size: 14px; margin-bottom: 24px; }
        .confirm-actions {
            display: flex;
            gap: 12px;
        }
        .confirm-actions button {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .confirm-actions .cancel-btn {
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.6);
        }
        .confirm-actions .cancel-btn:hover { background: rgba(255,255,255,0.1); }
        .confirm-actions .confirm-btn {
            background: #ff6b6b;
            color: #fff;
        }
        .confirm-actions .confirm-btn:hover { opacity: 0.8; }
        /* =========================================================
   PREMIUM RIDESWIFT DRIVER DASHBOARD
   ========================================================= */

.driver-dashboard {
    --driver-bg: #070b12;
    --driver-card: rgba(16, 23, 34, .86);
    --driver-card-2: rgba(20, 29, 42, .92);
    --driver-border: rgba(255,255,255,.08);
    --driver-text: #f4f7fb;
    --driver-muted: #8290a3;
    --driver-green: #20e889;
    --driver-cyan: #19c8ff;
    --driver-yellow: #ffc857;
    --driver-red: #ff5c6c;
    --driver-purple: #8b7cff;

    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 20px 120px;
    
}


/* TOP BAR
--------------------------------------------------------- */

.driver-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.driver-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.driver-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--driver-cyan), var(--driver-green));
    color: #071018;
    font-size: 20px;
    box-shadow: 0 8px 30px rgba(25,200,255,.18);
}

.driver-brand strong {
    display: block;
    font-size: 18px;
    letter-spacing: -.3px;
}

.driver-brand span {
    display: block;
    color: var(--driver-muted);
    font-size: 11px;
    margin-top: 2px;
}

.driver-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.driver-icon-btn,
.driver-avatar-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--driver-border);
    background: rgba(255,255,255,.04);
    color: #c8d1dc;
    cursor: pointer;
    transition: .25s ease;
}

.driver-icon-btn:hover,
.driver-avatar-btn:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
    color: #fff;
}

.driver-logout-btn {
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    color: var(--driver-red);
    border-color: rgba(255,92,108,.25);
    background: rgba(255,92,108,.08);
}

.driver-logout-btn:hover {
    color: #fff;
    background: rgba(255,92,108,.2);
    border-color: rgba(255,92,108,.4);
}

.driver-avatar-btn {
    border: none;
    background: transparent;
}

.driver-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #26384e, #101923);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-weight: 800;
}

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--driver-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid var(--driver-bg);
}


/* Mobile rider notifications: keep the bell inside the bottom navigation instead of crowding the header. */

.rider-desktop-notification { position: relative; width: 42px; height: 42px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.rider-desktop-notification .notification-badge { top: -3px; right: -3px; }

.notification-nav-item { position: relative; }
.notification-nav-badge {
    position: absolute !important; top: 2px !important; right: 18% !important;
    min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
    border-radius: 999px !important; font-size: 11px !important; line-height: 17px !important;
    background: #ef4444 !important; color: #fff !important;
    border: 2px solid rgba(15,23,42,.95) !important; box-sizing: content-box !important; z-index: 3;
}
@media (min-width: 768px) { .notification-nav-item { display: none !important; } }
@media (max-width: 767px) {
    .rider-desktop-notification { display: none !important; }
    #riderDashboard .dashboard-header { padding-right: 10px; }
    #riderDashboard .dashboard-header .logout-btn { padding: 9px 11px; font-size: 12px; }
    #riderDashboard .rider-stats { margin-top: 18px; margin-bottom: 18px; }
}

.notification-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    justify-content: flex-end;
    background: rgba(3, 8, 15, .58);
    backdrop-filter: blur(5px);
}

.notification-panel-overlay.hidden { display: none !important; }

.notification-panel {
    width: min(430px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #0f1722;
    border-left: 1px solid rgba(255,255,255,.1);
    box-shadow: -20px 0 50px rgba(0,0,0,.38);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.notification-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.notification-panel-title h3 { margin: 0; font-size: 18px; }
.notification-panel-title i { color: #f3c969; }
.notification-panel-actions { display:flex; gap:8px; align-items:center; }
.notification-panel-actions button {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 10px;
    min-height: 38px;
    padding: 0 12px;
    cursor: pointer;
}
.notification-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.notification-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 11px;
    padding: 13px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
}
.notification-item.unread {
    border-color: rgba(243,201,105,.35);
    background: rgba(243,201,105,.08);
}
.notification-item-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(243,201,105,.12);
    color: #f3c969;
}
.notification-item h4 { margin: 0 0 5px; color:#fff; font-size:14px; }
.notification-item p { margin:0; color:#b6c0cd; font-size:13px; line-height:1.45; }
.notification-item time { display:block; margin-top:7px; color:#718096; font-size:11px; }
.notification-empty {
    min-height: 240px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#8390a0;
    padding:30px;
}
.notification-empty i { font-size:34px; margin-bottom:10px; color:#657284; }
@media (max-width: 600px) {
    .notification-panel { width: 100%; }
}


/* WELCOME
--------------------------------------------------------- */

.driver-welcome-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--driver-border);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(25,200,255,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(17,28,43,.96),
            rgba(8,14,22,.96)
        );
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    margin-bottom: 18px;
}

.driver-welcome-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -90px;
    bottom: -100px;
    background: rgba(32,232,137,.12);
    filter: blur(10px);
}

.driver-welcome-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.driver-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        rgba(25,200,255,.2),
        rgba(32,232,137,.18)
    );
    border: 1px solid rgba(255,255,255,.1);
    font-size: 23px;
    font-weight: 800;
}

.driver-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--driver-green);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.driver-welcome-text h1 {
    font-size: 24px;
    margin: 0;
    letter-spacing: -.7px;
}

.driver-welcome-text h1 strong {
    color: #fff;
}

.driver-welcome-text p {
    margin: 5px 0 0;
    color: var(--driver-muted);
    font-size: 13px;
}


/* ONLINE BUTTON
--------------------------------------------------------- */

.driver-online-switch {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 145px;
    padding: 11px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255,92,108,.25);
    background: rgba(255,92,108,.08);
    color: var(--driver-red);
    cursor: pointer;
    transition: .25s ease;
}

.driver-online-switch:hover {
    transform: translateY(-2px);
}

.driver-online-switch .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(255,92,108,.1);
}

.driver-online-switch .status-copy {
    flex: 1;
    text-align: left;
}

.driver-online-switch small {
    display: block;
    font-size: 11px;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.driver-online-switch strong {
    display: block;
    font-size: 13px;
    margin-top: 1px;
}

.driver-online-switch.online {
    color: var(--driver-green);
    background: rgba(32,232,137,.08);
    border-color: rgba(32,232,137,.25);
}

.driver-online-switch.online .status-dot {
    box-shadow: 0 0 0 5px rgba(32,232,137,.1);
    animation: driverPulse 1.8s infinite;
}

@keyframes driverPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.82); }
}


/* STATS
--------------------------------------------------------- */

.driver-stats-grid {
    display: grid;
    
    gap: 14px;
    margin-bottom: 18px;
}

.driver-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 100px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--driver-border);
    background: var(--driver-card);
    backdrop-filter: blur(20px);
    transition: .25s ease;
}

.driver-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(25,200,255,.2);
}

.driver-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--driver-green);
    background: rgba(32,232,137,.1);
}

.driver-stat-icon.blue {
    color: var(--driver-cyan);
    background: rgba(25,200,255,.1);
}

.driver-stat-icon.purple {
    color: var(--driver-purple);
    background: rgba(139,124,255,.1);
}

.driver-stat-icon.gold {
    color: var(--driver-yellow);
    background: rgba(255,200,87,.1);
}

.driver-stat-content span {
    display: block;
    color: var(--driver-muted);
    font-size: 11px;
}

.driver-stat-content strong {
    display: block;
    font-size: 22px;
    margin-top: 3px;
    letter-spacing: -.5px;
}

.driver-stat-content small {
    display: block;
    color: #657286;
    font-size: 11px;
    margin-top: 3px;
}

.driver-stat-content small i {
    color: var(--driver-green);
}

.rating-stars {
    color: var(--driver-yellow) !important;
    display: inline !important;
}


/* WORKSPACE
--------------------------------------------------------- */

.driver-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, .75fr);
    gap: 18px;
    align-items: start;
}


/* MAP
--------------------------------------------------------- */

.driver-map-card,
.ride-request-panel,
.active-ride-panel,
.driver-performance,
.driver-quick-actions {
    border: 1px solid var(--driver-border);
    background: var(--driver-card);
    border-radius: 24px;
    overflow: hidden;
}

.driver-map-header,
.panel-heading,
.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 19px 20px;
}

.section-label {
    display: block;
    
    font-size: 11px;
    
    
    text-transform: uppercase;
    margin-bottom: 5px;
}

.section-label i {
    margin-right: 4px;
}

.driver-map-header h2,
.panel-heading h2,
.performance-header h2 {
    font-size: 17px;
    margin: 0;
    letter-spacing: -.3px;
}

.driver-map-header p {
    margin: 4px 0 0;
    color: var(--driver-muted);
    font-size: 11px;
}

.map-status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 50px;
    background: rgba(32,232,137,.07);
    border: 1px solid rgba(32,232,137,.14);
    color: var(--driver-green);
    font-size: 11px;
    white-space: nowrap;
}

.map-status-pill span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.driver-map-wrapper {
    position: relative;
    height: 480px;
    overflow: hidden;
}

#driverMap {
    width: 100%;
    height: 100%;
    background: #f4f6f8;
}



.driver-location-marker div {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #20e889;
    border: 3px solid #fff;
    box-shadow: 0 0 0 6px rgba(32,232,137,.18), 0 0 25px rgba(32,232,137,.75);
    animation: driverMapPulse 1.6s ease-in-out infinite;
}

@keyframes driverMapPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

.map-floating-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.map-floating-controls button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(7,11,18,.86);
    backdrop-filter: blur(15px);
    color: #fff;
    cursor: pointer;
}

.map-floating-controls button:hover {
    background: rgba(25,200,255,.16);
}

.map-bottom-status {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(7,11,18,.86);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(15px);
    font-size: 11px;
}

.map-bottom-status > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.live-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--driver-green);
    box-shadow: 0 0 10px rgba(32,232,137,.7);
}

.map-bottom-status strong {
    font-weight: 600;
}

.map-bottom-status > span:last-child {
    color: var(--driver-muted);
}


/* SIDE PANEL
--------------------------------------------------------- */

.driver-side-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}


/* REQUEST HEADER
--------------------------------------------------------- */

.request-counter {
    min-width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(25,200,255,.1);
    color: var(--driver-cyan);
    font-size: 11px;
    font-weight: 800;
}


/* REQUEST CONTAINER
--------------------------------------------------------- */

.driver-rides-container {
    padding: 0 14px 14px;
    max-height: 430px;
    overflow-y: auto;
}

.driver-rides-container::-webkit-scrollbar {
    width: 4px;
}

.driver-rides-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 20px;
}


/* RIDE REQUEST CARD
--------------------------------------------------------- */

.driver-ride-request {
    position: relative;
    
    
    
    
    
    animation: requestAppear .35s ease both;
    
}

.driver-ride-request:hover {
    
    transform: translateY(-2px);
}

@keyframes requestAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.driver-request-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 13px;
}

.driver-request-rider {
    display: flex;
    align-items: center;
    gap: 9px;
}

.request-rider-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(25,200,255,.1);
    color: var(--driver-cyan);
}

.driver-request-rider strong {
    display: block;
    font-size: 12px;
}

.driver-request-rider small {
    color: var(--driver-muted);
    font-size: 11px;
}

.driver-request-fare {
    color: var(--driver-green);
    font-size: 18px;
    font-weight: 900;
}

.driver-route {
    position: relative;
    margin: 12px 0 14px;
    padding-left: 25px;
}

.driver-route::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(
        var(--driver-cyan),
        var(--driver-green)
    );
}

.driver-route-row {
    position: relative;
    display: flex;
    gap: 9px;
    min-height: 42px;
}

.driver-route-point {
    position: absolute;
    left: -25px;
    top: 2px;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0b111a;
    border: 2px solid var(--driver-cyan);
    color: var(--driver-cyan);
    font-size: 10px;
}

.driver-route-row.destination .driver-route-point {
    border-color: var(--driver-green);
    color: var(--driver-green);
}

.driver-route-row small {
    display: block;
    color: #657286;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.driver-route-row strong {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}

.driver-request-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 13px;
}

.request-meta-item {
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.request-meta-item i {
    color: var(--driver-cyan);
    font-size: 11px;
    margin-bottom: 3px;
}

.request-meta-item span {
    display: block;
    color: var(--driver-muted);
    font-size: 11px;
}

.request-meta-item strong {
    display: block;
    font-size: 11px;
    margin-top: 2px;
}

.driver-request-actions {
    display: grid;
    grid-template-columns: 1fr 46px;
    gap: 7px;
}

.driver-accept-btn {
    border: none;
    border-radius: 12px;
    padding: 12px;
    background: linear-gradient(
        135deg,
        var(--driver-cyan),
        var(--driver-green)
    );
    color: #061018;
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
}

.driver-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25,200,255,.2);
}

.driver-reject-btn {
    border: 1px solid rgba(255,92,108,.2);
    border-radius: 12px;
    background: rgba(255,92,108,.06);
    color: var(--driver-red);
    cursor: pointer;
}

.driver-reject-btn:hover {
    background: rgba(255,92,108,.13);
}


/* ACTIVE RIDE
--------------------------------------------------------- */

.active-ride-panel {
    padding: 18px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(32,232,137,.09),
            transparent 45%
        ),
        var(--driver-card);
}

.active-ride-header {
    
    
    
    gap: 10px;
    margin-bottom: 16px;
}

.active-ride-header h3 {
    
    font-size: 17px;
}

.active-ride-badge {
    padding: 5px 9px;
    border-radius: 50px;
    background: rgba(32,232,137,.1);
    border: 1px solid rgba(32,232,137,.2);
    color: var(--driver-green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
}

.active-route {
    padding: 13px;
    border-radius: 15px;
    background: rgba(0,0,0,.15);
}

.route-line {
    
    
    gap: 10px;
}

.route-point {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(25,200,255,.1);
    color: var(--driver-cyan);
    font-size: 11px;
}

.route-point.destination {
    background: rgba(32,232,137,.1);
    color: var(--driver-green);
}

.route-line small {
    display: block;
    color: #657286;
    font-size: 11px;
}

.route-line strong {
    display: block;
    font-size: 11px;
    margin-top: 2px;
}

.route-connector {
    height: 18px;
    width: 1px;
    margin-left: 13px;
    border-left: 1px dashed rgba(255,255,255,.15);
}

.active-rider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.rider-avatar {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(139,124,255,.1);
    color: var(--driver-purple);
}

.rider-info {
    flex: 1;
}

.rider-info strong {
    display: block;
    font-size: 12px;
}

.rider-info span {
    color: var(--driver-yellow);
    font-size: 11px;
}

.rider-actions {
    display: flex;
    gap: 5px;
}

.rider-actions button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: #cbd5e1;
    cursor: pointer;
}

.active-ride-fare {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 12px;
}

.active-ride-fare span {
    color: var(--driver-muted);
    font-size: 11px;
}

.active-ride-fare strong {
    color: var(--driver-green);
    font-size: 20px;
}



.navigate-btn,
.trip-primary-btn {
    min-height: 43px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
}

.navigate-btn {
    
    border: 1px solid rgba(25,200,255,.2);
    
}

.trip-primary-btn {
    border: none;
    background: linear-gradient(
        135deg,
        var(--driver-cyan),
        var(--driver-green)
    );
    color: #061018;
}


/* EMPTY STATE
--------------------------------------------------------- */

.driver-empty-state {
    padding: 35px 20px;
    text-align: center;
}

.empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(25,200,255,.07);
    color: var(--driver-cyan);
    font-size: 22px;
}

.driver-empty-state h3 {
    font-size: 14px;
    margin-bottom: 5px;
}

.driver-empty-state p {
    color: var(--driver-muted);
    font-size: 11px;
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto 15px;
}

.go-online-btn {
    border: none;
    border-radius: 11px;
    padding: 10px 17px;
    background: linear-gradient(
        135deg,
        var(--driver-cyan),
        var(--driver-green)
    );
    color: #061018;
    font-weight: 800;
    cursor: pointer;
}


/* PERFORMANCE
--------------------------------------------------------- */

.driver-performance {
    margin-top: 18px;
}

.performance-period {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: var(--driver-muted);
    font-size: 11px;
    cursor: pointer;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.06);
}

.performance-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px 20px;
    border-right: 1px solid rgba(255,255,255,.06);
}

.performance-item:last-child {
    border-right: none;
}

.performance-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(25,200,255,.07);
    color: var(--driver-cyan);
}

.performance-item small {
    display: block;
    color: var(--driver-muted);
    font-size: 11px;
}

.performance-item strong {
    display: block;
    font-size: 14px;
    margin-top: 3px;
}


/* QUICK ACTIONS
--------------------------------------------------------- */

.driver-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 18px;
    overflow: hidden;
}

.driver-quick-actions button {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;
    text-align: left;
    padding: 18px;
    border: none;
    border-right: 1px solid rgba(255,255,255,.06);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: .25s ease;
}

.driver-quick-actions button:last-child {
    border-right: none;
}

.driver-quick-actions button:hover {
    background: rgba(25,200,255,.035);
}

.driver-quick-actions button > span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(25,200,255,.08);
    color: var(--driver-cyan);
}

.driver-quick-actions strong {
    font-size: 12px;
    align-self: end;
}

.driver-quick-actions small {
    color: var(--driver-muted);
    font-size: 11px;
    margin-top: 3px;
}


/* LEAFLET DARK MODE
--------------------------------------------------------- */

.driver-dashboard .leaflet-control-zoom a {
    background: rgba(7,11,18,.9) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.08) !important;
}

.driver-dashboard .leaflet-popup-content-wrapper {
    background: rgba(7,11,18,.95);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}

.driver-dashboard .leaflet-popup-tip {
    background: rgba(7,11,18,.95);
}


/* DRIVER MAP MARKER
--------------------------------------------------------- */

.driver-location-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid var(--driver-cyan);
    box-shadow:
        0 0 0 8px rgba(25,200,255,.13),
        0 0 25px rgba(25,200,255,.65);
}


/* MOBILE
--------------------------------------------------------- */


/* ============================================================
   RIDESWIFT PASSENGER PIN UI
   ============================================================ */
.passenger-pin-card{
    display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:13px 14px;
    border:1px solid rgba(255,215,80,.28);border-radius:16px;
    background:linear-gradient(135deg,rgba(255,193,7,.10),rgba(255,255,255,.04));
}
.passenger-pin-icon{width:42px;height:42px;min-width:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,193,7,.16);font-size:18px}
.passenger-pin-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.passenger-pin-copy small{font-size:11px;font-weight:800;letter-spacing:1.2px;opacity:.7}
.passenger-pin-copy strong{font-size:23px;letter-spacing:5px;line-height:1.15}
.passenger-pin-copy span{font-size:11px;opacity:.72;line-height:1.35}
.pin-copy-btn{width:40px;height:40px;min-width:40px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:inherit;cursor:pointer}
.ride-pin-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.68);backdrop-filter:blur(7px)}
.ride-pin-modal.show{display:flex}
.ride-pin-dialog{position:relative;z-index:100001;width:min(430px,100%);padding:28px 22px 22px;border-radius:24px;background:var(--card-bg,#101820);box-shadow:0 24px 80px rgba(0,0,0,.45);text-align:center;pointer-events:auto}
.ride-pin-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;font-size:28px;line-height:1;background:rgba(255,255,255,.08);color:inherit;cursor:pointer;pointer-events:auto}
.ride-pin-icon-large{width:68px;height:68px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;font-size:29px;background:rgba(255,193,7,.15);color:#ffc107}
.ride-pin-dialog h2{margin:8px 0 7px;font-size:23px}
.ride-pin-help{margin:0 auto 18px;max-width:350px;font-size:13px;line-height:1.5;opacity:.72}
.ride-pin-dialog label{display:block;text-align:left;font-size:12px;font-weight:700;margin:0 0 7px}
.ride-pin-input{position:relative;z-index:100002;width:100%;height:58px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit;text-align:center;font-size:28px;font-weight:800;letter-spacing:8px;outline:none;pointer-events:auto;user-select:text;-webkit-user-select:text;touch-action:manipulation;caret-color:#ffc107}
.ride-pin-input:focus{border-color:#ffc107;box-shadow:0 0 0 3px rgba(255,193,7,.12)}
.ride-pin-error{min-height:20px;margin:8px 0;color:#ff7b7b;font-size:12px}
.ride-pin-verify-btn{width:100%;min-height:52px;border:0;border-radius:14px;font-weight:800;font-size:15px;cursor:pointer;background:#ffc107;color:#111}
.ride-pin-verify-btn:disabled{opacity:.65;cursor:wait}
/* Merchant delivery PIN modal */
.delivery-pin-modal{position:fixed;inset:0;z-index:120000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(2,8,14,.78);backdrop-filter:blur(8px)}
.delivery-pin-modal.show{display:flex}
.delivery-pin-dialog{position:relative;width:min(410px,calc(100vw - 28px));box-sizing:border-box;padding:24px 20px 20px;border-radius:24px;background:#0d1822;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 90px rgba(0,0,0,.55);color:#fff;text-align:left;animation:deliveryPinIn .18s ease-out}
@keyframes deliveryPinIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.delivery-pin-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#152330;color:#cbd5e1;font-size:24px;line-height:1;cursor:pointer}
.delivery-pin-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:rgba(22,198,200,.1);color:#6fe8eb;font-size:25px;margin-bottom:13px}
.delivery-pin-dialog h2{margin:0 42px 6px 0;font-size:21px}.delivery-pin-dialog p{margin:0 0 17px;color:#91a0af;font-size:12px;line-height:1.5}
.delivery-pin-label{display:block;margin:0 0 7px;font-size:11px;font-weight:800;color:#cbd5e1}
.delivery-pin-field{width:100%;height:58px;box-sizing:border-box;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:#07111a;color:#fff;text-align:center;font-size:28px;font-weight:900;letter-spacing:9px;outline:none;caret-color:#16c6c8}
.delivery-pin-field:focus{border-color:#16c6c8;box-shadow:0 0 0 3px rgba(22,198,200,.12)}
.delivery-pin-error{min-height:18px;margin:7px 0;color:#ff8d8d;font-size:11px}.delivery-pin-attempts{min-height:16px;margin:0 0 12px;color:#8291a0;font-size:11px}
.delivery-pin-submit{width:100%;height:50px;border:0;border-radius:14px;background:linear-gradient(145deg,#16c6c8,#0e9da8);color:#061217;font-weight:900;font-size:14px;cursor:pointer}.delivery-pin-submit:disabled{opacity:.65;cursor:wait}
.delivery-pin-cancel{width:100%;height:42px;margin-top:8px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#111d28;color:#aebbc8;font-weight:700;cursor:pointer}
@media(max-width:480px){.delivery-pin-dialog{padding:21px 15px 16px;border-radius:20px}.delivery-pin-field{height:54px;font-size:25px;letter-spacing:7px}}

.driver-inline-pin{display:block;margin:14px 0 0;padding:16px;border:1px solid rgba(255,193,7,.28);border-radius:16px;background:rgba(255,193,7,.08)}
.driver-inline-pin-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:800}
.driver-inline-pin-head i{color:#ffc107}
.driver-inline-pin-help{font-size:12px;line-height:1.45;opacity:.75;margin:0 0 10px}
.driver-inline-pin-row{display:flex;gap:8px;align-items:stretch}
.driver-inline-pin-input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:inherit;text-align:center;font-size:22px;font-weight:800;letter-spacing:6px;outline:none}
.driver-inline-pin-input:focus{border-color:#ffc107;box-shadow:0 0 0 3px rgba(255,193,7,.12)}
.driver-inline-pin-btn{min-width:120px;border:0;border-radius:12px;background:#ffc107;color:#111;font-weight:800;padding:0 14px;cursor:pointer}
.driver-inline-pin-error{min-height:18px;margin-top:7px;color:#ff7b7b;font-size:12px}
@media(max-width:520px){.driver-inline-pin-row{flex-direction:column}.driver-inline-pin-btn{height:46px;width:100%}}
@media(max-width:600px){
 .passenger-pin-card{align-items:flex-start;padding:12px}.passenger-pin-copy strong{font-size:21px}.ride-pin-dialog{padding:26px 16px 18px;border-radius:20px}.ride-pin-input{height:55px}
}

@media (max-width: 1100px) {

    .driver-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .driver-workspace {
        grid-template-columns: 1fr;
    }

    .driver-map-wrapper {
        height: 430px;
    }

    .driver-side-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

}


@media (max-width: 768px) {

    .driver-dashboard {
        padding: 10px 12px 100px;
    }

    .driver-topbar {
        margin-bottom: 12px;
    }

    .driver-welcome-card {
        padding: 17px;
        border-radius: 20px;
        align-items: stretch;
        flex-direction: column;
    }

    .driver-welcome-content {
        align-items: flex-start;
    }

    .driver-avatar-large {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        flex-basis: 52px;
    }

    .driver-welcome-text h1 {
        font-size: 19px;
    }

    .driver-welcome-text p {
        font-size: 11px;
    }

    .driver-online-switch {
        width: 100%;
    }

    .driver-stats-grid {
        
        gap: 9px;
    }

    .driver-stat-card {
        padding: 13px;
        min-height: 88px;
        border-radius: 17px;
    }

    .driver-stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .driver-stat-content strong {
        font-size: 17px;
    }

    .driver-stat-content span {
        font-size: 11px;
    }

    

    

    

    

    .performance-item {
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .performance-item:nth-child(2) {
        border-right: none;
    }

    

    .driver-quick-actions button {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .driver-quick-actions button:last-child {
        border-bottom: none;
    }

}


@media (max-width: 480px) {

    .driver-brand-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .driver-brand strong {
        font-size: 15px;
    }

    .driver-icon-btn,
    .driver-avatar-btn {
        width: 37px;
        height: 37px;
    }

    .driver-avatar {
        width: 33px;
        height: 33px;
    }

    .driver-welcome-content {
        gap: 11px;
    }

    .driver-map-header {
        padding: 15px;
    }

    .driver-map-wrapper {
        height: 300px;
    }

    .driver-request-meta {
        grid-template-columns: repeat(3, 1fr);
    }

    .active-ride-actions {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   DRIVER DASHBOARD
   ============================================================ */

.driver-dashboard {
    min-height: 100vh;
    
    color: #fff;
}


/* ============================================================
   ONLINE STATUS
   ============================================================ */

#driverStatusBtn {
    position: relative;
    min-width: 145px;
    height: 52px;
    border: 0;
    border-radius: 30px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
    background: #202832;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#driverStatusBtn.online {
    background: #00c878;
    color: #001b10;
    box-shadow:
        0 0 0 5px rgba(0,200,120,.10),
        0 12px 35px rgba(0,200,120,.25);
}

#driverStatusBtn.offline {
    background: #242d35;
}

#driverStatusBtn:hover {
    transform: translateY(-2px);
}

#driverStatusBtn:active {
    transform: scale(.97);
}

#driverStatusBtn.loading {
    opacity: .65;
    pointer-events: none;
}


/* ============================================================
   RIDE REQUEST CARD
   ============================================================ */

.driver-ride-request {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 14px;

    backdrop-filter: blur(20px);

    transform: translateY(12px);
    opacity: 0;

    transition:
        opacity .35s ease,
        transform .35s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.driver-ride-request.show {
    opacity: 1;
    transform: translateY(0);
}

.driver-ride-request:hover {
    border-color: rgba(0,255,150,.25);

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);
}


/* ============================================================
   REQUEST HEADER
   ============================================================ */

.ride-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.passenger-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.passenger-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(255,255,255,.08);
    color: #00e88b;
}

.passenger-info strong {
    display: block;
    font-size: 15px;
}

.passenger-info small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.64);
    font-size: 11px;
}

.ride-fare {
    text-align: right;
}

.ride-fare span {
    display: block;
    color: rgba(255,255,255,.60);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ride-fare strong {
    display: block;
    color: #00ee91;
    font-size: 20px;
    margin-top: 3px;
}


/* ============================================================
   ROUTE
   ============================================================ */

.ride-route {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 18px;
    background: rgba(0,0,0,.18);
}

.route-line {
    width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 0;
}

.route-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pickup-dot {
    background: #00df86;
    box-shadow: 0 0 0 5px rgba(0,223,134,.12);
}

.destination-dot {
    background: #fff;
}

.route-line span {
    width: 2px;
    flex: 1;
    min-height: 30px;
    margin: 6px 0;
    background: rgba(255,255,255,.18);
}

.route-locations {
    flex: 1;
}

.route-location {
    min-height: 55px;
}

.route-location + .route-location {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 10px;
}

.route-location small {
    display: block;
    color: rgba(255,255,255,.60);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 5px;
}

.route-location strong {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
}


/* ============================================================
   RIDE META
   ============================================================ */

.ride-meta {
    display: flex;
    gap: 20px;
    padding: 13px 3px;
    color: rgba(255,255,255,.64);
    font-size: 12px;
}

.ride-meta i {
    color: #00dc84;
    margin-right: 5px;
}


/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.driver-ride-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.accept-ride-btn,
.reject-ride-btn {
    height: 52px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 800;
    transition: .2s ease;
}

.accept-ride-btn {
    flex: 1;
    background: #00d982;
    color: #001b10;
}

.accept-ride-btn:hover {
    background: #00ef91;
    transform: translateY(-2px);
}

.accept-ride-btn:disabled {
    opacity: .65;
    pointer-events: none;
}

.reject-ride-btn {
    width: 52px;
    background: rgba(255,255,255,.07);
    color: #ff6d6d;
}

.reject-ride-btn:hover {
    background: rgba(255,70,70,.12);
}


/* ============================================================
   LOADING
   ============================================================ */

.driver-loading {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(255,255,255,.64);
}

.driver-loader {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.08);
    border-top-color: #00e58a;
    animation: driverSpin .8s linear infinite;
}

@keyframes driverSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   NO RIDES / OFFLINE
   ============================================================ */

.no-rides-state,
.driver-offline-state,
.driver-error-state {
    min-height: 300px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.no-rides-state h3,
.driver-offline-state h3,
.driver-error-state h3 {
    margin: 20px 0 8px;
    font-size: 20px;
}

.no-rides-state p,
.driver-offline-state p,
.driver-error-state p {
    max-width: 340px;
    color: rgba(255,255,255,.60);
    line-height: 1.6;
    font-size: 13px;
}


/* ============================================================
   RADAR
   ============================================================ */

.radar-animation {
    width: 104px;
    height: 104px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,157,.12) 0%, rgba(0,255,157,.045) 34%, rgba(0,255,157,0) 72%);
    box-shadow: 0 0 0 1px rgba(0,255,157,.10), 0 0 30px rgba(0,255,157,.10), inset 0 0 24px rgba(0,255,157,.06);
    animation: radarCoreGlow 1.8s ease-in-out infinite;
}

.radar-animation::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(0,255,157,.38);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(0,255,157,.18);
}

.radar-animation i {
    position: relative;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #00ff9d;
    font-size: 24px;
    background: rgba(0,255,157,.08);
    border: 1px solid rgba(0,255,157,.58);
    box-shadow: 0 0 10px rgba(0,255,157,.35), 0 0 28px rgba(0,255,157,.22);
    animation: radarIconPulse 1.25s ease-in-out infinite;
}

.radar-animation span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0,229,138,.4);
    border-radius: 50%;
    animation: radarPulse 2.5s infinite;
}

.radar-animation span:nth-child(2) {
    animation-delay: .8s;
}

.radar-animation span:nth-child(3) {
    animation-delay: 1.6s;
}

@keyframes radarPulse {
    0% {
        transform: scale(.2);
        opacity: .9;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes radarCoreGlow {
    0%, 100% {
        transform: scale(.96);
        box-shadow: 0 0 0 1px rgba(0,255,157,.08), 0 0 20px rgba(0,255,157,.08), inset 0 0 18px rgba(0,255,157,.04);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 1px rgba(0,255,157,.22), 0 0 42px rgba(0,255,157,.22), inset 0 0 30px rgba(0,255,157,.10);
    }
}

@keyframes radarIconPulse {
    0%, 100% {
        transform: scale(.92);
        opacity: .78;
        box-shadow: 0 0 8px rgba(0,255,157,.25), 0 0 18px rgba(0,255,157,.12);
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
        box-shadow: 0 0 14px rgba(0,255,157,.65), 0 0 34px rgba(0,255,157,.30);
    }
}

.no-rides-state h3 {
    position: relative;
    margin-top: 14px;
    text-shadow: 0 0 14px rgba(255,255,255,.16), 0 0 26px rgba(0,255,157,.10);
    animation: lookingTitlePulse 1.8s ease-in-out infinite;
}

@keyframes lookingTitlePulse {
    0%, 100% { opacity: .88; }
    50% { opacity: 1; text-shadow: 0 0 16px rgba(255,255,255,.24), 0 0 30px rgba(0,255,157,.16); }
}


/* ============================================================
   SEARCHING
   ============================================================ */

.searching-indicator {
    margin-top: 20px;
    font-size: 11px;
    color: rgba(255,255,255,.64);
    display: inline-flex;
    align-items: center;
    position: relative;
    font-weight: 600;
    letter-spacing: .15px;
}

/* Prominent live-search flash: bright core + expanding radar rings. */
.searching-indicator span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 10px;
    border-radius: 50%;
    background: #00ff9d;
    box-shadow: 0 0 5px #00ff9d, 0 0 14px rgba(0,255,157,.95), 0 0 28px rgba(0,255,157,.55);
    position: relative;
    flex: 0 0 11px;
    animation: searchingDot 1.05s ease-in-out infinite;
}

.searching-indicator span::before,
.searching-indicator span::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px solid rgba(0,255,157,.72);
    border-radius: 50%;
    animation: searchingRipple 1.6s ease-out infinite;
    pointer-events: none;
}

.searching-indicator span::after {
    animation-delay: .8s;
}

@keyframes searchingDot {
    0%, 100% {
        transform: scale(.72);
        opacity: .65;
        box-shadow: 0 0 4px #00ff9d, 0 0 10px rgba(0,255,157,.75), 0 0 18px rgba(0,255,157,.35);
    }
    45% {
        transform: scale(1.28);
        opacity: 1;
        box-shadow: 0 0 7px #00ff9d, 0 0 20px rgba(0,255,157,1), 0 0 40px rgba(0,255,157,.75);
    }
    60% {
        transform: scale(1);
        opacity: .95;
    }
}

@keyframes searchingRipple {
    0% {
        transform: scale(.35);
        opacity: .9;
    }
    70% {
        transform: scale(1.65);
        opacity: .18;
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .searching-indicator span,
    .searching-indicator span::before,
    .searching-indicator span::after,
    .radar-animation,
    .radar-animation i,
    .no-rides-state h3 {
        animation: none;
    }
}


/* ============================================================
   OFFLINE
   ============================================================ */

.offline-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.60);
    font-size: 25px;
}

.go-online-btn,
.retry-rides-btn {
    margin-top: 20px;
    border: 0;
    border-radius: 14px;
    padding: 13px 20px;
    background: #00dc84;
    color: #001b10;
    font-weight: 800;
    cursor: pointer;
}


/* ============================================================
   ACTIVE RIDE
   ============================================================ */

.active-driver-ride {
    position: fixed;
    left: 50%;
    bottom: 20px;
    width: min(520px, calc(100% - 30px));

    transform:
        translate(-50%, 130%);

    opacity: 0;

    z-index: 9999;

    padding: 20px;

    background:
        rgba(8,17,24,.96);

    border: 1px solid rgba(0,229,138,.2);

    border-radius: 25px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.55);

    backdrop-filter: blur(25px);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease;
}

.active-driver-ride.active {
    transform:
        translate(-50%, 0);

    opacity: 1;
}

.active-ride-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.active-label {
    color: #00e58a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.active-ride-header h3 {
    margin: 4px 0 0;
}

.active-status-dot {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #00e58a;
    font-size: 11px;
}

.active-status-dot span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e58a;
    box-shadow: 0 0 10px #00e58a;
}


/* ============================================================
   TRIP PROGRESS
   ============================================================ */

.active-ride-progress {
    display: flex;
    align-items: center;
    margin: 25px 0;
}

.trip-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.60);
    font-size: 11px;
}

.trip-step span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.trip-step.active {
    color: #00e58a;
}

.trip-step.active span {
    background: #00e58a;
    color: #001b10;
}

.trip-progress-line {
    flex: 1;
    height: 2px;
    margin: 0 5px 16px;
    background: rgba(255,255,255,.1);
}


/* ============================================================
   ACTIVE ACTIONS
   ============================================================ */

.active-ride-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.navigate-btn,
.pickup-btn {
    height: 50px;
    border: 0;
    border-radius: 15px;
    font-weight: 800;
    cursor: pointer;
}

.navigate-btn {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.pickup-btn {
    background: #00dc84;
    color: #001b10;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

.ride-accepted {
    opacity: 0 !important;
    transform: scale(.96) translateY(-10px) !important;
}

.ride-rejecting {
    opacity: 0 !important;
    transform: translateX(30px) !important;
}

.button-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: #001b10;
    border-radius: 50%;
    animation: driverSpin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .driver-ride-request {
        border-radius: 20px;
        padding: 16px;
    }

    .ride-fare strong {
        font-size: 18px;
    }

    .route-location strong {
        font-size: 12px;
    }

    .active-driver-ride {
        bottom: 10px;
        width: calc(100% - 20px);
    }

    #driverStatusBtn {
        width: 100%;
    }
}
    
        /* =========================================================
           MY RIDES — CLEAN CARD LAYOUT
           ========================================================= */
        .ride-item {
            display:block !important;
            padding:18px !important;
            border-radius:16px !important;
        }
        /* Ride filters must override the card's display:block !important. */
        #riderRidesContainer .ride-item.ride-filter-hidden {
            display:none !important;
        }


        .ride-main-row {
            display:grid;
            grid-template-columns:auto minmax(0,1fr) auto;
            align-items:center;
            gap:16px;
            padding-bottom:14px;
            border-bottom:1px solid rgba(255,255,255,.06);
        }

        .ride-vehicle-badge {
            display:flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:10px;
            background:rgba(212,175,55,.10);
            border:1px solid rgba(212,175,55,.18);
            color:#d4af37;
            font-size:11px;
            font-weight:800;
            text-transform:uppercase;
            white-space:nowrap;
        }

        .ride-route-block { min-width:0; }
        .ride-route-label {
            color:rgba(255,255,255,.60);
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:.6px;
            margin-bottom:4px;
        }
        .ride-route-label i { color:#d4af37; margin-right:4px; }

        .ride-item .route {
            display:flex;
            align-items:center;
            gap:8px;
            font-size:15px !important;
            font-weight:700 !important;
            line-height:1.35;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .ride-item .route span { overflow:hidden; text-overflow:ellipsis; }
        .ride-item .route > i { color:#d4af37; flex-shrink:0; }

        .ride-summary-row {
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr)) auto;
            align-items:center;
            gap:12px;
            padding:15px 0;
        }

        .ride-summary-item, .ride-fare-block { min-width:0; }
        .ride-summary-item small, .ride-fare-block small {
            display:block;
            color:rgba(255,255,255,.60);
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:.5px;
            margin-bottom:4px;
        }
        .ride-summary-item strong {
            display:block;
            color:rgba(255,255,255,.78);
            font-size:12px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .ride-summary-item strong i { color:#d4af37; margin-right:4px; }

        .ride-fare-block {
            text-align:right;
            padding-left:15px;
            border-left:1px solid rgba(255,255,255,.07);
        }
        .ride-fare-block strong {
            display:block;
            color:#f3df9b;
            font-size:21px;
            font-weight:900;
        }

        .ride-card-actions {
            justify-content:flex-end !important;
            margin-left:0 !important;
            padding-top:12px;
            border-top:1px solid rgba(255,255,255,.05);
        }

        @media (max-width:900px) {
            .ride-summary-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .ride-fare-block { text-align:left; padding-left:0; border-left:0; }
        }

        @media (max-width:700px) {
            .ride-main-row { grid-template-columns:1fr auto; gap:10px; }
            .ride-vehicle-badge { grid-column:1; grid-row:1; }
            .ride-main-row .ride-status { grid-column:2; grid-row:1; }
            .ride-route-block { grid-column:1 / -1; grid-row:2; }
            .ride-item .route { white-space:normal; }
            .ride-summary-row { grid-template-columns:1fr 1fr; }
            .ride-card-actions { width:100%; }
        }

        @media (max-width:450px) {
            .ride-summary-row { grid-template-columns:1fr; }
        }


/* =========================================================
   RIDESWIFT LEGACY GOLD DASHBOARD THEME
   Matches the landing page signature gold / black luxury theme
   ========================================================= */
:root{
    --gold:#d4af37;
    --gold-soft:#f3df9b;
    --gold-pale:#fff5cf;
    --gold-dark:#9b7617;
    --dash-ink:#050a10;
    --dash-surface:#0c141d;
    --dash-surface-2:#111b26;
    --dash-line:rgba(212,175,55,.16);
    /* Canonical aliases — consolidates 3 previously-competing color systems
       (dash-*, rs-* v1, rs-* v2) into one source of truth. */
    --rs-gold:var(--gold);
    --rs-gold2:var(--gold-soft);
    --rs-gold-soft:var(--gold-soft);
    --rs-teal:#18c6d8;
    --rs-green:#20d56b;
    --rs-bg:var(--dash-ink);
    --rs-panel:var(--dash-surface);
    --rs-panel-2:var(--dash-surface-2);
    --rs-panel2:var(--dash-surface-2);
    --rs-line:rgba(255,255,255,.075);
    --rs-muted:#8b99aa;
    --rs-white:#f7f9fc;
}
body{
    
    color:#f5f3ed !important;
}
::-webkit-scrollbar-track{background:#050a10!important}
::-webkit-scrollbar-thumb{background:#d4af37!important}

/* Dashboard shell */
.dashboard,
.dashboard-main,
.dashboard-content,
.dashboard-page{
    color:#f5f3ed!important;
}
.dashboard-header{
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    border:1px solid rgba(212,175,55,.16)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(14px);
}
.dashboard-header h1,.dashboard-header h2,.dashboard-header h3,
.dashboard-header strong,.dashboard-header .title{color:#fff!important}
.dashboard-header p,.dashboard-subtitle,.dashboard-header small{color:rgba(255,255,255,.58)!important}

/* Premium cards */
.stat-card,
.rider-premium-hero,
.rider-premium-card,
.ride-card,
.ride-history-card,
.driver-welcome-card,
.driver-stat-card,
.driver-card,
.quick-action-card,
.panel-card,
.admin-card,
.admin-mini,
.card,
.map-card,
.section-card{
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    border:1px solid rgba(255,255,255,.075)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(14px);
}
.stat-card:hover,
.rider-premium-card:hover,
.driver-stat-card:hover,
.quick-action-card:hover,
.panel-card:hover,
.card:hover{
    border-color:rgba(212,175,55,.28)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.30),0 0 35px rgba(212,175,55,.045)!important;
}

/* Gold accents */
.stat-card.primary,.stat-card.info,.stat-card.success,.stat-card.highlight,
.earnings-card{
    border-color:rgba(212,175,55,.18)!important;
}
.stat-icon,
.driver-stat-icon,
.premium-card-icon,
.role-badge,
.driver-eyebrow,
.premium-eyebrow{
    color:#d4af37!important;
    border-color:rgba(212,175,55,.22)!important;
    background:rgba(212,175,55,.08)!important;
}
.stat-card h3,
.driver-stat-card strong,
.admin-mini strong,
.ride-card .price,
.fare,
.amount,
.points,
.earnings,
#driverTodayEarnings,
#riderTotalRides,
#riderPendingRides,
#riderCompletedRides,
#riderPoints{
    color:#f3df9b!important;
}

/* Primary controls */
.primary-btn,
.btn-primary,
.book-btn,
.confirm-btn,
.driver-online-switch.online,
.action-primary,
.nav-cta{
    background:linear-gradient(135deg,#b98d18,#d4af37,#f5df9d)!important;
    color:#090a0d!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 12px 35px rgba(212,175,55,.16),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.primary-btn:hover,.btn-primary:hover,.book-btn:hover,.confirm-btn:hover,
.action-primary:hover,.nav-cta:hover{
    box-shadow:0 18px 45px rgba(212,175,55,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;
    transform:translateY(-2px);
}
.logout-btn,.driver-icon-btn,.action-btn,.secondary-btn,.btn-secondary{
    background:rgba(255,255,255,.035)!important;
    color:#f5f3ed!important;
    border-color:rgba(255,255,255,.10)!important;
}
.logout-btn:hover,.driver-icon-btn:hover,.action-btn:hover,.secondary-btn:hover,.btn-secondary:hover{
    color:#f3df9b!important;
    border-color:rgba(212,175,55,.30)!important;
    background:rgba(212,175,55,.06)!important;
}

/* Forms */
input,select,textarea{
    background:rgba(255,255,255,.035)!important;
    color:#f5f3ed!important;
    border-color:rgba(255,255,255,.10)!important;
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(212,175,55,.55)!important;
    box-shadow:0 0 0 3px rgba(212,175,55,.08)!important;
    outline:none!important;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.60)!important}
label{color:rgba(255,255,255,.70)!important}

/* Map */
#map,.map-container,.dashboard-map,.map-card{
    border-color:rgba(212,175,55,.16)!important;
    box-shadow:0 20px 60px rgba(0,0,0,.35)!important;
}
.map-overlay,.map-controls,.map-info{
    background:rgba(7,9,13,.86)!important;
    border-color:rgba(212,175,55,.16)!important;
    backdrop-filter:blur(16px);
}
.map-controls button:hover,.map-control:hover{color:#d4af37!important;border-color:rgba(212,175,55,.35)!important}

/* Status / badges */
.status-dot.online,.online .status-dot,.live-dot,.pulse-dot{background:#d4af37!important;box-shadow:0 0 0 3px rgba(212,175,55,.12),0 0 12px rgba(212,175,55,.42)!important}
.status-badge,.ride-status,.admin-pill{border-color:rgba(212,175,55,.18)!important}
.role-badge{color:#f3df9b!important}

/* Tables / lists */
.admin-table th{color:#f3df9b!important;border-bottom-color:rgba(212,175,55,.16)!important}
.admin-table td{border-bottom-color:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.72)!important}
.admin-table tr:hover td{background:rgba(212,175,55,.025)!important}

/* Bottom navigation */
.bottom-nav{
    
    border-top:1px solid rgba(212,175,55,.16)!important;
    
    backdrop-filter:blur(20px)!important;
}
.bottom-nav a,.bottom-nav button{color:rgba(255,255,255,.55)!important}
.bottom-nav a.active,.bottom-nav button.active,
.bottom-nav a:hover,.bottom-nav button:hover{color:#f3df9b!important}
.bottom-nav .active i,.bottom-nav .active .nav-icon{color:#d4af37!important}

/* Gold headings and icons */
.section-title,.dashboard-title{color:#fff!important}
.section-title .highlight,.gold-text,.text-gold{color:#f3df9b!important}
.dashboard i:not(.fa-times):not(.fa-xmark){ }

/* Modals / toast */
.modal-content,.modal-dialog .modal-content,.confirm-modal,.toast-notification{
    background:linear-gradient(145deg,#0c141d,#050a10)!important;
    color:#f5f3ed!important;
    border:1px solid rgba(212,175,55,.18)!important;
    box-shadow:0 25px 80px rgba(0,0,0,.55)!important;
}
.modal-content h1,.modal-content h2,.modal-content h3,.modal-content h4{color:#fff!important}

/* Subtle gold divider */
.dashboard hr,.section-divider{border-color:rgba(212,175,55,.12)!important}

@media(max-width:768px){
    .dashboard-header,.stat-card,.rider-premium-hero,.rider-premium-card,
    .ride-card,.driver-welcome-card,.driver-stat-card,.card,.panel-card{border-radius:18px!important}
}


/* =========================================================
   UNIFIED DASHBOARD STATISTICS — rider / driver / admin
   ========================================================= */
.dashboard-stats-section{
    margin: 20px 0 24px;
    width: 100%;
    min-width: 0;
}
.dashboard-stats-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 12px;
}
.dashboard-stats-heading h2{
    margin:3px 0 0;
    font-size:18px;
    line-height:1.2;
    color:#fff;
}
.dashboard-stats-section .rider-stats,
.dashboard-stats-section .driver-stats-grid{
    margin:0;
}
.rider-stats,
.admin-stats-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.admin-stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.stat-card,
.driver-stat-card{
    min-width:0;
    min-height:96px;
    overflow:hidden;
}
.stat-content,
.driver-stat-content{
    min-width:0;
    flex:1 1 auto;
}
.stat-content h3,
.driver-stat-content strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.stat-content p,
.driver-stat-content span,
.driver-stat-content small{
    overflow-wrap:anywhere;
}
.driver-stats-section{
    margin-top:22px;
    margin-bottom:0;
}
.driver-stats-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.admin-stats-section{
    margin-top:0;
}

@media (max-width: 980px){
    .rider-stats,
    .admin-stats-grid,
    .driver-stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width: 560px){
    .dashboard-stats-section{
        margin:16px 0 18px;
    }
    .dashboard-stats-heading{
        margin-bottom:9px;
    }
    .dashboard-stats-heading h2{
        font-size:16px;
    }
    .rider-stats,
    .admin-stats-grid,
    .driver-stats-grid{
        gap:8px !important;
    }
    .stat-card,
    .driver-stat-card{
        min-height:84px;
        padding:12px !important;
        gap:10px;
        border-radius:15px !important;
    }
    .stat-icon,
    .driver-stat-icon{
        width:36px !important;
        height:36px !important;
        flex:0 0 36px !important;
        border-radius:11px;
        font-size:16px;
    }
    .stat-content h3,
    .driver-stat-content strong{
        font-size:17px !important;
        line-height:1.15;
    }
    .stat-content p,
    .driver-stat-content span{
        font-size:11px !important;
        line-height:1.25;
    }
    .driver-stat-content small{
        font-size:11px !important;
        line-height:1.25;
    }
}
@media (max-width: 360px){
    .rider-stats,
    .admin-stats-grid,
    .driver-stats-grid{
        grid-template-columns:1fr !important;
    }
}


/* DRIVER ACCOUNT APPROVAL + SUBSCRIPTION */
.driver-account-gate-card{display:flex;align-items:center;gap:16px;margin:18px 0;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(20,184,166,.08),rgba(255,255,255,.025));box-shadow:0 12px 35px rgba(0,0,0,.14)}
.driver-account-gate-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(20,184,166,.12);color:#14b8a6;font-size:20px;flex:0 0 auto}.driver-account-gate-copy{flex:1;min-width:0}.driver-account-gate-copy h3{margin:3px 0 5px;color:#fff;font-size:17px}.driver-account-gate-copy p{margin:0;color:#8d98aa;font-size:12px;line-height:1.45}.driver-account-gate-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.driver-gate-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.06);color:#b8c2d1}.driver-gate-pill.approved,.driver-gate-pill.active{background:rgba(34,197,94,.12);color:#6ee7a0}.driver-gate-pill.pending{background:rgba(245,158,11,.12);color:#fbbf24}.driver-gate-pill.rejected,.driver-gate-pill.expired,.driver-gate-pill.failed{background:rgba(239,68,68,.12);color:#ff8b8b}.driver-account-gate-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.driver-gate-btn{border:0;border-radius:11px;padding:10px 13px;background:linear-gradient(135deg,#14b8a6,#00d4ff);color:#061018;font-weight:800;font-size:11px;cursor:pointer}.driver-gate-btn.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#d9e2ee}.driver-gate-btn:disabled{opacity:.45;cursor:not-allowed}
.driver-renew-network-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.driver-renew-network-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.driver-renew-network-card{position:relative;display:flex;align-items:center;gap:9px;min-height:70px;padding:10px 9px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.035);color:#fff;text-align:left;cursor:pointer;transition:.18s ease;overflow:hidden}.driver-renew-network-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}.driver-renew-network-card .renew-network-logo{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;letter-spacing:-.02em;}.driver-renew-network-card strong{display:block;font-size:11px;line-height:1.2}.driver-renew-network-card small{display:block;margin-top:3px;color:rgba(255,255,255,.58);font-size:11px}.driver-renew-network-card>i{position:absolute;right:7px;top:7px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;opacity:0;transform:scale(.7);transition:.18s}.renew-network-mtn .renew-network-logo{background:#ffcc00;color:#111}.renew-network-mtn.selected{border-color:#ffcc00;background:rgba(255,204,0,.1);box-shadow:0 0 0 1px rgba(255,204,0,.2)}.renew-network-mtn.selected>i{background:#ffcc00;color:#111;opacity:1;transform:scale(1)}.renew-network-airtel .renew-network-logo{background:#e4002b;color:#fff}.renew-network-airtel.selected{border-color:#e4002b;background:rgba(228,0,43,.1);box-shadow:0 0 0 1px rgba(228,0,43,.2)}.renew-network-airtel.selected>i{background:#e4002b;color:#fff;opacity:1;transform:scale(1)}.renew-network-zamtel .renew-network-logo{background:#19a64a;color:#fff}.renew-network-zamtel.selected{border-color:#19a64a;background:rgba(25,166,74,.1);box-shadow:0 0 0 1px rgba(25,166,74,.2)}.renew-network-zamtel.selected>i{background:#19a64a;color:#fff;opacity:1;transform:scale(1)}@media(max-width:520px){.driver-renew-network-cards{grid-template-columns:1fr}.driver-renew-network-card{min-height:62px;padding:9px 11px}.driver-renew-network-card .renew-network-logo{width:38px;height:38px;flex-basis:38px}}
.driver-subscription-modal{position:fixed;inset:0;z-index:200000;display:none;align-items:center;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.72);backdrop-filter:blur(9px);overflow:auto;box-sizing:border-box;-webkit-overflow-scrolling:touch;isolation:isolate}.driver-subscription-modal.show{display:flex}.driver-subscription-dialog{position:relative;z-index:200001;width:min(520px,calc(100vw - 24px));max-width:520px;max-height:calc(100dvh - 24px);margin:auto;background:#0b1219;border:1px solid rgba(255,255,255,.09);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.55);padding:20px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.driver-subscription-dialog h3{margin:0 0 5px;color:#fff}.driver-subscription-dialog p{margin:0 0 16px;color:#8d98aa;font-size:12px;line-height:1.45}.driver-subscription-form{display:grid;gap:12px}.driver-subscription-form .input-group{min-width:0}.driver-subscription-form input,.driver-subscription-form select{width:100%;max-width:100%;box-sizing:border-box}.driver-subscription-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px;padding-top:4px}.driver-subscription-actions button{min-height:42px}.driver-subscription-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}@media(max-width:700px){.driver-account-gate-card{align-items:flex-start;flex-wrap:wrap}.driver-account-gate-actions{width:100%;justify-content:stretch}.driver-account-gate-actions .driver-gate-btn{flex:1}.driver-subscription-modal{align-items:flex-start;padding:8px 8px calc(76px + env(safe-area-inset-bottom));z-index:200000}.driver-subscription-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 92px - env(safe-area-inset-bottom));border-radius:16px;padding:16px;margin:8px 0}.driver-subscription-actions{display:grid;grid-template-columns:1fr 1fr;position:sticky;bottom:-1px;padding:10px 0 2px;margin-top:8px;background:#0b1219;z-index:2}.driver-subscription-actions button{width:100%}}@media(max-width:420px){.driver-subscription-actions{grid-template-columns:1fr}.driver-subscription-dialog{padding:14px}.driver-subscription-dialog h3{font-size:18px}.driver-subscription-dialog p{font-size:11px;margin-bottom:13px}}

.subscription-modal-open{overflow:hidden!important}

/* DRIVER REGISTRATION WIZARD */

/* Driver registration visual selectors */
/* Card-based replacements for every visible dropdown */
.select-card-group{position:relative}
.select-card-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}
.select-card-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.select-card-option{position:relative;display:flex;align-items:center;gap:11px;min-height:68px;padding:11px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035);color:#dbe4f2;cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.select-card-option:hover{transform:translateY(-2px);border-color:rgba(20,184,166,.5);background:rgba(20,184,166,.07)}
.select-card-option.selected{border-color:#14b8a6;background:rgba(20,184,166,.12);box-shadow:0 0 0 2px rgba(20,184,166,.12)}
.select-card-option .select-card-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:18px;color:#14b8a6}
.select-card-option .select-card-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.select-card-option .select-card-title{font-size:12px;font-weight:800;line-height:1.2}
.select-card-option .select-card-value{font-size:11px;color:#8d98aa;line-height:1.2}
.select-card-option .select-card-check{margin-left:auto;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#14b8a6;color:#06111a;font-size:11px;opacity:0;transform:scale(.7);transition:.18s}
.select-card-option.selected .select-card-check{opacity:1;transform:scale(1)}
.select-card-native + .select-card-options{display:grid}

/* =========================================================
   RIDER BOOKING — PREMIUM / BRAND CARD COLORS
   ========================================================= */
#paymentMethodGroup .select-card-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#paymentMethodGroup .select-card-option,
#vehicleType + .select-card-options .select-card-option{overflow:hidden}

/* Cash — premium black / champagne-gold */
#paymentMethodGroup .payment-cash{
    border-color:rgba(241,199,104,.38);
    background:linear-gradient(145deg,rgba(43,46,52,.98),rgba(18,20,25,.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.16);
}
#paymentMethodGroup .payment-cash .select-card-icon{
    color:#f4d27a;background:linear-gradient(145deg,#3a3d43,#202329);box-shadow:inset 0 0 0 1px rgba(244,210,122,.18)
}
#paymentMethodGroup .payment-cash:hover,
#paymentMethodGroup .payment-cash.selected{
    border-color:#f4d27a;background:linear-gradient(145deg,rgba(71,67,53,.98),rgba(25,25,24,.98));box-shadow:0 0 0 1px rgba(244,210,122,.25),0 10px 28px rgba(0,0,0,.24)
}
#paymentMethodGroup .payment-cash.selected .select-card-check{background:#f4d27a;color:#171717}

/* Airtel Money — Airtel red */
#paymentMethodGroup .payment-airtel-money{
    border-color:rgba(228,0,43,.45);
    background:linear-gradient(145deg,rgba(228,0,43,.22),rgba(92,5,27,.42));
}
#paymentMethodGroup .payment-airtel-money .select-card-icon{
    color:#fff;background:linear-gradient(145deg,#e4002b,#b90027);box-shadow:0 6px 18px rgba(228,0,43,.25)
}
#paymentMethodGroup .payment-airtel-money:hover,
#paymentMethodGroup .payment-airtel-money.selected{
    border-color:#e4002b;background:linear-gradient(145deg,rgba(228,0,43,.38),rgba(103,3,29,.52));box-shadow:0 0 0 1px rgba(228,0,43,.3),0 10px 28px rgba(228,0,43,.16)
}
#paymentMethodGroup .payment-airtel-money.selected .select-card-check{background:#fff;color:#c9002c}

/* MTN MoMo — MTN yellow */
#paymentMethodGroup .payment-mtn-momo{
    border-color:rgba(255,204,0,.5);
    background:linear-gradient(145deg,rgba(255,204,0,.24),rgba(124,91,0,.34));
    color:#fff;
}
#paymentMethodGroup .payment-mtn-momo .select-card-icon{
    color:#111;background:linear-gradient(145deg,#ffda32,#ffbf00);box-shadow:0 6px 18px rgba(255,204,0,.2)
}
#paymentMethodGroup .payment-mtn-momo:hover,
#paymentMethodGroup .payment-mtn-momo.selected{
    border-color:#ffcc00;background:linear-gradient(145deg,rgba(255,204,0,.38),rgba(132,96,0,.46));box-shadow:0 0 0 1px rgba(255,204,0,.32),0 10px 28px rgba(255,204,0,.12)
}
#paymentMethodGroup .payment-mtn-momo.selected .select-card-check{background:#ffcc00;color:#171717}

/* Vehicle cards — premium differentiated identities */
#vehicleType + .select-card-options{grid-template-columns:repeat(2,minmax(0,1fr))}
#vehicleType + .select-card-options .vehicle-bike{background:linear-gradient(145deg,rgba(124,58,237,.22),rgba(52,20,100,.38));border-color:rgba(167,139,250,.38)}
#vehicleType + .select-card-options .vehicle-bike .select-card-icon{color:#c4b5fd;background:rgba(124,58,237,.28)}
#vehicleType + .select-card-options .vehicle-bike:hover,#vehicleType + .select-card-options .vehicle-bike.selected{border-color:#a78bfa;background:linear-gradient(145deg,rgba(124,58,237,.34),rgba(52,20,100,.5));box-shadow:0 0 0 1px rgba(167,139,250,.22)}
#vehicleType + .select-card-options .vehicle-taxi{background:linear-gradient(145deg,rgba(14,165,233,.18),rgba(8,47,73,.42));border-color:rgba(56,189,248,.36)}
#vehicleType + .select-card-options .vehicle-taxi .select-card-icon{color:#67e8f9;background:rgba(14,165,233,.24)}
#vehicleType + .select-card-options .vehicle-taxi:hover,#vehicleType + .select-card-options .vehicle-taxi.selected{border-color:#38bdf8;background:linear-gradient(145deg,rgba(14,165,233,.3),rgba(8,47,73,.52));box-shadow:0 0 0 1px rgba(56,189,248,.22)}
#vehicleType + .select-card-options .vehicle-van{background:linear-gradient(145deg,rgba(16,185,129,.18),rgba(6,78,59,.4));border-color:rgba(52,211,153,.35)}
#vehicleType + .select-card-options .vehicle-van .select-card-icon{color:#6ee7b7;background:rgba(16,185,129,.24)}
#vehicleType + .select-card-options .vehicle-van:hover,#vehicleType + .select-card-options .vehicle-van.selected{border-color:#34d399;background:linear-gradient(145deg,rgba(16,185,129,.3),rgba(6,78,59,.5));box-shadow:0 0 0 1px rgba(52,211,153,.2)}
#vehicleType + .select-card-options .vehicle-truck{background:linear-gradient(145deg,rgba(249,115,22,.18),rgba(124,45,18,.38));border-color:rgba(251,146,60,.38)}
#vehicleType + .select-card-options .vehicle-truck .select-card-icon{color:#fdba74;background:rgba(249,115,22,.24)}
#vehicleType + .select-card-options .vehicle-truck:hover,#vehicleType + .select-card-options .vehicle-truck.selected{border-color:#fb923c;background:linear-gradient(145deg,rgba(249,115,22,.3),rgba(124,45,18,.5));box-shadow:0 0 0 1px rgba(251,146,60,.2)}
#vehicleType + .select-card-options .vehicle-bus{background:linear-gradient(145deg,rgba(59,130,246,.18),rgba(30,58,138,.4));border-color:rgba(96,165,250,.36)}
#vehicleType + .select-card-options .vehicle-bus .select-card-icon{color:#93c5fd;background:rgba(59,130,246,.24)}
#vehicleType + .select-card-options .vehicle-bus:hover,#vehicleType + .select-card-options .vehicle-bus.selected{border-color:#60a5fa;background:linear-gradient(145deg,rgba(59,130,246,.3),rgba(30,58,138,.52));box-shadow:0 0 0 1px rgba(96,165,250,.2)}

@media(max-width:700px){
    /* Rider mobile: keep the compact premium card layout.
       Payment methods use 3 cards per row; vehicle types use 2. */
    
    
    #paymentMethodGroup .select-card-option{min-height:76px;padding:9px 7px}
    #vehicleType + .select-card-options .select-card-option{min-height:76px;padding:9px 7px}
}
@media(max-width:360px){
    
    #paymentMethodGroup .select-card-option{padding-left:5px;padding-right:5px}
    
}
.admin-toolbar .select-card-options{margin:0;min-width:180px}
.admin-toolbar .select-card-option{min-height:44px;padding:8px 10px;border-radius:10px}
.admin-toolbar .select-card-option .select-card-icon{width:28px;height:28px;flex-basis:28px;font-size:13px}
.admin-toolbar .select-card-option .select-card-title{font-size:11px}
.admin-toolbar .select-card-option .select-card-value{display:none}
@media(max-width:700px){.select-card-options{grid-template-columns:1fr}.select-card-option{min-height:62px}.admin-toolbar .select-card-options{grid-template-columns:1fr}
    /* Rider selector override: 2 vehicle cards / 3 payment cards per row */
    #paymentMethodGroup .select-card-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
    #vehicleType + .select-card-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(max-width:360px){
    #paymentMethodGroup .select-card-options{gap:5px}
    #vehicleType + .select-card-options{gap:6px}
}
.driver-card-selector{margin-bottom:18px}.driver-card-selector>label{display:block;margin-bottom:9px;font-size:12px;font-weight:700;color:#dbe4f2}.driver-option-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.driver-network-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.driver-choice-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:112px;padding:14px 9px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035);color:#dbe4f2;cursor:pointer;text-align:center;transition:all .2s ease;user-select:none}.driver-choice-card:hover{transform:translateY(-2px);border-color:rgba(20,184,166,.5);background:rgba(20,184,166,.07)}.driver-choice-card.selected{border-color:#14b8a6;background:rgba(20,184,166,.12);box-shadow:0 0 0 2px rgba(20,184,166,.12)}.driver-choice-card .choice-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:25px;color:#14b8a6}.driver-choice-card .choice-title{font-weight:800;font-size:12px}.driver-choice-card .choice-desc{font-size:11px;color:#8d98aa;line-height:1.25}.driver-choice-card .choice-check{position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#14b8a6;color:#06111a;font-size:11px;opacity:0;transform:scale(.7);transition:.18s}.driver-choice-card.selected .choice-check{opacity:1;transform:scale(1)}.driver-choice-card.network-mtn .choice-icon{color:#111;background:#ffca28}.driver-choice-card.network-airtel .choice-icon{color:#fff;background:#ef4444}.driver-choice-card.network-zamtel .choice-icon{color:#fff;background:#16a34a}.driver-choice-card .network-mark{font-size:11px;font-weight:900;letter-spacing:.02em}.driver-card-selector .driver-choice-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.driver-choice-help{font-size:11px;color:#8d98aa;margin-top:7px}.driver-choice-error{font-size:11px;color:#f87171;margin-top:7px;display:none}.driver-choice-error.show{display:block}@media(max-width:700px){.driver-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.driver-network-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.driver-choice-card{min-height:102px;padding:11px 6px}.driver-choice-card .choice-icon{width:42px;height:42px;font-size:21px}.driver-choice-card .choice-title{font-size:11px}.driver-choice-card .choice-desc{font-size:11px}}@media(max-width:420px){.driver-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.driver-network-grid{grid-template-columns:1fr;gap:8px}.driver-network-grid .driver-choice-card{min-height:76px;flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 13px}.driver-network-grid .choice-icon{width:42px;height:42px;flex:0 0 42px}.driver-network-grid .choice-check{right:10px;top:50%;transform:translateY(-50%) scale(.7)}.driver-network-grid .selected .choice-check{transform:translateY(-50%) scale(1)}}
.driver-step-progress{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 24px;padding:4px 0 8px}.driver-step-progress.hidden,.driver-registration-step{display:none}.driver-registration-step.active{display:block}.driver-step-item{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:58px;color:#7d8799;font-size:11px;font-weight:600}.driver-step-item span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-weight:800}.driver-step-item.active,.driver-step-item.completed{color:#14b8a6}.driver-step-item.active span,.driver-step-item.completed span{border-color:#14b8a6;background:rgba(20,184,166,.12);color:#14b8a6}.driver-step-line{height:1px;flex:1;max-width:70px;background:rgba(255,255,255,.12)}.driver-step-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}.driver-step-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(20,184,166,.12);color:#14b8a6;flex:0 0 auto}.driver-step-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#14b8a6}.driver-step-heading h3{font-size:20px;margin:2px 0 4px;color:#fff}.driver-step-heading p{font-size:12px;color:#8d98aa;line-height:1.45}.driver-step-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.driver-step-actions .primary-btn,.driver-step-actions .secondary-btn{margin:0;min-width:130px}.driver-step-actions .primary-btn{margin-left:auto}.driver-subscription-summary{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(20,184,166,.2);background:rgba(20,184,166,.06);border-radius:12px;color:#b9c5d5;font-size:12px;line-height:1.45;margin-bottom:18px}.driver-subscription-summary i{color:#14b8a6}.driver-registration-step[aria-hidden="true"]{display:none}.driver-registration-step input:invalid,.driver-registration-step select:invalid,.driver-registration-step textarea:invalid{border-color:rgba(239,68,68,.55)}.driver-step-item{transition:color .2s ease,transform .2s ease}.driver-step-item.active{transform:translateY(-1px)}.driver-step-item.completed span::after{content:"✓";font-size:13px}.driver-step-item.completed span{font-size:0}.driver-step-actions .secondary-btn.hidden,.driver-step-actions .primary-btn.hidden{display:none}@media(max-width:600px){.driver-step-progress{gap:3px}.driver-step-item{min-width:48px;font-size:11px}.driver-step-item span{width:30px;height:30px}.driver-step-line{max-width:30px}.driver-step-heading h3{font-size:18px}.driver-step-actions{position:sticky;bottom:0;background:#0a0e17;padding:12px 0 2px;z-index:3}}

.admin-pill.pending{background:rgba(245,158,11,.14);color:#f59e0b}.admin-pill.approved{background:rgba(34,197,94,.14);color:#22c55e}.admin-pill.rejected{background:rgba(239,68,68,.14);color:#ef4444}.admin-pill.successful{background:rgba(34,197,94,.14);color:#22c55e}.admin-pill.failed,.admin-pill.cancelled{background:rgba(239,68,68,.14);color:#ef4444}.admin-pill.expired{background:rgba(148,163,184,.14);color:#94a3b8}

/* ===== [02] unnamed ===== */
/* ============================================================
   UNIFIED DRIVER + RIDER NAVIGATION WINDOW
   ============================================================ */
.unified-nav-overlay{display:none;position:fixed;inset:0;z-index:300000;background:rgba(3,7,12,.86);backdrop-filter:blur(12px);display:none;padding:18px}
.unified-nav-overlay.show{display:flex !important;align-items:center;justify-content:center}
.unified-nav-window{width:min(1180px,100%);height:min(820px,calc(100vh - 36px));background:#080d14;border:1px solid rgba(212,175,55,.28);border-radius:24px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.6);display:flex;flex-direction:column;color:#fff}
.unified-nav-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(8,13,20,.98))}
.unified-nav-title{display:flex;align-items:center;gap:12px}.unified-nav-title-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#d4af37,#8d6b12);color:#090909}.unified-nav-title strong{display:block;font-size:15px}.unified-nav-title span{display:block;color:#8d99aa;font-size:11px;margin-top:2px}
.unified-nav-close{width:40px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}.unified-nav-close:hover{background:rgba(255,255,255,.09)}
.unified-nav-body{position:relative;flex:1;min-height:0}.unified-nav-map{position:absolute;inset:0;background:#111}.unified-nav-map .leaflet-container{width:100%;height:100%;font:inherit}
.unified-nav-card{position:absolute;z-index:1000;left:18px;top:18px;width:min(340px,calc(100% - 36px));background:rgba(8,13,20,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px 12px;box-shadow:0 12px 36px rgba(0,0,0,.32)}
.unified-nav-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.unified-nav-status strong{font-size:14px}.unified-nav-live{font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:4px 7px;border-radius:999px;background:rgba(32,232,137,.12);color:#20e889;border:1px solid rgba(32,232,137,.2)}
.unified-nav-next{border-radius:11px;background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(255,255,255,.035));padding:9px 10px;margin-bottom:8px}.unified-nav-next small{display:block;color:#8d99aa;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}.unified-nav-next strong{font-size:15px;line-height:1.2}.unified-nav-route{display:grid;gap:6px}.unified-nav-point{display:flex;gap:7px;align-items:flex-start}.unified-nav-point i{width:18px;text-align:center;margin-top:1px}.unified-nav-point small{display:block;color:#7f8b9b;font-size:11px}.unified-nav-point strong{display:block;font-size:11px;line-height:1.2}.unified-nav-point.pick i{color:#d4af37}.unified-nav-point.dest i{color:#ff5c6c}
.unified-nav-bottom{position:absolute;z-index:1000;left:18px;right:18px;bottom:18px;display:flex;gap:10px;align-items:flex-end;justify-content:space-between;pointer-events:none}.unified-nav-bottom>*{pointer-events:auto}.unified-nav-metrics{display:flex;gap:8px;background:rgba(8,13,20,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px}.unified-nav-metric{min-width:90px;text-align:center}.unified-nav-metric small{display:block;color:#7f8b9b;font-size:11px;text-transform:uppercase}.unified-nav-metric strong{display:block;font-size:14px;margin-top:2px}.unified-nav-actions{display:flex;gap:8px}.unified-nav-action{border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(8,13,20,.94);color:#fff;padding:12px 14px;cursor:pointer;font-weight:700}.unified-nav-action.primary{background:linear-gradient(135deg,#d4af37,#9f7916);color:#090909;border-color:#d4af37}.unified-nav-action:hover{transform:translateY(-1px)}
@media(max-width:700px){.unified-nav-overlay{padding:0}.unified-nav-window{width:100%;height:100%;border-radius:0;border:0} .unified-nav-head{height:58px}.unified-nav-card{left:8px;right:8px;top:8px;width:auto;padding:8px 10px;border-radius:14px}.unified-nav-status{margin-bottom:5px}.unified-nav-status strong{font-size:13px}.unified-nav-next{padding:7px 8px;margin-bottom:6px}.unified-nav-next small{font-size:10px;margin-bottom:2px}.unified-nav-next strong{font-size:13px}.unified-nav-route{gap:4px}.unified-nav-point{gap:6px}.unified-nav-point small{font-size:10px}.unified-nav-point strong{font-size:11px;line-height:1.15}.unified-nav-bottom{left:8px;right:8px;bottom:8px;display:grid;gap:6px}.unified-nav-metrics{justify-content:space-around;padding:7px}.unified-nav-actions{display:grid;grid-template-columns:1fr 1fr}.unified-nav-action{padding:9px 7px;font-size:11px}.unified-nav-metric{min-width:65px}.unified-nav-title-icon{width:34px;height:34px}}

/* =========================================================
   GLOBAL MOBILE RESPONSIVENESS ENHANCEMENT
   Driver + Rider dashboards
   ========================================================= */
@media (max-width: 900px) {
    .driver-dashboard,
    .dashboard {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .driver-workspace { gap: 12px; }
    .driver-side-panel { gap: 12px; }
    .driver-map-card,
    .ride-request-panel,
    .active-ride-panel,
    .driver-my-rides,
    .glass-card,
    .book-ride-card,
    .rider-premium-hero,
    .premium-panel,
    .rider-premium-card { min-width: 0; }

    .driver-map-wrapper,
    #rideMap { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    /* Prevent horizontal overflow from long addresses / buttons */
    html, body { max-width: 100%; overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }

    .dashboard,
    .driver-dashboard { padding-left: 10px !important; padding-right: 10px !important; }

    /* Rider header */
    .dashboard-header {
        gap: 12px;
        padding: 14px;
        margin-bottom: 12px;
    }
    .dashboard-header > div:last-child { width: 100%; }
    .dashboard-header .logout-btn { width: 100%; min-height: 44px; }
    .dashboard-header h2 { line-height: 1.25; word-break: break-word; }

    /* Rider statistics */
    .rider-stats { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .stat-card { min-width: 0; overflow: hidden; }
    .stat-content { min-width: 0; }
    .stat-content h3 { white-space: nowrap; }

    /* Rider premium area */
    .rider-premium-hero { padding: 18px !important; }
    .rider-premium-hero-content { flex-direction: column; align-items: stretch !important; gap: 14px; }
    .rider-premium-hero h3 { font-size: 19px !important; line-height: 1.3; }
    .premium-level { width: 100%; }
    .rider-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
    .rider-premium-card { min-height: 118px; padding: 14px !important; }
    .rider-premium-card small { line-height: 1.4; }
    .rider-insights { grid-template-columns: 1fr !important; gap: 10px; }

    /* Rider booking */
    .book-ride-card { padding: 15px !important; border-radius: 18px; }
    .book-ride-card h3 { font-size: 17px; }
    .map-container { width: 100%; }
    #rideMap { height: 300px !important; border-radius: 16px; }
    .map-controls { gap: 9px; }
    .map-controls .map-actions { width: 100%; flex-wrap: wrap; }
    .map-controls button { min-height: 42px; }

    /* Driver header / stats */
    .driver-topbar { gap: 8px; }
    .driver-welcome-card { width: 100%; }
    .driver-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .driver-stat-card { min-width: 0; overflow: hidden; }

    /* Driver map */
    .driver-map-card { border-radius: 18px; overflow: hidden; }
    .driver-map-header { padding: 14px; gap: 10px; flex-wrap: wrap; }
    .driver-map-header > div:first-child { min-width: 0; flex: 1 1 220px; }
    .driver-map-header h2 { font-size: 18px; }
    .map-status-pill { flex: 0 0 auto; }
    .driver-map-wrapper { height: 320px !important; }

    /* Driver side panels become a true vertical mobile flow */
    .driver-side-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-width: 0;
    }

    /* ACTIVE RIDE — mobile-first layout */
    #activeRidePanel {
        width: 100%;
        margin: 0;
        padding: 14px !important;
        border-radius: 18px;
        overflow: hidden;
    }
    .active-ride-header { align-items: flex-start; margin-bottom: 12px; }
    .active-ride-header h3 { font-size: 16px; line-height: 1.3; max-width: 75%; }
    .active-ride-badge { flex-shrink: 0; }
    .active-route { padding: 12px; border-radius: 14px; }
    .route-line { align-items: flex-start; }
    .route-line > div { min-width: 0; flex: 1; }
    .route-line strong {
        display: block;
        font-size: 12px;
        line-height: 1.4;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .route-connector { margin-left: 13px; min-height: 10px; }

    .active-rider {
        display: grid !important;
        grid-template-columns: 42px minmax(0,1fr) auto;
        align-items: center;
        gap: 9px;
        margin-top: 10px;
    }
    .rider-info { min-width: 0; }
    .rider-info strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rider-actions { display: flex; gap: 7px; }
    .rider-actions button { width: 40px; height: 40px; min-width: 40px; }

    .active-ride-fare {
        margin-top: 10px;
        padding: 11px 12px;
        border-radius: 13px;
    }
    .active-ride-fare strong { font-size: 19px; }

    .active-ride-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        margin-top: 10px;
    }
    .active-ride-actions button,
    .navigate-btn,
    .trip-primary-btn,
    .pickup-btn { min-height: 48px; width: 100%; }

    /* Available ride requests */
    .ride-request-panel { width: 100%; min-width: 0; border-radius: 18px; overflow: hidden; }
    .panel-heading { padding: 14px !important; gap: 8px; flex-wrap: wrap; }
    .panel-heading > div { min-width: 0; flex: 1 1 180px; }
    .panel-heading h2 { font-size: 17px; }
    .driver-history-btn { min-height: 40px; }
    .request-counter { flex: 0 0 auto; }
    .driver-rides-container { width: 100%; max-height: none !important; overflow: visible; padding: 0 10px 10px; }
    .driver-ride-request { width: 100%; min-width: 0; }
    .driver-ride-route { min-width: 0; }
    .driver-ride-route strong,
    .route-location strong { overflow-wrap: anywhere; word-break: break-word; }
    .driver-ride-details { flex-wrap: wrap; }
    .driver-ride-actions { grid-template-columns: 1fr 1fr !important; width: 100%; }
    .driver-ride-actions button { min-height: 46px; }

    /* Driver My Rides — compact accordion, closed by default */
    
    .driver-my-rides-toggle {
        width:100%; border:0; background:transparent; color:inherit;
        display:flex; align-items:center; justify-content:space-between; gap:12px;
         text-align:left; cursor:pointer;
    }
    .driver-my-rides-toggle-main { display:flex; align-items:center; gap:12px; min-width:0; }
    .driver-my-rides-toggle-main > span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .driver-my-rides-toggle-main strong { font-size:16px; color:#fff; }
    .driver-my-rides-toggle-icon {
          flex:0 0 40px; border-radius:12px;
        display:grid; place-items:center; background:rgba(255,255,255,.07); color:#facc15;
    }
    .driver-my-rides-chevron { color:#aebbd0; transition:transform .2s ease; }
    .driver-my-rides-open .driver-my-rides-chevron { transform:rotate(180deg); }
    .driver-my-rides-content { padding:2px 4px 6px; }
    .driver-my-rides-actions { display:flex; justify-content:flex-end; margin:0 0 10px; }
    .driver-my-rides-collapsed { min-height:0; }
    .driver-my-rides-toggle:focus-visible { outline:2px solid #facc15; outline-offset:2px; border-radius:12px; }

    /* Rider My Rides — same compact accordion behavior as Driver My Rides */
    /* Strong desktop overrides keep the accordion header from inheriting any
       native/button styles elsewhere in the rider dashboard. */
    #riderDashboard .rider-my-rides {
        width:100%; box-sizing:border-box; overflow:hidden;
    }
    #riderDashboard .rider-my-rides-toggle,
    #riderDashboard .rider-my-rides-toggle[type="button"] {
        appearance:none !important; -webkit-appearance:none !important;
        box-sizing:border-box !important;
        width:100% !important; min-width:0 !important; min-height:64px !important;
        margin:0 !important;
        border:0 !important;
        border-radius:14px !important;
        outline:0;
        background:transparent !important;
        color:#f7f9fc !important;
        font:inherit !important;
        line-height:1.2 !important;
        display:flex !important; align-items:center !important;
        justify-content:space-between !important; gap:16px !important;
        padding:10px 12px !important;
        text-align:left !important; text-decoration:none !important;
        cursor:pointer !important;
    }
    #riderDashboard .rider-my-rides-toggle:hover {
        background:rgba(255,255,255,.035) !important;
    }
    #riderDashboard .rider-my-rides-toggle-main {
        display:flex !important; align-items:center !important;
        gap:13px !important; min-width:0 !important; flex:1 1 auto !important;
    }
    #riderDashboard .rider-my-rides-toggle-main > span:last-child {
        display:flex !important; flex-direction:column !important;
        align-items:flex-start !important; justify-content:center !important;
        gap:3px !important; min-width:0 !important;
    }
    #riderDashboard .rider-my-rides-toggle-main .section-label {
        display:block !important; margin:0 !important;
        font-size:11px !important; line-height:1 !important;
        letter-spacing:.13em !important;
    }
    #riderDashboard .rider-my-rides-toggle-main strong {
        display:block !important; margin:0 !important;
        font-size:16px !important; line-height:1.15 !important;
        font-weight:800 !important; color:#fff !important;
        white-space:nowrap !important;
    }
    #riderDashboard .rider-my-rides-toggle-icon {
        width:42px !important; height:42px !important; flex:0 0 42px !important;
        display:grid !important; place-items:center !important;
        border-radius:13px !important;
        background:linear-gradient(145deg,rgba(24,198,216,.14),rgba(24,198,216,.05)) !important;
        border:1px solid rgba(24,198,216,.16) !important;
        color:#59e8f2 !important;
        box-sizing:border-box !important;
    }
    #riderDashboard .rider-my-rides-toggle-icon i {
        display:block !important; font-size:15px !important; line-height:1 !important;
        color:inherit !important;
    }
    #riderDashboard .rider-my-rides-chevron {
        display:grid !important; place-items:center !important;
        width:36px !important; height:36px !important; flex:0 0 36px !important;
        border-radius:11px !important;
        background:rgba(255,255,255,.045) !important;
        color:#aebbd0 !important; font-size:13px !important;
        transition:transform .2s ease,background .2s ease !important;
    }
    #riderDashboard .rider-my-rides-open .rider-my-rides-chevron {
        transform:rotate(180deg) !important;
        background:rgba(24,198,216,.08) !important;
        color:#59e8f2 !important;
    }
    #riderDashboard .rider-my-rides-content {
        box-sizing:border-box !important; padding:2px 4px 8px !important;
    }

    .rider-my-rides {  border-radius: 18px; }
    .rider-my-rides-toggle {
        width:100%; border:0; background:transparent; color:inherit;
        display:flex; align-items:center; justify-content:space-between; gap:12px;
         text-align:left; cursor:pointer;
    }
    .rider-my-rides-toggle-main { display:flex; align-items:center; gap:12px; min-width:0; }
    .rider-my-rides-toggle-main > span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .rider-my-rides-toggle-main strong { font-size:16px; color:#fff; }
    .rider-my-rides-toggle-icon {
          flex:0 0 40px; border-radius:12px;
        display:grid; place-items:center; background:rgba(255,255,255,.07); color:#00d4ff;
    }
    .rider-my-rides-chevron { color:#aebbd0; transition:transform .2s ease; }
    .rider-my-rides-open .rider-my-rides-chevron { transform:rotate(180deg); }
    .rider-my-rides-content { padding:2px 4px 6px; }
    .rider-my-rides-actions { display:flex; justify-content:flex-end; margin:0 0 10px; }
    .rider-my-rides-collapsed { min-height:0; }
    .rider-my-rides-toggle:focus-visible { outline:2px solid #00d4ff; outline-offset:2px; border-radius:12px; }
    .rider-my-rides .ride-filters { margin-bottom:16px; }

    /* Driver My Rides */
    .driver-my-rides { padding: 14px !important; border-radius: 18px; }
    .driver-my-rides-toggle { padding: 11px 8px; }
    .driver-my-rides-toggle-icon { width:38px; height:38px; flex-basis:38px; }
    .driver-my-rides-content { padding-left:0; padding-right:0; }
    .driver-my-rides-head > div:first-child { min-width: 0; flex: 1 1 180px; }
    .driver-my-rides-actions { width: 100%; }
    .driver-trip-filters { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px !important; }
    .driver-trip-filter { width: 100%; min-height: 40px; }
    .driver-my-rides-list { min-width: 0; }
    .driver-my-ride-card { padding: 13px !important; }

    .rider-my-rides { padding: 14px !important; }
    .rider-my-rides-toggle { padding: 11px 8px; }
    .rider-my-rides-toggle-icon { width:38px; height:38px; flex-basis:38px; }
    .rider-my-rides-content { padding-left:0; padding-right:0; }
    .rider-my-rides-actions { width:100%; }

    /* Driver performance / quick actions */
    .performance-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .performance-item { min-width: 0; padding: 13px !important; }
    .performance-item strong { font-size: 13px; }
    .driver-quick-actions { grid-template-columns: 1fr !important; }
    .driver-quick-actions button { min-height: 68px; }

    /* Navigation / modal surfaces */
    .unified-nav-overlay { padding: 0 !important; }
    .unified-nav-window { width: 100% !important; height: 100dvh !important; max-height: 100dvh; border-radius: 0 !important; }
    .driver-ride-detail-modal { padding: 7px !important; }
    .driver-ride-detail-dialog { width: 100% !important; max-height: 96dvh !important; border-radius: 18px !important; }
}

@media (max-width: 600px) {
    .driver-dashboard { padding-bottom: 92px !important; }
    .dashboard { padding-bottom: 92px !important; }

    /* Make the active ride feel like the primary mobile control, not a desktop sidebar */
    #activeRidePanel { box-shadow: 0 10px 35px rgba(0,0,0,.25); }
    .active-ride-actions { grid-template-columns: 1fr !important; }
    .active-ride-actions .navigate-btn { order: 2; }
    .active-ride-actions .trip-primary-btn { order: 1; }

    .driver-ride-actions { grid-template-columns: 1fr !important; }
    .driver-ride-actions button { width: 100%; }

    .driver-map-wrapper { height: 290px !important; }
    .map-floating-controls { right: 8px; top: 8px; }
    .map-floating-controls button { width: 40px; height: 40px; }
    .map-bottom-status { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; }
    .map-bottom-status strong { font-size: 11px; }

    #rideMap { height: 275px !important; }
    .nearby-drivers-bar { flex-direction: column; align-items: stretch !important; }
    .nearby-drivers-info { width: 100% !important; }
    .nearby-drivers-bar .map-actions { width: 100% !important; justify-content: stretch; }
    .nearby-drivers-bar .map-actions button { flex: 1; }

    .rider-quick-grid { grid-template-columns: 1fr 1fr !important; }
    .rider-premium-card { min-height: 108px; }
    .rider-premium-card strong { font-size: 11px; }

    .ride-main-row { min-width: 0; }
    .ride-route-block { min-width: 0; }
    .ride-route-block .route { overflow-wrap: anywhere; word-break: break-word; }

    /* Inputs and controls should never overflow the viewport */
    input, select, textarea, .primary-btn, .secondary-btn { max-width: 100%; }
    .row-2col { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
    .dashboard,
    .driver-dashboard { padding-left: 7px !important; padding-right: 7px !important; }
    .rider-stats,
    .driver-stats-grid { gap: 7px !important; }
    .stat-card,
    .driver-stat-card { padding: 11px !important; border-radius: 14px; }
    .stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .driver-stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .stat-content h3 { font-size: 17px !important; }
    .driver-stat-content strong { font-size: 16px !important; }

    .rider-quick-grid { grid-template-columns: 1fr !important; }
    .rider-premium-card { min-height: auto; }
    .rider-premium-card small { display: block; }

    .active-rider { grid-template-columns: 38px minmax(0,1fr); }
    .rider-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .rider-actions button { width: 44px; height: 44px; }

    .active-ride-header h3 { font-size: 15px; }
    .active-ride-fare { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .active-ride-fare strong { font-size: 18px; }

    .driver-trip-filters { grid-template-columns: 1fr 1fr !important; }
    .driver-map-wrapper { height: 265px !important; }
    #rideMap { height: 250px !important; }
}

/* ===== [03] registration-network-branding-fix ===== */
.driver-registration-network-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
.driver-registration-network-cards .driver-renew-network-card{min-height:70px;}
@media(max-width:520px){.driver-registration-network-cards{grid-template-columns:1fr;}.driver-registration-network-cards .driver-renew-network-card{min-height:62px;}}

/* ===== [04] rideswift-dashboard-visual-refresh ===== */
/* =========================================================
   RIDESWIFT MOBILE APP DASHBOARD REFRESH
   Premium dark / gold / teal mobile-first presentation.
   Existing controls, IDs and JS hooks are intentionally preserved.
   ========================================================= */
/* Color variables consolidated into the single :root block at the top of this file. */

/* App shell */
.dashboard,
.driver-dashboard{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:18px 16px 105px !important;
}

/* Rider header */
#riderDashboard .dashboard-header{
  min-height:74px;
  
  margin-bottom:16px !important;
  
  
  
  
}

#riderDashboard .dashboard-header p{margin-top:3px;}
#riderDashboard .role-badge{margin-top:7px;font-size:11px;}
#riderDashboard .rider-desktop-notification{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
}

/* Rider premium hero becomes the app's welcome banner */
#riderDashboard .rider-premium-hero{
  min-height:150px;
  padding:22px !important;
  margin-bottom:14px !important;
  
  
  
  
}
#riderDashboard .premium-eyebrow{font-size:11px !important;color:var(--rs-teal) !important;background:rgba(22,198,200,.08) !important}
#riderDashboard .rider-premium-hero h3{font-size:23px !important;max-width:620px;letter-spacing:-.03em}
#riderDashboard .rider-premium-hero p{font-size:11px !important;max-width:540px}
#riderDashboard .premium-level{border-color:rgba(212,175,55,.18) !important;background:rgba(212,175,55,.06) !important}

/* Quick cards: compact app shortcuts */
#riderDashboard .rider-quick-grid{margin-bottom:14px !important;}
#riderDashboard .rider-premium-card{
  min-height:92px;
  padding:14px !important;
  
  
}
#riderDashboard .rider-premium-card .premium-card-icon{
  width:34px;height:34px;border-radius:10px;margin-bottom:9px !important;
}
#riderDashboard .rider-premium-card strong{font-size:11px !important}
#riderDashboard .rider-premium-card small{font-size:11px !important}

/* Rider insight cards */
#riderDashboard .rider-insights{margin-bottom:14px !important;}


/* Rider booking becomes a prominent map-first card */
#riderDashboard #bookRideSection{
  padding:0 !important;
  overflow:hidden;
  border-radius:22px !important;
  background:linear-gradient(145deg,#0d151d,#080d13) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 22px 65px rgba(0,0,0,.30) !important;
}
#riderDashboard #bookRideSection > h3{
  margin:0 !important;
  padding:17px 18px 13px !important;
  font-size:16px !important;
}
#riderDashboard #bookRideSection .map-container{
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;border-right:0 !important;
  border-color:rgba(255,255,255,.06) !important;
}

#riderDashboard #bookRideForm{padding:16px 18px 18px}
#riderDashboard #bookRideBtn{min-height:48px;border-radius:14px !important;font-size:13px !important}

/* Driver top bar */
#driverDashboard .driver-topbar{
  position:sticky !important;
  top:10px;
  z-index:30;
  min-height:64px;
  
  padding:9px 11px 9px 14px !important;
  border-radius:19px !important;
  background:rgba(7,12,18,.90) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(18px);
}
#driverDashboard .driver-brand strong{letter-spacing:-.03em;}
#driverDashboard .driver-brand span{font-size:11px !important;}
#driverDashboard .driver-brand-icon{width:39px !important;height:39px !important;border-radius:12px !important;}
#driverDashboard .driver-icon-btn,
#driverDashboard .driver-avatar-btn{
  width:39px !important;height:39px !important;border-radius:12px !important;
}

/* Driver welcome = hero header */


#driverDashboard .driver-welcome-text h1{letter-spacing:-.03em;}
#driverDashboard .driver-welcome-text p{font-size:11px !important;color:#8f9aaa !important}
#driverDashboard .driver-online-switch{
  min-height:54px !important;
}

/* Account gate compact */
#driverDashboard .driver-account-gate-card{
  padding:13px 14px !important;
  
}
#driverDashboard .driver-account-gate-icon{width:40px;height:40px;border-radius:12px}
#driverDashboard .driver-account-gate-copy h3{font-size:14px !important}
#driverDashboard .driver-account-gate-copy p{font-size:11px !important}
#driverDashboard .driver-gate-pill{font-size:10px !important;padding:4px 7px}
#driverDashboard .driver-gate-btn{min-height:38px;border-radius:10px}

/* Driver main map: make it the visual centre */

#driverDashboard .driver-map-card,
#driverDashboard .ride-request-panel,
#driverDashboard .active-ride-panel{
  border-radius:21px !important;
  background:linear-gradient(145deg,#0e161f,#080d13) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:0 22px 65px rgba(0,0,0,.28) !important;
}


#driverDashboard .driver-map-header p{font-size:11px !important}

#driverDashboard #driverMap{height:100% !important}
#driverDashboard .map-bottom-status{height:36px !important}
#driverDashboard .driver-side-panel{display:flex;flex-direction:column;gap:12px}

/* Requests */


#driverDashboard .ride-request-panel .panel-heading h2{font-size:17px !important}


/* Driver trips + performance */
#driverDashboard .driver-my-rides,
#driverDashboard .driver-performance,
#driverDashboard .driver-quick-actions,
#driverDashboard .driver-stats-section{
  margin-top:12px !important;
  border-radius:21px !important;
  background:linear-gradient(145deg,#0e161f,#080d13) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.24) !important;
}
#driverDashboard .driver-my-rides-head,
#driverDashboard .performance-header,
#driverDashboard .dashboard-stats-heading{padding:15px 16px !important}
#driverDashboard .driver-my-rides-head h2,
#driverDashboard .performance-header h2,
#driverDashboard .dashboard-stats-heading h2{font-size:17px !important}



/* Earnings gets the large screenshot-style emphasis */


#driverDashboard .performance-item{
  min-height:68px !important;
}


/* Admin dashboard */
#adminDashboard .dashboard-header{
  
  
  padding:18px !important;
  margin-bottom:14px !important;
}
#adminDashboard .admin-stats-grid{gap:10px !important}
#adminDashboard .stat-card{
  min-height:92px !important;border-radius:17px !important;
  background:linear-gradient(145deg,#111a23,#0a1016) !important;
}
#adminDashboard .book-ride-card,
#adminDashboard .ride-history{
  border-radius:21px !important;
  background:linear-gradient(145deg,#0e161f,#080d13) !important;
  border:1px solid rgba(255,255,255,.075) !important;
}
#adminDashboard .admin-actions{gap:10px !important}
#adminDashboard .admin-action-card{
  min-height:100px !important;border-radius:16px !important;
  background:linear-gradient(145deg,#121b24,#0c141d) !important;
}

/* Bottom navigation: app-style floating bar */
.bottom-nav{
  left:50% !important;
  transform:translateX(-50%);
  width:min(720px,calc(100% - 18px)) !important;
  bottom:9px !important;
  min-height:66px !important;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:21px !important;
  background:rgba(7,11,16,.93) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.48) !important;
}
.bottom-nav button{
  min-height:51px !important;border-radius:15px !important;position:relative;
  transition:.2s ease !important;
}
.bottom-nav button.active{
  background:linear-gradient(145deg,rgba(212,175,55,.15),rgba(22,198,200,.06)) !important;
  color:#f3df9b !important;
}
.bottom-nav button.active i{color:var(--rs-gold) !important}
.bottom-nav button i{font-size:17px !important}
.bottom-nav button span:not(.badge){font-size:11px !important;font-weight:700}
.bottom-nav .badge{top:4px !important;right:calc(50% - 23px) !important}

/* Desktop keeps the app centred; mobile becomes edge-to-edge */
@media(max-width:900px){
  .dashboard,.driver-dashboard{max-width:760px}
  #driverDashboard .driver-workspace{grid-template-columns:1fr !important}
  #driverDashboard .driver-side-panel{grid-template-columns:1fr;}
  
}
@media(max-width:600px){
  .dashboard,.driver-dashboard{padding:10px 9px 100px !important}
  #riderDashboard .dashboard-header{margin-top:2px !important}
  
  
  #riderDashboard .rider-quick-grid{grid-template-columns:repeat(2,1fr) !important}
  
  #driverDashboard .driver-topbar{top:4px;margin-bottom:8px}
  #driverDashboard .driver-welcome-card{display:flex;gap:14px;}
  #driverDashboard .driver-welcome-content{width:100%}
  
  #driverDashboard .driver-workspace{gap:10px !important}
  
  #driverDashboard .driver-rides-container{max-height:none}
  #driverDashboard .performance-grid{grid-template-columns:1fr 1fr !important}
  
  #driverDashboard .driver-quick-actions button{min-height:82px !important;padding:10px 6px !important}
  
  .bottom-nav{width:calc(100% - 14px) !important;bottom:7px !important;border-radius:19px !important}
}
@media(max-width:420px){
  #riderDashboard .rider-quick-grid{grid-template-columns:1fr 1fr !important}
  #riderDashboard .rider-premium-card{min-height:86px !important}
  
  #driverDashboard .driver-brand span{display:none}
  #driverDashboard .driver-brand strong{font-size:16px !important}
  
  
  
  #driverDashboard .performance-grid{grid-template-columns:1fr !important}
  #driverDashboard .driver-quick-actions{grid-template-columns:1fr 1fr !important}
  #adminDashboard .admin-stats-grid{grid-template-columns:1fr 1fr !important}
  .bottom-nav button{min-height:48px !important}
  .bottom-nav button i{font-size:16px !important}
  .bottom-nav button span:not(.badge){font-size:10px !important}
}

/* ===== [05] unnamed ===== */
/* =========================================================
   RIDESWIFT APP-SHELL REDESIGN v2
   Strong visual overhaul inspired by modern ride-hailing apps.
   Existing IDs/actions/API hooks are preserved.
   ========================================================= */
/* Color variables consolidated into the single :root block at the top of this file. */

.dashboard,.driver-dashboard{color:var(--rs-white)!important}
.dashboard-header,.driver-topbar{background:transparent!important;border:0!important;box-shadow:none!important}
.section-label{letter-spacing:.11em!important;color:#8f9dad!important;font-weight:800!important}
#driverDashboard{max-width:1320px!important;padding:14px 18px 110px!important}
#driverDashboard .driver-topbar{height:58px;margin-bottom:8px!important}
#driverDashboard .driver-brand-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--rs-gold2),var(--rs-gold))!important;color:#071018!important;box-shadow:0 8px 28px rgba(215,180,58,.18)!important}
#driverDashboard .driver-brand strong{font-size:18px!important}
#driverDashboard .driver-brand span{color:#5bcbd4!important}
#driverDashboard .driver-welcome-card{margin-bottom:12px!important;padding:15px 17px!important;border-radius:20px!important;background:linear-gradient(135deg,#0e1823,#091018)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 15px 45px rgba(0,0,0,.22)!important}
#driverDashboard .driver-avatar-large{width:48px!important;height:48px!important;border-radius:15px!important;background:linear-gradient(135deg,#162839,#0e1721)!important;border:1px solid rgba(24,198,216,.22)!important}
#driverDashboard .driver-eyebrow{color:#5bd0d8!important}
#driverDashboard .driver-welcome-text h1{font-size:21px!important}
#driverDashboard .driver-online-switch{border-radius:999px!important;background:rgba(24,198,216,.10)!important;border:1px solid rgba(24,198,216,.25)!important;min-width:145px!important}
#driverDashboard .driver-account-gate-card{margin:10px 0!important;border-radius:18px!important;background:linear-gradient(135deg,#0d1721,#0a1119)!important;border:1px solid rgba(215,180,58,.18)!important}
#driverDashboard .driver-workspace{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr)!important;gap:14px!important;align-items:stretch!important}
#driverDashboard .driver-map-card{min-height:480px!important;border-radius:22px!important;overflow:hidden!important;background:#0a1118!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 55px rgba(0,0,0,.26)!important}
#driverDashboard .driver-map-header{padding:14px 16px!important;background:linear-gradient(180deg,#0d1721,#0a1118)!important}
#driverDashboard .driver-map-header h2{font-size:18px!important}
#driverDashboard .driver-map-wrapper{height:405px!important}
#driverDashboard .ride-request-panel{border-radius:22px!important;background:linear-gradient(180deg,#0e1822,#091017)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 55px rgba(0,0,0,.22)!important;overflow:hidden!important}
#driverDashboard .ride-request-panel .panel-heading{padding:16px!important}
#driverDashboard .driver-rides-container{padding:10px!important}
#driverDashboard .request-counter{background:var(--rs-gold)!important;color:#12100a!important}
#driverDashboard .go-online-btn{background:linear-gradient(135deg,var(--rs-gold2),var(--rs-gold))!important;color:#111!important;border:0!important}
#driverDashboard .active-ride-panel{border-radius:20px!important;background:linear-gradient(145deg,#101d29,#0a121a)!important;border:1px solid rgba(24,198,216,.2)!important;box-shadow:0 20px 60px rgba(0,0,0,.3)!important}
#driverDashboard .driver-stats-section{margin-top:14px!important;border-radius:22px!important;background:linear-gradient(145deg,#0b141e,#070c12)!important;border:1px solid rgba(255,255,255,.07)!important;padding:0!important;overflow:hidden}
#driverDashboard .driver-stats-grid{display:grid!important;grid-template-columns:1.35fr repeat(3,1fr)!important;gap:10px!important;padding:0 12px 12px!important}
#driverDashboard .driver-stat-card{min-height:108px!important;border-radius:17px!important;background:linear-gradient(145deg,#111c27,#0a1118)!important;border:1px solid rgba(255,255,255,.06)!important}
#driverDashboard .driver-stat-card.earnings-card{background:linear-gradient(145deg,rgba(215,180,58,.20),rgba(15,23,32,.96))!important;border-color:rgba(215,180,58,.25)!important}
#driverDashboard #driverTodayEarnings{font-size:29px!important;color:var(--rs-gold2)!important}
#driverDashboard .driver-performance{border-radius:22px!important;background:linear-gradient(145deg,#0d1721,#080e14)!important;border:1px solid rgba(255,255,255,.07)!important;overflow:hidden!important}
#driverDashboard .performance-grid{grid-template-columns:repeat(4,1fr)!important;padding:0 12px 12px!important;gap:9px!important}
#driverDashboard .performance-item{border-radius:15px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.05)!important}
#driverDashboard .driver-quick-actions{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
#driverDashboard .driver-quick-actions button{border-radius:17px!important;background:linear-gradient(145deg,#101b25,#0a1118)!important;border:1px solid rgba(255,255,255,.07)!important}
#riderDashboard{max-width:1200px!important;padding:14px 18px 110px!important}


#riderDashboard .rider-premium-hero{border-radius:20px!important;background:linear-gradient(135deg,#0d1a24,#081017)!important;border:1px solid rgba(24,198,216,.16)!important;box-shadow:0 15px 45px rgba(0,0,0,.2)!important}
#riderDashboard .rider-quick-grid{gap:10px!important}
#riderDashboard .rider-premium-card{border-radius:17px!important;background:linear-gradient(145deg,#111c27,#0a1118)!important;border:1px solid rgba(255,255,255,.07)!important}
#riderDashboard .rider-insights{gap:12px!important}
#riderDashboard .premium-panel{border-radius:20px!important;background:linear-gradient(145deg,#0e1822,#080f15)!important;border:1px solid rgba(255,255,255,.07)!important}
#riderDashboard .book-ride-card{background:linear-gradient(145deg,#0d1721,#080e14)!important;border:1px solid rgba(255,255,255,.08)!important;overflow:hidden!important;}
#riderDashboard .book-ride-card>h3{padding:15px 17px!important;margin:0!important;font-size:17px!important;background:linear-gradient(180deg,#101c27,#0b141d)!important}
#riderDashboard .map-container{margin:0!important;}

#riderDashboard .map-controls{padding-top:45px!important;}
#riderDashboard .nearby-drivers-bar{border-radius:16px!important;}n/* PREMIUM TOP MAP / LOCATION SECTION */
#riderDashboard .map-controls{
    background:linear-gradient(135deg,rgba(8,18,28,.98),rgba(13,24,34,.96),rgba(19,15,25,.96))!important;
    border-top:1px solid rgba(215,180,58,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 -8px 30px rgba(0,0,0,.16)!important;
}
#riderDashboard .map-controls .location-info{
    padding:9px 12px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,rgba(24,198,216,.08),rgba(215,180,58,.055))!important;
    border:1px solid rgba(24,198,216,.12)!important;
}
#riderDashboard .map-controls .location-info strong{
    color:#f5d76e!important;
    text-shadow:0 0 14px rgba(215,180,58,.18)!important;
}
#riderDashboard .map-controls .location-info span,
#riderDashboard .map-controls .location-info small{
    color:rgba(255,255,255,.58)!important;
}
#riderDashboard .nearby-drivers-bar{
    background:linear-gradient(135deg,rgba(14,31,40,.96),rgba(21,20,31,.96))!important;
    border:1px solid rgba(24,198,216,.20)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#riderDashboard .nearby-drivers-info strong{color:#5ee7f2!important}
#riderDashboard .nearby-drivers-info small{color:rgba(255,255,255,.64)!important}
#riderDashboard .nearby-drivers-dot{
    background:#35e0b1!important;
    box-shadow:0 0 14px rgba(53,224,177,.75)!important;
}
#riderDashboard .nearby-drivers-bar .map-btn{
    border-radius:10px!important;
    min-height:36px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
    border-color:rgba(255,255,255,.10)!important;
}
#riderDashboard .nearby-drivers-bar .map-btn:first-child{
    background:linear-gradient(135deg,rgba(24,198,216,.18),rgba(13,102,116,.20))!important;
    border-color:rgba(24,198,216,.38)!important;
    color:#57e5f0!important;
}
#riderDashboard .nearby-drivers-bar .map-btn:last-child{
    color:#f0c95c!important;
    border-color:rgba(215,180,58,.22)!important;
}
#riderDashboard .nearby-drivers-bar .map-btn:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.2)!important;
}
#riderDashboard .map-controls > .map-actions:last-child .map-btn{
    border-radius:10px!important;
    font-weight:700!important;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
}
#riderDashboard #mapPickupMode{
    background:linear-gradient(135deg,rgba(24,198,216,.20),rgba(13,102,116,.18))!important;
    border-color:rgba(24,198,216,.42)!important;
    color:#59e8f2!important;
}
#riderDashboard #mapDestMode{
    color:#f08bff!important;
    border-color:rgba(213,112,255,.25)!important;
    background:linear-gradient(135deg,rgba(213,112,255,.10),rgba(91,36,110,.14))!important;
}
#riderDashboard #mapDestMode.active{
    background:linear-gradient(135deg,rgba(213,112,255,.22),rgba(91,36,110,.24))!important;
    border-color:rgba(213,112,255,.48)!important;
    color:#e6a8ff!important;
}
#riderDashboard .map-controls > .map-actions:last-child .map-btn:nth-child(3){
    color:#70e7a5!important;
    border-color:rgba(61,214,135,.25)!important;
    background:linear-gradient(135deg,rgba(61,214,135,.10),rgba(20,89,57,.13))!important;
}
#riderDashboard .map-controls > .map-actions:last-child .map-btn:nth-child(4){
    color:#f4d27a!important;
    border-color:rgba(215,180,58,.25)!important;
    background:linear-gradient(135deg,rgba(215,180,58,.10),rgba(93,70,18,.13))!important;
}
#riderDashboard .map-controls .map-btn i{filter:drop-shadow(0 0 5px currentColor)!important}

#riderDashboard .primary-btn{background:linear-gradient(135deg,var(--rs-gold2),var(--rs-gold))!important;color:#101010!important;border:0!important;box-shadow:0 10px 25px rgba(215,180,58,.18)!important}
#riderDashboard .ride-history{border-radius:21px!important;background:linear-gradient(145deg,#0e1822,#080e14)!important;border:1px solid rgba(255,255,255,.07)!important}
#riderDashboard .ride-history{order:10!important}
@media(min-width:901px){
  #riderDashboard .rider-my-rides{
    margin-top:14px !important; margin-bottom:14px !important;
    padding:10px !important; border-radius:21px !important;
  }
  #riderDashboard .rider-my-rides-toggle{min-height:72px !important;padding:12px 14px !important}
  #riderDashboard .rider-my-rides-toggle-main{gap:14px !important}
  #riderDashboard .rider-my-rides-toggle-icon{width:46px !important;height:46px !important;flex-basis:46px !important;border-radius:14px !important}
  #riderDashboard .rider-my-rides-toggle-main strong{font-size:17px !important}
  #riderDashboard .rider-my-rides-chevron{width:38px !important;height:38px !important;flex-basis:38px !important}
}
#riderDashboard .rider-stats-section{display:block!important;position:relative!important;order:20!important;clear:both!important;border-radius:21px!important;background:linear-gradient(145deg,#0c151e,#070d13)!important;border:1px solid rgba(255,255,255,.07)!important;overflow:hidden!important;margin:24px 0 12px!important}
#riderDashboard .rider-stats-section .dashboard-stats-heading{position:relative!important}

#riderDashboard .rider-stats{display:grid!important;grid-template-columns:repeat(4,1fr)!important;padding:0 12px 12px!important;}
#riderDashboard .rider-stats .stat-card{min-height:96px!important;border-radius:16px!important;background:linear-gradient(145deg,#111c27,#0a1118)!important;border:1px solid rgba(255,255,255,.06)!important}
#adminDashboard{max-width:1200px!important;padding:14px 18px 110px!important}
#adminDashboard .dashboard-header{border-radius:21px!important;background:linear-gradient(135deg,#0e1924,#080f15)!important;border:1px solid rgba(255,255,255,.08)!important}
#adminDashboard .stat-card,#adminDashboard .book-ride-card,#adminDashboard .ride-history{border-radius:20px!important;background:linear-gradient(145deg,#0e1822,#080e14)!important;border:1px solid rgba(255,255,255,.07)!important}
@media(max-width:900px){
 #driverDashboard,#riderDashboard,#adminDashboard{max-width:760px!important;padding:8px 9px 104px!important}
 #driverDashboard .driver-workspace{display:flex!important;flex-direction:column!important;gap:10px!important}
 #driverDashboard .driver-map-card{order:1;min-height:0!important}
 #driverDashboard .driver-map-wrapper{height:300px!important}
 #driverDashboard .driver-side-panel{display:contents!important}
 #driverDashboard .ride-request-panel{order:2}
 #driverDashboard .active-ride-panel{order:0}
 #driverDashboard .driver-account-gate-card{padding:11px!important}
 #driverDashboard .driver-account-gate-copy p{font-size:11px!important}
 #driverDashboard .driver-account-gate-actions{gap:6px!important}
 #driverDashboard .driver-account-gate-actions .driver-gate-btn{padding:9px 10px!important;font-size:11px!important}
 #driverDashboard .driver-my-rides{margin-top:10px!important}
 #driverDashboard .driver-stats-grid{grid-template-columns:repeat(2,1fr)!important}
 #driverDashboard .driver-stat-card.earnings-card{grid-column:1/-1;min-height:105px!important}
 #driverDashboard .performance-grid{grid-template-columns:repeat(2,1fr)!important}
 #driverDashboard .driver-quick-actions{grid-template-columns:repeat(3,1fr)!important}
 #riderDashboard .rider-quick-grid{grid-template-columns:repeat(2,1fr)!important}
 #riderDashboard #rideMap{height:300px!important}
 #riderDashboard .rider-stats{grid-template-columns:repeat(2,1fr)!important}
 #riderDashboard .rider-stats-section{margin-top:18px!important}
}
@media(max-width:600px){
 #driverDashboard .driver-topbar{padding:2px 2px!important}
 #driverDashboard .driver-welcome-card{flex-direction:row!important;align-items:center!important;padding:11px 12px!important}
 #driverDashboard .driver-avatar-large{width:42px!important;height:42px!important}
 #driverDashboard .driver-welcome-text h1{font-size:16px!important}
 #driverDashboard .driver-welcome-text p{font-size:11px!important;margin-top:2px!important}
 #driverDashboard .driver-online-switch{min-width:108px!important;width:auto!important;padding:8px 10px!important}
 #driverDashboard .driver-online-switch .status-copy small{display:none!important}
 #driverDashboard .driver-online-switch .status-copy strong{font-size:11px!important}
 #driverDashboard .driver-account-gate-card{display:grid!important;grid-template-columns:36px 1fr!important}
 #driverDashboard .driver-account-gate-actions{grid-column:1/-1!important;margin-top:7px!important}
 #driverDashboard .driver-map-header{padding:12px!important}
 #driverDashboard .driver-map-header h2{font-size:16px!important}
 #driverDashboard .driver-map-wrapper{height:270px!important}
 #driverDashboard .driver-stats-grid{gap:8px!important;padding:0 9px 9px!important}
 #driverDashboard .driver-stat-card{min-height:88px!important}
 #driverDashboard .driver-quick-actions{grid-template-columns:repeat(3,1fr)!important}
 #driverDashboard .driver-quick-actions button small{display:none!important}
 #riderDashboard .rider-premium-hero{display:none!important}
 #riderDashboard .rider-quick-grid{display:none!important}
 #riderDashboard .dashboard-header{margin-bottom:7px!important}
 
 
 #riderDashboard .stat-card{min-height:84px!important}
 #riderDashboard .stat-content h3{font-size:18px!important}
 #adminDashboard .admin-stats-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:420px){
 #driverDashboard .driver-top-actions{gap:3px!important}
 #driverDashboard .driver-icon-btn,#driverDashboard .driver-avatar-btn{width:34px!important;height:34px!important}
 #driverDashboard .driver-map-wrapper{height:245px!important}
 #riderDashboard #rideMap{height:245px!important}
}

/* =========================================================
   RIDESWIFT PREMIUM CARD COLORS v3
   ========================================================= */
#driverDashboard .driver-stat-card,
#riderDashboard .stat-card,
#adminDashboard .stat-card {
    position:relative!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045)!important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}
#driverDashboard .driver-stat-card::before,
#riderDashboard .stat-card::before,
#adminDashboard .stat-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:18px 0 0 18px;
    background:var(--card-accent,#14b8a6);box-shadow:0 0 18px var(--card-accent,#14b8a6);
}
#driverDashboard .driver-stat-card:hover,
#riderDashboard .stat-card:hover,
#adminDashboard .stat-card:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.07)!important}

/* Driver cards */
#driverDashboard .driver-stat-card:nth-child(1){--card-accent:#f5c542;background:linear-gradient(135deg,rgba(245,197,66,.22),rgba(255,143,0,.10) 45%,#0b141d 100%)!important;border-color:rgba(245,197,66,.28)!important}
#driverDashboard .driver-stat-card:nth-child(2){--card-accent:#22d3ee;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(14,116,144,.09) 45%,#0b141d 100%)!important;border-color:rgba(34,211,238,.24)!important}
#driverDashboard .driver-stat-card:nth-child(3){--card-accent:#8b5cf6;background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(91,33,182,.08) 45%,#0b141d 100%)!important;border-color:rgba(139,92,246,.25)!important}
#driverDashboard .driver-stat-card:nth-child(4){--card-accent:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.20),rgba(180,83,9,.08) 45%,#0b141d 100%)!important;border-color:rgba(245,158,11,.25)!important}
#driverDashboard .driver-stat-card .driver-stat-icon{box-shadow:0 8px 20px rgba(0,0,0,.25)!important}
#driverDashboard .driver-stat-card:nth-child(1) .driver-stat-icon{background:rgba(245,197,66,.16)!important;color:#f5c542!important}
#driverDashboard .driver-stat-card:nth-child(2) .driver-stat-icon{background:rgba(34,211,238,.15)!important;color:#22d3ee!important}
#driverDashboard .driver-stat-card:nth-child(3) .driver-stat-icon{background:rgba(139,92,246,.16)!important;color:#a78bfa!important}
#driverDashboard .driver-stat-card:nth-child(4) .driver-stat-icon{background:rgba(245,158,11,.16)!important;color:#fbbf24!important}

/* Rider cards */
#riderDashboard .stat-card:nth-child(1){--card-accent:#14b8a6;background:linear-gradient(135deg,rgba(20,184,166,.20),rgba(6,95,70,.08) 45%,#0b141d 100%)!important;border-color:rgba(20,184,166,.27)!important}
#riderDashboard .stat-card:nth-child(2){--card-accent:#38bdf8;background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(3,105,161,.08) 45%,#0b141d 100%)!important;border-color:rgba(56,189,248,.25)!important}
#riderDashboard .stat-card:nth-child(3){--card-accent:#22c55e;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(21,128,61,.08) 45%,#0b141d 100%)!important;border-color:rgba(34,197,94,.25)!important}
#riderDashboard .stat-card:nth-child(4){--card-accent:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.20),rgba(180,83,9,.08) 45%,#0b141d 100%)!important;border-color:rgba(245,158,11,.25)!important}
#riderDashboard .stat-card:nth-child(1) .stat-icon{background:rgba(20,184,166,.16)!important;color:#2dd4bf!important}
#riderDashboard .stat-card:nth-child(2) .stat-icon{background:rgba(56,189,248,.15)!important;color:#38bdf8!important}
#riderDashboard .stat-card:nth-child(3) .stat-icon{background:rgba(34,197,94,.15)!important;color:#4ade80!important}
#riderDashboard .stat-card:nth-child(4) .stat-icon{background:rgba(245,158,11,.16)!important;color:#fbbf24!important}

/* Admin cards */
#adminDashboard .stat-card:nth-child(1){--card-accent:#3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.20),rgba(30,64,175,.08) 45%,#0b141d 100%)!important;border-color:rgba(59,130,246,.25)!important}
#adminDashboard .stat-card:nth-child(2){--card-accent:#22c55e;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(21,128,61,.08) 45%,#0b141d 100%)!important;border-color:rgba(34,197,94,.24)!important}
#adminDashboard .stat-card:nth-child(3){--card-accent:#06b6d4;background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(14,116,144,.08) 45%,#0b141d 100%)!important;border-color:rgba(6,182,212,.24)!important}
#adminDashboard .stat-card:nth-child(4){--card-accent:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(180,83,9,.08) 45%,#0b141d 100%)!important;border-color:rgba(245,158,11,.24)!important}
#adminDashboard .stat-card:nth-child(5){--card-accent:#10b981;background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(6,95,70,.08) 45%,#0b141d 100%)!important;border-color:rgba(16,185,129,.24)!important}
#adminDashboard .stat-card:nth-child(6){--card-accent:#f97316;background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(154,52,18,.08) 45%,#0b141d 100%)!important;border-color:rgba(249,115,22,.24)!important}
#adminDashboard .stat-card:nth-child(7){--card-accent:#8b5cf6;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(91,33,182,.08) 45%,#0b141d 100%)!important;border-color:rgba(139,92,246,.24)!important}
#adminDashboard .stat-card:nth-child(8){--card-accent:#f5c542;background:linear-gradient(135deg,rgba(245,197,66,.20),rgba(180,83,9,.08) 45%,#0b141d 100%)!important;border-color:rgba(245,197,66,.26)!important}

/* Zambia mobile-money branding — strong but still premium */
.driver-renew-network-cards .driver-renew-network-card{
    min-height:82px!important;
    border-width:1px!important;
    box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.driver-renew-network-cards .renew-network-mtn{
    background:linear-gradient(135deg,rgba(255,204,0,.20),rgba(255,176,0,.07) 55%,rgba(255,255,255,.025))!important;
    border-color:rgba(255,204,0,.38)!important;
}
.driver-renew-network-cards .renew-network-mtn:hover,
.driver-renew-network-cards .renew-network-mtn.selected{
    background:linear-gradient(135deg,rgba(255,204,0,.30),rgba(255,176,0,.12) 55%,rgba(255,255,255,.035))!important;
    border-color:#ffcc00!important;
    box-shadow:0 0 0 1px rgba(255,204,0,.28),0 12px 28px rgba(255,204,0,.12)!important;
}
.driver-renew-network-cards .renew-network-airtel{
    background:linear-gradient(135deg,rgba(228,0,43,.22),rgba(190,0,45,.08) 55%,rgba(255,255,255,.025))!important;
    border-color:rgba(228,0,43,.40)!important;
}
.driver-renew-network-cards .renew-network-airtel:hover,
.driver-renew-network-cards .renew-network-airtel.selected{
    background:linear-gradient(135deg,rgba(228,0,43,.34),rgba(190,0,45,.13) 55%,rgba(255,255,255,.035))!important;
    border-color:#e4002b!important;
    box-shadow:0 0 0 1px rgba(228,0,43,.28),0 12px 28px rgba(228,0,43,.14)!important;
}
.driver-renew-network-cards .renew-network-zamtel{
    background:linear-gradient(135deg,rgba(25,166,74,.22),rgba(21,128,61,.08) 55%,rgba(255,255,255,.025))!important;
    border-color:rgba(25,166,74,.40)!important;
}
.driver-renew-network-cards .renew-network-zamtel:hover,
.driver-renew-network-cards .renew-network-zamtel.selected{
    background:linear-gradient(135deg,rgba(25,166,74,.34),rgba(21,128,61,.13) 55%,rgba(255,255,255,.035))!important;
    border-color:#19a64a!important;
    box-shadow:0 0 0 1px rgba(25,166,74,.28),0 12px 28px rgba(25,166,74,.14)!important;
}
.driver-renew-network-card .renew-network-logo{font-size:12px!important;font-weight:900!important;box-shadow:0 5px 12px rgba(0,0,0,.22)}
.driver-renew-network-card.selected .renew-network-info strong{color:#fff}

/* Apply the same branded treatment to registration network cards */
.driver-registration-network-cards .renew-network-mtn,
.driver-registration-network-cards .renew-network-airtel,
.driver-registration-network-cards .renew-network-zamtel{background-image:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.driver-registration-network-cards .renew-network-mtn.selected{background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,176,0,.10))!important}
.driver-registration-network-cards .renew-network-airtel.selected{background:linear-gradient(135deg,rgba(228,0,43,.30),rgba(190,0,45,.10))!important}
.driver-registration-network-cards .renew-network-zamtel.selected{background:linear-gradient(135deg,rgba(25,166,74,.30),rgba(21,128,61,.10))!important}

@media(max-width:520px){
    #driverDashboard .driver-stat-card,
    #riderDashboard .stat-card,
    #adminDashboard .stat-card{box-shadow:0 10px 25px rgba(0,0,0,.24)!important}
    .driver-renew-network-cards .driver-renew-network-card{min-height:70px!important}
}

/* ===== [06] rideswift-mobile-ride-detail-fix ===== */
/* MOBILE RIDE DETAIL: never let the fixed footer cover modal actions. */
@media (max-width: 600px){
  body.driver-detail-open{
    overflow:hidden !important;
  }
  body.driver-detail-open #mobileBottomNav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #driverRideDetailModal{
    z-index:200000 !important;
  }
  #driverRideDetailModal .driver-ride-detail-dialog{
    width:100% !important;
    max-width:760px !important;
    max-height:calc(100dvh - 14px) !important;
    height:auto !important;
    overflow:hidden !important;
  }
  #driverRideDetailModal .driver-detail-body{
    max-height:calc(100dvh - 82px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
  #driverRideDetailModal .driver-detail-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:5 !important;
    margin:16px -1px calc(-1px - env(safe-area-inset-bottom)) !important;
    padding:12px 1px calc(12px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg,rgba(11,18,25,0),#0b1219 24%) !important;
  }
  #driverRideDetailModal .driver-detail-actions .driver-detail-btn{
    min-height:44px !important;
  }
}

/* ===== [07] rideswift-my-rides-final-fix ===== */
/* =========================================================
   RIDESWIFT — MY RIDES FINAL MOBILE CARD FIX
   Prevent browser/theme button styles from creating the
   unwanted white rectangle and make the accordion feel native
   to the dark RideSwift dashboard.
   ========================================================= */
#riderDashboard .rider-my-rides {
    box-sizing:border-box !important;
    width:100% !important;
    margin:0 0 12px !important;
    padding:8px !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,#0e1924 0%,#080f16 100%) !important;
    border:1px solid rgba(255,255,255,.075) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
    overflow:hidden !important;
}

#riderDashboard .rider-my-rides-toggle,
#riderDashboard .rider-my-rides-toggle[type="button"] {
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    box-sizing:border-box !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:68px !important;
    margin:0 !important;
    padding:10px 11px !important;
    border:1px solid transparent !important;
    border-radius:15px !important;
    outline:none !important;
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
    background-color:transparent !important;
    color:#f7f9fc !important;
    box-shadow:none !important;
    text-align:left !important;
    font-family:inherit !important;
    font-size:inherit !important;
    line-height:1.2 !important;
    cursor:pointer !important;
}

#riderDashboard .rider-my-rides-toggle:hover {
    border-color:rgba(24,198,216,.16) !important;
    background:linear-gradient(145deg,rgba(24,198,216,.075),rgba(255,255,255,.018)) !important;
}

#riderDashboard .rider-my-rides-toggle:active {
    transform:translateY(1px) !important;
}

#riderDashboard .rider-my-rides-toggle-main {
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
}

#riderDashboard .rider-my-rides-toggle-icon {
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:13px !important;
    background:linear-gradient(145deg,rgba(24,198,216,.16),rgba(24,198,216,.055)) !important;
    border:1px solid rgba(24,198,216,.20) !important;
    color:#59e8f2 !important;
    box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
}

#riderDashboard .rider-my-rides-toggle-icon i {
    display:block !important;
    color:#59e8f2 !important;
    font-size:15px !important;
}

#riderDashboard .rider-my-rides-toggle-main > span:last-child {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;
    min-width:0 !important;
}

#riderDashboard .rider-my-rides-toggle-main .section-label {
    display:block !important;
    margin:0 !important;
    color:#8c9aab !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
}

#riderDashboard .rider-my-rides-toggle-main strong {
    display:block !important;
    margin:0 !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
}

#riderDashboard .rider-my-rides-chevron {
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.045) !important;
    color:#aebbd0 !important;
    font-size:12px !important;
    transition:transform .22s ease, color .22s ease, background .22s ease !important;
}

#riderDashboard .rider-my-rides-open .rider-my-rides-chevron {
    transform:rotate(180deg) !important;
    color:#59e8f2 !important;
    background:rgba(24,198,216,.10) !important;
}

#riderDashboard .rider-my-rides-content {
    box-sizing:border-box !important;
    padding:6px 3px 4px !important;
}

#riderDashboard .rider-my-rides-actions {
    display:flex !important;
    justify-content:flex-end !important;
    margin:0 0 9px !important;
}

#riderDashboard .rider-my-rides .driver-history-btn {
    appearance:none !important;
    -webkit-appearance:none !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.035) !important;
    color:#b9c5d4 !important;
    box-shadow:none !important;
}

@media(max-width:600px){
    #riderDashboard .rider-my-rides {
        padding:7px !important;
        border-radius:18px !important;
    }
    #riderDashboard .rider-my-rides-toggle {
        min-height:64px !important;
        padding:9px 10px !important;
        border-radius:14px !important;
    }
    #riderDashboard .rider-my-rides-toggle-icon {
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }
    #riderDashboard .rider-my-rides-toggle-main strong {
        font-size:15px !important;
    }
    #riderDashboard .rider-my-rides-toggle .rider-my-rides-chevron {
        width:32px !important;
        height:32px !important;
        flex-basis:32px !important;
    }
}

/* ===== [08] rideswift-driver-my-rides-hard-fix ===== */
/* Final driver My Rides header override — prevents browser/theme button styles */
#driverMyRidesSection {
    width:100% !important;
    box-sizing:border-box !important;
    background:linear-gradient(145deg,#0d1722 0%,#080e15 100%) !important;
    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:18px !important;
    padding:7px !important;
    margin:12px 0 !important;
    overflow:hidden !important;
    box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#driverMyRidesSection #driverMyRidesToggle,
#driverMyRidesSection button#driverMyRidesToggle {
    all:unset !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:68px !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    border:1px solid rgba(255,255,255,.055) !important;
    border-radius:14px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
    color:#f7f9fc !important;
    font-family:inherit !important;
    font-size:inherit !important;
    line-height:1.2 !important;
    text-align:left !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
}
#driverMyRidesSection #driverMyRidesToggle:hover {
    background:linear-gradient(145deg,rgba(24,198,216,.08),rgba(255,255,255,.018)) !important;
    border-color:rgba(24,198,216,.18) !important;
}
#driverMyRidesSection #driverMyRidesToggle:active { transform:translateY(1px) !important; }
#driverMyRidesSection .driver-my-rides-toggle-main {
    display:flex !important; align-items:center !important; gap:11px !important;
    min-width:0 !important; flex:1 1 auto !important;
}
#driverMyRidesSection .driver-my-rides-toggle-main > span:last-child {
    display:flex !important; flex-direction:column !important; gap:3px !important;
    min-width:0 !important;
}
#driverMyRidesSection .driver-my-rides-toggle-main .section-label {
    display:block !important; margin:0 !important;
    color:#7f93a8 !important; font-size:11px !important;
    font-weight:800 !important; letter-spacing:1.3px !important;
    line-height:1.1 !important; text-transform:uppercase !important;
}
#driverMyRidesSection .driver-my-rides-toggle-main strong {
    display:block !important; color:#f7f9fc !important;
    font-size:16px !important; font-weight:800 !important; line-height:1.15 !important;
}
#driverMyRidesSection .driver-my-rides-toggle-icon {
    width:42px !important; height:42px !important; flex:0 0 42px !important;
    display:grid !important; place-items:center !important;
    border-radius:12px !important;
    background:linear-gradient(145deg,rgba(24,198,216,.18),rgba(24,198,216,.06)) !important;
    border:1px solid rgba(24,198,216,.18) !important;
    color:#20d4e8 !important;
}
#driverMyRidesSection .driver-my-rides-toggle-icon i {
    color:#20d4e8 !important; font-size:17px !important;
}
#driverMyRidesSection .driver-my-rides-chevron {
    flex:0 0 auto !important; color:#9eacbb !important;
    font-size:15px !important; transition:transform .22s ease !important;
}
#driverMyRidesSection.driver-my-rides-open .driver-my-rides-chevron {
    transform:rotate(180deg) !important;
}
#driverMyRidesSection .driver-my-rides-content {
    padding:8px 4px 4px !important;
}
@media (max-width:600px){
    #driverMyRidesSection #driverMyRidesToggle,
    #driverMyRidesSection button#driverMyRidesToggle { min-height:64px !important; padding:9px 10px !important; }
    #driverMyRidesSection .driver-my-rides-toggle-icon { width:40px !important; height:40px !important; flex-basis:40px !important; }
}

/* ===== [09] rideswift-merchant-registration-wizard ===== */
.merchant-wizard{overflow:hidden}
.merchant-step-progress{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 0 24px;padding:2px 0 8px}
.merchant-step-progress.hidden{display:none}
.merchant-step-item{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:62px;color:#77879a;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;transition:.2s ease}
.merchant-step-item span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);background:#101b26;color:#8191a3;font-weight:900}
.merchant-step-item.active,.merchant-step-item.completed{color:#f3df9b}
.merchant-step-item.active span{border-color:#f3df9b;background:linear-gradient(145deg,#f3df9b,#d8ad3b);color:#10151b;box-shadow:0 0 0 5px rgba(246,211,101,.08),0 8px 22px rgba(246,211,101,.12)}
.merchant-step-item.completed span{border-color:#14b8a6;background:rgba(20,184,166,.13);color:#24d8c5}
.merchant-step-item.completed span{font-size:0}.merchant-step-item.completed span:after{content:"✓";font-size:13px}
.merchant-step-line{height:1px;flex:1;max-width:70px;background:linear-gradient(90deg,rgba(246,211,101,.25),rgba(255,255,255,.1))}
.merchant-registration-step{display:none}.merchant-registration-step.active{display:block;animation:merchantStepIn .22s ease}
@keyframes merchantStepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.merchant-heading{margin-bottom:18px}.merchant-icon-gold{background:linear-gradient(145deg,rgba(246,211,101,.22),rgba(246,211,101,.07))!important;color:#f3df9b!important;border:1px solid rgba(246,211,101,.2)}
.merchant-icon-blue{background:linear-gradient(145deg,rgba(59,130,246,.22),rgba(59,130,246,.07))!important;color:#60a5fa!important;border:1px solid rgba(59,130,246,.2)}
.merchant-icon-green{background:linear-gradient(145deg,rgba(34,197,94,.22),rgba(34,197,94,.07))!important;color:#4ade80!important;border:1px solid rgba(34,197,94,.2)}
.merchant-icon-purple{background:linear-gradient(145deg,rgba(168,85,247,.22),rgba(168,85,247,.07))!important;color:#c084fc!important;border:1px solid rgba(168,85,247,.2)}
.merchant-icon-gold span,.merchant-icon-blue span,.merchant-icon-green span,.merchant-icon-purple span{font-size:20px;line-height:1}
.merchant-field-stack{display:grid;gap:14px}.merchant-full-field{width:100%}.merchant-category-field{margin-top:2px}
.merchant-choice-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.merchant-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}
.merchant-category-card{position:relative;display:flex;align-items:center;gap:10px;min-height:72px;padding:10px 11px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,#111d28,#0d1721);color:#eaf0f7;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.merchant-category-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.merchant-category-card .merchant-category-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:#202c38;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.merchant-category-card>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}.merchant-category-card strong{font-size:12px;line-height:1.2}.merchant-category-card small{font-size:11px;color:#8190a2;line-height:1.2}.merchant-category-card>i{position:absolute;right:9px;top:9px;font-size:11px;opacity:0;transform:scale(.7);transition:.18s}.merchant-category-card.selected{border-color:#19d3c2;background:linear-gradient(145deg,rgba(20,184,166,.18),rgba(20,184,166,.05));box-shadow:0 0 0 1px rgba(20,184,166,.08),0 10px 25px rgba(0,0,0,.16)}.merchant-category-card.selected>i{opacity:1;transform:none;color:#20e0cc}
.merchant-category-card.category-food.selected{border-color:#fb923c;background:linear-gradient(145deg,rgba(251,146,60,.18),rgba(251,146,60,.05))}.merchant-category-card.category-health.selected{border-color:#4ade80;background:linear-gradient(145deg,rgba(74,222,128,.18),rgba(74,222,128,.05))}.merchant-category-card.category-grocery.selected{border-color:#60a5fa;background:linear-gradient(145deg,rgba(96,165,250,.18),rgba(96,165,250,.05))}.merchant-category-card.category-retail.selected{border-color:#f472b6;background:linear-gradient(145deg,rgba(244,114,182,.18),rgba(244,114,182,.05))}.merchant-category-card.category-hardware.selected{border-color:#f59e0b;background:linear-gradient(145deg,rgba(245,158,11,.18),rgba(245,158,11,.05))}.merchant-category-card.category-office.selected{border-color:#a78bfa;background:linear-gradient(145deg,rgba(167,139,250,.18),rgba(167,139,250,.05))}.merchant-category-card.category-ecommerce.selected{border-color:#22d3ee;background:linear-gradient(145deg,rgba(34,211,238,.18),rgba(34,211,238,.05))}.merchant-category-card.category-other.selected{border-color:#facc15;background:linear-gradient(145deg,rgba(250,204,21,.18),rgba(250,204,21,.05))}
.merchant-choice-help{margin-top:8px;color:#77879a;font-size:11px}.merchant-form-grid-fix{margin-top:4px}.merchant-registration-note{align-items:flex-start}.merchant-registration-note i{color:#60a5fa;margin-top:1px}
.merchant-step-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06)}.merchant-step-actions .primary-btn,.merchant-step-actions .secondary-btn{margin:0;min-width:130px}.merchant-step-actions .primary-btn{margin-left:auto}.merchant-step-actions .secondary-btn{background:#121d28!important;color:#d9e1ea!important;border:1px solid rgba(255,255,255,.1)!important}
.merchant-final-summary{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px;border-radius:14px;border:1px solid rgba(246,211,101,.15);background:linear-gradient(145deg,rgba(246,211,101,.09),rgba(255,255,255,.025))}.merchant-final-summary>span{font-size:25px}.merchant-final-summary strong{display:block;font-size:13px}.merchant-final-summary small{display:block;margin-top:2px;color:#8997a8;font-size:11px}
@media(max-width:600px){.merchant-step-progress{gap:3px}.merchant-step-item{min-width:48px;font-size:10px}.merchant-step-item span{width:30px;height:30px}.merchant-step-line{max-width:30px}.merchant-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.merchant-category-card{min-height:76px;padding:9px}.merchant-category-card .merchant-category-icon{width:36px;height:36px;flex-basis:36px;font-size:18px}.merchant-category-card strong{font-size:11px}.merchant-category-card small{font-size:10px}.merchant-step-actions{position:sticky;bottom:0;background:#0a0e17;padding:12px 0 2px;z-index:3}}
@media(max-width:360px){.merchant-category-grid{grid-template-columns:1fr}.merchant-category-card{min-height:64px}.merchant-category-card strong{font-size:11px}}

/* ===== [10] rideswift-merchant-rider-like-v2 ===== */
.merchant-dashboard{max-width:980px!important;padding:10px 10px 100px!important;}.rider-like-topbar{position:sticky;top:8px;z-index:20;backdrop-filter:blur(16px)}.merchant-top-actions{align-items:center}.merchant-icon-btn,.merchant-logout-icon{position:relative;width:40px;height:40px;min-height:40px;padding:0!important;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:#111b25;color:#dbe7f2;border-radius:12px;cursor:pointer}.merchant-logout-icon{color:#ff8e98;background:rgba(239,68,68,.08)}.merchant-icon-btn .notification-badge{position:absolute;right:-4px;top:-4px}.rider-like-welcome{background:linear-gradient(145deg,#0e1a25,#081018)!important}.merchant-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:10px 0}.merchant-quick-card{border:1px solid rgba(255,255,255,.07);border-radius:17px;padding:13px 10px;text-align:left;color:#fff;background:#0d1822;cursor:pointer;transition:.18s ease;display:flex;flex-direction:column;gap:4px}.merchant-quick-card:hover{transform:translateY(-2px);border-color:rgba(22,198,200,.25)}.merchant-quick-card span{font-size:21px}.merchant-quick-card strong{font-size:11px}.merchant-quick-card small{font-size:11px;color:#7f8c9d}.quick-gold{box-shadow:inset 0 2px 0 rgba(246,211,101,.55)}.quick-blue{box-shadow:inset 0 2px 0 rgba(96,165,250,.55)}.quick-green{box-shadow:inset 0 2px 0 rgba(74,222,128,.55)}.quick-purple{box-shadow:inset 0 2px 0 rgba(192,132,252,.55)}.merchant-stat-card{position:relative;overflow:hidden}.merchant-stat-card.stat-blue .merchant-stat-icon{color:#60a5fa;background:rgba(96,165,250,.08)}.merchant-stat-card.stat-green .merchant-stat-icon{color:#4ade80;background:rgba(74,222,128,.08)}.merchant-stat-card.stat-purple .merchant-stat-icon{color:#c084fc;background:rgba(192,132,252,.08)}.merchant-map-card{margin-top:12px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:#0b151f;box-shadow:0 14px 35px rgba(0,0,0,.2)}.merchant-map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 16px}.merchant-map-head h2{margin:4px 0;font-size:18px}.merchant-map-head p{margin:0;color:rgba(255,255,255,.60);font-size:11px}.merchant-map-locate{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#111d28;color:#aebdcc}.merchant-map-wrap{position:relative}.merchant-map-wrap #merchantMap{height:360px;width:100%;background:#101820}.merchant-map-status{position:absolute;left:10px;right:10px;bottom:10px;z-index:500;background:rgba(6,13,20,.86);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px 11px;color:#c9d4df;font-size:11px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20d4a2;box-shadow:0 0 0 4px rgba(32,212,162,.1);margin-right:5px}.merchant-pin{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;border:2px solid rgba(255,255,255,.8);box-shadow:0 5px 15px rgba(0,0,0,.35);background:#111}.merchant-pin.pickup{background:#f3df9b}.merchant-pin.destination{background:#ef6b7b}.merchant-pin.driver{background:#16c6c8}.merchant-tracking-details{padding:11px 14px;border-top:1px solid rgba(255,255,255,.06)}.merchant-track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.merchant-track-grid>div{padding:9px;border-radius:12px;background:#101c27}.merchant-track-grid small{display:block;color:#7f8c9d;font-size:11px;margin-bottom:3px}.merchant-track-grid strong{display:block;font-size:11px;line-height:1.25}.merchant-track-placeholder{padding:8px;color:#718092;font-size:11px}.merchant-form-map-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.merchant-map-mode{border:1px solid rgba(255,255,255,.08);background:#101c27;color:#b9c6d4;border-radius:10px;padding:8px 10px;font-size:11px;cursor:pointer}.merchant-map-mode.active{border-color:#16c6c8;color:#20d4e8;background:rgba(22,198,200,.08)}.merchant-fare-preview{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(22,198,200,.05);border:1px solid rgba(22,198,200,.09);color:#8d9baa;font-size:11px}.merchant-fare-preview strong{color:#dce6ef}.merchant-delivery-card{cursor:pointer}.merchant-delivery-card.is-active{border-color:rgba(22,198,200,.35);box-shadow:0 0 0 1px rgba(22,198,200,.08)}.merchant-track-btn{border:1px solid rgba(22,198,200,.2);background:rgba(22,198,200,.07);color:#6fe8eb;border-radius:10px;padding:8px 10px;cursor:pointer}.merchant-delivery-actions{gap:7px}.merchant-delivery-actions .merchant-track-btn{margin-right:auto}@media(max-width:760px){.merchant-quick-grid{grid-template-columns:repeat(2,1fr)}.merchant-map-wrap #merchantMap{height:330px}.merchant-track-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.merchant-dashboard{padding:7px 7px 92px!important}.merchant-brand strong{font-size:13px}.merchant-brand-icon{width:39px;height:39px}.merchant-welcome{padding:15px!important}.merchant-welcome h1{font-size:19px!important}.merchant-stat-grid{grid-template-columns:repeat(2,1fr)!important}.merchant-map-wrap #merchantMap{height:285px}.merchant-map-head{padding:13px}.merchant-track-grid{gap:6px}.merchant-fare-preview{flex-direction:column}.merchant-form-map-tools{display:grid;grid-template-columns:1fr 1fr}.merchant-form-map-tools .merchant-map-mode:last-child{grid-column:1/-1}}

/* ===== [11] rideswift-merchant-business-v1 ===== */
.merchant-dashboard{max-width:1180px;margin:0 auto;padding:14px 12px 110px;color:#fff}.merchant-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(135deg,#101b25,#080f16);box-shadow:0 14px 40px rgba(0,0,0,.22)}.merchant-brand{display:flex;align-items:center;gap:11px;min-width:0}.merchant-brand-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#f3df9b,#d4af37);color:#10151b}.merchant-brand strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.merchant-brand span{display:block;color:rgba(255,255,255,.64);font-size:11px}.merchant-top-actions{display:flex;gap:7px}.merchant-icon-btn,.merchant-logout-btn,.merchant-refresh-btn{border:1px solid rgba(255,255,255,.09);background:#111c27;color:#dbe6f4;border-radius:12px;min-height:40px;padding:0 12px;cursor:pointer}.merchant-logout-btn{background:rgba(239,68,68,.08);color:#fca5a5}.merchant-welcome{margin:12px 0;display:flex;justify-content:space-between;align-items:flex-end;gap:15px;padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:#0b141d}.merchant-welcome h1{font-size:24px;margin:5px 0}.merchant-welcome p{margin:0;color:rgba(255,255,255,.55);font-size:13px}.merchant-verified-pill{padding:8px 11px;border-radius:999px;background:rgba(250,204,21,.08);color:#f3df9b;border:1px solid rgba(250,204,21,.18);font-size:11px;white-space:nowrap}.merchant-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.merchant-stat-card{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:#0c1721}.merchant-stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(246,211,101,.08);color:#f3df9b}.merchant-stat-card small{display:block;color:rgba(255,255,255,.60);font-size:11px}.merchant-stat-card strong{display:block;margin-top:3px;font-size:18px}.merchant-delivery-builder,.merchant-orders-section,.merchant-profile-strip{margin-top:12px;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:#0b151f}.merchant-section-head{margin-bottom:13px}.merchant-section-head h2{margin:4px 0;font-size:19px}.merchant-section-head p{margin:0;color:rgba(255,255,255,.64);font-size:12px}.merchant-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.merchant-form-grid .full{grid-column:1/-1}.merchant-dashboard .input-group label{color:rgba(255,255,255,.62);font-size:11px}.merchant-dashboard .input-group input,.merchant-dashboard .input-group select,.merchant-dashboard .input-group textarea{width:100%;box-sizing:border-box;background:#07111a!important;color:#fff!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;padding:11px 12px!important}.merchant-primary-btn{margin-top:12px;width:100%;min-height:46px;border:0;border-radius:14px;background:linear-gradient(145deg,#f3df9b,#d4af37);color:#0b1117;font-weight:800;cursor:pointer}.merchant-orders-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.merchant-delivery-list{display:grid;gap:9px}.merchant-delivery-card{padding:13px;border-radius:17px;border:1px solid rgba(255,255,255,.07);background:#101c27}.merchant-delivery-main{display:flex;justify-content:space-between;gap:12px}.merchant-tracking{font-weight:800}.merchant-delivery-status{font-size:11px;text-transform:uppercase;border-radius:999px;padding:5px 8px;background:rgba(59,130,246,.12);color:#93c5fd}.merchant-delivery-status.delivered{background:rgba(34,197,94,.1);color:#86efac}.merchant-delivery-status.cancelled,.merchant-delivery-status.failed{background:rgba(239,68,68,.1);color:#fca5a5}.merchant-route{margin:9px 0;color:#dce5ef;font-size:12px;display:grid;gap:5px}.merchant-route i{color:#f3df9b;width:15px}.merchant-delivery-meta{display:flex;flex-wrap:wrap;gap:7px;color:rgba(255,255,255,.60);font-size:11px}.merchant-delivery-actions{display:flex;justify-content:flex-end;margin-top:9px}.merchant-cancel-btn{border:1px solid rgba(239,68,68,.2);background:rgba(239,68,68,.06);color:#fca5a5;border-radius:10px;padding:8px 10px;cursor:pointer}.merchant-loading,.merchant-empty{padding:25px;text-align:center;color:rgba(255,255,255,.64);font-size:12px}.merchant-profile-strip{display:flex;justify-content:space-between;gap:15px;align-items:center}.merchant-profile-strip h3{margin:3px 0;font-size:16px}.merchant-profile-strip p,.merchant-profile-strip>span{margin:0;color:rgba(255,255,255,.64);font-size:11px}.merchant-registration-card{margin-top:8px;padding:14px;border-radius:18px;background:#0b151f;border:1px solid rgba(255,255,255,.07)}.merchant-registration-note{display:flex;gap:8px;margin-top:10px;padding:10px;border-radius:12px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.12);color:#a9c5e6;font-size:11px}.merchant-step-icon{background:linear-gradient(145deg,#f3df9b,#d4af37)!important;color:#111!important}.driver-delivery-jobs{margin-top:12px;padding:14px;border:1px solid rgba(246,211,101,.12);border-radius:20px;background:#0c1721}.driver-delivery-jobs-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.driver-delivery-jobs-head h3{margin:3px 0;font-size:17px}.driver-delivery-list{display:grid;gap:8px}.driver-delivery-card{padding:11px;border-radius:14px;background:#101c27;border:1px solid rgba(255,255,255,.07)}.driver-delivery-card .dd-top{display:flex;justify-content:space-between;gap:8px}.driver-delivery-card .dd-code{font-weight:800}.driver-delivery-card .dd-fee{color:#f3df9b;font-weight:800}.driver-delivery-card .dd-route{display:grid;gap:4px;margin:7px 0;color:rgba(255,255,255,.66);font-size:11px}.driver-delivery-card .dd-actions{display:flex;gap:7px}.driver-delivery-card button{border:0;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700}.driver-delivery-card .dd-accept{background:#f3df9b;color:#10151b}.driver-delivery-card .dd-refresh{background:#162331;color:#cbd5e1}.driver-delivery-empty{padding:15px;text-align:center;color:rgba(255,255,255,.60);font-size:11px}@media(max-width:760px){.merchant-welcome{align-items:flex-start;flex-direction:column}.merchant-stat-grid{grid-template-columns:repeat(2,1fr)}.merchant-form-grid{grid-template-columns:1fr}.merchant-form-grid .full{grid-column:auto}.merchant-profile-strip{align-items:flex-start;flex-direction:column}.merchant-welcome h1{font-size:20px}}@media(max-width:420px){.merchant-dashboard{padding-left:7px;padding-right:7px}.merchant-stat-grid{gap:7px}.merchant-stat-card{padding:11px}.merchant-stat-icon{width:34px;height:34px}.merchant-stat-card strong{font-size:16px}.merchant-delivery-builder,.merchant-orders-section,.merchant-profile-strip{padding:12px;border-radius:18px}}

/* ===== [12] rideswift-delivery-pin-history-v1 ===== */
.merchant-pin-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;font-size:11px;color:#9fb0bf}.merchant-pin-row span{padding:6px 8px;border-radius:9px;background:rgba(246,211,101,.06);border:1px solid rgba(246,211,101,.12)}.merchant-pin-row strong{color:#f3df9b;letter-spacing:2px;margin-left:3px}.driver-delivery-active,.driver-delivery-history{margin-top:12px;padding:14px;border:1px solid rgba(22,198,200,.12);border-radius:20px;background:#0c1721}.driver-delivery-history{border-color:rgba(255,255,255,.07)}.dd-action-primary{background:linear-gradient(145deg,#16c6c8,#0e9da8);color:#061217;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:800}.dd-status-chip{font-size:11px;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(22,198,200,.1);color:#6fe8eb}.dd-status-chip.delivered{background:rgba(34,197,94,.1);color:#86efac}.dd-status-chip.cancelled,.dd-status-chip.failed{background:rgba(239,68,68,.1);color:#fca5a5}.dd-history-meta{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.60);font-size:11px}.dd-history-meta strong{color:#f3df9b}.active-delivery{border-color:rgba(22,198,200,.28);box-shadow:0 0 0 1px rgba(22,198,200,.06)}.driver-delivery-history-collapsed{padding:0!important;overflow:hidden}.driver-delivery-history-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:transparent;color:#fff;border:0;cursor:pointer;text-align:left}.driver-delivery-history-toggle-main{display:flex;align-items:center;gap:11px;min-width:0}.driver-delivery-history-toggle-main>span:last-child{display:grid;gap:3px}.driver-delivery-history-toggle-main strong{font-size:15px;color:#fff}.driver-delivery-history-toggle-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:rgba(22,198,200,.08);color:#6fe8eb}.driver-delivery-history-chevron{color:#8fa0b0;transition:transform .2s ease}.driver-delivery-history-open .driver-delivery-history-chevron{transform:rotate(180deg)}.driver-delivery-history-open{padding:14px!important}.driver-delivery-history-content{margin-top:0}.driver-delivery-history-actions{display:flex;justify-content:flex-end;margin-bottom:9px}.driver-delivery-history-content[hidden]{display:none!important}
.merchant-delivery-history-collapsed{padding:0!important;overflow:hidden}.merchant-delivery-history-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:transparent;color:#fff;border:0;cursor:pointer;text-align:left}.merchant-delivery-history-toggle-main{display:flex;align-items:center;gap:11px;min-width:0}.merchant-delivery-history-toggle-main>span:last-child{display:grid;gap:3px}.merchant-delivery-history-toggle-main strong{font-size:15px;color:#fff}.merchant-delivery-history-toggle-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:rgba(22,198,200,.08);color:#6fe8eb}.merchant-delivery-history-chevron{color:#8fa0b0;transition:transform .2s ease}.merchant-delivery-history-open .merchant-delivery-history-chevron{transform:rotate(180deg)}.merchant-delivery-history-open{padding:14px!important}.merchant-delivery-history-content[hidden]{display:none!important}@media(max-width:480px){.merchant-delivery-history-toggle{padding:13px 12px}.merchant-delivery-history-toggle-main strong{font-size:14px}}@media(max-width:480px){.driver-delivery-history-toggle{padding:13px 12px}.driver-delivery-history-toggle-main strong{font-size:14px}}

/* UNIFIED PASSENGER RIDE + DELIVERY BOOKING */
.booking-service-switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;margin:0 0 12px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:#08111a}
.booking-service-tab{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border:1px solid transparent;border-radius:13px;background:transparent;color:#9aa9b8;text-align:left;cursor:pointer;transition:.2s ease}
.booking-service-tab:hover{background:rgba(255,255,255,.035);color:#eaf3fa}
.booking-service-tab.active{background:linear-gradient(145deg,rgba(20,184,166,.18),rgba(22,198,200,.06));border-color:rgba(22,198,200,.32);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.booking-service-tab-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.05);color:#7dd3fc}
.booking-service-tab.active .booking-service-tab-icon{background:rgba(22,198,200,.14);color:#6fe8eb}
.booking-service-tab span:last-child{display:grid;gap:2px;min-width:0}.booking-service-tab strong{font-size:12px}.booking-service-tab small{font-size:10px;color:#718194;white-space:nowrap}.booking-service-tab.active small{color:#8da3b5}
.booking-service-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:0 2px}.booking-service-title-row h3{margin:4px 0 0}.booking-service-badge{padding:6px 9px;border-radius:999px;background:rgba(22,198,200,.07);border:1px solid rgba(22,198,200,.14);color:#6fe8eb;font-size:10px;font-weight:900;white-space:nowrap}
#bookRideSection.delivery-mode .nearby-drivers-bar{display:flex!important}
#bookRideSection.delivery-mode .map-controls .location-info strong:before{content:""}
.passenger-delivery-panel{margin-top:12px;border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.passenger-delivery-panel.hidden{display:none!important}
.passenger-delivery-panel .passenger-delivery-head{padding:4px 2px 12px;border:0}
.passenger-delivery-panel .passenger-delivery-form{padding:0 2px 2px}
.passenger-delivery-card{margin-top:14px;border:1px solid rgba(22,198,200,.16);border-radius:22px;background:linear-gradient(145deg,#0d1822,#080f15);box-shadow:0 18px 45px rgba(0,0,0,.22);overflow:hidden}
.passenger-delivery-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 17px;border-bottom:1px solid rgba(255,255,255,.06)}
.passenger-delivery-head h3{margin:3px 0 0;font-size:18px}.passenger-delivery-head p{margin:4px 0 0;color:rgba(255,255,255,.64);font-size:11px}.passenger-delivery-badge{padding:7px 10px;border-radius:999px;background:rgba(22,198,200,.08);border:1px solid rgba(22,198,200,.16);color:#6fe8eb;font-size:11px;font-weight:800;white-space:nowrap}
.passenger-delivery-map{height:245px;background:#101820}.passenger-delivery-map-wrap{position:relative}.passenger-delivery-map-tools{position:absolute;z-index:500;top:10px;left:10px;right:10px;display:flex;gap:7px;flex-wrap:wrap}.passenger-delivery-map-tools button{border:1px solid rgba(255,255,255,.12);background:rgba(7,15,23,.9);backdrop-filter:blur(10px);color:#dbe7f1;border-radius:10px;padding:8px 10px;font-size:11px;cursor:pointer}.passenger-delivery-map-tools button.active{border-color:#16c6c8;color:#6fe8eb}
.passenger-delivery-form{padding:15px 17px 17px}.passenger-delivery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.passenger-delivery-grid .full{grid-column:1/-1}.passenger-delivery-form label{display:block;margin-bottom:5px;color:rgba(255,255,255,.62);font-size:11px;font-weight:700}.passenger-delivery-form input,.passenger-delivery-form select{width:100%;box-sizing:border-box;background:#07111a!important;color:#fff!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;padding:11px 12px!important;outline:none}.passenger-delivery-form input:focus,.passenger-delivery-form select:focus{border-color:rgba(22,198,200,.5)!important;box-shadow:0 0 0 3px rgba(22,198,200,.08)}
.passenger-delivery-price{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:7px;margin-top:11px}.passenger-delivery-price>div{padding:9px 10px;border-radius:12px;background:#101c27;border:1px solid rgba(255,255,255,.06)}.passenger-delivery-price small{display:block;color:#748294;font-size:10px}.passenger-delivery-price strong{display:block;margin-top:3px;color:#eaf3fa;font-size:11px}.passenger-delivery-price .total{background:linear-gradient(145deg,rgba(20,184,166,.16),rgba(20,184,166,.05));border-color:rgba(20,184,166,.22)}.passenger-delivery-price .total strong{font-size:17px;color:#63e6cf}.passenger-delivery-actions{display:flex;gap:8px;margin-top:11px}.passenger-delivery-actions button{flex:1;min-height:45px;border:0;border-radius:13px;font-weight:800;cursor:pointer}.passenger-delivery-submit{background:linear-gradient(145deg,#f3df9b,#d4af37);color:#0a1117}.passenger-delivery-location{background:#111d28;color:#cbd7e2;border:1px solid rgba(255,255,255,.08)!important}.passenger-delivery-list{display:grid;gap:8px;padding:0 17px 17px}.passenger-delivery-history-toggle{width:100%;border:0;background:transparent;color:#fff;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:13px 17px;cursor:pointer;border-top:1px solid rgba(255,255,255,.06)}.passenger-delivery-history-toggle strong{display:block;font-size:13px;margin-top:3px}.passenger-delivery-history-chevron{transition:.2s}.passenger-delivery-history-open .passenger-delivery-history-chevron{transform:rotate(180deg)}.passenger-delivery-item{padding:12px;border-radius:15px;background:#101c27;border:1px solid rgba(255,255,255,.06)}.passenger-delivery-item.active{border-color:rgba(22,198,200,.25)}.passenger-delivery-item-top{display:flex;justify-content:space-between;gap:10px}.passenger-delivery-item-top strong{font-size:11px}.passenger-delivery-status{padding:4px 7px;border-radius:999px;font-size:10px;text-transform:uppercase;background:rgba(59,130,246,.12);color:#93c5fd}.passenger-delivery-status.delivered{background:rgba(34,197,94,.1);color:#86efac}.passenger-delivery-status.cancelled{background:rgba(239,68,68,.1);color:#fca5a5}.passenger-delivery-route{display:grid;gap:4px;margin:8px 0;color:#dce5ef;font-size:11px}.passenger-delivery-route i{width:15px;color:#f3df9b}.passenger-delivery-meta{display:flex;gap:8px;flex-wrap:wrap;color:#77879a;font-size:11px}.passenger-delivery-item-actions{display:flex;gap:7px;margin-top:9px}.passenger-delivery-item-actions button{border:1px solid rgba(22,198,200,.18);background:rgba(22,198,200,.06);color:#6fe8eb;border-radius:9px;padding:7px 9px;font-size:11px;cursor:pointer}.passenger-delivery-item-actions .cancel{border-color:rgba(239,68,68,.18);background:rgba(239,68,68,.06);color:#fca5a5}.passenger-delivery-empty{padding:20px;text-align:center;color:#77879a;font-size:11px}.passenger-delivery-track-box{margin:0 17px 17px;padding:12px;border-radius:15px;background:#0a131c;border:1px solid rgba(22,198,200,.12)}.passenger-delivery-track-box strong{font-size:11px}.passenger-delivery-track-map{height:180px;border-radius:12px;margin-top:9px;overflow:hidden}.passenger-delivery-track-status{margin-top:7px;color:#8b9aaa;font-size:11px}
@media(max-width:700px){.passenger-delivery-grid{grid-template-columns:1fr}.passenger-delivery-grid .full{grid-column:auto}.passenger-delivery-price{grid-template-columns:repeat(2,1fr)}.passenger-delivery-price .total{grid-column:1/-1}.passenger-delivery-map{height:225px}.passenger-delivery-actions{flex-direction:column}}

/* ===== [13] rideswift-passenger-delivery-card-selectors ===== */
/* Passenger delivery selectors intentionally mirror the ride selector cards. */
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPackageType),
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPayment){
    min-width:0;
}

#passengerDeliverySection .select-card-options{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
}
#passengerDeliverySection .select-card-option{
    position:relative; min-height:78px; padding:9px 7px; border-radius:13px;
    border:1px solid rgba(255,255,255,.10); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    color:#dbe7f2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
    text-align:center;
}
#passengerDeliverySection .select-card-option:hover{transform:translateY(-2px);border-color:rgba(94,231,242,.45);box-shadow:0 8px 20px rgba(0,0,0,.18)}
#passengerDeliverySection .select-card-option.selected{box-shadow:0 0 0 1px currentColor,0 9px 22px rgba(0,0,0,.20);}
#passengerDeliverySection .select-card-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-size:15px}
#passengerDeliverySection .select-card-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
#passengerDeliverySection .select-card-title{font-size:11px;font-weight:900;line-height:1.15;white-space:normal}
#passengerDeliverySection .select-card-value{display:none}
#passengerDeliverySection .select-card-check{position:absolute;right:6px;top:6px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;opacity:0;transform:scale(.7);transition:.18s}
#passengerDeliverySection .select-card-option.selected .select-card-check{opacity:1;transform:scale(1)}
/* Package identities */

#passengerDeliverySection .delivery-package-parcel .select-card-icon{background:rgba(246,211,101,.16)}

#passengerDeliverySection .delivery-package-food .select-card-icon{background:rgba(244,63,94,.16)}

#passengerDeliverySection .delivery-package-medicine .select-card-icon{background:rgba(6,182,212,.16)}

#passengerDeliverySection .delivery-package-grocery .select-card-icon{background:rgba(34,197,94,.16)}

#passengerDeliverySection .delivery-package-documents .select-card-icon{background:rgba(59,130,246,.16)}

#passengerDeliverySection .delivery-package-fragile .select-card-icon{background:rgba(249,115,22,.16)}

#passengerDeliverySection .delivery-package-other .select-card-icon{background:rgba(168,85,247,.16)}
/* Payment identities */

#passengerDeliverySection .delivery-payment-cash .select-card-icon{background:rgba(246,211,101,.16)}

#passengerDeliverySection .delivery-payment-airtel-money .select-card-icon{background:rgba(239,68,68,.16)}

#passengerDeliverySection .delivery-payment-mtn-momo .select-card-icon{background:rgba(250,204,21,.16)}

#passengerDeliverySection .delivery-payment-zamtel-money .select-card-icon{background:rgba(34,197,94,.16)}
#passengerDeliverySection .delivery-payment-card.selected .select-card-check{background:currentColor;color:#071019}
#passengerDeliverySection .delivery-package-card.selected .select-card-check{background:currentColor;color:#071019}
@media(max-width:760px){
    #passengerDeliverySection .select-card-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    #passengerDeliverySection .select-card-option{min-height:70px;padding:8px 5px}
    #passengerDeliverySection .select-card-icon{width:30px;height:30px;flex-basis:30px;font-size:13px}
    #passengerDeliverySection .select-card-title{font-size:11px}
}
@media(max-width:390px){
    #passengerDeliverySection .select-card-options{gap:5px}
    #passengerDeliverySection .select-card-option{min-height:64px;border-radius:11px}
    #passengerDeliverySection .select-card-icon{width:27px;height:27px;flex-basis:27px;font-size:12px}
    #passengerDeliverySection .select-card-title{font-size:10px}
}

/* ===== [14] rideswift-delivery-card-colors-v2 ===== */
/* Stronger colour treatment for delivery selector cards, matching the booking dashboard. */
#passengerDeliverySection .delivery-package-parcel{color:#ffe27a!important;background:linear-gradient(145deg,rgba(245,190,40,.34),rgba(112,73,7,.28))!important;border-color:rgba(255,214,74,.75)!important}
#passengerDeliverySection .delivery-package-food{color:#ff91a3!important;background:linear-gradient(145deg,rgba(224,38,73,.34),rgba(91,9,29,.30))!important;border-color:rgba(255,82,115,.72)!important}
#passengerDeliverySection .delivery-package-medicine{color:#75edff!important;background:linear-gradient(145deg,rgba(6,182,212,.32),rgba(5,67,82,.30))!important;border-color:rgba(76,226,246,.70)!important}
#passengerDeliverySection .delivery-package-grocery{color:#75f09b!important;background:linear-gradient(145deg,rgba(22,163,74,.34),rgba(6,78,44,.30))!important;border-color:rgba(74,222,128,.70)!important}
#passengerDeliverySection .delivery-package-documents{color:#82b8ff!important;background:linear-gradient(145deg,rgba(37,99,235,.34),rgba(18,47,109,.30))!important;border-color:rgba(96,165,250,.70)!important}
#passengerDeliverySection .delivery-package-fragile{color:#ffc078!important;background:linear-gradient(145deg,rgba(234,88,12,.34),rgba(108,42,7,.30))!important;border-color:rgba(251,146,60,.72)!important}
#passengerDeliverySection .delivery-package-other{color:#d7a7ff!important;background:linear-gradient(145deg,rgba(147,51,234,.34),rgba(70,25,112,.30))!important;border-color:rgba(192,132,252,.70)!important}
#passengerDeliverySection .delivery-payment-cash{color:#ffe27a!important;background:linear-gradient(145deg,rgba(245,190,40,.36),rgba(111,73,6,.30))!important;border-color:rgba(255,214,74,.78)!important}
#passengerDeliverySection .delivery-payment-airtel-money{color:#ff7f9b!important;background:linear-gradient(145deg,rgba(201,0,44,.38),rgba(92,7,30,.30))!important;border-color:rgba(255,58,105,.78)!important}
#passengerDeliverySection .delivery-payment-mtn-momo{color:#ffe15a!important;background:linear-gradient(145deg,rgba(234,179,8,.36),rgba(102,76,4,.30))!important;border-color:rgba(250,204,21,.78)!important}
#passengerDeliverySection .delivery-payment-zamtel-money{color:#72f2a0!important;background:linear-gradient(145deg,rgba(22,163,74,.36),rgba(6,78,44,.30))!important;border-color:rgba(74,222,128,.75)!important}
#passengerDeliverySection .delivery-package-card .select-card-icon,#passengerDeliverySection .delivery-payment-card .select-card-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#passengerDeliverySection .delivery-package-card:hover,#passengerDeliverySection .delivery-payment-card:hover{filter:brightness(1.12);transform:translateY(-1px)}
#passengerDeliverySection .delivery-package-card.selected,#passengerDeliverySection .delivery-payment-card.selected{filter:brightness(1.14);transform:translateY(-1px);box-shadow:0 0 0 1px currentColor,0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)!important}

/* ===== [15] rideswift-delivery-booking-layout-v1 ===== */
/* =========================================================
   DELIVERY BOOKING — MATCH THE BOOKING DASHBOARD CARD LAYOUT
   Keep all existing IDs/JS hooks intact; only rearrange the UI.
   ========================================================= */

/* The delivery form follows the same visual hierarchy as the
   passenger booking form: route -> option cards -> details. */
#passengerDeliverySection .passenger-delivery-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:start !important;
}

/* Route fields first, then package/payment card rows, then recipient
   and package-detail fields. */
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPickup){
    grid-column:1 / -1 !important;
    order:1 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryDestination){
    grid-column:1 / -1 !important;
    order:2 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPackageType){
    grid-column:1 / -1 !important;
    order:3 !important;
    min-width:0 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPayment){
    grid-column:1 / -1 !important;
    order:4 !important;
    min-width:0 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryRecipient){
    order:5 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryRecipientPhone){
    order:6 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryWeight){
    order:7 !important;
}
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryDescription){
    order:8 !important;
}

/* Full-width selector rows, just like Vehicle Type and Payment Method
   on the booking dashboard. */
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPackageType) > label,
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPayment) > label{
    margin-bottom:6px !important;
    display:block !important;
    font-size:11px !important;
    font-weight:800 !important;
    color:rgba(255,255,255,.68) !important;
}

/* Package type cards: 4 per row on desktop/mobile, with the remaining
   choices wrapping cleanly instead of being squeezed into half-width. */
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:5px 0 0 !important;
}
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-option{
    width:100% !important;
    min-width:0 !important;
    min-height:60px !important;
    height:60px !important;
    padding:5px 4px !important;
    border-radius:11px !important;
    gap:3px !important;
    box-sizing:border-box !important;
}
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-icon{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    font-size:11px !important;
    border-radius:7px !important;
}
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-text{
    min-width:0 !important;
    width:100% !important;
    overflow:hidden !important;
    text-align:center !important;
}
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-title{
    display:block !important;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
#passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-value{
    display:none !important;
}

/* Payment cards: one clean full-width row, matching the booking
   dashboard's separate payment-method row. */
#passengerDeliverySection #passengerDeliveryPayment + .select-card-options{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:5px 0 0 !important;
}
#passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-option{
    width:100% !important;
    min-width:0 !important;
    min-height:56px !important;
    height:56px !important;
    padding:5px 4px !important;
    border-radius:11px !important;
    box-sizing:border-box !important;
}
#passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
    font-size:11px !important;
    border-radius:7px !important;
}
#passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-title{
    font-size:10px !important;
    line-height:1.1 !important;
    text-align:center !important;
}
#passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-value{
    display:none !important;
}

/* Keep the lower details compact and aligned after the selector rows. */
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryRecipient) input,
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryRecipientPhone) input,
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryWeight) input,
#passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryDescription) input{
    min-height:40px !important;
    box-sizing:border-box !important;
}

/* Small screens: preserve the booking-dashboard feel without making
   the package/payment cards tiny. */
@media(max-width:600px){
    #passengerDeliverySection .passenger-delivery-grid{
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
    }
    #passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPickup),
    #passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryDestination),
    #passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPackageType),
    #passengerDeliverySection .passenger-delivery-grid > div:has(#passengerDeliveryPayment){
        grid-column:1 / -1 !important;
    }
    #passengerDeliverySection #passengerDeliveryPackageType + .select-card-options{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:5px !important;
    }
    #passengerDeliverySection #passengerDeliveryPayment + .select-card-options{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:5px !important;
    }
    #passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-option{
        min-height:58px !important;
        height:58px !important;
        padding:4px 2px !important;
    }
    #passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-option{
        min-height:54px !important;
        height:54px !important;
        padding:4px 2px !important;
    }
}

@media(max-width:390px){
    #passengerDeliverySection #passengerDeliveryPackageType + .select-card-options,
    #passengerDeliverySection #passengerDeliveryPayment + .select-card-options{
        gap:4px !important;
    }
    #passengerDeliverySection #passengerDeliveryPackageType + .select-card-options .select-card-title,
    #passengerDeliverySection #passengerDeliveryPayment + .select-card-options .select-card-title{
        font-size:10px !important;
    }
}

/* ===== [16] rideswift-service-tab-colors-v1 ===== */
/* Distinct brand colours for Ride and Delivery service buttons. */
#bookRideSection .booking-service-tab#bookingServiceRide{
    color:#8fc9ff;
    background:linear-gradient(145deg,rgba(37,99,235,.13),rgba(14,55,112,.06));
    border-color:rgba(96,165,250,.24);
}
#bookRideSection .booking-service-tab#bookingServiceRide .booking-service-tab-icon{
    background:rgba(37,99,235,.18);
    color:#60a5fa;
}
#bookRideSection .booking-service-tab#bookingServiceRide.active{
    color:#eaf5ff;
    background:linear-gradient(145deg,rgba(37,99,235,.30),rgba(14,72,148,.13));
    border-color:rgba(96,165,250,.68);
    box-shadow:0 8px 22px rgba(37,99,235,.16),inset 0 1px 0 rgba(255,255,255,.07);
}
#bookRideSection .booking-service-tab#bookingServiceRide.active .booking-service-tab-icon{
    background:rgba(59,130,246,.28);
    color:#93c5fd;
}
#bookRideSection .booking-service-tab#bookingServiceRide small{color:#82a8ca}
#bookRideSection .booking-service-tab#bookingServiceRide.active small{color:#b7d8f5}

#bookRideSection .booking-service-tab#bookingServiceDelivery{
    color:#ffbd72;
    background:linear-gradient(145deg,rgba(234,88,12,.13),rgba(108,42,7,.06));
    border-color:rgba(251,146,60,.25);
}
#bookRideSection .booking-service-tab#bookingServiceDelivery .booking-service-tab-icon{
    background:rgba(234,88,12,.18);
    color:#fb923c;
}
#bookRideSection .booking-service-tab#bookingServiceDelivery.active{
    color:#fff3e7;
    background:linear-gradient(145deg,rgba(234,88,12,.32),rgba(120,48,8,.14));
    border-color:rgba(251,146,60,.72);
    box-shadow:0 8px 22px rgba(234,88,12,.16),inset 0 1px 0 rgba(255,255,255,.07);
}
#bookRideSection .booking-service-tab#bookingServiceDelivery.active .booking-service-tab-icon{
    background:rgba(249,115,22,.28);
    color:#fdba74;
}
#bookRideSection .booking-service-tab#bookingServiceDelivery small{color:#c99b73}
#bookRideSection .booking-service-tab#bookingServiceDelivery.active small{color:#ffd1a8}

@media(max-width:520px){
    #bookRideSection .booking-service-tab{
        padding:10px 9px;
        gap:8px;
    }
    #bookRideSection .booking-service-tab-icon{
        width:35px;
        height:35px;
        flex-basis:35px;
    }
}

/* ===== [17] rideswift-ui-ux-cleanup-v1 ===== */
        /* RideSwift UI/UX cleanup — overrides only; preserves existing app behaviour. */
        :root {
            --rs-accent: #d4af37;
            --rs-accent-soft: rgba(212,175,55,.14);
            --rs-surface: rgba(17,25,40,.94);
            --rs-border: rgba(255,255,255,.10);
            --rs-muted: #a8b4c7;
            --rs-radius: 18px;
        }
        html { scroll-behavior: smooth; }
        body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        button, input, select, textarea { font: inherit; }
        button { -webkit-tap-highlight-color: transparent; }
        button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
        textarea:focus-visible { outline: 3px solid rgba(212,175,55,.72); outline-offset: 2px; }
        .app-container { width: min(100%, 1180px); margin-inline: auto; }
        #authSection.glass-card {
            width: min(100%, 480px);
            margin: clamp(12px, 5vh, 54px) auto 30px;
            padding: clamp(22px, 4vw, 38px);
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 26px;
            background: linear-gradient(155deg, rgba(22,31,48,.97), rgba(10,17,29,.97));
            box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045);
            backdrop-filter: blur(18px);
        }
        #authSection .brand { text-align: center; margin-bottom: 26px; }
        #authSection .brand .logo {
            width: 68px; height: 68px; margin: 0 auto 13px;
            display: grid; place-items: center; border-radius: 20px;
            font-size: 34px; background: linear-gradient(145deg, #f3df9b, #b78b19);
            box-shadow: 0 12px 28px rgba(212,175,55,.2);
        }
        #authSection .brand h1 {
            font-size: clamp(27px, 5vw, 34px); line-height: 1.15;
            letter-spacing: -.8px; font-weight: 850; color: #fff;
        }
        #authSection .brand p { margin-top: 8px; color: #aeb9c9; font-size: 13px; }
        #authSection .tabs {
            display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
            padding: 5px; margin: 0 0 25px; border-radius: 14px;
            background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06);
        }
        #authSection .tab {
            min-height: 43px; border: 0; border-radius: 10px; color: #aeb9c9;
            background: transparent; font-weight: 750; cursor: pointer;
            transition: background .18s ease, color .18s ease, transform .18s ease;
        }
        #authSection .tab.active {
            color: #1a1609; background: linear-gradient(135deg,#f3df9b,#d4af37);
            box-shadow: 0 4px 14px rgba(212,175,55,.16);
        }
        #authSection .input-group { margin: 0 0 17px; min-width: 0; }
        #authSection .input-group > label {
            display: block; margin: 0 0 8px; color: #dbe3ef;
            font-size: 12px; font-weight: 750; letter-spacing: .2px;
        }
        #authSection .input-group input,
        #authSection .input-group select,
        #authSection .input-group textarea {
            display: block; width: 100%; min-width: 0; min-height: 48px;
            padding: 12px 14px; color: #f8fafc; background: rgba(4,10,19,.62);
            border: 1px solid rgba(170,190,220,.20); border-radius: 12px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }
        #authSection .input-group input::placeholder,
        #authSection .input-group textarea::placeholder { color: #77869b; opacity: 1; }
        #authSection .input-group input:focus,
        #authSection .input-group select:focus,
        #authSection .input-group textarea:focus {
            outline: none; border-color: #d4af37;
            background: rgba(4,10,19,.88); box-shadow: 0 0 0 3px rgba(212,175,55,.12);
        }
        #authSection .password-wrapper { position: relative; display: flex; align-items: center; }
        #authSection .password-wrapper input { padding-right: 49px; }
        #authSection .password-toggle {
            position: absolute; right: 5px; top: 5px; bottom: 5px; width: 39px; transform: none;
            display: grid; place-items: center; color: #aeb9c9;
            background: transparent; border: 0; border-radius: 9px; cursor: pointer;
        }
        #authSection .password-toggle:hover { color: #f3df9b; background: rgba(255,255,255,.06); }
        #authSection .primary-btn {
            width: 100%; min-height: 49px; display: flex; align-items: center;
            justify-content: center; gap: 9px; margin-top: 8px; padding: 12px 18px;
            border: 0; border-radius: 13px; color: #191507;
            background: linear-gradient(135deg,#f3df9b,#d4af37);
            font-weight: 850; cursor: pointer;
            box-shadow: 0 9px 22px rgba(212,175,55,.15);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        #authSection .primary-btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 26px rgba(212,175,55,.22); }
        #authSection .primary-btn:active { transform: translateY(0); }
        #authSection .primary-btn:disabled { opacity: .68; cursor: wait; transform: none; }
        #authSection select option { color: #f8fafc; background: #111827; }
        #registerBox .merchant-registration-card,
        #registerBox .driver-registration-card { border-radius: 16px; }
        /* Make shared action controls consistent without overriding component colours. */
        .primary-btn, .secondary-btn, .action-btn, .icon-btn, .nav-item, .card, .stat-card {
            transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
        }
        .card, .stat-card, .dashboard-card, .content-card, .panel-card {
            min-width: 0; overflow-wrap: anywhere;
        }
        input, select, textarea { max-width: 100%; }
        table { max-width: 100%; }
        @media (max-width: 600px) {
            body { padding-bottom: max(82px, env(safe-area-inset-bottom)); }
            #authSection.glass-card {
                margin: 12px auto 24px; padding: 23px 18px;
                border-radius: 22px; width: 100%;
            }
            #authSection .brand { margin-bottom: 22px; }
            #authSection .brand .logo { width: 60px; height: 60px; border-radius: 17px; font-size: 30px; }
            #authSection .input-group { margin-bottom: 15px; }
            #authSection .input-group input, #authSection .input-group select { min-height: 47px; font-size: 16px; }
            #authSection .primary-btn { min-height: 49px; }
            .app-container { width: 100%; }
            table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }
    

/* ===== [18] rideswift-auth-layout-fix-v2 ===== */
        /* Guests must only see the login/register panel. The dashboard DOM may still be rendered,
           but it must never leak authenticated controls into the guest view. */
        body.is-guest { min-height: 100svh; padding: 0 18px 28px; }
        body.is-guest .app-container {
            width: min(100%, 460px); margin: clamp(24px, 8vh, 76px) auto 0;
            display: flex; flex-direction: column; align-items: stretch;
        }
        body.is-guest .app-container > :not(#authSection) { display: none !important; }
        body.is-guest #authSection {
            display: block !important; width: 100%; max-width: 460px;
            margin: 0 auto; padding: clamp(24px, 5vw, 38px);
        }
        body.is-guest #authSection.hidden { display: block !important; }
        body.is-guest #authSection .brand { text-align: center; }
        body.is-guest #authSection .brand .logo { margin-inline: auto; }
        body.is-guest #authSection .input-group input,
        body.is-guest #authSection .input-group select,
        body.is-guest #authSection .input-group textarea {
            color: #f8fafc !important;
            background: rgba(5,11,21,.88) !important;
            border: 1px solid rgba(255,255,255,.16) !important;
            border-radius: 12px !important;
            box-shadow: none !important;
        }
        body.is-guest #authSection .input-group input:-webkit-autofill,
        body.is-guest #authSection .input-group input:-webkit-autofill:hover,
        body.is-guest #authSection .input-group input:-webkit-autofill:focus {
            -webkit-text-fill-color: #f8fafc;
            transition: background-color 99999s ease-in-out 0s;
            box-shadow: 0 0 0 1000px #0b1422 inset !important;
        }
        body.is-guest #authSection .password-wrapper .password-toggle {
            z-index: 2; right: 5px; top: 5px; bottom: 5px; width: 38px; transform: none !important; height: auto;
            background: transparent !important; color: #9eacc0 !important;
        }
        body.is-guest #authSection .password-wrapper input { padding-right: 48px !important; }
        body.is-guest #authSection .tabs { margin-bottom: 24px; }
        body.is-guest #authSection .primary-btn { color: #171304 !important; }
        body.is-guest .bg-animation { pointer-events: none; }
        body.is-authenticated #authSection { display: none !important; }
        @media (max-width: 600px) {
            body.is-guest { padding: 16px 14px 24px; }
            body.is-guest .app-container { margin-top: 4vh; }
            body.is-guest #authSection { padding: 24px 18px; }
        }
    

/* ===== [19] rideswift-merchant-delivery-pricing-v1 ===== */
.merchant-price-box{margin-top:12px;padding:15px 16px;border-radius:16px;}
.merchant-price-box.show{display:block;animation:merchantPriceIn .2s ease}
@keyframes merchantPriceIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.merchant-price-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.merchant-price-label{display:block;color:rgba(255,255,255,.64);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.merchant-price-total{display:block;margin-top:4px;line-height:1.1;font-weight:900;}
.merchant-price-distance{font-size:12px;color:#dce8f2;font-weight:800}
.merchant-price-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}
.merchant-price-breakdown div{padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.merchant-price-breakdown small{display:block;color:rgba(255,255,255,.60);font-size:11px}
.merchant-price-breakdown strong{display:block;margin-top:2px;font-size:11px;color:#fff}
.merchant-price-note{margin:9px 0 0;color:rgba(255,255,255,.60);font-size:11px;line-height:1.45}
#merchantFee{width:100%;font-weight:900;font-size:20px;color:#06130d!important;background:linear-gradient(135deg,#00ff88,#72ffb5)!important;border:2px solid #00ff88!important;border-radius:14px!important;box-shadow:0 0 0 3px rgba(0,255,136,.10),0 8px 24px rgba(0,255,136,.18)!important;padding:13px 14px!important;text-align:center!important;letter-spacing:.02em;outline:none!important}
#merchantFee::placeholder{color:rgba(6,19,13,.55)}
.merchant-form-grid .input-group:has(#merchantFee) label{color:#00ff88;font-weight:900}
.merchant-price-box{border:2px solid rgba(0,255,136,.55);background:linear-gradient(135deg,rgba(0,255,136,.14),rgba(0,212,255,.08));box-shadow:0 0 0 4px rgba(0,255,136,.06),0 12px 30px rgba(0,0,0,.18)}
.merchant-price-total{font-size:32px;color:#00ff88;text-shadow:0 0 16px rgba(0,255,136,.35);padding:5px 10px;border-radius:10px;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.22)}
/* MERCHANT DELIVERY SELECT CARDS — compact, aligned and dashboard-friendly */
.merchant-form-grid .input-group:has(#merchantPackageType),
.merchant-form-grid .input-group:has(#merchantPayment){grid-column:1/-1}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-options,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-options{display:grid;gap:8px;margin-top:7px}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-options{grid-template-columns:repeat(5,minmax(0,1fr))}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-option{min-height:58px;padding:8px 9px;border-radius:13px;gap:8px;overflow:hidden}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option .select-card-icon,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-option .select-card-icon{width:31px;height:31px;flex:0 0 31px;border-radius:9px;font-size:14px}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option .select-card-title,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-option .select-card-title{font-size:11px;white-space:normal}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option .select-card-value,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-option .select-card-value{display:none}
.merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option .select-card-check,
.merchant-form-grid .input-group:has(#merchantPayment) .select-card-option .select-card-check{width:17px;height:17px;font-size:10px;flex:0 0 17px}
/* Keep the price visible even before a route is selected; it changes to the calculated amount once distance is known. */
.merchant-price-box{display:block!important;opacity:1;visibility:visible;min-height:108px}
.merchant-price-box.pending{border-color:rgba(0,212,255,.3);background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(255,255,255,.025))}
.merchant-price-box.pending .merchant-price-total{color:#dce8f2;text-shadow:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.merchant-price-box.pending .merchant-price-label{color:#79dfff}
@media(max-width:760px){
 .merchant-form-grid .input-group:has(#merchantPackageType) .select-card-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .merchant-form-grid .input-group:has(#merchantPayment) .select-card-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .merchant-form-grid .input-group:has(#merchantPackageType) .select-card-option,
 .merchant-form-grid .input-group:has(#merchantPayment) .select-card-option{min-height:54px}
}
@media(max-width:600px){.merchant-price-breakdown{grid-template-columns:1fr 1fr}.merchant-price-breakdown div:last-child{grid-column:1/-1}#merchantFee{font-size:22px;padding:14px!important}}

/* ===== [20] rideswift-messaging-ui-v24 ===== */
.rideswift-message-overlay{position:fixed;inset:0;z-index:12000;background:rgba(2,8,14,.72);backdrop-filter:blur(12px);display:flex;justify-content:flex-end}.rideswift-message-overlay.hidden{display:none!important}.rideswift-message-panel{width:min(440px,100%);height:100%;background:linear-gradient(180deg,#0b1621,#071018);border-left:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.35)}.rideswift-message-head{padding:17px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:10px}.rideswift-message-title{display:flex;align-items:center;gap:10px;color:#fff}.rideswift-message-title i{color:#16c6c8}.rideswift-message-title h3{margin:0;font-size:18px}.rideswift-message-actions{display:flex;gap:7px}.rideswift-message-actions button,.rideswift-message-send{border:1px solid rgba(255,255,255,.08);background:#111e29;color:#dce7ef;border-radius:11px;cursor:pointer}.rideswift-message-actions button{width:38px;height:38px}.rideswift-message-context{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(22,198,200,.045)}.rideswift-message-context small{display:block;color:#718092;font-size:11px}.rideswift-message-context strong{color:#e8f4f5;font-size:13px}.rideswift-message-list{flex:1;overflow:auto;padding:14px}.rideswift-message-empty{text-align:center;color:#718092;padding:45px 20px;font-size:12px}.rideswift-msg-row{display:flex;margin:7px 0}.rideswift-msg-row.mine{justify-content:flex-end}.rideswift-msg-bubble{max-width:82%;padding:10px 12px;border-radius:15px;background:#132230;border:1px solid rgba(255,255,255,.06);color:#dbe7ef;font-size:12px;line-height:1.45}.rideswift-msg-row.mine .rideswift-msg-bubble{background:rgba(22,198,200,.13);border-color:rgba(22,198,200,.2)}.rideswift-msg-time{display:block;margin-top:5px;color:#6f8190;font-size:11px}.rideswift-message-composer{padding:11px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:8px;background:#09131c}.rideswift-message-composer textarea{flex:1;resize:none;min-height:44px;max-height:110px;border:1px solid rgba(255,255,255,.08);background:#101c27;color:#fff;border-radius:13px;padding:11px;font:inherit;font-size:12px;outline:none}.rideswift-message-composer textarea:focus{border-color:rgba(22,198,200,.45)}.rideswift-message-send{width:48px;background:linear-gradient(135deg,#16c6c8,#148ea1);border:0;color:#fff}.rideswift-message-inbox{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:7px;overflow:auto}.rideswift-convo-chip{flex:0 0 auto;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#101b26;color:#cbd8e1;font-size:11px;cursor:pointer}.rideswift-convo-chip.active{border-color:rgba(22,198,200,.35);background:rgba(22,198,200,.08);color:#fff}.rideswift-message-badge{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef6b7b;color:#fff;font-size:11px;display:grid;place-items:center;border:2px solid #071018}.rideswift-message-badge.hidden{display:none!important}

/* ===== [21] unnamed ===== */
@media(max-width:380px){.unified-nav-card{top:6px;left:6px;right:6px;padding:7px 9px}.unified-nav-status strong{font-size:12px}.unified-nav-live{font-size:10px;padding:3px 6px}.unified-nav-next{padding:6px 7px}.unified-nav-next strong{font-size:12px}.unified-nav-point strong{font-size:11px}.unified-nav-point small{font-size:10px}}

/* RIDER DASHBOARD TOP COLOR ACCENTS */
#riderDashboard .dashboard-header{
    position:relative!important;
    
    
    
    
    box-shadow:0 10px 30px rgba(0,0,0,.16)!important;
}
#riderDashboard .dashboard-header h2{color:#fff!important;text-shadow:0 0 18px rgba(24,198,216,.12)!important}
#riderDashboard .dashboard-header p{color:rgba(255,255,255,.60)!important}
#riderDashboard .dashboard-header .role-badge{background:rgba(215,180,58,.12)!important;border-color:rgba(215,180,58,.28)!important;color:#f4d35e!important}
#riderDashboard .dashboard-header .logout-btn{
    background:linear-gradient(135deg,rgba(239,68,68,.10),rgba(255,255,255,.035))!important;
    border:1px solid rgba(239,68,68,.22)!important;color:#ffb0b0!important;
}
#riderDashboard .rider-insights .premium-panel:first-child{
    
    border-color:rgba(24,198,216,.20)!important;
    
}
#riderDashboard .rider-insights .premium-panel:nth-child(2){
    background:linear-gradient(135deg,rgba(168,139,250,.09),rgba(8,17,24,.96) 72%)!important;
    border-color:rgba(168,139,250,.18)!important;
    box-shadow:inset 3px 0 0 rgba(168,139,250,.75),0 12px 32px rgba(0,0,0,.16)!important;
}
#riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header h4{color:#eafcff!important}
#riderDashboard .rider-insights .premium-panel:nth-child(2) .premium-panel-header h4{color:#f0ebff!important}
#riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header h4 i{color:#18c6d8!important}
#riderDashboard .rider-insights .premium-panel:nth-child(2) .premium-panel-header h4 i{color:#a88bfa!important}
#riderDashboard .ride-status-strip{
    background:linear-gradient(135deg,rgba(24,198,216,.13),rgba(24,198,216,.045))!important;
    border-color:rgba(24,198,216,.20)!important;
}
#riderDashboard .ride-status-strip .status-icon{background:rgba(24,198,216,.16)!important;color:#18c6d8!important}
#riderDashboard .premium-cancel-ride-btn{background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(239,68,68,.06))!important}
#riderDashboard .rewards-progress{background:rgba(255,255,255,.07)!important}
#riderDashboard .rewards-progress span{background:linear-gradient(90deg,#a88bfa,#18c6d8,#00ff88)!important}
#riderDashboard .rewards-meta span:last-child{color:#d8c9ff!important}
@media(max-width:600px){
    
    #riderDashboard .rider-insights .premium-panel{border-radius:17px!important}
}

/* ========================================
   RIDER DASHBOARD - PREMIUM COLOR PASS
   ======================================== */

#riderDashboard .dashboard-header h2{color:#fff;}
#riderDashboard .dashboard-header h2 span{background:linear-gradient(90deg,#00d4ff,#a99cff);-webkit-background-clip:text;background-clip:text;color:transparent;}
#riderDashboard .role-badge{color:#ffd93d;}
#riderDashboard .rider-premium-hero{
    border-color:rgba(0,212,255,.24);
    background:radial-gradient(circle at 8% 100%,rgba(0,212,255,.13),transparent 35%),radial-gradient(circle at 92% 15%,rgba(168,139,250,.13),transparent 32%),linear-gradient(135deg,rgba(0,212,255,.09),rgba(108,92,231,.07),rgba(255,255,255,.025));
}
#riderDashboard .premium-eyebrow{color:#00d4ff;}
#riderDashboard .premium-level{border-color:rgba(255,217,61,.25);background:linear-gradient(135deg,rgba(255,217,61,.09),rgba(255,255,255,.025));box-shadow:0 8px 24px rgba(255,217,61,.06);}
#riderDashboard .premium-level strong{color:#ffd93d;}
#riderDashboard .rider-premium-card{position:relative;overflow:hidden;border-color:rgba(255,255,255,.10);}
#riderDashboard .rider-premium-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--card-accent,#00d4ff);opacity:.9;}
#riderDashboard .rider-premium-card:nth-child(1){--card-accent:#00d4ff;background:linear-gradient(145deg,rgba(0,212,255,.09),rgba(255,255,255,.018));border-color:rgba(0,212,255,.20);}
#riderDashboard .rider-premium-card:nth-child(2){--card-accent:#00ff88;background:linear-gradient(145deg,rgba(0,255,136,.08),rgba(255,255,255,.018));border-color:rgba(0,255,136,.18);}
#riderDashboard .rider-premium-card:nth-child(3){--card-accent:#ffd93d;background:linear-gradient(145deg,rgba(255,217,61,.08),rgba(255,255,255,.018));border-color:rgba(255,217,61,.18);}
#riderDashboard .rider-premium-card:nth-child(4){--card-accent:#a78bfa;background:linear-gradient(145deg,rgba(167,139,250,.09),rgba(255,255,255,.018));border-color:rgba(167,139,250,.20);}
#riderDashboard .rider-premium-card:nth-child(1) .premium-card-icon{background:rgba(0,212,255,.13);color:#00d4ff;}
#riderDashboard .rider-premium-card:nth-child(2) .premium-card-icon{background:rgba(0,255,136,.13);color:#00ff88;}
#riderDashboard .rider-premium-card:nth-child(3) .premium-card-icon{background:rgba(255,217,61,.13);color:#ffd93d;}
#riderDashboard .rider-premium-card:nth-child(4) .premium-card-icon{background:rgba(167,139,250,.14);color:#a78bfa;}
#riderDashboard .rider-premium-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.18);}
#riderDashboard .rider-insights .premium-panel:first-child{border-color:rgba(0,212,255,.28);}
#riderDashboard .rider-insights .premium-panel:last-child{border-color:rgba(167,139,250,.28);background:linear-gradient(145deg,rgba(167,139,250,.075),rgba(255,255,255,.018));box-shadow:inset 3px 0 0 #a78bfa;}
#riderDashboard .rider-insights .premium-panel:first-child h4{color:#b9f5ff;}
#riderDashboard .rider-insights .premium-panel:last-child h4{color:#d7c8ff;}
#riderDashboard .ride-status-strip{background:rgba(0,212,255,.075);border-color:rgba(0,212,255,.18);}
#riderDashboard .ride-status-strip .status-icon{background:rgba(0,212,255,.15);color:#00d4ff;}
#riderDashboard .rewards-progress{background:rgba(167,139,250,.10);}
#riderDashboard .rewards-progress span{background:linear-gradient(90deg,#a78bfa,#00d4ff,#00ff88);}


/* ============================================================
   RIDESWIFT RAISED CARDS + PILLS
   Applied as a visual override to the current UI.
   ============================================================ */
.rider-premium-card,
.premium-panel,
.ride-item,
.book-ride-card,
.dashboard-stats-section,
.stat-card,
.driver-welcome-card,
.driver-account-gate-card,
.driver-map-card,
.driver-my-ride-card,
.driver-stat-card,
.active-ride-panel,
.accepted-driver-card,
.passenger-pin-card,
.profile-card,
.driver-card-selector,
.driver-choice-card,
.driver-detail-card,
.driver-renew-network-card,
.driver-payment-pill,
.driver-gate-pill,
.driver-map-card,
.map-status-pill,
.ride-status-strip,
.rider-premium-hero,
.premium-level,
.unified-nav-card {
    position: relative;
    box-shadow:
        0 12px 26px rgba(0,0,0,.34),
        0 3px 8px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.12) !important;
}

.rider-premium-card::after,
.premium-panel::after,
.ride-item::after,
.book-ride-card::after,
.dashboard-stats-section::after,
.stat-card::after,
.driver-welcome-card::after,
.driver-account-gate-card::after,
.driver-map-card::after,
.driver-my-ride-card::after,
.driver-stat-card::after,
.active-ride-panel::after,
.accepted-driver-card::after,
.passenger-pin-card::after,
.profile-card::after,
.rider-premium-hero::after {
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.075),
        transparent 24%,
        transparent 76%,
        rgba(0,0,0,.12)
    );
}

.rider-premium-card,
.driver-renew-network-card,
.driver-card-selector,
.driver-choice-card {
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.rider-premium-card:hover,
.driver-renew-network-card:hover,
.driver-card-selector:hover,
.driver-choice-card:hover,
.ride-item:hover,
.stat-card:hover,
.driver-my-ride-card:hover {
    transform:translateY(-4px);
    box-shadow:
        0 17px 32px rgba(0,0,0,.42),
        0 5px 12px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.driver-gate-pill,
.driver-payment-pill,
.driver-choice-help,
.driver-status-pill,
.map-status-pill,
.ride-status,
.filter-btn,
.role-badge,
.notification-badge,
.active-ride-badge,
.driver-online-switch,
.driver-icon-btn,
.map-btn,
.section-label {
    box-shadow:
        0 5px 12px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    border-color:rgba(255,255,255,.14) !important;
}

.filter-btn:hover,
.map-btn:hover,
.driver-gate-pill:hover,
.driver-payment-pill:hover {
    transform:translateY(-2px);
    box-shadow:
        0 8px 16px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.lost-item-action {
    border-color:rgba(255,193,7,.30) !important;
    color:#ffd45a !important;
    background:linear-gradient(135deg,rgba(255,193,7,.13),rgba(255,255,255,.025)) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.lost-item-action:hover {
    transform:translateY(-2px);
    border-color:rgba(255,193,7,.55) !important;
    box-shadow:0 10px 20px rgba(0,0,0,.40), 0 0 18px rgba(255,193,7,.08) !important;
}

/* Lost-item reporting modal */
.lost-item-modal {
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    padding:18px;
}
.lost-item-modal.hidden { display:none !important; }
.lost-item-backdrop {
    position:absolute;
    inset:0;
    background:rgba(2,7,12,.76);
    backdrop-filter:blur(8px);
}
.lost-item-dialog {
    position:relative;
    z-index:1;
    width:min(560px,100%);
    max-height:min(90vh,760px);
    overflow:auto;
    padding:24px;
    border:1px solid rgba(255,193,7,.22);
    border-radius:24px;
    background:
        radial-gradient(circle at 0 0,rgba(0,212,255,.10),transparent 35%),
        linear-gradient(145deg,rgba(15,24,34,.98),rgba(7,12,18,.98));
    box-shadow:
        0 28px 70px rgba(0,0,0,.60),
        0 8px 24px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.lost-item-close {
    position:absolute;
    right:14px;
    top:14px;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.lost-item-heading {
    display:flex;
    align-items:center;
    gap:14px;
    padding-right:42px;
    margin-bottom:18px;
}
.lost-item-icon {
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#ffd34f;
    background:linear-gradient(145deg,rgba(255,193,7,.24),rgba(255,193,7,.07));
    border:1px solid rgba(255,193,7,.30);
    box-shadow:0 10px 20px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10);
}
.lost-item-heading h3 { margin:3px 0 4px; font-size:20px; }
.lost-item-heading p { margin:0; color:rgba(255,255,255,.58); font-size:12px; line-height:1.5; }
.lost-item-ride-ref {
    margin-bottom:15px;
    padding:10px 12px;
    border-radius:12px;
    color:#70e8ff;
    background:rgba(0,212,255,.08);
    border:1px solid rgba(0,212,255,.18);
    box-shadow:0 6px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);
    font-size:12px;
}
.lost-item-field { margin:0 0 14px; }
.lost-item-field label {
    display:block;
    margin:0 0 7px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.82);
}
.lost-item-field label span { color:rgba(255,255,255,.60); font-weight:500; }
.lost-item-field input,
.lost-item-field textarea {
    width:100%;
    border:1px solid rgba(255,255,255,.11);
    border-radius:13px;
    padding:12px 13px;
    color:#fff;
    background:rgba(255,255,255,.045);
    outline:none;
    resize:vertical;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 5px 12px rgba(0,0,0,.20);
}
.lost-item-field input:focus,
.lost-item-field textarea:focus {
    border-color:rgba(0,212,255,.42);
    box-shadow:0 0 0 3px rgba(0,212,255,.08),0 7px 16px rgba(0,0,0,.24);
}
.lost-item-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}
.lost-item-message {
    margin-top:14px;
    padding:11px 13px;
    border-radius:12px;
    font-size:12px;
}
.lost-item-message.hidden { display:none; }
.lost-item-message.success {
    color:#7ef7b2;
    background:rgba(34,197,94,.10);
    border:1px solid rgba(34,197,94,.24);
}
.lost-item-message.error {
    color:#ff8d9a;
    background:rgba(239,68,68,.10);
    border:1px solid rgba(239,68,68,.24);
}
@media (max-width:600px) {
    .lost-item-dialog { padding:18px; border-radius:20px; }
    .lost-item-heading h3 { font-size:18px; }
    .lost-item-actions { display:grid; grid-template-columns:1fr 1.3fr; }
    .lost-item-actions button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .rider-premium-card,
    .driver-renew-network-card,
    .driver-card-selector,
    .driver-choice-card,
    .ride-item,
    .stat-card {
        transition:none !important;
    }
    .rider-premium-card:hover,
    .driver-renew-network-card:hover,
    .driver-card-selector:hover,
    .driver-choice-card:hover,
    .ride-item:hover,
    .stat-card:hover {
        transform:none !important;
    }
}


/* =========================================================
   RIDESWIFT MOBILE RIDE-HAILING HOME — FINAL FINE TUNE
   Map-first, compact, colorful and thumb-friendly.
   ========================================================= */
.rider-mobile-brand{display:none}
.mobile-map-quick-actions{display:none}

@media (max-width:600px){
  body{overflow-x:hidden!important}
  #riderDashboard{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    max-width:100%!important;
    padding:7px 7px 98px!important;
  }
  #riderDashboard .dashboard-header{
    order:1!important;
    
    
    justify-content:space-between!important;
    
    
    
    
    
    
    
  }
  
  .rider-mobile-brand-icon{
    width:39px;height:39px;display:grid;place-items:center;border-radius:11px;
    color:#09131b;background:linear-gradient(145deg,#f5d76e,#d4af37);
    box-shadow:0 7px 18px rgba(212,175,55,.20),inset 0 1px 0 rgba(255,255,255,.4);
    font-size:18px;
  }
  .rider-mobile-brand-name{font-size:21px;font-weight:900;letter-spacing:-.045em;color:#f7f9fc;white-space:nowrap}
  .rider-mobile-brand-name span{color:#f3df9b}
  
  #riderDashboard .rider-header-actions{gap:6px!important;flex-wrap:nowrap!important}
  
  
  

  /* Put the booking experience immediately after the header. */
  #riderDashboard #bookRideSection{order:2!important;margin:0 0 10px!important;border-radius:20px!important;box-shadow:0 18px 48px rgba(0,0,0,.34)!important}
  #riderDashboard .rider-premium-hero{order:3!important;margin:0 0 10px!important;min-height:92px!important;padding:13px 14px!important}
  #riderDashboard .rider-quick-grid{order:4!important;margin:0 0 10px!important;gap:7px!important}
  #riderDashboard .rider-insights{order:5!important;margin:0 0 10px!important;gap:8px!important}
  #riderDashboard .ride-history{order:6!important;margin:0 0 10px!important}
  #riderDashboard .rider-stats-section{order:7!important;}

  /* Hero is deliberately compact on mobile so the map remains the main focus. */
  #riderDashboard .rider-premium-hero-content{gap:8px!important}
  #riderDashboard .rider-premium-hero h3{font-size:15px!important;line-height:1.15!important}
  #riderDashboard .rider-premium-hero p{font-size:11px!important;line-height:1.35!important;margin-top:3px!important}
  #riderDashboard .premium-eyebrow{font-size:10px!important;margin-bottom:3px!important}
  #riderDashboard .premium-level{min-width:108px!important;padding:8px!important;border-radius:11px!important}
  #riderDashboard .premium-level strong{font-size:11px!important}
  #riderDashboard .premium-level span{font-size:10px!important}

  /* Map */
  #riderDashboard #bookRideSection>h3{padding:10px 13px!important;font-size:13px!important}
  #riderDashboard .map-container{height:auto!important}
  #riderDashboard #rideMap{height:286px!important;min-height:286px!important}
  #riderDashboard .map-controls{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    display:flex!important;flex-direction:column!important;gap:7px!important;
    padding:8px!important;background:linear-gradient(180deg,#07131d,#081019)!important;
    border-top:1px solid rgba(24,198,216,.14)!important;
  }
  #riderDashboard .map-controls .location-info{
    order:1!important;width:100%!important;padding:9px 10px!important;border-radius:12px!important;
    display:flex!important;flex-direction:column!important;gap:2px!important;text-align:left!important;
    background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(212,175,55,.06))!important;
  }
  #riderDashboard .map-controls .location-info strong{font-size:11px!important;line-height:1.3!important}
  #riderDashboard .map-controls .location-info span{font-size:10px!important;line-height:1.25!important}

  /* Four bright utility pills like the reference design. */
  #riderDashboard .mobile-map-quick-actions{
    order:2!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px!important;
  }
  .mobile-map-quick{
    min-width:0!important;height:40px!important;padding:4px 2px!important;border-radius:11px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    background:rgba(255,255,255,.025)!important;font-size:10px!important;font-weight:800!important;line-height:1!important;
    box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
  }
  .mobile-map-quick i{font-size:12px!important}
  .mobile-map-quick.privacy{color:#28d9ff!important;border:1px solid rgba(40,217,255,.42)!important;background:linear-gradient(145deg,rgba(40,217,255,.10),rgba(40,217,255,.03))!important}
  .mobile-map-quick.support{color:#e04bff!important;border:1px solid rgba(224,75,255,.42)!important;background:linear-gradient(145deg,rgba(224,75,255,.10),rgba(224,75,255,.03))!important}
  .mobile-map-quick.location{color:#28ef91!important;border:1px solid rgba(40,239,145,.42)!important;background:linear-gradient(145deg,rgba(40,239,145,.10),rgba(40,239,145,.03))!important}
  .mobile-map-quick.demand{color:#ffd12f!important;border:1px solid rgba(255,209,47,.42)!important;background:linear-gradient(145deg,rgba(255,209,47,.10),rgba(255,209,47,.03))!important}

  /* Nearby drivers becomes a compact status strip. */
  #riderDashboard .nearby-drivers-bar{
    order:3!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;
    padding:7px 8px!important;border-radius:11px!important;min-height:34px!important;
  }
  #riderDashboard .nearby-drivers-info{width:auto!important;min-width:0!important;display:flex!important;align-items:center!important;gap:5px!important}
  #riderDashboard .nearby-drivers-info small{display:none!important}
  #riderDashboard .nearby-drivers-info span{font-size:10px!important}
  #riderDashboard .nearby-drivers-info strong{font-size:11px!important}
  #riderDashboard .nearby-drivers-bar .map-actions{width:auto!important;display:flex!important;gap:4px!important;flex-wrap:nowrap!important}
  #riderDashboard .nearby-drivers-bar .map-btn{min-height:28px!important;padding:4px 7px!important;border-radius:8px!important;font-size:10px!important}
  #riderDashboard .nearby-drivers-bar .map-btn i{font-size:10px!important}

  /* Pickup / destination controls: two compact cards. */
  #riderDashboard .map-controls>.map-actions:last-child{
    order:4!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px!important;width:100%!important;
  }
  #riderDashboard .map-controls>.map-actions:last-child .map-btn{
    min-height:34px!important;padding:4px 2px!important;border-radius:9px!important;font-size:10px!important;
  }
  #riderDashboard .map-controls>.map-actions:last-child .map-btn i{display:block!important;font-size:11px!important;margin-bottom:2px!important}

  /* Form: locations side-by-side and vehicle cards colourful. */
  #riderDashboard #bookRideForm{padding:9px 9px 11px!important;background:#071019!important}
  #riderDashboard #bookRideForm .row-2col{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  #riderDashboard #bookRideForm .input-group{margin-bottom:8px!important;min-width:0!important}
  #riderDashboard #bookRideForm .input-group label{font-size:10px!important;margin-bottom:4px!important}
  #riderDashboard #bookRideForm input,
  #riderDashboard #bookRideForm select{min-height:39px!important;padding:8px 9px!important;border-radius:10px!important;font-size:11px!important}
  #riderDashboard #bookRideForm .location-hint{font-size:10px!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  
  #riderDashboard #vehicleType + .select-card-options .select-card-option{justify-content:center!important;text-align:center!important;flex-direction:column!important;}
  #riderDashboard #vehicleType + .select-card-options .select-card-icon{flex-basis:28px!important;}
  #riderDashboard #vehicleType + .select-card-options .select-card-text{align-items:center!important;gap:1px!important}
  
  
  #riderDashboard #vehicleType + .select-card-options .select-card-check{display:none!important}
  
  #riderDashboard #paymentMethodGroup .select-card-option{justify-content:center!important;}
  #riderDashboard #paymentMethodGroup .select-card-option .select-card-icon{flex-basis:25px!important;}
  
  
  #riderDashboard #bookRideBtn{border-radius:13px!important;font-size:12px!important;margin-top:3px!important;background:linear-gradient(135deg,#ffd21a,#f0b900)!important;color:#141108!important;box-shadow:0 9px 20px rgba(255,195,0,.18),inset 0 1px 0 rgba(255,255,255,.45)!important;}

  /* Compact secondary sections after the booking experience. */
  #riderDashboard .rider-quick-grid .rider-premium-card{min-height:76px!important;padding:9px!important}
  #riderDashboard .rider-quick-grid .premium-card-icon{width:28px!important;height:28px!important;margin-bottom:5px!important}
  #riderDashboard .rider-quick-grid .rider-premium-card strong{font-size:11px!important}
  #riderDashboard .rider-quick-grid .rider-premium-card small{font-size:10px!important}
  #riderDashboard .rider-insights{grid-template-columns:1fr 1fr!important}
  #riderDashboard .premium-panel{padding:11px!important;border-radius:15px!important}
  #riderDashboard .premium-panel-header{margin-bottom:8px!important}
  #riderDashboard .premium-panel-header h4{font-size:11px!important}
  #riderDashboard .premium-panel-header span{font-size:10px!important}
  #riderDashboard .ride-status-strip{padding:8px!important}
  #riderDashboard .ride-status-strip .status-icon{width:28px!important;height:28px!important}
  #riderDashboard .ride-status-strip strong{font-size:10px!important}
  #riderDashboard .ride-status-strip small{font-size:10px!important}
  #riderDashboard .premium-cancel-ride-btn{padding:8px 9px!important;font-size:10px!important}

  /* Bottom nav closer to the reference: centre Ride Now action. */
  
  
  
  
  #mobileBottomNav button[data-nav="rider-book"]{transform:translateY(-9px)!important;}
  
  
  #mobileBottomNav button[data-nav="rider-book"] span:not(.badge)::after{content:"Ride Now";font-size:10px;font-weight:900}
}
@media (max-width:380px){
  #riderDashboard{padding-left:5px!important;padding-right:5px!important}
  #riderDashboard #rideMap{height:265px!important;min-height:265px!important}
  
  #riderDashboard .map-controls>.map-actions:last-child .map-btn{font-size:10px!important}
  #riderDashboard #bookRideForm .row-2col{gap:5px!important}
  
}


/* ============================================================
   MOBILE BOOKING CONTROLS — CLEAN, ORGANIZED LAYOUT
   ============================================================ */
@media (max-width: 600px){
  /* Keep the quick actions in one clean row. */
  #riderDashboard .mobile-map-quick-actions{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    margin:6px 0!important;
  }
  #riderDashboard .mobile-map-quick{
    height:42px!important;
    min-height:42px!important;
    padding:4px 2px!important;
  }

  /* Nearby drivers: one compact horizontal status bar. */
  #riderDashboard .nearby-drivers-bar{
    min-height:42px!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
    gap:8px!important;
  }
  #riderDashboard .nearby-drivers-info{
    justify-content:flex-start!important;
    min-width:0!important;
  }
  #riderDashboard .nearby-drivers-info span{font-size:10px!important}
  #riderDashboard .nearby-drivers-info strong{font-size:11px!important}
  #riderDashboard .nearby-drivers-bar .map-actions{
    display:flex!important;
    width:auto!important;
    gap:5px!important;
    align-items:center!important;
  }
  #riderDashboard .nearby-drivers-bar .map-btn{
    min-height:30px!important;
    height:30px!important;
    padding:4px 8px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  /* Map mode buttons: four equal, tidy controls. */
  #riderDashboard .map-controls>.map-actions:last-child{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    margin-top:6px!important;
  }
  #riderDashboard .map-controls>.map-actions:last-child .map-btn{
    min-height:35px!important;
    height:35px!important;
    padding:4px 2px!important;
    font-size:10px!important;
  }

  /* Pickup and destination stay side-by-side. */
  #riderDashboard #bookRideForm > .row-2col:first-child{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;
    margin-bottom:7px!important;
  }

  /* Vehicle + payment are no longer squeezed into two half-width columns.
     Each gets its own full-width row. */
  #riderDashboard #bookRideForm > .row-2col:nth-child(2){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  #riderDashboard #bookRideForm > .row-2col:nth-child(2) > .input-group{
    width:100%!important;
    margin-bottom:2px!important;
  }

  /* Vehicle selector: three cards across, with the final two balanced. */
  #riderDashboard #vehicleType + .select-card-options{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:5px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-option{
    min-height:58px!important;
    height:58px!important;
    padding:6px 4px!important;
    border-radius:12px!important;
    gap:3px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-icon{
    width:26px!important;
    height:26px!important;
    flex-basis:26px!important;
    border-radius:8px!important;
    font-size:12px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-title{font-size:11px!important}
  #riderDashboard #vehicleType + .select-card-options .select-card-value{font-size:10px!important}

  /* Payment selector: one clean row underneath vehicle choices. */
  #riderDashboard #paymentMethodGroup .select-card-options{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:5px!important;
  }
  #riderDashboard #paymentMethodGroup .select-card-option{
    min-height:52px!important;
    height:52px!important;
    padding:5px 4px!important;
    border-radius:12px!important;
    justify-content:center!important;
  }
  #riderDashboard #paymentMethodGroup .select-card-option .select-card-icon{
    width:25px!important;
    height:25px!important;
    flex-basis:25px!important;
    font-size:11px!important;
  }
  #riderDashboard #paymentMethodGroup .select-card-option .select-card-title{font-size:10px!important}
  #riderDashboard #paymentMethodGroup .select-card-option .select-card-value{display:none!important}

  /* Make the booking action visually separate from the option grids. */
  #riderDashboard #bookRideBtn{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin-top:7px!important;
    border-radius:13px!important;
  }
}

@media (max-width:380px){
  #riderDashboard .mobile-map-quick-actions{gap:4px!important}
  #riderDashboard .mobile-map-quick{height:40px!important;min-height:40px!important;font-size:10px!important}
  #riderDashboard .nearby-drivers-bar{grid-template-columns:1fr auto!important;padding:5px 6px!important}
  #riderDashboard .nearby-drivers-bar .map-btn{padding:4px 6px!important;font-size:10px!important}
  #riderDashboard #vehicleType + .select-card-options,
  #riderDashboard #paymentMethodGroup .select-card-options{gap:4px!important}
  
}


/* Mobile booking layout: vehicle types stay on one row,
   payment options move to a separate row underneath. */
@media (max-width: 600px) {
  .booking-options,
  .vehicle-payment-section,
  .vehicle-payment-grid {
    display: block !important;
    width: 100% !important;
  }

  .vehicle-section,
  .vehicle-type-section {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .vehicle-section .vehicle-grid,
  .vehicle-type-section .vehicle-grid,
  .vehicle-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .payment-section,
  .payment-method-section {
    width: 100% !important;
    margin-top: 4px !important;
  }

  .payment-section .payment-grid,
  .payment-method-section .payment-grid,
  .payment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .vehicle-card,
  .vehicle-option {
    min-width: 0 !important;
    width: 100% !important;
  }

  .payment-card,
  .payment-option {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .vehicle-section .vehicle-grid,
  .vehicle-type-section .vehicle-grid,
  .vehicle-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .payment-section .payment-grid,
  .payment-method-section .payment-grid,
  .payment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
}


/* ============================================================
   FINAL MOBILE BOOKING LAYOUT
   Vehicle types: ONE ROW
   Payment methods: SEPARATE ROW
   Book Now: BELOW BOTH
   ============================================================ */
@media (max-width:600px){
  #riderDashboard #bookRideForm > .booking-vehicle-payment-row{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:9px!important;
    margin:0!important;
  }

  #riderDashboard #bookRideForm > .booking-vehicle-payment-row > .input-group{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  #riderDashboard #bookRideForm > .booking-vehicle-payment-row .vehicle-section,
  #riderDashboard #bookRideForm > .booking-vehicle-payment-row .payment-section{
    width:100%!important;
  }

  /* Five vehicle choices on a single row. */
  #riderDashboard #vehicleType + .select-card-options{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    gap:6px!important;
    margin:5px 0 0!important;
  }

  #riderDashboard #vehicleType + .select-card-options .select-card-option{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:4px 2px!important;
    border-radius:11px!important;
    gap:2px!important;
  }

  #riderDashboard #vehicleType + .select-card-options .select-card-icon{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    font-size:11px!important;
    border-radius:7px!important;
  }

  #riderDashboard #vehicleType + .select-card-options .select-card-text{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }

  #riderDashboard #vehicleType + .select-card-options .select-card-title{
    display:block!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #riderDashboard #vehicleType + .select-card-options .select-card-value{
    display:block!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Three payment choices in their own row. */
  #riderDashboard #paymentMethodGroup{
    margin-top:1px!important;
  }

  #riderDashboard #paymentMethodGroup .select-card-options{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    gap:6px!important;
    margin:5px 0 0!important;
  }

  #riderDashboard #paymentMethodGroup .select-card-option{
    width:100%!important;
    min-width:0!important;
    min-height:55px!important;
    height:55px!important;
    padding:5px 4px!important;
    border-radius:11px!important;
  }

  #riderDashboard #paymentMethodGroup .select-card-option .select-card-icon{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    font-size:11px!important;
  }

  #riderDashboard #paymentMethodGroup .select-card-option .select-card-title{
    font-size:10px!important;
    line-height:1.1!important;
  }

  #riderDashboard #paymentMethodGroup .select-card-option .select-card-value{
    display:none!important;
  }

  /* Book Now must be below payment, never beside vehicle cards. */
  #riderDashboard #bookRideBtn{
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:9px 0 0!important;
    clear:both!important;
    position:relative!important;
  }
}

@media (max-width:380px){
  #riderDashboard #vehicleType + .select-card-options{
    gap:4px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-option{
    height:55px!important;
    min-height:55px!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-title{
    font-size:10px!important;
  }
  #riderDashboard #vehicleType + .select-card-options .select-card-value{
    font-size:10px!important;
  }
  #riderDashboard #paymentMethodGroup .select-card-options{
    gap:4px!important;
  }
}


/* =========================================================
   RIDESWIFT MOBILE HEADER — CLEAN 3-ZONE LAYOUT
   Prevents the brand/actions from wrapping or leaving empty space.
   ========================================================= */
@media (max-width:600px){
  #riderDashboard .dashboard-header{
    position:relative!important;
    
    
    
    justify-items:center!important;
    
    
    
    
    
    
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  #riderDashboard .rider-mobile-brand{
    
    
    
    align-self:center!important;
    
    
    justify-content:center!important;
    
    margin:0!important;
    
  }

  

  

  

  

  #riderDashboard .rider-header-actions .logout-btn{
    
    
    
    align-self:center!important;
    
    
    
    
    
    
    
    
    
  }

  

  #riderDashboard .rider-desktop-notification{
    
    
    
    align-self:center!important;
    
    
    
    
    
    
    
  }

  
}

@media (max-width:390px){
  #riderDashboard .dashboard-header{
    
    
    
    border-radius:16px!important;
  }
  
  
  #riderDashboard .rider-header-actions .logout-btn,
  #riderDashboard .rider-desktop-notification{
    width:37px!important;
    height:37px!important;
    min-width:37px!important;
    border-radius:11px!important;
  }
}


/* =========================================================
   RIDER MOBILE HEADER — REFERENCE STYLE
   Brand left • Online status • Notification right
   ========================================================= */
@media (max-width:600px){
  #riderDashboard .dashboard-header{
    
    
    
    
    width:100%!important;
    
    
    
    margin:0 0 9px!important;
    
    background:linear-gradient(180deg,#061a2c 0%,#071525 100%)!important;
    border:0!important;
    border-bottom:1px solid rgba(0,212,255,.10)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.32)!important;
  }

  #riderDashboard .rider-mobile-brand{
    
    
    
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    
  }

  #riderDashboard .rider-mobile-brand-icon{
    width:52px!important;
    height:48px!important;
    flex:0 0 52px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:0!important;
    background:transparent!important;
    color:#ffd21c!important;
    box-shadow:none!important;
    font-size:39px!important;
    filter:drop-shadow(0 3px 8px rgba(255,202,28,.16));
  }

  #riderDashboard .rider-mobile-brand-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    line-height:1!important;
  }

  #riderDashboard .rider-mobile-brand-name{
    font-size:24px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:-.055em!important;
    color:#fff!important;
    white-space:nowrap!important;
  }

  #riderDashboard .rider-mobile-brand-name span{
    color:#ffd21c!important;
  }

  #riderDashboard .rider-mobile-brand-copy small{
    display:block!important;
    margin-top:5px!important;
    color:rgba(255,255,255,.68)!important;
    font-size:11px!important;
    font-weight:600!important;
    letter-spacing:.1px!important;
    white-space:nowrap!important;
  }

  #riderDashboard .rider-mobile-online{
    
    
    display:flex!important;
    align-items:center!important;
    
    
    
    border:1px solid rgba(0,255,136,.58)!important;
    border-radius:22px!important;
    background:rgba(0,255,136,.07)!important;
    color:#18ef87!important;
    box-shadow:0 0 0 1px rgba(0,255,136,.04),0 5px 15px rgba(0,255,136,.08),inset 0 1px 0 rgba(255,255,255,.08)!important;
    white-space:nowrap!important;
  }

  #riderDashboard .rider-mobile-online strong{
    
    font-weight:850!important;
  }

  #riderDashboard .rider-online-toggle{
    
    
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    padding:3px!important;
    border-radius:999px!important;
    background:#13e981!important;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.22),0 2px 7px rgba(0,255,136,.18)!important;
  }

  #riderDashboard .rider-online-toggle i{
    display:block!important;
    
    
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 2px 5px rgba(0,0,0,.22)!important;
  }

  #riderDashboard .rider-greeting-copy,
  #riderDashboard .rider-header-actions .logout-btn{
    display:none!important;
  }

  

  

  #riderDashboard .rider-desktop-notification .notification-badge{
    
    
    min-width:19px!important;
    height:19px!important;
    line-height:19px!important;
    font-size:11px!important;
    border:2px solid #071525!important;
  }
}

@media (max-width:390px){
  
  
  
  #riderDashboard .rider-mobile-brand-copy small{margin-top:4px!important;}
  #riderDashboard .rider-mobile-online{gap:6px!important;}
  
  
  
  #riderDashboard .rider-desktop-notification{width:37px!important;height:37px!important;min-width:37px!important;font-size:22px!important}
}


/* ============================================================
   MAP / ROUTE / FARE RESTORATION
   Keep the address fields present because the map engine writes to
   these IDs and bookRide() reads them when creating the ride.
   ============================================================ */
.booking-location-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.booking-location-field input{width:100%;box-sizing:border-box}
.booking-location-field .location-hint{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:rgba(255,255,255,.60)}
.booking-location-field .location-hint i{color:#00d4ff}
@media(max-width:600px){
  .booking-location-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
  .booking-location-field label{font-size:11px!important;margin-bottom:5px!important}
  .booking-location-field input{height:40px!important;padding:8px 9px!important;font-size:11px!important;border-radius:11px!important}
  .booking-location-field .location-hint{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* =========================================================
   DRIVER ACTIVE RIDE — MOBILE COMPACT FIX
   Prevent route addresses from collapsing into one character
   per line and remove excessive vertical space.
   ========================================================= */
@media (max-width:600px){
  #activeRidePanel{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding:12px !important;
    border-radius:17px !important;
  }

  #activeRidePanel .active-ride-header{
    margin-bottom:8px !important;
    gap:8px !important;
  }

  #activeRidePanel .active-ride-header h3{
    margin:0 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    max-width:calc(100% - 55px) !important;
  }

  #activeRidePanel .active-route{
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px !important;
    margin:0 !important;
    border-radius:12px !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  #activeRidePanel .route-line{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
  }

  #activeRidePanel .route-line > div{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 38px) !important;
  }

  #activeRidePanel .route-line small{
    font-size:10px !important;
    line-height:1.1 !important;
    margin-bottom:2px !important;
  }

  #activeRidePanel .route-line strong{
    display:-webkit-box !important;
    width:100% !important;
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.28 !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  #activeRidePanel .route-point{
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    border-radius:8px !important;
  }

  #activeRidePanel .route-connector{
    height:10px !important;
    margin-left:12px !important;
  }

  #activeRidePanel .active-rider{
    margin-top:8px !important;
    padding:8px !important;
    min-height:48px !important;
    gap:8px !important;
  }

  #activeRidePanel .rider-avatar{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
  }

  #activeRidePanel .rider-info strong{
    font-size:11px !important;
  }

  #activeRidePanel .rider-info span{
    font-size:11px !important;
  }

  #activeRidePanel .rider-actions{
    gap:5px !important;
  }

  #activeRidePanel .rider-actions button{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }

  #activeRidePanel .active-ride-fare{
    margin:7px 0 0 !important;
    padding:8px 2px !important;
  }

  #activeRidePanel .active-ride-fare span{
    font-size:11px !important;
  }

  #activeRidePanel .active-ride-fare strong{
    font-size:16px !important;
  }

  #activeRidePanel .active-ride-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    margin-top:8px !important;
  }

  #activeRidePanel .active-ride-actions button{
    min-height:40px !important;
    height:40px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  #activeRidePanel .driver-inline-pin{
    margin-top:8px !important;
  }
}

@media (max-width:380px){
  #activeRidePanel{
    padding:10px !important;
  }

  #activeRidePanel .active-route{
    padding:8px !important;
  }

  #activeRidePanel .route-line strong{
    font-size:11px !important;
  }

  #activeRidePanel .active-ride-actions{
    grid-template-columns:1fr 1fr !important;
  }
}


/* ============================================================
   ROLE ISOLATION + DRIVER ACTIVE RIDE RESTORE
   Mobile rider layout uses display:flex!important, so .hidden alone
   cannot hide it. Keep the dashboard strictly role-specific.
   ============================================================ */
#riderDashboard.hidden,
#adminDashboard.hidden,
#profilePage.hidden {
    display:none !important;
}

@media(max-width:600px){
    #riderDashboard.hidden,
    #adminDashboard.hidden,
    #profilePage.hidden {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
        height:0 !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    #driverDashboard:not(.hidden){
        display:block !important;
        visibility:visible !important;
    }

    #driverDashboard #activeRidePanel:not(.hidden){
        display:block !important;
        visibility:visible !important;
    }
}


/* =========================================================
   RIDER MOBILE FOOTER — REFERENCE RESTORE
   Home | My Rides | Ride Now | Messages | Profile
   ========================================================= */
@media (max-width:600px){
  #mobileBottomNav{
    
    display:grid!important;
    
    align-items:end!important;gap:0!important;
    height:76px!important;min-height:76px!important;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,#061a2d 0%,#041225 100%)!important;
    border-top:1px solid rgba(0,212,255,.13)!important;
    box-shadow:0 -10px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;
    
    backdrop-filter:blur(16px)!important;
  }
  #mobileBottomNav button{
    position:relative!important;height:61px!important;min-height:61px!important;
    padding:5px 2px 4px!important;margin:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;color:#b8c4d4!important;box-shadow:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    transform:none!important;
  }
  #mobileBottomNav button i{font-size:21px!important;line-height:1!important;color:#c9d4e2!important}
  #mobileBottomNav button span:not(.badge){font-size:11px!important;line-height:1.1!important;font-weight:700!important;white-space:nowrap!important;color:#b8c4d4!important}
  #mobileBottomNav button.active i,#mobileBottomNav button.active span:not(.badge){color:#ffd21c!important}
  #mobileBottomNav button.active::after{content:""!important;position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:58px!important;height:4px!important;border-radius:6px!important;background:#ffd21c!important;box-shadow:0 0 10px rgba(255,210,28,.35)!important}
  /* Driver footer mirrors the Rider footer: 5 equal slots with a raised centre action. */
  #mobileBottomNav button[data-nav="driver-online"]{
    width:66px!important;height:66px!important;min-height:66px!important;justify-self:center!important;align-self:start!important;
    margin-top:-12px!important;border-radius:50%!important;
    background:linear-gradient(145deg,#ffd84d,#d5ad28)!important;
    border:3px solid #061225!important;color:#07111b!important;
    box-shadow:0 9px 24px rgba(0,0,0,.4),0 5px 16px rgba(255,203,46,.24),inset 0 2px 0 rgba(255,255,255,.45)!important;
    z-index:4!important;
  }
  #mobileBottomNav button[data-nav="driver-online"] i{font-size:24px!important;color:#07111b!important}
  #mobileBottomNav button[data-nav="driver-online"] span:not(.badge){position:absolute!important;top:66px!important;color:#f3f6fa!important;font-size:11px!important;font-weight:800!important}
  #mobileBottomNav button[data-nav="driver-online"].driver-mobile-online-active{
    background:linear-gradient(145deg,#52f2a1,#16b96f)!important;
    box-shadow:0 9px 24px rgba(0,0,0,.4),0 5px 16px rgba(22,185,111,.30),inset 0 2px 0 rgba(255,255,255,.45)!important;
  }
  #mobileBottomNav button[data-nav="driver-online"].driver-mobile-online-active i{color:#061225!important}
  #mobileBottomNav button[data-nav="driver-online"]::after{display:none!important}
  #mobileBottomNav button[data-nav="driver-requests"] .badge{
    position:absolute!important;top:2px!important;right:18%!important;min-width:18px!important;height:18px!important;padding:0 5px!important;
    display:grid!important;place-items:center!important;border-radius:50%!important;background:#ff304f!important;color:#fff!important;
    font-size:11px!important;font-weight:900!important;border:2px solid #061225!important;z-index:5!important;
  }
  #mobileBottomNav button[data-nav="rider-book"]{
    width:66px!important;height:66px!important;min-height:66px!important;justify-self:center!important;align-self:start!important;
    margin-top:-12px!important;border-radius:50%!important;background:linear-gradient(145deg,#ffd84d,#d5ad28)!important;
    border:3px solid #061225!important;color:#07111b!important;
    box-shadow:0 9px 24px rgba(0,0,0,.4),0 5px 16px rgba(255,203,46,.24),inset 0 2px 0 rgba(255,255,255,.45)!important;
    z-index:4!important;
  }
  #mobileBottomNav button[data-nav="rider-book"] i{font-size:24px!important;color:#07111b!important}
  #mobileBottomNav button[data-nav="rider-book"] span:not(.badge){position:absolute!important;top:66px!important;color:#f3f6fa!important;font-size:11px!important;font-weight:800!important}
  #mobileBottomNav button[data-nav="rider-book"]::after{display:none!important}
  #mobileBottomNav button[data-nav="rider-messages"] .notification-nav-badge,
  #mobileBottomNav button[data-nav="rider-rides"] .badge{
    position:absolute!important;top:2px!important;right:18%!important;min-width:18px!important;height:18px!important;padding:0 5px!important;
    display:grid!important;place-items:center!important;border-radius:50%!important;background:#ff304f!important;color:#fff!important;
    font-size:11px!important;font-weight:900!important;border:2px solid #061225!important;z-index:5!important;
  }
  #mobileBottomNav button[data-nav="rider-messages"] .notification-nav-badge.hidden{display:none!important}
}
@media(max-width:390px){
  #mobileBottomNav{height:71px!important;min-height:71px!important}
  #mobileBottomNav button{height:57px!important;min-height:57px!important}
  #mobileBottomNav button i{font-size:19px!important}
  #mobileBottomNav button span:not(.badge){font-size:11px!important}
  #mobileBottomNav button[data-nav="rider-book"],#mobileBottomNav button[data-nav="driver-online"]{width:60px!important;height:60px!important;min-height:60px!important}
  #mobileBottomNav button[data-nav="rider-book"] span:not(.badge),#mobileBottomNav button[data-nav="driver-online"] span:not(.badge){top:60px!important}
}

/* =========================================================
   RIDER MOBILE HEADER — KEEP REFERENCE HEADER + VISIBLE LOGOUT
   Brand | Online | Notifications | Logout
   ========================================================= */
@media(max-width:600px){
  #riderDashboard .dashboard-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 36px 36px!important;
    column-gap:6px!important;align-items:center!important;
    min-height:78px!important;height:78px!important;padding:9px 9px!important;
    border-radius:0 0 16px 16px!important;
  }
  #riderDashboard .rider-mobile-brand{grid-column:1!important;grid-row:1!important;justify-self:start!important;min-width:0!important}
  #riderDashboard .rider-mobile-online{grid-column:2!important;grid-row:1!important;justify-self:end!important;height:38px!important;padding:0 7px 0 9px!important;gap:5px!important}
  #riderDashboard .rider-mobile-online strong{font-size:11px!important}
  #riderDashboard .rider-online-toggle{width:34px!important;height:22px!important}
  #riderDashboard .rider-online-toggle i{width:16px!important;height:16px!important}
  #riderDashboard .rider-header-actions{display:contents!important}
  #riderDashboard .rider-greeting-copy{display:none!important}
  #riderDashboard .rider-header-actions .logout-btn{
    grid-column:4!important;grid-row:1!important;justify-self:end!important;display:grid!important;place-items:center!important;
    width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;margin:0!important;
    border-radius:10px!important;font-size:0!important;background:rgba(239,68,68,.10)!important;
    border:1px solid rgba(255,90,90,.38)!important;color:#ff9d9d!important;box-shadow:0 4px 12px rgba(0,0,0,.2)!important;
  }
  #riderDashboard .rider-header-actions .logout-btn i{font-size:14px!important;margin:0!important}
  #riderDashboard .rider-desktop-notification{
    grid-column:3!important;grid-row:1!important;justify-self:end!important;
    width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;padding:0!important;
    display:grid!important;place-items:center!important;border:0!important;border-radius:10px!important;
    background:transparent!important;color:#f5f7fb!important;box-shadow:none!important;font-size:23px!important;
  }
  #riderDashboard .rider-desktop-notification .notification-badge{top:-2px!important;right:-2px!important}
}
@media(max-width:390px){
  #riderDashboard .dashboard-header{grid-template-columns:minmax(0,1fr) auto 33px 33px!important;height:72px!important;min-height:72px!important;padding:7px 7px!important}
  #riderDashboard .rider-mobile-brand-icon{width:42px!important;height:40px!important;flex-basis:42px!important;font-size:31px!important}
  #riderDashboard .rider-mobile-brand-name{font-size:20px!important}
  #riderDashboard .rider-mobile-brand-copy small{font-size:10px!important}
  #riderDashboard .rider-mobile-online{height:34px!important;padding-left:7px!important;padding-right:5px!important}
  #riderDashboard .rider-mobile-online strong{font-size:11px!important}
  #riderDashboard .rider-online-toggle{width:31px!important;height:20px!important}
  #riderDashboard .rider-online-toggle i{width:15px!important;height:15px!important}
  #riderDashboard .rider-header-actions .logout-btn,#riderDashboard .rider-desktop-notification{width:33px!important;height:33px!important;min-width:33px!important}
}


/* =========================================================
   MOBILE RIDER STATS + FOOTER FINAL CLEANUP
   Fixes clipped statistics heading and off-screen footer.
   ========================================================= */
@media (max-width:600px){
  /* Keep the statistics block fully inside the dashboard flow. */
  #riderDashboard .rider-stats-section{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:14px 0 18px!important;
    padding:10px 0 9px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    clear:both!important;
  }
  #riderDashboard .rider-stats-section .dashboard-stats-heading{
    display:block!important;
    margin:0!important;
    padding:2px 12px 9px!important;
    min-height:44px!important;
    box-sizing:border-box!important;
  }
  #riderDashboard .rider-stats-section .section-label{
    display:block!important;
    margin:0 0 3px!important;
    line-height:1.1!important;
    font-size:10px!important;
    overflow:visible!important;
  }
  #riderDashboard .rider-stats-section .dashboard-stats-heading h2{
    margin:0!important;
    font-size:16px!important;
    line-height:1.15!important;
  }
  #riderDashboard .rider-stats{
    width:100%!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:0 9px 2px!important;
    margin:0!important;
  }
  #riderDashboard .rider-stats .stat-card{
    min-width:0!important;
    min-height:84px!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
  }

  /* The footer must use the viewport, not the dashboard's containing width.
     The previous translateX(-50%) was pushing half of it off-screen. */
  #mobileBottomNav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    box-sizing:border-box!important;
    bottom:0!important;
    transform:none!important;
    margin:0!important;
    border-radius:18px 18px 0 0!important;
    z-index:99999!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  #mobileBottomNav button{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  /* Leave enough page room so the footer never covers the last cards. */
  #riderDashboard{
    padding-bottom:112px!important;
  }
}
@media(max-width:390px){
  #riderDashboard .rider-stats-section{
    margin-top:10px!important;
    padding-top:9px!important;
  }
  #riderDashboard .rider-stats-section .dashboard-stats-heading{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #riderDashboard .rider-stats{
    
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #mobileBottomNav{
    width:100vw!important;
    left:0!important;
    right:0!important;
    transform:none!important;
  }
}


/* ============================================================
   ADMIN MOBILE BOTTOM NAV — MATCH DRIVER / RIDER APP NAV
   Five equal touch targets, floating glass shell, gold active
   state, and enough bottom spacing for the admin dashboard.
   ============================================================ */
@media (max-width: 600px){
  #adminDashboard{
    padding-bottom:112px !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]){
    left:50% !important;
    right:auto !important;
    bottom:9px !important;
    width:calc(100% - 18px) !important;
    max-width:720px !important;
    height:68px !important;
    min-height:68px !important;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom)) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    transform:translateX(-50%) !important;
    align-items:stretch !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:22px !important;
    background:linear-gradient(145deg,rgba(13,20,29,.97),rgba(5,9,14,.96)) !important;
    box-shadow:0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter:blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(140%) !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button{
    width:100% !important;
    min-width:0 !important;
    height:55px !important;
    min-height:55px !important;
    margin:0 !important;
    padding:5px 2px !important;
    gap:3px !important;
    border:0 !important;
    border-radius:16px !important;
    background:transparent !important;
    color:rgba(255,255,255,.64) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    transition:background .2s ease,color .2s ease,transform .2s ease !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button i{
    width:30px !important;
    height:27px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:18px !important;
    line-height:1 !important;
    color:inherit !important;
    transition:transform .2s ease,color .2s ease !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button span:not(.badge){
    display:block !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    letter-spacing:.15px !important;
    color:inherit !important;
    white-space:nowrap !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button.active{
    color:#f3df9b !important;
    background:linear-gradient(145deg,rgba(215,180,58,.18),rgba(24,198,216,.06)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 16px rgba(0,0,0,.18) !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button.active i{
    color:#d4af37 !important;
    transform:translateY(-1px) scale(1.04) !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button:not(.active):active{
    transform:scale(.96) !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button:hover{
    color:#f3df9b !important;
    background:rgba(255,255,255,.035) !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button.active:hover{
    background:linear-gradient(145deg,rgba(215,180,58,.20),rgba(24,198,216,.07)) !important;
  }
}

@media (max-width:390px){
  #mobileBottomNav:has([data-nav="admin-home"]){
    width:calc(100% - 12px) !important;
    bottom:6px !important;
    height:64px !important;
    min-height:64px !important;
    padding:5px !important;
    border-radius:20px !important;
    gap:2px !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button{
    height:52px !important;
    min-height:52px !important;
    border-radius:14px !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button i{
    width:28px !important;
    height:25px !important;
    font-size:17px !important;
  }

  #mobileBottomNav:has([data-nav="admin-home"]) button span:not(.badge){
    font-size:10px !important;
  }
}

/* ===== [22] rideswift-live-trip-ui-v23 ===== */
/* RideSwift UI 2.3 — live journey experience */
.live-trip-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:14px 0 4px}
.live-trip-step{position:relative;text-align:center;color:rgba(255,255,255,.60);font-size:11px;font-weight:800;line-height:1.25}
.live-trip-step .step-dot{width:25px;height:25px;margin:0 auto 5px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);font-size:11px;transition:.25s ease}
.live-trip-step.is-done,.live-trip-step.is-current{color:#dce8f3}.live-trip-step.is-done .step-dot{background:rgba(32,232,137,.13);border-color:rgba(32,232,137,.35);color:#20e889}.live-trip-step.is-current .step-dot{background:linear-gradient(135deg,#19c8ff,#20e889);border-color:transparent;color:#071019;box-shadow:0 0 0 5px rgba(25,200,255,.08),0 7px 18px rgba(25,200,255,.18)}
.active-ride-live-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}
.active-ride-live-meta .meta-card{padding:10px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);min-width:0}.active-ride-live-meta small{display:block;color:rgba(255,255,255,.60);font-size:11px}.active-ride-live-meta strong{display:block;margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.active-ride-actions .trip-primary-btn{box-shadow:0 10px 24px rgba(25,200,255,.12);transition:.2s ease}.active-ride-actions .trip-primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(25,200,255,.2)}
.rider-live-sheet{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:17px;border:1px solid rgba(25,200,255,.13);background:linear-gradient(135deg,rgba(25,200,255,.08),rgba(32,232,137,.035));margin-top:9px}
.rider-live-sheet .live-icon{width:42px;height:42px;min-width:42px;border-radius:14px;display:grid;place-items:center;background:rgba(25,200,255,.12);color:#19c8ff}.rider-live-sheet .live-copy{min-width:0;flex:1}.rider-live-sheet .live-copy small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.60);font-weight:900}.rider-live-sheet .live-copy strong{display:block;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rider-live-sheet .live-arrow{color:rgba(255,255,255,.64)}
@media(max-width:600px){.live-trip-progress{gap:1px}.live-trip-step{font-size:10px}.live-trip-step .step-dot{width:23px;height:23px}.active-ride-live-meta{gap:5px}.active-ride-live-meta .meta-card{padding:9px 7px}.rider-live-sheet{padding:11px 12px}}

/* ===== [23] rideswift-dashboard-review-v2 ===== */
/* Focused UI review: rider, driver, booking, delivery and admin screens */
#riderDashboard,#driverDashboard,#adminDashboard{width:min(100%,1180px);margin-inline:auto;min-width:0}
#riderDashboard .dashboard-header,#driverDashboard .dashboard-header,#adminDashboard .dashboard-header{gap:16px;align-items:center;flex-wrap:wrap}
#riderDashboard .dashboard-header>div,#driverDashboard .dashboard-header>div,#adminDashboard .dashboard-header>div{min-width:0}
#riderDashboard .dashboard-header h2,#driverDashboard .dashboard-header h2,#adminDashboard .dashboard-header h2{overflow-wrap:anywhere}
#riderDashboard .stat-card,#driverDashboard .stat-card,#adminDashboard .stat-card{min-width:0;overflow-wrap:anywhere}
#riderDashboard .stat-card strong,#driverDashboard .stat-card strong,#adminDashboard .stat-card strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#riderDashboard button,#driverDashboard button,#adminDashboard button,#passengerDeliverySection button{touch-action:manipulation}
#riderDashboard input,#riderDashboard select,#riderDashboard textarea,#driverDashboard input,#driverDashboard select,#driverDashboard textarea,#adminDashboard input,#adminDashboard select,#adminDashboard textarea,#passengerDeliverySection input,#passengerDeliverySection select,#passengerDeliverySection textarea{max-width:100%;min-width:0}
#riderDashboard .ride-card,#driverDashboard .ride-card,#adminDashboard .ride-card{min-width:0;overflow-wrap:anywhere}
#passengerDeliverySection{min-width:0;scroll-margin-top:16px}
#passengerDeliverySection .passenger-delivery-grid{align-items:start}
#passengerDeliverySection .passenger-delivery-grid>div{min-width:0}
#passengerDeliverySection .passenger-delivery-grid input,#passengerDeliverySection .passenger-delivery-grid select,#passengerDeliverySection .passenger-delivery-grid textarea{width:100%;box-sizing:border-box}
#passengerDeliverySection .passenger-delivery-map,#passengerDeliverySection .passenger-delivery-track-map{max-width:100%;overflow:hidden}
#adminDashboard .admin-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#adminDashboard .admin-toolbar input,#adminDashboard .admin-toolbar select{flex:1 1 180px;min-height:42px}
#adminDashboard .admin-toolbar button{min-height:42px}
#adminDashboard table{width:100%;border-collapse:separate;border-spacing:0}
#adminDashboard th,#adminDashboard td{vertical-align:middle;overflow-wrap:anywhere}
#adminDashboard .admin-table-wrap,#adminDashboard .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#adminDashboard .admin-btn,#adminDashboard button{min-height:38px}
/* Prevent content behind the fixed mobile navigation and device safe areas. */
#riderDashboard,#driverDashboard,#adminDashboard{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
@media(max-width:760px){
 #riderDashboard,#driverDashboard,#adminDashboard{padding-left:10px;padding-right:10px}
 #riderDashboard .dashboard-header,#driverDashboard .dashboard-header,#adminDashboard .dashboard-header{align-items:flex-start}
 #riderDashboard .dashboard-header h2,#driverDashboard .dashboard-header h2,#adminDashboard .dashboard-header h2{font-size:clamp(18px,5vw,23px);line-height:1.25}
 #riderDashboard .dashboard-header p,#driverDashboard .dashboard-header p,#adminDashboard .dashboard-header p{line-height:1.5}
 #riderDashboard .rider-stats,#driverDashboard .rider-stats,#adminDashboard .rider-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 #riderDashboard .stat-card,#driverDashboard .stat-card,#adminDashboard .stat-card{padding:12px}
 #adminDashboard .admin-toolbar{display:grid;grid-template-columns:minmax(0,1fr);}
 #adminDashboard .admin-toolbar input,#adminDashboard .admin-toolbar select,#adminDashboard .admin-toolbar button{width:100%;min-width:0}
 #passengerDeliverySection .passenger-delivery-actions{gap:8px}
 #passengerDeliverySection .passenger-delivery-actions button{min-height:46px}
}
@media(max-width:420px){
 #riderDashboard,#driverDashboard,#adminDashboard{padding-left:7px;padding-right:7px}
 #riderDashboard .rider-stats,#driverDashboard .rider-stats,#adminDashboard .rider-stats{gap:7px}
 #riderDashboard .stat-card,#driverDashboard .stat-card,#adminDashboard .stat-card{padding:10px;border-radius:14px}
 #passengerDeliverySection .select-card-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 #passengerDeliverySection .select-card-title{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#riderDashboard *,#driverDashboard *,#adminDashboard *,#passengerDeliverySection *{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ===== [24] unnamed ===== */
/* Final notification badge override: red circular count */
#driverDashboard .notification-btn .notification-badge,
.notification-btn .notification-badge,
.rider-desktop-notification .notification-badge{
    position:absolute!important;
    top:-5px!important;
    right:-5px!important;
    z-index:999!important;
    min-width:20px!important;
    width:20px!important;
    height:20px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:#ef233c!important;
    color:#fff!important;
    border:2px solid #071018!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 3px 10px rgba(239,35,60,.45)!important;
}
#driverDashboard .notification-btn .notification-badge.hidden,
.notification-btn .notification-badge.hidden,
.rider-desktop-notification .notification-badge.hidden{display:none!important}

/* ===== [25] rideswift-online-status-final ===== */
/* RideSwift driver online/offline status — final state colors */
#driverDashboard #driverStatusBtn.driver-online-switch {
    border-radius: 999px !important;
    min-width: 108px !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.online {
    background: rgba(34, 197, 94, .12) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, .65) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.06), 0 8px 24px rgba(34,197,94,.12) !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.online .status-dot {
    background: #22c55e !important;
    color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,.13), 0 0 12px rgba(34,197,94,.55) !important;
    animation: rideswiftOnlinePulse 1.8s ease-in-out infinite !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.online .status-copy strong,
#driverDashboard #driverStatusBtn.driver-online-switch.online > i {
    color: #22c55e !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.offline,
#driverDashboard #driverStatusBtn.driver-online-switch:not(.online) {
    background: rgba(239, 68, 68, .10) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, .65) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.05), 0 8px 24px rgba(239,68,68,.10) !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.offline .status-dot,
#driverDashboard #driverStatusBtn.driver-online-switch:not(.online) .status-dot {
    background: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.12), 0 0 11px rgba(239,68,68,.45) !important;
    animation: none !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.offline .status-copy strong,
#driverDashboard #driverStatusBtn.driver-online-switch.offline > i,
#driverDashboard #driverStatusBtn.driver-online-switch:not(.online) .status-copy strong,
#driverDashboard #driverStatusBtn.driver-online-switch:not(.online) > i {
    color: #ef4444 !important;
}

#driverDashboard #driverStatusBtn.driver-online-switch.loading {
    opacity: .65 !important;
    filter: saturate(.75) !important;
}

@keyframes rideswiftOnlinePulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.82); opacity: .62; }
}

/* =========================================================
   FINAL DRIVER STATISTICS MOBILE REORGANIZATION
   Earnings gets the full row. The remaining three cards form
   a balanced two-column layout, with Rating spanning both
   columns instead of sitting alone in a short orphan row.
   ========================================================= */

@media (max-width: 768px){
  #driverDashboard .driver-stats-section{
    border-radius:22px !important;
    overflow:hidden !important;
  }

  

  #driverDashboard .driver-stat-card{
    min-width:0 !important;
    min-height:88px !important;
    margin:0 !important;
    padding:13px !important;
    border-radius:17px !important;
  }

  /* Today's earnings: full-width hero card */
  #driverDashboard .driver-stat-card.earnings-card{
    grid-column:1 / -1 !important;
    min-height:96px !important;
  }

  /* Assigned + Completed: balanced pair */
  #driverDashboard .driver-stat-card:not(.earnings-card):not(:last-child){
    grid-column:auto !important;
  }

  /* Driver rating: full-width lower card, not an orphan */
  #driverDashboard .driver-stat-card:last-child{
    grid-column:1 / -1 !important;
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
  }

  #driverDashboard .driver-stat-card:last-child .driver-stat-content{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    column-gap:7px !important;
    align-items:center !important;
  }

  #driverDashboard .driver-stat-card:last-child .driver-stat-content > span{
    grid-column:1 / -1 !important;
  }

  #driverDashboard .driver-stat-card:last-child .driver-stat-content > strong{
    margin-top:0 !important;
  }

  #driverDashboard .driver-stat-card:last-child .driver-stat-content > small:last-child{
    margin-top:0 !important;
  }

  #driverDashboard .driver-stat-card:last-child .rating-stars{
    display:inline !important;
  }

  #driverDashboard .driver-stat-content{
    min-width:0 !important;
  }

  #driverDashboard .driver-stat-content span{
    font-size:11px !important;
  }

  #driverDashboard .driver-stat-content strong{
    font-size:19px !important;
    line-height:1.15 !important;
  }

  #driverDashboard .driver-stat-content small{
    font-size:11px !important;
    line-height:1.25 !important;
  }
}

@media (max-width: 390px){
  #driverDashboard .driver-stats-grid{
    gap:8px !important;
    padding:0 9px 9px !important;
  }

  #driverDashboard .driver-stat-card{
    padding:11px !important;
    border-radius:15px !important;
  }

  #driverDashboard .driver-stat-card.earnings-card{
    min-height:92px !important;
  }

  #driverDashboard .driver-stat-card:last-child{
    min-height:68px !important;
  }

  #driverDashboard .driver-stat-icon{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }
}


/* =========================================================
   DRIVER STATISTICS — FINAL MOBILE 2x2 LAYOUT
   Four equal cards. No orphan card and no empty third row.
   ========================================================= */
@media (max-width: 768px){
  #driverDashboard .driver-stats-grid{
    
    
    
    
    
    align-items:stretch !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card{
    
    
    
    
    
    
    
    
    
    
    display:flex !important;
    align-items:center !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card.earnings-card{
    grid-column:auto !important;
    min-height:96px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content{
    
    flex:1 1 auto !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > span{
    
    white-space:normal !important;
    overflow:visible !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > strong{
    
    
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > small{
    
    white-space:normal !important;
  }
}

@media (max-width:420px){
  

  #driverDashboard .driver-stats-grid > .driver-stat-card{
    
    
    
    gap:9px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-icon{
    
    
    flex:0 0 36px !important;
    border-radius:11px !important;
  }

  

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > strong{
    
    line-height:1.15 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > small{
    
    line-height:1.2 !important;
  }
}


/* =========================================================
   DRIVER STATISTICS — DEFINITIVE MOBILE LAYOUT
   The four cards are deliberately placed into a true 2 x 2
   grid. This block is intentionally last and does not depend
   on the old earnings-card class.
   ========================================================= */
@media (max-width: 768px){
  #driverDashboard .driver-stats-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    grid-auto-flow:row !important;
    gap:10px !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:0 10px 12px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:104px !important;
    height:auto !important;
    margin:0 !important;
    box-sizing:border-box !important;
    padding:13px !important;
    border-radius:17px !important;
  }

  /* Explicit placement prevents any older selector from
     changing the arrangement. */
  #driverDashboard .driver-stats-grid > .driver-stat-card:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card:nth-child(3){
    grid-column:1 !important;
    grid-row:2 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card:nth-child(4){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content{
    min-width:0 !important;
    overflow:hidden !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > span{
    display:block !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > strong{
    display:block !important;
    font-size:20px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > small{
    display:block !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-icon{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
  }
}

@media (max-width:420px){
  #driverDashboard .driver-stats-grid{
    gap:8px !important;
    padding:0 8px 10px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card{
    min-height:92px !important;
    padding:11px !important;
    border-radius:15px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-icon{
    flex-basis:35px !important;
    width:35px !important;
    height:35px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > strong{
    font-size:17px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > span{
    font-size:11px !important;
  }

  #driverDashboard .driver-stats-grid > .driver-stat-card .driver-stat-content > small{
    font-size:10px !important;
  }
}

/* ===== [26] rideswift-merchant-registration-layout-fix-v2 ===== */
/* Merchant registration: prevent the business-type card selector from being
   squeezed into one half of the registration form. */
.merchant-registration-card .profile-form-grid > .input-group:nth-child(1),
.merchant-registration-card .profile-form-grid > .input-group:nth-child(2){
    grid-column:1 / -1 !important;
    min-width:0 !important;
}



.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-title{
    
    min-width:0;
    
    
}


@media (min-width:761px){
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(1){
        grid-column:span 1 !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2){
        grid-column:span 1 !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-options{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:520px){
    
    
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-option{
        
        
        
        border-radius:13px;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-icon{
        
        
        
        border-radius:10px;
        
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-title{
        
        line-height:1.2;
    }
}
@media (max-width:360px){
    
}

/* ===== [27] rideswift-merchant-registration-layout-fix-v3 ===== */
/* Merchant registration: business name on its own full row, then the
   business-category cards on the next full row. Remaining fields follow. */
.merchant-registration-card .profile-form-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px 14px !important;
    align-items:start !important;
}

/* Business name — full-width row at the top. */
.merchant-registration-card .profile-form-grid > .input-group:nth-child(1){
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
}

/* Business type — full-width row immediately below business name. */
.merchant-registration-card .profile-form-grid > .input-group:nth-child(2){
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-options{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    gap:10px !important;
    margin-top:8px !important;
    box-sizing:border-box !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-option{
    width:100% !important;
    min-width:0 !important;
    min-height:64px !important;
    height:auto !important;
    box-sizing:border-box !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    overflow:hidden !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-icon{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-text{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-title{
    display:block !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    line-height:1.25 !important;
    font-size:11px !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-value{
    display:none !important;
}

.merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-check{
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    margin-left:auto !important;
}

/* Keep the fields after business type in two columns on wider screens. */
.merchant-registration-card .profile-form-grid > .input-group:nth-child(n/**/+3):not(.full){
    grid-column:auto !important;
}

@media (max-width:520px){
    .merchant-registration-card .profile-form-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px 10px !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(1),
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2){
        grid-column:1 / -1 !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-options{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-option{
        min-height:60px !important;
        padding:8px 9px !important;
        gap:7px !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-icon{
        flex-basis:34px !important;
        width:34px !important;
        height:34px !important;
        font-size:15px !important;
    }
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-title{
        font-size:11px !important;
    }
}

@media (max-width:360px){
    .merchant-registration-card .profile-form-grid > .input-group:nth-child(2) .select-card-options{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   RideSwift UI 2.1 — Rider + Driver Experience Polish
   ========================================================= */
:root{--rs-accent:#19c8ff;--rs-green:#20e889;--rs-gold:#f3df9b;--rs-bg:#071018;--rs-card:#0d1722;--rs-border:rgba(255,255,255,.09)}
body{background:radial-gradient(circle at 15% 0%,rgba(25,200,255,.08),transparent 28%),radial-gradient(circle at 85% 15%,rgba(32,232,137,.05),transparent 25%),#060b11!important}
.dashboard{max-width:1320px!important;padding:16px 14px 115px!important}
#riderDashboard .dashboard-header{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(14,29,42,.96),rgba(8,16,24,.96))!important;border:1px solid rgba(25,200,255,.13)!important;border-radius:24px!important;padding:22px 24px!important;box-shadow:0 18px 50px rgba(0,0,0,.22)}
#riderDashboard .dashboard-header:after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-90px;border-radius:50%;background:rgba(25,200,255,.09);filter:blur(3px);pointer-events:none}
#riderDashboard .dashboard-header h2{font-size:27px!important;letter-spacing:-.7px;margin-bottom:5px}
#riderDashboard .dashboard-header p{font-size:13px!important}
#riderDashboard .role-badge{background:rgba(25,200,255,.10)!important;border-color:rgba(25,200,255,.16);padding:6px 10px!important}
#riderDashboard .rider-stats{gap:12px!important;margin-bottom:18px!important}
#riderDashboard .stat-card{position:relative;min-height:78px;background:linear-gradient(145deg,rgba(17,29,42,.95),rgba(9,17,25,.95))!important;border-color:rgba(255,255,255,.075)!important;border-radius:20px!important;padding:16px!important;box-shadow:0 10px 28px rgba(0,0,0,.15)}
#riderDashboard .stat-card:hover{transform:translateY(-3px)!important;border-color:rgba(25,200,255,.22)!important}
#riderDashboard .stat-icon{width:46px!important;height:46px!important;border-radius:14px!important}
#riderDashboard .stat-content h3{font-size:21px!important}
#riderDashboard .book-ride-card,#riderDashboard .ride-history{background:linear-gradient(145deg,rgba(13,24,35,.97),rgba(8,15,22,.97))!important;border-color:rgba(255,255,255,.08)!important;border-radius:24px!important;box-shadow:0 16px 45px rgba(0,0,0,.18)}
#riderDashboard .book-ride-card{padding:22px!important}
#riderDashboard .book-ride-card h3,#riderDashboard .ride-history h3{font-size:19px!important;letter-spacing:-.25px}
#riderDashboard .input-group label{font-size:11px!important;font-weight:800!important;color:rgba(255,255,255,.62)!important;text-transform:uppercase;letter-spacing:.04em}
#riderDashboard .input-group input,#riderDashboard .input-group select,#riderDashboard .input-group textarea{background:#07111a!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:14px!important;min-height:45px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important}
#riderDashboard .input-group input:focus,#riderDashboard .input-group select:focus,#riderDashboard .input-group textarea:focus{border-color:rgba(25,200,255,.45)!important;box-shadow:0 0 0 3px rgba(25,200,255,.08)!important}
#riderDashboard .map-container{border-radius:22px!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 14px 40px rgba(0,0,0,.2)}
#riderDashboard #rideMap{height:350px!important}
#riderDashboard .map-controls{padding:11px 13px!important;background:rgba(5,12,18,.88)!important}
#riderDashboard .map-btn{border-radius:11px!important;padding:8px 12px!important}
#riderDashboard .ride-item{border-radius:16px!important;background:rgba(255,255,255,.025)!important;padding:15px!important;border-color:rgba(255,255,255,.065)!important}
#riderDashboard .ride-item:hover{background:rgba(25,200,255,.035)!important}
#riderDashboard .ride-status{padding:6px 10px!important}
#riderDashboard .ride-fare{font-size:17px!important}

/* Driver */
.driver-dashboard{background:transparent!important}
.driver-dashboard .driver-topbar{padding:7px 3px 13px}
.driver-dashboard .driver-brand strong{font-size:19px!important}
.driver-dashboard .driver-brand-icon{width:46px!important;height:46px!important;border-radius:15px!important;box-shadow:0 10px 30px rgba(25,200,255,.2)!important}
.driver-dashboard .driver-icon-btn,.driver-dashboard .driver-avatar-btn{width:44px!important;height:44px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important}
.driver-dashboard .driver-status-btn{min-height:46px;border-radius:14px!important;font-weight:800!important;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.driver-dashboard .driver-actions{gap:12px!important}
.driver-dashboard .driver-action-card{min-height:86px;background:linear-gradient(145deg,rgba(15,27,40,.96),rgba(9,16,24,.96))!important;border-color:rgba(255,255,255,.075)!important;border-radius:20px!important;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.driver-dashboard .driver-action-card:hover{border-color:rgba(25,200,255,.25)!important;box-shadow:0 14px 34px rgba(0,0,0,.24)!important}
.driver-dashboard .driver-ride-request{position:relative;background:linear-gradient(145deg,rgba(17,31,44,.98),rgba(9,17,25,.98))!important;border-color:rgba(246,211,101,.14)!important;border-radius:22px!important;padding:19px!important;box-shadow:0 14px 38px rgba(0,0,0,.2)}
.driver-dashboard .driver-ride-request:before{content:"NEW RIDE";position:absolute;right:15px;top:14px;padding:5px 8px;border-radius:999px;background:rgba(246,211,101,.1);border:1px solid rgba(246,211,101,.16);color:#f3df9b;font-size:10px;font-weight:900;letter-spacing:.1em}
.driver-dashboard .driver-ride-route{font-size:18px!important;padding-right:70px}
.driver-dashboard .driver-ride-details{line-height:1.7!important}
.driver-dashboard .driver-ride-actions{gap:8px!important}
.driver-dashboard .accept-ride-btn{min-height:46px;border-radius:14px!important;font-size:13px!important;box-shadow:0 8px 22px rgba(25,200,255,.16)}
.driver-dashboard .reject-ride-btn{min-height:46px;border-radius:14px!important}

/* Mobile: prioritize the action, keep cards compact and thumb-friendly */
@media(max-width:700px){
  .dashboard{padding:9px 9px 108px!important}
  #riderDashboard .dashboard-header{padding:18px!important;border-radius:21px!important}
  #riderDashboard .dashboard-header h2{font-size:23px!important}
  #riderDashboard .rider-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #riderDashboard .stat-card{padding:13px!important;gap:11px!important}
  #riderDashboard .stat-icon{width:40px!important;height:40px!important;font-size:17px!important}
  #riderDashboard .stat-content h3{font-size:18px!important}
  #riderDashboard .stat-content p{font-size:11px!important}
  #riderDashboard .book-ride-card,#riderDashboard .ride-history{padding:16px!important;border-radius:20px!important}
  #riderDashboard #rideMap{height:285px!important}
  #riderDashboard .row-2col{grid-template-columns:1fr!important;gap:10px!important}
  #riderDashboard .ride-item{padding:13px!important}
  .driver-dashboard{padding:10px 9px 108px!important}
  .driver-dashboard .driver-topbar{gap:9px!important}
  .driver-dashboard .driver-brand span{font-size:11px!important}
  .driver-dashboard .driver-action-card{min-height:72px!important;padding:14px!important;border-radius:17px!important}
  .driver-dashboard .driver-action-card i{font-size:20px!important}
  .driver-dashboard .driver-ride-request{padding:16px!important;border-radius:19px!important}
  .driver-dashboard .driver-ride-route{font-size:16px!important;padding-right:60px}
  .driver-dashboard .driver-ride-actions{position:sticky;bottom:72px;z-index:5;background:rgba(7,11,18,.92);padding-top:8px;margin:0 -2px -3px;backdrop-filter:blur(10px)}
}
@media(max-width:390px){
  #riderDashboard .rider-stats{gap:8px!important}
  #riderDashboard .stat-card{min-height:70px!important}
  #riderDashboard .stat-icon{width:36px!important;height:36px!important}
  .driver-dashboard .driver-actions{gap:8px!important}
  .driver-dashboard .driver-action-card{padding:11px!important}
}

/* ===== [28] unnamed ===== */
/* ============================================================
   RIDESWIFT 2.2 — PREMIUM BOOKING EXPERIENCE
   ============================================================ */
.rs-booking-progress{display:flex;align-items:center;gap:8px;margin:12px 0 10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:linear-gradient(135deg,rgba(0,212,255,.045),rgba(255,255,255,.018));}
.rs-booking-progress>i{font-size:11px;color:rgba(255,255,255,.60);}
.rs-step{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.60);font-size:11px;font-weight:700;transition:.2s ease;}
.rs-step span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);font-size:11px;}
.rs-step.active{color:#eafcff}.rs-step.active span{background:linear-gradient(135deg,#00d4ff,#6c5ce7);border-color:transparent;color:#061019;box-shadow:0 5px 16px rgba(0,212,255,.22);}
.rs-step.done{color:#b9ffd9}.rs-step.done span{background:#00ff88;border-color:#00ff88;color:#061019;}
.rs-booking-summary{border:1px solid rgba(0,212,255,.15);border-radius:18px;padding:13px;margin:0 0 12px;background:linear-gradient(145deg,rgba(0,212,255,.055),rgba(108,92,231,.035) 55%,rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.rs-summary-route{display:flex;align-items:center;gap:8px}.rs-route-point{display:flex;align-items:center;gap:7px;min-width:0;flex:1}.rs-route-point small{display:block;font-size:10px;letter-spacing:.7px;color:rgba(255,255,255,.60);font-weight:800}.rs-route-point strong{display:block;font-size:11px;color:#f2f7fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}.rs-point-dot{width:9px;height:9px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.8)}.rs-point-dot.pickup{background:#00d4ff;box-shadow:0 0 10px rgba(0,212,255,.45)}.rs-point-dot.destination{background:#ff6b6b;box-shadow:0 0 10px rgba(255,107,107,.35)}.rs-route-line{width:22px;height:1px;background:linear-gradient(90deg,#00d4ff,#ff6b6b);opacity:.6;flex:none}.rs-summary-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}.rs-summary-meta span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);font-size:11px;color:rgba(255,255,255,.64)}.rs-summary-meta i{color:#00d4ff}.rs-summary-meta b{color:#eaf2f8;font-size:11px}.rs-summary-meta .rs-estimate{margin-left:auto}.rs-summary-meta .rs-estimate i{color:#ffd93d}
#riderDashboard #bookRideBtn{position:relative;overflow:hidden;box-shadow:0 10px 24px rgba(0,212,255,.16),inset 0 1px 0 rgba(255,255,255,.16)!important}
#riderDashboard #bookRideBtn:before{content:"";position:absolute;top:0;bottom:0;width:55px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:rsBookShine 3.5s ease-in-out infinite;}
@keyframes rsBookShine{0%,65%{left:-80px}85%,100%{left:120%}}
@media(max-width:600px){.rs-booking-progress{padding:8px 9px;gap:5px;margin:8px 0}.rs-step{font-size:10px;gap:4px}.rs-step span{width:21px;height:21px;font-size:11px}.rs-booking-progress>i{font-size:10px}.rs-booking-summary{padding:11px;border-radius:15px}.rs-summary-meta{gap:5px}.rs-summary-meta .rs-estimate{margin-left:0;width:100%;justify-content:center}.rs-route-point strong{font-size:11px}}
@media(max-width:380px){.rs-step b{display:none}.rs-booking-progress{justify-content:center}.rs-booking-summary{margin-bottom:9px}.rs-summary-meta span{padding:5px 7px}}

/* ===== [29] rideswift-passenger-compact-v25 ===== */
/* =========================================================
   RIDESWIFT PASSENGER COMPACT EXPERIENCE v2.5
   Reduce card overload while preserving core ride functions.
   ========================================================= */
#riderDashboard .rider-premium-hero,
#riderDashboard .rider-quick-grid,
#riderDashboard .rider-insights .premium-panel:nth-child(2){
    display:none !important;
}

#riderDashboard .rider-insights{
    display:block !important;
    margin:0 0 16px !important;
}

#riderDashboard .rider-insights .premium-panel:first-child{
    border-radius:16px !important;
    padding:12px 14px !important;
    margin:0 !important;
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(255,255,255,.075) !important;
    box-shadow:none !important;
}

#riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header{
    margin-bottom:8px !important;
}

#riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header h4{
    font-size:12px !important;
}

#riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header span{
    font-size:11px !important;
}

#riderDashboard .ride-status-strip{
    min-height:48px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
}

#riderDashboard .ride-status-strip .status-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
}

#riderDashboard .ride-status-strip strong{font-size:12px !important}
#riderDashboard .ride-status-strip small{font-size:11px !important}

#riderDashboard .premium-cancel-ride-btn{
    margin-top:7px !important;
    padding:7px 10px !important;
    font-size:11px !important;
}

#riderDashboard .book-ride-card{
    margin-top:0 !important;
}

/* Passenger does not need an online/offline control. */
#riderDashboard .rider-mobile-online{display:none !important}

/* Keep the header focused on notifications + account actions. */
#riderDashboard .rider-header-actions > .driver-icon-btn[title="Road Safety & Learning"]{
    display:none !important;
}

/* Make the booking card feel like the single primary workspace. */
#riderDashboard .book-ride-card{
    border-radius:20px !important;
    box-shadow:0 14px 35px rgba(0,0,0,.18) !important;
}

@media(max-width:700px){
    #riderDashboard .dashboard-header{margin-bottom:12px !important}
    #riderDashboard .rider-greeting-copy p{margin-bottom:0 !important}
    #riderDashboard .rider-greeting-copy .role-badge{display:none !important}
    #riderDashboard .rider-insights{margin-bottom:10px !important}
    #riderDashboard .rider-insights .premium-panel:first-child{padding:10px 11px !important}
    #riderDashboard .rider-insights .premium-panel:first-child .premium-panel-header{margin-bottom:6px !important}
}

/* ===== [30] rideswift-ux-refine-v3 ===== */
/* RideSwift UX refine v3 — additive layer. Token source of truth + accessibility floors. */
:root{
  --rs-gold:#d4af37; --rs-gold-soft:#f3df9b; --rs-gold-deep:#9b7617;
  --rs-ok:#4ade80; --rs-warn:#fbbf24; --rs-danger:#fb7185; --rs-info:#67e8f9;
  --rs-text:#f5f3ed; --rs-text-2:rgba(255,255,255,.72); --rs-text-3:rgba(255,255,255,.60);
  --rs-tap:44px;
}
/* Visible keyboard focus everywhere (ID-level specificity so older !important rules don't hide it) */
:is(#rsx,body) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(243,223,155,.92)!important; outline-offset:2px!important;
}
/* Section labels: sentence case, readable size, no tracked-out caps */
html body :is(#rsx,body) .section-label.section-label{
  text-transform:none!important; letter-spacing:.01em!important;
  font-size:12px!important; font-weight:700!important; color:var(--rs-text-2)!important;
}
/* Touch targets on touch devices */
@media (pointer:coarse){
  :is(#riderDashboard,#driverDashboard,#adminDashboard,#merchantDashboard,#authSection,#confirmModal,.rs-dialog)
  :is(button,[role="button"],select,input[type="button"],input[type="submit"]):not([class*="maplibre"]):not([class*="leaflet"]):not(.rs-compact){min-height:var(--rs-tap)}
  :is(#riderDashboard,#driverDashboard,#adminDashboard,#merchantDashboard,#authSection,#confirmModal)
  button:has(>i:only-child):not([class*="maplibre"]):not([class*="leaflet"]):not(.rs-compact){min-width:var(--rs-tap)}
}
/* 16px form text on phones stops iOS zooming the page on focus */
@media (max-width:760px){
  :is(#rsx,body) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="maplibre"]){font-size:16px!important}
}
/* Reduced motion everywhere (spinners keep turning so loading stays visible) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fa-spin,[class*="spinner"],[class*="loader"]{animation-duration:1s!important;animation-iteration-count:infinite!important}
}
/* In-page text dialog (replaces window.prompt) */
.rs-dialog{border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#0c141d;color:var(--rs-text);padding:0;width:min(92vw,440px)}
.rs-dialog::backdrop{background:rgba(2,6,12,.72);backdrop-filter:blur(4px)}
.rs-dialog-body{padding:22px;display:grid;gap:14px}
.rs-dialog h3{margin:0;font-size:18px;font-weight:800}
.rs-dialog textarea{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;background:#07111a;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;font:inherit;font-size:16px;line-height:1.45}
.rs-dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.rs-dialog-actions button{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--rs-text);font-weight:700;cursor:pointer}
.rs-dialog-actions .rs-dlg-ok{background:linear-gradient(135deg,var(--rs-gold-soft),var(--rs-gold));color:#17130a;border-color:transparent}
/* Confirm modal: let long messages wrap and keep it inside small screens */
#confirmModal .confirm-content{max-width:min(92vw,440px);overflow-wrap:anywhere}
#confirmModal .confirm-content h3{font-size:18px}

/* ===== [31] auth-card fixes (back link, password eye) ===== */
#authSection .password-wrapper .password-toggle{transform:none!important;top:5px!important;bottom:5px!important;height:auto!important;margin:0!important;line-height:1}
#authSection .password-wrapper .password-toggle i{display:block;line-height:1}
#authSection .auth-back-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:-6px 0 6px -8px;padding:0 10px;border-radius:10px;color:#aeb9c9;font-size:13px;font-weight:600;text-decoration:none;transition:color .15s,background .15s}
#authSection .auth-back-link:hover{color:#f3df9b;background:rgba(255,255,255,.06)}

/* ===== [32] booking form: vehicle types on one full-width row, no payment selector ===== */
#riderDashboard #bookRideForm > .booking-vehicle-payment-row{display:block!important;width:100%!important}
#riderDashboard #bookRideForm .vehicle-type-section{width:100%!important;max-width:none!important;margin-bottom:12px!important}
#riderDashboard #vehicleType + .select-card-options{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
#riderDashboard #vehicleType + .select-card-options .select-card-option{min-width:0!important}
#paymentMethod{display:none!important}
@media (min-width:601px) and (max-width:900px){
  #riderDashboard #vehicleType + .select-card-options{gap:8px!important}
  #riderDashboard #vehicleType + .select-card-options .select-card-option{flex-direction:column!important;justify-content:center!important;text-align:center!important;min-height:92px!important;padding:10px 6px!important}
  #riderDashboard #vehicleType + .select-card-options .select-card-text{align-items:center!important}
}

/* ===== [33] passenger delivery: payment selector removed (hidden field defaults to cash) ===== */
#passengerDeliveryPayment{display:none!important}


/* ZEDGO unified passenger, driver and admin branding */
:root{--zedgo-navy:#101d33;--zedgo-gold:#f5b82e;--zedgo-white:#fff}
.zedgo-header-logo{object-fit:contain!important;display:block!important;border-radius:12px!important}
.zedgo-panel-logo{width:54px;height:54px;object-fit:contain;border-radius:12px;flex:0 0 auto;display:block}
.driver-brand{display:flex!important;align-items:center!important;gap:12px!important}
.driver-brand-icon{display:none!important}
.zedgo-panel-brand-text{display:flex;flex-direction:column;gap:3px}
.zedgo-panel-brand-text strong{font-size:20px!important;font-weight:900!important;letter-spacing:.5px;color:#f5b82e!important}
.zedgo-panel-brand-text span{font-size:12px;opacity:.75}
.zedgo-admin-brand{display:flex;align-items:center;gap:14px;min-width:0}
.zedgo-admin-brand h2{margin:0 0 4px!important;color:#fff!important}
.zedgo-admin-brand p{margin:0!important;color:rgba(255,255,255,.72)!important}
#adminDashboard .dashboard-header{background:linear-gradient(135deg,#101d33,#172b49)!important;border:1px solid rgba(245,184,46,.28)!important}
#adminDashboard .role-badge{background:rgba(245,184,46,.14)!important;color:#f5b82e!important;border-color:rgba(245,184,46,.35)!important}
#driverDashboard .driver-topbar{background:linear-gradient(135deg,#101d33,#172b49)!important;border:1px solid rgba(245,184,46,.25)!important}
#driverDashboard .driver-topbar .driver-icon-btn{border-color:rgba(245,184,46,.25)!important}
#riderDashboard .dashboard-header,#driverDashboard .dashboard-header{border-color:rgba(245,184,46,.25)!important}
@media(max-width:600px){.zedgo-panel-logo{width:42px;height:42px}.zedgo-panel-brand-text strong{font-size:17px!important}.zedgo-admin-brand{gap:9px}.zedgo-admin-brand h2{font-size:18px!important}}