/*
 * Телефон любой страны — поле с флагом (js/nwa-phone.js, 26.09.2026).
 * Идёт после intlTelInput.min.css библиотеки и подгоняет её под поля сайта:
 * кабинет (.nwa-acc__input) и оформление заказа (.form-control темы).
 *
 * Библиотека оборачивает поле в div.iti и ставит слева кнопку страны; отступ
 * поля слева под кнопку она считает сама и пишет в style.
 */

.iti{
	--iti-border-color:#D6D3CC;
	--iti-hover-color:#F7F5F1;
	--iti-icon-color:#6B6F74;
	--iti-dropdown-bg:#FFFFFF;
	display:block;
}

/* Кабинет: поле в колонке формы на всю ширину. Общей ширины у .iti нет:
   на оформлении заказа она перебила бы колонку темы (см. ниже). */
body.nwa-page .nwa-acc__field .iti{
	width:100%;
}

/* Кнопка страны — без своей рамки, в пределах поля. */
.iti__selected-country{
	border-radius:8px 0 0 8px;
}
.iti__selected-country:hover,
.iti__selected-country:focus-visible{
	background:var(--iti-hover-color);
}
.iti__selected-dial-code{
	color:#6B6F74;
}

/* Список стран: тема красит поля и списки прямыми значениями (тёмная тема
   custom-dark-theme.css), поэтому цвета — поимённо. */
.iti__dropdown-content{
	border:1px solid #E2E2DE;
	border-radius:8px;
	background:#FFFFFF;
	box-shadow:0 12px 32px rgba(42,44,46,.14);
	overflow:hidden;
}
.iti__search-input{
	background-color:#FFFFFF !important;
	color:#2A2C2E !important;
	font-size:15px;
}
.iti__country{
	color:#2A2C2E;
	font-size:14px;
}
.iti__country.iti__highlight{
	background:#FDF5F2;
}
.iti__country-name{
	color:#2A2C2E;
}

/* Объяснение под полем, если номер набран не полностью (кабинет). */
.nwa-phone__error{
	font-size:12px;
	color:#B03A2A;
}
.nwa-phone__error:empty{
	display:none;
}

/* Оформление заказа: обёртка получает класс колонки
   (data-nwa-phone-wrap="checkout-customer__input" в uni_checkout.twig) — ей
   ширина и отступы колонки из checkout.css, а самому полю — вся ширина
   обёртки. */
.iti.checkout-customer__input .iti__tel-input{
	width:100%;
	margin:0;
}