/* ================================================= */
/* SPARE DRIVERS™ MASTER STYLE.CSS V2.2              */
/* PREMIUM BLACK + GOLD + WHITE GLASS EDITION        */
/* ================================================= */

/* ================================================= */
/* SECTION 01 : ROOT VARIABLES                       */
/* COLORS | SHADOWS | GLASS | Z-INDEX                */
/* ================================================= */

:root{

    /* COLORS */
    --bg-dark:#050505;
    --bg-card:rgba(255,255,255,0.04);
    --bg-glass:rgba(255,255,255,0.06);

    --gold:#D4AF37;
    --gold-light:#E5C45A;
    --gold-dark:#B88A0F;

    --text-main:#FFFFFF;
    --text-muted:#BDBDBD;

    --success:#22C55E;
    --danger:#EF4444;
    --warning:#F59E0B;

    --border-light:rgba(255,255,255,0.08);

    /* SHADOWS */
    --shadow-sm:0 2px 8px rgba(0,0,0,.15);
    --shadow-md:0 6px 20px rgba(0,0,0,.25);
    --shadow-lg:0 10px 35px rgba(0,0,0,.45);

    /* GLASS */
    --glass-blur:blur(18px);

    /* BORDER */
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;

    /* Z INDEX */
    --z-header:100;
    --z-nav:150;
    --z-overlay:900;
    --z-modal:1000;
    --z-panel:1100;
}

/* ================================================= */
/* SECTION 02 : GLOBAL RESET                         */
/* HTML | BODY | IMG | BUTTON | LINKS                */
/* ================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg-dark);
    color:var(--text-main);
    font-family:
        Inter,
        system-ui,
        sans-serif;

    overflow-x:hidden;
    min-height:100vh;
}

img{
    max-width:100%;
    display:block;
}

button{
    border:none;
    outline:none;
    background:none;
    font:inherit;
    cursor:pointer;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

::-webkit-scrollbar{
    width:0;
    height:0;
}

/* ================================================= */
/* SECTION 03 : GLOBAL UTILITIES                     */
/* SPACING | TEXT | DISPLAY | HELPERS                */
/* ================================================= */

.hidden{
    display:none !important;
}

.text-center{
    text-align:center;
}

.text-main{
    color:var(--text-main);
}

.text-muted{
    color:var(--text-muted);
}

.text-gold{
    color:var(--gold);
}

.mt-5{ margin-top:5px; }
.mt-10{ margin-top:10px; }
.mt-15{ margin-top:15px; }
.mt-20{ margin-top:20px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ================================================= */
/* SECTION 04 : GLASSMORPHISM SYSTEM                 */
/* GLASS CARDS | BUTTONS | EFFECTS                   */
/* ================================================= */

.glass-card{
    background:var(--bg-card);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);

    border:1px solid var(--border-light);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);
}

.glass-btn{
    background:var(--bg-glass);

    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);

    border:1px solid var(--border-light);

    border-radius:var(--radius-sm);

    transition:.2s;
}

.glass-btn:active{
    transform:scale(.96);
}

.glow-gold{
    box-shadow:
        0 0 12px rgba(212,175,55,.15),
        0 0 24px rgba(212,175,55,.08);
}

/* ================================================= */
/* SECTION 05 : HEADER SYSTEM                        */
/* LOGO | TITLE | NOTIFICATION                       */
/* ================================================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(5, 5, 5, 0.94);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.header-left {
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
}

.header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--text-main);
}

.icon-btn, #notif-btn {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    position: relative;
    transition: transform 0.2s ease, background 0.2s ease;
}

.icon-btn:active, #notif-btn:active {
    transform: scale(0.95);
    background: rgba(212, 175, 55, 0.15);
}

.badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid var(--bg-dark);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.badge.hidden {
    display: none !important;
}

/* ================================================= */
/* SECTION 06 : MAIN CONTENT                         */
/* APP CONTENT | CONTAINER                           */
/* ================================================= */

.main-content{
    width:100%;
    max-width:600px;
    margin:0 auto;
    padding:12px;
    padding-bottom:100px;
}

.page-section{
    margin-top:18px;
}

