/* =================== CSS GAMING + RODAPÉ UNIFICADO - OTIMIZADO =================== */

/* VARIÁVEIS CSS GLOBAIS */
:root {
--neon-purple: #b200ff;
--neon-green: #00ffaa;
--neon-blue: #00d4ff;
--dark-bg: #0a0a0f;
--card-bg: #ffffff;
--cor-primaria: #0a0a0f;
--cor-secundaria: #1a1a2e;
--cor-destaque: #b200ff;
--cor-hover: #00ffaa;
--gradiente-principal: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
}

/* =================== RESET COMPLETO DOS PREÇOS =================== */
*[class*="preco"],
*[class*="price"],
*[class*="valor"] {
text-decoration: unset !important;
color: unset !important;
font-size: unset !important;
font-weight: unset !important;
opacity: unset !important;
text-shadow: unset !important;
}

/* =================== FUNDO GERAL =================== */
body {
background: linear-gradient(135deg, #0a0a0f, #1a1a2e) !important;
color: white !important;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

/* =================== CABEÇALHO - FUNDO BRANCO E TEXTO PRETO =================== */
header,
.header,
.cabecalho,
.topo,
.navbar,
.menu-topo,
#header,
#cabecalho {
background: white !important;
background-color: white !important;
color: black !important;
}

/* TODOS OS ELEMENTOS DO CABEÇALHO - TEXTO PRETO */
header *,
.header *,
.cabecalho *,
.topo *,
.navbar *,
.menu-topo *,
#header *,
#cabecalho * {
color: black !important;
text-shadow: none !important;
}

/* LINKS DO CABEÇALHO - CONSOLIDADO */
html body header a,
html body .header a,
html body .cabecalho a,
html body .topo a,
html body .navbar a,
html body .menu-topo a,
html body #header a,
html body #cabecalho a,
html body header nav ul li a,
html body .header nav ul li a,
html body #header nav ul li a,
html body header ul li a,
html body .header ul li a,
html body #header ul li a,
html body header .container nav ul li a,
html body .header .container nav ul li a,
html body #header .container nav ul li a,
html body header .menu-horizontal li a,
html body header .menu-vertical li a,
html body header .menu-principal li a,
html body .header .menu-horizontal li a,
html body .header .menu-vertical li a,
html body .header .menu-principal li a,
html body #header .menu-horizontal li a,
html body #header .menu-vertical li a,
html body #header .menu-principal li a {
color: black !important;
text-decoration: none !important;
text-shadow: none !important;
font-weight: normal !important;
}

/* HOVER DOS LINKS DO CABEÇALHO */
html body header a:hover,
html body .header a:hover,
html body .cabecalho a:hover,
html body #header a:hover,
html body #cabecalho a:hover {
color: #333 !important;
text-shadow: none !important;
}

/* =================== TÍTULOS DE CATEGORIAS - COR BRANCA =================== */

/* TÍTULOS H1, H2, H3 APENAS COM CLASSES ESPECÍFICAS DE CATEGORIA */
.titulo-categoria,
.nome-categoria,
.categoria-titulo,
.secao-titulo,
.titulo-secao,
.categoria-nome,
.titulo-vitrine,
.nome-secao,
.vitrine-titulo,
.produtos-titulo {
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
font-weight: bold !important;
}

/* FORÇAR TÍTULOS DOS CARDS PARA PRETO */
.listagem-item h1,
.listagem-item h2,
.listagem-item h3,
.produto-card h1,
.produto-card h2,
.produto-card h3 {
color: black !important;
text-shadow: none !important;
}

/* CLASSES ESPECÍFICAS DE TÍTULO DE CATEGORIA - SEM AFETAR CARDS */
div:not(.listagem-item):not(.produto-card) .titulo-categoria,
div:not(.listagem-item):not(.produto-card) .nome-categoria,
div:not(.listagem-item):not(.produto-card) .categoria-titulo,
div:not(.listagem-item):not(.produto-card) .secao-titulo,
div:not(.listagem-item):not(.produto-card) .titulo-secao,
div:not(.listagem-item):not(.produto-card) .categoria-nome,
div:not(.listagem-item):not(.produto-card) .titulo-vitrine,
div:not(.listagem-item):not(.produto-card) .nome-secao,
div:not(.listagem-item):not(.produto-card) .vitrine-titulo,
div:not(.listagem-item):not(.produto-card) .produtos-titulo {
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
font-weight: bold !important;
}

