/* Phone Validation Styling - Fixes visual issues while maintaining validation */

/* Fix validation feedback positioning to not break component layout */
.phone-validation-feedback {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background: white !important;
    z-index: 1000 !important;
    border: 1px solid #e0e0e0 !important;
}

.phone-validation-feedback.valid-feedback {
    color: #28a745 !important;
    border-color: #28a745 !important;
    background-color: #f8fff9 !important;
}

.phone-validation-feedback.invalid-feedback {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}

/* Remove Bootstrap validation icons (green checkmarks, red X) from ALL form fields */
.form-control.is-valid,
.form-control.is-invalid,
.iti .form-control.is-valid,
.iti .form-control.is-invalid {
    background-image: none !important;
    padding-right: 12px !important;
}

/* Ensure intl-tel-input container has proper positioning for feedback */
.iti {
    position: relative !important;
}

/* Optional: Add subtle border styling for validation states */
.iti.phone-valid {
    border-radius: 4px !important;
}

.iti.phone-invalid {
    border-radius: 4px !important;
}