/**
 * Stili per la validazione dei form
 */

/* Stili generali per i campi con validazione */
.form-control.is-valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-pending {
    border-color: #17a2b8;
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Icone di stato dei campi */
.status-icon {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.input-with-icon {
    position: relative;
}

/* Messaggi di feedback */
.feedback-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.is-valid ~ .feedback-text {
    color: #28a745;
}

.is-invalid ~ .feedback-text {
    color: #dc3545;
}

.is-pending ~ .feedback-text {
    color: #17a2b8;
}

/* Password toggle */
.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    z-index: 5;
}

.password-toggle-btn:hover {
    color: #5a6268;
}

.input-password-wrapper {
    position: relative;
}

.input-password-wrapper .form-control {
    padding-right: 40px;
}

/* Indicatore forza password */
.password-strength-meter {
    height: 5px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    -webkit-appearance: none;
    appearance: none;
}

.password-strength-meter::-webkit-meter-bar {
    background: #eee;
    border-radius: 3px;
}

.password-strength-meter::-webkit-meter-optimum-value {
    background: #28a745;
    border-radius: 3px;
}

.password-strength-meter::-webkit-meter-suboptimum-value {
    background: #ffc107;
    border-radius: 3px;
}

.password-strength-meter::-webkit-meter-even-less-good-value {
    background: #dc3545;
    border-radius: 3px;
}

/* Stili per i criteri della password */
.password-criteria-list {
    margin-top: 10px;
    padding-left: 0;
    list-style-type: none;
}

.password-criterion {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.criterion-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 12px;
}

.password-criterion.valid .criterion-icon {
    background-color: #28a745;
    color: white;
}

.password-criterion.invalid .criterion-icon {
    background-color: #dc3545;
    color: white;
}

/* Responsive fixes per dispositivi mobili */
@media (max-width: 767.98px) {
    .form-control {
        font-size: 16px; /* Evita lo zoom automatico su iOS */
    }
    
    .password-criteria-list {
        font-size: 0.8rem;
    }
    
    .status-icon {
        right: 2rem;
    }
    
    .input-with-icon .form-control {
        padding-right: 2.5rem;
    }
}