/* ============================================================================
   phone.core.css — стили поля телефона с выбором страны. ЯДРО СЕТИ.

   Откуда взято: ~/Desktop/SmartRecruit/shared/phone.css (19.09.2026).
   Порядок в пункте списка — флаг → код → название (поручение Дарьи 20.09.2026).

   ЦВЕТА. У проектов сети переменные названы по-разному: у агентства
   --ink/--blue/--mute-2, у платформы --text/--brand/--text-mute, у форков свои.
   Поэтому каждый цвет идёт цепочкой фолбэков и ЗАКАНЧИВАЕТСЯ ЛИТЕРАЛОМ —
   файл обязан выглядеть правильно на проекте, где не определено ни одной
   переменной (лендинги Пхукета, play1). Это отличие от исходника SmartRecruit,
   где литералов не было и на чужом проекте поле вышло бы бесцветным.

   ТЁМНАЯ ТЕМА. Отдельного класса не вводим: если проект переопределяет свои
   переменные под тёмную тему, поле уезжает за ними само. Для проектов без
   переменных есть страховка на prefers-color-scheme в конце файла — она
   срабатывает ТОЛЬКО когда --surface не определён (иначе перебила бы тему
   проекта). Проверка через @supports на пользовательское свойство невозможна,
   поэтому страховка ограничена селектором :root:not([data-theme]) .phone —
   у всех наших тёмных проектов на <html> стоит data-theme.

   ГРАБЛИ:
     • флаг-эмодзи на Windows рисуется БУКВАМИ кода страны, если не задать стек
       шрифтов — отсюда явный font-family у .phone__flag, его нельзя убирать;
     • родитель с overflow:hidden обрезал бы список, поэтому .phone
       позиционирован, а список абсолютный;
     • длинное название страны («Британские Виргинские Острова») в узком попапе
       рвало строку и пункт становился двухэтажным — .phone__name обрезается
       эллипсисом, код и флаг при этом не сжимаются;
     • RTL (арабская версия): список прижимается к правому краю, а код внутри
       пункта остаётся LTR — иначе «+971» читается как «971+».
   ========================================================================== */

.phone { position: relative; display: flex; align-items: stretch; }

/* Сам input остаётся штатным полем проекта — переопределяем только стыковку
   с кнопкой слева, чтобы шов между ними читался как одно поле. */
.phone input[type="tel"] {
  flex: 1 1 auto; min-width: 0;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 0;
}

/* Рамка у кнопки полная, со всех четырёх сторон: правая граница служит
   разделителем с полем ввода, и в подсвеченном состоянии кнопка обводится
   целиком, а не «скобкой» без правого края — так было в первой версии. */
