/*
 Theme Name:   Passaporte do Campista
 Description:  Tema customizado para e-commerce de passaportes físicos (Campinejo).
 Author:       Kleber
 Template:     hello-elementor
 Version:      1.0.4
*/

/* 1. IMPORTAÇÕES DE FONTES DEVEM FICAR SEMPRE NO TOPO */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ==========================================================================
   1. REGRAS GLOBAIS (Se aplicam a todas as páginas, incluindo a Home)
   ========================================================================== */

/* Ajusta o tamanho do logo e força o alinhamento à esquerda em todo o site */
header.site-header, 
.site-branding, 
.custom-logo-link,
.elementor-widget-theme-site-logo .elementor-widget-container {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

img.custom-logo,
.site-logo img,
header img,
.elementor-widget-theme-site-logo img {
    max-width: 180px !important;
    width: 180px !important;
    height: auto !important;
    margin-top: 15px !important;
    margin-left: 40px !important;
    margin-right: auto !important;
}

/* Garante um comportamento padrão e fundo com imagem para as páginas internas */
header.site-header, 
#masthead, 
.elementor-location-header {
    position: relative !important; 
    
    /* Cor de fundo como segurança (caso a imagem demore a carregar) */
    background-color: #173017 !important; 
    
    /* AQUI ENTRA A SUA IMAGEM PNG 
    background-image: url('https://passaportedocampista.com.br/wp-content/uploads/2026/06/fundomenu4.png') !important;*/
    
    /* Comportamento da imagem */
    background-size: cover !important; /* Estica a imagem para preencher todo o espaço do cabeçalho */
    background-position: center center !important; /* Mantém o foco no centro da imagem */
    background-repeat: no-repeat !important; /* Evita que a imagem se repita como um azulejo de banheiro */
    
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99 !important;
}

/* ==========================================================================
   2. REGRAS EXCLUSIVAS DA HOME (Graças ao seletor body.home)
   ========================================================================== */

/* Transforma o Header em transparente e flutuante APENAS na Home */
body.home header.site-header, 
body.home #masthead, 
body.home .elementor-location-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Adiciona a sombra no logo para dar contraste sobre o banner da Home */
body.home img.custom-logo,
body.home .site-logo img,
body.home header img,
body.home .elementor-widget-theme-site-logo img {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Força o banner da Home a colar no topo absoluto da tela */
body.home #content,
body.home .site-content,
body.home article .elementor-section:first-child,
body.home .elementor-section-wrap > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ajuste fino para a barra de administração do WordPress APENAS na Home */
body.home.admin-bar header.site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.home.admin-bar header.site-header {
        top: 46px !important;
    }
}

/* ==========================================================================
   3. ESTILIZAÇÃO DO MENU (BOTÕES E ALINHAMENTO)
   ========================================================================== */

/* Força a área de navegação a empurrar os itens para a direita */
.site-navigation {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-grow: 1 !important;
    width: 100% !important;
}

/* Ataca a div invisível do WordPress e a lista para empurrar TUDO à direita */
.site-navigation div,
.site-navigation ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important; /* O Pulo do Gato: empurra o bloco inteiro para a direita */
    padding: 0 !important;
    list-style: none !important;
    gap: 15px !important;
}

