/* ==========================================================================
   Оформлення замовлення — [woocommerce_checkout] (inc/woocommerce/checkout.php)

   Кольори й шрифти — лише токени з tokens.css; вигляд — як у попапі варіацій
   і бічному кошику: рожеві рамки, радіус 16, «пігулки».
   Селектори починаються з .woocommerce form.woocommerce-checkout — це вище
   за специфічністю, ніж стилі WooCommerce і поля форм із Site Settings Elementor.
   ========================================================================== */

/* НАЛАШТУВАННЯ ПІД ПРОЄКТ — роль кожного токена у формі */
.woocommerce-checkout{
	--co-ink:     var(--theme-text);
	--co-dark:    var(--theme-text-strong);
	--co-muted:   var(--theme-text-muted);
	--co-line:    var(--theme-accent);
	--co-soft:    var(--theme-accent-soft);
	--co-field:   var(--theme-light);   /* фон полів */
	--co-radius:  var(--theme-radius);
	--co-font:    var(--theme-font);
	--co-gap:     16px;                 /* ← ПРОЄКТ між пунктами форми; між розділами — подвійний */
	--co-field-h: 56px;                 /* ← ПРОЄКТ висота полів */
}

/* ---------- каркас: одна колонка, блоки в потрібному порядку ----------
   Обгортки WooCommerce «розчиняємо» (display:contents): їхні частини стають пунктами
   одного flex-списку форми, і order розставляє їх як треба — без перевизначення шаблонів
   і без перенесення DOM, тож AJAX-фрагменти (#payment, таблиця) оновлюються як завжди.
     1 Ваші дані · 2 поля · 3 Отримання · 4 поля НП · 5 Оплата · 6 способи оплати
     7 Коментар · 8 Ваше замовлення · 9 таблиця · 10 кнопка
   Повідомлення про помилки WooCommerce вставляє на початок форми (order 0) — вони зверху. */
.woocommerce form.woocommerce-checkout{
	position:relative;
	display:flex;flex-direction:column;gap:var(--co-gap);
	color:var(--co-ink);
	font-family:var(--co-font), sans-serif;
	font-variant-numeric:lining-nums;
}
.woocommerce form.woocommerce-checkout .col2-set,
.woocommerce form.woocommerce-checkout .col2-set > .col-1,
.woocommerce form.woocommerce-checkout .col2-set > .col-2,
.woocommerce form.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce form.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce form.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce form.woocommerce-checkout #order_review,
.woocommerce form.woocommerce-checkout #payment{display:contents}
/* clearfix-псевдоелементи розчинених обгорток стали б порожніми пунктами зі своїм gap */
.woocommerce form.woocommerce-checkout .col2-set::before,
.woocommerce form.woocommerce-checkout .col2-set::after,
.woocommerce form.woocommerce-checkout .col2-set > .col-1::before,
.woocommerce form.woocommerce-checkout .col2-set > .col-1::after,
.woocommerce form.woocommerce-checkout .col2-set > .col-2::before,
.woocommerce form.woocommerce-checkout .col2-set > .col-2::after,
.woocommerce form.woocommerce-checkout .woocommerce-billing-fields::before,
.woocommerce form.woocommerce-checkout .woocommerce-billing-fields::after,
.woocommerce form.woocommerce-checkout .woocommerce-shipping-fields::before,
.woocommerce form.woocommerce-checkout .woocommerce-shipping-fields::after,
.woocommerce form.woocommerce-checkout .woocommerce-additional-fields::before,
.woocommerce form.woocommerce-checkout .woocommerce-additional-fields::after,
.woocommerce form.woocommerce-checkout #order_review::before,
.woocommerce form.woocommerce-checkout #order_review::after,
.woocommerce form.woocommerce-checkout #payment::before,
.woocommerce form.woocommerce-checkout #payment::after{content:none}
.woocommerce form.woocommerce-checkout wc-order-attribution-inputs,
.woocommerce form.woocommerce-checkout .theme-hidden{display:none !important} /* приховані поля однаково надсилаються */

