/*=============================================
=        International Telephone Input        =
=               intl-tel-input                =
= https://github.com/jackocnr/intl-tel-input  =
==============================================*/

/* Change the padding of the dial code container */
.iti {
    padding: 0;
}

/* Change the border radius of the dial code container */
.iti__selected-country {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.iti__selected-country-primary {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-color: rgba(0, 0, 0, .05);
}

/* Change the font size of search input */
.iti__search-input {
    font-size: 0.9rem;
}

/* Change the font size of the dial code part */
/* Change the font size of the country names in the dropdown */
/* Change the font size of the dial codes in the dropdown */
.iti__selected-dial-code,
.iti__country-name,
.iti__dial-code {
    font-size: 0.8rem;
}

/* Bootstrap 5 shows .invalid-feedback only when it is a direct sibling of .is-invalid.
   intl-tel-input wraps the input in a .iti container, breaking this DOM relationship.
   This forces FormValidation error messages to be visible when the row is invalid. */
.fv-plugins-bootstrap5-row-invalid .fv-plugins-message-container.invalid-feedback {
    display: block;
}