/**
 * BrightSide quote journey — mobile-first design system.
 *
 * Brand values arrive via CSS custom properties injected from settings
 * (see Assets::brandCss), so colour changes need no rebuild.
 */

.bsq-app {
	/* Literal defaults. A custom property must NEVER reference itself
	   (--x: var(--x, …) is a spec-defined cycle → the variable becomes
	   invalid and every colour silently falls back to the theme, which
	   is exactly how the app once rendered white-on-yellow). The admin
	   branding wins because Assets::brandCss targets .bsq-app too and
	   prints after this file. */
	--bsq-navy: #102A43;
	--bsq-yellow: #F7C948;
	--bsq-white: #FFFFFF;
	--bsq-grey: #3E4C59;
	--bsq-bg: #F5F7FA;
	--bsq-border: #D9E2EC;
	--bsq-pale-yellow: #FFF8E1;
	--bsq-error: #B00020;
	--bsq-success: #1B7F4B;

	font-family: var(--bsq-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	color: var(--bsq-navy);
	line-height: 1.55;
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 96px; /* Clearance for sticky mobile actions + browser chrome. */
	-webkit-font-smoothing: antialiased;
}

/* Desktop: use the full content width the page gives us. */
@media (min-width: 960px) {
	.bsq-app { max-width: 1100px; }
	.bsq-app { padding-bottom: 48px; }
}

/* The .bsq-app becomes a size container; the demotion rules live at the
   END of this stylesheet so they win the cascade over the viewport
   media-query enhancements. */
@supports (container-type: inline-size) {
	.bsq-app { container-type: inline-size; container-name: bsq; }
}

/* v4.3: the wrapper carries WordPress's `alignwide` so constrained
   themes grant the journey their WIDE column instead of the narrow
   prose column (a 672px prose cap used to force the mobile layout onto
   desktop pages). Inert on themes without constrained layouts and in
   standalone mode; .bsq-app's own max-width still bounds line lengths. */
.bsq-appwrap { width: 100%; }

.bsq-app *,
.bsq-app *::before,
.bsq-app *::after {
	box-sizing: inherit;
}

.bsq-app img,
.bsq-app svg {
	max-width: 100%;
	height: auto;
}

/* ---------- Typography ---------- */

.bsq-app h1,
.bsq-app h2,
.bsq-app h3 {
	font-family: var(--bsq-font-heading, inherit);
	color: var(--bsq-navy);
	line-height: 1.2;
	margin: 0 0 12px;
	font-weight: 800;
}

.bsq-app h1 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
.bsq-app h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
.bsq-app h3 { font-size: 1.05rem; }
.bsq-app p  { margin: 0 0 14px; color: var(--bsq-grey); }

.bsq-highlight { color: var(--bsq-yellow); }

.bsq-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Cards / layout ---------- */

.bsq-card {
	background: var(--bsq-white);
	border: 1px solid var(--bsq-border);
	border-radius: var(--bsq-radius, 12px);
	box-shadow: 0 2px 10px rgba(16, 42, 67, 0.06);
	padding: 20px;
	margin: 0 0 16px;
}

@media (min-width: 600px) {
	.bsq-card { padding: 28px; }
}

.bsq-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	padding: 40px 16px;
	color: var(--bsq-grey);
}

.bsq-spinner {
	width: 22px;
	height: 22px;
	border: 3px solid var(--bsq-border);
	border-top-color: var(--bsq-yellow);
	border-radius: 50%;
	animation: bsq-spin 0.9s linear infinite;
	flex: none;
}

@keyframes bsq-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.bsq-app *,
	.bsq-app *::before,
	.bsq-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Buttons ---------- */

.bsq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px; /* ≥44px touch target */
	padding: 12px 24px;
	border-radius: var(--bsq-btn-radius, 12px);
	border: 2px solid transparent;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
	width: 100%;
}

@media (min-width: 600px) {
	.bsq-btn { width: auto; min-width: 220px; }
}

