/*
YomRide Public Header v31.16
Public Support shell with guest / rider / driver states.
All selectors are namespaced to .yp-*.
*/
:root{
    --yp-dark:#06170f;
    --yp-dark-2:#0b281a;
    --yp-green:#70dc25;
    --yp-green-2:#94ed52;
    --yp-text:#f7fbf8;
    --yp-muted:#b1c1b7;
}

.yp-header{
    position:relative;
    z-index:120;
    width:100%;
    background:linear-gradient(100deg,var(--yp-dark) 0%,#071d14 64%,#0a2719 100%);
    border-bottom:1px solid rgba(255,255,255,.07);
    color:var(--yp-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    box-shadow:0 8px 28px rgba(4,25,14,.08);
}

.yp-header *{box-sizing:border-box}
.yp-header a{text-decoration:none!important}

.yp-header__inner{
    width:min(1460px,calc(100% - 48px));
    min-height:76px;
    margin:0 auto;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:30px;
}

.yp-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    min-width:0;
    color:#fff!important;
}

.yp-brand img,
.yp-brand__mark{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:12px;
}

.yp-brand img{
    object-fit:contain;
    background:#fff;
    padding:3px;
}

.yp-brand__mark{
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,var(--yp-green-2),#55c90f);
    color:#0a180b;
    font-size:18px;
    font-weight:950;
    box-shadow:0 7px 20px rgba(112,220,37,.22);
}

.yp-brand strong{
    color:#fff;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.35px;
}

.yp-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.yp-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    color:#c2d0c7!important;
    font-size:13px;
    font-weight:800;
    transition:.18s ease;
}

.yp-nav a:hover{
    color:#fff!important;
    background:rgba(255,255,255,.06);
}

.yp-nav a.active{
    color:#b8fa88!important;
    background:rgba(112,220,37,.12);
}

.yp-nav a.active:after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:4px;
    height:2px;
    border-radius:99px;
    background:var(--yp-green);
}

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

.yp-signin,
.yp-book,
.yp-icon-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    font-size:13px;
    font-weight:900;
}

.yp-signin{
    padding:0 16px;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.035);
}

