.elco-phone-row { display: flex; direction: ltr; align-items: stretch; gap: 0.45rem; position: relative; } .elco-phone-row__field { flex: 1 1 0; min-width: 0; margin-bottom: 0 !important; } .elco-phone-row .elco-phone-national { flex: 1 1 0; min-width: 0; } .elco-dial-picker { position: relative; flex: 0 0 auto; min-width: 5.25rem; } .elco-dial-trigger { display: flex; align-items: center; justify-content: center; gap: 0.3rem; width: 100%; height: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem; border: 1px solid rgba(15, 26, 50, 0.18); border-radius: 10px; background: #fff; color: #1a2236; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; line-height: 1; cursor: pointer; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .elco-dial-trigger:hover, .elco-dial-trigger:focus, .elco-dial-trigger[aria-expanded="true"] { border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12); outline: none; } .elco-dial-picker.is-locked .elco-dial-trigger, .elco-dial-trigger:disabled { cursor: not-allowed; opacity: 0.72; pointer-events: none; box-shadow: none; } .elco-dial-picker.is-locked .elco-dial-trigger:hover, .elco-dial-picker.is-locked .elco-dial-trigger:focus { border-color: rgba(15, 26, 50, 0.18); box-shadow: none; } .elco-dial-trigger .bi { font-size: 0.6rem; opacity: 0.6; flex-shrink: 0; } .elco-dial-code { flex-shrink: 0; } .elco-country-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; } .elco-country-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1060; min-width: 17rem; max-height: 250px; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0.35rem 0; list-style: none; background: #fff; border: 1px solid rgba(15, 26, 50, 0.15); border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 18, 36, 0.18); -webkit-overflow-scrolling: touch; } .elco-country-menu.is-hidden { display: none; } .elco-country-menu [role="option"] { padding: 0.48rem 0.75rem; font-size: 0.82rem; line-height: 1.35; cursor: pointer; direction: ltr; text-align: left; color: #1a2236; } .elco-country-menu [role="option"]:hover, .elco-country-menu [role="option"].is-selected { background: rgba(212, 175, 55, 0.14); color: #5c4a12; } .elco-country-menu__filter, .auth-modal__country-menu .elco-country-menu__filter { position: sticky; top: 0; z-index: 1; padding: 0.42rem 0.75rem; font-size: 0.74rem; line-height: 1.3; direction: ltr; text-align: left; color: #5a6d70; background: #fff; border-bottom: 1px solid rgba(15, 26, 50, 0.08); cursor: default; user-select: none; list-style: none; } .elco-country-menu__filter.is-hint { color: #8a96a8; font-style: italic; } .elco-country-menu__filter.is-empty { color: #b45309; } .elco-country-menu [role="option"].is-filter-hidden { display: none; } .elco-country-menu [role="option"].is-keyboard-active { background: rgba(212, 175, 55, 0.22); color: #5c4a12; } .auth-modal-premium__panel:has(.elco-country-menu:not(.is-hidden)) { overflow: visible; } .auth-modal-premium__panel:has(.elco-country-menu:not(.is-hidden))::before, .auth-modal-premium__panel:has(.elco-country-menu:not(.is-hidden))::after { opacity: 0; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-dial-trigger { background: rgba(10, 18, 36, 0.55); border-color: rgba(72, 96, 140, 0.35); color: rgba(255, 255, 255, 0.78); } body.elco-theme-premium .auth-modal-premium .elco-dial-trigger { min-height: 100%; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-dial-trigger:hover, html[data-color-scheme="dark"] body.elco-theme-premium .elco-dial-trigger:focus, html[data-color-scheme="dark"] body.elco-theme-premium .elco-dial-trigger[aria-expanded="true"] { background: rgba(15, 26, 50, 0.88); border-color: rgba(212, 175, 55, 0.55); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12); color: #f0d878; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu { background: rgba(10, 18, 36, 0.98); border-color: rgba(212, 175, 55, 0.35); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48); } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu [role="option"] { color: rgba(255, 255, 255, 0.85); } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu [role="option"]:hover, html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu [role="option"].is-selected { background: rgba(212, 175, 55, 0.12); color: #f0d878; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu__filter, html[data-color-scheme="dark"] body.elco-theme-premium .auth-modal__country-menu .elco-country-menu__filter { color: rgba(255, 255, 255, 0.55); background: rgba(10, 18, 36, 0.98); border-bottom-color: rgba(212, 175, 55, 0.18); } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu__filter.is-hint { color: rgba(255, 255, 255, 0.38); } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu [role="option"].is-keyboard-active { background: rgba(212, 175, 55, 0.2); color: #f0d878; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.35) rgba(255, 255, 255, 0.05); } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu::-webkit-scrollbar { width: 8px; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.35); border-radius: 4px; } html[data-color-scheme="dark"] body.elco-theme-premium .elco-country-menu::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } @media (max-width: 420px) { .elco-country-menu { min-width: 14rem; } }