/**
 * country-phone.css
 * ─────────────────────────────────────────────────────────────
 * Companion styles for country-phone.js. Genuinely drop-in
 * anywhere in the product, which in practice means TWO different
 * token-naming conventions coexist across the codebase:
 *
 *   ink/console pages (login, register, license, sysadmin, theme.css):
 *     --text-1, --ink-800, --ink-900, --line, --brand, --brand-rgb, --radius-md
 *
 *   main app shell (style.css / index.html):
 *     --text, --card, --border, --primary, --radius-xs
 *
 *   Shared by both, no fallback needed:
 *     --text-2, --text-3
 *
 * Every color/radius below tries the ink-family name first, then
 * the style.css name, then a hardcoded value — via nested var()
 * fallbacks, e.g. var(--text-1, var(--text, inherit)). This is
 * what makes "standalone, use it anywhere" literally true instead
 * of true-only-for-the-pages-I-originally-built-it-for.
 *
 * v2: the native <select> is gone, replaced by a searchable
 * combobox (button + portal dropdown). The dropdown panel lives in
 * document.body at runtime (see country-phone.js), so its styles
 * here are NOT scoped under [data-cc-phone] — they're global class
 * names (.cc-dropdown, .cc-option, etc.) since the element is no
 * longer a DOM descendant of the field that created it.
 * ─────────────────────────────────────────────────────────────
 */

[data-cc-phone] { min-width: 0; width: 100%; box-sizing: border-box; }

.cc-phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--ink-800, var(--card, rgba(255,255,255,.05)));
  border: 1px solid var(--line, var(--border, rgba(255,255,255,.15)));
  border-radius: var(--radius-md, var(--radius, 12px));
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cc-phone-group:focus-within {
  border-color: var(--brand, var(--primary, #f2652a));
  box-shadow: 0 0 0 3px rgba(242,101,42,.14);
}

.cc-number {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1, var(--text, inherit));
  font-size: 14px;
  padding: 12px;
}
.cc-number::placeholder { color: var(--text-3, #94a3b8); }

/* ══ Combobox trigger button (replaces the old native <select>) ══ */
.cc-select-wrap { flex-shrink: 0; display: flex; }

.cc-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line, var(--border, rgba(255,255,255,.15)));
  color: var(--text-1, var(--text, inherit));
  font-size: 13.5px;
  padding: 12px 10px;
  min-width: 84px;
  cursor: pointer;
  font-family: inherit;
}
.cc-select-btn:focus,
.cc-select-btn:focus-visible {
  outline: none;
  background: rgba(var(--brand-rgb, 242,101,42), .08);
}
.cc-select-btn .cc-flag { font-size: 15px; line-height: 1; }
.cc-select-btn .cc-dial { white-space: nowrap; }
.cc-select-btn .cc-caret {
  margin-left: auto;
  display: flex;
  color: var(--text-3, #92a0b5);
  transition: transform .15s;
}
.cc-select-btn[aria-expanded="true"] .cc-caret { transform: rotate(180deg); }

/* ══ Dropdown panel — portaled to document.body, position:fixed set
   inline by JS via getBoundingClientRect(). Styles here handle
   everything else. ══ */
.cc-dropdown {
  position: fixed;
  z-index: 9999;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: var(--ink-900, var(--card, #10151d));
  border: 1px solid var(--line-strong, var(--border, rgba(255,255,255,.18)));
  border-radius: var(--radius-md, var(--radius, 12px));
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden;
  animation: cc-dropdown-in .12s ease-out;
}
@keyframes cc-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--ink-800, var(--card, rgba(255,255,255,.05)));
  border: none;
  border-bottom: 1px solid var(--line, var(--border, rgba(255,255,255,.15)));
  color: var(--text-1, var(--text, inherit));
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
}
.cc-search::placeholder { color: var(--text-3, #92a0b5); }
.cc-search:focus { background: rgba(var(--brand-rgb, 242,101,42), .06); }

.cc-options {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.cc-options::-webkit-scrollbar { width: 5px; }
.cc-options::-webkit-scrollbar-thumb {
  background: var(--line-strong, var(--border, rgba(255,255,255,.2)));
  border-radius: 99px;
}

.cc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  color: var(--text-1, var(--text, inherit));
  cursor: pointer;
}
.cc-option:hover,
.cc-option.kbd-active {
  background: rgba(var(--brand-rgb, 242,101,42), .12);
}
.cc-option.active {
  color: var(--brand, var(--primary, #f2652a));
  font-weight: 700;
}
.cc-opt-flag { font-size: 14px; flex-shrink: 0; }
.cc-opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-opt-dial {
  flex-shrink: 0;
  color: var(--text-3, #92a0b5);
  font-size: 12px;
}
.cc-option.active .cc-opt-dial { color: inherit; }

.cc-option-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3, #92a0b5);
}