/* Стили поля телефона (intl-tel-input) для стандартной вёрстки .input-form
   с плавающим плейсхолдером. Подключается рядом с phone-field.js на страницах,
   где телефон живёт внутри `.input-form`.

   Разметка до инициализации плагина:
       <div class="input-form input-form--phone">
           <input class="input-form__input" type="tel">
           <span class="input-form__placeholder">Телефон</span>
       </div>
   После инициализации плагин оборачивает input в .iti, поэтому соседний селектор
   `.input-form__input + .input-form__placeholder` из main.css перестаёт работать —
   плейсхолдер держим поднятым постоянно (в поле всегда виден код страны, так что
   опущенное состояние всё равно невозможно). */

.input-form--phone .iti {
	display: block;
	width: 100%;
	/* отступ слева у флага — как у текста в остальных полях формы (12px),
	   с поправкой на 1px рамки .input-form */
	--iti-spacer-horizontal: 11px;
}

.input-form--phone .input-form__placeholder {
	z-index: 10;
	font-size: 12px;
	top: 0;
	margin-top: 0.1em;
	font-weight: 500;
}

/* Поднятый плейсхолдер занимает верх поля — сдвигаем и номер, и код страны вниз,
   чтобы они не налезали на него. Только там, где плейсхолдер вообще есть:
   в части форм подпись задана атрибутом placeholder внутри самого input,
   и сдвигать там нечего. */
.input-form--phone:has(.input-form__placeholder) .input-form__input {
	padding-top: 10px;
}

.input-form--phone:has(.input-form__placeholder) .iti__country-container {
	top: 10px;
}

/* Плагин рассчитан на input с рамкой по всему периметру и поджимает контейнер
   страны на --iti-border-width сверху и снизу; у .input-form__input рамки нет
   (она на самом .input-form), поэтому отступ убираем — иначе код страны
   оказывается выше строки ввода. */
.input-form--phone .iti__country-container {
	padding: 0;
}

/* Размер, начертание и цвет кода страны подгоняются под инпут в phone-field.js
   (syncCountryBox) — здесь только зазор между кодом и самим номером. */
.input-form--phone .iti__selected-dial-code {
	padding-right: 6px;
}

.input-form--phone .input-form__error {
	color: #ff4444;
	font-size: 12px;
	margin-top: 5px;
}