.woocommerce form.woocommerce-checkout .woocommerce-billing-fields > h3{order:1}
.woocommerce form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{order:2}
.woocommerce form.woocommerce-checkout .theme-delivery{order:3}
.woocommerce form.woocommerce-checkout .elm-np-section{order:4}
.woocommerce form.woocommerce-checkout .theme-payment-title{order:5}
.woocommerce form.woocommerce-checkout #payment ul.payment_methods{order:6}
.woocommerce form.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{order:7}
.woocommerce form.woocommerce-checkout #order_review_heading{order:8}
.woocommerce form.woocommerce-checkout table.woocommerce-checkout-review-order-table{order:9}
.woocommerce form.woocommerce-checkout #payment .place-order{order:10}

/* між розділами — більше повітря, ніж між заголовком і його вмістом */
.woocommerce form.woocommerce-checkout .theme-delivery,
.woocommerce form.woocommerce-checkout .theme-payment-title,
.woocommerce form.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce form.woocommerce-checkout #order_review_heading{margin-top:var(--co-gap)}
.woocommerce form.woocommerce-checkout .theme-delivery__title{margin-bottom:var(--co-gap)}
.woocommerce form.woocommerce-checkout #payment .place-order{margin-top:8px}

/* під час оновлення WooCommerce «блокує» #payment; розчинений блок накрив би всю форму —
   лишаємо індикатор тільки на таблиці замовлення */
.woocommerce form.woocommerce-checkout #payment > .blockUI{display:none !important}

/* заголовки блоків */
.woocommerce form.woocommerce-checkout h3{
	margin:0;
	color:var(--co-dark);
	font-family:inherit;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.02em;
}

/* ---------- поля ---------- */
.woocommerce form.woocommerce-checkout .form-row{margin:0 0 16px;padding:0}
.woocommerce form.woocommerce-checkout .form-row:last-child{margin-bottom:0}
.woocommerce form.woocommerce-checkout .form-row label{
	display:block;margin:0 0 8px;
	color:var(--co-ink);
	font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;
}
.woocommerce form.woocommerce-checkout .form-row label .required{color:inherit;text-decoration:none}
.woocommerce form.woocommerce-checkout .form-row label .optional{font-weight:400;color:var(--co-muted)}