/* ================================================= */
/* SECTION 07 : HERO SECTION                         */
/* BANNER | TAGLINE | STATUS                         */
/* ================================================= */

.hero-card {
    overflow: hidden;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-md);
}

/* BANNER */
.hero-banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    transition: height 0.3s ease;
}

/* TITLE */
.hero-title {
    margin-top: 14px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
    color: var(--text-main);
}

/* SUB TITLE */
.hero-subtitle {
    margin-top: 6px;
    font-size: 14px;
    text-align: center;
    color: var(--text-muted);
}

/* STATUS */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #22C55E;
    font-size: 13px;
    font-weight: 700;
}

.status-badge i {
    font-size: 10px;
}

/* ================================================= */
/* SECTION 08 : LOGIN SYSTEM                         */
/* CUSTOMER | DRIVER | LOGIN BUTTON                  */
/* ================================================= */

.login-card{

    padding:20px;

    border-radius:22px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);

    box-shadow:
        var(--shadow-md);
}

/* TITLE */

.login-title{

    font-size:20px;

    font-weight:800;

    text-align:center;

    margin-bottom:18px;

    color:
        var(--text-main);

    letter-spacing:1px;
}

/* OPTIONS */

.login-options{

    display:flex;

    gap:12px;

    margin-bottom:18px;
}

/* CUSTOMER / DRIVER */

.login-option{

    flex:1;

    padding:18px 10px;

    border-radius:18px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);

    text-align:center;

    transition:.2s;

    cursor:pointer;

    position:relative;
}

.login-option:active{

    transform:scale(.98);
}

/* RADIO */

.login-option input{

    position:absolute;

    top:10px;

    right:10px;

    transform:scale(1.1);
}

/* ICON */

.login-option i{

    display:block;

    font-size:34px;

    color:var(--gold);

    margin-bottom:12px;
}

/* TEXT */

.login-option span{

    display:block;

    font-size:15px;

    font-weight:700;

    color:
        var(--text-main);

    letter-spacing:.5px;
}

/* SELECTED */

.login-option:has(input:checked){

    border:
        1px solid
        var(--gold);

    box-shadow:
        0 0 18px
        rgba(212,175,55,.25);
}

/* LOGIN BUTTON */

.btn-primary-wide{

    width:100%;

    height:56px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #E5C45A
        );

    color:#000;

    font-size:16px;

    font-weight:800;

    letter-spacing:1px;

    box-shadow:
        0 6px 20px
        rgba(212,175,55,.30);

    transition:.2s;
}

.btn-primary-wide:active{

    transform:scale(.98);
}


/* ================================================= */
/* SECTION 09 : QUICK ACTIONS                        */
/* CONTACT | SERVICES | CHARGES | TRACKING           */
/* ================================================= */

.quick-grid{

    display:grid;

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

    gap:12px;
}

/* CARD */

.quick-card{

    min-height:110px;

    padding:16px;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);

    transition:.2s;

    box-shadow:
        var(--shadow-sm);
}

.quick-card:active{

    transform:scale(.96);
}

/* ICON */

.quick-card i{

    font-size:24px;

    color:var(--gold);

    margin-bottom:10px;
}

/* TITLE */

.quick-card h4{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:
        var(--text-main);

    line-height:1.3;
}


/* ================================================= */
/* SECTION 10 : LEGAL LINKS                          */
/* PRIVACY | TERMS | CANCEL | REFUND | DISCLAIMER    */
/* ================================================= */

.legal-card {
    padding: 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* TITLE */
.legal-title {
    margin: 0 0 18px;
    text-align: center;
    color: var(--gold);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* GRID */
.legal-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

/* ITEM */
.legal-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    padding: 12px 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    transition: 0.2s;
    cursor: pointer;
}

.legal-link:active {
    transform: scale(0.96);
}

/* ICON */
.legal-link i {
    color: var(--gold);
    font-size: 24px;
}

/* TEXT */
.legal-link span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.legal-link .end {
    display: none;
}


/* ================================================= */
/* SECTION 11 : FOOTER SYSTEM                        */
/* SOCIAL | COPYRIGHT                                */
/* ================================================= */

.footer-card {
    margin-top: 18px;
    padding: 24px 16px 100px; 
    border-radius: 22px;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* TITLE */
.footer-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text-main);
}

