/* Bluberd Advertiser Widget v7 — public mobile-first responsive (v0.6.5.0) */

.bba9 {
	--bba9-brand: #0ea5e9;
	--bba9-brand-dark: #0284c7;
	--bba9-brand-soft: rgba(var(--bba9-brand-rgb), 0.08);
	--bba9-brand-line: rgba(var(--bba9-brand-rgb), 0.25);
	--bba9-text: #1e293b;
	--bba9-muted: #64748b;
	--bba9-border: #e5e7eb;
	--bba9-bg-soft: #f8fafc;
	--bba9-success: #10b981;
	--bba9-danger: #dc2626;
	--bba9-radius: 12px;
	--bba9-radius-sm: 8px;
	--bba9-tap: 48px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	color: var(--bba9-text);
	max-width: 1140px;
	margin: 0 auto;
	padding: 16px;
	line-height: 1.45;
	box-sizing: border-box;
}
.bba9 *, .bba9 *::before, .bba9 *::after { box-sizing: border-box; }
.bba9 button { font-family: inherit; }

/* ── Promo header ─────────────────────────────────────── */
.bba9-promo { text-align: center; margin-bottom: 18px; padding: 6px 0 12px; }
.bba9-promo-headline {
	margin: 0 0 4px; font-size: 22px; font-weight: 800;
	letter-spacing: -0.01em; color: var(--bba9-text);
}
.bba9-promo-subline { margin: 0; color: var(--bba9-muted); font-size: 13px; }



