@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   INSANE LABAN — NAVIGATION / GLOBAL SHELL
   Loaded on every page via nav.php.

   Keep this file minimal: it applies everywhere, so anything
   broad added here will fight the page stylesheets.
========================================================= */

:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;

    --line:rgba(255,255,255,.12);
    --text-mute:rgba(255,255,255,.7);
    --text-dim:rgba(255,255,255,.5);

    --red:#ff8f8a;

    --display:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*
   NOTE: this was `overflow: hidden`, which blocked scrolling on
   every page and forced the `overflow-y: auto !important`
   workarounds in the page stylesheets. Only the horizontal axis
   needs clamping.
*/
body{
    overflow-x:hidden;
}


/* =========================================================
   INTRO VIDEO
========================================================= */

#intro-screen{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    transition:opacity .8s ease;
}

#intro-video{
    width:50%;
    height:50%;
    object-fit:cover;
}

#skip-intro{
    position:absolute;
    right:40px;
    bottom:40px;
    padding:12px 25px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:30px;
    background:rgba(5,20,45,.55);
    color:#fff;
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    backdrop-filter:blur(10px);
}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.sidebar{
    position:fixed;
    left:10px;
    top:10px;
    width:110px;
    height:calc(100vh - 20px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
    border:1px solid rgba(232,189,104,.18);
    border-radius:30px;
    background:
        radial-gradient(circle at 50% 0%,rgba(64,131,192,.28),transparent 55%),
        linear-gradient(180deg,#0a2246,#061529);
    box-shadow:0 20px 50px rgba(2,10,26,.55);
    z-index:900;
}


/* LOGO */

.logo img{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:50%;
    border:1px solid rgba(232,189,104,.35);
    background:#fff;
}


/* NAV ICONS */

.nav-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.nav-links a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    color:rgba(255,255,255,.55);
    font-size:19px;
    transition:background .25s ease,color .25s ease;
}

.nav-links a:hover{
    background:rgba(232,189,104,.14);
    color:var(--gold-soft);
}

/* current page, if you ever add aria-current="page" to the link */
.nav-links a[aria-current="page"]{
    background:rgba(107,61,245,.22);
    color:#fff;
}


/* =========================================================
   PROFILE AREA
========================================================= */

.signin{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
    color:var(--text-dim);
    font-family:var(--sans);
    font-size:14px;
}

.nav-signin{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.profile-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    box-shadow:none;
    color:var(--text-mute);
    text-decoration:none;
}

.profile-link > i{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 7px;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.75);
    font-size:19px;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.profile-link:hover > i{
    border-color:transparent;
    background:var(--violet);
    color:#fff;
}

.profile-name{
    display:block;
    max-width:90px;
    color:var(--text-mute);
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* LOGOUT */

.logout-link{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:10px;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:var(--text-dim);
    text-decoration:none;
    box-shadow:none;
    transition:background .25s ease,color .25s ease;
}

.logout-link > i{
    display:block;
    width:auto;
    height:auto;
    margin:0;
    background:transparent;
    color:inherit;
    font-size:15px;
}

.logout-link:hover{
    background:rgba(255,143,138,.14);
    color:var(--red);
}


/* =========================================================
   CONTENT
========================================================= */

.content{
    width:100%;
    padding:40px;
}


/* =========================================================
   MOBILE HEADER + SLIDE MENU
   These use a `body` prefix so they outrank responsive.css,
   which loads after this file. Don't add !important here.
========================================================= */

@media (max-width:768px){

    body .mobile-header{
        background:rgba(6,21,45,.94);
        border-bottom:1px solid rgba(232,189,104,.18);
        box-shadow:0 4px 20px rgba(2,10,26,.4);
    }

    body .mobile-logo img{
        border-radius:50%;
        background:#fff;
    }

    body .mobile-account-button{
        border:1px solid var(--line);
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    body .mobile-menu-button{
        background:var(--violet);
    }

    body .mobile-menu-button span{
        background:#fff;
    }


    /* OVERLAY */

    body .mobile-menu-overlay{
        background:rgba(2,10,26,.62);
    }


    /* SLIDE MENU */

    body .mobile-menu{
        background:
            radial-gradient(circle at 90% 5%,rgba(64,131,192,.3),transparent 55%),
            linear-gradient(180deg,#0a2246,#050f22);
        border-right:1px solid rgba(232,189,104,.18);
        box-shadow:15px 0 50px rgba(2,10,26,.6);
    }

    body .mobile-menu-header{
        border-bottom:1px solid var(--line);
    }

    body .mobile-menu-brand img{
        border-radius:50%;
        background:#fff;
    }

    body .mobile-menu-brand strong{
        color:#fff;
        font-family:var(--sans);
    }

    body .mobile-menu-brand span{
        color:var(--gold-soft);
    }

    body .mobile-menu-close{
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        color:#fff;
    }


    /* LINKS */

    body .mobile-menu-link{
        color:rgba(255,255,255,.88);
        font-family:var(--sans);
    }

    body .mobile-menu-link:hover{
        background:rgba(232,189,104,.12);
        color:var(--gold-soft);
    }

    body .mobile-menu-icon{
        border:1px solid rgba(232,189,104,.28);
        background:rgba(232,189,104,.1);
        color:var(--gold-soft);
    }

    body .mobile-menu-arrow{
        color:var(--text-dim);
    }


    /* FOOTER */

    body .mobile-menu-footer{
        background:rgba(255,255,255,.04);
        border-top:1px solid var(--line);
    }

    body .mobile-menu-user strong{
        color:#fff;
        font-size:14px;
    }

    body .mobile-menu-user span{
        color:var(--text-dim);
        font-size:12px;
    }

    body .mobile-menu-user-icon{
        border:1px solid var(--line);
        background:rgba(255,255,255,.07);
        color:#fff;
    }

    body .mobile-menu-logout{
        color:var(--red);
    }

    body .mobile-menu-logout:hover{
        background:rgba(255,143,138,.12);
    }
}


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

@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}
/* =========================================================
   SIDEBAR HOVER LABELS
   Paste at the END of css/style.css, before the MOTION block.

   Labels are read from each link's aria-label, so nothing in
   nav.php needs new markup — see the note at the bottom about
   removing the title attributes.
========================================================= */

@media (min-width:769px){

    /* the rail must not clip the labels */
    .sidebar{overflow:visible}

    .nav-links li,
    .nav-signin,
    .profile-link,
    .logout-link{
        position:relative;
    }


    /* ---------------------------------------------------------
       HOVER STATE — stronger, so it's obvious the icon is live
    --------------------------------------------------------- */

    .nav-links a{
        position:relative;
        transition:background .2s ease,color .2s ease,transform .2s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible{
        background:rgba(217,164,65,.22);
        color:var(--gold-deep);
        transform:translateX(2px);
    }


    /* ---------------------------------------------------------
       THE LABEL
    --------------------------------------------------------- */

    .nav-links a::after,
    .profile-link::after,
    .logout-link::after{
        content:attr(aria-label);

        position:absolute;
        left:calc(100% + 16px);
        top:50%;
        transform:translateY(-50%) translateX(-6px);

        z-index:950;

        padding:9px 14px;
        border:1px solid rgba(217,164,65,.35);
        border-radius:11px;

        background:#0a2246;
        color:#fff;

        font-family:var(--sans);
        font-size:12.5px;
        font-weight:600;
        line-height:1;
        white-space:nowrap;

        box-shadow:0 10px 26px rgba(2,10,26,.55);

        opacity:0;
        pointer-events:none;

        transition:opacity .18s ease,transform .18s ease;
    }


    /* little arrow pointing back at the icon */

    .nav-links a::before,
    .profile-link::before,
    .logout-link::before{
        content:"";

        position:absolute;
        left:calc(100% + 10px);
        top:50%;
        transform:translateY(-50%) translateX(-6px);

        z-index:951;

        width:8px;
        height:8px;

        border-left:1px solid rgba(217,164,65,.35);
        border-bottom:1px solid rgba(217,164,65,.35);
        border-radius:2px;

        background:#0a2246;

        rotate:45deg;

        opacity:0;
        pointer-events:none;

        transition:opacity .18s ease,transform .18s ease;
    }


    /* ---------------------------------------------------------
       REVEAL — on hover and on keyboard focus
    --------------------------------------------------------- */

    .nav-links a:hover::after,
    .nav-links a:hover::before,
    .nav-links a:focus-visible::after,
    .nav-links a:focus-visible::before,
    .profile-link:hover::after,
    .profile-link:hover::before,
    .profile-link:focus-visible::after,
    .profile-link:focus-visible::before,
    .logout-link:hover::after,
    .logout-link:hover::before,
    .logout-link:focus-visible::after,
    .logout-link:focus-visible::before{
        opacity:1;
        transform:translateY(-50%) translateX(0);
    }


    /* the profile block is a column, so anchor its label to the
       icon rather than to the whole link */
    .profile-link::after,
    .profile-link::before{
        top:24px;
    }
}


/* =========================================================
   ONE EDIT NEEDED IN nav.php
   -------------------------------------------------------
   Each sidebar link currently has BOTH title="" and
   aria-label="". The browser's own tooltip comes from title,
   so you'd get two labels — the styled one straight away and
   the grey native one a second later.

   Delete the title="..." attribute from the sidebar links.
   aria-label stays: it feeds these labels and screen readers.

   e.g.  <a href="cart.php" title="Cart" aria-label="Cart">
     ->  <a href="cart.php" aria-label="Cart">
========================================================= */