/* SOCIAL */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* ICON */
.social-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light);
    color: var(--gold);
    font-size: 20px;
    transition: 0.2s;
}

.social-icon:active {
    transform: scale(0.92);
}

/* COPYRIGHT */
.footer-copy {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 8px;
}


/* ================================================= */
/* SECTION 12 : BOTTOM NAVIGATION                    */
/* HOME | THEME | MENU                               */
/* ================================================= */

.bottom-nav{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:var(--z-nav);

    height:66px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:
        rgba(5,5,5,.94);

    border-top:
        1px solid
        rgba(212,175,55,.18);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 -2px 15px
        rgba(0,0,0,.25);
}

/* BUTTON */

.nav-btn{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    color:
        var(--text-muted);

    transition:.2s;
}

/* ICON */

.nav-btn i{

    font-size:20px;
}

/* TEXT */

.nav-btn span{

    font-size:11px;

    font-weight:600;
}

/* ACTIVE */

.nav-btn.active{

    color:
        var(--gold);
}

/* TOUCH */

.nav-btn:active{

    transform:scale(.95);
}


/* ================================================= */
/* SECTION 13 : GLOBAL OVERLAY                       */
/* MODAL BACKDROP                                    */
/* ================================================= */

#global-overlay{
    position:fixed;
    inset:0;

    background:
        rgba(0,0,0,.70);

    backdrop-filter:
        blur(6px);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:var(--z-overlay);
}

#global-overlay.active{
    opacity:1;
    visibility:visible;
}


/* ================================================= */
/* SECTION 14 : SIDE MENU SYSTEM                     */
/* MENU | FAQ | INSTALL | SHARE | RATE               */
/* ================================================= */

.side-panel{

    position:fixed;

    top:0;

    width:280px;
    max-width:72%;

    background:
        rgba(10,10,10,.98);

    z-index:var(--z-panel);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    transition:.3s;

    box-shadow:
        0 0 30px
        rgba(0,0,0,.50);
}

.side-panel.left{

    left:0;

    transform:
        translateX(-100%);

    border-right:
        1px solid
        var(--border-light);
}

.side-panel.left.active{

    transform:
        translateX(0);
}

.side-panel.right{

    right:0;

    transform:
        translateX(100%);

    border-left:
        1px solid
        var(--border-light);
}

.side-panel.right.active{

    transform:
        translateX(0);
}

/* BANNER */

.menu-banner{
    width:100%;
    height:140px;
    position:relative;
}

.menu-banner img{

    width:100%;
    height:100%;

    object-fit:cover;
}


/* HEADER */

.menu-header{

    position:relative;

    padding:0 15px 8px;

    text-align:center;
}

.menu-overlap-logo{

    width:44px;
    height:44px;

    position:absolute;

    top:-22px;
    left:50%;

    transform:
        translateX(-50%);

    border-radius:50%;

    border:
        2px solid
        var(--gold);

    background:
        var(--bg-dark);
}

.menu-header h2{

    margin-top:28px;

    font-size:16px;

    font-weight:800;
}


/* SCROLL */

.menu-scroll{

    flex:1;

    overflow-y:auto;

    padding:6px 0 8px;

    scrollbar-width:none;
}

.menu-scroll::-webkit-scrollbar{

    display:none;
}


/* LINKS */

.menu-links{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:0 12px;
}


/* ROW */

.menu-row{

    display:flex;

    align-items:center;

    width:100%;

    min-height:44px;

    padding:10px 14px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);

    border-radius:16px;

    font-size:14px;

    font-weight:600;

    color:
        var(--text-main);

    transition:.2s;
}

.menu-row:active{

    transform:
        scale(.98);
}

.menu-row i:first-child{

    width:24px;

    font-size:17px;

    color:
        var(--gold);
}

.menu-row .end{

    margin-left:auto;

    color:
        var(--text-muted);
}


/* DIVIDER */

.divider{

    margin:8px 12px;

    border:none;

    height:1px;

    background:
        var(--border-light);
}


/* FOOTER */

.menu-footer{

    margin-top:8px;

    padding:0 12px 10px;

    text-align:center;
}


/* VERSION */

