/**
 * MOBILE MEGA MENU ONLY
 * Bootstrap-Style Accordion
 * Max-width: 1024px
 */

@media (max-width: 1024px) {

    /* Hamburger Toggle Button */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        color: #1A2E4C;
        z-index: 10001;
    }

    .menu-toggle svg {
        width: 24px;
        height: 24px;
    }

    /* Mobile Menu Panel - Off Canvas */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 340px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.3) !important;
        padding: 20px 0 !important;
        display: block !important;
    }

    .main-navigation.toggled {
        left: 0 !important;
    }

    /* Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        pointer-events: none;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Primary Menu List */
    .primary-menu {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .primary-menu>li {
        border-bottom: 1px solid #E8ECF1 !important;
        margin: 0 !important;
    }

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

    /* Top Level Links */
    .primary-menu>li>a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 24px !important;
        color: #1A2E4C !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
        border-radius: 0 !important;
    }

    .primary-menu>li>a:active {
        background: rgba(0, 102, 255, 0.05) !important;
    }

    /* Dropdown Arrow */
    .dropdown-arrow {
        width: 18px !important;
        height: 18px !important;
        opacity: 0.4 !important;
        transition: all 0.3s !important;
        flex-shrink: 0 !important;
    }

    /* Active State for Parent Items */
    .menu-item-has-children.active>a {
        color: #0066FF !important;
        background: rgba(0, 102, 255, 0.05) !important;
    }

    .menu-item-has-children.active>a .dropdown-arrow {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
        color: #0066FF !important;
    }

    /* Submenu Container */
    .sub-menu,
    .mega-menu-dropdown {
        display: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #F5F7FA !important;
        position: static !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Mega Menu Content in Mobile */
    .mega-menu-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .mega-menu-plans {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mega Menu Plan Card in Mobile */
    .mega-menu-dropdown > li > a {
        display: block !important;
        width: 100% !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .mega-menu-plan-card {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #E8ECF1 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        transition: background 0.2s !important;
    }

    .mega-menu-plan-card:active {
        background: rgba(0, 102, 255, 0.05) !important;
    }

    .mega-menu-plan-card:last-child {
        border-bottom: none !important;
    }

    /* Mega Menu Plan Card Elements in Mobile */
    .mega-menu-plan-header {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .mega-menu-plan-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }

    .mega-menu-plan-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1A2E4C !important;
        margin: 0 !important;
    }

    .mega-menu-plan-description {
        font-size: 13px !important;
        color: #64748b !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .mega-menu-plan-badge {
        position: static !important;
        margin-left: auto !important;
        margin-bottom: 8px !important;
    }

    /* Mega Menu Banner in Mobile */
    .mega-menu-banner {
        margin: 12px 16px !important;
        padding: 16px !important;
        border-radius: 10px !important;
    }

    /* Show Submenu when Active */
    .menu-item-has-children.active > .sub-menu,
    .menu-item-has-children.active > .mega-menu-dropdown {
        display: block !important;
        animation: slideDown 0.3s ease;
    }

    /* Ensure mega menu content is visible when active */
    .menu-item-has-children.active .mega-menu-content {
        display: block !important;
    }

    .menu-item-has-children.active .mega-menu-plans {
        display: block !important;
    }

    /* Submenu Items - Individual Cards */
    .sub-menu li {
        margin: 8px 12px !important;
        list-style: none !important;
    }

    .sub-menu li:first-child {
        margin-top: 12px !important;
    }

    .sub-menu li:last-child {
        margin-bottom: 12px !important;
    }

    /* Submenu Links - Card Style */
    .sub-menu a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        color: #1A2E4C !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1.5px solid #E8ECF1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s !important;
    }

    .sub-menu a:active {
        background: #ffffff !important;
        color: #0066FF !important;
        transform: translateX(6px) !important;
        box-shadow: 0 6px 16px rgba(0, 102, 255, 0.2) !important;
        border-color: #0066FF !important;
    }

    /* Menu Icons in Submenu */
    .sub-menu .menu-icon {
        width: 22px !important;
        height: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.7 !important;
        flex-shrink: 0 !important;
        color: #0066FF !important;
    }

    .sub-menu .menu-icon svg {
        width: 100% !important;
        height: 100% !important;
    }

    .sub-menu a:active .menu-icon {
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }

    /* Menu Badge */
    .menu-badge {
        background: linear-gradient(135deg, #FFB800 0%, #FF9500 100%) !important;
        color: #0A1628 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(255, 184, 0, 0.3) !important;
    }

    /* Lock Body Scroll when Menu Open */
    body.menu-open {
        overflow: hidden !important;
    }
}

/* Slide Down Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}