/* =========================================
   KIMU RIDE HEADER
========================================= */

.ride-header{
    position:sticky;
    top:0;
    z-index:5000;
    width:100%;

    background:#07111f;
    color:#fff;

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

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.ride-header.scrolled{
    background:rgba(7,17,31,.96);
    box-shadow:0 12px 32px rgba(0,0,0,.18);

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

.ride-header-inner{
    min-height:76px;

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


/* =========================================
   LOGO
========================================= */

.ride-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.ride-logo-icon{
    width:42px;
    height:42px;

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

    border-radius:12px;

    background:#22c55e;
    color:#fff;

    font-size:18px;
}

.ride-logo-text{
    color:#fff;

    font-size:19px;
    font-weight:900;
    letter-spacing:.4px;
}


/* =========================================
   DESKTOP NAVIGATION
========================================= */

.ride-navbar{
    display:flex;
    align-items:center;
    gap:24px;
}

.ride-navbar > a,
.ride-dropdown-toggle{
    min-height:76px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    border:0;
    background:transparent;

    color:#e2e8f0;

    font-size:14px;
    font-weight:700;
    white-space:nowrap;

    transition:color .2s ease;
}

.ride-navbar > a:hover,
.ride-navbar > a.active,
.ride-dropdown-toggle:hover{
    color:#22c55e;
}

.ride-navbar > a i,
.ride-dropdown-toggle i{
    font-size:13px;
}


/* =========================================
   DROPDOWN
========================================= */

.ride-dropdown{
    position:relative;
}

.ride-dropdown-toggle > i:last-child{
    margin-left:2px;
    font-size:10px;

    transition:transform .25s ease;
}

.ride-dropdown-menu{
    position:absolute;
    top:calc(100% - 8px);
    left:0;

    min-width:230px;
    padding:9px;

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

    background:#fff;

    box-shadow:0 20px 48px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(10px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.ride-dropdown:hover .ride-dropdown-menu,
.ride-dropdown.active .ride-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.ride-dropdown:hover .ride-dropdown-toggle > i:last-child,
.ride-dropdown.active .ride-dropdown-toggle > i:last-child{
    transform:rotate(180deg);
}

.ride-dropdown-menu a{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 13px;

    border-radius:10px;

    color:#111827;

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

.ride-dropdown-menu a:hover{
    background:#f0fdf4;
    color:#16a34a;
}

.ride-dropdown-menu a i{
    width:20px;
    color:#22c55e;
}


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

.ride-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.ride-signin-link,
.ride-register-link,
.ride-dashboard-link,
.ride-logout-link{
    min-height:42px;

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

    padding:0 17px;

    border-radius:23px;

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

.ride-signin-link,
.ride-dashboard-link{
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
}

.ride-register-link{
    background:#22c55e;
    color:#fff;
}

.ride-register-link:hover{
    background:#16a34a;
}

.ride-dashboard-link:hover,
.ride-signin-link:hover{
    border-color:#22c55e;
    color:#22c55e;
}

.ride-logout-link{
    border:1px solid rgba(239,68,68,.48);
    color:#fca5a5;
}

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


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

.ride-menu-button{
    width:43px;
    height:43px;

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

    border:0;
    border-radius:11px;

    background:#22c55e;
    color:#fff;

    font-size:18px;
}


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

.ride-mobile-menu{
    display:none;

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

    background:#07111f;
}

.ride-mobile-menu.active{
    display:block;
}

.ride-mobile-menu-inner{
    display:grid;
    gap:3px;

    padding-top:14px;
    padding-bottom:20px;
}

.ride-mobile-menu-inner > a,
.ride-mobile-dropdown-toggle{
    width:100%;
    min-height:50px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:0 13px;

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

    background:transparent;
    color:#fff;

    font-size:14px;
    font-weight:700;
    text-align:left;
}

.ride-mobile-menu-inner > a i,
.ride-mobile-dropdown-toggle span i{
    width:20px;
    color:#22c55e;
}

.ride-mobile-dropdown-toggle{
    justify-content:space-between;
}

.ride-mobile-dropdown-toggle span{
    display:flex;
    align-items:center;
    gap:11px;
}

.ride-mobile-dropdown-toggle > i{
    font-size:11px;
    transition:transform .22s ease;
}

.ride-mobile-dropdown-toggle.active > i{
    transform:rotate(180deg);
}

.ride-mobile-dropdown-menu{
    display:none;
    padding:5px 0 8px 31px;
}

.ride-mobile-dropdown-menu.active{
    display:grid;
}

.ride-mobile-dropdown-menu a{
    padding:11px 12px;

    border-radius:9px;

    color:#cbd5e1;

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

.ride-mobile-dropdown-menu a:hover{
    background:rgba(34,197,94,.1);
    color:#22c55e;
}

.ride-mobile-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin-top:14px;
}

.ride-mobile-primary,
.ride-mobile-secondary{
    min-height:46px;

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

    border-radius:24px;

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

.ride-mobile-primary{
    background:#22c55e;
    color:#fff;
}

.ride-mobile-secondary{
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
}


/* =========================================
   TABLET AND MOBILE
========================================= */

@media(max-width:1050px){

    .ride-navbar{
        gap:17px;
    }

    .ride-navbar > a,
    .ride-dropdown-toggle{
        font-size:13px;
    }
}

@media(max-width:900px){

    .ride-navbar,
    .ride-header-actions{
        display:none;
    }

    .ride-menu-button{
        display:flex;
    }

    .ride-header-inner{
        min-height:68px;
    }
}

@media(max-width:480px){

    .ride-logo-text{
        font-size:16px;
    }

    .ride-logo-icon{
        width:38px;
        height:38px;
        font-size:16px;
    }

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


/* =========================================
   BODY LOCK
========================================= */

body.ride-menu-open{
    overflow:hidden;
}


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

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

    .ride-header,
    .ride-dropdown-menu,
    .ride-dropdown-toggle i,
    .ride-mobile-dropdown-toggle i{
        transition:none;
    }
}