/**
 * Мінімальні стилі: лише кошик (підсумок полів) + стабільність кнопки.
 * Стилі самих калькуляторів краще додавати в Custom CSS кожної форми в плагіні.
 */

/* Кошик: назва поля жирним, значення — звичайним */
.woocommerce .cart_item .variation dt,
.woocommerce .order_item .variation dt {
	font-weight: 700;
}
.woocommerce .cart_item .variation dd,
.woocommerce .order_item .variation dd {
	font-weight: 400;
}

/* Блок даних калькулятора (variation-): приховуємо порожній dt */
.woocommerce .cart_item .variation dt.variation-,
.woocommerce .order_item .variation dt.variation- {
	display: none;
}

/* Невелика фіксація кнопки (без contain, щоб не ламати верстку) */
.cpcff-woocommerce-wrapper .single_add_to_cart_button {
	min-width: 10em;
}

.kwt-add-to-cart-single.kwt-add-to-cart-_8e9b82-f8 .cart .button.single_add_to_cart_button {
	padding-left: 30px!important;
	padding-right: 30px!important;
}

.woocommerce div.product .kwt-add-to-cart-single .button.single_add_to_cart_button {
	max-height: 150px!important;
}

.fieldname13_1 .one_column span, .cff-middle {
	line-height: 1;
}

#fbuilder label {
	font-weight: 700;
}

/* Іконка допомоги CFF: знак питання, бірюзовий фон #4c9699 */
.cpcff-woocommerce-wrapper #fbuilder .cff-help-icon::before {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	content: "?" !important;
	font-size: 14px !important;
	font-weight: bold !important;
	line-height: 19px !important;
	font-family: sans-serif !important;
	color: #4c9699 !important;
	background: transparent !important;
	border: 1px solid #4c9699 !important;
	border-radius: 25px !important;
	text-align: center !important;
	margin-top: -3px;
}

/* Поля розмірів (Szerokość / Wysokość): звичайний шрифт, 50% ширини, чисто білий фон */
#fbuilder .cff-number-field input[type="number"],
#fbuilder .cff-number-field input[type="text"].number {
	font-weight: 400;
	background: #fff;
	box-shadow: none;
}

/* Опції типу наклейки (Rodzaj naklejki): назви напівжирні */
#fbuilder .three_column label span {
	font-weight: 700;
	margin-left: 5px;
}

/* Ціна під заголовком (Kadence kwt-price-wrap): (z VAT) сірим */
.woocommerce div.product .summary .price::after,
.woocommerce div.product .wp-block-woocommerce-product-price .price::after,
.woocommerce div.product .kwt-price-wrap.price::after {
	content: " (z VAT)";
	font-weight: 400;
	font-size: 0.9em;
	color: #8c8c8c;
}
/* Друга ціна (zebra-price-before-cart) має span — не дублювати ::after */
.woocommerce div.product .zebra-price-before-cart .kwt-price-wrap.price::after,
.woocommerce div.product .zebra-price-before-cart .price::after {
	content: none !important;
}

/* Друга ціна (після калькулятора) — ті самі стилі, що й оригінальна .kwt-price-wrap */
.woocommerce .product .zebra-price-before-cart .price {
	font-weight: bold;
	font-size: 22px;
	line-height: 5px;
	color: #4c9699;
}
.woocommerce .product .zebra-price-before-cart .price .zebra-price-vat {
	font-weight: 400;
	font-size: 0.9em;
	color: #8c8c8c;
}

/* ========== Плитковий вибір: Radio з картинками (Add CSS Layout Keywords: md-radio-image md-items-3 / md-items-4) ========== */
#fbuilder .md-radio-image .dfield {
	display: flex !important;
	flex-wrap: wrap;
	gap: 15px;
}
#fbuilder .md-radio-image .dfield input[type="radio"] {
	display: none !important;
}
#fbuilder .md-radio-image .dfield .side_by_side {
	margin-right: 0 !important;
}
#fbuilder .md-radio-image .dfield .md-item {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}
#fbuilder .md-radio-image .dfield .md-item span.md-image-container {
	padding: 14px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	min-height: 89px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
}
#fbuilder .md-radio-image .dfield .md-item span.md-image-container img {
	max-width: 100%;
	height: auto;
	display: block;
}
#fbuilder .md-radio-image .dfield .md-item .md-text-container {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	color: #000;
	opacity: 0.7;
}
#fbuilder .md-radio-image .dfield input[type="radio"]:checked + span .md-image-container {
	border-color: #4c9699;
	box-shadow: 0 0 0 2px #4c9699;
}
#fbuilder .md-radio-image.md-items-4 .side_by_side {
	max-width: calc(25% - 12px);
}
#fbuilder .md-radio-image.md-items-3 .side_by_side {
	max-width: calc(33.33% - 12px);
}
#fbuilder .md-radio-image.md-items-2 .side_by_side {
	max-width: calc(50% - 12px);
}

/* ========== Плитковий вибір: Dropdown замінен на плитки (Add CSS Layout Keywords: md-select-image) ========== */
#fbuilder .md-select-image .dfield {
	position: relative;
}
#fbuilder .md-select-image .zebra-select-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	cursor: pointer;
	padding: 14px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	min-height: 89px;
	box-sizing: border-box;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile.zebra-tile-no-img {
	min-height: auto;
	justify-content: center;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile:hover {
	border-color: #b0b0b0;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile.is-selected {
	border-color: #4c9699;
	box-shadow: 0 0 0 2px #4c9699;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile-img {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	min-height: 60px;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile-img img {
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
}
#fbuilder .md-select-image .zebra-select-tiles .zebra-tile-text {
	font-size: 14px;
	line-height: 1.2;
	color: #000;
	opacity: 0.7;
}
#fbuilder .md-select-image .dfield select,
#fbuilder .md-select-image select.zebra-select-hidden,
#fbuilder .fields.md-select-image select.zebra-select-hidden {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
}
/* Radio: ховаємо оригінальні радіо-кнопки, коли показані плитки */
#fbuilder .md-select-image.zebra-radio-tiles .dfield > div:not(.zebra-select-tiles) {
	display: none !important;
}

/* ========== Кошик: мобільна стилізація лише dl.variation (та dd.variation-) ========== */
@media screen and (max-width: 719px) {
	.woocommerce .cart_item dl.variation,
	.woocommerce .cart_item dl.variation dt,
	.woocommerce .cart_item dl.variation dd,
	.woocommerce .cart_item dl.variation p,
	.woocommerce .order_item dl.variation,
	.woocommerce .order_item dl.variation dt,
	.woocommerce .order_item dl.variation dd,
	.woocommerce .order_item dl.variation p {
		display: block;
		text-align: left !important;
	}
	/* Блок CFF з одним dd.variation- (Kształt naklejki, Szerokość, Cena… в одному параграфі) */
	.woocommerce .cart_item dl.variation dd.variation-,
	.woocommerce .cart_item dl.variation dd.variation- p,
	.woocommerce .order_item dl.variation dd.variation-,
	.woocommerce .order_item dl.variation dd.variation- p {
		display: block;
		text-align: left !important;
	}
}