/* --------------------------------------------- Phone input + country selector (intl-tel-input v25) Dark theme overrides for website auth screens. Targets the v25 DOM: .iti__country-container, .iti__selected-country, .iti__dropdown-content, .iti__search-input, .iti__country-list. ---------------------------------------------- */ /* ----- Layout ----- */ .phone-input-group { margin-bottom: -2px; } .phone-row { display: flex !important; gap: 12px !important; width: 100% !important; height: var(--control-height) !important; align-items: stretch !important; } .country-code-wrapper { width: clamp(104px, 26vw, 128px) !important; height: 100% !important; } .phone-number-wrapper { flex: 1 !important; min-width: 0 !important; height: 100% !important; } /* ----- Country selector box ----- */ .country-code-wrapper .iti { width: 100% !important; height: 100% !important; display: block !important; } /* The real tel input the plugin attaches to is not needed visually */ .country-code-wrapper .iti .iti__tel-input { display: none !important; } .country-code-wrapper .iti__country-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; } .country-code-wrapper .iti__selected-country { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 10px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; background: #1f1f1f !important; color: #fff !important; box-sizing: border-box !important; cursor: pointer !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important; } .country-code-wrapper .iti__selected-country-primary { padding: 0 !important; gap: 4px !important; } .country-code-wrapper .iti__selected-country:hover { border-color: rgba(255, 255, 255, 0.2) !important; background: #232323 !important; } .country-code-wrapper .iti__selected-country:focus-visible { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(212, 146, 26, 0.22) !important; } .country-code-wrapper .iti__selected-dial-code { color: #fff !important; font-size: 13px !important; font-weight: 500 !important; margin-left: 2px !important; } .country-code-wrapper .iti__arrow { border-top-color: rgba(255, 255, 255, 0.6) !important; margin-left: auto !important; transition: border-color var(--transition-fast) !important; } .country-code-wrapper .iti__arrow--up { border-bottom-color: rgba(255, 255, 255, 0.6) !important; } /* ----- Phone number input ----- */ .phone-number-wrapper input[type="tel"] { width: 100% !important; height: 100% !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; background: #1f1f1f !important; color: #fff !important; font-size: 13px !important; padding: 0 16px !important; outline: none !important; box-shadow: none !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important; } .phone-number-wrapper input[type="tel"]:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 1px var(--color-primary) !important; } .phone-number-wrapper input[type="tel"].is-invalid { border-color: var(--color-error) !important; box-shadow: 0 0 0 1px var(--color-error) !important; } /* --------------------------------------------- Dropdown — shared theme (inline + fullscreen) The fullscreen popup is appended to , so its selectors must NOT be scoped under .country-code-wrapper. ---------------------------------------------- */ .iti__dropdown-content { background: #161616 !important; color: #fff !important; border-radius: 12px !important; overflow: hidden !important; } /* Desktop / inline dropdown popup */ .iti--inline-dropdown .iti__dropdown-content { width: min(320px, calc(100vw - 32px)) !important; margin-top: 6px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45) !important; } /* Search field */ .iti__search-input { width: 100% !important; box-sizing: border-box !important; min-height: 42px !important; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px 12px 0 0 !important; background: #1d1d1d !important; color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; caret-color: var(--color-primary) !important; outline: none !important; transition: background-color var(--transition-fast), box-shadow var(--transition-fast) !important; } .iti__search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } .iti__search-input:focus { background: #242424 !important; box-shadow: inset 0 -2px 0 0 var(--color-primary) !important; } /* Country list */ .iti__search-input + .iti__country-list { border-top: 0 !important; } .iti__country-list { max-height: min(320px, 50vh) !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(255, 255, 255, 0.24) transparent !important; } .iti__country-list::-webkit-scrollbar { width: 8px !important; } .iti__country-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) !important; border-radius: 8px !important; } .iti__country { padding: 10px 14px !important; color: #fff !important; transition: background-color var(--transition-fast) !important; } .iti__country-name { font-size: 13px !important; color: #fff !important; } .iti__dial-code { font-size: 13px !important; color: rgba(255, 255, 255, 0.55) !important; } .iti__country:hover, .iti__country.iti__highlight { background: rgba(212, 146, 26, 0.16) !important; } /* "No results" text */ .iti__a11y-text, .iti__country-list .iti__no-results { color: rgba(255, 255, 255, 0.6) !important; } /* ----- Mobile fullscreen popup ----- */ .iti--fullscreen-popup.iti--container { background-color: rgba(0, 0, 0, 0.6) !important; } .iti--fullscreen-popup .iti__dropdown-content { width: 100% !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5) !important; } .iti--fullscreen-popup .iti__search-input { min-height: 48px !important; font-size: 16px !important; /* prevents iOS zoom-on-focus */ } .iti--fullscreen-popup .iti__country { padding: 13px 14px !important; } /* ----- RTL ----- */ [dir="rtl"] .country-code-wrapper .iti__arrow { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .country-code-wrapper .iti__selected-dial-code { margin-left: 0 !important; margin-right: 2px !important; } [dir="rtl"] .iti__search-input { text-align: right !important; } /* ----- Small screens (narrow, non-fullscreen) ----- */ @media (max-width: 640px) { .phone-row { gap: 8px !important; } .country-code-wrapper { width: 116px !important; } }