/**
 * Bargain Beds Configurator.
 *
 * Scoped under .bbc so nothing leaks into WoodMart's styles.
 * Tokens first — the client's brand navy is picked up from the theme where
 * possible, with a sensible fallback.
 */

.bbc {
	--bbc-navy: #232a5c;
	--bbc-navy-soft: #3a4380;
	--bbc-ink: #171a2e;
	--bbc-muted: #6b7088;
	--bbc-line: #e2e4ee;
	--bbc-line-strong: #c9cddd;
	--bbc-surface: #fff;
	--bbc-surface-alt: #f7f8fc;
	--bbc-accent: #b8904a;
	--bbc-good: #1f8a5b;
	--bbc-warn: #b4341f;
	--bbc-radius: 12px;
	--bbc-radius-sm: 9px;
	--bbc-ease: cubic-bezier(.22, .61, .36, 1);
	--bbc-dur: .3s;

	margin: 22px 0 18px;
	color: var(--bbc-ink);
	font-size: 15px;
	line-height: 1.45;
}

.bbc *,
.bbc *::before,
.bbc *::after { box-sizing: border-box; }

/* The configurator only makes sense once JS has resolved the rules. Keep the
   markup in the DOM for crawlers but avoid a flash of every panel open. */
.bbc:not(.is-ready) .bbc__panel { height: 0; overflow: hidden; }

/* ----------------------------------------------------------------- progress */

.bbc__progress { margin-bottom: 18px; }

.bbc__progress-track {
	height: 5px;
	border-radius: 99px;
	background: var(--bbc-line);
	overflow: hidden;
}

.bbc__progress-fill {
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--bbc-navy), var(--bbc-navy-soft));
	transition: width .45s var(--bbc-ease);
}

.bbc.is-complete .bbc__progress-fill {
	background: linear-gradient(90deg, var(--bbc-good), #2fae78);
}

.bbc__progress-text {
	margin: 7px 0 0;
	font-size: 12.5px;
	letter-spacing: .01em;
	color: var(--bbc-muted);
}

/* ------------------------------------------------------------------- groups */

.bbc__groups {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bbc-line);
	border-radius: var(--bbc-radius);
	overflow: hidden;
	background: var(--bbc-surface);
}

.bbc__group + .bbc__group { border-top: 1px solid var(--bbc-line); }
.bbc__group.is-hidden { display: none; }

.bbc__head-wrap { margin: 0; font-size: inherit; font-weight: inherit; }

.bbc__head {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 15px 16px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: background var(--bbc-dur) var(--bbc-ease);
}

.bbc__head:hover { background: var(--bbc-surface-alt); }

.bbc__head:focus-visible {
	outline: 2px solid var(--bbc-navy);
	outline-offset: -2px;
}

.bbc__step {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--bbc-line-strong);
	font-size: 12px;
	font-weight: 600;
	color: var(--bbc-muted);
	transition: all var(--bbc-dur) var(--bbc-ease);
}

.bbc__group.is-answered .bbc__step {
	border-color: var(--bbc-navy);
	background: var(--bbc-navy);
	color: #fff;
}

.bbc__group.is-open .bbc__step {
	border-color: var(--bbc-navy);
	color: var(--bbc-navy);
}

.bbc__group.is-open.is-answered .bbc__step { color: #fff; }

.bbc__head-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.bbc__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bbc-navy);
}

.bbc__chosen {
	font-size: 14.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bbc__chosen-empty { color: var(--bbc-muted); }
.bbc__chosen-value { color: var(--bbc-ink); font-weight: 500; }

.bbc__head-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
}

.bbc__price-tag {
	font-size: 12.5px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 99px;
	background: var(--bbc-surface-alt);
	color: var(--bbc-ink);
	white-space: nowrap;
}

.bbc__price-tag.is-free { color: var(--bbc-muted); font-weight: 500; }

.bbc__tick {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--bbc-good);
	color: #fff;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .26s var(--bbc-ease), transform .26s var(--bbc-ease);
}

.bbc__tick svg { width: 12px; height: 12px; }
.bbc__tick.is-on { opacity: 1; transform: scale(1); }

.bbc__caret {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: var(--bbc-muted);
	transition: transform var(--bbc-dur) var(--bbc-ease);
}

.bbc__caret svg { width: 15px; height: 15px; }
.bbc__group.is-open .bbc__caret { transform: rotate(180deg); }

/* -------------------------------------------------------------------- panel */

.bbc__panel {
	height: 0;
	overflow: hidden;
	transition: height var(--bbc-dur) var(--bbc-ease);
}

.bbc__panel-inner { padding: 2px 16px 18px; }

.bbc__help {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--bbc-muted);
}

.bbc__divider {
	grid-column: 1 / -1;
	margin: 10px 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bbc-muted);
}

/* ------------------------------------------------------------------ options */

.bbc__options { display: grid; gap: 9px; }

