/**
 * Boulder SEO - GEO Readiness Lead Gen - front-end styles.
 *
 * Everything is scoped under .bgl-widget and uses explicit values so the
 * widget looks identical regardless of the active theme. A light reset on
 * the container neutralises inherited theme styles.
 */

.bgl-widget {
	/* Design tokens - tweak here to re-skin the whole widget. */
	--bgl-bg: #0f1115;
	--bgl-card: #1b1e25;
	--bgl-card-2: #23272f;
	--bgl-border: #2a2e37;
	--bgl-border-2: #2e333d;
	--bgl-text: #e6e8ec;
	--bgl-text-strong: #f3f4f6;
	--bgl-muted: #8b909a;
	--bgl-muted-2: #6a7080;
	--bgl-blue: #4f7cf7;
	--bgl-green: #34c77b;
	--bgl-radius: 14px;

	box-sizing: border-box;
	max-width: 1160px;
	margin: 24px auto;
	padding: 32px;
	background: var(--bgl-bg);
	border-radius: 18px;
	color: var(--bgl-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

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

.bgl-widget button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
}

/* ---------- Intro ---------- */
.bgl-intro__eyebrow {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bgl-muted-2);
	margin: 0 0 6px;
}
.bgl-intro__heading {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bgl-text-strong);
	margin: 0 0 6px;
}
.bgl-intro__sub {
	font-size: 14px;
	color: var(--bgl-muted);
	max-width: 760px;
	margin: 0 0 28px;
	line-height: 1.5;
}

/* ---------- Layout ---------- */
.bgl-layout {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.bgl-pillars {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---------- Pillar ---------- */
.bgl-pillar {
	background: var(--bgl-card);
	border: 1px solid var(--bgl-border);
	border-radius: 12px;
	overflow: hidden;
}
.bgl-pillar__header {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 22px;
	text-align: left;
}
.bgl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bgl-accent);
	flex: none;
}
.bgl-pillar__titles {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.bgl-pillar__title {
	font-size: 16px;
	font-weight: 600;
	color: #f0f1f4;
}
.bgl-pillar__subtitle {
	font-size: 12px;
	color: var(--bgl-muted-2);
	margin-top: 2px;
}
.bgl-pillar__stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: none;
}
.bgl-frac,
.bgl-pct,
.bgl-sep {
	font-size: 18px;
	font-weight: 700;
	color: var(--bgl-accent);
}
.bgl-weight {
	font-size: 11px;
	color: var(--bgl-muted-2);
	letter-spacing: 0.05em;
}
.bgl-chevron {
	font-size: 13px;
	color: var(--bgl-muted-2);
	width: 16px;
	text-align: center;
	flex: none;
	transition: transform 0.2s ease;
}
.bgl-pillar.is-open .bgl-chevron {
	transform: rotate(180deg);
}

.bgl-progress {
	height: 3px;
	background: var(--bgl-card-2);
}
.bgl-progress__bar {
	height: 100%;
	width: 0;
	background: var(--bgl-accent);
	transition: width 0.3s ease;
}

.bgl-pillar__body {
	padding: 6px 10px 12px;
}

