/* Trendo Variation Bundles */
/* --trendo-bundle-accent is printed inline from WooCommerce -> Settings -> Комплекти */
:root {
	--trendo-bundle-accent: #e8418a;
}

.trendo-bundle-cards {
	--trendo-bundle-soft: color-mix(in srgb, var(--trendo-bundle-accent) 7%, #fff);
	--trendo-bundle-line: var(--theme-border-color, #e1e1e1);
	--trendo-bundle-dot: 18px; /* radio = the column the quantities sit in */
	--trendo-bundle-gap: 10px;
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
}

/* Product page: cards replace the attribute selects and WooCommerce's own price/description */
.trendo-bundle-form .trendo-bundle-hidden,
.trendo-bundle-form .reset_variations,
.trendo-bundle-form .woocommerce-variation-price,
.trendo-bundle-form .woocommerce-variation-description {
	display: none !important;
}

.trendo-bundle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border: 2px solid var(--trendo-bundle-line);
	border-radius: var(--trendo-bundle-radius, 6px);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.trendo-bundle-card:hover {
	border-color: var(--trendo-bundle-accent);
}

.trendo-bundle-card.is-active {
	border-color: var(--trendo-bundle-accent);
	background: var(--trendo-bundle-soft);
}

/* Focus ring only for the keyboard - a click must not add a second border */
.trendo-bundle-card:has(.trendo-bundle-card__input:focus-visible) {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--trendo-bundle-accent) 30%, transparent);
}

.trendo-bundle-card.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.trendo-bundle-card.is-disabled:hover {
	border-color: var(--trendo-bundle-line);
}

.trendo-bundle-card__head {
	display: flex;
	align-items: center;
	gap: var(--trendo-bundle-gap);
}

.trendo-bundle-card .trendo-bundle-card__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.trendo-bundle-card__radio {
	position: relative;
	flex: 0 0 var(--trendo-bundle-dot);
	width: var(--trendo-bundle-dot);
	height: var(--trendo-bundle-dot);
	border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 50%;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.trendo-bundle-card.is-active .trendo-bundle-card__radio {
	border-color: var(--trendo-bundle-accent);
}

.trendo-bundle-card.is-active .trendo-bundle-card__radio::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--trendo-bundle-accent);
}

.trendo-bundle-card__title {
	flex: 1;
	font-weight: 700;
	line-height: 1.3;
}

.trendo-bundle-card__price {
	font-weight: 700;
	white-space: nowrap;
}

.trendo-bundle-card__price del {
	opacity: 0.6;
	font-weight: 400;
}

.trendo-bundle-card__price ins {
	text-decoration: none;
}

.trendo-bundle-card__desc {
	font-size: 0.9em;
	line-height: 1.45;
	opacity: 0.8;
}

.trendo-bundle-card__desc > :first-child {
	margin-top: 0;
}

.trendo-bundle-card__desc > :last-child {
	margin-bottom: 0;
}

.trendo-bundle-card__items {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
	line-height: 1.4;
}

/* Quantity under the radio, the label lines up with the title */
.trendo-bundle-card__items li {
	display: grid;
	grid-template-columns: minmax(var(--trendo-bundle-dot), max-content) 1fr;
	column-gap: var(--trendo-bundle-gap);
	margin: 3px 0;
}

.trendo-bundle-card__qty {
	color: var(--trendo-bundle-accent);
	font-weight: 600;
}

/* Layout 2: price under the list, after a divider */
.trendo-bundle-cards--price-bottom .trendo-bundle-card__price {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--trendo-bundle-line);
	font-size: 1.1em;
}

.trendo-bundle-card.is-active .trendo-bundle-card__price {
	border-top-color: color-mix(in srgb, var(--trendo-bundle-accent) 25%, transparent);
}

.trendo-bundle-card__badge {
	font-size: 0.85em;
}

/* Cart, checkout and mini cart: a "↳" arrow in front of each component's image */
:root {
	--trendo-bundle-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v7a4 4 0 0 0 4 4h11'/%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3C/svg%3E");
}

.trendo-bundle-child .product-thumbnail::before,
.trendo-bundle-child .wc-block-cart-item__image::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: middle;
	background-color: currentColor;
	opacity: 0.45;
	-webkit-mask: var(--trendo-bundle-arrow) center / contain no-repeat;
	mask: var(--trendo-bundle-arrow) center / contain no-repeat;
}

.trendo-bundle-child .product-thumbnail,
.trendo-bundle-child .wc-block-cart-item__image {
	white-space: nowrap;
}

.trendo-bundle-child .product-thumbnail a,
.trendo-bundle-child .product-thumbnail img,
.trendo-bundle-child .wc-block-cart-item__image a,
.trendo-bundle-child .wc-block-cart-item__image img {
	display: inline-block;
	vertical-align: middle;
}

.trendo-bundle-child .product-thumbnail img,
.trendo-bundle-child .wc-block-cart-item__image img {
	max-width: 48px;
}

/* FunnelKit side cart and checkout: the arrow sits left of the image, outside the image box */
.fkcart--item:has(.trendo-bundle-fk-qty) .fkcart-thumb-wrap,
.trendo-bundle-child .product-image {
	position: relative;
	margin-left: 26px;
}