.bsq-btn--primary {
	background: var(--bsq-yellow);
	color: var(--bsq-navy);
}

.bsq-btn--primary:hover:not(:disabled) {
	box-shadow: 0 4px 14px rgba(247, 201, 72, 0.5);
	transform: translateY(-1px);
}

.bsq-btn--secondary {
	background: var(--bsq-navy);
	color: var(--bsq-white);
}

.bsq-btn--ghost {
	background: transparent;
	color: var(--bsq-navy);
	border-color: var(--bsq-border);
	min-width: 0;
}

.bsq-btn--link {
	background: none;
	border: none;
	color: var(--bsq-grey);
	text-decoration: underline;
	font-weight: 600;
	min-height: 44px;
	width: auto;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.95rem;
}

.bsq-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Visible focus for every interactive element (WCAG 2.4.7 / 2.4.13). */
.bsq-app a:focus-visible,
.bsq-app button:focus-visible,
.bsq-app input:focus-visible,
.bsq-app select:focus-visible,
.bsq-app textarea:focus-visible,
.bsq-app [tabindex]:focus-visible {
	outline: 3px solid var(--bsq-navy);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Sign-in header button ---------- */

/* Compact inline variant of the app wrapper for headers/menus. */
.bsq-app.bsq-signin-button {
	display: inline-flex;
	/* .bsq-app is a container-query container (inline-size), which forbids
	   content-based sizing — as a flex item in a theme header that computes
	   to width 0 and the pill collapses. The button widget doesn't use
	   container queries, so opt it out and pin its flex sizing. */
	container-type: normal !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

/* Hardened against theme navigation styles: this button renders inside
   arbitrary third-party headers, so sizing must not be overridable. */
.bsq-app.bsq-signin-button .bsq-btn,
.bsq-app.bsq-signin-button .bsq-btn--link {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	gap: 6px;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	height: auto !important;
	min-height: 0;
	padding: 0.5em 1.1em !important;
	font-size: inherit;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	overflow: visible;
}

.bsq-signin-button svg { flex: none; }

/* Signed-out dropdown */
.bsq-signin { position: relative; }

.bsq-signin__chevron {
	transition: transform 0.15s ease;
	margin-left: 2px;
}

.bsq-signin.is-open .bsq-signin__chevron { transform: rotate(180deg); }

.bsq-signin__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: min(320px, 92vw);
	background: var(--bsq-white, #fff);
	border: 1px solid var(--bsq-border, #D9E2EC);
	border-radius: var(--bsq-radius, 12px);
	box-shadow: 0 12px 32px rgba(16, 42, 67, 0.2);
	padding: 18px;
	z-index: 99999;
	text-align: left;
}

.bsq-signin__title {
	margin: 0 0 6px;
	font-size: 1rem;
	color: var(--bsq-navy);
}

.bsq-signin__form .bsq-input { margin-bottom: 10px; }
.bsq-signin__form .bsq-btn { width: 100%; }

.bsq-signin__msg { font-size: 0.9rem; }
.bsq-signin__ok { color: var(--bsq-success, #1B7F4B); font-weight: 600; }
.bsq-signin__error { color: var(--bsq-error, #B00020); font-weight: 600; }

.bsq-signin__links { margin: 10px 0 0; }

/* ---------- Progress bar ---------- */

.bsq-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 20px 0 24px;
	padding: 0;
	list-style: none;
	position: relative;
}

.bsq-progress__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	min-width: 0;
}

.bsq-progress__step::before {
	content: "";
	position: absolute;
	top: 17px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: var(--bsq-border);
	z-index: 0;
}

.bsq-progress__step:first-child::before { display: none; }

.bsq-progress__step.is-done::before,
.bsq-progress__step.is-current::before { background: var(--bsq-navy); }

.bsq-progress__dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	background: var(--bsq-white);
	border: 2px solid var(--bsq-border);
	color: var(--bsq-grey);
	position: relative;
	z-index: 1;
}

.bsq-progress__step.is-done .bsq-progress__dot {
	background: var(--bsq-navy);
	border-color: var(--bsq-navy);
	color: var(--bsq-white);
}

.bsq-progress__step.is-current .bsq-progress__dot {
	background: var(--bsq-pale-yellow);
	border-color: var(--bsq-yellow);
	color: var(--bsq-navy);
	box-shadow: 0 0 0 4px rgba(247, 201, 72, 0.3);
}

.bsq-progress__label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--bsq-grey);
	text-align: center;
}

.bsq-progress__step.is-current .bsq-progress__label,
.bsq-progress__step.is-done .bsq-progress__label { color: var(--bsq-navy); }

/* ---------- Landing ---------- */

.bsq-landing__hero { text-align: center; padding: 8px 4px 4px; }

.bsq-landing__hero p {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

/* Desktop: benefits and the quote form sit side by side. */
@media (min-width: 900px) {
	.bsq-landing__hero {
		text-align: left;
		padding: 16px 4px 12px;
	}
	.bsq-landing__hero p { margin-left: 0; }
	.bsq-landing__grid {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 20px;
		align-items: start;
	}
	.bsq-landing__grid > .bsq-card { margin-bottom: 0; }
}

.bsq-landing__benefits {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.bsq-landing__benefits li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 7px 0;
	color: var(--bsq-grey);
	font-size: 0.95rem;
	text-align: left;
}

.bsq-check {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bsq-pale-yellow);
	color: var(--bsq-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.bsq-check svg { width: 12px; height: 12px; }

/* ---------- Forms ---------- */

.bsq-field { margin-bottom: 16px; }

/* Desktop: pair related fields (first/last name, phone/email) per row. */
@media (min-width: 640px) {
	.bsq-field-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
	}
}

.bsq-field label,
.bsq-legend {
	display: block;
	font-weight: 700;
	color: var(--bsq-navy);
	margin-bottom: 6px;
	font-size: 0.98rem;
}

.bsq-hint {
	font-weight: 400;
	color: var(--bsq-grey);
	font-size: 0.85rem;
}

.bsq-input,
.bsq-select,
.bsq-textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--bsq-navy);
	background: var(--bsq-white);
	border: 1.5px solid var(--bsq-border);
	border-radius: calc(var(--bsq-radius, 12px) * 0.75);
	appearance: none;
}

.bsq-textarea { min-height: 88px; resize: vertical; }

.bsq-input:focus,
.bsq-select:focus,
.bsq-textarea:focus {
	border-color: var(--bsq-navy);
	outline: 3px solid rgba(16, 42, 67, 0.25);
	outline-offset: 0;
}

.bsq-input[aria-invalid="true"],
.bsq-select[aria-invalid="true"] { border-color: var(--bsq-error); }

.bsq-field__error {
	color: var(--bsq-error);
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 5px;
}

.bsq-error-summary {
	border: 2px solid var(--bsq-error);
	background: #FDECEF;
	border-radius: var(--bsq-radius, 12px);
	padding: 14px 16px;
	margin-bottom: 16px;
	color: var(--bsq-error);
}

.bsq-error-summary h3 { color: var(--bsq-error); margin-bottom: 6px; font-size: 1rem; }
.bsq-error-summary ul { margin: 0; padding-left: 18px; }
.bsq-error-summary a { color: inherit; font-weight: 700; }

.bsq-notice {
	border-radius: var(--bsq-radius, 12px);
	padding: 14px 16px;
	margin-bottom: 16px;
	background: var(--bsq-pale-yellow);
	border: 1px solid var(--bsq-yellow);
	color: var(--bsq-navy);
}

.bsq-notice--success {
	background: #E7F6EE;
	border-color: var(--bsq-success);
	color: var(--bsq-success);
}

/*
 * The warning tone was being asked for by name in the staff portal long
 * before it existed, so those notices quietly rendered as ordinary ones.
 * Amber: something needs attention, but nothing has gone wrong.
 */
.bsq-notice--warn {
	background: #FFF4E1;
	border-color: #E8A33D;
	color: #8A5A12;
}

/*
 * A card is always white, so links inside one must not inherit the link
 * colour of whatever section surrounds it. A dark band sets white, which
 * rendered the contact details invisible on the contact card.
 */
.bsq-app .bsq-card a:not(.bsq-btn) {
	color: var(--bsq-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* v4.30.1: the contact form. A form this short should not stretch the
   full width of a wide page — it reads as a database screen. */
.bsq-contact {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.bsq-contact .bsq-card > h2 { margin-top: 0; }

.bsq-contact__lede {
	color: var(--bsq-grey);
	margin: 0 0 4px;
}

.bsq-contact__aside {
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bsq-border);
	color: var(--bsq-grey);
	font-size: 0.95rem;
}

/* Full-width, comfortable tap target — it is the only action on the page. */
.bsq-contact .bsq-stage-actions .bsq-btn {
	width: 100%;
	min-height: 52px;
}

@media (min-width: 640px) {
	.bsq-contact .bsq-stage-actions .bsq-btn { width: auto; min-width: 220px; }
}

/* Honeypot: hidden from humans, present for bots. */
.bsq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Selection card grids (radio-backed) ---------- */

.bsq-cardgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	border: 0;
	padding: 0;
}

@media (max-width: 359px) {
	.bsq-cardgrid { grid-template-columns: 1fr; }
}

/* Tablet/desktop: spread the selection cards across the row. */
@media (min-width: 700px) {
	.bsq-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.bsq-cardgrid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.bsq-cardgrid__option { position: relative; }

.bsq-cardgrid__option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.bsq-cardgrid__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	min-height: 128px;
	padding: 16px 10px;
	background: var(--bsq-white);
	border: 2px solid var(--bsq-border);
	border-radius: var(--bsq-radius, 12px);
	transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
	pointer-events: none; /* clicks land on the input overlay */
	height: 100%;
}

.bsq-cardgrid__option input:hover + .bsq-cardgrid__card {
	border-color: var(--bsq-grey);
}

.bsq-cardgrid__option input:checked + .bsq-cardgrid__card {
	border-color: var(--bsq-navy);
	background: var(--bsq-pale-yellow);
	box-shadow: 0 3px 12px rgba(16, 42, 67, 0.12);
}

.bsq-cardgrid__option input:focus-visible + .bsq-cardgrid__card {
	outline: 3px solid var(--bsq-navy);
	outline-offset: 2px;
}

.bsq-cardgrid__icon { color: var(--bsq-navy); }
.bsq-cardgrid__icon svg { width: 56px; height: 44px; }

.bsq-cardgrid__label {
	font-weight: 700;
	color: var(--bsq-navy);
	font-size: 0.95rem;
}

.bsq-cardgrid__desc {
	font-size: 0.8rem;
	color: var(--bsq-grey);
}

/* Selected tick badge: state is never colour-only. */
.bsq-cardgrid__tick {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bsq-navy);
	color: var(--bsq-white);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}

.bsq-cardgrid__tick svg { width: 12px; height: 12px; }

.bsq-cardgrid__option input:checked ~ .bsq-cardgrid__tick { display: inline-flex; }

/* Yes/no pill group */
.bsq-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	border: 0;
	margin: 0;
	padding: 0;
}

