/**
 * intl-tel-input's wrapper defaults to display:inline-block sized to
 * its content, so it doesn't line-break after the label or stretch to
 * match the other Bootstrap form-control fields. Make it behave the
 * same way form-control does.
 */
.iti {
    display: block;
    width: 100%;
}

/**
 * Both the always-visible flag+dial-code button (.iti__selected-country,
 * overlaid on the white input box) and the country dropdown popup
 * (.iti__country-selector, its own white surface) set color:inherit /
 * no color at all, so they pick up whatever color the page body has.
 * On the site's dark theme that meant near-white text on a white
 * background - invisible. Force dark, readable text in both regardless
 * of the surrounding page theme.
 */
.iti__selected-country,
.iti__country-selector {
    color: #1a1a1a;
}

/**
 * The library injects country-specific example numbers as placeholders.
 * Keep those examples visually distinct from entered phone numbers.
 */
[data-iti-display]::placeholder {
    color: #c4cbd3;
    opacity: 1;
}