.bbc__options--tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.bbc__options--cards { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.bbc__options--swatches { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 11px; }
.bbc__options--toggle { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.bbc__opt { display: block; cursor: pointer; }

.bbc__opt-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bbc__opt-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	height: 100%;
	padding: 12px;
	border: 1.5px solid var(--bbc-line);
	border-radius: var(--bbc-radius-sm);
	background: var(--bbc-surface);
	transition:
		border-color .2s var(--bbc-ease),
		box-shadow .2s var(--bbc-ease),
		transform .2s var(--bbc-ease),
		background .2s var(--bbc-ease);
}

.bbc__opt:hover .bbc__opt-box {
	border-color: var(--bbc-line-strong);
	transform: translateY(-1px);
}

.bbc__opt-input:focus-visible + .bbc__opt-box {
	outline: 2px solid var(--bbc-navy);
	outline-offset: 2px;
}

.bbc__opt-input:checked + .bbc__opt-box {
	border-color: var(--bbc-navy);
	background: #f6f7fd;
	box-shadow: 0 0 0 1px var(--bbc-navy), 0 6px 18px -10px rgba(35, 42, 92, .55);
}

/* tiles and toggles stack their icon above the label */
.bbc__options--tiles .bbc__opt-box,
.bbc__options--toggle .bbc__opt-box {
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 15px 10px;
}

.bbc__opt-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--bbc-navy);
	transition: transform .28s var(--bbc-ease);
}

.bbc__opt-icon .bbc-icon { width: 38px; height: 38px; display: block; }
.bbc__options--cards .bbc__opt-icon .bbc-icon { width: 32px; height: 32px; }

.bbc__opt-input:checked + .bbc__opt-box .bbc__opt-icon { transform: scale(1.08); }

.bbc__opt-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bbc__opt-label {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.bbc__opt-desc {
	font-size: 12px;
	color: var(--bbc-muted);
}

.bbc__opt-price {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bbc-ink);
	margin-top: 2px;
}

.bbc__opt-price.is-free {
	font-weight: 500;
	color: var(--bbc-good);
}

.bbc__opt-tick {
	position: absolute;
	top: 7px;
	right: 7px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bbc-navy);
	color: #fff;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .22s var(--bbc-ease), transform .22s var(--bbc-ease);
}

.bbc__opt-tick svg { width: 11px; height: 11px; }

.bbc__opt-input:checked + .bbc__opt-box .bbc__opt-tick {
	opacity: 1;
	transform: scale(1);
}

/* ----------------------------------------------------------------- swatches */

.bbc__options--swatches .bbc__opt-box {
	flex-direction: column;
	gap: 7px;
	padding: 7px;
	text-align: center;
}

.bbc__swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 7px;
	overflow: hidden;
	background: var(--bbc-surface-alt);
}

.bbc__swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s var(--bbc-ease);
}

.bbc__opt:hover .bbc__swatch img { transform: scale(1.06); }

.bbc__options--swatches .bbc__opt-label { font-size: 11.5px; font-weight: 500; }
.bbc__options--swatches .bbc__opt-desc,
.bbc__options--swatches .bbc__opt-price { display: none; }

/* ----------------------------------------------------------------- dropdown */

.bbc__select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--bbc-line);
	border-radius: var(--bbc-radius-sm);
	background: var(--bbc-surface);
	font: inherit;
	font-size: 14.5px;
	color: var(--bbc-ink);
	transition: border-color .2s var(--bbc-ease);
}

.bbc__select:focus {
	outline: none;
	border-color: var(--bbc-navy);
	box-shadow: 0 0 0 3px rgba(35, 42, 92, .12);
}

/* ------------------------------------------------------------------ summary */

.bbc__summary {
	margin-top: 16px;
	border: 1px solid var(--bbc-line);
	border-radius: var(--bbc-radius);
	background: var(--bbc-surface-alt);
	overflow: hidden;
}

.bbc__summary-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bbc-navy);
	cursor: pointer;
}

.bbc__summary.is-open .bbc__summary-toggle .bbc__caret { transform: rotate(180deg); }

.bbc__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s var(--bbc-ease);
}

.bbc__summary.is-open .bbc__summary-list { max-height: 640px; }

.bbc__summary-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 9px 16px;
	border-top: 1px solid var(--bbc-line);
	font-size: 13.5px;
}

.bbc__summary-name {
	grid-column: 1;
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bbc-muted);
}

.bbc__summary-price {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-weight: 700;
	white-space: nowrap;
}

.bbc__summary-price.is-free { font-weight: 500; color: var(--bbc-muted); }
.bbc__summary-val { grid-column: 1; font-weight: 500; }

.bbc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-top: 1px solid var(--bbc-line-strong);
	background: var(--bbc-surface);
}

.bbc__total-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bbc-muted);
}

.bbc__total-value {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--bbc-navy);
	transform-origin: right center;
}

.bbc__total-value.is-bumped { animation: bbc-bump .42s var(--bbc-ease); }

@keyframes bbc-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.085); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ notices */