/* ── Grid ─────────────────────────────────────────────── */
.bba9-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding-bottom: 80px; /* mobile tail buffer */
}
.bba9-stickyzone { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bba9-receipt-top-zone { display: contents; }
.bba9-receipt-top, .bba9-controls, .bba9-receipt-bottom { min-width: 0; }

/* v0.6.5.6: hidden by default on mobile; shown as continuous brand panel on desktop */
.bba9-rightcol-bg { display: none; }

@media (min-width: 1141px) {
	.bba9-grid {
		position: relative;
		grid-template-columns: 1.2fr 1fr;
		grid-template-areas:
			"controls topzone"
			"controls bottom";
		grid-template-rows: 1fr auto;
		column-gap: 24px;
		row-gap: 0;
		align-items: stretch;
		padding-bottom: 0;
	}
	/* v0.6.5.6: ONE unified brand surface for the entire right column.
	 * Spans rows 1+2 of column 2 — natural grid sizing makes it shrink as the
	 * left column (controls) gets shorter, giving the visible "shrink while scrolling" feel. */
	.bba9-rightcol-bg {
		display: block;
		grid-row: 1 / span 2;
		grid-column: 2;
		background: var(--bba9-brand);
		border-radius: 14px;
		z-index: 0;
		box-shadow: 0 8px 24px rgba(var(--bba9-brand-rgb), 0.18);
	}
	.bba9-stickyzone     { display: contents; }
	.bba9-receipt-top-zone {
		display: flex; flex-direction: column;
		grid-area: topzone;
		min-height: 0;
		padding: 16px;
		position: relative;
		z-index: 1;
		/* No own background — rightcol-bg paints the whole right column */
	}
	.bba9-controls       { grid-area: controls; position: relative; z-index: 1; }
	.bba9-receipt-bottom {
		grid-area: bottom; align-self: end;
		padding: 16px;
		position: sticky; bottom: 16px;
		z-index: 1;
	}
	.bba9-receipt-top    { position: sticky; top: 16px; }

	/* v0.6.10.2: dead-code imp-banner block removed (was leftover sky-blue from V8 clone). */
	/* Lines breakdown drop-up gets a clean white surface inside the brand panel */
	.bba9-receipt-bottom.expanded .bba9-lines {
		background: rgba(255,255,255,0.96);
		box-shadow: 0 2px 6px rgba(0,0,0,0.08);
		/* v0.6.5.15: hard-stop — clamp height by viewport so the expanded panel cannot
		 * overlap the impression banner sticky-top when the user scrolls up. Reserves
		 * ~320px for imp-banner + price/CTA + safety margin. Internal overflow if needed. */
		max-height: min(280px, calc(100dvh - 320px));
		overflow-y: auto;
	}

	/* v0.6.5.6: dead-center logo in the right column */
	.bba9-rightcol-logo {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px 16px;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}
	.bba9-rightcol-logo img {
		max-width: 70%;
		max-height: 100%;
		object-fit: contain;
		filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
	}
}

/* ── Section card (controls column) ───────────────────── */
/* v0.6.5.10: parent config region — brand-cyan wrapper around MARKET + configure subsections.
 * Now wraps BOTH market region (direct child) and the config-inner (which holds dynamically
 * rendered sub-sections from populateConfig). Single continuous cyan surface from the TOP
 * of the left column to the bottom — matches the right column's rightcol-bg cyan. */
.bba9-config-region {
	background: var(--bba9-brand);
	border-radius: var(--bba9-radius);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* v0.6.5.12: margin-bottom removed — was making the left column ~12px shorter than the right. */
}
.bba9-config-region > .bba9-section { margin-bottom: 0; }
.bba9-config-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bba9-config-inner > .bba9-section { margin-bottom: 0; }
.bba9-config-inner:empty { display: none; }

.bba9-section {
	background: #fff;
	border: 1px solid var(--bba9-border);
	border-left: 3px solid var(--bba9-brand);
	border-radius: var(--bba9-radius);
	padding: 18px;
	margin-bottom: 12px;
}
.bba9-section h3 {
	margin: 0 0 8px;
	font-size: 13px; font-weight: 700;
	color: var(--bba9-text);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.bba9-section .bba9-help { margin: 0 0 12px; font-size: 12px; color: var(--bba9-muted); line-height: 1.45; }
.bba9-page { display: none; }
.bba9-page-active { display: block; }

/* ── Market dropdown ──────────────────────────────────── */
.bba9 .bba9-market-select {
	width: 100%; padding: 14px 38px 14px 14px;
	border: 1px solid var(--bba9-brand);
	border-radius: var(--bba9-radius-sm); font-size: 16px;
	background-color: var(--bba9-brand);
	color: #fff;
	font-weight: 600;
	min-height: var(--bba9-tap);
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%23fff' d='M7 9 0 0h14z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}
.bba9 .bba9-market-select:hover {
	background-color: #fff;
	color: var(--bba9-brand);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='currentColor' d='M7 9 0 0h14z'/></svg>");
}
.bba9 .bba9-market-select option { color: var(--bba9-text); background: #fff; }
.bba9 .bba9-market-select option:disabled { color: #94a3b8; }

/* ── Stepper (used for slides, slot length, total cycle, per-slide time) ── */
.bba9-stepper {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	border: 1px solid var(--bba9-brand);
	border-radius: var(--bba9-radius-sm); overflow: hidden;
	max-width: 360px; margin: 0 auto;
}
/* v0.6.5.13: brand-bg + white-text for all stepper segments; hover inverts. */
.bba9-stepper button {
	background: var(--bba9-brand); border: none;
	border-right: 1px solid rgba(255,255,255,0.30);
	height: 56px; font-size: 26px; font-weight: 700;
	cursor: pointer; color: #fff;
	transition: background 0.12s, color 0.12s;
}
.bba9-stepper button:last-child { border-right: none; }
.bba9-stepper button:hover:not(:disabled) { background: #fff; color: var(--bba9-brand); }
/* v0.6.5.16: polished disabled state — faded brand cyan instead of opacity:0.4 */
.bba9-stepper button:disabled {
	background: rgba(var(--bba9-brand-rgb), 0.40);
	color: rgba(255,255,255,0.7);
	cursor: not-allowed;
}
.bba9-stepper-value {
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 800;
	cursor: pointer;
	background: #fff;
	color: var(--bba9-text);
	user-select: none;
	min-height: 56px;
	transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.bba9-stepper-value::after { content: ' ✎'; font-size: 11px; opacity: 0.5; margin-left: 6px; font-weight: normal; }
.bba9-stepper-value:hover { background: var(--bba9-bg-soft); box-shadow: inset 0 0 0 2px var(--bba9-brand-line); }
.bba9-stepper-value:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bba9-brand); }
.bba9-stepper-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--bba9-muted); padding: 6px 14px 0; max-width: 360px; margin: 0 auto; }

/* v0.6.5.6: passive slot-length summary shown in per-slide custom mode (no stepper) */
.bba9-slot-summary {
	display: flex; align-items: baseline; justify-content: center; gap: 10px;
	padding: 14px;
	background: var(--bba9-bg-soft);
	border-radius: var(--bba9-radius-sm);
	max-width: 360px;
	margin: 0 auto;
}
.bba9-slot-summary strong { font-size: 28px; font-weight: 800; color: var(--bba9-brand); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.bba9-slot-summary-meta { font-size: 12px; color: var(--bba9-muted); }

/* ── Inline edit input ────────────────────────────────── */
.bba9-edit-input {
	width: 100%; height: 56px; border: none;
	outline: 2px solid var(--bba9-brand);
	font-size: 22px; font-weight: 800; text-align: center;
	background: #fff; color: var(--bba9-text);
	-moz-appearance: textfield;
}
.bba9-edit-input::-webkit-outer-spin-button,
.bba9-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Per-slide rows ───────────────────────────────────── */
.bba9-slides-stack { display: flex; flex-direction: column; gap: 14px; }
.bba9-slide-row {
	background: var(--bba9-bg-soft);
	border-radius: var(--bba9-radius-sm);
	padding: 12px 14px;
}
.bba9-slide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bba9-slide-label { font-size: 13px; font-weight: 700; color: var(--bba9-text); }
.bba9-slide-imps {
	font-size: 15px; font-weight: 800; color: var(--bba9-brand);
	font-variant-numeric: tabular-nums;
	flex: 1; text-align: right; margin-right: 10px;
	letter-spacing: -0.01em;
}
.bba9-slide-imps:empty::before { content: 'Calculating…'; color: var(--bba9-muted); font-weight: 500; font-style: italic; font-size: 12px; }
.bba9-slide-row .bba9-stepper { max-width: none; }
.bba9-slide-row .bba9-stepper-meta { max-width: none; }

.bba9-slide-lock {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--bba9-brand); border: 1px solid var(--bba9-brand);
	border-radius: 999px; cursor: pointer;
	padding: 8px 14px; min-height: 40px;
	font-size: 12px; font-weight: 700; color: #fff;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bba9-slide-lock:hover { background: #fff; color: var(--bba9-brand); }
.bba9-slide-lock.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.bba9-slide-lock.active:hover { background: #fff; color: #92400e; border-color: #f59e0b; }
.bba9-slide-lock-icon { font-size: 14px; }

/* ── Collapsible section (Time per slide hidden behind toggle) ────────── */
.bba9-collapsible-toggle {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; padding: 12px 14px;
	background: var(--bba9-brand);
	border: 1px solid var(--bba9-brand);
	border-radius: var(--bba9-radius-sm);
	font-size: 13px; font-weight: 700; color: #fff;
	text-transform: uppercase; letter-spacing: 0.05em;
	cursor: pointer; min-height: 48px;
	transition: background 0.15s, border-color 0.15s;
	box-shadow: 0 2px 6px rgba(var(--bba9-brand-rgb), 0.25);
}
.bba9-collapsible-toggle:hover { filter: brightness(0.92); }
.bba9-collapsible-arrow { font-size: 16px; color: #fff; opacity: 0.95; }
.bba9-collapsible .bba9-collapsible-body { display: none; padding-top: 14px; }
.bba9-collapsible.is-open .bba9-collapsible-body { display: block; }
.bba9-collapsible.bba9-section { padding: 14px; }
.bba9-collapsible.bba9-section h3 { display: none; }

/* v0.6.5.11: per-slide pill toggle (matches addons' visual style — no arrow). */
.bba9-toggle-per-slide-wrap .bba9-toggle-per-slide {
	margin-top: 0;
}
.bba9-toggle-per-slide-wrap .bba9-collapsible-body {
	margin-top: 12px;
}

/* ── Type picker (v0.6.6.0): 3 cards — Cycle / Stack / Mix ─────────────── */
.bba9-type-picker {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
@media (min-width: 600px) {
	.bba9-type-picker { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.bba9-type-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 12px;
	border: 1px solid var(--bba9-brand);
	border-radius: var(--bba9-radius-sm);
	background: var(--bba9-brand);
	color: #fff;
	cursor: pointer;
	text-align: left;
	min-height: 84px;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.bba9-type-card:hover,
.bba9-type-card.is-active { background: #fff; color: var(--bba9-brand); }
.bba9-type-card:active { transform: scale(0.99); }
.bba9-type-card-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.bba9-type-card-subtitle { font-size: 12px; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.bba9-type-card-desc { font-size: 11px; line-height: 1.35; opacity: 0.85; }

/* ── Add-ons (custom pill toggle, no native checkbox) ────────────────── */
.bba9-addons { display: flex; flex-direction: column; gap: 10px; }
.bba9-addon {
	display: flex; align-items: center; gap: 12px;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--bba9-brand);
	border-radius: var(--bba9-radius-sm);
	background: var(--bba9-brand);
	color: #fff;
	cursor: pointer;
	min-height: 56px;
	text-align: left;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* v0.6.5.14: ON state mirrors hover (inverted look — white bg + brand text). */
.bba9-addon:hover,
.bba9-addon.is-on { background: #fff; color: var(--bba9-brand); }

/* Pill toggle */
.bba9-addon-toggle {
	display: inline-flex; flex-shrink: 0;
	width: 44px; height: 24px;
	background: rgba(255,255,255,0.30);   /* OFF on brand bg */
	border-radius: 999px;
	position: relative;
	transition: background 0.15s;
}
.bba9-addon-toggle-knob {
	position: absolute; top: 2px; left: 2px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s, background 0.15s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Hover OFF (parent inverts to white) → pill becomes gray with white knob */
.bba9-addon:hover:not(.is-on) .bba9-addon-toggle { background: #cbd5e1; }
/* ON state OR hover-on-ON → pill becomes solid brand cyan with white knob slid right */
.bba9-addon.is-on .bba9-addon-toggle { background: var(--bba9-brand); }
.bba9-addon.is-on .bba9-addon-toggle-knob { transform: translateX(20px); background: #fff; }

.bba9-addon-name { flex: 1; font-size: 14px; font-weight: 700; color: inherit; }
.bba9-addon-desc { display: block; font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.75); margin-top: 2px; transition: color 0.15s; }
.bba9-addon:hover .bba9-addon-desc,
.bba9-addon.is-on .bba9-addon-desc { color: var(--bba9-muted); }
.bba9-addon-price { font-size: 14px; font-weight: 800; color: #fff; transition: color 0.15s; }
.bba9-addon:hover .bba9-addon-price,
.bba9-addon.is-on .bba9-addon-price { color: var(--bba9-brand); }

/* ── Receipt regions — FULLY FLUSH on desktop (no nested boxes) ───────── */
.bba9-receipt-top, .bba9-receipt-bottom { padding: 0; background: transparent; border: none; }

/* The imp-banner IS the sticky-top surface — single flat cyan block. */
.bba9-imp-banner {
	display: block; width: 100%;
	background: var(--bba9-brand);
	color: #fff;
	border-radius: 10px;       /* v0.6.5.9: rounded on both viewports — LDG kept these */
	padding: 14px 16px;
	text-align: center;
	user-select: none;
}
.bba9-imp-label { display: block; font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
.bba9-imp-value { display: block; font-size: 24px; font-weight: 800; margin: 4px 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bba9-imp-note  { display: block; font-size: 11px; opacity: 0.75; }

/* Lines breakdown — sits inside receipt-bottom now (drop-UP from price panel).
 * Collapsed by default; tap the savings row below to expand. */
.bba9-lines {
	max-height: 0; opacity: 0; margin: 0;
	overflow: hidden;
	transition: max-height 0.3s, opacity 0.2s, margin 0.2s, padding 0.2s;
	background: #fff;
	border-radius: 0;          /* v0.6.5.7: sharp corners on inner panels */
}
.bba9-receipt-bottom.expanded .bba9-lines {
	max-height: 280px; opacity: 1;
	margin-bottom: 6px;          /* v0.6.13.1: tighter cost breakdown */
	padding: 2px 0;
	border: 1px solid var(--bba9-border);
}
.bba9-line { display: flex; justify-content: space-between; padding: 4px 14px; font-size: 13px; border-bottom: 1px dashed var(--bba9-border); color: var(--bba9-text); } /* v0.6.13.1: tighter */
.bba9-line:last-child { border-bottom: none; }

/* Savings row — visible-by-default tappable toggle that drops UP the breakdown.
 * Auto-cycles through 3 frames (Save X% / $Y for same reach / Z× reach for same $).
 * Pauses on hover. The ▴ arrow rotates when the breakdown is expanded. */
.bba9-savings-row {
	position: relative;
	display: block;
	width: 100%;
	min-height: 40px;            /* v0.6.13.1: tighter, still tappable */
	padding: 9px 32px 9px 14px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid var(--bba9-border);
	border-radius: 10px;       /* mobile default — rounded card */
	font-size: 13px; font-weight: 700;
	color: var(--bba9-success);
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bba9-savings-row:hover { background: #f0fdf4; border-color: var(--bba9-success); }
@media (min-width: 1141px) {
	/* v0.6.5.9: sharp corners on the savings panel on desktop only */
	.bba9-savings-row { border-radius: 0; }
}
.bba9-savings-frame {
	position: absolute; inset: 9px 32px 9px 14px;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity 0.6s ease;
	pointer-events: none;
}
.bba9-savings-frame.is-active { opacity: 1; }

/* v0.6.8.8: prefix ("Traditional billboards $X/mo") in body text color; only <strong> stays green for the % OFF. */
.bba9-savings-frame { color: var(--bba9-text); }
/* v0.6.5.7: strikethrough billboard price + emphasized % off inside savings frame */
.bba9-savings-frame s {
	color: var(--bba9-text);
	text-decoration: line-through;
	font-weight: 600;
	margin: 0 6px;            /* v0.6.5.15: breathing room on both sides of strikethrough */
}
.bba9-savings-frame strong {
	color: var(--bba9-success);
	font-weight: 800;
	font-size: 14px;
}
.bba9-savings-empty { display: inline-block; opacity: 0.7; font-weight: 600; color: var(--bba9-muted); }
.bba9-savings-row:has(.bba9-savings-frame) .bba9-savings-empty { display: none; }
.bba9-savings-arrow {
	position: absolute;
	top: 50%; right: 12px;
	transform: translateY(-50%);
	font-size: 14px; opacity: 0.7;
	transition: transform 0.2s;
}
.bba9-receipt-bottom.expanded .bba9-savings-arrow {
	transform: translateY(-50%) rotate(180deg);
}

/* ── Combined Continue + price button (sticky-bottom) ─────────────────── */
.bba9-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%;
	padding: 16px 20px;
	background: var(--bba9-brand);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px; font-weight: 800;
	cursor: pointer;
	min-height: 60px;
	transition: background 0.15s, transform 0.1s;
	box-shadow: 0 4px 14px rgba(var(--bba9-brand-rgb), 0.35);
}
.bba9-cta:hover:not(:disabled) { background: #fff; color: var(--bba9-brand); }
.bba9-cta:hover:not(:disabled) .bba9-cta-price,
.bba9-cta:hover:not(:disabled) .bba9-cta-label { color: var(--bba9-brand); }
.bba9-cta:active { transform: scale(0.99); }
.bba9-cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.bba9-cta-price { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bba9-cta-label { font-size: 15px; font-weight: 700; opacity: 0.95; }

.bba9-btn-back {
	margin-top: 8px;
	width: 100%;
	padding: 10px 14px;
	background: transparent;
	border: 1px solid var(--bba9-border);
	border-radius: 8px;
	font-size: 13px; font-weight: 600;
	color: var(--bba9-muted);
	cursor: pointer;
}
.bba9-btn-back:hover { border-color: var(--bba9-brand); color: var(--bba9-text); }

/* ── Auth ─────────────────────────────────────────────── */
.bba9-auth-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.bba9-auth-tabs button {
	flex: 1; padding: 12px;
	background: var(--bba9-bg-soft); border: 1px solid var(--bba9-border);
	border-radius: var(--bba9-radius-sm); cursor: pointer;
	font-size: 13px; font-weight: 600; min-height: 48px;
}
.bba9-auth-tabs button.active { background: var(--bba9-brand); color: #fff; border-color: var(--bba9-brand); }
.bba9-auth-form { display: flex; flex-direction: column; gap: 10px; }
.bba9-input {
	width: 100%; padding: 14px;
	border: 1px solid var(--bba9-border); border-radius: var(--bba9-radius-sm);
	font-size: 16px; min-height: var(--bba9-tap);
}
.bba9-input:focus { outline: 2px solid var(--bba9-brand); outline-offset: 1px; border-color: var(--bba9-brand); }

.bba9-summary { background: var(--bba9-bg-soft); border-left-color: var(--bba9-muted); }
.bba9-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.bba9-summary-row span:first-child { color: var(--bba9-muted); }
.bba9-summary-row span:last-child { font-weight: 600; }

.bba9-error {
	padding: 12px; margin-bottom: 12px;
	background: #fef2f2; border: 1px solid #fecaca;
	color: var(--bba9-danger); border-radius: var(--bba9-radius-sm);
	font-size: 13px;
}

/* ── MOBILE (≤ 1140px) — sticky-bar styling ────────────── */
@media (max-width: 1140px) {
	/* v0.6.5.9: sticky containers go TRANSPARENT on mobile — the cyan imp-banner
	 * (top) and the white savings card + cyan CTA (bottom) float as their own
	 * surfaces over the page bg. No more "two buttons inside a white box" feel. */
	.bba9-receipt-top {
		position: sticky; top: 0; z-index: 11;
		background: transparent;
		padding: 8px 0;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.bba9-imp-banner {
		border-radius: 10px;
		box-shadow: 0 4px 14px rgba(var(--bba9-brand-rgb), 0.30);
	}
	.bba9-receipt-bottom {
		position: sticky; bottom: 0; z-index: 10;
		background: transparent;
		padding: 8px 0;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}
	/* CTA on mobile keeps its strong cyan look + drop shadow so it stands alone on page bg */
	.bba9-cta { box-shadow: 0 4px 14px rgba(var(--bba9-brand-rgb), 0.40); }
	.bba9-receipt-top.expanded .bba9-lines { padding: 4px 0; border-radius: 10px; }
}

/* ── MOBILE (≤ 767px) ────────────────────────────────── */
@media (max-width: 767px) {
	.bba9 { padding: 8px; --bba9-tap: 52px; }
	.bba9-promo { margin-bottom: 12px; }
	.bba9-promo-headline { font-size: 18px; }
	.bba9-promo-subline { font-size: 12px; }
	.bba9-section {
		background: transparent;
		border: none; border-left: none; border-radius: 0;
		padding: 14px 4px; margin-bottom: 0;
		border-bottom: 1px solid var(--bba9-border);
	}
	.bba9-section:last-child { border-bottom: none; }
	/* v0.6.5.5: no parent brand-bg on mobile (kept flat) */
	.bba9-config-region { background: transparent; padding: 0; gap: 0; }
	.bba9-config-inner { gap: 0; }
	.bba9-section.bba9-collapsible {
		border: 1px solid var(--bba9-border);
		border-radius: var(--bba9-radius-sm);
		background: var(--bba9-bg-soft);
		padding: 4px;
	}
	.bba9-stepper { max-width: none; }
	.bba9-stepper button { height: 60px; font-size: 28px; }
	.bba9-stepper-value { min-height: 60px; font-size: 24px; }
	.bba9-stepper-meta { max-width: none; }
	.bba9-slide-lock { padding: 10px 16px; min-height: 44px; font-size: 13px; }
	.bba9-slide-imps { font-size: 14px; }
	.bba9-receipt-top    { margin: 0 -8px; padding: 6px; }
	.bba9-receipt-bottom { margin: 0 -8px; padding: 10px 14px; } /* v0.6.12.2: tightened (cadence moved out) */
	.bba9-imp-value { font-size: 20px; }
	.bba9-imp-note { display: none; }
	.bba9-cta-price { font-size: 20px; }
	.bba9-cta-label { font-size: 14px; }
	.bba9-slide-row { padding: 10px 0; background: transparent; border-bottom: 1px dashed var(--bba9-border); }
	.bba9-slide-row:last-child { border-bottom: none; }
}

@media (max-width: 380px) {
	.bba9 { padding: 6px; }
	.bba9-section { padding: 12px 2px; }
	.bba9-promo-headline { font-size: 16px; }
	.bba9-imp-value { font-size: 18px; }
	.bba9-cta-price { font-size: 18px; }
	.bba9-stepper button { height: 56px; font-size: 24px; }
	/* v0.6.8.6: also pin stepper-value to 56px so the parent border-box doesn't leave a 4px gap below buttons. */
	.bba9-stepper-value { min-height: 56px; }
	.bba9-receipt-top    { margin: 0 -6px; }
	.bba9-receipt-bottom { margin: 0 -6px; }
}

/* ============================================================================
   v0.6.7.3 — Skeleton loader (sized to match live widget elements 1:1).
   Per-section skeleton fragments live inside data-region containers in
   shell.php and inside data-bind value spans (impressions / line-base /
   line-overage / line-addons / price / savings-empty). When the JS first
   populates each region or sets a value via textContent, the skeleton DOM
   inside that region/span is naturally replaced — no JS dismissal needed.
   This produces an organic per-section fade-in as the widget hydrates.
   ============================================================================ */

@keyframes bba9-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}

.bba9 .bba9-skel {
	display: inline-block;
	background: linear-gradient(
		90deg,
		rgba(15, 23, 42, 0.06) 0%,
		rgba(15, 23, 42, 0.12) 50%,
		rgba(15, 23, 42, 0.06) 100%
	);
	background-size: 200% 100%;
	border-radius: 6px;
	animation: bba9-shimmer 1.4s linear infinite;
	vertical-align: middle;
	color: transparent;
	user-select: none;
}

/* Brand-tinted shimmer for items that sit on the cyan right column
   (impressions banner + CTA price). Light-on-cyan looks better than
   dark-on-cyan. */
.bba9-receipt-top .bba9-skel,
.bba9-receipt-bottom .bba9-cta .bba9-skel {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.20) 0%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0.20) 100%
	);
	background-size: 200% 100%;
}

.bba9-line .bba9-skel { margin-left: auto; }

/* Each skeleton group sits inside a real .bba9-section so it inherits the
   white card + padding + border-radius from the live widget's section
   styling. We just need direct skeleton children to render block-level. */
.bba9-skel-section > .bba9-skel { display: block; }
.bba9-section[data-region="market"] > .bba9-skel { display: block; }
.bba9-skel-section { margin-bottom: 12px; }
.bba9-skel-section:last-child { margin-bottom: 0; }

/* === Per-element shapes — sized to match live widget === */

/* Section heading + help text */
.bba9-skel-label   { width: 38%; height: 14px; margin-bottom: 8px; }
.bba9-skel-help    { width: 70%; height: 11px; opacity: 0.65; margin-bottom: 14px; }

/* Market dropdown (real: min-height 48px, padding 14px, full-width) */
.bba9-skel-input   { width: 100%; height: 48px; border-radius: 10px; }

/* Stepper — real layout: max-width 360px, centered, single connected pill,
   button height 56px desktop. Use overflow:hidden + zero gap to imitate
   the connected-pill look. */
.bba9-skel-stepper {
	display: flex;
	gap: 0;
	max-width: 360px;
	margin: 4px auto 0;
	border-radius: 12px;
	overflow: hidden;
}
.bba9-skel-stepperBtn { width: 30%; height: 56px; border-radius: 0; flex-shrink: 0; }
.bba9-skel-stepperVal { flex: 1; height: 56px; border-radius: 0; }

/* Per-slide row inside Time Per Slide section. Real rows have a label on
   the left + a stepper. Constrain to the same max width as the stepper. */
.bba9-skel-row {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 360px;
	margin: 12px auto 0;
}
.bba9-skel-slideLabel { width: 70px; height: 14px; flex-shrink: 0; }
.bba9-skel-row .bba9-skel-stepper { flex: 1; margin: 0; }

/* Add-on pill (real: full-width, min-height 56px, padding 14px) */
.bba9-skel-pill { display: block; width: 100%; height: 56px; border-radius: 8px; margin-top: 10px; }

/* Impression banner value (real .bba9-imp-value: font-size 24px desktop) */
.bba9-skel-imps    { width: 200px; height: 28px; }

/* Money line value (real .bba9-line text: 14px) */
.bba9-skel-money   { width: 56px; height: 14px; }

/* Savings row "Building your quote…" (real: 14px text, ~60% width) */
.bba9-skel-savings { width: 60%; height: 14px; }

/* CTA price (real .bba9-cta-price: font-size 22px) */
.bba9-skel-ctaPrice { width: 90px; height: 26px; }

/* Mobile: bigger steppers (matches real .bba9-stepper button height: 60px @ <600px) */
@media (max-width: 600px) {
	.bba9-skel-stepperBtn,
	.bba9-skel-stepperVal { height: 60px; }
	.bba9-skel-pill       { height: 60px; }
	.bba9-skel-imps       { height: 24px; }
	.bba9-skel-ctaPrice   { height: 24px; }
}

/* Honor system reduce-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.bba9 .bba9-skel { animation: none; }
}

/* ───── v0.6.8.1: Mode A/B pill toggle ─────────────────────────────────── */
.bba9 .bba9-mode-section { padding-bottom: 4px; }
.bba9 .bba9-mode-pills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
}
.bba9 .bba9-mode-pill {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 14px;
	border: 2px solid var(--bba9-brand, #06b6d4);
	background: #fff;
	color: var(--bba9-brand, #06b6d4);
	font: 600 13px/1.2 inherit;
	letter-spacing: 0.2px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, transform 80ms ease;
	text-align: center;
	white-space: nowrap;
}
.bba9 .bba9-mode-pill:hover { background: var(--bba9-brand, #06b6d4); color: var(--bba9-brand-text, #fff); }
.bba9 .bba9-mode-pill:active { transform: scale(0.98); }
.bba9 .bba9-mode-pill.is-on {
	background: var(--bba9-brand, #06b6d4);
	color: var(--bba9-brand-text, #fff);
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.bba9 .bba9-mode-pill:focus-visible {
	outline: 2px solid var(--bba9-brand, #06b6d4);
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.bba9 .bba9-mode-pill { font-size: 12px; padding: 6px 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   v0.6.9.5 — Width parity enforcement across all V8 widget states.
   LDG observed visual width drift between skeleton / configure / signup
   states even though the measured widths matched. Belt-and-suspenders:
   pin every page wrapper to fill its parent at exactly the same dimensions,
   normalize the .bba9-summary card chrome to match other sections, and
   force the bba9-controls grid cell to a stable width.
   ───────────────────────────────────────────────────────────────────────── */
.bba9 .bba9-controls { width: 100%; min-width: 0; box-sizing: border-box; }
.bba9 .bba9-page { width: 100%; box-sizing: border-box; }
.bba9 .bba9-page > .bba9-config-region { width: 100%; box-sizing: border-box; }
.bba9 .bba9-config-region > .bba9-section { width: 100%; box-sizing: border-box; }
/* v0.6.9.5: align the Order Summary card's visual chrome with other sections so
   it feels like the same width/weight as the configure step's cards. */
.bba9 .bba9-summary {
	background: #fff;
	border-left-color: var(--bba9-brand);
}
.bba9 .bba9-summary-row { padding: 6px 0; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────────
   v0.6.9.6 — REAL fix for the width-shrinking signup page on /advertise/.
   CSS Grid with `1.2fr 1fr` and no explicit grid width was sizing the
   columns to their content's min-content. Configure step's wide Greater
   Orlando dropdown forced wide columns; signup step's thin text inputs
   collapsed the grid by ~37%. Result: signup page on the public /advertise/
   page rendered dramatically narrower than configure page.
   Fix: force the grid to fill 100% of the available container width so
   column allocation is based on container, not content.
   ───────────────────────────────────────────────────────────────────────── */
.bba9 .bba9-grid { width: 100%; min-width: 0; box-sizing: border-box; }
@media (min-width: 1141px) {
	.bba9 .bba9-grid { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   v0.6.9.7 — FINAL fix for the /advertise/ flex-shrink issue.
   The widget is nested inside Avada's .fusion-column-wrapper which is
   display:flex with justify-content:center. Default flex item sizing makes
   .bba9 take its content's intrinsic width — when configure renders wide
   content the widget grows, when signup renders narrow form inputs the
   widget shrinks 37%.
   Fix: pin .bba9 to fill its flex parent regardless of content. flex:1
   forces it to grow; align-self:stretch forces cross-axis stretching;
   width:100% gives it the explicit dimension to claim the available space.
   This works whether the theme uses Avada Fusion, block themes, or plain
   WordPress — width:100% is the universal fallback.
   ───────────────────────────────────────────────────────────────────────── */
.bba9 {
	width: 100%;
	flex: 1 1 auto;
	align-self: stretch;
}

/* ── billing cadence toggle (SPEC-billing-cadence.md) ─────────────────────── */
/* v0.6.12.1 scroll-overlap fix: the sticky receipt panel must be opaque so page
   content doesn't bleed through the breakdown/CTA while it's stuck during scroll. */
.bba9-receipt-bottom { background: #fff; }
/* v0.6.12.2: cadence toggle now lives in the SCROLLABLE controls column (moved out of
   the bottom sticky panel to free mobile vertical space). */
.bba9-cadence {
	display: flex; gap: 8px; margin: 14px 0 6px;
}
.bba9-cadence-opt {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 8px 10px; border: 1.5px solid var(--bba9-brand-line); border-radius: 10px;
	background: #fff; cursor: pointer; font: inherit;
	/* v0.6.12.2: explicit color — iOS Safari paints unstyled <button> text its system
	   blue otherwise (looked un-branded on iPhone, fine on desktop). */
	color: var(--bba9-text); -webkit-appearance: none; appearance: none;
	-webkit-text-fill-color: currentColor;
	/* v0.6.12.5: NO transition — the is-on state transitions color/border/bg between two
	   var()-derived values, which glitches in the browser (target never paints, selected
	   button stayed grey). Instant apply makes the selected highlight reliable. */
}
.bba9-cadence-opt.is-on {
	border-color: var(--bba9-brand);
	background: var(--bba9-brand-soft);   /* v0.6.12.2: brand tint, was hardcoded royal-blue */
	color: var(--bba9-brand);
}
.bba9-cadence-name  { font-weight: 700; font-size: 13px; color: inherit; -webkit-text-fill-color: currentColor; }
.bba9-cadence-price { font-size: 12px; opacity: .85; color: inherit; -webkit-text-fill-color: currentColor; }
.bba9-cadence-save {
	font-size: 12px; font-weight: 600; color: var(--bba9-brand);
	margin: 2px 0 6px; text-align: center;
}