/* Mobile Menu Fix - Override styles for proper hamburger menu functionality */

@media (max-width: 768px) {
    .nav-menu {
        display: flex !important;
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: var(--bg-dark) !important;
        border-bottom: 2px solid var(--border-color) !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 1rem 0 !important;
        list-style: none !important;
        z-index: 999 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transform: translateY(-8px) !important;
        transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease !important;
        pointer-events: none !important;
    }

    .nav-menu.active {
        max-height: calc(100vh - 80px) !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow-y: auto !important;
        pointer-events: auto !important;
    }

    .nav-menu li {
        border-bottom: 1px solid rgba(0, 255, 0, 0.2) !important;
    }

    .nav-menu li:last-child {
        border-bottom: none !important;
    }

    .nav-menu a {
        display: block !important;
        padding: 1rem 2rem !important;
        white-space: normal !important;
        border: none !important;
        color: var(--text-light) !important;
        text-decoration: none !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        background-color: rgba(0, 255, 0, 0.1) !important;
        border: none !important;
        box-shadow: inset 4px 0 0 var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    .nav-menu .btn,
    .nav-menu .btn-primary,
    .nav-menu .shop-link {
        padding: 1rem 2rem !important;
        border: none !important;
        background-color: transparent !important;
        display: block !important;
    }

    .nav-menu .btn:hover,
    .nav-menu .btn-primary:hover,
    .nav-menu .shop-link:hover {
        background-color: rgba(0, 255, 0, 0.1) !important;
        color: var(--primary-color) !important;
        border: none !important;
        box-shadow: inset 4px 0 0 var(--primary-color) !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        z-index: 1001 !important;
    }

    .mobile-menu-toggle span {
        width: 26px !important;
        height: 3px !important;
        background-color: var(--primary-color) !important;
        transition: var(--transition) !important;
        display: block !important;
        border-radius: 2px !important;
        transform-origin: center !important;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important;
    }
}

@media (max-width: 480px) {
    .nav-menu {
        top: 70px !important;
        max-height: calc(100vh - 70px) !important;
    }
}