/**
 * FIX DEFINITIVO PARA MENU MOBILE
 * Solução simples e direta
 */

/* ==================== BUSCA - SEMPRE ACIMA DO MENU MOBILE E CATEGORIAS ==================== */

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

/* Resultados de busca DEVEM ficar acima de TUDO - 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;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0.5rem !important;
    /* Não ocupa espaço no fluxo do documento */
}

/* Garantir que o container pai do main-search-results tenha z-index alto */
div:has(#main-search-results) {
    position: relative !important;
    z-index: 1002 !important;
}

/* Fallback para navegadores que não suportam :has() - selecionar o container diretamente */
.max-w-2xl.mx-auto > div.relative,
div.relative:has(#main-search-input) {
    position: relative !important;
    z-index: 1002 !important;
}

/* Garantir que o header não corte o dropdown */
#site-header {
    overflow: visible !important;
}

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

/* ==================== MENU MOBILE - Z-INDEX MÁXIMO ==================== */

#mobile-menu {
    z-index: 999999 !important;
    position: fixed !important;
    overflow-y: auto !important;
}

#mobile-menu-overlay {
    z-index: 999998 !important;
    position: fixed !important;
}

/* ==================== FORÇAR CONTEÚDO PARA BAIXO ==================== */

/* TUDO que não for menu, overlay, header ou elementos fixos fica com z-index baixo */
/* EXCETO o popup de busca que precisa estar no topo */
body > *:not(#mobile-menu):not(#mobile-menu-overlay):not(#site-header):not(#search-popup-overlay):not(script):not(style):not(header):not(.cart-mobile-footer):not(.cart-mobile-footer-whatsapp):not(.botao-fixo-mobile) {
    z-index: 1 !important;
}

/* Garantir que os cards de produto funcionem corretamente */
.product-card,
.grid.grid-cols-2 {
    z-index: 1 !important;
    position: relative !important;
}

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

/* IMPORTANTE: Botões e links do header devem ser clicáveis */
#site-header a,
#site-header button:not(#mobile-menu-btn) {
    position: relative;
    z-index: 1001 !important;
    pointer-events: auto !important;
}

/* Apenas o botão do menu mobile deve abrir o menu */
#mobile-menu-btn {
    position: relative;
    z-index: 1002 !important;
    pointer-events: auto !important;
}

/* Garantir que containers de conteúdo fiquem abaixo - EXCETO carrinho */
div[class*="container"]:not(#mobile-menu):not(#mobile-menu-overlay):not(.cart-container):not([class*="cart-"]),
main:not(.cart-page),
section:not([class*="cart-"]),
article {
    position: relative;
    z-index: 1 !important;
}

/* EXCEÇÃO CRÍTICA: Botões fixos do carrinho DEVEM estar visíveis */
.cart-mobile-footer,
.cart-mobile-footer-whatsapp,
.cart-mobile-total,
.botao-fixo-mobile,
div.fixed.bottom-0,
[class*="cart-mobile"],
[class*="botao-fixo"] {
    z-index: 99999 !important;
    position: fixed !important;
    pointer-events: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ==================== MOBILE ONLY ==================== */

@media (max-width: 768px) {
    /* Quando menu aberto, bloquear scroll e clicks */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Garantir que menu e overlay sempre fiquem no topo */
    #mobile-menu,
    #mobile-menu * {
        z-index: 999999 !important;
    }
    
    #mobile-menu-overlay {
        z-index: 999998 !important;
        display: block !important;
    }
    
    /* Forçar todo o restante para baixo, EXCETO header e elementos fixos */
    body > *:not(#mobile-menu):not(#mobile-menu-overlay):not(#site-header):not(script):not(style):not(header):not(.cart-mobile-footer):not(.cart-mobile-footer-whatsapp):not(.botao-fixo-mobile):not([class*="cart-mobile"]):not([class*="botao-fixo"]) {
        z-index: 1 !important;
    }
    
    /* Garantir que os cards de produto funcionem corretamente */
    .product-card,
    .grid.grid-cols-2 {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Header sempre no topo (mas abaixo do menu) */
    #site-header {
        z-index: 1000 !important;
    }
    
    /* GARANTIR QUE BOTÕES DO HEADER SEJAM CLICÁVEIS */
    #site-header a,
    #site-header button:not(#mobile-menu-btn) {
        position: relative;
        z-index: 1001 !important;
        pointer-events: auto !important;
    }
    
    /* Apenas o botão do menu mobile deve abrir o menu */
    #mobile-menu-btn {
        position: relative;
        z-index: 1002 !important;
        pointer-events: auto !important;
    }
    
    /* Overlay só deve aparecer quando menu estiver aberto */
    #mobile-menu-overlay:not(.show) {
        pointer-events: none !important;
        display: none !important;
    }
    
    /* EXCEÇÃO CRÍTICA: Botões fixos do carrinho SEMPRE VISÍVEIS */
    .cart-mobile-footer,
    .cart-mobile-footer-whatsapp,
    .cart-mobile-total,
    .botao-fixo-mobile,
    div.fixed.bottom-0,
    [class*="cart-mobile"],
    [class*="botao-fixo"] {
        z-index: 99999 !important;
        position: fixed !important;
        pointer-events: auto !important;
        display: flex !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column;
    }
}