/** * NeoYug skin over intl-tel-input (no-assets build, no flags). * * The country picker runs in FULLSCREEN-POPUP mode on every screen size, so the * dropdown is a body-appended, position:fixed overlay (.iti--detached-country- * selector) that no modal / overflow / transform can clip. These rules style that * overlay into a branded, contained, scrollable card — identical on every surface * that uses the shared field. Because the overlay lives on , it is styled * globally here, not scoped under the field. */ /* ---- Closed field ------------------------------------------------------- */ .iti { display: block; width: 100%; } .iti__tel-input, input.neoyug-phone { width: 100%; } /* No flags anywhere (no-assets build already drops the sprite; belt and braces) */ .iti__flag { display: none !important; } .iti--separate-dial-code .iti__selected-dial-code { font-weight: 500; font-variant-numeric: tabular-nums; color: #261A48; } .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(141, 34, 195, .18); border-radius: 8px; } /* ---- Brand tokens (applied to the popup too, since it is body-appended) --- */ .iti, .iti--detached-country-selector { --iti-hover-color: #f5eefb; --iti-border-color: #e7e2f0; --iti-country-selector-bg: #ffffff; --iti-mobile-popup-margin: 24px; } /* ---- Fullscreen popup: dim backdrop, centered card ---------------------- */ .iti--fullscreen-popup.iti--detached-country-selector { z-index: 100000; /* above any gate / cart / theme modal */ background-color: rgba(38, 26, 72, .45); justify-content: center; /* centre the card on desktop */ align-items: center; padding: 24px; } /* The white card that holds the search + list. */ .iti--detached-country-selector .iti__dropdown-content { width: 100%; max-width: 420px; max-height: min(70vh, 560px); display: flex; flex-direction: column; background: #fff; border: 1px solid #e7e2f0; border-radius: 16px; box-shadow: 0 30px 80px -24px rgba(38, 26, 72, .55); overflow: hidden; } /* Search row pinned at top. */ .iti--detached-country-selector .iti__search-input-wrapper { flex: 0 0 auto; padding: 12px 12px 8px; border-bottom: 1px solid #efeaf6; } .iti--detached-country-selector .iti__search-input { width: 100%; font-size: 15px; padding-top: 12px; padding-bottom: 12px; /* keep the library's left room for the search icon so text never sits on it */ padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal)); border: 1px solid #e7e2f0; border-radius: 12px; background-color: #fff; background-position: 12px center; } .iti--detached-country-selector .iti__search-input:focus { outline: none; border-color: #8D22C3; box-shadow: 0 0 0 3px rgba(141, 34, 195, .12); } /* The list is the only scrolling region inside the card. */ .iti--detached-country-selector .iti__country-list { flex: 1 1 auto; max-height: none; /* card height governs; list fills + scrolls */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Rows. */ .iti__country { padding: 12px 16px; font-size: 15px; } .iti__country.iti__highlight, .iti__country:hover { background-color: #f5eefb; } .iti__country-name { color: #2b2440; } .iti__country .iti__dial-code { color: #7c7590; font-variant-numeric: tabular-nums; } .iti__country-check svg, .iti__country-check-svg { color: #8D22C3; } /* ---- Phones: use more of the screen, keep the card feel ------------------ */ @media (max-width: 500px) { .iti--fullscreen-popup.iti--detached-country-selector { padding: 14px; } .iti--detached-country-selector .iti__dropdown-content { max-width: none; max-height: 86vh; max-height: 86dvh; } }