/**
 * BD Size Finder Quiz block (.bdsq) — a stepper quiz that ends on a size
 * recommendation. Mobile-first; every size and colour comes from a CSS
 * variable the block spec sets, so one stylesheet serves all six designs.
 *
 * The card itself is an .espt-bd-box, so its background, border, radius,
 * padding, shadow and hover come from the shared BD design section
 * (--bd-box-bg --bd-box-line --bd-radius --bd-pad).
 *
 * vars:    --max-width --gap --btn-radius
 *          --head-size --q-size --opt-size --res-size --opt-cols
 *          --accent --accent-dark
 *          --head-color --sub-color --q-color
 *          --opt-bg --opt-border --opt-on-bg --res-bg --res-border --size-color
 * classes: is-design-card|soft|outline|dark|gradient|plain
 *          is-opt-style-rows|tiles|cards|pills
 *          is-bar-style-bars|dots|numbers
 *          is-anim-none|fade|slide
 *          is-show-bar/no-show-bar  is-show-count/no-show-count
 *          is-show-radio/no-show-radio
 *          is-text-align-left|center|right
 *
 * (The "show option icons" toggle is handled in PHP — it decides whether an
 * icon is printed at all, so it carries no css flag and no root class.)
 */

.espt-block-bd-size-quiz {
	--sq-accent: var(--accent, var(--bd-primary));
	--sq-accent-dark: var(--accent-dark, var(--bd-primary-dark));
	--sq-card-bg: var(--bd-box-bg);
	--sq-card-line: var(--bd-box-line);
	--sq-ink: var(--head-color, var(--bd-ink));
	--sq-body: var(--sub-color, var(--bd-body));
	--sq-q: var(--q-color, var(--bd-ink));
	--sq-muted: var(--sub-color, var(--bd-muted));
	--sq-opt-bg: var(--opt-bg, var(--bd-box-bg));
	--sq-opt-line: var(--opt-border, var(--bd-soft-line));
	--sq-opt-on-bg: var(--opt-on-bg, var(--bd-soft));
	--sq-res-bg: var(--res-bg, var(--bd-soft));
	--sq-res-line: var(--res-border, var(--bd-soft-line));
	--sq-size-color: var(--size-color, var(--sq-accent-dark));
	--sq-pad: var(--bd-pad, 16px);
	--sq-radius: var(--bd-radius, 16px);
	--sq-btn-radius: var(--btn-radius, 9px);
	--sq-back-bg: color-mix(in srgb, var(--sq-accent) 7%, var(--bd-line));
}

/* ------------------------------------------------------------------ card */

.espt-block-bd-size-quiz .bdsq {
	background: var(--sq-card-bg);
	border: 1.5px solid var(--sq-card-line);
	border-radius: var(--sq-radius);
	color: var(--sq-body);
	line-height: 1.6;
	margin-inline: auto;
	max-width: var(--max-width, 100%);
	min-width: 0;
	padding: var(--sq-pad);
	position: relative;
}

.espt-block-bd-size-quiz .bdsq * {
	min-width: 0;
}

/* ---------------------------------------------------------------- header */

.espt-block-bd-size-quiz .bdsq-head {
	margin-bottom: 16px;
}