.bbc__notice {
	margin: 11px 0 0;
	padding: 10px 13px;
	border-radius: var(--bbc-radius-sm);
	background: #fdf2ef;
	border: 1px solid #f3d3cb;
	color: var(--bbc-warn);
	font-size: 13px;
}

.bbc__notice[hidden] { display: none; }
.bbc__notice.is-flash { animation: bbc-flash .5s var(--bbc-ease); }

@keyframes bbc-flash {
	0%, 100% { transform: translateX(0); }
	22% { transform: translateX(-4px); }
	55% { transform: translateX(4px); }
	80% { transform: translateX(-2px); }
}

.bbc__group.is-nudge > .bbc__head-wrap > .bbc__head { animation: bbc-flash .5s var(--bbc-ease); }

/* The gated button stays clickable so the click can explain itself. */
.bbc-disabled {
	opacity: .5 !important;
	cursor: not-allowed !important;
}

/* Native attribute selects are driven by the configurator, so hide the
   duplicate UI — but only visually, so Woo keeps reading and writing them. */
.bbc-hide-native-variations .variations,
.bbc-hide-native-variations .woocommerce-variation-description,
.bbc-hide-native-variations .woocommerce-variation-price {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 560px) {
	.bbc__options--tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
	.bbc__options--cards { grid-template-columns: 1fr; }
	.bbc__options--swatches { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }

	.bbc__head { padding: 13px 13px; gap: 10px; }
	.bbc__panel-inner { padding: 2px 13px 15px; }
	.bbc__total-value { font-size: 22px; }
	.bbc__price-tag { display: none; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.bbc *,
	.bbc *::before,
	.bbc *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------- theme hardening

   WoodMart centres and uppercases text inside the add-to-cart block, and sets
   its own button/label styles. The configurator is a self-contained UI, so it
   opts out explicitly rather than inheriting. Scoped under .bbc so the theme's
   styling of everything else is untouched. */

.bbc,
.bbc .bbc__head,
.bbc .bbc__head-text,
.bbc .bbc__panel,
.bbc .bbc__panel-inner,
.bbc .bbc__options,
.bbc .bbc__summary {
	text-align: left;
}

.bbc .bbc__chosen,
.bbc .bbc__chosen-empty,
.bbc .bbc__chosen-value,
.bbc .bbc__opt-label,
.bbc .bbc__opt-desc,
.bbc .bbc__opt-price,
.bbc .bbc__summary-val,
.bbc .bbc__help {
	text-transform: none;
	letter-spacing: normal;
}

/* Tiles and swatches stay centred — that is our own choice, not the theme's. */
.bbc .bbc__options--tiles .bbc__opt-box,
.bbc .bbc__options--toggle .bbc__opt-box,
.bbc .bbc__options--swatches .bbc__opt-box {
	text-align: center;
}

/* The theme styles bare <button> elements inside the cart form. */
.bbc button.bbc__head,
.bbc button.bbc__summary-toggle {
	width: 100%;
	min-height: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	line-height: 1.45;
}

.bbc button.bbc__head:hover,
.bbc button.bbc__summary-toggle:hover {
	color: inherit;
	box-shadow: none;
}

.bbc .bbc__opt-box { box-shadow: none; }

.bbc .bbc__opt-input:checked + .bbc__opt-box {
	box-shadow: 0 0 0 1px var(--bbc-navy), 0 6px 18px -10px rgba(35, 42, 92, .55);
}

/* Woo/WoodMart add margins to form rows; the configurator manages its own. */
.bbc p,
.bbc ul,
.bbc ol,
.bbc h3 { margin: 0; }

.bbc .bbc__help { margin: 0 0 12px; }
.bbc .bbc__progress-text { margin: 7px 0 0; }
.bbc .bbc__notice { margin: 11px 0 0; }

/* Keep our SVGs from inheriting the theme's img/svg sizing rules. */
.bbc .bbc-icon { max-width: none; vertical-align: middle; }

/* When the configurator drives the variation form, Woo's own controls are
   redundant. Hidden visually but left in the DOM and functional, because
   WooCommerce reads and writes them to resolve the variation. */
.bbc-hide-native-variations .variations,
.bbc-hide-native-variations .woocommerce-variation-description,
.bbc-hide-native-variations .reset_variations,
.bbc-hide-native-variations .wd-swatches-single,
.bbc-hide-native-variations .woocommerce-variation-price {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* A group-level warning. Used where getting it wrong costs the customer money
   — a headboard that will not go up the stairs is not returnable. Deliberately
   louder than help text. */
.bbc .bbc__warn {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0 0 12px;
	padding: 11px 13px;
	border: 1px solid #f0c9c2;
	border-left: 3px solid var(--bbc-warn);
	border-radius: var(--bbc-radius-sm);
	background: #fdf4f2;
	color: #8d2718;
	font-size: 13px;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
}

.bbc .bbc__warn-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	color: var(--bbc-warn);
}

.bbc .bbc__warn-icon svg { width: 100%; height: 100%; }