/* BrowserBlast Prequalify — front-end form.
   Inherits the Indexsy / BrowserBlast design language: dark navy surface,
   indigo brand accent, Poppins headings, Instrument Serif italic accent, Inter
   body, a system mono for numeric/data cells, pill CTAs, soft indigo glow.
   Everything is scoped to .bbpq and themed via the variables below — retune
   those to drop it onto a different host. */
.bbpq {
	/* ---- accent (Indexsy brand indigo + darker hover) ---- */
	--bbpq-accent: #3451ea;
	--bbpq-accent-deep: #2b42c0;
	--bbpq-accent-soft: #a5b4fc;     /* light indigo for text on dark */
	--bbpq-accent-tint: rgba(52, 81, 234, 0.16);

	/* ---- surface / text (dark) ---- */
	--bbpq-page: #030712;            /* host page background           */
	--bbpq-card: #0b1020;            /* elevated panel the widget sits on */
	--bbpq-soft: #111827;            /* soft secondary surface         */
	--bbpq-field: rgba(255, 255, 255, 0.04);
	--bbpq-ink: #f9fafb;             /* primary text (near-white)      */
	--bbpq-ink-2: #d1d5db;           /* body / secondary text          */
	--bbpq-gray: #9ca3af;            /* muted text                     */
	--bbpq-gray-2: #6b7280;          /* more-muted text                */
	--bbpq-line: rgba(255, 255, 255, 0.10);
	--bbpq-clay: #f87171;            /* error / negative               */
	--bbpq-ok: #34d399;

	/* ---- radius ---- */
	--bbpq-radius: 18px;
	--bbpq-radius-sm: 12px;
	--bbpq-pill: 100px;

	/* soft indigo glow echoing the BrowserBlast hero */
	--bbpq-shadow: 0 0 50px rgba(52, 81, 234, 0.12), 0 28px 64px -30px rgba(0, 0, 0, 0.7);

	--bbpq-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bbpq-font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--bbpq-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bbpq-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

	max-width: 720px;
	margin: 0 auto;
	color: var(--bbpq-ink);
	font-family: var(--bbpq-font-body);
	position: relative;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

.bbpq * {
	box-sizing: border-box;
}

/* soft indigo top-glow behind the card */
.bbpq__card::before {
	content: '';
	position: absolute;
	inset: -1px -1px auto;
	height: 220px;
	z-index: 0;
	border-radius: var(--bbpq-radius);
	background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(52, 81, 234, 0.20), transparent 72%);
	pointer-events: none;
}

.bbpq__card {
	position: relative;
	z-index: 1;
	background: var(--bbpq-card);
	border: 1px solid var(--bbpq-line);
	border-radius: var(--bbpq-radius);
	padding: clamp(24px, 4.4vw, 44px);
	box-shadow: var(--bbpq-shadow);
}

.bbpq__card > * {
	position: relative;
	z-index: 1;
}

/* ---- headings + body ---- */
.bbpq__eyebrow {
	margin: 0 0 14px;
	font-family: var(--bbpq-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bbpq-accent-soft);
	font-weight: 600;
}

.bbpq__heading {
	font-family: var(--bbpq-font-head);
	font-weight: 400;
	font-size: clamp(28px, 4.6vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--bbpq-ink);
}

.bbpq__subheading {
	margin: 0 0 26px;
	color: var(--bbpq-ink-2);
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.55;
}

.bbpq__subheading strong {
	color: var(--bbpq-ink);
	font-weight: 600;
}

/* ---- form fields ---- */
.bbpq__field {
	margin-bottom: 14px;
}

.bbpq__label {
	display: block;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--bbpq-ink);
}