.fkcart--item:has(.trendo-bundle-fk-qty) .fkcart-thumb-wrap::before,
.trendo-bundle-child .product-image::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-color: currentColor;
	opacity: 0.45;
	-webkit-mask: var(--trendo-bundle-arrow) center / contain no-repeat;
	mask: var(--trendo-bundle-arrow) center / contain no-repeat;
}

/* Side cart: the image box hugs the image, so the arrow centres on the image, not on the row */
#fkcart-modal .fkcart-item-wrap .fkcart--item:has(.trendo-bundle-fk-qty) .fkcart-thumb-wrap {
	align-self: flex-start;
	line-height: 0;
}

/* Side cart: components have no price column - the name takes the full width */
#fkcart-modal .fkcart-item-wrap .fkcart--item:has(.trendo-bundle-fk-qty) .fkcart-item-wrap-start .fkcart-item-misc {
	display: none;
}

#fkcart-modal .fkcart-item-wrap .fkcart--item:has(.trendo-bundle-fk-qty) .fkcart-item-wrap-start .fkcart-item-meta {
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
}

/* Checkout: room between the (floated) image and the name */
.trendo-bundle-child .product-image {
	margin-right: 12px;
}

/* Checkout: bundle line = product name, variation on its own line below (trendo_bundle_checkout_item_name).
   FunnelKit's own "Атрибут: стойност" list would repeat it - and shows the attribute as a Latin slug. */
.trendo-bundle-parent .wfacp_single_variation {
	display: none;
}

.trendo-bundle-variation {
	display: block;
	margin-top: 2px;
	font-size: 0.9em;
	font-weight: 400;
}

/* "Промени" sits right after the variation name; FunnelKit's own link would repeat it */
.trendo-bundle-parent .wfacp_qv-button:not(.trendo-bundle-switch) {
	display: none !important;
}

.trendo-bundle-variation__name {
	opacity: 0.7;
}

/* Under the variation name (fits on phones too), without FunnelKit's top margin */
.trendo-bundle-variation .trendo-bundle-switch {
	display: block;
	width: fit-content;
	margin: 0 !important;
	color: var(--trendo-bundle-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* Side cart: "+" at the max quantity (assets/funnelkit.js) */
#fkcart-modal .fkcart-quantity-button.trendo-at-max {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Side cart max-quantity note: a full-width row under the name and price columns. The columns are
   60% / 40% + a 16px gap, so the price column gives up the gap while the row wraps. */
#fkcart-modal .fkcart-item-wrap .fkcart--item .fkcart-item-info.trendo-has-note {
	flex-wrap: wrap;
	row-gap: 4px;
}

#fkcart-modal .fkcart-item-wrap .fkcart--item .fkcart-item-info.trendo-has-note > .fkcart-item-misc {
	max-width: calc(40% - 16px);
}

#fkcart-modal .fkcart-item-info > .trendo-max-note {
	flex: 0 0 100%;
	max-width: 100%;
	color: var(--trendo-bundle-accent);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.trendo-bundle-fk-qty {
	color: var(--trendo-bundle-accent);
	font-weight: 600;
}

/* Block cart and checkout summary: components show no price at all (they are included), and the
   bundle line shows its price once - on the right, without the "Save €X" badge. */
.trendo-bundle-child .wc-block-cart-item__prices,
.trendo-bundle-child .wc-block-cart-item__total,
.trendo-bundle-child .wc-block-components-order-summary-item__individual-prices,
.trendo-bundle-child .wc-block-components-order-summary-item__total-price,
.trendo-bundle-parent .wc-block-cart-item__prices,
.trendo-bundle-parent .wc-block-components-order-summary-item__individual-prices,
.trendo-bundle-parent .wc-block-components-sale-badge,
.trendo-bundle-child .wc-block-components-sale-badge {
	display: none !important;
}

/* Block cart: a component's quantity is read-only - a compact box that fits the number,
   with the same space on every side, instead of a stepper without buttons. */
.trendo-bundle-child .wc-block-components-quantity-selector {
	display: inline-flex;
	width: auto;
	min-width: 0;
}

.trendo-bundle-child .wc-block-components-quantity-selector__button {
	display: none;
}

.trendo-bundle-child .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	flex: 0 0 auto;
	field-sizing: content;
	width: auto;
	min-width: 1ch;
	height: auto;
	min-height: 0;
	padding: 0.5em;
	line-height: 1.2;
	text-align: center;
}

/* Firefox/Safari without field-sizing: a fixed width that fits 1-3 digits */
@supports not (field-sizing: content) {
	.trendo-bundle-child .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
		width: calc(3ch + 1em);
	}
}

/* Theme mini carts lay items out in their own grids - an indent is the safe marker there */
.woocommerce-mini-cart-item.trendo-bundle-child,
.mini_cart_item.trendo-bundle-child {
	padding-left: 1.5em;
}

/* Block checkout summary has no image cell of its own to hang the arrow on */
.trendo-bundle-child .wc-block-components-order-summary-item__description {
	padding-left: 1em;
}

.trendo-bundle-included {
	opacity: 0.75;
}