/* Luxury Navigation with Purple & Gold */
.nav-luxury {
    background: linear-gradient(135deg, #0b0e13 0%, #111827 50%, #0b0e13 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 30px rgba(73, 184, 239, 0.25), 0 2px 10px rgba(0, 0, 0, 0.45);
    border-bottom: 2px solid rgba(73, 184, 239, 0.35);
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 9999;
}

/* Logo Animation - Faster */
.nav-luxury img {
    transition: all 0.2s ease;
    filter: drop-shadow(0 0 8px rgba(73, 184, 239, 0.35));
}

.nav-luxury img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(73, 184, 239, 0.6));
}

/* Navigation Links - Faster */
.nav-luxury nav a {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.nav-luxury nav a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #49b8ef, transparent);
    transform: translateX(-50%);
    transition: width 0.2s ease;
    box-shadow: 0 0 8px rgba(73, 184, 239, 0.5);
}

.nav-luxury nav a:hover::before {
    width: 100%;
}

.nav-luxury nav a:hover {
    color: #49b8ef !important;
    text-shadow: 0 0 15px rgba(73, 184, 239, 0.8);
    transform: translateY(-2px);
}

/* Active Link */
.nav-luxury nav a.text-\[\#49b8ef\],
.nav-luxury nav a[class*="text-[#49b8ef]"] {
    color: #49b8ef !important;
    text-shadow: 0 0 15px rgba(73, 184, 239, 0.8);
}

/* Icon Buttons - Faster */
.nav-luxury button,
.nav-luxury .flex.items-center.space-x-6 > a {
    position: relative;
    transition: all 0.2s ease;
}

.nav-luxury button:hover svg,
.nav-luxury .flex.items-center.space-x-6 > a:hover svg {
    color: #49b8ef !important;
    filter: drop-shadow(0 0 6px rgba(73, 184, 239, 0.5));
    transform: scale(1.1);
}

/* Cart/Favorites Count Badge - No Animation */
.nav-luxury span[id$="-count"] {
    background: linear-gradient(135deg, #49b8ef, #3da2d4) !important;
    color: #0b0e13 !important;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(73, 184, 239, 0.45);
}

/* Get Started Button - Faster */
.nav-luxury a[class*="bg-[#49b8ef]"],
.nav-luxury a[href*="register"] {
    background: linear-gradient(135deg, #49b8ef 0%, #3da2d4 100%) !important;
    color: #0b0e13 !important;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(73, 184, 239, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    position: relative;
}

.nav-luxury a[class*="bg-[#49b8ef]"]:hover,
.nav-luxury a[href*="register"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(73, 184, 239, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Login Link - Faster */
.nav-luxury a[href*="login"] {
    color: #8fd7ff !important;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(73, 184, 239, 0.35);
    transition: all 0.2s ease;
}

.nav-luxury a[href*="login"]:hover {
    color: #49b8ef !important;
    text-shadow: 0 0 12px rgba(73, 184, 239, 0.6);
    transform: scale(1.05);
}

/* Dropdown Menu */
.nav-luxury div[x-show="open"],
.nav-luxury div[x-show="currencyOpen"] {
    background: linear-gradient(145deg, #0b0e13, #111827) !important;
    border: 2px solid rgba(73, 184, 239, 0.3) !important;
    box-shadow: 0 10px 40px rgba(73, 184, 239, 0.35), 0 5px 20px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    z-index: 99999 !important;
    position: absolute !important;
}

.nav-luxury div[x-show="open"] a:hover,
.nav-luxury div[x-show="open"] button:hover {
    background: rgba(73, 184, 239, 0.15) !important;
    color: #49b8ef !important;
    transform: translateX(3px);
}

/* Mobile Menu */
#mobile-menu {
    background: linear-gradient(180deg, #0b0e13 0%, #111827 100%) !important;
    border-top: 2px solid rgba(73, 184, 239, 0.3) !important;
}

#mobile-menu a:hover {
    background: rgba(73, 184, 239, 0.15) !important;
    color: #49b8ef !important;
    transform: translateX(3px);
}

/* Search Button - Faster */
.nav-luxury button svg {
    transition: all 0.2s ease;
}

.nav-luxury button:hover svg path {
    stroke: #49b8ef;
}

/* Mobile Menu Toggle */
#mobile-menu-toggle:hover svg path {
    stroke: #49b8ef !important;
}

/* User Icon Glow - Faster */
.nav-luxury svg {
    transition: all 0.2s ease;
}

.nav-luxury button:hover svg,
.nav-luxury a:hover svg {
    filter: drop-shadow(0 0 8px rgba(73, 184, 239, 0.5));
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    /* Reduce shadow intensity on mobile */
    .nav-luxury {
        box-shadow: 0 2px 15px rgba(73, 184, 239, 0.15), 0 1px 5px rgba(0, 0, 0, 0.3);
    }

    /* Logo adjustments */
    .nav-luxury img {
        filter: drop-shadow(0 0 4px rgba(73, 184, 239, 0.25));
    }

    /* Reduce hover effects on mobile for performance */
    .nav-luxury img:hover {
        transform: none;
    }

    .nav-luxury button:hover svg,
    .nav-luxury a:hover svg {
        transform: none;
    }

    /* Mobile icon spacing */
    .nav-luxury .flex.items-center.space-x-3 {
        gap: 0.5rem;
    }

    /* Smaller badge on mobile */
    .nav-luxury span[id$="-count"] {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
    }

    /* Mobile menu styling */
    #mobile-menu {
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #mobile-menu a,
    #mobile-menu button {
        font-size: 15px;
        padding: 12px 16px;
    }

    #mobile-menu a:active,
    #mobile-menu button:active {
        background: rgba(73, 184, 239, 0.2) !important;
    }

    /* Currency buttons in mobile menu */
    #mobile-menu form button[name="currency"] {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .nav-luxury .px-3 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .nav-luxury .flex.items-center.space-x-3 {
        gap: 0.25rem;
    }
}