/* ==========================================================================
   AMANA TECH MAIN MENU STYLES - ELEMENTOR COMPATIBLE
   ========================================================================== */

/* Force load at the end with highest priority */
html body .elementor-widget-nav-menu .elementor-nav-menu,
html body .elementor-widget-nav-menu .elementor-nav-menu--main,
html body .elementor .elementor-widget-nav-menu .elementor-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

html body .elementor-widget-nav-menu .elementor-nav-menu ul,
html body .elementor-widget-nav-menu .elementor-menu-toggle,
html body .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .elementor-nav-menu li,
html body .elementor-widget-nav-menu li {
    position: relative !important;
}

html body .elementor-nav-menu a,
html body .elementor-widget-nav-menu a,
html body .elementor .elementor-element .elementor-nav-menu a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #1A1A1A !important;
    text-decoration: none !important;
    padding: 25px 15px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

html body .elementor-nav-menu a:hover,
html body .elementor-nav-menu li:hover > a,
html body .elementor-nav-menu .elementor-item:hover,
html body .elementor-nav-menu .elementor-item-active {
    color: #2D6BFF !important;
    background: transparent !important;
}

/* Underline animation */
html body .elementor-nav-menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    width: 0 !important;
    height: 2px !important;
    background: #2D6BFF !important;
    transition: width 0.3s ease !important;
    margin: 0 !important;
}

html body .elementor-nav-menu li:hover > a::after,
html body .elementor-nav-menu .elementor-item:hover::after {
    width: calc(100% - 30px) !important;
}

/* ==========================================================================
   DROPDOWN SUBMENU
   ========================================================================== */

html body .elementor-nav-menu .sub-menu,
html body .elementor-nav-menu ul,
html body .elementor-widget-nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    background: #FFFFFF !important;
    min-width: 300px !important;
    padding: 15px 10px !important;
    list-style: none !important;
    margin: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
}

html body .elementor-nav-menu li:hover > .sub-menu,
html body .elementor-nav-menu li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

html body .elementor-nav-menu .sub-menu li {
    padding: 0 !important;
    border: none !important;
}

html body .elementor-nav-menu .sub-menu a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #1A1A1A !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin: 2px 5px !important;
    width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

html body .elementor-nav-menu .sub-menu a::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    background: #2D6BFF !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

html body .elementor-nav-menu .sub-menu a::after {
    display: none !important;
}

html body .elementor-nav-menu .sub-menu li:hover > a,
html body .elementor-nav-menu .sub-menu li > a:hover {
    background: #2D6BFF !important;
    color: #FFFFFF !important;
    transform: translateX(5px) !important;
}

html body .elementor-nav-menu .sub-menu li:hover > a::before {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   DONATE BUTTON STYLING
   ========================================================================== */

html body .elementor-nav-menu li.donate-btn > a,
html body .elementor-widget-button a[href*="donate"],
html body a.elementor-button-success {
    background: #FF751F !important;
    color: #FFFFFF !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 117, 31, 0.4) !important;
    transition: all 0.3s ease !important;
}

html body .elementor-nav-menu li.donate-btn > a::after {
    display: none !important;
}

html body .elementor-nav-menu li.donate-btn:hover > a {
    background: #2D6BFF !important;
    box-shadow: 0 6px 25px rgba(45, 107, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

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

@media (max-width: 1024px) {
    html body .elementor-nav-menu,
    html body .elementor-nav-menu--layout-horizontal {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    html body .elementor-nav-menu ul,
    html body .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    html body .elementor-nav-menu li {
        border-bottom: 1px solid #E5E7EB !important;
    }
    
    html body .elementor-nav-menu a::after {
        display: none !important;
    }
    
    html body .elementor-nav-menu .sub-menu,
    html body .elementor-nav-menu ul {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(45, 107, 255, 0.05) !important;
        min-width: 100% !important;
        padding-left: 20px !important;
    }
    
    html body .elementor-nav-menu li.donate-btn {
        margin: 10px 20px !important;
    }
}