/**
 * BundleBoss — Configurator layout (Pro).
 *
 * A full-page guided builder (SkyTech-style). The configurator JS upgrades the
 * standard bundle markup into a two-pane shell: option cards on the left, a
 * docked "Your build" summary on the right. Everything is scoped under
 * .bb-configurator so no other layout is touched, and the layout degrades to a
 * plain stacked list when JS is off (the cards still work).
 *
 * Colours use the plugin's --bb-* theme tokens with safe fallbacks so a merchant
 * who themed the accent gets a themed configurator for free.
 */

/* ---- Full-page break-out -------------------------------------------------
   A full-page guided builder needs the whole page width, not WooCommerce's
   narrow summary column. While a configurator is on screen, hide the default
   product gallery and let the summary span full width. Targets the common Woo
   theme structure; harmless where a theme differs. (Same approach as the
   per-bundle "hide main image" mode.) */
body.bb-has-configurator div.product .woocommerce-product-gallery {
	display: none !important;
}
body.bb-has-configurator div.product .summary,
body.bb-has-configurator div.product .entry-summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin-left: 0 !important;
}

/* ---- Two-pane shell ------------------------------------------------------ */

.bb-configurator {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: 28px;
	align-items: start;
}

.bb-config-main {
	min-width: 0; /* let the card grid shrink instead of overflowing */
}

/* ---- Docked "Your build" summary ---------------------------------------- */

.bb-config-aside {
	position: sticky;
	top: 24px;
}

.bb-config-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border: 1px solid var( --bb-border, #e6e4ed );
	border-radius: 14px;
	background: var( --bb-surface, #ffffff );
	box-shadow: 0 6px 24px rgba( 20, 16, 41, 0.06 );
}

.bb-config-heading {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var( --bb-ink, #151029 );
}

/* The recap list, promoted from a collapsible <details> to an always-open
   list of the chosen slots. */
.bb-config-recap {
	margin: 0;
}
.bb-config-recap > summary {
	display: none; /* always open in the panel; no toggle needed */
}
.bb-config-recap .bb-recap-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Outcome panel (running total + item count; the payoff area) -------- */

.bb-config-outcome {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var( --bb-accent-soft, #f3f1fb );
	transition: background 0.25s ease;
}
.bb-config-outcome-count {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: var( --bb-accent, #fd4730 );
}
.bb-config-outcome-label {
	font-size: 13px;
	color: var( --bb-ink-soft, #5b5570 );
}
.bb-config-panel.is-complete .bb-config-outcome {
	background: var( --bb-success-bg, #e7f6ec );
}
.bb-config-panel.is-complete .bb-config-outcome-count {
	color: var( --bb-success, #1a7f37 );
}

/* The total + CTA sit at the foot of the panel. */
.bb-config-panel .bb-summary-totals {
	margin: 0;
}
.bb-config-panel .bundle-add-to-cart {
	width: 100%;
}

/* ---- Slots stack as a column of "steps" ---------------------------------- */

.bb-configurator .bundle-items {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bb-configurator .bundle-item-card {
	border: 1px solid var( --bb-border, #e6e4ed );
	border-radius: 14px;
	padding: 18px;
	background: var( --bb-surface, #ffffff );
}

/* The slot label reads like a step heading. */
.bb-configurator .bb-item-name {
	font-size: 17px;
	font-weight: 700;
	color: var( --bb-ink, #151029 );
}

/* The chosen slot gets a confident "done" frame. */
.bb-configurator .bundle-item-card.is-chosen,
.bb-configurator .bundle-item-card.bb-slot-done {
	border-color: var( --bb-success, #1a7f37 );
	box-shadow: 0 0 0 1px var( --bb-success, #1a7f37 ) inset;
}

/* ---- Rich option cards --------------------------------------------------- */

.bb-configurator .bb-chooser-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 12px;
}

.bb-configurator .bb-candidate {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border: 1.5px solid var( --bb-border, #e6e4ed );
	border-radius: 12px;
	background: var( --bb-surface, #ffffff );
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bb-configurator .bb-candidate:hover:not( :disabled ) {
	border-color: var( --bb-accent, #fd4730 );
	box-shadow: 0 6px 18px rgba( 20, 16, 41, 0.10 );
	transform: translateY( -2px );
}
.bb-configurator .bb-candidate:focus-visible {
	outline: 2px solid var( --bb-accent, #fd4730 );
	outline-offset: 2px;
}
.bb-configurator .bb-candidate.is-oos {
	opacity: 0.55;
	cursor: not-allowed;
}
.bb-configurator .bb-candidate-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 8px;
	background: var( --bb-tile, #f6f5fa );
}
.bb-configurator .bb-candidate-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --bb-ink, #151029 );
}
.bb-configurator .bb-candidate-price {
	font-size: 14px;
	font-weight: 700;
	color: var( --bb-ink, #151029 );
}

/* Price delta vs the cheapest option in the slot. */
.bb-configurator .bb-candidate-delta {
	font-size: 11.5px;
	font-weight: 700;
	color: var( --bb-ink-soft, #5b5570 );
}
.bb-configurator .bb-candidate-delta.is-base,
.bb-configurator .bb-candidate-delta.is-save {
	color: var( --bb-success, #1a7f37 );
}
.bb-configurator .bb-candidate-delta.is-selected-delta {
	color: var( --bb-accent, #fd4730 );
}

/* The chosen option stays in the grid, ringed and ticked — no collapse. */
.bb-configurator .bb-candidate.is-selected {
	border-color: var( --bb-accent, #fd4730 );
	box-shadow: 0 0 0 2px var( --bb-accent, #fd4730 ) inset;
}
.bb-configurator .bb-candidate.is-selected::after {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --bb-accent, #fd4730 );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* ---- Narrow CONTAINER: single column + the summary as a bottom panel ------
   Keyed to the form's container width (container-type lives on .bundle-boss-form,
   which the configurator shell sits inside) rather than the viewport. This also
   fires when the viewport is wide but the product COLUMN is narrow — block and
   boxed themes (Twenty Twenty-Four/Five, Hestia) that don't honour the full-page
   break-out. Previously a @media query, so on those themes the 2-pane grid
   persisted in a ~300px column and crushed the option tiles to one-per-row
   (very long) with the sticky sidebar stranded mid-page. Collapsing to one
   column hands the tile grid the full width (4-per-row) and docks the summary
   cleanly at the bottom. */

@container ( max-width: 860px ) {
	.bb-configurator {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.bb-config-aside {
		position: sticky;
		top: auto;
		bottom: 0;
		z-index: 20;
		margin: 0 -16px -16px; /* bleed to the screen edges for a bottom sheet */
	}
	.bb-config-panel {
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 24px rgba( 20, 16, 41, 0.12 );
	}
	/* On mobile the chosen-slot list is collapsed by default to save height;
	   the count + total + CTA stay visible. */
	.bb-config-recap {
		max-height: 32vh;
		overflow-y: auto;
	}
}

/* The choice-slot's inline chosen-item thumbnail is redundant in the
   Configurator: the chosen option card is ringed and the "Your build" sidebar
   already shows it. Left unhandled it leaked down the left edge as a stretched
   stray image (the selected option's photo, looking like a misplaced first
   option). Hide it in this layout. */
body.bb-has-configurator .bb-product-image.bundle-item-image {
	display: none !important;
}