/* Estilos para campos obrigatórios */

/* Indicador de campo obrigatório */
label.required::after {
    content: "*";
    color: #ff5722;
    margin-left: 3px;
    font-weight: bold;
}

/* Estilo para validação do formulário */
.validation-message {
    background-color: #ffeded;
    border-left: 4px solid #ff5722;
    color: #7a3b2e;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    display: flex;
    align-items: center;
    animation: notice-fade-in 0.5s ease-in-out;
}

.validation-message i {
    margin-right: 8px;
    font-size: 18px;
    color: #ff5722;
}

/* Animação para campos com erro */
@keyframes field-error-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 87, 34, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
    }
}

/* Animação para a mensagem de validação aparecer suavemente */
@keyframes notice-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.samu-field-error {
    border-color: #ff5722 !important;
    background-color: rgba(255, 87, 34, 0.05) !important;
    animation: field-error-pulse 1.5s infinite;
}

.samu-field-error:focus {
    border-color: #ff5722 !important;
    box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.25) !important;
}

/* Adicionar um ícone de alerta para campos com erro */
.form-group:has(.samu-field-error) label::after {
    content: " ⚠";
    color: #ff5722;
    font-weight: bold;
}

/* Estilo para o tema escuro */
body.theme-dark .validation-message {
    background-color: #423d24;
    border-left-color: #ffb300;
    color: #ffd54f;
}