/* Self-registration — intl-tel-input theming. Themes the vendored phone widget to the app's design tokens (dial code reads as metadata + hairline divider; teal search focus/highlight; app-radius dropdown). Loaded page-scoped AFTER intl_tel_input.css (via content_for :head on /register) so these equal-specificity overrides win the cascade the way they did in the signed-off prototype. Unscoped .iti__* selectors are deliberate: iti appends its fullscreen popup to , so a container-scoped rule could never reach it. Colour tokens come from the global @theme :root vars emitted in tailwind.css. */ .iti { width: 100%; } .iti input.iti__tel-input { width: 100%; } /* Country selector button */ .iti__country-container { padding: 3px 0 3px 4px; } .iti__selected-country { border-radius: 0.375rem; } .iti__selected-country-primary { border-radius: 0.375rem; padding: 0 6px 0 8px; } .iti__selected-country:hover .iti__selected-country-primary { background: var(--color-surface-container); } .iti__selected-country:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* Dial code reads as metadata, not input text; hairline separates country zone from number */ .iti__selected-dial-code { color: var(--color-secondary); font-size: 13px; padding-right: 10px; margin-right: 2px; border-right: 1px solid color-mix(in srgb, var(--color-outline-variant) 35%, transparent); } .iti__arrow { border-top-color: color-mix(in srgb, var(--color-on-surface-variant) 50%, transparent); } /* Anchored (desktop) dropdown: clamp to the field width so it can't overflow */ .iti--inline-dropdown .iti__dropdown-content { width: 100%; min-width: 0; } .iti__dropdown-content { border: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent); border-radius: 0.5rem; margin-top: 4px; font-size: 13px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); overflow: hidden; } .iti__search-input { font-family: inherit; font-size: 13px; padding: 0.625rem 0.75rem; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent); background: var(--color-surface-container-low); outline: none; transition: border-color 0.2s; } .iti__search-input:focus { border-bottom-color: var(--color-primary); background: var(--color-surface-container-lowest); } .iti__country { padding: 8px 12px; } .iti__country.iti__highlight { background: color-mix(in srgb, var(--color-primary) 8%, #ffffff); } .iti__dial-code { color: var(--color-secondary); }