/* ---------- Item ---------- */
.bgl-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 12px;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.bgl-item[data-value="yes"] {
	background: rgba(52, 199, 123, 0.07);
}
.bgl-item__label {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: #aeb3be;
}
.bgl-item[data-value="yes"] .bgl-item__label {
	color: #dfe2e8;
}
.bgl-choices {
	flex: none;
	display: flex;
	border: 1px solid var(--bgl-border-2);
	border-radius: 8px;
	overflow: hidden;
}
.bgl-choice {
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 700;
	color: #7b8190;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}
.bgl-choice + .bgl-choice {
	border-left: 1px solid var(--bgl-border-2);
}
.bgl-choice--yes[aria-pressed="true"] {
	background: var(--bgl-green);
	color: #0f1115;
}
.bgl-choice--no[aria-pressed="true"] {
	background: #3a3f4a;
	color: var(--bgl-text);
}
.bgl-choice--unsure[aria-pressed="true"] {
	background: #e0a23c;
	color: #0f1115;
}
.bgl-choice:hover:not([aria-pressed="true"]) {
	color: var(--bgl-text);
}

/* ---------- Score panel ---------- */
.bgl-score {
	flex: none;
	width: 340px;
	position: sticky;
	top: 24px;
	background: var(--bgl-card);
	border: 1px solid var(--bgl-border);
	border-radius: 16px;
	padding: 30px 26px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.bgl-score__title {
	font-size: 24px;
	font-weight: 800;
	color: var(--bgl-text-strong);
	margin-bottom: 22px;
}
.bgl-donut {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: 0 auto;
	background: conic-gradient(var(--bgl-blue) 0 0%, var(--bgl-card-2) 0% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.4s ease;
}
.bgl-donut__hole {
	width: 148px;
	height: 148px;
	border-radius: 50%;
	background: var(--bgl-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.bgl-score__num {
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: var(--bgl-blue);
}
.bgl-score__sub {
	font-size: 12px;
	color: var(--bgl-muted-2);
	margin-top: 4px;
}
.bgl-band {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
}
.bgl-band__blurb {
	font-size: 13px;
	color: var(--bgl-muted);
	line-height: 1.5;
	margin: 14px 0 0;
}

.bgl-bands {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	text-align: left;
}
.bgl-bands__row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--bgl-muted-2);
}
.bgl-bands__row.is-active {
	color: var(--bgl-band-color);
}
.bgl-bands__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bgl-band-color);
	flex: none;
}
.bgl-bands__range {
	flex: none;
	width: 60px;
	font-weight: 700;
}
.bgl-bands__name {
	color: var(--bgl-muted);
}
.bgl-bands__row.is-active .bgl-bands__name {
	color: var(--bgl-band-color);
}

.bgl-cta {
	display: block;
	width: 100%;
	margin-top: 26px;
	background: linear-gradient(180deg, #5b8bff, #4f7cf7);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 14px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(79, 124, 247, 0.35);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bgl-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 24px rgba(79, 124, 247, 0.45);
}

/* ---------- Form step ---------- */
.bgl-back {
	font-size: 13px;
	color: var(--bgl-muted);
	padding: 6px 0;
	margin-bottom: 16px;
}
.bgl-back:hover {
	color: var(--bgl-text);
}
.bgl-form-card {
	max-width: 620px;
	margin: 0 auto;
	background: var(--bgl-card);
	border: 1px solid var(--bgl-border);
	border-radius: 16px;
	padding: 34px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.bgl-form-card__score {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}
.bgl-mini-donut {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(var(--bgl-blue) 0 0%, var(--bgl-card-2) 0% 100%);
}
.bgl-mini-num {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--bgl-card);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--bgl-text-strong);
}
.bgl-band-inline {
	font-size: 14px;
	font-weight: 700;
}
.bgl-form__heading {
	font-size: 22px;
	font-weight: 700;
	color: var(--bgl-text-strong);
	margin: 0 0 8px;
}
.bgl-form__leadin {
	font-size: 14px;
	color: var(--bgl-muted);
	margin: 0 0 24px;
	line-height: 1.55;
}
.bgl-field {
	margin-bottom: 18px;
}
.bgl-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #d6d9e0;
	margin-bottom: 6px;
}
.bgl-req {
	color: #e76f51;
	margin-left: 2px;
}
.bgl-field input,
.bgl-field textarea,
.bgl-field select {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--bgl-text);
	background: #14171d;
	border: 1px solid var(--bgl-border-2);
	border-radius: 9px;
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bgl-field textarea {
	resize: vertical;
	min-height: 96px;
}
.bgl-field input::placeholder,
.bgl-field textarea::placeholder {
	color: #5a606c;
}
.bgl-field input:focus,
.bgl-field textarea:focus,
.bgl-field select:focus {
	outline: none;
	border-color: var(--bgl-blue);
	box-shadow: 0 0 0 3px rgba(79, 124, 247, 0.18);
}
.bgl-field.has-error input,
.bgl-field.has-error textarea,
.bgl-field.has-error select {
	border-color: #e76f51;
}
.bgl-field__error {
	display: block;
	font-size: 12px;
	color: #e76f51;
	margin-top: 5px;
	min-height: 0;
}
.bgl-form__error {
	font-size: 13px;
	color: #e76f51;
	margin-bottom: 12px;
}
.bgl-submit {
	display: block;
	width: 100%;
	background: linear-gradient(180deg, #5b8bff, #4f7cf7);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(79, 124, 247, 0.35);
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.bgl-submit:hover {
	transform: translateY(-1px);
}
.bgl-submit[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* Honeypot - visually hidden. */
.bgl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Thank you ---------- */
.bgl-thanks {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 50px 30px;
}
.bgl-thanks__check {
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: rgba(52, 199, 123, 0.12);
	color: var(--bgl-green);
	font-size: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgl-thanks__heading {
	font-size: 26px;
	font-weight: 700;
	color: var(--bgl-text-strong);
	margin: 0 0 12px;
}
.bgl-thanks__message {
	font-size: 15px;
	color: var(--bgl-muted);
	line-height: 1.6;
	margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.bgl-widget {
		padding: 22px 18px;
	}
	.bgl-layout {
		flex-direction: column;
	}
	.bgl-score {
		width: 100%;
		position: static;
	}
	.bgl-intro__heading {
		font-size: 22px;
	}
}

@media (max-width: 560px) {
	.bgl-pillar__header {
		flex-wrap: wrap;
		gap: 10px 12px;
	}
	.bgl-pillar__stat {
		order: 3;
		width: 100%;
		justify-content: flex-start;
	}
	.bgl-item {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.bgl-choices {
		align-self: flex-start;
	}
	.bgl-form-card {
		padding: 22px 18px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bgl-widget * {
		transition: none !important;
	}
}