/*
 * =======================================================
 * ESTRUTURAÇÃO DO CÓDIGO CSS
 * =======================================================
 
/* ============================================== */
/* ✅ COR DA BANDEIRA DE PROMOÇÃO */
/* ============================================== */

.fundo-principal.bandeira-promocao {
    background-color: #000000 !important; /* verde 2DB42B*/
    color: #ffffff !important; /* texto branco pra contraste */
}

/* ============================================== */
/* ESTILOS DE PREÇO (PRINCIPAL EM VERDE) */
/* ============================================== */

.preco-promocional,
.preco-a-partir,
.preco-por,
.preco-venda {
    color: #28a745 !important; /* verde */
    font-weight: 700 !important; /* negrito */
    font-size: 1.2rem !important; /* aumenta o tamanho (ajuste à vontade) */
}

/* ============================================== */
/* --- ESTILO GLOBAL DOS BOTÕES (EFEITO TOXIC SHOCK) --- */
/* ============================================== */

.botao.principal.grande,
.botao-comprar.principal,
.submit-email.botao.principal.grande,
.acoes-produto-responsiva .tag-comprar.fundo-principal {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    
    /* Borda amarela forte (cor de alerta tóxico) */
    border: 2px solid #FFFF00 !important; 
    color: #000 !important; /* Texto preto */
    background: #00ff66 !important; /* Fundo verde sólido */
    
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important; /* Transição mais rápida */
    cursor: pointer !important;
    
    /* BOX-SHADOW INICIAL: Combina verde e amarelo para um brilho mais "sujo" */
    box-shadow: 0 0 15px rgba(0, 255, 102, 1), 0 0 5px rgba(255, 255, 0, 0.6) !important;
    
    /* Aplica as animações TOXIC (pulsação e pisca-pisca rápido) */
    animation: 
        pulse-toxic 1.2s infinite ease-in-out, 
        borda-pisca-toxic 0.5s steps(1, end) infinite !important;
}

/* --- EFEITO VAPOR (MAIS INTENSO E VAZANDO) --- */

.botao.principal.grande::before,
.botao-comprar.principal::before,
.submit-email.botao.principal.grande::before,
.acoes-produto-responsiva .tag-comprar.fundo-principal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 150%; /* Aumenta a área de alcance do vapor */
    height: 150%;
    
    /* Gradiente mais amplo, com a cor de alerta mais intensa */
    background: radial-gradient(circle, rgba(255,255,0,0.8) 0%, rgba(0,255,102,0.4) 30%, transparent 60%); 
    filter: blur(25px); /* Blur MUITO mais forte */
    z-index: -1;
    pointer-events: none;
    animation: vapor-toxic 1.8s infinite ease-in-out; 
}

/* --- HOVER / CLIQUE (Feedback agressivo) --- */

.botao.principal.grande:hover,
.botao-comprar.principal:hover,
.submit-email.botao.principal.grande:hover,
.acoes-produto-responsiva .tag-comprar.fundo-principal:hover,
.botao.principal.grande:active,
.botao-comprar.principal:active,
.submit-email.botao.principal.grande:active {
    border-color: #ff0000 !important; /* Vermelho no hover para pânico total! */
    background-color: #00cc55 !important;
    /* Brilho ainda maior no hover */
    box-shadow: 0 0 35px rgba(0,255,102,1), 0 0 20px rgba(255,255,0,1) !important;
    color: #000 !important;
}

/* ============================================== */
/* --- ANIMAÇÕES 'TOXIC' (KEYFRAMES) --- */
/* ============================================== */

/* Pulsação: Maior transformação de escala e sombra mais agressiva */
@keyframes pulse-toxic {
    0% {
        transform: scale(1);
        /* Sombra inicial mais forte e amarela */
        box-shadow: 0 0 10px rgba(0, 255, 102, 1), 0 0 0 0 rgba(255, 255, 0, 0.6);
    }
    50% {
        transform: scale(1.08); /* Pulso maior */
        /* Explosão de sombra amarela e verde */
        box-shadow: 0 0 30px rgba(0, 255, 102, 1), 0 0 20px rgba(255, 255, 0, 1), 0 0 0 20px rgba(255, 255, 0, 0.2); 
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 255, 102, 1), 0 0 0 0 rgba(255, 255, 0, 0.6);
    }
}

/* Vapor: Expansão mais rápida e evidente */
@keyframes vapor-toxic {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.25); /* Expansão gigante */
        opacity: 1;
    }
}

/* Piscar: Alternância agressiva entre amarelo (#FFFF00) e verde (#00ff66) */
@keyframes borda-pisca-toxic {
    0%, 100% {
        border-color: #FFFF00 !important; /* Amarelo de alerta */
    }
    50% {
        border-color: #00ff66 !important; /* Verde nuclear */
    }
}

