/* =============================================================================
   📄 C:\VinDXit\frontend\styles\mobile-menu.css
   Mobile Drawer (full clean rewrite)
   - ID-first selectors (class mirrors where helpful)
   - Vertical scroll inside drawer; hidden scrollbar
   - Spacer ABOVE first item + extra margin for Google login
   - Spacer BELOW last item (50vh) so users can scroll past last button
   - Locks background when menu is open (.menu-open)
   - Tabs over spaces ✅
   ============================================================================= */

/* ────────────────────────────────────────────────────────────────────────────
   0) Animations (used by hamburger + links)
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes vxSlideIn {
    0%   { transform: translateX(-100%) scale(0.98); opacity: 0; filter: blur(2px); }
    60%  { transform: translateX(8%)    scale(1.05); opacity: .95; filter: blur(0); }
    100% { transform: translateX(0)     scale(1);    opacity: 1;   filter: blur(0); }
}
@keyframes vxSlideOut {
    0%   { transform: translateX(0)     scale(1);    opacity: 1;   filter: blur(0); }
    40%  { transform: translateX(8%)    scale(1.05); opacity: .9;  filter: blur(0); }
    100% { transform: translateX(-100%) scale(0.98); opacity: 0;   filter: blur(2px); }
}
@keyframes vxBarPulse {
    0%,100% { transform: scaleX(1);   box-shadow: var(--glow, 0 0 .75rem rgba(58,123,242,.25)); }
    50%     { transform: scaleX(1.2); box-shadow: var(--glow-strong, 0 0 1.25rem rgba(58,123,242,.4)); }
}
@keyframes vxSparkle { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes vxTiltHover {
    0% { transform: perspective(800px) rotateX(0) rotateY(0); }
    50%{ transform: perspective(800px) rotateX(5deg) rotateY(5deg); }
    100%{transform: perspective(800px) rotateX(0) rotateY(0); }
}
@keyframes vxRipple {
    0%   { width: 0; height: 0; opacity: .6; }
    100% { width: 220%; height: 220%; opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────────────────
   1) Background lock when drawer is open (toggled in JS)
   ──────────────────────────────────────────────────────────────────────────── */
html.menu-open,
body.menu-open {
    overflow: hidden !important;
    height: 100%;
    position: fixed;
    width: 100%;
    touch-action: none !important; /* Prevent background scrolling */
}

/* ────────────────────────────────────────────────────────────────────────────
   2) Hamburger Toggle (supports id *and* class)
   ──────────────────────────────────────────────────────────────────────────── */