.phone__btn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 0 11px; cursor: pointer; position: relative; z-index: 1;
  border: 1px solid var(--line, var(--border, #d8d8d8));
  border-radius: var(--radius-sm, var(--radius-s, 10px)) 0 0 var(--radius-sm, var(--radius-s, 10px));
  background: var(--surface-2, var(--bg-2, #f5f5f5));
  color: var(--text, var(--ink, #252729));
  font: inherit; font-size: 14px; line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.phone__btn:hover { border-color: var(--brand, var(--blue, #f0b64c)); }
.phone__btn:focus-visible {
  outline: 2px solid var(--brand-2, var(--blue-2, #d99a2f));
  outline-offset: -2px;
}
.phone.is-open .phone__btn { border-color: var(--brand, var(--blue, #f0b64c)); }

/* Флаг — эмодзи региональных символов. Явный стек шрифтов нужен потому, что
   на Windows флаги рисуются буквами кода страны, если не указать шрифт. */
.phone__flag {
  font-size: 16px; line-height: 1; flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.phone__code {
  font-family: var(--mono, "SF Mono", Menlo, monospace);
  font-size: 13px; white-space: nowrap;
  color: var(--text-dim, var(--muted, #6b6b6b));
}
.phone__btn::after {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border: solid var(--text-mute, var(--mute-2, #9a9a9a));
  border-width: 0 1.3px 1.3px 0;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .18s ease;
}
.phone.is-open .phone__btn::after { transform: translateY(1px) rotate(-135deg); }

.phone__list {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(320px, 100%); display: none;
  border: 1px solid var(--line, var(--border, #d8d8d8));
  border-radius: var(--radius-sm, var(--radius-s, 10px));
  background: var(--surface, var(--bg, #fff));
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.phone.is-open .phone__list { display: block; }

/* Селектор с двумя классами: тема красит любой input внутри поля, и без
   повышенной специфичности поиск наследовал полную рамку, скругление и
   тяжёлую подсветку фокуса — на экране это читалось как второе поле. */
.phone .phone__search, .phone .phone__search:focus {
  width: 100%; height: auto; min-height: 0;
  border: 0; border-bottom: 1px solid var(--line, var(--border, #d8d8d8));
  border-radius: 0;
  background: var(--surface-2, var(--bg-2, #f5f5f5));
  color: var(--text, var(--ink, #252729));
  font: inherit; font-size: 14px; padding: 10px 12px;
  outline: none; box-shadow: none;
}

.phone__items { max-height: 244px; overflow-y: auto; padding: 5px; }
.phone__opt {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; font-size: 14px;
  color: var(--text-dim, var(--muted, #6b6b6b));
}
.phone__opt:hover {
  background: var(--surface-2, var(--bg-2, #f5f5f5));
  color: var(--text, var(--ink, #252729));
}
.phone__opt[aria-selected="true"] { color: var(--brand-2, var(--blue-2, #d99a2f)); }

/* Код не сжимается и держит колонку, чтобы названия шли ровным столбцом. */
.phone__dial {
  flex: 0 0 auto; min-width: 44px;
  font-family: var(--mono, "SF Mono", Menlo, monospace);
  font-size: 12.5px;
  color: var(--text-mute, var(--mute-2, #9a9a9a));
}
/* Длинное название обрезается, а не переносится: иначе пункт двухэтажный. */
.phone__name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone__none {
  padding: 12px; font-size: 13.5px;
  color: var(--text-mute, var(--mute-2, #9a9a9a));
}

/* ---- RTL (арабская версия сети) ---------------------------------------- */
[dir="rtl"] .phone input[type="tel"] {
  border-top-left-radius: var(--radius-sm, var(--radius-s, 10px));
  border-bottom-left-radius: var(--radius-sm, var(--radius-s, 10px));
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-left: 1px solid var(--line, var(--border, #d8d8d8));
  border-right: 0;
}
[dir="rtl"] .phone__btn {
  border-radius: 0 var(--radius-sm, var(--radius-s, 10px)) var(--radius-sm, var(--radius-s, 10px)) 0;
}
[dir="rtl"] .phone__list { left: auto; right: 0; }
/* Код набирается слева направо в любой раскладке: «+971», не «971+». */
[dir="rtl"] .phone__code, [dir="rtl"] .phone__dial { direction: ltr; unicode-bidi: embed; }

/* ---- Тёмная тема: ТОЛЬКО ПО ЯВНОМУ СОГЛАСИЮ ПРОЕКТА --------------------- */
/* Сначала было «авто по prefers-color-scheme, если на <html> нет data-theme».
   На стенде это сразу и вылезло: светлая страница без переменных, у человека
   тёмная ОС — и поле единственное на странице становится чёрным. Проект,
   который сам не следит за системной темой, должен остаться светлым целиком.
   Поэтому тёмный вариант включается атрибутом, а не догадкой:
     <html data-phone-dark>           — всегда тёмное поле;
     <html data-phone-dark="auto">    — тёмное по системной теме.
   Проектам со своей палитрой это не нужно вовсе: их переменные подхватываются
   фолбэками выше, и поле уезжает за темой само. */
:root[data-phone-dark] .phone__btn,
:root[data-phone-dark] .phone .phone__search {
  background: var(--surface-2, #23252a);
  color: var(--text, #e8e8e8);
  border-color: var(--line, #3a3d44);
}
:root[data-phone-dark] .phone__list {
  background: var(--surface, #1b1d21);
  border-color: var(--line, #3a3d44);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .9);
}
:root[data-phone-dark] .phone__opt:hover { background: var(--surface-2, #23252a); }

@media (prefers-color-scheme: light) {
  /* при "auto" светлая система возвращает светлый вид */
  :root[data-phone-dark="auto"] .phone__btn,
  :root[data-phone-dark="auto"] .phone .phone__search {
    background: var(--surface-2, var(--bg-2, #f5f5f5));
    color: var(--text, var(--ink, #252729));
    border-color: var(--line, var(--border, #d8d8d8));
  }
  :root[data-phone-dark="auto"] .phone__list {
    background: var(--surface, var(--bg, #fff));
    border-color: var(--line, var(--border, #d8d8d8));
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone__btn, .phone__btn::after { transition: none; }
}