/* Newsletter Styles */

/* ========================================
   VARIÁVEIS DE CORES DA MARCA
======================================== */
:root {
    --preto-absoluto: #000000;      /* Detalhes pontuais, rodapé */
    --dourado-sofisticado: #C0AB8E; /* Destaques secundários, ícones, bordas */
    --rosa-nude: #D3B8B8;           /* Cor de destaque principal: Botões, banners */
    --creme-suave: #FDFBF6;         /* Cor de fundo principal */
    --cinza-taupe: #8B8581;         /* Cor do texto principal */
}

#newsletter-message {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    clear: both;
    order: 3; /* Garante que a mensagem fique abaixo em flexbox */
    flex-basis: 100%; /* Ocupa toda a largura disponível */
}

#newsletter-message .success {
    color: var(--preto-absoluto);
    font-weight: bold;
    background: var(--rosa-nude);
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--dourado-sofisticado);
}

#newsletter-message .error {
    color: var(--creme-suave);
    font-weight: bold;
    background: var(--preto-absoluto);
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--dourado-sofisticado);
}

#newsletter-message .info {
    color: var(--preto-absoluto);
    font-weight: bold;
    background: var(--dourado-sofisticado);
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--rosa-nude);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
}

.newsletter-inputs {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap; /* Permite que os elementos quebrem em telas menores */
    justify-content: center;
}

.newsletter-inputs input {
    flex: 1;
    min-width: 150px;
}

/* Ajuste de posicionamento para dispositivos móveis */
@media (max-width: 768px) {
    .footer-newsletter {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .footer-newsletter p {
        width: 100% !important;
        text-align: center !important;
    }
    
    #newsletter-message {
        margin-top: 10px;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .newsletter-inputs {
        flex-direction: column;
    }
    
    .newsletter-inputs input,
    .newsletter-inputs button {
        width: 100%;
    }
}