.version-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 18px;

    border-radius:50px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid
        var(--border-light);

    font-size:12px;

    font-weight:700;
}


/* ================================================= */
/* SECTION 15 : NOTIFICATION PANEL                   */
/* COMPACT VERSION                                   */
/* ================================================= */


.notif-header{

    padding:12px 16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:
        1px solid
        var(--border-light);
}

.notif-header h2{

    margin:0;

    font-size:18px;

    font-weight:800;
}

.notif-scroll{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:8px 10px;
}

.notif-section{

    margin-bottom:8px;
}

.notif-section-title{

    font-size:10px;

    color:var(--gold);

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:5px;
}

.notif-card{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:14px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);

    margin-bottom:6px;
}

.notif-icon{

    font-size:20px;
}

.notif-content{

    flex:1;
}

.notif-content h4{

    margin:0;

    font-size:13px;

    font-weight:700;

    line-height:1.2;
}

.notif-content p{

    margin:2px 0 0;

    font-size:11px;

    color:
        var(--text-muted);

    line-height:1.2;
}

.notif-card span{

    font-size:10px;

    color:
        var(--gold);

    font-weight:700;
}

.notif-video{

    padding:10px;

    border-radius:10px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        var(--border-light);
}

.notif-video video{

    width:100%;

    height:100px;

    object-fit:cover;

    border-radius:10px;

    display:block;
}

.notif-footer{

    padding:10px;

    background:
        rgba(10,10,10,.98);

    border-top:
        1px solid
        var(--border-light);

    position:sticky;

    bottom:0;

    z-index:10;
}

.btn-clear-notif{

    width:100%;

    height:42px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #E5C45A
        );

    color:#000;

    font-size:14px;

    font-weight:800;

    cursor:pointer;
}


/* ================================================= */
/* SECTION 16 : MODAL SYSTEM                         */
/* POPUP | DIALOG | CLOSE BUTTON                     */
/* ================================================= */

.modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px; 
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: 0.25s;
}

.modal-wrapper.active {
    opacity: 1;
    visibility: visible;
}

.modal-box, .modal-card {
    position: relative; 
    width: 100%;
    max-width: 520px;
    max-height: 85vh; 
    overflow-y: auto;
    overscroll-behavior: contain; 
    -webkit-overflow-scrolling: touch;
    background: rgba(12, 12, 12, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    animation: modalPop 0.25s ease;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-title, .modal-card h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 18px 0;
    padding-right: 48px; 
    color: var(--gold);
    line-height: 1.2;
}

.modal-card p {
    margin: 0;
    color: #ffffff;
    line-height: 1.8;
    font-size: 16px;
    white-space: normal;
}

.btn-close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    font-size: 18px;
    z-index: 10;
    transition: 0.2s;
}

.btn-close-modal:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.15);
}

.modal-box::-webkit-scrollbar, .modal-card::-webkit-scrollbar {
    width: 6px;
}
.modal-box::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 20px;
}

/* ================================================= */
/* MODAL SYSTEM (FOUR MODULES) CSS        */
/* CONTACT | SERVICES | CHARGES | TRACKING           */
/* ================================================= */

/* MODAL DIVIDER */
.modal-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-muted);
}
.modal-divider::before, .modal-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}
.modal-divider:not(:empty)::before { margin-right: 15px; }
.modal-divider:not(:empty)::after { margin-left: 15px; }
.modal-divider span { font-size: 13px; font-weight: 500; margin-right: 10px; color: var(--text-main); }
.modal-divider i { font-size: 10px; }

/* MODAL FOOTER BADGE */
.modal-footer-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
}
.mfb-text h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 700; line-height: 1.2; }
.mfb-text p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ICON CIRCLES */
.icon-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.icon-blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.3); }

