/** * Pre-init skeleton for Elementor Tel fields. * * Until phone-field.js wraps the input, the visitor would see a bare field * that later jumps when the flag and dial code appear. This file paints a * placeholder — grey flag, chevron, dial-code bar — as an inline-SVG * background on the not-yet-enhanced input, and reserves the left padding * the widget will take. The selector stops matching the moment the library * adds its class, so the skeleton vanishes with no JS involved. * * Loaded in the on every page (the other assets load only next to a * Tel field): a skeleton that arrives after first paint is pointless. The * selector is inert on pages without Tel fields. */ .elementor-field-type-tel input[type="tel"]:not(.iti__tel-input) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='15'%3E%3Crect width='20' height='15' rx='2' fill='%23d0d0d0'/%3E%3Cpath d='M25 5.5l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3Crect x='42' y='4' width='26' height='8' rx='4' fill='%23e2e2e2'/%3E%3C/svg%3E"); background-position: 11px center; background-repeat: no-repeat; padding-left: 89px; } /* Elementor's mobile breakpoint scales the field font down, and the widget ends up narrower; keep the reserved space close to what it will become. */ @media (max-width: 767px) { .elementor-field-type-tel input[type="tel"]:not(.iti__tel-input) { padding-left: 84px; } }