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

input[name="form_fields[cpf_campo]"].cpf-invalid {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 1px rgba(220, 50, 50, 0.2) !important;
}

input[name="form_fields[cpf_campo]"].cpf-valid {
    border-color: #46b450 !important;
    box-shadow: 0 0 0 1px rgba(70, 180, 80, 0.2) !important;
}

.cpf-error-message {
    color: #dc3232;
    font-size: 12px;
    display: block;
    margin-top: 5px;
    animation: fadeIn 0.3s ease-in;
}

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

/* Adiciona ícone de validação (opcional) */
input[name="form_fields[cpf_campo]"].cpf-valid {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2346b450" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px !important;
}

input[name="form_fields[cpf_campo]"].cpf-invalid {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23dc3232" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px !important;
}