.bsq-pills .bsq-cardgrid__option { flex: 1; min-width: 120px; }
.bsq-pills .bsq-cardgrid__card { min-height: 52px; padding: 12px; flex-direction: row; }

/* ---------- Quote option cards ---------- */

/* Desktop: plans sit side by side for comparison. */
@media (min-width: 720px) {
	.bsq-quotegrid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 18px;
		align-items: stretch;
		margin-top: 14px;
	}
	.bsq-quotegrid .bsq-quotecard { margin-bottom: 0; height: 100%; }
	.bsq-quotegrid .bsq-quotecard__card {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.bsq-quotegrid .bsq-quotecard__breakdown { margin-top: auto; padding-top: 12px; }
}

.bsq-quotecard {
	position: relative;
	margin-bottom: 14px;
}

.bsq-quotecard input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.bsq-quotecard__card {
	border: 2px solid var(--bsq-border);
	border-radius: var(--bsq-radius, 12px);
	background: var(--bsq-white);
	padding: 20px;
	text-align: center;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.bsq-quotecard input:checked + .bsq-quotecard__card {
	border-color: var(--bsq-navy);
	background: var(--bsq-pale-yellow);
	box-shadow: 0 4px 16px rgba(16, 42, 67, 0.14);
}

.bsq-quotecard input:focus-visible + .bsq-quotecard__card {
	outline: 3px solid var(--bsq-navy);
	outline-offset: 2px;
}

.bsq-quotecard__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bsq-yellow);
	color: var(--bsq-navy);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	z-index: 2;
	white-space: nowrap;
}