/* TÍTULOS DENTRO DE DIVS COM CLASSE CATEGORIA/VITRINE/PRODUTOS */
div[class*="categoria"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h1,
div[class*="categoria"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h2,
div[class*="categoria"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h3,
div[class*="vitrine"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h1,
div[class*="vitrine"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h2,
div[class*="vitrine"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h3,
div[class*="produtos"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h1,
div[class*="produtos"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h2,
div[class*="produtos"]:not(.listagem-item):not(.produto-card):not(header div):not(.header div) h3 {
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
font-weight: bold !important;
}

/* SELETOR ESPECÍFICO EXISTENTE */
div#listagemProdutos.listagem.borda-alpha.com-caixa a.titulo-categoria.borda-principal.cor-principal {
color: white !important;
}

/* =================== CARDS DE PRODUTO - FUNDO BRANCO E TEXTO PRETO =================== */
.listagem-item {
background-color: white !important;
color: black !important;
margin: 10px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* FORÇAR TÍTULOS DOS CARDS PARA PRETO - MÁXIMA ESPECIFICIDADE */
html body .listagem-item *,
html body .listagem-item h1,
html body .listagem-item h2,
html body .listagem-item h3,
html body .listagem-item h4,
html body .listagem-item h5,
html body .listagem-item h6 {
color: black !important;
text-shadow: none !important;
}

html body .produto-card *,
html body .produto-card h1,
html body .produto-card h2,
html body .produto-card h3,
html body .produto-card h4,
html body .produto-card h5,
html body .produto-card h6 {
color: black !important;
text-shadow: none !important;
}

html body .item-produto *,
html body .item-produto h1,
html body .item-produto h2,
html body .item-produto h3,
html body .item-produto h4,
html body .item-produto h5,
html body .item-produto h6 {
color: black !important;
text-shadow: none !important;
}

/* ESPECIFICIDADE EXTRA PARA GARANTIR QUE OS CARDS FICAM PRETOS */
html body main .listagem-item h1,
html body main .listagem-item h2,
html body main .listagem-item h3,
html body main .produto-card h1,
html body main .produto-card h2,
html body main .produto-card h3,
html body .main .listagem-item h1,
html body .main .listagem-item h2,
html body .main .listagem-item h3,
html body .main .produto-card h1,
html body .main .produto-card h2,
html body .main .produto-card h3 {
color: black !important;
text-shadow: none !important;
font-weight: normal !important;
}

/* =================== RODAPÉ - FUNDO VIOLETA ESCURO E TEXTO BRANCO =================== */

/* ELEMENTOS PRINCIPAIS DO RODAPÉ */
html body footer,
html body .footer,
html body .rodape,
html body #footer,
html body #rodape,
html body div.footer,
html body div.rodape,
html body div#footer,
html body div#rodape,
html body section.footer,
html body section.rodape,
html body section#footer,
html body section#rodape,
*[class*="footer"],
*[class*="rodape"],
*[id*="footer"],
*[id*="rodape"] {
background: linear-gradient(135deg, #0a0a0f, #1a1a2e) !important;
background-color: #0a0a0f !important;
color: white !important;
}

/* TODOS OS ELEMENTOS DENTRO DO RODAPÉ */
html body footer *,
html body .footer *,
html body .rodape *,
html body #footer *,
html body #rodape *,
*[class*="footer"] *,
*[class*="rodape"] *,
*[id*="footer"] *,
*[id*="rodape"] * {
color: white !important;
text-shadow: none !important;
background-color: transparent !important;
}

/* LINKS DO RODAPÉ */
html body footer a,
html body .footer a,
html body .rodape a,
html body #footer a,
html body #rodape a,
*[class*="footer"] a,
*[class*="rodape"] a,
*[id*="footer"] a,
*[id*="rodape"] a {
color: white !important;
text-decoration: none !important;
text-shadow: none !important;
}

/* HOVER DOS LINKS DO RODAPÉ - VERDE NEON */
html body footer a:hover,
html body .footer a:hover,
html body .rodape a:hover,
html body #footer a:hover,
html body #rodape a:hover,
*[class*="footer"] a:hover,
*[class*="rodape"] a:hover,
*[id*="footer"] a:hover,
*[id*="rodape"] a:hover {
color: #00ffaa !important;
text-shadow: 0 0 10px rgba(0, 255, 170, 0.5) !important;
}

/* TÍTULOS NO RODAPÉ */
html body footer h1, html body footer h2, html body footer h3, html body footer h4, html body footer h5, html body footer h6,
html body .footer h1, html body .footer h2, html body .footer h3, html body .footer h4, html body .footer h5, html body .footer h6,
html body .rodape h1, html body .rodape h2, html body .rodape h3, html body .rodape h4, html body .rodape h5, html body .rodape h6,
html body #footer h1, html body #footer h2, html body #footer h3, html body #footer h4, html body #footer h5, html body #footer h6,
html body #rodape h1, html body #rodape h2, html body #rodape h3, html body #rodape h4, html body #rodape h5, html body #rodape h6 {
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
font-weight: bold !important;
}

/* =============================================================================
   CORREÇÃO DE SCROLL PARA MINICART - LOJA INTEGRADA
   ============================================================================= */

/* Estrutura base do minicart */
.minicart,
.carrinho-lateral,
.modal-carrinho,
.sidebar-cart {
    display: flex !important;
    flex-direction: column !important;
    max-height: 80vh !important;
    overflow: hidden !important;
}

/* Cabeçalho do carrinho (fixo) */
.minicart .titulo,
.minicart h2,
.minicart h3,
.carrinho-lateral .titulo,
.modal-carrinho .titulo {
    flex-shrink: 0 !important;
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
}

/* Área de conteúdo com scroll */
.minicart .conteudo,
.minicart .produtos,
.minicart .itens,
.minicart ul,
.carrinho-lateral .conteudo,
.carrinho-lateral .produtos,
.modal-carrinho .conteudo,
.modal-carrinho .produtos {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    max-height: calc(80vh - 120px) !important;
}

/* Rodapé do carrinho (fixo) */
.minicart .total,
.minicart .botoes,
.minicart .finalizar,
.carrinho-lateral .total,
.carrinho-lateral .botoes,
.modal-carrinho .total,
.modal-carrinho .botoes {
    flex-shrink: 0 !important;
    padding: 15px !important;
    border-top: 1px solid #eee !important;
    background: white !important;
}

/* Personalização da barra de scroll */
.minicart .conteudo::-webkit-scrollbar,
.minicart .produtos::-webkit-scrollbar,
.minicart .itens::-webkit-scrollbar,
.carrinho-lateral .conteudo::-webkit-scrollbar,
.modal-carrinho .conteudo::-webkit-scrollbar {
    width: 6px !important;
}

.minicart .conteudo::-webkit-scrollbar-track,
.minicart .produtos::-webkit-scrollbar-track,
.carrinho-lateral .conteudo::-webkit-scrollbar-track,
.modal-carrinho .conteudo::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.minicart .conteudo::-webkit-scrollbar-thumb,
.minicart .produtos::-webkit-scrollbar-thumb,
.carrinho-lateral .conteudo::-webkit-scrollbar-thumb,
.modal-carrinho .conteudo::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
}

.minicart .conteudo::-webkit-scrollbar-thumb:hover,
.minicart .produtos::-webkit-scrollbar-thumb:hover,
.carrinho-lateral .conteudo::-webkit-scrollbar-thumb:hover,
.modal-carrinho .conteudo::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

/* Compatibilidade com tema escuro */
.tema-escuro .minicart .total,
.tema-escuro .minicart .botoes,
.tema-escuro .carrinho-lateral .total,
.tema-escuro .carrinho-lateral .botoes,
.tema-escuro .modal-carrinho .total,
.tema-escuro .modal-carrinho .botoes {
    background: #323232 !important;
    border-color: #555 !important;
}

.tema-escuro .minicart .titulo,
.tema-escuro .carrinho-lateral .titulo,
.tema-escuro .modal-carrinho .titulo {
    border-color: #555 !important;
}

/* =================== TEXTO BRANCO NOS BOTÕES =================== */

/* BOTÕES GERAIS - TEXTO BRANCO */
html body button,
html body .btn,
html body .botao,
html body .button,
html body input[type="submit"],
html body input[type="button"],
html body .adicionar-carrinho,
html body .finalizar-compra,
html body .comprar-agora,
html body .btn-primary,
html body .btn-secondary,
html body .btn-success,
html body .botao-comprar,
html body .botao-adicionar {
    color: white !important;
    text-shadow: none !important;
}

/* BOTÕES DENTRO DOS CARDS DE PRODUTO - ESPECIFICIDADE MÁXIMA */
html body .listagem-item button,
html body .listagem-item .btn,
html body .listagem-item .botao,
html body .listagem-item .button,
html body .listagem-item input[type="submit"],
html body .listagem-item input[type="button"],
html body .listagem-item .adicionar-carrinho,
html body .listagem-item .comprar-agora,
html body .listagem-item .botao-comprar,
html body .produto-card button,
html body .produto-card .btn,
html body .produto-card .botao,
html body .produto-card .button,
html body .produto-card input[type="submit"],
html body .produto-card input[type="button"],
html body .produto-card .adicionar-carrinho,
html body .produto-card .comprar-agora,
html body .produto-card .botao-comprar,
html body .item-produto button,
html body .item-produto .btn,
html body .item-produto .botao,
html body .item-produto .button,
html body .item-produto input[type="submit"],
html body .item-produto input[type="button"],
html body .item-produto .adicionar-carrinho,
html body .item-produto .comprar-agora,
html body .item-produto .botao-comprar {
    color: white !important;
    text-shadow: none !important;
}

/* LINKS QUE FUNCIONAM COMO BOTÕES */
html body a.btn,
html body a.botao,
html body a.button,
html body a.adicionar-carrinho,
html body a.finalizar-compra,
html body a.comprar-agora,
html body a.botao-comprar {
    color: white !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* DENTRO DOS CARDS TAMBÉM */
html body .listagem-item a.btn,
html body .listagem-item a.botao,
html body .listagem-item a.button,
html body .listagem-item a.adicionar-carrinho,
html body .listagem-item a.comprar-agora,
html body .produto-card a.btn,
html body .produto-card a.botao,
html body .produto-card a.button,
html body .produto-card a.adicionar-carrinho,
html body .produto-card a.comprar-agora,
html body .item-produto a.btn,
html body .item-produto a.botao,
html body .item-produto a.button,
html body .item-produto a.adicionar-carrinho,
html body .item-produto a.comprar-agora {
    color: white !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* HOVER DOS BOTÕES - MANTÉM BRANCO OU MUDA PARA VERDE NEON */
html body button:hover,
html body .btn:hover,
html body .botao:hover,
html body .button:hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body .adicionar-carrinho:hover,
html body .finalizar-compra:hover,
html body .comprar-agora:hover,
html body a.btn:hover,
html body a.botao:hover,
html body a.button:hover {
    color: var(--neon-green) !important;
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.3) !important;
}

/* SELETOR UNIVERSAL PARA GARANTIR - ÚLTIMO RECURSO */
button *,
.btn *,
.botao *,
.button *,
.adicionar-carrinho *,
.finalizar-compra *,
.comprar-agora *,
.botao-comprar * {
    color: inherit !important;
}

/* =================== RESPONSIVO MOBILE =================== */
@media (max-width: 768px) {
    /* MINICART MOBILE */
    .minicart,
    .carrinho-lateral,
    .modal-carrinho {
        max-height: 90vh !important;
    }
    
    .minicart .conteudo,
    .minicart .produtos,
    .carrinho-lateral .conteudo,
    .modal-carrinho .conteudo {
        max-height: calc(90vh - 100px) !important;
    }
    
    /* APENAS UL DE PRODUTOS - NÃO MENU */
    body.pagina-categoria main ul,
    body.pagina-produto main ul,
    body[class*="categoria"] main ul,
    body[class*="produto"] main ul,
    .vitrine ul,
    .prateleira ul,
    .listagem {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0 auto;
        list-style: none;
        gap: 20px;
    }
    
    /* LI DE PRODUTOS */
    body.pagina-categoria main ul > li,
    body.pagina-produto main ul > li,
    body[class*="categoria"] main ul > li,
    body[class*="produto"] main ul > li,
    .vitrine ul > li,
    .prateleira ul > li,
    .listagem > li {
        width: 90%;
        max-width: 500px;
        margin: 0;
        padding: 15px;
        float: none;
        display: block;
        box-sizing: border-box;
        background: white;
        border-radius: 8px;
    }
    
    /* IMAGENS */
    body.pagina-categoria main ul li img,
    body.pagina-produto main ul li img,
    .vitrine ul li img,
    .prateleira ul li img {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
        display: block;
        margin: 0 auto 15px;
    }
}
/* OTIMIZAÇÃO DE IMAGENS DOS CARDS - MOBILE */
@media (max-width: 768px) {
    body.pagina-categoria main ul li img,
    body.pagina-produto main ul li img,
    .vitrine ul li img,
    .prateleira ul li img,
    .listagem-item img {
        width: 100% !important;
        height: 450px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        border-radius: 8px 8px 0 0 !important;
    }
}
/* REMOVE MARGENS/BORDAS BRANCAS DAS IMAGENS - MOBILE */
@media (max-width: 768px) {
    /* Remove espaços ao redor da imagem */
    .listagem-item,
    .prateleira ul li,
    body.pagina-categoria main ul li,
    body.pagina-produto main ul li {
        padding: 0 !important;
        overflow: hidden;
    }
    
    /* Imagem ocupa 100% sem bordas brancas */
    .listagem-item img,
    .prateleira ul li img,
    body.pagina-categoria main ul li img,
    body.pagina-produto main ul li img {
        width: 100% !important;
        height: 450px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Espaçamento só no conteúdo (nome/preço/botão) */
    .listagem-item > div,
    .prateleira ul li > div,
    body.pagina-categoria main ul li .info-produto,
    body.pagina-produto main ul li .info-produto {
        padding: 15px !important;
    }
}