/* Стилізація віджета доставки wc-ukr-shipping (.zen-ui-select) під дизайн фронту.
   Окремий файл — фронтовий main.css не чіпаємо. Значення з .form__input дизайну.
   Плагін (Vue) інжектить свій <style> у <head> в рантаймі (після нашого <link>) і має
   padding !important — тому скоупимо під #wcus-billing-fields (ID перекриває класові правила
   незалежно від порядку) + !important на ключових властивостях. */

/* службовий заголовок плагіна прибираємо (свій заголовок — .checkout__delivery-title) */
#wcus-billing-fields .wcus-checkout-fields > h3 {
	display: none !important;
}
/* внутрішній блок перевозчика — без власного фону (картка на .checkout__delivery-fields) */
#wcus-billing-fields .wcus-checkout-fields {
	background: transparent !important;
	padding: 0 !important;
}

/* сіра картка полів доставки як .checkout__delivery-wrap дизайну.
   Показуємо лише коли метод обрано (JS вмикає .is-active) — порожньої картки не буде. */
.checkout__delivery-fields {
	display: none;
	margin-top: 16px;
	padding: 11px;
	background: #edf0f5;
	border-radius: 16px;
}
.checkout__delivery-fields.is-active {
	display: block;
}
/* Значення підсумку тримаємо праворуч навіть при переносі на два рядки. Рядок — flex, і в один
   рядок значення притискається праворуч через justify-content, але при переносі всередині блоку
   текст іде ліворуч (text-align у дизайні не заданий). */
.checkout__total-info-val {
	text-align: right;
}

/* Ціна в рядку підсумку: WC рендерить її як <span class="woocommerce-Price-amount"> (WOOCS ще
   обгортає своїм <span> для live-перемикання валют), а правило дизайну .checkout__total-info-val
   span (сіре, 400 — для «(Безкоштовно)») помилково фарбує й ціну та символ валюти. Повертаємо
   вигляд усій ціні (сума + символ): вага 500, чорний. Селектор потомковий (не >), бо між
   .checkout__total-info-val і ціною є обгортка WOOCS. */
.checkout__total-info-val .woocommerce-Price-amount,
.checkout__total-info-val .woocommerce-Price-amount * {
	font-weight: 500;
	color: #212020;
}

/* усередині картки — перевізник (віджет+отримувач), самовивіз (магазин) або міжнародна
   (країна+примітка); потрібний блок вмикає JS initDeliveryCard */
.checkout__delivery-carrier,
.checkout__delivery-pickup,
.checkout__delivery-global {
	display: none;
}
.checkout__delivery-carrier.is-active,
.checkout__delivery-pickup.is-active,
.checkout__delivery-global.is-active {
	display: block;
}
.checkout__delivery-title {
	margin-bottom: 15px;
	font-family: InterTightVariable, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1875;
	color: #212020;
}
.checkout__recipient {
	margin-top: 15px;
}

/* рядок поля */
#wcus-billing-fields .form-row {
	margin: 0 0 15px !important;
	padding: 0 !important;
}
#wcus-billing-fields .form-row:last-child {
	margin-bottom: 0 !important;
}

/* --- селект як .form__input --- */
/* Висота: плагін ставить .zen-ui-select{line-height:1.4}, тобто рядок 22.4px і селект 51px,
   тоді як поля вводу теми — 48px (13.5px padding + рядок ~19px + рамки), а Choices-селекти
   дизайну — 49px. Через це селекти віджета помітно вищі за сусідні поля в тій самій формі.
   Зрівнюємо міжрядковий інтервал з дизайном (16px * 1.1875 = 19px) — виходить рівно 48px. */