.woocommerce form.woocommerce-checkout .form-row input.input-text,
.woocommerce form.woocommerce-checkout .form-row textarea.input-text{
	box-sizing:border-box;width:100%;
	min-height:var(--co-field-h);
	padding:0 20px;
	border:1px solid var(--co-line);
	border-radius:var(--co-radius);
	background:var(--co-field);
	color:var(--co-ink);
	font-family:inherit;font-size:18px;font-weight:400;line-height:1.3; /* ≥16px — iOS не зумить поле */
	box-shadow:none;
	transition:border-color .15s;
}
.woocommerce form.woocommerce-checkout .form-row textarea.input-text{min-height:112px;padding:16px 20px;resize:vertical}
.woocommerce form.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce form.woocommerce-checkout .form-row textarea.input-text:focus{
	border-color:var(--co-ink);border-radius:var(--co-radius);
	background:var(--co-field);color:var(--co-ink);outline:none;
}
.woocommerce form.woocommerce-checkout .form-row .input-text::placeholder{color:var(--co-muted);opacity:1}
.woocommerce form.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce form.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection{border-color:#c0392b}
.woocommerce form.woocommerce-checkout .form-row.woocommerce-validated .input-text{border-color:var(--co-line)}

/* ---------- select2: поля плагіна Нової пошти — як звичайні поля ---------- */
.woocommerce-checkout .select2-container .select2-selection--single{
	box-sizing:border-box;height:var(--co-field-h);
	display:flex;align-items:center;
	border:1px solid var(--co-line);
	border-radius:var(--co-radius);
	background:var(--co-field);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{
	padding:0 44px 0 20px;
	color:var(--co-ink);
	font-family:var(--co-font), sans-serif;font-size:18px;line-height:1.3;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__placeholder{color:var(--co-muted)}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{top:50%;right:14px;height:20px;transform:translateY(-50%)}
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single{border-color:var(--co-ink)}
/* випадайка рендериться в кінці body — окремо від форми */
.woocommerce-checkout .select2-dropdown{
	overflow:hidden;
	border:1px solid var(--theme-text);
	border-radius:var(--theme-radius);
	background:var(--theme-light);
	font-family:var(--theme-font), sans-serif;color:var(--theme-text);
}
.woocommerce-checkout .select2-search--dropdown .select2-search__field{
	border:1px solid var(--theme-accent);border-radius:12px;padding:10px 12px;font-size:16px;
}
.woocommerce-checkout .select2-results__option{padding:10px 16px;font-size:15px}
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected]{
	background:var(--theme-accent-soft);color:var(--theme-text);
}

/* секція плагіна НП: її заголовок h2 — як наші h3 */
.woocommerce form.woocommerce-checkout .elm-np-section{margin-top:8px}
.woocommerce form.woocommerce-checkout .elm-np-section h2{
	margin:0 0 16px;
	color:var(--co-dark);
	font-family:inherit;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.02em;
}

/* ---------- «Отримання» і способи оплати — плитки-«пігулки» ---------- */
.woocommerce form.woocommerce-checkout .theme-delivery:empty{display:none}
.theme-delivery__types{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:12px}
.theme-delivery__options{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.theme-delivery__options li::before,.theme-delivery__options li::marker{content:none}

.theme-delivery__type,
.theme-delivery__option,
.woocommerce-checkout #payment ul.payment_methods li > label{
	position:relative;
	display:flex;align-items:center;gap:12px;
	box-sizing:border-box;min-height:var(--co-field-h);
	margin:0;padding:12px 20px;
	border:1px solid var(--co-line);
	border-radius:var(--co-radius);
	background:transparent;
	color:var(--co-ink);
	font-size:18px;font-weight:500;line-height:1.25;
	cursor:pointer;
	transition:background-color .15s,border-color .15s;
}
.theme-delivery__type:hover,
.theme-delivery__option:hover,
.woocommerce-checkout #payment ul.payment_methods li > label:hover{background:var(--co-soft)}
.theme-delivery__type.is-active,
.theme-delivery__option.is-active,
.woocommerce-checkout #payment ul.payment_methods li input:checked + label{background:var(--co-soft);border-color:var(--co-ink)}

/* власний «кружечок» замість системного радіо (саме радіо лишається для клавіатури) */
.theme-delivery__type input,
.theme-delivery__option input,
.woocommerce-checkout #payment ul.payment_methods li input.input-radio{
	position:absolute;opacity:0;pointer-events:none;
}
.theme-delivery__type span::before,
.theme-delivery__option span::before,
.woocommerce-checkout #payment ul.payment_methods li > label::before{
	content:"";flex:0 0 auto;
	display:inline-block;vertical-align:-4px;
	width:18px;height:18px;margin-right:12px;box-sizing:border-box;
	border:1.5px solid var(--co-ink);border-radius:50%;
	background:transparent;
	transition:box-shadow .15s,background-color .15s;
}
.theme-delivery__type.is-active span::before,
.theme-delivery__option.is-active span::before,
.woocommerce-checkout #payment ul.payment_methods li input:checked + label::before{
	background:var(--co-ink);box-shadow:inset 0 0 0 3px var(--co-soft);
}
.theme-delivery__type input:focus-visible + span,
.theme-delivery__option input:focus-visible + span{outline:2px solid var(--co-ink);outline-offset:4px;border-radius:4px}
.woocommerce-checkout #payment ul.payment_methods li > label::before{margin-right:0}

/* ---------- оплата ---------- */
.woocommerce-checkout #payment{background:none;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
	display:flex;flex-direction:column;gap:8px;
	margin:0;padding:0;border:0;list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{margin:0;padding:0;line-height:1.25}
