/**
 * "Complete your setup" (Iconic FBT). Deliberately plain (owner, 2026-10-09:
 * "less is more"): one thin box, hairline between rows, plain tick box, small
 * image, name + price, option underneath. No tints, no coloured borders, no
 * image tiles. Header mirrors the Colour label above it.
 *
 * Markup: iconic-woo-sales-booster/order-bump/product/bump-products.php
 * Module: inc/product-fbt.php   Behaviour: js/product-fbt.js (one button)
 *
 * Scoped to .ec-fbt so Iconic's checkout bumps and popup keep their own
 * styles. A few rules have to beat older Iconic styling (Iconic's main.css,
 * css/product-single.css) - noted where they do.
 */

/* No line between Colour and the add-ons (owner, 2026-10-09): the bundle
   heading is divider enough. Electro draws it on the last variations row
   (.single-product table.variations tr:last-child td/th); only removed when
   the add-ons block follows, so other products keep it above Add to cart. */
.single-product form.cart:has(.ec-fbt) table.variations tr:last-child td,
.single-product form.cart:has(.ec-fbt) table.variations tr:last-child th {
	border-bottom: 0;
}

/* No top border/padding of its own either; the Colour table's 25px bottom
   margin is the gap. */
.ec-fbt {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ── Header: same as the Colour label / selected-name pair ── */
.ec-fbt .ec-fbt__header {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: transparent;
}

.ec-fbt .ec-fbt__title {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #333e48;
}

.ec-fbt .ec-fbt__pitch {
	font-size: 14px;
	line-height: 1.3;
	color: #6b7580;
}

/* Woo Discount Rules' pink "Mix Match Bundle & Save" bar repeats the pitch
   above the form; the subtitle carries it now. */
.single-product .summary:has(.ec-fbt) .awdr_discount_bar {
	display: none;
}

/* ── List: OPEN, like the Colour section above - no box; rows divided by
   the same 1px #e7e7e7 lines the variations table uses, content on the
   same left edge. ── */
.ec-fbt .ec-fbt__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-bottom: 1px solid #e7e7e7;
}

.ec-fbt .iconic-wsb-product-bumps__list-item {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #e7e7e7;
	background: transparent;
	opacity: 1;
}

/* The product being viewed is already chosen above. Its row stays in the
   form (Iconic's total, discount and add logic use it) but is not shown. */
.ec-fbt .ec-fbt__item--this-item {
	display: none;
}

/* Iconic (25px) and product-single.css (30px) indent the body; Iconic also
   makes its wrapper a flex row, which shrank rows to their content. */
.ec-fbt .iconic-wsb-bump-product,
.single-product .ec-fbt .iconic-wsb-bump-product__body {
	margin: 0;
	padding: 0;
}

.ec-fbt .iconic-wsb-bump-product__body {
	flex: 1 1 auto;
	width: 100%;
}

/* Iconic's main.css: .iconic-wsb-bump-product label { padding: 0 !important } */
.ec-fbt .iconic-wsb-bump-product label.ec-fbt__row {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 0 !important;
	font-weight: 400;
	cursor: pointer;
}

/* Plain tick box. product-single.css turns it into a round pink checkbox
   (appearance:none + an icon in ::before); put the native one back. */
/* Iconic's main.css also absolutely positions it (top 5px / left 0, margin
   !important), which floated it over the image. */
.single-product .ec-fbt input.iconic-wsb-bump-product__checkbox {
	position: static;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	border-radius: 3px;
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: #333e48;
	background: transparent;
	cursor: pointer;
}

.single-product .ec-fbt input.iconic-wsb-bump-product__checkbox::before {
	content: none;
}

.ec-fbt .ec-fbt__thumb {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
}

.ec-fbt .ec-fbt__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* One line per add-on: name | option (if any) | price. The price is always
   the last column, so prices line up whether or not a row has an option. */
.ec-fbt .ec-fbt__info {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) auto 72px;
	grid-template-areas: "name option price";
	align-items: center;
	column-gap: 12px;
	row-gap: 6px;
	min-width: 0;
}

