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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    width:100%;
    max-width:100%;
    -webkit-text-size-adjust:100%;
}

body.driver-page{
    width:100%;
    min-width:320px;
    max-width:100%;
    margin:0;
    overflow-x:hidden;

    background:#f8fafc;
    color:#111827;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.6;
}

.driver-container{
    width:min(calc(100% - 40px), 1180px);
    margin:0 auto;
}


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

.driver-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:#07111f;
    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.driver-header-inner{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.driver-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:18px;
    font-weight:900;
    text-decoration:none;
}

.driver-logo span{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#22c55e;
    color:#fff;
}

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

.driver-name{
    color:#e2e8f0;

    font-size:14px;
    font-weight:700;
}

.driver-logout{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 15px;

    border:1px solid rgba(239,68,68,.45);
    border-radius:22px;

    color:#fca5a5;

    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.driver-logout:hover{
    background:#ef4444;
    border-color:#ef4444;
    color:#fff;
}


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

.driver-dashboard{
    min-height:calc(100vh - 72px);
    padding:46px 0 80px;
}

.driver-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;

    margin-bottom:28px;
}

.driver-welcome > div:first-child > span{
    display:inline-block;

    margin-bottom:7px;

    color:#22c55e;

    font-size:12px;
    font-weight:800;
    letter-spacing:1.3px;
}

.driver-welcome h1{
    margin:0 0 8px;

    color:#111827;

    font-size:38px;
    line-height:1.2;
}

.driver-welcome p{
    margin:0;

    color:#64748b;

    line-height:1.7;
}


/* =========================================
   ONLINE PANEL
========================================= */

.driver-online-panel{
    display:flex;
    align-items:center;
    gap:12px;

    flex-shrink:0;
}

.driver-status-badge{
    min-height:34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 13px;

    border-radius:18px;

    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.driver-status-badge.status-online{
    background:#dcfce7;
    color:#166534;
}

.driver-status-badge.status-offline{
    background:#e2e8f0;
    color:#475569;
}

.driver-status-badge.status-busy{
    background:#fef3c7;
    color:#92400e;
}

.driver-online-button{
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 18px;

    border:0;
    border-radius:24px;

    background:#22c55e;
    color:#fff;

    font-size:13px;
    font-weight:800;

    cursor:pointer;
}

.driver-online-button:hover{
    background:#16a34a;
}

.driver-online-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* =========================================
   ALERTS
========================================= */

.driver-alert{
    display:flex;
    align-items:flex-start;
    gap:13px;

    margin-bottom:25px;
    padding:17px;

    border-radius:15px;
}

.driver-alert i{
    margin-top:3px;
    flex-shrink:0;
}

.driver-alert strong{
    display:block;
    margin-bottom:4px;
}

.driver-alert p{
    margin:0;
    font-size:13px;
    line-height:1.7;
}

.driver-alert-warning{
    border:1px solid #fde68a;
    background:#fffbeb;
    color:#92400e;
}


/* =========================================
   SUMMARY CARDS
========================================= */

.driver-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;

    margin-bottom:26px;
}

.driver-summary-card{
    padding:22px;

    border:1px solid #e5e7eb;
    border-radius:18px;

    background:#fff;

    box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.driver-summary-card > div{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:16px;

    border-radius:14px;

    background:rgba(34,197,94,.12);
    color:#22c55e;

    font-size:20px;
}

.driver-summary-card span,
.driver-summary-card strong{
    display:block;
}

.driver-summary-card span{
    margin-bottom:5px;

    color:#64748b;

    font-size:12px;
}

.driver-summary-card strong{
    color:#111827;

    font-size:18px;
}


/* =========================================
   MAIN GRID
========================================= */

.driver-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:24px;
    align-items:start;
}

.driver-dashboard-main,
.driver-dashboard-sidebar{
    display:grid;
    gap:22px;
}


/* =========================================
   COMMON CARD
========================================= */

.driver-card{
    padding:26px;

    border:1px solid #e5e7eb;
    border-radius:20px;

    background:#fff;

    box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.driver-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin-bottom:16px;
}

.driver-card-heading span{
    color:#22c55e;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
}