#menu-toggle,
.menu-toggle {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    z-index: 300001; /* Higher to ensure touch events */
    touch-action: manipulation;
    border-radius: var(--card-radius, 12px);
    backdrop-filter: blur(5px);
    transition: transform .2s cubic-bezier(.4,0,2,1), background .25s ease;
}
#menu-toggle:focus-visible,
.menu-toggle:focus-visible {
    outline: 4px solid var(--VinDXit-sky, #00aeef);
    outline-offset: 5px;
    border-radius: var(--card-radius, 12px);
}
#menu-toggle .bar,
.menu-toggle .bar {
    width: 30px;
    height: 4px;
    background: var(--VinDXit-yellow, #ffcc00) !important;
    border-radius: 4px !important;
    position: relative;
    transition: transform .3s cubic-bezier(.4,0,2,1), opacity .3s ease, width .3s ease, background-color .25s ease;
}
#menu-toggle .bar::after,
.menu-toggle .bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent), var(--vx-noise, none);
    opacity: .3;
    border-radius: inherit;
    clip-path: inset(0 100% 0 0);
    mix-blend-mode: screen;
}
/* morph to “X” when menu is open */
body.menu-open #menu-toggle .bar:nth-child(1),
body.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open #menu-toggle .bar:nth-child(2),
body.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; width: 0; }
body.menu-open #menu-toggle .bar:nth-child(3),
body.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* hover/active */
#menu-toggle:hover .bar,
.menu-toggle:hover .bar { background: #ffe680 !important; animation: vxBarPulse .5s ease-in-out infinite; }
#menu-toggle:hover .bar::after,
.menu-toggle:hover .bar::after { animation: vxSparkle .6s ease-out forwards; }
#menu-toggle:active,
.menu-toggle:active { transform: translateY(-50%) translateY(3px) scale(0.96); }
/* hide toggle when menu is open (drawer shows close button) */
body.menu-open #menu-toggle,
body.menu-open .menu-toggle { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────────
   3) Drawer container
   ──────────────────────────────────────────────────────────────────────────── */
#mobile-nav {
    /* position/size */
    position: fixed;
    inset: 0 auto 0 0;							/* top:0 right:auto bottom:0 left:0 */
    width: min(75vw, 800px); /* ✨ slightly wider drawer */
    height: 100dvh;								/* device viewport height */
    min-height: 100dvh;							/* ensure content can overflow */
    z-index: 300000;							/* higher to capture touch events */

    /* visuals (use tokens if present, with safe fallbacks) */
    background:
        var(--vx-noise, none),
        linear-gradient(135deg,
            color-mix(in srgb, var(--xp-panel-900, #121a33) 80%, #000 20%),
            var(--xp-panel-650, #182346) 42%,
            var(--xp-panel-900, #121a33) 78%,
            color-mix(in srgb, var(--VinDXit-blue, #0047ab) 24%, var(--xp-panel-900, #121a33) 76%)
        );
    color: var(--xp-silver, #e6f0ff);
    box-shadow: -8px 0 24px rgba(0,0,0,.85), var(--glow, 0 0 .75rem rgba(58,123,242,.25));
    border-right: 1px solid rgba(255,255,255,.08);
    outline: 1px solid rgba(0,0,0,.45);
    backdrop-filter: saturate(1.3) blur(4px);

    /* internal spacing */
    --menu-top-space: clamp(16px, 3vh, 28px);		/* space ABOVE first item */
    padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) 20px;
    box-sizing: content-box;						/* prevent padding from shrinking scrollable area */

    /* layout */
    display: flex;
    flex-direction: column;
    gap: 14px;

    /* initial hidden state (no page-load animation) */
    transform: translateX(-100%) scale(0.98);
    opacity: 0;
    animation: none;

    /* scrolling only inside the drawer */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;					/* vertical gestures only, override any parent */
    overscroll-behavior: contain;					/* don’t let body steal scroll */
}
/* hide the scrollbar but keep scrolling */
#mobile-nav::-webkit-scrollbar { width: 0; height: 0; }
#mobile-nav { scrollbar-width: none; }

/* neon edge when open (full height, fixed position) */
#mobile-nav.open::before {
    content: "";
    position: fixed; /* fixed ensures it spans full viewport */
    top: 0;
    left: 0;
    width: 6px;
    height: 100dvh; /* always full device height */
    background: linear-gradient(180deg, var(--VinDXit-sky, #00aeef), var(--VinDXit-yellow, #ffcc00));
    filter: blur(.6px);
    box-shadow: 0 0 16px rgba(0,174,239,.7), 0 0 22px rgba(255,204,0,.45);
    opacity: .85;
    pointer-events: none;
    z-index: 300002; /* above panel, below text/buttons */
}

/* spacer ABOVE first item */
#mobile-nav::before {
    content: "";
    display: block;
    height: var(--menu-top-space);
    flex: 0 0 auto;
}
/* spacer BELOW last item (temporary 200vh for testing) */
#mobile-nav::after {
    content: "";
    display: block;
    height: 200vh;									/* temporary to force scrolling; revert to 50vh */
    flex: 0 0 auto;
}

/* open / close animations */
#mobile-nav.open {
    transform: translateX(0) scale(1);
    opacity: 1;
    animation: vxSlideIn .35s cubic-bezier(.4,0,.2,1) both;
}
#mobile-nav.closing {
    animation: vxSlideOut .28s cubic-bezier(.4,0,.2,1) forwards;
}

/* ────────────────────────────────────────────────────────────────────────────
   4) Close button (X)
   ──────────────────────────────────────────────────────────────────────────── */
#menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--VinDXit-yellow, #ffcc00);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 300001; /* higher to ensure touch events */
    padding: 10px;
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.45));
    text-shadow: 0 0 10px rgba(255,204,0,.5);
}
#menu-close:hover { filter: drop-shadow(0 0 10px rgba(255,204,0,.6)); transform: rotate(-6deg) scale(1.06); }
#menu-close:active { transform: rotate(0deg) scale(.92); }
#menu-close:focus-visible {
    outline: 4px solid var(--VinDXit-sky, #00aeef);
    outline-offset: 5px;
    border-radius: var(--card-radius, 12px);
}

