/* Mobile Menu Submenu Fix - Autocom 2026 - VERSÃO FINAL */

@media only screen and (max-width: 992px) {
    
    /* SETAS USANDO CSS PURO - Primeiro Nível */
    #mainmenu > li > span {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        position: absolute !important;
        right: 5px !important;
        top: 5px !important;
        z-index: 1001 !important;
        cursor: pointer !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
    }
    
    /* Ícone de seta para baixo usando CSS */
    #mainmenu > li > span::after {
        content: '▼' !important;
        display: block !important;
        text-align: center !important;
        line-height: 40px !important;
        color: #fff !important;
        font-size: 12px !important;
    }
    
    /* Seta ativa (aberta) - vira para cima */
    #mainmenu > li > span.active::after {
        content: '▲' !important;
    }
    
    /* SETAS USANDO CSS PURO - Segundo Nível */
    #mainmenu li > ul > li > span {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        position: absolute !important;
        right: 5px !important;
        top: 0px !important;
        z-index: 1001 !important;
        cursor: pointer !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
    }
    
    /* Ícone de seta para baixo usando CSS - segundo nível */
    #mainmenu li > ul > li > span::after {
        content: '▼' !important;
        display: block !important;
        text-align: center !important;
        line-height: 40px !important;
        color: #fff !important;
        font-size: 12px !important;
    }
    
    /* Seta ativa (aberta) - segundo nível */
    #mainmenu li > ul > li > span.active::after {
        content: '▲' !important;
    }
    
    /* FORÇAR SUBMENUS A SEREM VISÍVEIS QUANDO EXPANDIDOS */
    header.header-mobile #mainmenu li ul {
        position: relative !important;
        left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: height 0.3s ease !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: none !important;
        width: 100% !important;
    }
    
    /* Garantir que submenus de mega menu também funcionem */
    header.header-mobile #mainmenu > li ul.mega {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        overflow: hidden !important;
        margin-top: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Mega menu container */
    header.header-mobile #mainmenu > li ul.mega > li {
        width: 100% !important;
        padding: 0 !important;
    }
    
    header.header-mobile #mainmenu > li ul.mega .sb-menu {
        padding: 15px !important;
    }
    
    /* Garantir que os itens do submenu sejam visíveis */
    header.header-mobile #mainmenu li ul li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Garantir que os links do submenu sejam visíveis */
    header.header-mobile #mainmenu li ul li a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 10px 15px !important;
        color: #fff !important;
    }
    
    /* Garantir que os links tenham espaço para a seta */
    header.header-mobile #mainmenu li a.menu-item {
        padding-right: 50px !important;
        position: relative !important;
    }
    
    /* Melhorar visibilidade das bordas */
    header.header-mobile #mainmenu li {
        position: relative !important;
    }
    
    /* Garantir que submenus de terceiro nível também funcionem */
    header.header-mobile #mainmenu li ul li ul {
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Hover effect nas setas */
    #mainmenu > li > span:hover,
    #mainmenu li > ul > li > span:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}