/* Estilos para validação de formulários */

/* Estilos para campos válidos com borda verde */
.form-control.is-valid {
    border-color: #2fbf97 !important;
    border-width: 2px;
    padding-right: 45px; /* Espaço para o ícone */
}

/* Estilos para campos inválidos com borda vermelha */
.form-control.is-invalid {
    border-color: #ff5a5f !important;
    border-width: 2px;
}

/* Container para posicionamento relativo dos ícones */
.form-group {
    position: relative;
}

/* Ícone de validação (check verde) */
.validation-icon {
    position: absolute;
    right: 15px;
    color: #2fbf97;
    font-size: 18px;
    display: none;
    z-index: 10;
    pointer-events: none;
}

/* Posicionamento específico para inputs normais */
.form-group .form-control:not(textarea) + .validation-icon,
.form-group .validation-icon {
    top: 50%;
    transform: translateY(-50%);
}

/* Posicionamento específico para textarea */
.form-group textarea.form-control ~ .validation-icon {
    top: 45px;
    transform: none;
}

/* Ajuste para campos com label */
.form-group .form-label + .form-control ~ .validation-icon {
    top: calc(50% + 15px); /* Ajuste baseado na altura do label */
}

.form-group .form-label + textarea.form-control ~ .validation-icon {
    top: 60px; /* Posição específica para textarea com label */
}

/* Mensagens de erro personalizadas */
.description-error,
.name-error {
    color: #ff5a5f;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Mensagem de erro genérica */
.error-message {
    color: #ff5a5f;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Feedback de endereço */
.address-feedback {
    margin-top: 5px;
    font-size: 14px;
    margin-bottom: 20px;
}

.address-feedback.success {
    color: #2fbf97;
}

.address-feedback.error {
    color: #ff5a5f;
}

.address-valid {
    color: #2fbf97;
}

.address-invalid {
    color: #ff5a5f;
}

/* Mensagens de feedback padrão */
.invalid-feedback {
    color: #ff5a5f;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.form-control.is-invalid + .invalid-feedback {
    display: block;
}

/* Animação suave para transições */
.form-control {
    transition: border-color 0.3s ease, border-width 0.3s ease;
}

.validation-icon {
    transition: opacity 0.3s ease;
}

/* Responsividade para mobile */
@media (max-width: 767px) {
    .validation-icon {
        right: 12px;
        font-size: 16px;
    }
    
    .form-control.is-valid {
        padding-right: 40px;
    }
}

/* Ajustes específicos para diferentes tipos de campo */

/* Campo de nome */
#name.is-valid ~ .validation-icon {
    display: block;
}

/* Campo de telefone */
#phone.is-valid ~ .validation-icon {
    display: block;
}

/* Campo de CEP */
#cep.is-valid ~ .validation-icon {
    display: block;
}

/* Campo de descrição */
#description.is-valid ~ .validation-icon {
    display: block;
}

/* Garantir que o ícone apareça apenas quando o campo estiver válido */
.form-control:not(.is-valid) ~ .validation-icon {
    display: none !important;
}

/* Estilo para o estado de foco mantendo a validação */
.form-control.is-valid:focus {
    border-color: #2fbf97;
    box-shadow: 0 0 0 0.2rem rgba(47, 191, 151, 0.25);
}

.form-control.is-invalid:focus {
    border-color: #ff5a5f;
    box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);
}

/* Animação suave para scroll automático */
html {
    scroll-behavior: smooth;
}

/* Destaque visual temporário para campo com erro após scroll */
.form-control.is-invalid:focus {
    animation: errorPulse 0.5s ease-in-out;
}

@keyframes errorPulse {
    0% {
        box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);
    }
    50% {
        box-shadow: 0 0 0 0.4rem rgba(255, 90, 95, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);
    }
}