.bsq-quotecard__state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	color: var(--bsq-grey);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.bsq-quotecard input:checked + .bsq-quotecard__card .bsq-quotecard__state { color: var(--bsq-navy); }

.bsq-quotecard__price {
	font-size: 2rem;
	font-weight: 800;
	color: var(--bsq-navy);
	line-height: 1.1;
}

.bsq-quotecard__freq {
	border-top: 1px solid var(--bsq-border);
	margin-top: 12px;
	padding-top: 10px;
	color: var(--bsq-grey);
	font-size: 1rem;
}

.bsq-quotecard__first {
	font-size: 0.88rem;
	color: var(--bsq-grey);
	margin-top: 6px;
}

.bsq-quotecard__breakdown {
	margin-top: 12px;
	text-align: left;
	font-size: 0.86rem;
}

.bsq-quotecard__breakdown summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--bsq-navy);
	min-height: 44px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	width: max-content;
}

.bsq-quotecard__breakdown table { width: 100%; border-collapse: collapse; }
.bsq-quotecard__breakdown td { padding: 4px 0; color: var(--bsq-grey); }
.bsq-quotecard__breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Inclusions list ---------- */

.bsq-inclusions {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: grid;
	gap: 6px;
}

@media (min-width: 520px) {
	.bsq-inclusions { grid-template-columns: 1fr 1fr; }
}

