/* CSS para validação de CPF */

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.error-message.show {
    display: block;
    opacity: 1;
}

/* Estilos para campos válidos e inválidos */
input.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Animação para feedback visual */
input.valid,
input.invalid {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo específico para o campo CPF */
#cpf {
    position: relative;
}

#cpf-error {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}