.espt-block-bd-size-quiz .bdsq-eb {
	color: var(--sq-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 5px;
	overflow-wrap: anywhere;
}

.espt-block-bd-size-quiz .bdsq-h {
	color: var(--sq-ink);
	font-size: var(--head-size, 19px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-bd-size-quiz .bdsq-sb {
	color: var(--sq-body);
	font-size: 13.5px;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------- progress + count */

.espt-block-bd-size-quiz .bdsq-bar {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.espt-block-bd-size-quiz .bdsq-bar i {
	background: var(--bd-line);
	border-radius: 99px;
	flex: 1 1 0;
	height: 5px;
	min-width: 0;
	transition: background 0.25s ease;
}

.espt-block-bd-size-quiz .bdsq-bar i.on {
	background: var(--sq-accent);
}

.espt-block-bd-size-quiz .bdsq-bar span {
	display: none;
}

.espt-block-bd-size-quiz.is-bar-style-dots .bdsq-bar {
	gap: 8px;
	justify-content: center;
}

.espt-block-bd-size-quiz.is-bar-style-dots .bdsq-bar i {
	border-radius: 50%;
	flex: 0 0 auto;
	height: 9px;
	width: 9px;
}

.espt-block-bd-size-quiz.is-bar-style-numbers .bdsq-bar {
	gap: 10px;
	justify-content: center;
}

.espt-block-bd-size-quiz.is-bar-style-numbers .bdsq-bar i {
	align-items: center;
	border-radius: 50%;
	color: var(--sq-muted);
	display: flex;
	flex: 0 0 auto;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.espt-block-bd-size-quiz.is-bar-style-numbers .bdsq-bar i.on {
	color: #fff;
}

.espt-block-bd-size-quiz.is-bar-style-numbers .bdsq-bar span {
	display: block;
	line-height: 1;
}

.espt-block-bd-size-quiz.no-show-bar .bdsq-bar {
	display: none;
}

.espt-block-bd-size-quiz .bdsq-count {
	color: var(--sq-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 14px;
}

.espt-block-bd-size-quiz.no-show-count .bdsq-count {
	display: none;
}

/* ----------------------------------------------------------------- steps */

.espt-block-bd-size-quiz .bdsq-steps {
	min-width: 0;
}

.espt-block-bd-size-quiz .bdsq-step {
	display: none;
}

.espt-block-bd-size-quiz .bdsq-step.on {
	display: block;
}

.espt-block-bd-size-quiz.is-anim-fade .bdsq-step.on {
	animation: espt-sq-fade 0.3s ease both;
}

.espt-block-bd-size-quiz.is-anim-slide .bdsq-step.on {
	animation: espt-sq-slide 0.32s cubic-bezier(0.22, 0.68, 0.35, 1) both;
}

@keyframes espt-sq-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes espt-sq-slide {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.espt-block-bd-size-quiz .bdsq-q {
	color: var(--sq-q);
	font-size: var(--q-size, 16px);
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

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

.espt-block-bd-size-quiz .bdsq-opt {
	display: grid;
	gap: var(--gap, 8px);
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-bd-size-quiz .bdsq-o {
	align-items: center;
	background: var(--sq-opt-bg);
	border: 1.5px solid var(--sq-opt-line);
	border-radius: 10px;
	color: var(--sq-ink);
	cursor: pointer;
	display: flex;
	font-size: var(--opt-size, 15px);
	font-weight: 600;
	gap: 10px;
	line-height: 1.45;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 12px 13px;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.espt-block-bd-size-quiz .bdsq-o:hover {
	border-color: color-mix(in srgb, var(--sq-accent) 55%, var(--sq-opt-line));
}

.espt-block-bd-size-quiz .bdsq-o:focus-within {
	outline: 2px solid var(--sq-accent);
	outline-offset: 2px;
}

.espt-block-bd-size-quiz .bdsq-o.is-on {
	background: var(--sq-opt-on-bg);
	border-color: var(--sq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-accent) 16%, transparent);
}

/* No-JS / pre-hydration fallback (kept apart so browsers without :has()
   still parse the .is-on rule above). */
.espt-block-bd-size-quiz .bdsq-o:has(input:checked) {
	background: var(--sq-opt-on-bg);
	border-color: var(--sq-accent);
}

.espt-block-bd-size-quiz .bdsq-o input {
	accent-color: var(--sq-accent);
	flex: 0 0 auto;
	height: 18px;
	margin: 0;
	width: 18px;
}

.espt-block-bd-size-quiz.no-show-radio .bdsq-o input {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.espt-block-bd-size-quiz .bdsq-oi {
	color: var(--sq-accent);
	flex: 0 0 auto;
	font-size: 1.15em;
}

.espt-block-bd-size-quiz .bdsq-ol {
	flex: 1 1 auto;
	min-width: 0;
}

.espt-block-bd-size-quiz .bdsq-os {
	color: var(--sq-muted);
	flex: 0 1 auto;
	font-size: 0.85em;
	font-weight: 800;
	margin-left: auto;
	text-align: right;
}

.espt-block-bd-size-quiz .bdsq-o.is-on .bdsq-os {
	color: var(--sq-accent-dark);
}

/* option layout: tiles */

.espt-block-bd-size-quiz.is-opt-style-tiles .bdsq-opt,
.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-opt {
	grid-template-columns: repeat(var(--opt-cols, 1), minmax(0, 1fr));
}

.espt-block-bd-size-quiz.is-opt-style-tiles .bdsq-o {
	flex-wrap: wrap;
}

.espt-block-bd-size-quiz.is-opt-style-tiles .bdsq-os {
	flex: 1 0 100%;
	margin-left: 0;
	text-align: inherit;
}

/* option layout: big icon cards */

.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-o {
	align-items: center;
	flex-direction: column;
	gap: 7px;
	padding: 16px 12px;
	text-align: center;
}

.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-oi {
	font-size: 1.9em;
}

.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-os {
	margin-left: 0;
	text-align: center;
}

.espt-block-bd-size-quiz.is-opt-style-cards.is-show-radio .bdsq-o input {
	position: absolute;
	right: 8px;
	top: 8px;
}

/* option layout: pills */

.espt-block-bd-size-quiz.is-opt-style-pills .bdsq-opt {
	display: flex;
	flex-wrap: wrap;
}

.espt-block-bd-size-quiz.is-opt-style-pills .bdsq-o {
	border-radius: 99px;
	flex: 0 1 auto;
	gap: 7px;
	padding: 9px 14px;
}

.espt-block-bd-size-quiz.is-opt-style-pills .bdsq-os {
	margin-left: 4px;
}

/* -------------------------------------------------------------- nav buttons */

.espt-block-bd-size-quiz .bdsq-nav {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.espt-block-bd-size-quiz .bdsq-nav button {
	border: 0;
	border-radius: var(--sq-btn-radius);
	cursor: pointer;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 14px;
	transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

/* Shrinkable (0 1 auto): a long "Back" label must not push the row past 320px. */
.espt-block-bd-size-quiz .bdsq-back {
	background: var(--sq-back-bg);
	color: var(--sq-body);
	flex: 0 1 auto;
	padding-inline: 18px;
}

.espt-block-bd-size-quiz .bdsq-back:hover {
	background: color-mix(in srgb, var(--sq-accent) 16%, var(--bd-line));
}

.espt-block-bd-size-quiz .bdsq-next {
	background: var(--sq-accent);
	box-shadow: 0 3px 0 var(--sq-accent-dark);
	color: #fff;
	flex: 1 1 auto;
}

.espt-block-bd-size-quiz .bdsq-next:hover:not([disabled]) {
	filter: brightness(0.95);
}

.espt-block-bd-size-quiz .bdsq-next:active:not([disabled]) {
	box-shadow: none;
	transform: translateY(3px);
}

.espt-block-bd-size-quiz .bdsq-next[disabled] {
	background: color-mix(in srgb, var(--bd-muted) 32%, var(--bd-line));
	box-shadow: 0 3px 0 color-mix(in srgb, var(--bd-muted) 45%, var(--bd-line));
	cursor: not-allowed;
	opacity: 0.9;
}

/* ---------------------------------------------------------------- result */

.espt-block-bd-size-quiz .bdsq-res {
	background: var(--sq-res-bg);
	border: 1.5px solid var(--sq-res-line);
	border-radius: 12px;
	padding: 18px 16px 16px;
}

/* The panel carries tabindex="-1" so the JS can move focus to the answer;
   only show a ring for keyboard users. */
.espt-block-bd-size-quiz .bdsq-res:focus {
	outline: none;
}

.espt-block-bd-size-quiz .bdsq-res:focus-visible {
	outline: 2px solid var(--sq-accent);
	outline-offset: 3px;
}

.espt-block-bd-size-quiz .bdsq-rlb {
	color: var(--sq-accent-dark);
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
	overflow-wrap: anywhere;
}

.espt-block-bd-size-quiz .bdsq-rimg {
	border-radius: 10px;
	display: block;
	height: auto;
	margin: 0 0 10px;
	max-width: 120px;
	width: 100%;
}

.espt-block-bd-size-quiz .bdsq-rname {
	color: var(--sq-size-color);
	display: block;
	font-size: var(--res-size, 28px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 6px;
	overflow-wrap: anywhere;
}

.espt-block-bd-size-quiz .bdsq-rbadge {
	background: var(--bd-accent);
	border-radius: 99px;
	color: var(--bd-accent-ink);
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	margin-bottom: 9px;
	padding: 3px 11px;
}

.espt-block-bd-size-quiz .bdsq-rnote {
	color: var(--sq-body);
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-size-quiz .bdsq-rnote:not(:empty) {
	margin-bottom: 12px;
}

.espt-block-bd-size-quiz .bdsq-cta {
	background: var(--sq-accent);
	border-radius: var(--sq-btn-radius);
	box-shadow: 0 3px 0 var(--sq-accent-dark);
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: 800;
	overflow-wrap: anywhere;
	padding: 12px 14px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.espt-block-bd-size-quiz .bdsq-cta:hover {
	color: #fff;
	filter: brightness(0.96);
}

.espt-block-bd-size-quiz .bdsq-cta:active {
	box-shadow: none;
	transform: translateY(3px);
}

.espt-block-bd-size-quiz .bdsq-again {
	background: none;
	border: 0;
	color: var(--sq-muted);
	cursor: pointer;
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 10px;
	padding: 6px;
	text-align: center;
	width: 100%;
}

.espt-block-bd-size-quiz .bdsq-again:hover {
	color: var(--sq-accent-dark);
}

.espt-block-bd-size-quiz .bdsq-nav button:focus-visible,
.espt-block-bd-size-quiz .bdsq-cta:focus-visible,
.espt-block-bd-size-quiz .bdsq-again:focus-visible {
	outline: 2px solid var(--sq-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- alignment */

.espt-block-bd-size-quiz.is-text-align-center .bdsq-head,
.espt-block-bd-size-quiz.is-text-align-center .bdsq-count,
.espt-block-bd-size-quiz.is-text-align-center .bdsq-q,
.espt-block-bd-size-quiz.is-text-align-center .bdsq-res {
	text-align: center;
}

.espt-block-bd-size-quiz.is-text-align-center .bdsq-rimg {
	margin-inline: auto;
}

.espt-block-bd-size-quiz.is-text-align-center.is-opt-style-pills .bdsq-opt {
	justify-content: center;
}

.espt-block-bd-size-quiz.is-text-align-right .bdsq-head,
.espt-block-bd-size-quiz.is-text-align-right .bdsq-count,
.espt-block-bd-size-quiz.is-text-align-right .bdsq-q,
.espt-block-bd-size-quiz.is-text-align-right .bdsq-res {
	text-align: right;
}

.espt-block-bd-size-quiz.is-text-align-right .bdsq-rimg {
	margin-inline: auto 0;
}

/* --------------------------------------------------------------- designs */

.espt-block-bd-size-quiz.is-design-soft .bdsq {
	background: var(--bd-soft);
	border-color: var(--bd-soft-line);
}

.espt-block-bd-size-quiz.is-design-soft .bdsq-o {
	background: var(--opt-bg, #fff);
}

.espt-block-bd-size-quiz.is-design-soft .bdsq-res {
	background: var(--res-bg, #fff);
}

.espt-block-bd-size-quiz.is-design-outline .bdsq {
	background: none;
	border-color: color-mix(in srgb, var(--sq-accent) 40%, var(--bd-line));
	border-width: 2px;
}

.espt-block-bd-size-quiz.is-design-outline .bdsq-o {
	background: var(--opt-bg, transparent);
}

.espt-block-bd-size-quiz.is-design-outline .bdsq-res {
	background: var(--res-bg, transparent);
	border-color: var(--res-border, var(--sq-accent));
	border-style: dashed;
}

.espt-block-bd-size-quiz.is-design-dark .bdsq {
	--sq-ink: var(--head-color, #f8fafc);
	--sq-body: var(--sub-color, rgba(248, 250, 252, 0.78));
	--sq-muted: var(--sub-color, rgba(248, 250, 252, 0.6));
	--sq-q: var(--q-color, #f8fafc);
	--sq-opt-bg: var(--opt-bg, rgba(255, 255, 255, 0.06));
	--sq-opt-line: var(--opt-border, rgba(255, 255, 255, 0.18));
	--sq-opt-on-bg: var(--opt-on-bg, rgba(255, 255, 255, 0.13));
	--sq-res-bg: var(--res-bg, rgba(255, 255, 255, 0.07));
	--sq-res-line: var(--res-border, rgba(255, 255, 255, 0.2));
	--sq-size-color: var(--size-color, #fff);
	--sq-back-bg: rgba(255, 255, 255, 0.12);
	background: var(--bd-deep);
	border-color: rgba(255, 255, 255, 0.16);
}

.espt-block-bd-size-quiz.is-design-dark .bdsq-bar i {
	background: rgba(255, 255, 255, 0.18);
}

.espt-block-bd-size-quiz.is-design-dark .bdsq-bar i.on {
	background: var(--sq-accent);
}

.espt-block-bd-size-quiz.is-design-dark .bdsq-rlb {
	color: var(--bd-accent);
}

.espt-block-bd-size-quiz.is-design-dark .bdsq-again:hover {
	color: #fff;
}

.espt-block-bd-size-quiz.is-design-dark .bdsq-next[disabled] {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 3px 0 rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.65);
}

.espt-block-bd-size-quiz.is-design-gradient .bdsq {
	background: linear-gradient(165deg, color-mix(in srgb, var(--sq-accent) 12%, var(--sq-card-bg)), var(--sq-card-bg));
	overflow: hidden;
}

.espt-block-bd-size-quiz.is-design-gradient .bdsq-head {
	background: linear-gradient(135deg, var(--sq-accent), var(--sq-accent-dark));
	color: #fff;
	margin: calc(var(--sq-pad) * -1) calc(var(--sq-pad) * -1) 16px;
	padding: var(--sq-pad);
}

.espt-block-bd-size-quiz.is-design-gradient .bdsq-h {
	color: #fff;
}

.espt-block-bd-size-quiz.is-design-gradient .bdsq-eb,
.espt-block-bd-size-quiz.is-design-gradient .bdsq-sb {
	color: rgba(255, 255, 255, 0.85);
}

.espt-block-bd-size-quiz.is-design-plain .bdsq {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* ------------------------------------------------------------- tablet up */

@media (min-width: 768px) {
	.espt-block-bd-size-quiz .bdsq-head {
		margin-bottom: 18px;
	}

	.espt-block-bd-size-quiz .bdsq-sb {
		font-size: 14px;
	}

	.espt-block-bd-size-quiz .bdsq-o {
		padding: 13px 15px;
	}

	.espt-block-bd-size-quiz .bdsq-res {
		padding: 22px 20px 18px;
	}

	.espt-block-bd-size-quiz .bdsq-rimg {
		max-width: 150px;
	}

	.espt-block-bd-size-quiz .bdsq-nav {
		margin-top: 18px;
	}
}

/* ------------------------------------------------------------ desktop up */

@media (min-width: 1024px) {
	.espt-block-bd-size-quiz .bdsq-o:hover {
		transform: translateY(-1px);
	}

	.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-o:hover {
		transform: translateY(-3px);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-size-quiz .bdsq-step.on,
	.espt-block-bd-size-quiz.is-anim-fade .bdsq-step.on,
	.espt-block-bd-size-quiz.is-anim-slide .bdsq-step.on {
		animation: none;
	}

	.espt-block-bd-size-quiz .bdsq-o,
	.espt-block-bd-size-quiz .bdsq-nav button,
	.espt-block-bd-size-quiz .bdsq-cta,
	.espt-block-bd-size-quiz .bdsq-bar i {
		transition: none;
	}

	.espt-block-bd-size-quiz .bdsq-o:hover,
	.espt-block-bd-size-quiz.is-opt-style-cards .bdsq-o:hover {
		transform: none;
	}
}

/* ------------------------------------------------ hidden wins (last word)

   The JS toggles the `hidden` property on .bdsq-nav, .bdsq-back, .bdsq-count,
   .bdsq-rimg and .bdsq-rbadge — all of which this stylesheet gives an explicit
   `display`. Keeping the override last means source order backs up the
   specificity, so no rule added above can ever un-hide them. */

.espt-block-bd-size-quiz .bdsq [hidden] {
	display: none;
}