#wcus-billing-fields .zen-ui-select {
	line-height: 1.1875;
}
#wcus-billing-fields .zen-ui-select__value {
	padding: 13.5px 42px 13.5px 15px !important;
	background: #fff !important;
	border: 1px solid #cbcfd5 !important;
	border-radius: 6px !important;
	color: #212020 !important;
	font-family: InterVariable, sans-serif !important;
	font-size: 16px !important;
	transition: border-color 0.35s ease !important;
}
#wcus-billing-fields .zen-ui-select__value:hover {
	background: #fff !important;
	border-color: #212020 !important;
}
#wcus-billing-fields .zen-ui-select__value.disabled {
	background: #f6f7f9 !important;
	color: #9aa1ab !important;
	border-color: #e2e5ea !important;
}
#wcus-billing-fields .zen-ui-select__value > svg {
	right: 16px !important;
	width: 12px !important;
	height: 12px !important;
	fill: #212020 !important;
}
#wcus-billing-fields .zen-ui-select__value-text {
	text-overflow: ellipsis;
}

/* Підписи над селектами робимо реальними <label class="form__label"> через JS
   (initWcusLabels у theme.js) — так вони беруть стилі дизайну (колір тексту від body,
   зірочка .form__label span.red = #c2272d) і перекладаються Polylang. */

/* --- нативні лейбли плагіна (курьер НП: вулиця/будинок/квартира; місто в адресній доставці) ---
   Плагін рендерить власний <label> з i18n-текстом і <abbr class="required">*</abbr>. Клас
   form__label з CSS не додати — повторюємо його вигляд; зірочку робимо червоною (#c2272d). */
#wcus-billing-fields .form-row > label:not(.js-wcus-label) {
	display: block;
	width: fit-content;
	margin-bottom: 6px;
	font-family: InterVariable, sans-serif;
	font-size: 16px;
	line-height: 1.1875;
	color: #212020;
}
#wcus-billing-fields .form-row > label:not(.js-wcus-label) abbr.required,
#wcus-billing-fields .form-row > label:not(.js-wcus-label) .required {
	color: #c2272d !important;
	border: 0 !important;
	text-decoration: none !important;
}

/* --- нативні поля вводу плагіна (будинок/квартира тощо) — як .form__input.form__input--bg --- */
#wcus-billing-fields .form-row input[type="text"] {
	display: block;
	width: 100%;
	padding: 13.5px 15px !important;
	background: #fff !important;
	border: 1px solid #cbcfd5 !important;
	border-radius: 6px !important;
	color: #212020 !important;
	font-family: InterVariable, sans-serif !important;
	font-size: 16px !important;
	-webkit-appearance: none;
	transition: border-color 0.35s ease !important;
}
#wcus-billing-fields .form-row input[type="text"]:hover,
#wcus-billing-fields .form-row input[type="text"]:focus {
	outline: 0 !important;
	border-color: #212020 !important;
}
#wcus-billing-fields .form-row input[type="text"]::placeholder {
	color: #cbcfd5 !important;
	opacity: 1 !important;
}

/* будинок + квартира — в один ряд (усі розміри; поля короткі). Флексимо контейнер адресної
   доставки НП (той, що прямо містить .form-row із input[name$="_house"]); вулиця й місто —
   на всю ширину, будинок+квартира — по 50%. */
#wcus-billing-fields .wcus-checkout-np-fields div:has(> .form-row input[name$="_house"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
#wcus-billing-fields .wcus-checkout-np-fields div:has(> .form-row input[name$="_house"]) > .form-row {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0 !important;
}
#wcus-billing-fields .wcus-checkout-np-fields div:has(> .form-row input[name$="_house"]) > .form-row:has(input[name$="_house"]),
#wcus-billing-fields .wcus-checkout-np-fields div:has(> .form-row input[name$="_house"]) > .form-row:has(input[name$="_flat"]) {
	flex: 1 1 calc(50% - 7.5px);
}

/* --- випадаючий список ---
   Vue телепортить .zen-ui-select__dropdown-container у <body> (to:"body"), тож ці правила
   НЕ можна скоупити під #wcus-billing-fields — інакше не дотягнуться. Клас-контейнер дає
   специфічність (0,2,0), що б'є плагінні класові !important-правила
   (плагін форсить, напр., .zen-ui-select__search-input{border-radius:0!important}). */