/* ============================================== */
/* CORREÇÕES DE SCROLL HORIZONTAL (GLOBAL) */
/* ============================================== */

/* CORREÇÃO DE SCROLL HORIZONTAL (PARA OCULTAR ELEMENTOS QUE TRANSBORDAM, COMO O EFEITO DO BOTÃO) */
body {
    /* Força o navegador a cortar/esconder qualquer conteúdo que ultrapasse o limite horizontal */
    overflow-x: hidden !important; 
}

/* CORREÇÃO AGRESSIVA PARA SCROLL LATERAL EM PLATAFORMAS (DESKTOP E MOBILE) */
html, 
body, 
.conteiner {
    /* Força a eliminação de qualquer barra de rolagem horizontal em toda a página e seus principais contêineres */
    overflow-x: hidden !important; 
}

/* ============================================== */
/* AJUSTES MOBILE PARA BOTÕES (max-width: 768px) */
/* ============================================== */

@media (max-width: 768px) {
    
    /* 1. Correção de Scroll: Força o corpo da página a esconder o que transborda horizontalmente APENAS no mobile. */
    body {
        overflow-x: hidden !important; 
    }
    
    /* Regras do Botão */
    .botao.principal.grande,
    .botao-comprar.principal,
    .submit-email.botao.principal.grande,
    .acoes-produto-responsiva .tag-comprar.fundo-principal {
        background: #00ff66 !important;
        color: #000 !important;
     
        animation:
            pulse-toxic 1.5s infinite ease-in-out,
            borda-pisca-toxic 0.7s steps(1, end) infinite !important;
    }

    /* 2. Ajuste no Vapor: Reduz a largura e altura do ::before (Vapor) para diminuir o transbordo */
    .botao.principal.grande::before,
    .botao-comprar.principal::before,
    .submit-email.botao.principal.grande::before,
    .acoes-produto-responsiva .tag-comprar.fundo-principal::before {
        /* Reduzindo de 200% para 120% para limitar o vazamento e eliminar o scroll */
        width: 120%; 
        height: 120%; 
        filter: blur(15px); 
    }
}

/* ============================================== */
/* AJUSTES MOBILE PARA RASTREIO (max-width: 767px) */
/* ============================================== */

@media only screen and (max-width: 767px) {
    /* 1. Corrige o texto de instrução ("Digite seu código de rastreamento") */
    .rastreio-content p.cor-principal {
        color: #000000 !important; /* Texto preto */
    }

    /* 2. Corrige o campo de input (onde o cliente digita o código) */
    .rastreio-content input#OrderTracking,
    .rastreio-content input.cor-principal {
        color: #000000 !important; /* Texto digitado preto */
        background-color: #ffffff !important; /* Fundo do campo branco */
        border: 1px solid #ccc !important; /* Borda visível */
        height: 40px !important; /* Ajusta a altura se necessário */
    }

    /* 3. Corrige o botão "RASTREAR" (mude o #333333 pela cor que você preferir) */
    .rastreio-content button.rastreio {
        color: #ffffff !important; /* Texto do botão branco */
        background-color: #333333 !important; /* Fundo do botão (Exemplo: Cinza Escuro) */
        border: 1px solid #333333 !important;
        /* Garante que o texto 'RASTREAR' fique visível */
    }
}
     
/* ============================================== */
/* ESTILOS DE AVALIAÇÕES/REVIEWS (COR VERDE) */
/* ============================================== */
      
/* ----- FORMA SEGURA: só dentro do bloco de avaliações ----- */
/* Alvo genérico para o container de reviews (cobre variações de tema) */
.product-reviews .cor-principal,
.product-reviews__overview .cor-principal,
#product-reviews .cor-principal,
.avaliacao .cor-principal,
.avaliacoes .cor-principal,
.product-reviews__item .cor-principal,
.product-reviews__review .cor-principal {
    color: #2DB42B !important;
    font-weight: 600;
}

/* Nota média (strong) que você mostrou */
.product-reviews__overview-average-rating.cor-principal,
strong.product-reviews__overview-average-rating,
.product-reviews__overview-average-rating.cor-principal small,
strong.product-reviews__overview-average-rating small {
    color: #2DB42B !important;
}

/* Caso o check/ícone seja um <i> ou SVG dentro do mesmo span */
.product-reviews .cor-principal i,
.product-reviews .cor-principal svg,
.avaliacao .cor-principal i,
.avaliacao .cor-principal svg {
    color: #2DB42B !important;
    fill: #2DB42B !important; /* para SVGs que usam fill */
}

/* Pseudo-elementos (se alguma estrela/ícone usar ::before/::after) */
.product-reviews .cor-principal::before,
.product-reviews .cor-principal::after {
    color: #2DB42B !important;
    fill: #2DB42B !important;
}