/* Layout: the plugin's country dropdown needs the field wrapper to allow it room. */ .js-phone-field .iti { display: block; width: 100%; } /* * Divi injects a broad reset ("[.et_pb_contact_field :where(:not(.et-vb-ui))] * { position: relative }") at the same specificity as intl-tel-input's own * ".iti__country-container { position: absolute }" rule, and wins on source * order - which drops the flag/dial-code button out of its overlay position * and into normal flow above the input. Force it back. */ .js-phone-field .iti__country-container { position: absolute !important; } /* * A little more breathing room between the flag/dial-code button and the * typed number. The library measures the button's own offsetWidth (via a * ResizeObserver) to compute the input's padding-left, so growing the * button's box here (padding, not margin - margin isn't part of * offsetWidth) makes that recalculation happen automatically in sync. */ .js-phone-field .iti__selected-country { padding-right: 6px; } /* * The country dropdown (search box + list) is detached to via the * "dropdownParent" option, so it escapes any overflow:hidden ancestor in * Divi's contact-form markup instead of getting clipped/torn ("flags flying"). * It always renders inside a ".iti--detached-country-selector" wrapper, so * that's the safe global hook for styling it (no other widget on the site * uses this library/class). */ .iti--detached-country-selector .iti__search-input { /* Divi's global input-field styling overrides the padding intl-tel-input * reserves for the search icon; restore it using the library's own * spacing variables so the icon has room and isn't visually cut off. */ padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal)) !important; } .js-phone-field input.js-phone-field-invalid { border-color: #e02b27 !important; } .js-phone-field-error { display: none; color: #e02b27; font-size: 0.85em; margin-top: 4px; } .js-phone-field-error.is-visible { display: block; }