.zen-ui-select__dropdown-container .zen-ui-select__dropdown {
	margin-top: 4px !important;
	border-radius: 6px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
	overflow: hidden !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__search {
	padding: 10px !important;
	border: none !important;
	border-bottom: 1px solid #edf0f5 !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__search-input {
	padding: 12px 14px !important;
	background: #fff !important;
	border: 1px solid #cbcfd5 !important;
	border-radius: 8px !important;
	color: #212020 !important;
	font-family: InterVariable, sans-serif !important;
	font-size: 16px !important;
	transition: border-color 0.35s ease !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__search-input:hover,
.zen-ui-select__dropdown-container .zen-ui-select__search-input:focus {
	outline: 0 !important;
	border-color: #212020 !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__search-input::placeholder {
	color: #cbcfd5 !important;
	font-family: InterVariable, sans-serif !important;
	font-size: 16px !important;
	opacity: 1 !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__options {
	padding: 6px !important;
	border: none !important;
	max-height: 260px !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__option {
	padding: 10px 12px !important;
	border-radius: 6px !important;
	color: #212020 !important;
	font-size: 15px !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__option--current {
	background: #fff8f8 !important;
	color: #c2272d !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__option:not(.zen-ui-select__option--disabled):not(.zen-ui-select__option--current):hover {
	background: #f6f7f9 !important;
}
.zen-ui-select__dropdown-container .zen-ui-select__option--loading,
.zen-ui-select__dropdown-container .zen-ui-select__option--more {
	color: #6c6c6c !important;
}

/* місто + відділення в один ряд на десктопі (>=768px). Флексимо лише «листовий» контейнер
   пари полів — той, що прямо містить .form-row і НЕ має вкладеного <div>. Так тип доставки НП
   (у зовнішньому контейнері з вкладеним div) лишається на всю ширину окремим рядком,
   а місто+відділення (НП — у вкладеному div; Укрпошта — прямо) стають у ряд по 50%. */
@media (min-width: 768px) {
	/* на мобільному відступ картки менший (20px завеликий); на десктопі — 20px */
	.checkout__delivery-fields {
		padding: 20px;
	}
	/* на десктопі скруглення селекта й полів вводу більше (як у макеті) */
	#wcus-billing-fields .zen-ui-select__value,
	#wcus-billing-fields .form-row input[type="text"] {
		border-radius: 10px !important;
	}
	#wcus-billing-fields .wcus-checkout-fields div:has(> .form-row):not(:has(> div)) {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}
	#wcus-billing-fields .wcus-checkout-fields div:has(> .form-row):not(:has(> div)) > .form-row {
		flex: 1 1 calc(50% - 7.5px);
		min-width: 0;
		margin: 0 !important;
	}
}

/* Валідація на клієнті (JS initCheckoutValidation): помилка живе біля поля — рамка + текст
   під ним, замість списку повідомлень зверху сторінки від WooCommerce. */
.checkout .is-error .form__input,
.checkout .is-error .form__textarea,
.checkout .is-error select,
.checkout .is-error .choices__inner {
	border-color: #c2272d;
}

.checkout .form__error {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.3;
	color: #c2272d;
}

/* блоки без власного поля (спосіб отримання, спосіб оплати) — обводимо групу цілком */
.checkout__delivery.is-error .checkout__delivery-box,
.woocommerce-checkout-payment.is-error .wc_payment_methods {
	border-radius: 6px;
	box-shadow: 0 0 0 1px #c2272d;
}

body.admin-bar .zen-ui-select__dropdown-container .zen-ui-select__dropdown {
	margin-top: -28px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .zen-ui-select__dropdown-container .zen-ui-select__dropdown {
		margin-top: -42px !important;
	}
}

/* Адреса міжнародної доставки — поля не було в макеті, тож і стилів під нього немає.
   Відступ від селекта країни + білий фон textarea: картка доставки сіра
   (.checkout__delivery-fields), а прозорий фон з .form__textarea зливався б із нею,
   на відміну від решти полів у картці. */
.checkout__global-address {
	margin-top: 15px;
}

.checkout__global-address .form__textarea {
	background: #fff;
}