/** * Autoplaza overrides for intl-tel-input (v23.x) so the flag/dial-code widget * looks native to the theme's `.ap-input` fields (44px, --ap-radius-sm, * --ap-border, red focus ring). Loaded after intlTelInput.min.css. * See inc/phone-input.php. * * v23 renamed most markup classes vs v18: * .iti__selected-flag → .iti__selected-country (button) + .iti__selected-country-primary * input → .iti__tel-input * dropdown wrapper → .iti__dropdown-content (contains .iti__search-input + .iti__country-list) * and exposes --iti-* custom properties we lean on for theming. */ /* Theme the library via its own custom props where possible. */ .iti { --iti-border-color: var(--ap-border, #e4e8ea); --iti-hover-color: #eef1f3; --iti-dialcode-color: var(--ap-ink, #1d1e2f); --iti-dropdown-bg: var(--ap-white, #fff); /* Fill the form field. iti defaults to inline-block; the theme fields are full width, and inside flex rows we let it grow + shrink instead. */ display: block; width: 100%; } .ap-lead-cta__row > .iti, .ap-offer-form .iti, .ap-promo-band__row .iti, .ap-promo-band__field .iti { flex: 1 1 auto; min-width: 0; width: auto; } /* The enhanced input keeps its .ap-input look (height/border/radius/focus). iti sets padding-left inline to clear the dial-code chip; keep the right pad consistent with the theme field. */ .iti .ap-input, .iti input[type="tel"], .iti .iti__tel-input { width: 100%; padding-right: 14px; } /* Dial-code + flag chip (the button) - round the left corners to match the field and add a hairline divider so it reads as a native prefix. */ .iti__selected-country, .iti__selected-country-primary { background-color: var(--ap-paper, #f6f8f9); border-top-left-radius: var(--ap-radius-sm, 8px); border-bottom-left-radius: var(--ap-radius-sm, 8px); } .iti__selected-country-primary { border-right: 1px solid var(--ap-border, #e4e8ea); padding: 0 8px; } .iti .iti__selected-dial-code { font-size: 14px; color: var(--ap-ink, #1d1e2f); margin-left: 6px; margin-right: 8px; } /* Mirror the theme's red focus ring on the whole widget when the field has focus (the ring lives on the input, but draw it around the chip too so the prefix is included visually). */ .iti:focus-within .iti__selected-country-primary { border-right-color: var(--ap-red, #ff1d3b); } /* Dropdown panel - theme border/radius/typography + shadow. */ .iti__dropdown-content { border: 1px solid var(--ap-border, #e4e8ea); border-radius: var(--ap-radius-sm, 8px); box-shadow: 0 12px 30px rgba(29, 30, 47, 0.14); font-size: 14px; color: var(--ap-ink, #1d1e2f); overflow: hidden; } /* Search box (new in v19+ - the whole point of the upgrade). Make it look like a theme field so it reads as a native search. */ .iti__search-input { font-size: 14px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ap-border, #e4e8ea); color: var(--ap-ink, #1d1e2f); } .iti__search-input::placeholder { color: var(--ap-muted, #6b7280); } .iti__country-list { max-height: 240px; } .iti__country.iti__highlight { background-color: var(--ap-paper, #f6f8f9); } .iti__dial-code { color: var(--ap-muted, #6b7280); } /* Portaled dropdown container. Outside modals it's portaled to ; iti gives it z-index:1060 - bump it so it clears the sticky header. Inside a native