/* =====================================================================
	mobile-menu.css — N64 / Filter-drawer vibe (unified with filter.js)
	+ Flair: blazing neon, tactile arcade presses, holographic shimmers, morphs
	+ Cowbell: bold gradients, 3D pops, retro sparkles, over-the-top animations
	(keeps original class names; zero HTML changes needed)
===================================================================== */

/* --- Shared tokens (fallbacks if filter.js hasn’t injected them) --- */
:root {
	/* Filter-style tokens (from filter.js), with fallbacks */
	--vx-bg:      #0d1630;
	--vx-panel:   #121a2a;
	--vx-panel-2: #1d2a44;
	--vx-blue:    #0047AB;
	--vx-sky:     #00AEEF;
	--vx-yellow:  #FFCC00;
	--vx-text:    #e9eef6;
	--vx-muted:   #9ba7c0;
	--radius:     14px;
	--shadow:     0 10px 24px rgba(0,0,0,.35);

	/* Compare/N64 effects with more intensity */
	--glow:        0 0 1rem rgba(0, 85, 255, 0.5);
	--glow-strong: 0 0 2rem rgba(0, 85, 255, 0.75);
	--bevel:       inset 0 3px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.45);

	/* Amplified flair tokens */
	--neon:        0 0 1rem rgba(0, 174, 239, .7), 0 0 2rem rgba(0, 71, 171, .6);
	--neon-strong: 0 0 1.5rem rgba(0, 174, 239, .85), 0 0 2.5rem rgba(0, 71, 171, .75);
	--press:       translateY(3px) scale(0.96);
	--tilt:        rotateX(8deg) rotateY(8deg);
	--holo:        linear-gradient(45deg, rgba(0,174,239,.2), rgba(255,204,0,.2), rgba(0,174,239,.2));
}

/* 🩷 TASK: Neon glass extras (tokens + noise/shimmer) */
:root {
	--vx-noise: radial-gradient(40% 60% at 20% 30%, rgba(255,255,255,.06), transparent 60%),
	            radial-gradient(35% 55% at 80% 70%, rgba(255,255,255,.04), transparent 60%),
	            linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,.035));
	--vx-edge: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.35);
	--vx-glo: 0 0 .8rem rgba(0,174,239,.6), 0 0 1.6rem rgba(0,71,171,.5);
}

/* --- Prefers-reduced-motion respect --- */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- Keyframes for maximum cowbell --- */
@keyframes vxSlideIn {
	0% { transform: translateX(-100%) scale(0.9); opacity: .5; 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 vxNeonPulse {
	0%, 100% { box-shadow: var(--shadow), var(--neon); }
	50% { box-shadow: var(--shadow), var(--neon-strong); }
}
@keyframes vxBarPulse {
	0%, 100% { transform: scaleX(1); box-shadow: var(--glow); }
	50% { transform: scaleX(1.2); box-shadow: var(--glow-strong); }
}
@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 vxSparkle { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes vxRipple {
	0% { width: 0; height: 0; opacity: .6; }
	100% { width: 220%; height: 220%; opacity: 0; }
}

/* --- Hamburger toggle — arcade-style with holographic flair --- */
.menu-toggle {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	background: transparent !important;
	border: none !important;
	padding: 10px !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 7px;
	cursor: pointer;
	z-index: 200000;
	touch-action: manipulation;
	border-radius: var(--radius);
	backdrop-filter: blur(5px);
	transition: transform .2s cubic-bezier(.4,0,.2,1), background .25s ease;
}
.menu-toggle:focus-visible {
	outline: 4px solid var(--vx-sky);
	outline-offset: 5px;
	border-radius: var(--radius);
}
.menu-toggle .bar {
	width: 30px;
	height: 4px;
	background: var(--vx-yellow) !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;
	will-change: transform, opacity, width;
}
/* 🩷 TASK: Prism streak on bars */
.menu-toggle .bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent),
		var(--holo);
	opacity: .3;
	border-radius: inherit;
	clip-path: inset(0 100% 0 0);
	mix-blend-mode: screen;
}

/* Hamburger → X morph with a snap */
body.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; width: 0; }
body.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Holographic hover with sparkle and pulse */
.menu-toggle:hover .bar { background: #ffe680 !important; animation: vxBarPulse .5s ease-in-out infinite; }
.menu-toggle:hover .bar::after { animation: vxSparkle .6s ease-out forwards; }
.menu-toggle:active { transform: translateY(-50%) var(--press); }

/* Hide hamburger when drawer is open */
body.menu-open .menu-toggle { display: none !important; }

/* --- Drawer panel — blazing neon, holographic gradient, 3D slide --- */
.mobile-nav {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(65vw, 340px);
	height: 100vh;
	/* 🩷 TASK: holographic glass + noise grain */
	background:
		var(--vx-noise),
		linear-gradient(135deg,
			color-mix(in srgb, var(--vx-panel) 80%, #000 20%),
			var(--vx-panel-2) 42%,
			var(--vx-panel) 78%,
			color-mix(in srgb, var(--vx-blue) 24%, var(--vx-panel) 76%)
		);
	color: var(--vx-text);
	padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transform: translateX(-100%) scale(.9);
	transition: transform .4s cubic-bezier(.4,0,.2,1);
	z-index: 200000;
	box-shadow: -8px 0 24px rgba(0,0,0,.85), var(--glo, var(--neon-strong));
	border-right: 1px solid rgba(255,255,255,.08);
	outline: 1px solid rgba(0,0,0,.45);
	backdrop-filter: saturate(1.3) blur(4px);
	will-change: transform, scale;
	/* Scroll + containment */
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	/* Layout discipline */
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	padding-top: 64px; /* moves content below the close button */
	padding-bottom: calc(env(safe-area-inset-bottom) + 240px) !important; /* LOTS of bottom room */
}
.mobile-nav.open { transform: translateX(0) scale(1); animation: vxSlideIn .4s cubic-bezier(.4,0,.2,1) both; }

/* 🩷 TASK: neon spine accent when open */
.mobile-nav.open::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: linear-gradient(180deg, var(--vx-sky), var(--vx-yellow));
	filter: blur(.6px);
	box-shadow: 0 0 16px rgba(0,174,239,.7), 0 0 22px rgba(255,204,0,.45);
	opacity: .85;
}

/* Close button with arcade snap and neon burst */
.mobile-nav .menu-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	border: none;
	color: var(--vx-yellow);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 200000;
	padding: 10px;
	border-radius: var(--radius);
	box-shadow: var(--vx-edge);
	transition: transform .2s ease, filter .25s ease, box-shadow .25s ease;
	text-shadow: 0 0 10px rgba(255,204,0,.5);
	transform-origin: 60% 40%;
}
.mobile-nav .menu-close:hover { filter: drop-shadow(0 0 10px rgba(255,204,0,.6)); box-shadow: var(--neon-strong); transform: rotate(-6deg) scale(1.06); }
.mobile-nav .menu-close:active { transform: rotate(0deg) scale(.92); }