/* ==================== CONTACT ==================== */
.contact-list { display: flex; flex-direction: column; gap: 12px; }
.contact-item { display: flex; align-items: center; gap: 15px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); transition: 0.2s; cursor: pointer; }
.contact-item:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.06); }
.contact-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.icon-green { color: #25D366; }
.icon-gold { color: var(--gold); }
.icon-purple { color: #A855F7; }
.contact-text { flex: 1; }
.contact-text h4 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: var(--text-main); }
.contact-text p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.contact-item .chevron { color: var(--text-muted); font-size: 14px; }
.online-badge { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22C55E; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; }
.online-badge i { font-size: 10px; }

/* ==================== SERVICES =================== */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.service-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 10px; border-radius: 18px; gap: 12px; background: rgba(255, 255, 255, 0.03); transition: 0.2s; }
.service-card:active { transform: scale(0.96); border-color: var(--gold); }
.service-card i { font-size: 28px; }
.service-card span { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* ==================== CHARGES ==================== */
.accordion-container { display: flex; flex-direction: column; gap: 12px; }
.accordion-item { border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); overflow: hidden; transition: 0.3s; }
.accordion-header { padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.acc-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--text-main); }
.acc-exp { font-size: 11px; padding: 4px 10px; border-radius: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-light); color: var(--text-muted); }
.accordion-content { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-light); padding-top: 16px; }
.accordion-item.active .accordion-content { display: block; }
.accordion-item.active { border-color: rgba(212, 175, 55, 0.3); }
.tariff-list { list-style: none; padding: 0; margin: 0; }
.tariff-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--border-light); font-size: 14px; }
.tariff-list li:last-child { border-bottom: none; padding-bottom: 0; }
.tl-label { color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.tl-label i { font-size: 12px; opacity: 0.7; width: 14px; text-align: center; }
.tl-val { color: var(--gold); font-weight: 700; text-align: right; }

/* ==================== TRACKING =================== */
.track-input { width: 100%; height: 56px; padding: 0 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-light); color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 15px; outline: none; transition: 0.2s; }
.track-input:focus { border-color: var(--gold); background: rgba(255, 255, 255, 0.08); }
.track-input::placeholder { color: #666; }
.tfi-line { display: flex; align-items: center; text-align: center; color: var(--text-muted); font-size: 12px; margin-bottom: 15px; }
.tfi-line::before, .tfi-line::after { content: ''; flex: 1; border-bottom: 1px dashed var(--border-light); }
.tfi-line::before { margin-right: 15px; } .tfi-line::after { margin-left: 15px; }
.tfi-badge { display: inline-block; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--gold); color: var(--gold); font-family: monospace; font-size: 14px; letter-spacing: 1px; background: rgba(212, 175, 55, 0.1); }
.tf-list { display: flex; flex-direction: column; gap: 15px; padding: 0 10px; }
.tf-item { display: flex; align-items: center; gap: 15px; }
.tf-item i { width: 20px; text-align: center; font-size: 16px; }
.tf-item span { font-size: 14px; color: var(--text-main); font-weight: 500; }
.tracking-details { padding: 0 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.03); }
.td-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--border-light); }
.td-row.border-none { border-bottom: none; }
.td-label { font-size: 13px; color: var(--text-muted); font-weight: 500; flex: 0 0 40%; }
.td-value { font-size: 14px; color: var(--text-main); text-align: right; flex: 1; word-break: break-word; }

