/* wp-content/themes/seu-tema-filho/css/custom-cf7-alerts.css */

.custom-cf7-alert-box {
    position: fixed; /* Posição fixa na tela */
    top: 20px; /* 20px do topo */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para centralizar */
    padding: 25px 35px; /* Espaçamento interno maior para acomodar ícone e texto */
    border-radius: 12px; /* Cantos mais arredondados */
    font-family: 'Segoe UI', Arial, sans-serif; /* Fonte moderna */
    color: #fff; /* Cor do texto (branco padrão) */
    z-index: 99999; /* Garante que fique acima de outros elementos */
    opacity: 0; /* Começa invisível */
    visibility: hidden; /* Oculta completamente */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Transição suave */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Sombra mais proeminente */
    text-align: center; /* TODO o conteúdo centralizado */
    max-width: 450px; /* Largura máxima, ajustável */
    min-width: 300px; /* Largura mínima para melhor leitura */
    display: flex; /* Para flexbox, mas os itens serão empilhados */
    flex-direction: column; /* Empilha os elementos verticalmente */
    align-items: center; /* Centraliza os itens horizontalmente dentro da caixa */
    justify-content: center; /* Centraliza os itens verticalmente */
}

.custom-cf7-alert-box.show {
    opacity: 1; /* Torna visível */
    visibility: visible; /* Torna visível */
}

/* Estilo BASE para o ícone (div) */
.alert-icon {
    width: 80px; /* Largura da área do ícone */
    height: 80px; /* Altura da área do ícone */
    margin-bottom: 15px; /* Espaço entre o ícone e a primeira linha */
    background-size: contain; /* Ajusta a imagem para caber dentro do elemento */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-position: center center; /* Centraliza a imagem */
}

/* Cores de fundo das CAIXAS de alerta */
.custom-cf7-alert-success {
    background-color: #fff; /* Verde para sucesso */
    color: #000; /* Texto branco */
}

.custom-cf7-alert-error {
    background-color: #fff; /* Vermelho para erro geral de envio */
    color: #000; /* Texto branco */
}

.custom-cf7-alert-validation-error {
    background-color: #fff; /* Amarelo/Laranja para alerta de validação */
    color: #000; /* Texto escuro para contraste no fundo claro */
}


/* DEFININDO AS IMAGENS PARA CADA TIPO DE ALERTA */

/* Ícone para sucesso */
.custom-cf7-alert-success .alert-icon {
    background-image: url('../custom-cf7/Check.png'); /* Caminho para sua imagem de check */
}

/* Ícone para erro */
.custom-cf7-alert-error .alert-icon {
    background-image: url('../custom-cf7/Error.png'); /* Caminho para sua imagem de erro (X) */
}

/* Ícone para erro de validação */
.custom-cf7-alert-validation-error .alert-icon {
    background-image: url('../custom-cf7/Warning.png'); /* Caminho para sua imagem de warning/alerta */
}


/* Estilo para a primeira linha de texto (título/descrição principal) */
.alert-line-1 {
    font-size: 1.5em; /* Maior que a segunda linha */
    font-weight: 600; /* Negrito */
    margin-bottom: 5px; /* Espaço entre as linhas */
    line-height: 1.3;
}

/* Estilo para a segunda linha de texto (instrução/próximo passo) */
.alert-line-2 {
    font-size: 1.1em; /* Tamanho padrão, menor que a primeira linha */
    font-weight: 400; /* Normal */
    opacity: 0.9; /* Ligeiramente mais transparente */
    line-height: 1.3;
}

/* Responsividade: para telas menores */
@media (max-width: 600px) {
    .custom-cf7-alert-box {
        width: 95%; /* Ocupa mais largura em telas pequenas */
        left: 2.5%; /* Ajuste da posição esquerda */
        transform: translateX(0); /* Remove o transform para simplificar */
        padding: 20px;
    }
    .alert-icon {
        width: 60px; /* Ícone menor em telas pequenas */
        height: 60px;
    }
    .alert-line-1 {
        font-size: 1.3em;
    }
    .alert-line-2 {
        font-size: 1em;
    }
}