/* --- Link buttons — N64 A/B vibe with holographic shine and 3D pop --- */
.mobile-nav a {
	display: block;
	width: 100% !important;
	box-sizing: border-box;
	color: var(--vx-text) !important;
	text-decoration: none;
	background: linear-gradient(135deg, rgba(42,58,95,.95), rgba(26,40,70,.95));
	border: 1px solid #2a3757;
	border-radius: var(--radius);
	padding: 1rem 1.4rem;
	margin: .6rem 0;
	font-weight: 900;
	letter-spacing: .3px;
	box-shadow: var(--shadow), var(--bevel);
	transition: transform .12s ease, filter .25s ease, box-shadow .3s ease, border-color .25s ease;
	position: relative;
	overflow: hidden;
	perspective: 800px;
	white-space: normal !important;
	word-break: break-word;
	flex: 0 0 auto !important;
}
/* Holo sheen layer */
.mobile-nav a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--holo);
	border-radius: inherit;
	box-shadow: var(--neon-strong);
	opacity: 0;
	transition: opacity .3s ease;
}
/* 🩷 TASK: magnetic hover */
.mobile-nav a:hover {
	transform: translateX(2px) translateY(-1px) scale(1.01) perspective(800px) var(--tilt);
	filter: saturate(1.15) brightness(1.1);
	border-color: #3a4d78;
	box-shadow: var(--shadow), var(--glow-strong);
	animation: vxTiltHover .7s ease-in-out;
	--glo: 0 0 1.2rem rgba(0,174,239,.75), 0 0 2.2rem rgba(0,71,171,.6);
}
.mobile-nav a:hover::after { opacity: .7; }
/* 🩷 TASK: ripple press */
.mobile-nav a: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 a:active { transform: translateY(0) scale(.96); }