/* LIGHT MODE SUPPORT */
body.light-mode .contact-item, body.light-mode .service-card, body.light-mode .accordion-item, body.light-mode .modal-footer-badge, body.light-mode .tracking-details { background: #ffffff; border-color: #dddddd; }
body.light-mode .contact-text h4, body.light-mode .service-card span, body.light-mode .acc-title, body.light-mode .tf-item span, body.light-mode .td-value, body.light-mode .modal-divider span { color: #111111; }
body.light-mode .contact-text p, body.light-mode .acc-exp, body.light-mode .tl-label, body.light-mode .td-label, body.light-mode .mfb-text p { color: #666666; }
body.light-mode .track-input { background: #f9f9f9; border-color: #dddddd; color: #111111; }
body.light-mode .track-input:focus { border-color: var(--gold); background: #ffffff; }
body.light-mode .tariff-list li, body.light-mode .td-row, body.light-mode .modal-divider::before, body.light-mode .modal-divider::after, body.light-mode .tfi-line::before, body.light-mode .tfi-line::after, body.light-mode .accordion-content { border-color: #dddddd; }

/* RESPONSIVE SCALING */
@media screen and (max-width: 360px) {
    .services-grid { grid-template-columns: 1fr; }
    .acc-title { font-size: 14px; }
    .acc-exp { font-size: 10px; padding: 3px 8px; }
    .contact-item { padding: 12px; gap: 10px; }
    .td-value, .td-label { font-size: 12px; }
}
@media screen and (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-list { display: grid; grid-template-columns: repeat(2, 1fr); }
}


/* ================================================= */
/* SECTION 17 : LIGHT MODE                           */
/* THEME OVERRIDES                                   */
/* ================================================= */

body.light-mode{

    --bg-dark:#f5f5f5;

    --bg-card:#ffffff;

    --bg-glass:#ffffff;

    --text-main:#111111;

    --text-muted:#555555;

    --border-light:#d9d9d9;
}

body.light-mode{

    background:#f5f5f5;
    color:#111111;
}

body.light-mode .app-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .header-title {
    color: #111111;
}

body.light-mode .header-logo {
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

body.light-mode .icon-btn, 
body.light-mode #notif-btn {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}

body.light-mode .icon-btn:active, 
body.light-mode #notif-btn:active {
    background: rgba(212, 175, 55, 0.15);
}

body.light-mode .badge {
    border: 2px solid #ffffff;
}

body.light-mode
.glass-card,

body.light-mode
.glass-btn,

body.light-mode
.menu-row,

body.light-mode
.side-panel,

body.light-mode
.notification-panel,

body.light-mode
.bottom-nav{

    background:#ffffff;

    color:#111111;

    border:
        1px solid
        #d9d9d9;
}

body.light-mode
.text-main{
    color:#111111;
}

body.light-mode
.text-muted{
    color:#555555;
}

body.light-mode .login-option{
    background:#ffffff;
    border: 1px solid #dddddd;
}

body.light-mode .login-option span{
    color:#111111;
}

body.light-mode .quick-card{
    background: #ffffff;
    border: 1px solid #dddddd;
}

body.light-mode .quick-card h4{
    color: #111111;
}

body.light-mode .legal-card {
    background: #ffffff;
    border: 1px solid #dddddd;
}

body.light-mode .legal-link {
    background: #ffffff;
    border: 1px solid #dddddd;
}

body.light-mode .legal-link span {
    color: #111111;
}

body.light-mode .social-icon {
    background: #ffffff;
    border: 1px solid #dddddd;
}

body.light-mode .modal-wrapper {
    background: rgba(255, 255, 255, 0.75);
}

body.light-mode .modal-box, body.light-mode .modal-card {
    background: #ffffff;
    color: #111111;
    border: 1px solid #dddddd;
}

body.light-mode .modal-card p {
    color: #111111;
}

body.light-mode .btn-close-modal {
    background: #f2f2f2;
    color: #111111;
    border: 1px solid #dddddd;
}

/* ================================================= */
/* SECTION 20 : ADVANCED RESPONSIVE SYSTEM           */
/* MOBILE | TABLET | LARGE SCREEN                    */
/* ================================================= */

.side-panel, .menu-scroll, .notification-panel {
    height: 100dvh !important; 
}

@media screen and (max-width: 380px) {
    .legal-links { gap: 6px; }
    .legal-link { min-height: 80px; padding: 10px 4px; border-radius: 14px; gap: 6px; }
    .legal-link i { font-size: 20px; }
    .legal-link span { font-size: 10px; }
}

@media screen and (max-width: 360px) {
    .header-title { font-size: 16px; letter-spacing: 0.5px; }
    .app-header { height: 65px; }
    .header-logo { width: 38px; height: 38px; }
    .icon-btn, #notif-btn { width: 40px; height: 40px; font-size: 18px; }
    .hero-title { font-size: 20px; }
    .quick-grid { gap: 10px; }
    .quick-card { padding: 16px; }
    .menu-row { min-height: 46px; font-size: 14px; }
}

@media screen and (min-width: 768px) {
    .hero-banner { height: 180px; }
    .modal-wrapper { padding: 40px; }
    .app-header, .bottom-nav {
        max-width: 500px;
        width: 100%;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .main-content {
        max-width: 700px;
    }
}

@media screen and (min-width: 1024px) {
    .hero-banner { height: 220px; }
}