.yp-book{
    padding:0 16px;
    color:#0b1909!important;
    background:linear-gradient(100deg,#93ee45,#66d817);
    box-shadow:0 10px 24px rgba(100,214,21,.20);
}

.yp-book--driver{
    padding-inline:14px;
}

.yp-icon-link{
    width:44px;
    flex:0 0 44px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:#fff!important;
}

.yp-account-chip{
    min-height:48px;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:9px;
    max-width:180px;
    padding:5px 11px 5px 6px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:rgba(255,255,255,.06);
    color:#fff!important;
}

.yp-account-chip__avatar,
.yp-mobile-account__avatar{
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#9af25c,#62d91e);
    color:#0b180a;
    font-weight:950;
}

.yp-account-chip__avatar{
    width:34px;
    height:34px;
}

.yp-account-chip>span:last-child{
    min-width:0;
}

.yp-account-chip small,
.yp-account-chip strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.yp-account-chip small{
    color:#9fb3a6;
    font-size:12px;
    line-height:1.1;
}

.yp-account-chip strong{
    margin-top:3px;
    color:#fff;
    font-size:13px;
    line-height:1.1;
}

.yp-mobile-actions,
.yp-mobile-menu{
    display:none;
}

@media(max-width:1080px){
    .yp-header__inner{
        width:calc(100% - 30px);
        gap:16px;
    }

    .yp-nav{gap:2px}
    .yp-nav a{padding:0 9px;font-size:12px}

    .yp-account-chip{
        max-width:148px;
    }

    .yp-actions .yp-icon-link{
        display:none;
    }
}

@media(max-width:820px){
    .yp-header__inner{
        width:calc(100% - 24px);
        min-height:66px;
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .yp-brand{gap:9px}

    .yp-brand img,
    .yp-brand__mark{
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:11px;
    }

    .yp-brand strong{font-size:17px}

    .yp-nav,
    .yp-actions{
        display:none;
    }

    .yp-mobile-actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
    }

    .yp-mobile-book{
        min-height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:0 13px;
        border-radius:11px;
        background:linear-gradient(100deg,#93ee45,#66d817);
        color:#0b1909!important;
        font-size:12px;
        font-weight:900;
    }

    .yp-menu-button{
        width:42px;
        height:42px;
        display:grid;
        place-items:center;
        padding:0;
        border:1px solid rgba(255,255,255,.15);
        border-radius:12px;
        background:rgba(255,255,255,.05);
        color:#fff;
        cursor:pointer;
    }

    .yp-menu-button svg{
        width:20px;
        height:20px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
    }

    .yp-mobile-menu{
        width:calc(100% - 24px);
        margin:0 auto 12px;
        padding:10px;
        border:1px solid rgba(255,255,255,.10);
        border-radius:17px;
        background:#0a2117;
        box-shadow:0 18px 38px rgba(0,0,0,.22);
    }

    .yp-mobile-menu:not([hidden]){
        display:block;
    }

    .yp-mobile-account{
        display:grid;
        grid-template-columns:44px minmax(0,1fr);
        align-items:center;
        gap:10px;
        margin-bottom:8px;
        padding:10px;
        border-radius:12px;
        background:rgba(255,255,255,.055);
        border:1px solid rgba(255,255,255,.08);
    }

    .yp-mobile-account__avatar{
        width:44px;
        height:44px;
    }

    .yp-mobile-account small,
    .yp-mobile-account strong{
        display:block;
    }

    .yp-mobile-account small{
        color:#9fb2a7;
        font-size:12px;
    }

    .yp-mobile-account strong{
        margin-top:3px;
        color:#fff;
        font-size:13px;
    }

    .yp-mobile-menu nav{
        display:grid;
        gap:3px;
    }

    .yp-mobile-menu nav a{
        min-height:46px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:0 12px;
        border-radius:11px;
        color:#d2ddd6!important;
        font-size:13px;
        font-weight:800;
    }

    .yp-mobile-menu nav a.active{
        background:rgba(112,220,37,.11);
        color:#bafa8d!important;
    }

    .yp-mobile-menu nav a b{
        color:#76da36;
        font-size:16px;
    }

    .yp-mobile-menu__book{
        min-height:46px;
        margin-top:8px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        background:linear-gradient(100deg,#93ee45,#66d817);
        color:#0a1709!important;
        font-size:13px;
        font-weight:950;
    }
}

@media(max-width:380px){
    .yp-mobile-book{display:none}
}


/* v31.12 account dropdown */
.yp-account-menu{
    position:relative;
    margin:0;
}

.yp-account-menu > summary{
    list-style:none;
    cursor:pointer;
}

.yp-account-menu > summary::-webkit-details-marker{
    display:none;
}

.yp-account-menu .yp-account-chip{
    grid-template-columns:34px minmax(0,1fr) 18px;
}

.yp-account-chip__arrow{
    display:grid!important;
    place-items:center;
    color:#9bc38a!important;
    font-size:16px!important;
    line-height:1!important;
    transition:transform .18s ease;
}

.yp-account-menu[open] .yp-account-chip__arrow{
    transform:rotate(180deg);
}

.yp-account-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:400;
    width:210px;
    padding:8px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
    background:#0a2117;
    box-shadow:0 20px 50px rgba(0,0,0,.28);
}

.yp-account-dropdown a{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 11px;
    border-radius:10px;
    color:#d7e2db!important;
    font-size:12px!important;
    font-weight:800!important;
}

.yp-account-dropdown a:hover{
    background:rgba(112,220,37,.10);
    color:#bafa8d!important;
}

@media(max-width:820px){
    .yp-account-menu{
        display:none;
    }
}


/* ============================================================
   v31.16 Floating public header
   - Sticky/floating on desktop and mobile
   - Remains in document flow, so it never covers page content
   ============================================================ */

.yp-header{
    position:sticky!important;
    top:12px!important;
    z-index:900!important;
    width:min(1360px,calc(100% - 48px))!important;
    margin:12px auto 0!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:18px!important;
    background:
        linear-gradient(100deg,rgba(6,23,15,.96) 0%,rgba(7,29,20,.95) 64%,rgba(10,39,25,.95) 100%)!important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.18),
        0 2px 8px rgba(0,0,0,.08)!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    overflow:visible!important;
    transition:
        width .2s ease,
        top .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.yp-header__inner{
    width:100%!important;
    padding:0 18px;
}

.yp-header.is-scrolled{
    top:8px!important;
    width:min(1320px,calc(100% - 56px))!important;
    background:
        linear-gradient(100deg,rgba(5,20,13,.985) 0%,rgba(7,27,18,.98) 64%,rgba(9,35,23,.98) 100%)!important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.25),
        0 4px 14px rgba(0,0,0,.12)!important;
}

.yp-account-dropdown{
    overflow:hidden;
}

.yp-account-dropdown__divider{
    height:1px;
    margin:7px 4px;
    background:rgba(255,255,255,.09);
}

.yp-account-dropdown__form{
    margin:0;
    padding:0;
}

.yp-signout-action{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 11px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#f1b7b7;
    font:inherit;
    font-size:12px!important;
    font-weight:850!important;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}

.yp-signout-action:hover{
    color:#ffd4d4;
    background:rgba(231,76,60,.11);
}

.yp-signout-action span{
    font-size:15px;
    line-height:1;
}

.yp-mobile-signout{
    margin:0;
    padding:0;
}

.yp-mobile-signout button{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 12px;
    border:0;
    border-radius:11px;
    background:rgba(231,76,60,.08);
    color:#f4b8b8;
    font:inherit;
    font-size:13px;
    font-weight:850;
    cursor:pointer;
}

.yp-mobile-signout button b{
    color:#f0a1a1;
    font-size:16px;
}

/* Mobile floating header: compact, safe-area aware, still fully usable. */
@media(max-width:820px){
    .yp-header{
        top:max(8px,env(safe-area-inset-top))!important;
        width:calc(100% - 16px)!important;
        margin:8px auto 0!important;
        border-radius:16px!important;
    }

    .yp-header.is-scrolled{
        top:max(6px,env(safe-area-inset-top))!important;
        width:calc(100% - 12px)!important;
    }

    .yp-header__inner{
        min-height:62px!important;
        padding:0 9px!important;
    }

    .yp-mobile-menu{
        width:calc(100% - 16px)!important;
        margin:0 8px 10px!important;
        border-radius:14px!important;
        box-shadow:0 20px 46px rgba(0,0,0,.28)!important;
    }
}

/* Extra-small phones */
@media(max-width:380px){
    .yp-header{
        width:calc(100% - 10px)!important;
        border-radius:14px!important;
    }
}