:root{
    --bg:#f3f4f6;
    --panel:#ffffff;
    --border:#d7dee8;
    --text:#212529;
    --muted:#6c757d;
    --nav:#1f252d;
    --shadow:0 1px 3px rgba(16,24,40,.06);
    --radius:18px;
}

html, body{
    margin:0;
    padding:0;
}

body{
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.navbar{
    background:var(--nav)!important;
    min-height:64px;
}

.navbar .navbar-brand{
    font-weight:700;
    color:#fff!important;
}

.navbar .btn {
    white-space: nowrap;
}

.driver-nav-top{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.driver-nav-main{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
}

.driver-nav-tabs{
    width:100%;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.navbar .btn{
    white-space:nowrap;
}

.small-note{
    font-size:13px;
    color:#6c757d;
}

.map-links{
    margin:12px 0;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
}

.map-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    color:#6b7280;
    margin-bottom:4px;
}

.map-address{
    font-size:15px;
    font-weight:600;
    margin-bottom:10px;
}

.map-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.map-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
    border-radius:8px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
}

.map-buttons a:nth-child(2){
    background:#111827;
}

.map-buttons a:nth-child(3){
    background:#16a34a;
}

@media(max-width:600px){
    .map-buttons{
        display:grid;
        grid-template-columns:1fr;
    }

    .map-buttons a{
        width:100%;
    }
}

.wait-btn {
    background-color: #FFC107 !important; /* Taxi yellow */
    color: #000 !important;
    border: 1px solid #e0a800;
}

.wait-btn:hover {
    background-color: #e0a800 !important;
    color: #000 !important;
}

.wait-btn:disabled {
    background-color: #f5d87a !important;
    color: #333 !important;
}

.page-wrap{
    max-width:1200px;
    margin:28px auto 40px;
    padding:0 18px;
}

.page-header{
    margin-bottom:18px;
}

.page-title{
    font-size:2rem;
    line-height:1.15;
    font-weight:700;
    margin:0 0 6px;
}

.page-subtitle{
    margin:0;
    color:var(--muted);
    font-size:1rem;
}

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.panel-pad{
    padding:22px;
}

.empty-state{
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:14px;
}

.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
}

.stat-label{
    color:var(--muted);
    font-size:.92rem;
    margin-bottom:6px;
}

.stat-value{
    font-size:1.3rem;
    font-weight:700;
    line-height:1.2;
}

.ride-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ride-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:18px;
}

.ride-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.ride-title{
    font-size:1.15rem;
    font-weight:700;
    line-height:1.25;
    margin:0 0 4px;
}

.ride-meta{
    font-size:.94rem;
    color:var(--muted);
}

.ride-price{
    font-size:1.35rem;
    font-weight:700;
    text-align:right;
    line-height:1.2;
}

.ride-block{
    margin-bottom:12px;
}

.ride-label{
    display:block;
    font-weight:700;
    margin-bottom:2px;
}

.ride-address{
    word-break:break-word;
}

.ride-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:14px;
}

.action-btn{
    min-width:120px;
    text-align:center;
    font-weight:600;
}

.ride-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:14px;
}

.reject-btn{
    background-color:#dc3545;
    border-color:#dc3545;
}

.accept-btn{
    background-color:#2e8b57;
    border-color:#2e8b57;
}

.action-btn:active{
    transform:scale(0.96);
}

.badge-status{
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.2px;
    padding:.45rem .6rem;
    border-radius:.6rem;
}

.section-gap{
    margin-top:16px;
}

.login-wrap{
    max-width:520px;
    margin:48px auto;
}

.page-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
}

.page-card h2,
.page-card h3{
    margin-top:0;
}

.btn-sm {
  border-radius: 10px;
}

.d-flex.gap-1 {
  gap: 6px !important;
}

@media (max-width: 768px){
    .page-wrap{
        margin:18px auto 28px;
        padding:0 12px;
    }

    .page-title{
        font-size:1.7rem;
    }

    .ride-card,
    .page-card,
    .panel-pad{
        padding:16px;
    }

    .ride-price{
        text-align:left;
    }
}