/* Phone Validation Styling */

.phone-input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.phone-input.is-valid {
    border-color: #28a745 !important;
    background-color: #f8fff9;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.phone-input.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff8f9;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.phone-input:focus.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.phone-input:focus.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Country code select styling */
#countryCodeSelect {
    font-weight: 500;
    background-position: right 0.75rem center;
}

/* Phone input group styling */
.phone-input-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .phone-input-group {
        flex-direction: column;
    }
}

/* Validation feedback styling */
.phone-input-feedback {
    display: none;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.phone-input.is-valid ~ .valid-feedback {
    display: block;
    color: #28a745;
}

.phone-input.is-invalid ~ .invalid-feedback {
    display: block;
    color: #dc3545;
}

/* Phone placeholder helper text */
.phone-placeholder-info {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}