.bsq-inclusions li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--bsq-grey);
	font-size: 0.92rem;
}

/* ---------- Payment stage ---------- */

/* Desktop: order summary beside the secure card form. */
@media (min-width: 880px) {
	.bsq-paywrap {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 28px;
		align-items: start;
	}
	.bsq-paywrap .bsq-paysummary { margin-bottom: 0; }
}

.bsq-paysummary {
	border: 1px solid var(--bsq-border);
	border-radius: var(--bsq-radius, 12px);
	overflow: hidden;
	margin-bottom: 18px;
}

.bsq-paysummary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	font-size: 0.95rem;
	color: var(--bsq-grey);
	border-bottom: 1px solid var(--bsq-border);
}

.bsq-paysummary__row:last-child { border-bottom: 0; }
.bsq-paysummary__row strong { color: var(--bsq-navy); }

.bsq-paysummary__row--due {
	background: var(--bsq-pale-yellow);
	font-weight: 800;
	color: var(--bsq-navy);
	font-size: 1.05rem;
}

#bsq-payment-element { margin: 16px 0; }

.bsq-secure-note {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--bsq-grey);
	font-size: 0.85rem;
	margin-top: 10px;
}

/* ---------- Stage footer / navigation ---------- */

.bsq-stage-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

@media (min-width: 600px) {
	.bsq-stage-actions {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.bsq-stage-actions .bsq-btn--primary { order: 2; }
}

/* ---------- Completion ---------- */

.bsq-complete { text-align: center; }

.bsq-complete__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--bsq-pale-yellow);
	color: var(--bsq-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.bsq-complete__icon svg { width: 30px; height: 30px; }

.bsq-complete dl {
	text-align: left;
	margin: 18px 0;
	border: 1px solid var(--bsq-border);
	border-radius: var(--bsq-radius, 12px);
	padding: 6px 16px;
}

.bsq-complete dl > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--bsq-border);
}

