/* Phone number input styling */
input[type="tel"],
input.phone-input,
.phone-input {
    width: 200px !important; /* Appropriate width for phone numbers */
    max-width: 200px;
    font-family: inherit; /* Use same font as other form controls */
}

/* For smaller screens */
@media (max-width: 576px) {
    input[type="tel"],
    input.phone-input,
    .phone-input {
        width: 100% !important;
        max-width: 250px;
    }
}

/* Bootstrap form control override for phone inputs */
.form-control[type="tel"],
.form-control.phone-input {
    width: 200px !important;
    max-width: 200px;
}

@media (max-width: 576px) {
    .form-control[type="tel"],
    .form-control.phone-input {
        width: 100% !important;
        max-width: 250px;
    }
}