.driver-card-heading h2{
    margin:5px 0 0;

    color:#111827;

    font-size:22px;
}

.driver-card-heading > i{
    color:#22c55e;

    font-size:23px;
}

.driver-card-description{
    margin:0 0 19px;

    color:#64748b;

    font-size:13px;
    line-height:1.75;
}


/* =========================================
   LOCATION
========================================= */

.driver-location-button{
    min-height:47px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:0 17px;

    border:0;
    border-radius:24px;

    background:#07111f;
    color:#fff;

    font-size:13px;
    font-weight:800;

    cursor:pointer;
}

.driver-location-button:hover{
    background:#0f172a;
}

.driver-location-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.driver-location-status{
    margin:15px 0;

    color:#64748b;

    font-size:12px;
}

.driver-location-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.driver-location-grid div{
    padding:14px;

    border-radius:13px;

    background:#f8fafc;
}

.driver-location-grid small,
.driver-location-grid strong{
    display:block;
}

.driver-location-grid small{
    margin-bottom:5px;

    color:#64748b;

    font-size:10px;
}

.driver-location-grid strong{
    color:#111827;

    font-size:12px;
    word-break:break-word;
}


/* =========================================
   CURRENT RIDE
========================================= */

.driver-current-ride{
    padding:20px;

    border-radius:16px;

    background:#f8fafc;
}

.driver-route-point{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.driver-route-point > i{
    margin-top:4px;

    color:#22c55e;
}

.driver-route-point small,
.driver-route-point strong{
    display:block;
}

.driver-route-point small{
    margin-bottom:3px;

    color:#64748b;

    font-size:10px;
}

.driver-route-point strong{
    color:#111827;

    font-size:14px;
}

.driver-route-line{
    width:2px;
    height:32px;

    margin-left:6px;

    background:#cbd5e1;
}

.driver-ride-customer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin-top:20px;
    padding-top:18px;

    border-top:1px solid #e2e8f0;
}

.driver-ride-customer small,
.driver-ride-customer strong{
    display:block;
}

.driver-ride-customer small{
    color:#64748b;

    font-size:10px;
}

.driver-ride-customer strong{
    margin-top:3px;

    font-size:13px;
}

.driver-ride-customer a{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 14px;

    border-radius:21px;

    background:#22c55e;
    color:#fff;

    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.driver-primary-link{
    min-height:45px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    margin-top:17px;

    border-radius:23px;

    background:#07111f;
    color:#fff;

    font-size:13px;
    font-weight:800;
    text-decoration:none;
}


/* =========================================
   VEHICLE DETAILS
========================================= */

.driver-vehicle-details{
    display:grid;
    gap:10px;
}

.driver-vehicle-details div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:12px 0;

    border-bottom:1px solid #edf2f7;
}

.driver-vehicle-details div:last-child{
    border-bottom:0;
}

.driver-vehicle-details small{
    color:#64748b;

    font-size:11px;
}

.driver-vehicle-details strong{
    color:#111827;

    font-size:12px;
    text-align:right;
}


/* =========================================
   EMPTY STATE
========================================= */

.driver-empty-state{
    padding:38px 18px;

    text-align:center;
}

.driver-empty-state > i{
    color:#22c55e;

    font-size:40px;
}

.driver-empty-state h3{
    margin:14px 0 7px;

    font-size:18px;
}

.driver-empty-state p{
    max-width:430px;
    margin:0 auto;

    color:#64748b;

    font-size:13px;
    line-height:1.7;
}

.driver-empty-state.small{
    padding:20px 8px;
}


/* =========================================
   SUPPORT
========================================= */

.driver-support-card > span{
    color:#22c55e;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
}

.driver-support-card h3{
    margin:7px 0 15px;

    font-size:19px;
}

