/* =========================================
   🚀 ULTRA PREMIUM SYSTEM UI (GLOBAL)
   ========================================= */

/* --- ROOT DESIGN TOKENS --- */
:root {
    --bg-main: #020617;
    --bg-soft: #0f172a;

    --neon-blue: #00a8ff;
    --neon-purple: #a855f7;
    --neon-pink: #ec4899;

    --text-main: #f8fafc;
    --text-dim: #94a3b8;

    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- GLOBAL BODY EXPERIENCE --- */
body {
    font-family: 'Inter', 'Geist', sans-serif;
    color: var(--text-main);

    background: radial-gradient(circle at 20% 30%, rgba(0,168,255,0.08), transparent 40%),
                radial-gradient(circle at 80% 0%, rgba(168,85,247,0.12), transparent 40%),
                var(--bg-main);

    overflow-x: hidden;
    animation: pageEnter 1s var(--ease-premium);
}

/* --- PAGE LOAD (CINEMATIC) --- */
@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: scale(0.97);
        filter: blur(14px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* --- GLOBAL GLOW BACKGROUND (ALIVE EFFECT) --- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none; /* FIXED: Prevents background from blocking clicks */

    background:
        radial-gradient(circle at 10% 20%, rgba(0,168,255,0.15), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(168,85,247,0.15), transparent 40%);

    animation: ambientMove 12s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes ambientMove {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(-30px,20px) scale(1.1); }
}

/* --- GLASS SYSTEM (USED EVERYWHERE) --- */
.glass-panel {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.01)
    );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 10px 40px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05);

    transition: all 0.4s var(--ease-premium);
}

/* --- GLOBAL CARD SYSTEM --- */
.card, .product-card {
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease-premium);
}

.card:hover, .product-card:hover {
    transform: translateY(-12px) scale(1.02);
}

/* --- PREMIUM CARD (BLUE ENERGY) --- */
.premium-glow {
    transition: all 0.4s var(--ease-premium);
}
.premium-glow:hover {
    box-shadow:
        0 30px 60px rgba(0,168,255,0.25),
        0 0 30px rgba(0,168,255,0.4);
}

/* --- VIP CARD (BREATHING BORDER) --- */
@keyframes vipPulse {
    0% { box-shadow: 0 0 0 0 rgba(168,85,247,0.4); }
    50% { box-shadow: 0 0 30px rgba(168,85,247,0.7); }
    100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.4); }
}

.vip-glow {
    animation: vipPulse 3s infinite;
    transition: all 0.4s var(--ease-premium);
}

/* --- BUTTON SYSTEM (GLOBAL) --- */
button, .btn {
    position: relative;
    transition: all 0.3s var(--ease-premium);
    overflow: hidden; /* FIXED: Keeps the shimmer inside the button so it doesn't block clicks */
}

button:hover, .btn:hover {
    transform: translateY(-3px) scale(1.03);

    box-shadow:
        0 10px 30px rgba(0,168,255,0.25),
        0 0 20px rgba(0,168,255,0.3);
}

/* --- BUTTON SHIMMER EFFECT --- */
button::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; /* FIXED: Prevents shimmer layer from intercepting clicks */

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );

    transform: translateX(-100%);
    transition: 0.6s;
}

button:hover::after {
    transform: translateX(100%);
}

/* --- NAVBAR (FLOATING EFFECT) --- */
nav {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(2,6,23,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.05);

    transition: all 0.4s var(--ease-premium);
}

/* --- DROPDOWN (LIKE YOUR ADMIN MENU) --- */
.dropdown-menu {
    animation: dropdownReveal 0.4s var(--ease-premium);
}

@keyframes dropdownReveal {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- INPUTS --- */
input, textarea, select {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    color: white;

    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    transform: scale(1.02);

    border-color: var(--neon-blue);

    box-shadow:
        0 0 0 1px rgba(0,168,255,0.5),
        0 0 20px rgba(0,168,255,0.2);
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple));
    border-radius: 10px;
}

/* --- TEXT GLOW UTILITY --- */
.glow-text {
    text-shadow:
        0 0 10px rgba(0,168,255,0.7),
        0 0 25px rgba(0,168,255,0.5);
}

/* MICRO INTERACTION BLOCK NUKED 💥 */