/* Transforma o texto simples em um Botão Profissional */
.site-navigation a {
    /*display: inline-block !important;
    background-color: #2d5a27 !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;*/
    display: inline-block !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

/* Efeito Hover: O que acontece quando passa o mouse por cima */
.site-navigation a:hover {
    border-bottom: #deb651 1px solid !important;
    color: #deb651 !important;
}

/* ==========================================================================
   4. CORREÇÃO DEFINITIVA DO ALINHAMENTO DO MENU (FORÇADO À DIREITA)
   ========================================================================== */

/* 1. Tira o comportamento Flex do cabeçalho pai para ele parar de esmagar nossa DIV */
header.site-header {
    display: block !important;
}

/* 2. Força a nossa DIV customizada a ocupar 100% da tela real */
.meu-cabecalho-customizado {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. O container do logo ocupa só o lado esquerdo */
.site-branding {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* 4. O container do menu preenche o resto e "empurra" tudo para a direita */
.site-navigation {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important; /* Pulo do gato: anula qualquer centralização do tema */
    margin-right: 0 !important;
}

/* 5. A lista interna de links */
.site-navigation ul, 
.site-navigation div {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   5. QUEBRA DE LIMITE DE LARGURA DO TEMA PAI (FULL WIDTH)
   ========================================================================== */

header.site-header, 
#site-header,
.meu-cabecalho-customizado {
    max-width: none !important; /* Mata a trava de 1140px do Hello Elementor */
    width: 100vw !important; /* Força a ocupar 100% da largura visual da tela inteira */
    left: 0 !important;
    right: 0 !important;
}

/* ==========================================================================
   6. NOVO RODAPÉ PROFISSIONAL (SLOGAN + ÍCONES)
   ========================================================================== */

/* Estrutura Base e Fundo Infinito */
footer.site-footer, #site-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background-color: #0b2e13 !important; /* Verde muito escuro (quase preto) */
    color: #ffffff !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    
    /* Se você quiser a imagem da montanha no fundo depois, usaremos essa linha: */
    /* background-image: url('COLE_O_LINK_DA_IMAGEM_AQUI'); background-size: cover; */
}

/* Espaçamento Interno */
.footer-destaques {
    padding: 30px 40px !important;
}

/* Alinha o lado esquerdo e direito */
.footer-destaques-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
}

/* Textos do Slogan */
.footer-slogan {
    flex: 1 !important;
    min-width: 300px !important;
}

.slogan-texto {
    font-family: 'Caveat', cursive !important;
    color: #ffb800 !important; /* Amarelo Ouro */
    font-size: 40px !important;
    font-weight: 700 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.1 !important;
}

.slogan-sub {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Grade de Ícones (Lado Direito) */
.footer-beneficios {
    flex: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important; /* Centraliza verticalmente todos os itens */
    gap: 0 !important; /* Tiramos o gap para usar o padding da linha divisória */
    flex-wrap: wrap !important;
}

.beneficio-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 170px !important; /* Força todos a terem a mesma largura */
    padding: 0 15px !important; /* Respiro interno */
}

/* Linha dourada separando os itens */
.linha-divisoria {
    border-left: 1px solid rgba(255, 184, 0, 0.4) !important;
}

/* A CORREÇÃO DOS ÍCONES (Tira o quadrado e faz eles aparecerem) */
.beneficio-item i,
.beneficio-item i.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* O 900 salva o dia novamente! */
    font-style: normal !important;
    color: #ffb800 !important; /* Amarelo Ouro */
    font-size: 38px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Texto abaixo do ícone */
.beneficio-item p {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}

/* Barra de Copyright Preta no Final */
.footer-copyright {
    background-color: #051609 !important; /* Verde quase preto total */
    padding: 20px !important;
    text-align: center !important;
}

.footer-copyright p {
    margin: 0 !important;
    color: #aaaaaa !important;
    font-size: 13px !important;
}

/* Responsividade: Como fica no Celular */
@media screen and (max-width: 992px) {
    .footer-destaques-container {
        flex-direction: column !important;
        text-align: center !important;
    }
    .footer-beneficios {
        justify-content: center !important;
    }
    .linha-divisoria {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   7. PREVENÇÃO DE TRANSBORDAMENTO (REMOVE BARRA HORIZONTAL)
   ========================================================================== */

html, body {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* ==========================================================================
   8. CORREÇÃO DO LOGO COM TEXTO OFICIAL (LADO A LADO)
   ========================================================================== */

/* Força o contêiner principal a segurar tudo na mesma linha */
.site-branding {
    display: flex !important;
    flex-direction: row !important; /* Linha horizontal */
    align-items: center !important; /* Alinha pelo centro (vertical) */
    flex-wrap: nowrap !important; /* Proíbe expressamente de pular linha */
}

/* Trava a largura da caixa da imagem para não empurrar o texto */
.logo-imagem {
    flex: 0 0 auto !important;
    display: block !important;
}

/* Anula as margens antigas que estavam "chutando" o texto para longe */
.logo-imagem img.custom-logo,
.logo-imagem img {
    margin-right: 0 !important;
    margin-left: 0 !important; /* O padding do cabeçalho já afasta da borda */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Trava o texto no lado direito e recria o espaçamento */
.logo-texto {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-left: 20px !important; /* A distância entre o escudo dourado e o texto */
}

/* ==========================================================================
   10. BOTÃO "COMPRAR PASSAPORTE" DESTACADO NO MENU (COM ÍCONE SVG)
   ========================================================================== */

/* Estiliza a caixa do botão */
.site-navigation .botao-comprar-destaque a {
    background: linear-gradient(to bottom, #f9a51b, #de8300) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Espaço entre o ícone e o texto */
}

/* INJETA O ÍCONE DO CARRINHO DIRETAMENTE VIA CSS (À PROVA DE FALHAS) */
.site-navigation .botao-comprar-destaque a::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    /* Código do ícone de carrinho em SVG branco puro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23ffffff'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Efeito Hover (Animação ao passar o mouse) */
.site-navigation .botao-comprar-destaque a:hover {
    background: linear-gradient(to bottom, #ffb336, #ed8f00) !important;
    transform: translateY(-2px) !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

/* ==========================================================================
   11. CORREÇÃO DA TIPOGRAFIA E ÍCONES DO RODAPÉ
   ========================================================================== */

/* 2. Aplica a fonte cursiva no Slogan e ajusta o tamanho */
.slogan-texto {
    font-family: 'Caveat', cursive !important;
    color: #ffb800 !important; /* Amarelo Ouro */
    font-size: 55px !important; /* Ajuste o tamanho aqui se achar muito grande */
    font-weight: 700 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.1 !important;
}

/* 3. Salva os ícones (tira o quadrado e faz eles aparecerem) */
.beneficio-item i,
.beneficio-item i.fa-solid,
.footer-beneficios i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* O 900 salva o dia para o FontAwesome! */
    font-style: normal !important;
    color: #ffb800 !important; /* Amarelo Ouro */
    font-size: 38px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
}

/* 4. Ajuste do texto abaixo dos ícones para ficar padrão */
.beneficio-item p,
.footer-beneficios p {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   12. BOTÃO DE CARRINHO FLUTUANTE (FIXO NO ECRÃ)
   ========================================================================== */

.carrinho-flutuante {
    position: fixed !important; /* É isto que o cola no ecrã */
    bottom: 30px !important; /* Distância do fundo */
    right: 30px !important; /* Distância da direita */
    background: linear-gradient(to bottom, #f9a51b, #de8300) !important;
    color: #ffffff !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important; /* Transforma o quadrado num círculo perfeito */
    
    /* Centraliza o ícone lá dentro */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 24px !important; /* Tamanho do ícone */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important; /* Sombra para dar profundidade */
    z-index: 99999 !important; /* Força o botão a ficar por cima de TUDO no site */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Garante a leitura da fonte de ícones que importámos anteriormente */
.carrinho-flutuante i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

/* Efeito ao passar o rato (hover) */
.carrinho-flutuante:hover {
    transform: scale(1.1) !important; /* O botão aumenta ligeiramente de tamanho */
    box-shadow: 0 6px 14px rgba(0,0,0,0.5) !important;
    color: #ffffff !important;
}

/* Ajuste para dispositivos móveis (telemóveis) */
@media screen and (max-width: 768px) {
    .carrinho-flutuante {
        bottom: 20px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
}

/* ==========================================================================
   13. CORREÇÃO DO TAMANHO DO CAMPO DE CUPOM (WOOCOMMERCE)
   ========================================================================== */

/* Aumenta a largura do campo de texto e melhora o espaçamento interno */
.woocommerce-cart table.cart td.actions .coupon .input-text {
    width: 220px !important; /* Aumenta a largura para o texto caber por completo */
    min-width: 180px !important;
    padding: 10px 15px !important; /* Respiro interno para o texto não ficar esmagado */
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
}

/* Garante que o campo e o botão fiquem alinhados lado a lado harmoniosamente */
.woocommerce-cart table.cart td.actions .coupon {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* Espaçamento exato entre o campo e o botão */
}

/* Ajusta o botão para acompanhar a altura e o estilo do campo novo */
.woocommerce-cart table.cart td.actions .coupon .button {
    padding: 10px 20px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}