.driver-support-card a{
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:10px;

    border:1px solid #dbe3ec;
    border-radius:22px;

    color:#334155;

    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.driver-support-card a:hover{
    border-color:#22c55e;
    color:#16a34a;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:950px){

    .driver-container{
        width:min(calc(100% - 32px), 900px);
    }

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

    .driver-dashboard-sidebar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


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

@media(max-width:700px){

    .driver-container{
        width:calc(100% - 24px);
    }

    .driver-header-inner{
        min-height:66px;
    }

    .driver-logo{
        font-size:16px;
    }

    .driver-logo span{
        width:38px;
        height:38px;
    }

    .driver-name{
        display:none;
    }

    .driver-logout{
        min-height:38px;
        padding:0 12px;
    }

    .driver-dashboard{
        padding:32px 0 60px;
    }

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

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

    .driver-online-panel{
        width:100%;
        justify-content:space-between;
    }

    .driver-online-button{
        flex:1;
    }

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

    .driver-card{
        padding:21px 16px;
    }

    .driver-card-heading{
        align-items:flex-start;
    }

    .driver-location-button{
        width:100%;
    }

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

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

    .driver-ride-customer{
        align-items:flex-start;
        flex-direction:column;
    }

    .driver-ride-customer a{
        width:100%;
    }
}


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

@media(max-width:390px){

    .driver-container{
        width:calc(100% - 18px);
    }

    .driver-logout{
        width:38px;
        padding:0;
        font-size:0;
    }

    .driver-logout i{
        font-size:14px;
    }

    .driver-online-panel{
        align-items:stretch;
        flex-direction:column;
    }

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


/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }
}

/* =====================================================
   DRIVER REGISTER PAGE
===================================================== */

.driver-auth-page{
    min-height:100vh;
    background:#f1f5f9;
    padding:60px 20px;
}

.driver-register-card{
    width:100%;
    max-width:920px;
    margin:auto;

    background:#fff;

    border-radius:24px;

    padding:45px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.auth-logo{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin-bottom:30px;

    color:#22c55e;

    font-size:28px;
    font-weight:800;

    text-decoration:none;

}

.auth-logo i{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#22c55e;
    color:#fff;

    font-size:24px;

}

.auth-heading{
    text-align:center;
    margin-bottom:35px;
}

.auth-heading span{

    color:#22c55e;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}

.auth-heading h1{

    margin:12px 0;

    color:#111827;

    font-size:38px;

}

.auth-heading p{

    max-width:620px;

    margin:auto;

    color:#64748b;

    line-height:1.8;

}

/* ---------------- GRID ---------------- */

.driver-register-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/* ---------------- FIELD ---------------- */

.auth-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.auth-field label{

    color:#111827;

    font-size:14px;

    font-weight:700;

}

.auth-field label span{

    color:#ef4444;

}

.auth-field input,
.auth-field select{

    width:100%;

    height:54px;

    border:1px solid #dbe2ea;

    border-radius:14px;

    padding:0 16px;

    outline:none;

    background:#fff;

    font-size:15px;

    transition:.3s;

}

.auth-field input:focus,
.auth-field select:focus{

    border-color:#22c55e;

    box-shadow:0 0 0 4px rgba(34,197,94,.12);

}

/* ---------------- PASSWORD ---------------- */

.password-field{

    position:relative;

}

.password-field input{

    padding-right:55px;

}

.toggle-password{

    position:absolute;

    right:0;

    top:0;

    width:54px;

    height:54px;

    border:none;

    background:none;

    cursor:pointer;

    color:#64748b;

    font-size:17px;

}

/* ---------------- CHECKBOX ---------------- */

.auth-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:25px;

    color:#475569;

    font-size:14px;

    line-height:1.7;

}

.auth-check input{

    width:18px;

    height:18px;

    margin-top:2px;

}

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

.auth-submit{

    width:100%;

    height:58px;

    margin-top:28px;

    border:none;

    border-radius:35px;

    background:#22c55e;

    color:#fff;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}

.auth-submit:hover{

    background:#16a34a;

    transform:translateY(-3px);

}

/* ---------------- ALERT ---------------- */

.auth-alert{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px;

    margin-bottom:25px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

}

.auth-alert-error{

    background:#fef2f2;

    color:#dc2626;

    border:1px solid #fecaca;

}

.auth-alert-success{

    background:#ecfdf5;

    color:#15803d;

    border:1px solid #bbf7d0;

}

/* ---------------- LINKS ---------------- */

.auth-switch{

    margin-top:25px;

    text-align:center;

    color:#64748b;

}

.auth-switch a{

    color:#22c55e;

    font-weight:700;

    text-decoration:none;

}

.auth-switch a:hover{

    text-decoration:underline;

}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

.driver-register-card{

    padding:35px 25px;

}

.driver-register-grid{

    grid-template-columns:1fr;

}

}

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

@media(max-width:600px){

.driver-auth-page{

    padding:20px 12px;

}

.driver-register-card{

    border-radius:18px;

    padding:22px 16px;

}

.auth-logo{

    font-size:22px;

}

.auth-logo i{

    width:48px;

    height:48px;

    font-size:18px;

}

.auth-heading h1{

    font-size:28px;

}

.auth-heading p{

    font-size:14px;

}

.auth-submit{

    height:54px;

}

}

/* =====================================================
   DRIVER REGISTER PAGE
===================================================== */

.driver-auth-page{
    min-height:100vh;
    background:#f1f5f9;
    padding:60px 20px;
}

.driver-register-card{
    width:100%;
    max-width:920px;
    margin:auto;

    background:#fff;

    border-radius:24px;

    padding:45px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.auth-logo{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin-bottom:30px;

    color:#22c55e;

    font-size:28px;
    font-weight:800;

    text-decoration:none;

}

.auth-logo i{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#22c55e;
    color:#fff;

    font-size:24px;

}

.auth-heading{
    text-align:center;
    margin-bottom:35px;
}

.auth-heading span{

    color:#22c55e;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}

.auth-heading h1{

    margin:12px 0;

    color:#111827;

    font-size:38px;

}

.auth-heading p{

    max-width:620px;

    margin:auto;

    color:#64748b;

    line-height:1.8;

}

/* ---------------- GRID ---------------- */

.driver-register-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/* ---------------- FIELD ---------------- */

.auth-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.auth-field label{

    color:#111827;

    font-size:14px;

    font-weight:700;

}

.auth-field label span{

    color:#ef4444;

}

.auth-field input,
.auth-field select{

    width:100%;

    height:54px;

    border:1px solid #dbe2ea;

    border-radius:14px;

    padding:0 16px;

    outline:none;

    background:#fff;

    font-size:15px;

    transition:.3s;

}

.auth-field input:focus,
.auth-field select:focus{

    border-color:#22c55e;

    box-shadow:0 0 0 4px rgba(34,197,94,.12);

}

/* ---------------- PASSWORD ---------------- */

.password-field{

    position:relative;

}

.password-field input{

    padding-right:55px;

}

.toggle-password{

    position:absolute;

    right:0;

    top:0;

    width:54px;

    height:54px;

    border:none;

    background:none;

    cursor:pointer;

    color:#64748b;

    font-size:17px;

}

/* ---------------- CHECKBOX ---------------- */

.auth-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:25px;

    color:#475569;

    font-size:14px;

    line-height:1.7;

}

.auth-check input{

    width:18px;

    height:18px;

    margin-top:2px;

}

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

.auth-submit{

    width:100%;

    height:58px;

    margin-top:28px;

    border:none;

    border-radius:35px;

    background:#22c55e;

    color:#fff;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}

.auth-submit:hover{

    background:#16a34a;

    transform:translateY(-3px);

}

/* ---------------- ALERT ---------------- */

.auth-alert{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px;

    margin-bottom:25px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

}

.auth-alert-error{

    background:#fef2f2;

    color:#dc2626;

    border:1px solid #fecaca;

}

.auth-alert-success{

    background:#ecfdf5;

    color:#15803d;

    border:1px solid #bbf7d0;

}

/* ---------------- LINKS ---------------- */

.auth-switch{

    margin-top:25px;

    text-align:center;

    color:#64748b;

}

.auth-switch a{

    color:#22c55e;

    font-weight:700;

    text-decoration:none;

}

.auth-switch a:hover{

    text-decoration:underline;

}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

.driver-register-card{

    padding:35px 25px;

}

.driver-register-grid{

    grid-template-columns:1fr;

}

}

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

@media(max-width:600px){

.driver-auth-page{

    padding:20px 12px;

}

.driver-register-card{

    border-radius:18px;

    padding:22px 16px;

}

.auth-logo{

    font-size:22px;

}

.auth-logo i{

    width:48px;

    height:48px;

    font-size:18px;

}

.auth-heading h1{

    font-size:28px;

}

.auth-heading p{

    font-size:14px;

}

.auth-submit{

    height:54px;

}

}

/* =========================================
   LIVE RIDE REQUEST MODAL
========================================= */

.driver-ride-modal{
    position:fixed;
    inset:0;
    z-index:10000;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;
}

.driver-ride-modal.active{
    display:flex;
}

.driver-ride-modal-overlay{
    position:absolute;
    inset:0;

    background:rgba(3,7,18,.78);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.driver-ride-modal-dialog{
    position:relative;
    z-index:2;

    width:min(100%,520px);
    max-height:calc(100vh - 40px);
    overflow-y:auto;

    padding:34px;

    border-radius:24px;

    background:#fff;

    box-shadow:0 30px 90px rgba(0,0,0,.32);

    animation:driverRideModalShow .25s ease;
}

@keyframes driverRideModalShow{
    from{
        opacity:0;
        transform:translateY(24px) scale(.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.driver-ride-modal-close{
    position:absolute;
    top:16px;
    right:16px;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:#f1f5f9;
    color:#111827;

    cursor:pointer;
}

.driver-new-ride-icon{
    width:66px;
    height:66px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:18px;

    border-radius:19px;

    background:rgba(34,197,94,.13);
    color:#22c55e;

    font-size:27px;
}

.driver-new-ride-label{
    color:#22c55e;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.driver-ride-modal-dialog h2{
    margin:8px 0 9px;

    color:#111827;

    font-size:28px;
    line-height:1.2;
}

.driver-new-ride-description{
    margin:0 0 25px;

    color:#64748b;

    font-size:13px;
    line-height:1.7;
}

.driver-new-ride-route{
    padding:20px;

    border-radius:16px;

    background:#f8fafc;
}

.driver-new-ride-route > div{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.driver-new-ride-route i{
    margin-top:4px;
    color:#22c55e;
}

.driver-new-ride-route span,
.driver-new-ride-route small,
.driver-new-ride-route strong{
    display:block;
}

.driver-new-ride-route small{
    margin-bottom:3px;

    color:#64748b;
    font-size:10px;
}

.driver-new-ride-route strong{
    color:#111827;
    font-size:14px;
}

.driver-new-ride-line{
    width:2px;
    height:31px;

    margin-left:6px;

    background:#cbd5e1;
}

.driver-new-ride-info{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;

    margin-top:17px;
}

.driver-new-ride-info > div{
    padding:14px;

    border:1px solid #e5e7eb;
    border-radius:13px;
}

.driver-new-ride-info small,
.driver-new-ride-info strong{
    display:block;
}

.driver-new-ride-info small{
    margin-bottom:5px;

    color:#64748b;
    font-size:10px;
}

.driver-new-ride-info strong{
    color:#111827;
    font-size:13px;
    word-break:break-word;
}

.driver-new-ride-message{
    min-height:22px;

    margin-top:14px;

    color:#64748b;

    font-size:12px;
    text-align:center;
}

.driver-new-ride-message.error{
    color:#dc2626;
}

.driver-new-ride-message.success{
    color:#16a34a;
}

.driver-new-ride-actions{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:12px;

    margin-top:18px;
}

.driver-decline-ride,
.driver-accept-ride{
    min-height:51px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:27px;

    font-size:13px;
    font-weight:800;

    cursor:pointer;
}

.driver-decline-ride{
    border:1px solid #fecaca;

    background:#fff;
    color:#dc2626;
}

.driver-accept-ride{
    border:0;

    background:#22c55e;
    color:#fff;
}

.driver-accept-ride:hover{
    background:#16a34a;
}

.driver-decline-ride:disabled,
.driver-accept-ride:disabled{
    opacity:.6;
    cursor:not-allowed;
}

body.driver-modal-open{
    overflow:hidden;
}

@media(max-width:560px){

    .driver-ride-modal{
        padding:10px;
    }

    .driver-ride-modal-dialog{
        padding:27px 17px;
        border-radius:19px;
    }

    .driver-ride-modal-dialog h2{
        font-size:24px;
    }

    .driver-new-ride-info{
        grid-template-columns:1fr;
    }

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