.ec-fbt .ec-fbt__info > .iconic-wsb-bump-product__select,
.ec-fbt .ec-fbt__info > .iconic-wsb-fbt-qty {
	grid-area: option;
	justify-self: end;
}

.ec-fbt .iconic-wsb-bump-product__title {
	grid-area: name;
	min-width: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: #333e48;
	text-decoration: none;
}

.ec-fbt a.iconic-wsb-bump-product__title:hover {
	text-decoration: underline;
}

.ec-fbt .ec-fbt__price {
	grid-area: price;
	justify-self: end;
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: #333e48;
}

.ec-fbt .ec-fbt__price del {
	margin-right: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #8a929a;
}

.ec-fbt .ec-fbt__price ins {
	text-decoration: none;
}

/* Own line under the row (it sits outside the price span so Iconic can
   replace the price without wiping it). */
.ec-fbt .ec-fbt__in-cart {
	grid-column: 1 / -1;
	justify-self: end;
	font-size: 12px;
	font-weight: 400;
	color: #6b7580;
}

.ec-fbt .iconic-wsb-bump-product__select,
.ec-fbt .iconic-wsb-fbt-qty {
	width: auto;
	min-width: 110px;
	max-width: 180px;
	height: 28px;
	padding: 0 22px 0 8px;
	font-size: 12px;
	color: #333e48;
	border: 1px solid #d5d9de;
	border-radius: 3px;
	background-color: #fff;
}

/* Unticked rows: slightly quieter text only. */
.ec-fbt .iconic-wsb-product-bumps__list-item--faded .ec-fbt__info,
.ec-fbt .iconic-wsb-product-bumps__list-item--faded .ec-fbt__thumb {
	opacity: 0.65;
}

/* ── Bundle total ── */
.ec-fbt .ec-fbt__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 10px 0 0;
	padding: 0;
}

/* The total stands out (owner): label on the left, amount right-aligned under
   the price column, large and bold. */
.single-product .ec-fbt .iconic-wsb-product-bumps__total-price {
	display: flex;
	flex: 1 1 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	color: #333e48;
}

.ec-fbt .iconic-wsb-product-bumps__total-price-label {
	margin: 0;
	font-weight: 600;
	color: #333e48;
}

/* Show Iconic's OWN total. product-single.css hides it and shows copies
   (.custom-discount / .custom-discount-1) drawn by the old script in
   inc/product-pricing.php (ec_child_iconic_discount), which recalculates on a
   3-second timer and was left stale on staging when an add-on was unticked
   (Iconic said 123.00, the copy still said 133.94). Iconic's total already
   shows the bundle discount as del/ins and updates instantly. */
.ec-fbt .iconic-wsb-product-bumps__total-price-amount {
	display: inline-flex !important;
	flex-direction: row-reverse; /* Iconic prints <ins> before <del>; show was-price first */
	align-items: baseline;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
}

.ec-fbt .iconic-wsb-product-bumps__total-price-amount del {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #8a929a;
}

.ec-fbt .iconic-wsb-product-bumps__total-price-amount ins {
	text-decoration: none;
	color: #333e48;
}

.ec-fbt .custom-discount,
.ec-fbt .custom-discount-1 {
	display: none !important;
}

.ec-fbt .iconic-wsb-product-bumps__discount-message {
	flex: 1 1 100%;
	margin: 0;
	font-size: 12px;
	color: #6b7580;
}

/* One button (2026-10-09): the main Add to cart adds ticked add-ons
   (js/product-fbt.js), so Iconic's own "Add selected to cart" is hidden.
   It stays in the markup because Iconic's JS and the GA4 hook look for it. */
.ec-fbt .iconic-wsb-product-bumps__button-wrap {
	display: none !important;
}

/* Phones: name on its own line, option and price below it. */
@media (max-width: 479px) {
	.ec-fbt .ec-fbt__info {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name name"
			"option price";
	}

	.ec-fbt .ec-fbt__info > .iconic-wsb-bump-product__select,
	.ec-fbt .ec-fbt__info > .iconic-wsb-fbt-qty {
		justify-self: start;
	}
}