.woocommerce-checkout #payment ul.payment_methods li::before,
.woocommerce-checkout #payment ul.payment_methods li::marker{content:none}
.woocommerce-checkout #payment div.payment_box{
	margin:8px 0 0;padding:12px 20px;
	border-radius:var(--co-radius);
	background:var(--co-soft);color:var(--co-ink);
	font-size:14px;line-height:1.4;
}
.woocommerce-checkout #payment div.payment_box::before{content:none}
.woocommerce-checkout #payment div.payment_box p:last-child{margin:0}
.woocommerce-checkout #payment div.form-row{margin:0;padding:0}
.woocommerce-checkout .woocommerce-privacy-policy-text:empty,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:empty{display:none}

/* кнопка — як «Додати в кошик» у попапі: рожева «пігулка», при наведенні навпаки */
.woocommerce form.woocommerce-checkout #place_order{
	display:block;float:none;width:100%;
	margin:0;padding:20px 24px;
	border:0;border-radius:999px;
	background:var(--co-line);color:var(--co-ink);
	font-family:var(--theme-button-font), sans-serif;
	font-size:var(--theme-button-size);
	font-weight:var(--theme-button-weight);
	letter-spacing:var(--theme-button-spacing);
	line-height:1;text-align:center;
	transition:background-color .15s,color .15s;
}
.woocommerce form.woocommerce-checkout #place_order:hover,
.woocommerce form.woocommerce-checkout #place_order:focus-visible{background:var(--co-ink);color:var(--theme-bg)}

/* ---------- підсумок замовлення ---------- */
.woocommerce form.woocommerce-checkout table.shop_table{
	width:100%;margin:0;
	border:1px solid var(--co-line);border-radius:var(--co-radius);
	border-collapse:separate;border-spacing:0;
	background:transparent;
	font-size:17px;
}
.woocommerce form.woocommerce-checkout table.shop_table th,
.woocommerce form.woocommerce-checkout table.shop_table td{
	padding:12px 20px;
	border:0;border-top:1px solid var(--co-line);
	background:transparent;
	color:var(--co-ink);font-weight:400;line-height:1.3;
	vertical-align:baseline;
}
/* шапка таблиці — як підписи полів («Телефон», «Email»…) */
.woocommerce form.woocommerce-checkout table.shop_table thead th{
	border-top:0;
	color:var(--co-ink);
	font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;
	letter-spacing:0;text-transform:none;
}
.woocommerce form.woocommerce-checkout table.shop_table td:last-child,
.woocommerce form.woocommerce-checkout table.shop_table th:last-child{text-align:right;white-space:nowrap}
.woocommerce form.woocommerce-checkout table.shop_table .product-quantity{font-weight:600;color:var(--co-muted)}
.woocommerce form.woocommerce-checkout table.shop_table .order-total th,
.woocommerce form.woocommerce-checkout table.shop_table .order-total td{color:var(--co-ink);font-size:20px;font-weight:700}
/* товар: фото + назва + «× N» (розмітку додає checkout.php фільтром) */
.theme-co-item{display:flex;align-items:center;gap:14px}
.theme-co-item__thumb{
	flex:0 0 auto;display:block;
	width:56px !important;height:56px !important;        /* !important — теми задають img{height:auto} */
	border-radius:var(--theme-radius) !important;         /* кіт Elementor задає img{border-radius:0} */
	object-fit:cover;
}
.theme-co-item__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.theme-co-item__name{color:var(--co-ink);line-height:1.25}
.theme-co-item__qty{color:var(--co-muted);font-size:14px;font-weight:600}
.woocommerce form.woocommerce-checkout table.shop_table td.product-name{vertical-align:middle}
.woocommerce form.woocommerce-checkout table.shop_table tr.cart_item td.product-total{vertical-align:middle}
@media (max-width:767px){
	/* шапка «Товар / Проміжний підсумок» не несе інформації, а на вузькому екрані забирає ширину в назви */
	.woocommerce form.woocommerce-checkout table.shop_table thead{display:none}
	.woocommerce form.woocommerce-checkout table.shop_table tbody tr:first-child td{border-top:0}
	.woocommerce form.woocommerce-checkout table.shop_table th,
	.woocommerce form.woocommerce-checkout table.shop_table td{padding:12px 14px}
	.theme-co-item{gap:12px}
	.theme-co-item__thumb{width:48px !important;height:48px !important}
}

