/* ================================
   MOBILE MENU - OVERLAY COMPLETO
   ================================ */


/* OVERLAY - COBERTURA TOTAL */
.mobile-menu-overlay {
    position: fixed !important;
    top: 135px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 135px) !important;
    /* REMOVIDO: background: rgba(0, 0, 0, 0.5) !important; */ /* Deixando o Tailwind controlar o background */
    z-index: 99999 !important;
    display: none;
}


.mobile-menu-overlay.active {
    display: block !important;
}


/* CONTAINER - SÓ O MENU LATERAL */
.mobile-menu-container {
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    /* REMOVIDO: background: white; */ /* Deixando o Tailwind controlar o background */
    width: 472px !important; /* ✅ LARGURA fixa do menu */
    max-width: 472px !important;
    height: calc(100% - 5px) !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    /* Arredondamento apenas no topo */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}


.mobile-menu-overlay.active .mobile-menu-container {
    transform: translateX(0) !important;
}


/* ✅ GARANTIR QUE O OVERLAY CUBRA TUDO */
#mobile-menu-overlay {
    position: fixed !important;
    top: 135px !important; /* ✅ CORRIGIDO para 135px */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 135px) !important; /* ✅ CORRIGIDO para 135px */
    /* REMOVIDO: background: rgba(0, 0, 0, 0.5) !important; */ /* Deixando o Tailwind controlar o background */
    z-index: 99999 !important;
}


/* ✅ FORÇAR OVERLAY COMPLETO */
.mobile-menu-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* REMOVIDO: background: rgba(0, 0, 0, 0.5); */ /* Deixando o Tailwind controlar o background */
    z-index: -1;
}


/* SUBMENUS - ANIMAÇÃO LENTA */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out;
}


.mobile-submenu.show {
    max-height: 400px; /* Ajuste conforme necessário */
    opacity: 1;
}


/* SETAS - ROTAÇÃO LENTA */
.accordion-arrow {
    transition: transform 0.5s ease-in-out;
}


.accordion-arrow.rotated {
    transform: rotate(180deg);
}


/* ITEM ATIVO */
.menu-item-active {
    color: #9E629F !important; /* Pode ser necessário ajustar para dark mode se não usar Tailwind */
    transition: color 0.3s ease;
}


.menu-item-active .accordion-arrow {
    color: #9E629F !important; /* Pode ser necessário ajustar para dark mode se não usar Tailwind */
}


/* HOVER SUAVE */
.menu-item-header {
    transition: color 0.3s ease;
}

#mobile-menu-overlay a:active {
    color: #9E629F !important;
}


/* UTILITÁRIOS */
.hidden {
    display: none !important;
}


/* FONT INTER */
.font-inter {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}


/* ✅ GARANTIR SCROLL BLOQUEADO */
body.menu-open {
    overflow: hidden !important;
}


/* ================================
   HAMBÚRGUER - ESTADO ATIVO (LILÁS)
   ================================ */


/* Hambúrguer normal - transição suave */
.hamburger-menu svg path {
    transition: fill 0.3s ease, fill-opacity 0.3s ease;
}


/* Hambúrguer ativo - lilás */
.hamburger-menu.menu-active svg path {
    fill: #9E629F !important; /* Pode ser necessário ajustar para dark mode se não usar Tailwind */
    fill-opacity: 1 !important;
}


/* Alternativa - usando data-attribute */
.hamburger-menu[data-menu-open="true"] svg path {
    fill: #9E629F !important; /* Pode ser necessário ajustar para dark mode se não usar Tailwind */
    fill-opacity: 1 !important;
}


/* ================================
   CORREÇÕES MOBILE - SÓ LARGURA + SETAS
   ================================ */


/* ✅ LARGURA RESPONSIVA NO MOBILE */
@media (max-width: 639px) {
    .mobile-menu-container {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
    }
}


/* ✅ GARANTIR SETAS VISÍVEIS (SEM ALTERAR VELOCIDADE) */
.accordion-arrow {
    flex-shrink: 0 !important;
    min-width: 16px !important;
    min-height: 16px !important;
}