/**
 * CSS de Correção para Menu Mobile
 * Garante que o menu mobile sempre funcione corretamente
 */

/* ==================== HIERARQUIA DE Z-INDEX ==================== */

/* Menu Mobile - SEMPRE no topo - FORÇA MÁXIMA */
#mobile-menu {
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 85% !important;
    max-width: 320px !important;
    background: white !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
}

#mobile-menu.show {
    transform: translateX(0) !important;
}

#mobile-menu-overlay {
    z-index: 99998 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#mobile-menu-overlay.show {
    opacity: 1 !important;
}

/* Header fixo */
#site-header {
    z-index: 1000 !important;
}

/* Container de busca deve ficar acima do menu de categorias */
.search-container,
#mobile-search > div,
#mobile-search > div > div {
    position: relative !important;
    z-index: 1002 !important; /* Acima do menu de categorias */
}

/* Busca e seus resultados - POSIÇÃO ABSOLUTA para não empurrar conteúdo */
#mobile-search-results,
#desktop-search-results,
#main-search-results {
    z-index: 1000000 !important; /* Z-index máximo para ficar acima de tudo */
    position: absolute !important;
}

/* Menu de categorias deve ficar ATRÁS do dropdown */
.category-nav {
    z-index: 998 !important; /* Abaixo do container de busca */
}

/* ==================== FORÇAR CONTEÚDO ABAIXO DO MENU ==================== */

/* CONTAINERS PRINCIPAIS - ABAIXO DO MENU */
body > div:not(#mobile-menu):not(#mobile-menu-overlay):not(#site-header),
body > main,
body > section {
    isolation: isolate;
    z-index: 1 !important;
}

/* ==================== PREVENIR CONFLITOS ==================== */

/* Popups e modais da página devem ficar abaixo do menu mobile */
.modal,
.popup,
.overlay:not(#mobile-menu-overlay),
.lightbox,
#lightbox,
.ui-dialog,
.ui-widget-overlay {
    z-index: 100 !important;
}

/* ==================== RESPONSIVIDADE ==================== */

@media (max-width: 768px) {
    /* Garantir que conteúdo não vaze */
    body {
        overflow-x: hidden;
    }
    
    /* Quando menu estiver aberto, travar scroll */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ==================== ANIMAÇÕES SUAVES ==================== */

#mobile-menu {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mobile-menu-overlay {
    transition: opacity 0.3s ease !important;
}

#mobile-menu-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==================== FORÇA ESPECÍFICA PARA CONTAINERS ==================== */

/* Criar novo contexto de empilhamento para cada container */
.container,
.produto-container,
.cart-container, 
.category-container,
.carrinho-container,
[class*="container"] {
    isolation: isolate;
    position: relative;
    z-index: 1 !important;
}