/* Primary link with blazing neon and holographic pulse */
.mobile-nav a.primary {
	background: linear-gradient(135deg, var(--vx-yellow), #e6b800, var(--vx-sky));
	color: #0a0f1c !important;
	text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 0 10px rgba(0,0,0,.35);
	animation: vxNeonPulse 1.4s ease-in-out infinite;
	filter: saturate(1.15);
	box-shadow: var(--shadow), var(--glo, var(--neon-strong));
}
.mobile-nav a.primary:hover { transform: translateX(3px) translateY(-1px) scale(1.02); }

/* Secondary ghost buttons with vibrant holographic hover */
.mobile-nav .ghost {
	background: transparent;
	color: var(--vx-sky) !important;
	border: 1px solid var(--vx-sky);
	box-shadow: var(--shadow);
}
.mobile-nav .ghost:hover {
	background: var(--vx-sky);
	color: #fff !important;
	box-shadow: var(--shadow), var(--neon-strong);
}
.mobile-nav .ghost::after { background: var(--holo); }

/* Current page pill with glowing edges + left bar */
.mobile-nav .current {
	display: block;
	padding: 1rem 1.4rem;
	border-radius: var(--radius);
	background: linear-gradient(135deg, #203152, #17253f, var(--vx-blue));
	border: 1px solid #3a4d78;
	color: #cfe6ff;
	font-weight: 900;
	box-shadow: var(--shadow), var(--glow-strong), inset 0 1px 0 rgba(255,255,255,.1);
	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(--vx-yellow), var(--vx-sky));
	box-shadow: 0 0 14px rgba(255,204,0,.55), 0 0 18px rgba(0,174,239,.5);
}

/* --- Body overlay + scroll lock with dramatic fade --- */
html, body { overflow-x: hidden; } /* 🩷 TASK: no global sideways scroll */
body.menu-open {
	overflow: hidden;        /* locks background */
	overflow-x: hidden;
	width: 100%;             /* iOS/Safari fix */
}
body.menu-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,.55), rgba(0,71,171,.3));
	backdrop-filter: blur(4px);
	z-index: 1040;
	opacity: 0;
	transition: opacity .35s ease;
}
body.menu-open::before { opacity: 1; }

/* 🩷 TASK: hard stop inside drawer for any sneaky overflow */
.mobile-nav * { max-width: 100% !important; }

/* --- Keep footer links hidden on mobile --- */
@media (max-width: 900px) { footer nav { display: none !important; } }

/* --- Center VindXit logo on mobile --- */
@media (max-width: 900px) {
	.logo-link {
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1500;
	}
	.logo-img { max-width: 300px; height: auto; }
}

/* --- Style buttons in input rows on mobile with arcade flair --- */
@media (max-width: 900px) {
	.input-button-row {
		display: flex; flex-direction: column; align-items: center; gap: 14px;
	}
	.input-button-row input, .input-button-row select {
		width: 90%; max-width: 340px;
	}
	.input-button-row .mobile-button-row {
		display: flex; justify-content: space-between; width: 90%; max-width: 340px; gap: 14px;
	}
	.input-button-row .mobile-button-row button { width: 48%; }
	.input-button-row button {
		background-color: #111827 !important;
		color: var(--vx-yellow) !important;
		border: 1px solid rgba(255,204,0,.4) !important;
		border-radius: var(--radius);
		box-shadow: var(--shadow), var(--bevel);
		transition: transform .12s ease, box-shadow .25s ease;
		position: relative; overflow: hidden;
	}
	.input-button-row button::after {
		content: ""; position: absolute; inset: 0; background: var(--holo); opacity: 0; transition: opacity .3s ease;
	}
	.input-button-row button:hover { box-shadow: var(--shadow), var(--neon-strong); }
	.input-button-row button:hover::after { opacity: .6; }
	.input-button-row button:active { transform: var(--press); }
}

/* --- Desktop: keep hamburger visible (override any previous hides) --- */
.menu-toggle { display: flex !important; }

/* 🩷 TASK: Safe-area candy at the bottom for notched phones */
@supports (padding: max(0px)) {
	.mobile-nav { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
/* === Keep menu links in a single vertical column + scroll further === */
.mobile-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;         /* never wrap into a new column/row */
  height: 100dvh !important;            /* include mobile browser chrome */
  max-height: 100dvh !important;
  overflow-y: auto !important;          /* scroll vertically inside the drawer */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;    /* smooth iOS scroll */
  overscroll-behavior: contain;         /* keep scroll trapped in drawer */
  padding-bottom: calc(env(safe-area-inset-bottom) + 240px) !important; /* LOTS of bottom room */
}

/* Each item stays in the flow vertically and won't squish/wrap horizontally */
.mobile-nav > * { flex: 0 0 auto !important; }
.mobile-nav a {
  width: 100% !important;
  flex: 0 0 auto !important;
  white-space: normal !important;       /* long labels can wrap to next line */
  word-break: break-word;
}

/* Extra spacer after last item so you can scroll past it comfortably */
.mobile-nav::after {
  content: "";
  display: block;
  height: 35vh;                         /* more breathing room; tweak as you like */
  flex: 0 0 auto;
}
/* === Mobile-nav custom scrollbar (RIZ MODE) === */
.mobile-nav {
	scrollbar-width: thin;                /* Firefox */
	scrollbar-color: var(--vx-sky) var(--vx-panel-2);
}

/* WebKit browsers */
.mobile-nav::-webkit-scrollbar {
	width: 10px;
}
.mobile-nav::-webkit-scrollbar-track {
	background: var(--vx-panel-2);
	border-radius: var(--radius);
}
.mobile-nav::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--vx-sky), var(--vx-yellow));
	border-radius: var(--radius);
	box-shadow: 0 0 8px rgba(0,174,239,.7), 0 0 12px rgba(255,204,0,.5);
}
.mobile-nav::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--ion-b), var(--ion-e));
	box-shadow: 0 0 10px rgba(255,77,157,.6), 0 0 14px rgba(0,174,239,.6);
}