.bsq-complete dl > div:last-child { border-bottom: 0; }
.bsq-complete dt { color: var(--bsq-grey); font-size: 0.92rem; }
.bsq-complete dd { margin: 0; font-weight: 700; color: var(--bsq-navy); text-align: right; }

/* ---------- Standalone page chrome ---------- */

/* The standalone chrome lives outside .bsq-app, so it needs its own
   border-box reset (no theme CSS to rely on). */
.bsq-standalone,
.bsq-standalone *,
.bsq-standalone *::before,
.bsq-standalone *::after {
	box-sizing: border-box;
}

.bsq-standalone-page {
	margin: 0;
	background: var(--bsq-bg, #F5F7FA);
}

.bsq-standalone {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.bsq-standalone__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px clamp(16px, 4vw, 40px);
	background: var(--bsq-white, #fff);
	border-bottom: 1px solid #D9E2EC;
}

.bsq-standalone__logo img { max-height: 52px; width: auto; display: block; }
.bsq-standalone__signin { width: auto; min-width: 0; }

.bsq-standalone__main {
	flex: 1;
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 16px clamp(12px, 4vw, 24px) 40px;
}

.bsq-standalone__footer {
	text-align: center;
	padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	background: var(--bsq-navy, #102A43);
	color: #fff;
	font-size: 0.9rem;
}

.bsq-standalone__footer a { color: var(--bsq-yellow, #F7C948); }
.bsq-standalone__footer p { margin: 0 0 6px; color: inherit; }

/* Mobile safe-area support for sticky content. */
@supports (padding: env(safe-area-inset-bottom)) {
	.bsq-app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Container-aware demotion (keep last) ----------
   The viewport media queries above turn split layouts ON; these
   container queries turn them back OFF whenever the app's ACTUAL column
   (theme content area, sidebar, widget) is too narrow. This is what
   makes the journey adapt to full-width pages, boxed themes and widget
   areas alike. Browsers without container-query support simply keep the
   viewport-based behaviour. */
@supports (container-type: inline-size) {
	@container bsq (max-width: 680px) {
		.bsq-landing__grid,
		.bsq-paywrap,
		.bsq-quotegrid { display: block; }
		.bsq-landing__hero { text-align: center; }
		.bsq-landing__hero p { margin-left: auto; }
	}

	@container bsq (max-width: 560px) {
		.bsq-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.bsq-field-row { display: block; }
		/* Padded theme wrappers eat phone width; slim our own chrome. */
		.bsq-card { padding: 16px; }
	}

	@container bsq (max-width: 359px) {
		.bsq-cardgrid { grid-template-columns: 1fr; }
	}
}

/* ---------- Phone full-bleed (v4.3.1) ----------
   On phones the journey should read like a native sheet: it escapes
   tinted, padded page wrappers (theme groups/columns built for desktop
   framing) and runs edge to edge. The wrapper's own background and
   padding are stripped so no coloured frame remains; browsers without
   :has() simply keep the page's framing. */
@media (max-width: 640px) {
	/* WP constrained layouts pin alignwide children with
	   margin auto !important — out-specific it (0,3,0) so the
	   breakout genuinely reaches the screen edges. */
	div.bsq-appwrap.alignwide,
	.bsq-appwrap {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	/* One 12px gutter for headings and text; cards cancel it with
	   negative margins and run edge to edge, their own 12px side
	   padding landing content back on the same 12px line. */
	.bsq-mode-embedded { padding-left: 12px; padding-right: 12px; }
	.bsq-mode-embedded .bsq-card {
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px;
		padding-right: 12px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	.bsq-mode-embedded .bsq-landing__hero { padding-left: 0; padding-right: 0; }
	:where(.wp-block-group, .wp-block-column, .wp-block-cover, .wp-block-post-content):has(.bsq-appwrap) {
		background: transparent !important;
	}
	:where(.wp-block-group, .wp-block-column):has(> .bsq-appwrap) {
		padding: 0 !important;
	}
}

/* Signed-in account dropdown options */
.bsq-signin__opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bsq-signin__opts .bsq-btn { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
.bsq-signin__opts form { margin: 0; }

/* Cleaning-scope toggle (front & back vs front only) */
.bsq-scope-toggle { display: flex; gap: 10px; max-width: 420px; }
.bsq-scope-toggle .bsq-btn { flex: 1; min-width: 0; width: auto; }
.bsq-check-label { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* Hostile-theme hardening: inputs, selects and their dropdown options are
   always dark-on-white regardless of the surrounding section's colours. */
.bsq-app .bsq-input,
.bsq-app .bsq-textarea,
.bsq-app .bsq-select,
.bsq-app select {
	background: var(--bsq-white, #FFFFFF);
	color: var(--bsq-navy, #102A43);
}
.bsq-app option { background: #FFFFFF; color: #102A43; }
.bsq-app .bsq-card { color: var(--bsq-grey, #3E4C59); }
.bsq-app .bsq-card h1, .bsq-app .bsq-card h2, .bsq-app .bsq-card h3,
.bsq-app .bsq-card label, .bsq-app .bsq-card legend { color: var(--bsq-navy, #102A43); }

/* Account-dropdown buttons: explicit colours for EVERY state, hardened
   against theme link-hover rules (which made the label vanish into the
   button background). Hover/focus inverts the pair. */
.bsq-app .bsq-signin__panel .bsq-btn--primary,
.bsq-app .bsq-signin__panel .bsq-btn--primary:visited {
	background: var(--bsq-yellow, #F7C948) !important;
	color: var(--bsq-navy, #102A43) !important;
	text-decoration: none !important;
}
.bsq-app .bsq-signin__panel .bsq-btn--primary:hover,
.bsq-app .bsq-signin__panel .bsq-btn--primary:focus-visible {
	background: var(--bsq-navy, #102A43) !important;
	color: var(--bsq-yellow, #F7C948) !important;
}
.bsq-app .bsq-signin__panel .bsq-btn--secondary,
.bsq-app .bsq-signin__panel .bsq-btn--secondary:visited {
	background: var(--bsq-navy, #102A43) !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}
.bsq-app .bsq-signin__panel .bsq-btn--secondary:hover,
.bsq-app .bsq-signin__panel .bsq-btn--secondary:focus-visible {
	background: var(--bsq-yellow, #F7C948) !important;
	color: var(--bsq-navy, #102A43) !important;
}

/* ---------- v4.19.2: management preview banner ---------- */

.bsq-previewbar {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: 10px;
	background: #FFF4D6;
	border: 1px solid #F2DEA0;
	color: #7A4D00;
	font-size: 0.9rem;
	line-height: 1.45;
	box-shadow: 0 4px 14px rgba(122, 77, 0, 0.08);
}

.bsq-previewbar strong { color: #5C3A00; }

@media (max-width: 640px) {
	.bsq-previewbar {
		border-radius: 0;
		margin-left: -14px;
		margin-right: -14px;
	}
}

/* v5.23.1: the discount box, collapsed until asked for.
   Styled as a quiet line rather than a card: somebody with a code will
   open it, and somebody without should not be nudged into hunting for
   one before they will commit. */
.bsq-codebox {
	border: 1px solid var(--bsq-border, #D9E2EC);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 16px 0;
	background: #fff;
}
.bsq-codebox > summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
}
.bsq-codebox > summary::-webkit-details-marker { display: none; }
.bsq-codebox > summary::before {
	content: "+";
	font-weight: 700;
	line-height: 1;
}
.bsq-codebox[open] > summary::before { content: "\2212"; }
.bsq-codebox > summary:focus-visible {
	outline: 3px solid var(--bsq-focus, #1B7F4B);
	outline-offset: 3px;
}