/* Estilos para campos brasileiros do checkout */

/* Container dos campos de pessoa */
.person-type-field {
    position: relative;
    margin-bottom: 1.2em;
}

/* Campo de seleção do tipo de pessoa */
#billing_persontype_field {
    margin-bottom: 1.5em;
}

#billing_persontype_field select {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
}

/* Campos CPF e CNPJ */
.cpf-field input,
.cnpj-field input {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Campos obrigatórios - adiciona asterisco */
.cpf-field label:after,
.cnpj-field label:after,
.company-field.required label:after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

/* Animação de transição para mostrar/ocultar campos */
.cpf-field,
.cnpj-field,
.company-field {
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Estados de erro */
.woocommerce-invalid .cpf-field input,
.woocommerce-invalid .cnpj-field input {
    border-color: #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

/* Melhorias para mobile */
@media (max-width: 768px) {
    .cpf-field,
    .cnpj-field,
    .company-field {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    .form-row-first,
    .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}

/* Indicação visual para campo ativo */
.cpf-field.active,
.cnpj-field.active,
.company-field.active {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 0.5em;
    margin: 0.5em 0;
}

/* Tooltip de ajuda para os campos */
.person-type-help {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
    display: block;
}

/* Melhoria na validação visual */
.field-valid input {
    border-color: #27ae60;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.3);
}

.field-invalid input {
    border-color: #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

/* Estilo para mensagens de validação em tempo real */
.validation-message {
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 3px;
    display: none;
}

.validation-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.validation-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}