/* ────────────────────────────────────────────────────────────────────────────
   5) Menu items
   ──────────────────────────────────────────────────────────────────────────── */
#mobile-nav a,
#mobile-nav span,
#mobile-nav button.menu-item {
    display: block;
    width: 70%;
    color: var(--xp-silver, #ffe6e6);
    text-decoration: none;
    background: linear-gradient(135deg, rgba(42,58,95,.95), rgba(26,40,70,.95));
    border: 2px solid #ffe600;
    border-radius: var(--card-radius, 12px);
    padding: 1rem 1.4rem;
    margin: .6rem 0;
    font-weight: 900;
    box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.45)), var(--bevel, inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25));

    /* safety: avoid horizontal overflow */
    white-space: normal;
    overflow: visible;
    max-width: 100%;
    position: relative;
}
#mobile-nav a:hover,
#mobile-nav button.menu-item:hover {
    transform: translateX(2px) translateY(-1px) scale(1.01);
    filter: saturate(1.15) brightness(1.1);
    box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.45)), var(--glow-strong, 0 0 1.25rem rgba(58,123,242,.4));
    animation: vxTiltHover .7s ease-in-out;
}
#mobile-nav a:active::before,
#mobile-nav button.menu-item:active::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0; height: 0;
    border-radius: 9999px;
    background: rgba(255,255,255,.12);
    animation: vxRipple .45s ease-out forwards;
}
#mobile-nav button.menu-item:focus-visible {
    outline: 4px solid var(--VinDXit-sky, #00aeef);
    outline-offset: 5px;
    border-radius: var(--card-radius, 12px);
}

/* current page highlight */
#mobile-nav #current {
    background: linear-gradient(135deg, #203152, #17253f, var(--VinDXit-blue, #0047ab));
    color: #cfe6ff;
    box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.45)), var(--glow-strong, 0 0 1.25rem rgba(58,123,242,.4));
    position: relative;
}
#mobile-nav #current::before {
    content: "";
    position: absolute;
    left: -10px; top: 12px; bottom: 12px;
    width: 4px; border-radius: 4px;
    background: linear-gradient(180deg, var(--VinDXit-yellow, #ffcc00), var(--VinDXit-sky, #00aeef));
    box-shadow: 0 0 14px rgba(255,204,0,.55), 0 0 18px rgba(0,174,239,.5);
}

/* ────────────────────────────────────────────────────────────────────────────
   6) Google sign-in spacing
   ──────────────────────────────────────────────────────────────────────────── */
/* common IDs for your Google login button(s) */
#google-login,
#login-google,
#googleSignIn {
    margin-top: clamp(10px, 2vh, 18px);
}
/* if you mount the Google widget in a slot, give it top breathing room too */
#signin-slot,
#g_id_signin_mobile {
    margin-top: clamp(10px, 2vh, 18px);
}

/* ────────────────────────────────────────────────────────────────────────────
   7) Safety: prevent horizontal overflow for any child
   ──────────────────────────────────────────────────────────────────────────── */
#mobile-nav > * { max-width: 100%; }

/* ────────────────────────────────────────────────────────────────────────────
   8) Kill animations on mobile (≤ 768px) – performance + user preference
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Disable all custom animations */
    #menu-toggle,
    .menu-toggle,
    #menu-toggle .bar,
    .menu-toggle .bar,
    #mobile-nav,
    #mobile-nav.open,
    #mobile-nav.closing,
    #mobile-nav a,
    #mobile-nav button.menu-item,
    #menu-close {
        animation: none !important;
        transition: none !important;
    }

    /* Remove transform-based hover effects */
    #menu-toggle:hover .bar,
    .menu-toggle:hover .bar,
    #mobile-nav a:hover,
    #mobile-nav button.menu-item:hover,
    #menu-close:hover {
        transform: none !important;
        filter: none !important;
    }

    /* Remove ripple on tap */
    #mobile-nav a:active::before,
    #mobile-nav button.menu-item:active::before {
        display: none;
    }

    /* Optional: reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation: none !important;
            transition: none !important;
        }
    }
}