/*
 * Поля вибору стилізує сам CartFlows (як стандартне поле «Область»).
 * Тут лише розкладка блоку, перемикач типу доставки і випадаючий список.
 */

#yk-np {
	width: 100%;
	max-width: 100%;
	min-width: 0; /* інакше flex-обгортка CartFlows розтягується під довгий текст */
	flex: 0 0 100%;
	clear: both;
	box-sizing: border-box;
}
#yk-np .form-row {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Довга адреса відділення переноситься на другий рядок, а не розширює сторінку. */
#yk-np .select2-container {
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
}
#yk-np .select2-container .select2-selection--single {
	height: auto !important;
	max-width: 100%;
	overflow: hidden;
}
#yk-np .select2-container .select2-selection--single .select2-selection__rendered {
	display: block;
	max-width: 100%;
	padding-right: 22px !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.35 !important;
}
.yk-np-dropdown .select2-results__option {
	white-space: normal;
	overflow-wrap: anywhere;
}
#yk-np::after,
#yk-np .yk-np-for-courier::after {
	content: "";
	display: table;
	clear: both;
}

#yk-np .yk-np-hint {
	display: block;
	margin-top: 12px !important;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wcf-field-label-color, #777);
}

/* ---------- Перемикач типу доставки: картки ---------- */
#yk-np {
	--yk-accent: #1f3d2b;
	--yk-accent-soft: #f2f7f3;
}
#yk-np .yk-np-types {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
#yk-np .yk-np-types .yk-np-type {
	display: flex !important;
	align-items: center;
	gap: 12px;
	position: relative !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-sizing: border-box;
	min-height: calc(var(--yk-h, 48px) + 10px);
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 1px solid var(--yk-border-c, #d9d9d9);
	border-radius: max(var(--yk-radius, 6px), 6px);
	background: var(--yk-bg, #fff);
	font-family: var(--yk-ff, inherit);
	letter-spacing: var(--yk-ls, normal);
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#yk-np .yk-np-types .yk-np-type:hover {
	border-color: var(--yk-accent);
}
#yk-np .yk-np-types .yk-np-type.is-active {
	border-color: var(--yk-accent);
	box-shadow: inset 0 0 0 1px var(--yk-accent);
	background: var(--yk-accent-soft);
}
#yk-np .yk-np-types .yk-np-type:has(.yk-np-type-input:focus-visible) {
	outline: 2px solid var(--yk-accent);
	outline-offset: 2px;
}

/* Рідну радіокнопку ховаємо візуально, але лишаємо для клавіатури й читачів екрана. */
#yk-np .yk-np-type-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}

#yk-np .yk-np-type-icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f3f1;
	color: var(--yk-accent);
	transition: background-color .15s ease, color .15s ease;
}
#yk-np .yk-np-type-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}
#yk-np .yk-np-type.is-active .yk-np-type-icon {
	background: var(--yk-accent);
	color: #fff;
}

#yk-np .yk-np-type-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
#yk-np .yk-np-type-title {
	font-size: var(--yk-fs, 15px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--yk-color, #222);
}
#yk-np .yk-np-type-sub {
	font-size: 12px;
	line-height: 1.3;
	color: var(--wcf-field-label-color, #7a7a7a);
}

#yk-np .yk-np-type-check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid var(--yk-border-c, #cfcfcf);
	background: #fff center / 12px no-repeat;
	transition: border-color .15s ease, background-color .15s ease;
}
#yk-np .yk-np-type.is-active .yk-np-type-check {
	border-color: var(--yk-accent);
	background-color: var(--yk-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
	#yk-np .yk-np-types {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 480px) {
	#yk-np .yk-np-for-courier .form-row-first,
	#yk-np .yk-np-for-courier .form-row-last {
		width: 100%;
		float: none;
	}
}

#yk-np .yk-np-manual-note {
	color: #b32d2e;
	font-size: .9em;
}

/* ---------- Випадаючий список (у <body>) ---------- */
.yk-np-dropdown .select2-results__option {
	padding: 8px 12px;
	line-height: 1.35;
}
.yk-np-dropdown .select2-search--dropdown .select2-search__field {
	padding: 8px 10px;
}

/* ==========================================================
 * Способи оплати у вигляді карток (як перемикач типу доставки)
 * ========================================================== */
#payment ul.wc_payment_methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0!important;margin:0 0 16px!important;border:0!important;list-style:none;background:none}
#payment ul.wc_payment_methods::before,#payment ul.wc_payment_methods::after{display:none!important;content:none!important}
#payment ul.wc_payment_methods li.wc_payment_method{position:relative;margin:0!important;padding:0!important;list-style:none;background:none!important;border:0!important}
#payment li.wc_payment_method>input.input-radio{position:absolute!important;opacity:0!important;width:1px;height:1px;pointer-events:none;margin:0}
#payment li.wc_payment_method>label{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:61px;height:100%;margin:0!important;padding:10px 44px 10px 64px!important;position:relative;box-sizing:border-box;border:1px solid #d4d4d4;border-radius:6px;background:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:600;letter-spacing:1.2px;color:#555;line-height:1.3;transition:border-color .15s,box-shadow .15s,background-color .15s}
#payment li.wc_payment_method>label:hover{border-color:#1f3d2b}
#payment li.wc_payment_method>label::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#f1f3f1 no-repeat center/20px 20px;transition:background-color .15s}
#payment li.wc_payment_method>label::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.33px solid #d4d4d4;background:#fff no-repeat center/12px 12px}
#payment li.wc_payment_method>input:checked+label{border-color:#1f3d2b;box-shadow:inset 0 0 0 1px #1f3d2b;background:#f2f7f3}
#payment li.wc_payment_method>input:checked+label::before{background-color:#1f3d2b}
#payment li.wc_payment_method>input:checked+label::after{border-color:#1f3d2b;background-color:#1f3d2b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#payment li.wc_payment_method>input:focus-visible+label{outline:2px solid #1f3d2b;outline-offset:2px}

/* Іконка: готівка */
#payment li.payment_method_cod>label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 10v4M18 10v4'/%3E%3C/svg%3E")}
#payment li.payment_method_cod>input:checked+label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 10v4M18 10v4'/%3E%3C/svg%3E")}

/* Іконка: картка (plata by mono) */
#payment li.payment_method_morkva-monopay>label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
#payment li.payment_method_morkva-monopay>input:checked+label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
#payment li.payment_method_morkva-monopay>label img{max-height:20px;width:auto;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;float:none!important}

/* Описи під способами оплати не показуємо */
#payment ul.wc_payment_methods .payment_box{display:none!important}

@media (max-width:600px){#payment ul.wc_payment_methods{grid-template-columns:1fr}}

/* Інфо про вартість доставки */
#yk-np .yk-np-shipping-info{display:flex;gap:10px;align-items:flex-start;margin:4px 7px 0!important;width:calc(100% - 14px)!important;padding:12px 14px;background:#f2f7f3;border:1px solid #d7e4da;border-left:3px solid #1f3d2b;border-radius:6px;color:#404040;font-size:13px;line-height:1.5;box-sizing:border-box}
#yk-np .yk-np-shipping-info-icon{flex:0 0 auto;display:inline-flex;margin-top:1px;color:#1f3d2b}
#yk-np .yk-np-shipping-info-text p{margin:0;padding:0;font-size:13px;line-height:1.5}
#yk-np .yk-np-shipping-info-text p+p{margin-top:6px}
#yk-np .yk-np-shipping-info-text strong{color:#1a1e23;font-weight:600}
@media (max-width:480px){#yk-np .yk-np-shipping-info{padding:10px 12px;font-size:12.5px}}