/* спосіб доставки обирається в блоці «Отримання» — у таблиці рядок не дублюємо
   (радіо лишаються у формі прихованими: саме їх надсилає WooCommerce) */
.woocommerce form.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals{display:none}

/* ---------- повідомлення WooCommerce ---------- */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-notices-wrapper:empty{margin:0}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
	margin:0 0 16px;padding:14px 20px;
	border:0;border-radius:var(--theme-radius);
	background:var(--theme-accent-soft);color:var(--theme-text);
	font-size:15px;line-height:1.4;list-style:none;
}
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before{content:none}
.woocommerce-checkout .woocommerce-error li{margin:0;padding:0}
.woocommerce-checkout .woocommerce-error li + li{margin-top:6px}

/* блокування під час оновлення (blockUI WooCommerce) */
.woocommerce-checkout .blockUI.blockOverlay{background:var(--theme-bg) !important;opacity:.6 !important}


/* ==========================================================================
   Сторінка «Дякуємо» (ендпоінт order-received; віджет Purchase Summary Elementor)
   Заголовок і кнопку «На головну» ставимо віджетами Elementor; тут — лише дані замовлення.
   ========================================================================== */
.woocommerce-order-received .woocommerce-order{
	color:var(--theme-text);
	font-family:var(--theme-font), sans-serif;
	font-variant-numeric:lining-nums;
}
.woocommerce-order-received .woocommerce-order p.woocommerce-thankyou-order-received{
	margin:0 0 24px;
	color:var(--theme-text-muted);
	font-size:20px;line-height:1.4;letter-spacing:0;
}

/* огляд «Номер / Дата / Загалом / Оплата» і наш список «Доставка / …» — одна картка-таблиця */
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview{
	display:flex;flex-direction:column;
	margin:0 0 16px;padding:0;
	border:1px solid var(--theme-accent);border-radius:var(--theme-radius);
	list-style:none;
}
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview::after{content:none}
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li{
	display:flex;justify-content:space-between;align-items:baseline;gap:16px;
	float:none;margin:0;padding:14px 20px;
	border:0;border-top:1px solid var(--theme-accent);
	text-transform:none;
}
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li:first-child{border-top:0}
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li::before,
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li::marker{content:none}

/* Однакова типографіка для ВСІХ рядків: і штатного огляду (його стилізує віджет Purchase Summary
   Elementor — звідти жирні підписи, letter-spacing, інший розмір), і нашого списку «Доставка / Коментар».
   !important — лише тут: стилі віджета мають селектори з id елемента, звичайною специфічністю їх не перебити. */
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li,
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong,
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong *{
	font-family:var(--theme-font), sans-serif !important;
	font-size:16px !important;
	line-height:1.35 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
}
/* підпис — звичайний, приглушений */
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li{
	font-weight:400 !important;
	color:var(--theme-text-muted) !important;
}
/* значення — напівжирне, основним кольором (і номер замовлення теж) */
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong,
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong *{
	font-weight:600 !important;
	color:var(--theme-text) !important;
}
.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong{display:inline;margin:0;text-align:right}

/* наш список «Доставка / відділення / коментар» — продовження тієї ж картки, а не окрема:
   ставимо його одразу під огляд (інструкції оплати — після) і з'єднуємо рамки */
.woocommerce-order-received .woocommerce-order{display:flex;flex-direction:column}
.woocommerce-order-received .woocommerce-order > .theme-thankyou-details{order:1}
.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-notice){order:2}
.woocommerce-order-received .woocommerce-order:has(> .theme-thankyou-details) > ul.woocommerce-order-overview:not(.theme-thankyou-details){
	margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.woocommerce-order-received .woocommerce-order > ul.theme-thankyou-details{
	border-top:0;border-top-left-radius:0;border-top-right-radius:0;
}

/* інструкції способу оплати (текст з налаштувань оплати) */
.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-notice){
	margin:0 0 16px;padding:14px 20px;
	border-radius:var(--theme-radius);
	background:var(--theme-accent-soft);
	font-size:15px;line-height:1.4;
}

@media (max-width:767px){
	.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li{flex-direction:column;gap:4px}
	.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li strong{text-align:left}
}