/* ========================================
   CSS GLOBAL
======================================== */

#hero {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 38.28%; /* Proporção 490/1280 = 38.28% */
    overflow: hidden;
    background: none;
    z-index: 0;
    aspect-ratio: 2.612 / 1; /* Aspect ratio exato: 1280:490 */
}

#hero .backstretch img {
    position: absolute !important;
    top: 0;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: -999999;
}

/* ========================================
   DESTAQUE COM ANIMAÇÃO
======================================== */

.destaque {
    padding: 10px;
    color: #000;
    position: relative;
    display: inline-block;
}

.destaque::before {
    content: '';
    position: absolute;
    opacity: 0.3;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgba(42, 157, 144, 1);
    z-index: 0;
    animation: highlight 1.5s ease-in-out 5s forwards;
    animation-iteration-count: 3;
}

@keyframes highlight {
    to {
        width: 100%;
    }
}

/* ========================================
   BOTÃO POPUP
======================================== */

.botao_popup {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 12px 26px;
    font-family: inherit;
    transition: all 0.1s ease-in;
    background-color: #274754;
    color: #FFFFFF;
}

.botao_popup:hover {
    background-color: #2a9d90;
    text-decoration: none;
}

/* ========================================
   QUIZ DASHBOARD
======================================== */

.quiz-dashboard h2 {
    text-align: center;
}

.containerx {
    display: flex;
    margin-bottom: 10px;
}

.categoria {
    display: flex;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 .25rem .625rem rgba(46, 38, 61, .2);
    padding: 10px;
    margin-bottom: 10px;
}

#headerCategoria {
    display: block;
    background-color: #f0f0f0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 15px;
    text-align: center;
    box-shadow: none;
}

#coluna1-pontuacao,
#coluna2-pontuacao {
    display: block;
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: none;
    margin-bottom: 0.9375rem;
}

#coluna1,
#coluna2 {
    flex: 0 0 50%;
    padding-right: 0;
}

#coluna1 h2,
#coluna1 h3,
#coluna1 h4 {
    margin-top: 10px;
}

#coluna1 p {
    margin-bottom: 0 !important;
    font-size: 1rem;
}

.resposta {
    display: block;
    padding: 0 10px 0 10px;
    font-size: 1.25rem;
}

#coluna1 span {
    background-color: #f0f0f0;
    color: #000;
    border-radius: 12px;
    padding: 5px 10px;
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
}

#coluna1-pontuacao h2 {
    color: #fff;
    background-color: #2a9d90;
    border-radius: 10px;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
}

/* ========================================
   TALENTOS
======================================== */

#wpforms-2639-field_46, #wpforms-field-limit-text-2639-46 {
    display: none;
}

#wpforms-2639-field_46-container label {
    text-transform: initial;
    font-size: var(--wpforms-label-size-font-size);
}

/* ========================================
   TEAM MEMBERS (oculto)
======================================== */

.team-members {
    display: none;
}

/* ========================================
   LAYOUT VERTICAL
======================================== */

.colVertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ========================================
   LOJA WOOCOMMERCE
======================================== */

.xwoocommerce-product-gallery.woocommerce-product-gallery--without-images.woocommerce-product-gallery--columns-4.images,
.product_meta {
    display: none !important;
}

.wc-block-cart__submit-button {
    background-color: #274754ff;
    color: #ffffff;
}

.wc-block-cart__submit-button:hover {
    background-color: #2a9d90ff;
    color: #ffffff;
}

.wc-block-cart__empty-cart__title {
    visibility: hidden;
    position: relative;
}

.wc-block-cart__empty-cart__title::after {
    content: "Seu carrinho está vazio! Comece a comprar!";
    visibility: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.wp-block-woocommerce-empty-cart-block p,
hr {
    display: none;
}

.wp-block-heading .has-text-align-center h2:last-child {
    display: none !important;
}

#woocommerce-thank-you-page-coupon__container,
.woocommerce-thank-you-page-container__row.woocommerce-thank-you-page-container__row_2.woocommerce-thank-you-page-1-column {
    display: none;
}

/* Oculta o texto original */
label[for="subscribe-to-newsletter"] span {
    visibility: hidden; /* Esconde o texto, mas mantém o espaço ocupado */
    position: relative; /* Para posicionar o novo texto corretamente */
}

/* Adiciona o novo texto usando ::after */
label[for="subscribe-to-newsletter"] span::after {
    content: "Desejo receber atualizações sobre produtos e promoções."; /* Novo texto */
    visibility: visible; /* Torna o novo texto visível */
    position: absolute;
    left: 0;
    top: 0;
    color: inherit; /* Mantém a cor do texto original */
    font-size: inherit; /* Mantém o tamanho da fonte original */
}

/* ========================================
   RODAPÉ
======================================== */

.site-footer {
    background-color: #2a9d90;
}

.site-footer .footer-connect .subs_input {
    color: #000;
}

#mce-EMAIL {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.site-info,
.site-footer .btt a {
    background-color: #274754 !important;
}

.site-footer .btt a:hover {
    background-color: #fff !important;
}

/* ========================================
   MEDIA QUERIES (RESPONSIVO)
======================================== */

@media (max-width: 768px) {
    /* Layout do quiz */
    .containerx,
    .categoria {
        display: block !important;
    }

    #coluna1,
    #coluna2 {
        flex: 0 0 100% !important;
        padding-right: 0;
        margin-bottom: 10px;
    }

    /* Formulário WPForms */
    
    /* Impede que qualquer elemento ultrapasse a largura do viewport */
    html, body {
        overflow-x: hidden; /* Remove a barra de rolagem horizontal */
        max-width: 100%;    /* Garante que o corpo não ultrapasse a largura */
        margin: 0;          /* Remove margens padrão */
        padding: 0;         /* Remove paddings padrão */
    }
    
    /* Garante que todos os elementos dentro do body respeitem a largura */
    body * {
        box-sizing: border-box; /* Inclui padding e border na largura total */
        max-width: 100%;        /* Limita a largura máxima */
    }
    /* Limita a largura do formulário WPForms */
    .wpforms-container {
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 auto; /* Centraliza o formulário */
    }
    /* Garante que campos internos não ultrapassem a largura */
    .wpforms-field {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    /* Garante que imagens e iframes sejam responsivos */
    img, iframe {
        max-width: 100%;
        height: auto;
    }
    #wpforms-2639 .wpforms-field-container .wpforms-field {
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 auto; /* Centraliza o formulário */
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        float: none !important;
    }
    .footer-connect .row {
        display: flex;
        flex-direction: column; /* Empilha os blocos verticalmente */
        align-items: center;   /* Centraliza os blocos horizontalmente */
        margin: 15px;
    }
}