/*==========================================
    PREMIUM NAVBAR
==========================================*/

.navbar{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:92%;
    max-width:1400px;

    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:20px;

    z-index:1000;

    transition:.4s;

    box-shadow:0 10px 40px rgba(0,0,0,.08);
}

/* Scroll Effect */

.navbar.scrolled{

    top:10px;

    background:#ffffffee;

    box-shadow:0 15px 45px rgba(0,0,0,.12);

}

/*====================*/

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

/*====================

LOGO

====================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:700;

    color:var(--text);

}

.logo img{

    height:64px;

    width:auto;

    max-width:240px;

    object-fit:contain;

}

/*====================

NAVIGATION

====================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    position:relative;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

.nav-links a.active{

    color:var(--primary);

}

/*====================

RIGHT SIDE

====================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

/* Container added at runtime (auth.js) around the logged-in button + dropdown,
   so the dropdown is anchored to the button itself on every breakpoint. */
.login-wrap{

    position:relative;

}

.nav-btn{

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:#fff;

    cursor:pointer;

    transition:.3s;

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

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:inherit;

}

.nav-btn:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}

/* Cart */

.cart-btn{

    position:relative;

}

.cart-count{

    position:absolute;

    top:-6px;

    right:-4px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#ff4d4f;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:600;

}

/* Login */

.login-btn{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 28px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

    white-space:nowrap;

}

.login-btn:hover{

    background:var(--primary-dark);

}

/* Logged-in account dropdown (My Account / My Orders / Logout).
   Positioned against the .login-wrap container that auth.js creates
   around the button, so the menu is anchored to the button itself on
   every breakpoint — including mobile, where the pill collapses to a
   circular icon. */
.login-btn.has-menu{

    position:relative;

}

.login-menu{

    display:none;

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    min-width:220px;

    padding:8px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    border-radius:14px;

    box-shadow:0 15px 40px rgba(0,0,0,.14);

    z-index:1200;

}

.login-menu.open{

    display:flex;

    flex-direction:column;

}

.login-menu a,

.login-menu button{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:10px 14px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--text);

    font-size:14px;

    font-weight:500;

    font-family:inherit;

    text-align:left;

    text-decoration:none;

    cursor:pointer;

    transition:.2s;

}

.login-menu a:hover,

.login-menu button:hover{

    background:var(--primary-light);

    color:var(--primary);

}

.login-menu a i,

.login-menu button i{

    width:16px;

    font-size:14px;

}

.login-menu .login-menu-divider{

    height:1px;

    margin:6px 8px;

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

}

.login-menu .login-menu-logout{

    color:#c0392b;

}

.login-menu .login-menu-logout:hover{

    background:#fdf0ef;

    color:#c0392b;

}

/* Icon is hidden on desktop (text label is enough); shown on mobile
   once the button collapses to an icon-only circle below. */
.login-btn i{

    display:none;

    font-size:15px;

}

/* Mobile */

.mobile-menu{

    display:none;

    width:45px;

    height:45px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

}

/*====================

Responsive

====================*/

@media(max-width:992px){

    .logo img{

        height:54px;

        max-width:200px;

    }

    .nav-links{

        display:none;

    }

    .nav-links.show{

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:14px;

        position:absolute;
        top:calc(100% + 12px);
        left:0;
        width:100%;

        background:#fff;
        border-radius:16px;
        padding:20px 24px;
        box-shadow:0 15px 40px rgba(0,0,0,.12);

    }

    .mobile-menu{

        display:block;

    }

}

@media(max-width:576px){

    .logo img{

        height:44px;

        max-width:160px;

    }

    /* Login stays reachable on mobile: it collapses to the same circular
       icon style as the wishlist/cart buttons instead of disappearing,
       so signing in is never blocked on small screens. */
    .login-btn{
        width:38px;
        height:38px;
        padding:0;
        border-radius:50%;
        justify-content:center;
        gap:0;
    }

    .login-btn i{
        display:block;
    }

    .login-btn .login-btn-text{
        display:none;
    }

    .nav-actions{
        gap:8px;
    }

    .nav-btn{
        width:38px;
        height:38px;
    }

}

@media(max-width:380px){

    .logo img{

        height:38px;

        max-width:140px;

    }

}