/* ПОЛЕ ТЕЛЕФОНА НА САЙТЕ ДЕЛА: КОРОБКА `.iti` И КОЛЬЦО ФОКУСА ВОКРУГ НЕЁ ЦЕЛИКОМ.

   Подключается ТОЛЬКО вместе с библиотекой (`sc-iti`) - и у посетителя на установке клиента
   (`inc/enqueue.php`), и у посетителя страницы дела на платформе (`sc-theme/inc/enqueue.php`,
   `sc_theme_site_phone_assets()`). Без библиотеки обёртки `.iti` нет, и правилам нечего
   задевать.

   ЗАЧЕМ ФАЙЛ ВООБЩЕ НУЖЕН. Библиотека оборачивает поле в `.iti` с `display:inline-block`.
   У полей сайта ширина `100%`, а процент внутри коробки, которая сама ужимается по
   содержимому, не разрешается - поле телефона становилось узким огрызком посреди формы
   шириной во всю колонку. Ширину возвращает первое правило.

   ПОЧЕМУ КОЛЬЦО НА ОБЁРТКЕ, А НЕ НА ПОЛЕ. Флаг с кодом страны - отдельная КНОПКА внутри
   `.iti`. Пока фокус на поле, кольцо поля обводит и её (она лежит в его коробке), но стоит
   человеку с клавиатуры шагнуть на выбор страны - фокус уходит с поля, и кольцо исчезает с
   коробки, которую он видит как одно поле. `:focus-within` на обёртке держит кольцо на всей
   коробке при фокусе на ЛЮБОЙ её части; своё кольцо поля и кнопки гасится, иначе в фокусе
   было бы два контура.

   РАДИУС ЧИСЛОМ ЗДЕСЬ НЕ ПИШЕТСЯ НИГДЕ. `outline` идёт по скруглению того узла, на котором
   стоит, поэтому обёртке нужен РАДИУС ПОЛЯ - и он берётся той же переменной, которой его
   читает само поле. Число здесь было бы вторым хозяином формы поля и разошлось бы с первым
   при следующей правке Roundness молча (записанная грабля про кольцо, которое «выглядит как
   накладка на input»).

   Правила кольца у ПРОЧИХ полей не трогаются: здесь только то, что внутри `.iti`. */

.sc-field .iti,
.ls-contacts__field .iti,
.zw-in .iti {
	display: block;
	inline-size: 100%;
}

.sc-field .iti .iti__tel-input,
.ls-contacts__field .iti .iti__tel-input {
	inline-size: 100%;
}

/* Список стран поверх соседних полей: у кнопки свой слой, иначе следующее поле формы,
   идущее в документе позже, перекрывает её край. */
.sc-field .iti__country-container,
.ls-contacts__field .iti__country-container,
.zw-in .iti__country-container {
	z-index: 2;
}

/* Подсветка кнопки страны при наведении - внутри скругления поля, а не прямоугольником,
   торчащим из его угла. */
.sc-field .iti__selected-country,
.sc-field .iti__selected-country-primary {
	border-start-start-radius: var(--sc-field-r);
	border-end-start-radius: var(--sc-field-r);
}

.ls-contacts__field .iti__selected-country,
.ls-contacts__field .iti__selected-country-primary {
	border-start-start-radius: var(--ls-c-field-r);
	border-end-start-radius: var(--ls-c-field-r);
}

/* --- Кольцо фокуса --- */

/* Форма заявки прежнего слоя: СВОЕГО кольца у телефона нет. Соседние поля этой формы в
   фокусе меняют цвет рамки (`site-form.css`), и телефон делает ровно то же - тем же правилом,
   а не копией: коробка поля здесь сам `input`, флаг лежит внутри его рамки. До 02.10.2026
   у одного телефона было кольцо 2px на обёртке, и в форме из четырёх полей он один
   выглядел иначе (замечание ревью). */

/* Форма контактов: то же устройство, цвет и толщина - те же, что у соседних полей формы. */
.ls-contacts__field .iti {
	border-radius: var(--ls-c-field-r);
}

.ls-contacts__field .iti:focus-within {
	outline: 2px solid var(--ls-acc, #1f4f6b);
	outline-offset: 0;
}

/* Виджет записи: видимая коробка - НЕ `input` и не `.iti`, а `.zw-in` с полями внутри.
   Кольцо на `.iti` легло бы внутри её отступов, меньше видимого поля, - поэтому его несёт
   сама коробка, и только когда внутри неё поле телефона. У остальных полей виджета
   правило прежнее. */
.zw-in:has(> .iti:focus-within) {
	outline: 2px solid var(--zw-ink);
	outline-offset: 0;
}

/* Своё кольцо внутренних частей гасится: контур в фокусе один. Вес (0,4,0) назван так,
   чтобы выигрывать у `.ls-contacts__input:focus-visible`, `.zw input:focus-visible` и у
   `.iti__tel-input:focus` самой библиотеки независимо от порядка подключения листов. */
.ls-contacts__field .iti .iti__tel-input:focus,
.ls-contacts__field .iti .iti__tel-input:focus-visible,
.zw-in .iti .iti__tel-input:focus,
.zw-in .iti .iti__tel-input:focus-visible,
.sc-field .iti .iti__selected-country:focus-visible,
.ls-contacts__field .iti .iti__selected-country:focus-visible,
.zw-in .iti .iti__selected-country:focus-visible {
	outline: 0;
}