.bbpq__input {
	width: 100%;
	padding: 15px 16px;
	font-size: 16px;                  /* 16px keeps iOS Safari from zooming on focus */
	font-family: var(--bbpq-font-body);
	color: var(--bbpq-ink);
	background: var(--bbpq-field);
	border: 1.5px solid var(--bbpq-line);
	border-radius: var(--bbpq-radius-sm);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.bbpq__input::placeholder {
	color: var(--bbpq-gray-2);
}

.bbpq__input:focus {
	outline: none;
	border-color: var(--bbpq-accent);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 4px var(--bbpq-accent-tint);
}

/* honeypot — hidden from humans, attractive to bots */
.bbpq__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- buttons (host pill; body font) ---- */
/* Buttons reuse the host theme's `.gb-text.primary-btn` so they're pixel-
   identical on indexsy.com. The :where() fallback below reproduces that button
   at ZERO specificity, so the real `.primary-btn` always wins when the theme
   CSS is loaded, while admin previews / other hosts still render correctly. */
:where(.bbpq .primary-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	font-family: var(--bbpq-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #f9fafb;
	background-color: var(--bbpq-accent);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	/* the host's glossy inset highlight */
	box-shadow: rgba(255, 255, 255, 0.58) -0.4px 0.4px 0.6px -1px inset,
		rgba(255, 255, 255, 0.55) -1.20725px 1.20725px 1.7px -1.9px inset,
		rgba(255, 255, 255, 0.47) -3.2px 3.2px 4.5px -2.8px inset,
		rgba(255, 255, 255, 0.2) -10px 10px 14px -3.8px inset;
	transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

:where(.bbpq .primary-btn:hover, .bbpq .primary-btn:focus) {
	color: #fff;
	background-color: var(--bbpq-accent-deep);
}

.bbpq__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.bbpq__consent {
	margin: 14px 0 0;
	text-align: center;
	font-family: var(--bbpq-font-mono);
	font-size: 12px;
	letter-spacing: 0.01em;
	color: var(--bbpq-gray-2);
}

/* ---- status (loading / error) ---- */
.bbpq__status {
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: var(--bbpq-radius-sm);
	font-size: 15px;
	font-weight: 500;
}

.bbpq__status--loading {
	background: var(--bbpq-soft);
	color: var(--bbpq-gray);
}

.bbpq__status--error {
	background: rgba(248, 113, 113, 0.12);
	color: var(--bbpq-clay);
}

/* ---- results ---- */
.bbpq__back {
	display: block;
	width: fit-content;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 16px;
	cursor: pointer;
	font-family: var(--bbpq-font-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbpq-gray);
}

.bbpq__back:hover {
	color: var(--bbpq-ink);
}

.bbpq__chip {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 11px;
	border-radius: var(--bbpq-pill);
	background: var(--bbpq-accent-tint);
	color: var(--bbpq-accent-soft);
	font-family: var(--bbpq-font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bbpq__result-title {
	font-family: var(--bbpq-font-head);
	font-weight: 400;
	font-size: clamp(24px, 3.6vw, 34px);
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	color: var(--bbpq-ink);
}

.bbpq__result-sub {
	margin: 0 0 6px;
	color: var(--bbpq-ink-2);
	font-size: 16px;
	line-height: 1.55;
}

.bbpq__result-sub strong {
	color: var(--bbpq-ink);
	font-weight: 700;
}

/* keyword — plain body type (no cursive); ranking URL stacks beneath it */
.bbpq__kw {
	font-family: var(--bbpq-font-body);
	font-style: normal;
	font-weight: 600;
	color: var(--bbpq-ink);
	font-size: 1em;
	overflow: hidden;
}

.bbpq__kw-term {
	display: block;
	word-break: break-word;
}

.bbpq__kw-url {
	display: block;
	margin-top: 3px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--bbpq-font-mono);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--bbpq-gray);
	text-decoration: none;
}

.bbpq__kw-url:hover {
	color: var(--bbpq-accent-soft);
	text-decoration: underline;
}

/* data table — numeric cells use mono for tabular figures.
   Fixed layout so the stacked ranking URL truncates instead of widening. */
.bbpq__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 18px 0 4px;
	font-size: 14.5px;
}

.bbpq__table th:nth-child(1),
.bbpq__table td:nth-child(1) {
	width: 48%;
}

.bbpq__table th:nth-child(2),
.bbpq__table td:nth-child(2) {
	width: 20%;
}

.bbpq__table th:nth-child(3),
.bbpq__table td:nth-child(3) {
	width: 32%;
}

.bbpq__table th,
.bbpq__table td {
	padding: 12px;
	border-bottom: 1px solid var(--bbpq-line);
	text-align: left;
}

.bbpq__table th {
	font-family: var(--bbpq-font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bbpq-gray-2);
	font-weight: 600;
}

/* scoped to out-specify the generic `.bbpq__table td { text-align:left }` rule */
.bbpq__table .bbpq__num {
	text-align: right;
	white-space: nowrap;
	font-family: var(--bbpq-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--bbpq-ink);
}

/* position cell: light text + an accent "eligible" marker */
.bbpq__pos {
	color: var(--bbpq-ink);
	font-weight: 700;
}

.bbpq__pos::before {
	content: '\25CF';
	color: var(--bbpq-accent-soft);
	font-size: 0.7em;
	margin-right: 6px;
	vertical-align: 1px;
}

/* blurred / locked teaser rows */
.bbpq__row--locked td {
	filter: blur(4.5px);
	color: var(--bbpq-gray);
	user-select: none;
}

.bbpq__row--locked .bbpq__pos::before {
	filter: blur(4.5px);
}

.bbpq__more {
	margin: 14px 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--bbpq-font-mono);
	font-size: 13px;
	color: var(--bbpq-gray);
	font-weight: 500;
}

.bbpq__more svg {
	flex: 0 0 auto;
}

/* per-URL pricing clarification under the CTA */
.bbpq__note {
	margin: 14px auto 0;
	max-width: 54ch;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bbpq-gray);
}

.bbpq__note strong {
	color: var(--bbpq-ink-2);
	font-weight: 600;
}

/* button row — flex parent so the host's display:flex button sizes to its
   content (a centred pill) instead of stretching full width */
.bbpq__cta-row {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

@media (max-width: 560px) {
	.bbpq__card {
		padding: 22px;
	}
}

/* honour reduced motion — kill transitions + the teaser blur */
@media (prefers-reduced-motion: reduce) {
	.bbpq *,
	.bbpq *::before {
		transition: none !important;
	}

	.bbpq__row--locked td,
	.bbpq__row--locked .bbpq__pos::before {
		filter: none;
		opacity: 0.45;
	}
}