/* BP Digital GEO Audit — Masterclass design system
   Palette: blue→green gradient, ink text, mono uppercase labels, pill UI. */

.bpga {
	--bpga-grad: linear-gradient(135deg, #1d7fa8 0%, #35b47e 100%);
	--bpga-grad-soft: linear-gradient(135deg, rgba(29, 127, 168, .08), rgba(53, 180, 126, .08));
	--bpga-blue: #1d7fa8;
	--bpga-green: #35b47e;
	--bpga-ink: #0e2a3a;
	--bpga-gray: #6b7a85;
	--bpga-line: #bcd6e4;
	--bpga-mint: #e9f7ef;
	--bpga-radius: 24px;
	--bpga-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bpga-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	font-family: var(--bpga-font);
	color: var(--bpga-ink);
	line-height: 1.6;
	max-width: 980px;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
}

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

/* Shell card on gradient-friendly background */
.bpga-shell {
	background: #fff;
	border-radius: var(--bpga-radius);
	box-shadow: 0 24px 64px rgba(14, 42, 58, .14);
	padding: clamp(24px, 5vw, 56px);
	position: relative;
	overflow: hidden;
}
.bpga-shell::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--bpga-grad);
}

/* Panels (states) */
.bpga-panel { display: none; }
.bpga-panel.is-active { display: block; animation: bpga-fade .35s ease; }
@keyframes bpga-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Badge pill */
.bpga-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bpga-mono);
	font-size: 11px;
	letter-spacing: .22em;
	border: 1px solid var(--bpga-green);
	border-radius: 999px;
	padding: 8px 18px;
	color: var(--bpga-ink);
	margin-bottom: 22px;
}
.bpga-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--bpga-green);
	box-shadow: 0 0 0 3px rgba(53, 180, 126, .2);
}
.bpga-badge-warn { border-color: #e67e22; }
.bpga-badge-warn .bpga-dot { background: #e67e22; box-shadow: 0 0 0 3px rgba(230, 126, 34, .2); }

/* Headline — gradient text like "GEO Masterclass" */
.bpga-headline {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0 0 18px;
	padding-bottom: .08em;
	background: var(--bpga-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--bpga-blue);
}
.bpga-headline-sm { font-size: clamp(24px, 3.6vw, 38px); }
.bpga-grad-text {
	padding-bottom: .05em;
	background: var(--bpga-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bpga-lead {
	font-size: clamp(15px, 1.8vw, 18px);
	color: var(--bpga-gray);
	max-width: 640px;
	margin: 0 0 28px;
}
.bpga-lead strong { color: var(--bpga-ink); }

/* Mono labels */
.bpga-label {
	display: block;
	font-family: var(--bpga-mono);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--bpga-gray);
	margin: 0 0 8px 4px;
	text-transform: uppercase;
}

/* Pill inputs */
.bpga-input {
	width: 100%;
	font-family: var(--bpga-font);
	font-size: 16px;
	color: var(--bpga-ink);
	background: #fff;
	border: 1.5px solid var(--bpga-line);
	border-radius: 999px;
	padding: 14px 22px;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.bpga-input:focus {
	border-color: var(--bpga-blue);
	box-shadow: 0 0 0 4px rgba(29, 127, 168, .12);
}
.bpga-input::placeholder { color: #a7b4bc; }

.bpga-field { flex: 1 1 260px; }
.bpga-field-row {
	display: flex;
	gap: 14px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* Pill gradient buttons */
.bpga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--bpga-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: none;
	border-radius: 999px;
	padding: 16px 32px;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, opacity .15s;
	white-space: nowrap;
}
.bpga-btn-primary {
	background: var(--bpga-grad);
	color: #fff;
	box-shadow: 0 10px 24px rgba(29, 127, 168, .3);
}
.bpga-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(29, 127, 168, .38); }
.bpga-btn-ghost {
	background: transparent;
	color: var(--bpga-ink);
	border: 1.5px solid var(--bpga-line);
}
.bpga-btn-ghost:hover { border-color: var(--bpga-blue); }
.bpga-btn-lg { padding: 20px 42px; font-size: 14px; }
.bpga-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.bpga-btn.is-busy .bpga-arrow { animation: bpga-spin 1s linear infinite; display: inline-block; }
@keyframes bpga-spin { to { transform: rotate(360deg); } }
.bpga-arrow { font-family: var(--bpga-font); }

/* Trust line */
.bpga-trust {
	font-family: var(--bpga-mono);
	font-size: 10px;
	letter-spacing: .18em;
	color: #9aa8b1;
	margin-top: 22px;
}

/* Honeypot */
.bpga-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Errors */
.bpga-error {
	color: #c0392b;
	background: #fdecea;
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 14px;
	margin: 10px 0 0;
}

/* ---------- Running state ---------- */

.bpga-runmsg {
	font-family: var(--bpga-mono);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--bpga-blue);
	min-height: 1.6em;
}
.bpga-progress {
	height: 10px;
	background: var(--bpga-grad-soft);
	border-radius: 999px;
	overflow: hidden;
	margin: 14px 0 26px;
}
.bpga-progress-bar {
	height: 100%;
	background: var(--bpga-grad);
	border-radius: 999px;
	transition: width .6s ease;
}
.bpga-step-eta {
	font-family: var(--bpga-mono);
	font-size: 10px;
	letter-spacing: .08em;
	color: #9aa8b1;
	margin-left: 8px;
	white-space: nowrap;
}
.bpga-eta {
	font-family: var(--bpga-mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: #9aa8b1;
	margin: -14px 0 22px;
}
.bpga-steps { list-style: none; margin: 0 0 30px; padding: 0; }
.bpga-steps li {
	position: relative;
	padding: 8px 0 8px 36px;
	color: var(--bpga-gray);
	font-size: 15px;
}
.bpga-steps li::before {
	content: '';
	position: absolute;
	left: 0; top: 10px;
	width: 20px; height: 20px;
	border: 2px solid var(--bpga-line);
	border-radius: 50%;
	background: #fff;
}
.bpga-steps li.is-now { color: var(--bpga-ink); font-weight: 600; }
.bpga-steps li.is-now::before { border-color: var(--bpga-blue); animation: bpga-pulse 1.4s ease infinite; }
@keyframes bpga-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(29,127,168,.25); } 50% { box-shadow: 0 0 0 6px rgba(29,127,168,.12); } }
.bpga-steps li.is-done { color: var(--bpga-ink); }
.bpga-steps li.is-done::before {
	content: '✓';
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	background: var(--bpga-green);
	border-color: var(--bpga-green);
}

/* Countdown-style tiles */
.bpga-tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.bpga-tile {
	background: var(--bpga-grad-soft);
	border: 1px solid rgba(29, 127, 168, .18);
	border-radius: 16px;
	padding: 18px 22px;
	min-width: 110px;
	text-align: center;
}
.bpga-tile-num {
	display: block;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--bpga-ink);
}
.bpga-tile-cap {
	display: block;
	font-family: var(--bpga-mono);
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--bpga-gray);
	margin-top: 6px;
}
.bpga-tiles-lg .bpga-tile { min-width: 130px; }
.bpga-tile-main {
	background: var(--bpga-grad);
	border: none;
}
.bpga-tile-main .bpga-tile-num,
.bpga-tile-main .bpga-tile-cap { color: #fff; }

/* ---------- Result state ---------- */

.bpga-summary {
	font-size: 17px;
	color: var(--bpga-ink);
	background: var(--bpga-mint);
	border-radius: 16px;
	padding: 14px 20px;
	max-width: 720px;
	margin: 0 0 26px;
}
.bpga-result-grid {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 10px;
}
.bpga-result-left { flex: 1 1 380px; }
.bpga-result-right { flex: 0 1 320px; }

.bpga-band { font-weight: 700; margin: 14px 0 4px; }
.bpga-band-kivalo, .bpga-band-jo { color: #1e8449; }
.bpga-band-kozepes { color: #b7950b; }
.bpga-band-gyenge { color: #ca6f1e; }
.bpga-band-kritikus { color: #c0392b; }

.bpga-psi-note {
	background: var(--bpga-mint);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 14px;
	display: inline-block;
}

.bpga-catlist { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.bpga-cat {
	font-family: var(--bpga-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid;
}
.bpga-cat-ok  { color: #1e8449; border-color: #b7e4c7; background: #eafaf1; }
.bpga-cat-mid { color: #b7950b; border-color: #f2e2a0; background: #fdf8e6; }
.bpga-cat-low { color: #c0392b; border-color: #f2b8b5; background: #fdecea; }

.bpga-shot { margin: 0; }
.bpga-shot-frame {
	background: #fff;
	border: 1px solid var(--bpga-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 44px rgba(14, 42, 58, .16);
}
.bpga-shot-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--bpga-grad-soft);
	border-bottom: 1px solid #e3edf3;
}
.bpga-shot-bar span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ccdde8;
}
.bpga-shot-bar span:first-child { background: var(--bpga-green); opacity: .55; }
.bpga-shot-bar em {
	font-family: var(--bpga-mono);
	font-style: normal;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--bpga-gray);
	background: #fff;
	border: 1px solid #e3edf3;
	border-radius: 999px;
	padding: 3px 12px;
	margin-left: 8px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bpga-shot-view {
	max-height: 360px;
	overflow: hidden;
	background: #f6fafc;
}
.bpga-shot img {
	width: 100%;
	display: block;
}
.bpga-shot .bpga-label { margin: 12px 0 0 4px; }

.bpga-subhead {
	font-size: 20px;
	font-weight: 700;
	margin: 30px 0 12px;
}
.bpga-suggestions {
	margin: 0 0 30px;
	padding: 0 0 0 0;
	list-style: none;
	counter-reset: bpga-s;
	display: grid;
	gap: 12px;
}
.bpga-suggestions li {
	counter-increment: bpga-s;
	position: relative;
	background: #fff;
	border: 1px solid var(--bpga-line);
	border-radius: 16px;
	padding: 16px 20px 16px 62px;
	font-size: 15px;
}
.bpga-suggestions li::before {
	content: counter(bpga-s, decimal-leading-zero);
	position: absolute;
	left: 20px; top: 16px;
	font-family: var(--bpga-mono);
	font-weight: 700;
	font-size: 14px;
	background: var(--bpga-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* CTA box — like the early-bird price strip */
.bpga-cta-box {
	background: var(--bpga-mint);
	border-radius: 18px;
	padding: 26px 30px;
	text-align: center;
}
.bpga-cta-text { max-width: 620px; margin: 0 auto 18px; color: var(--bpga-ink); }
.bpga-cta-box .bpga-trust { margin-top: 14px; }

/* Consent */
.bpga-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--bpga-gray);
	max-width: 560px;
	margin: 4px 0 0 4px;
}
.bpga-consent input { margin-top: 3px; }
.bpga-consent a { color: var(--bpga-blue); }

/* ---------- Modal ---------- */

.bpga-modal { position: fixed; inset: 0; z-index: 99999; }
.bpga-modal[hidden] { display: none; }
.bpga-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(14, 42, 58, .55);
	backdrop-filter: blur(3px);
}
.bpga-modal-card {
	position: relative;
	max-width: 480px;
	margin: 10vh auto 0;
	background: #fff;
	border-radius: var(--bpga-radius);
	padding: 34px 34px 28px;
	box-shadow: 0 30px 80px rgba(14, 42, 58, .35);
	animation: bpga-fade .25s ease;
}
.bpga-modal-title { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.bpga-modal-text { color: var(--bpga-gray); font-size: 14px; margin: 0 0 20px; }
.bpga-modal-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* Turnstile box spacing */
#bpga-turnstile-box { margin: 8px 0; }

/* Ellipsis animation */
.bpga-ellipsis { display: inline-block; animation: bpga-blink 1.2s steps(1) infinite; }
@keyframes bpga-blink { 50% { opacity: 0; } }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.bpga { padding: 0; }
	.bpga-shell { padding: 18px 14px 22px; border-radius: 16px; }
	.bpga-badge-pill { margin-bottom: 12px; padding: 6px 13px; font-size: 10px; }
	.bpga-headline { margin-bottom: 10px; }
	.bpga-lead { margin-bottom: 16px; font-size: 15px; }
	.bpga-summary { margin-bottom: 16px; font-size: 15px; padding: 12px 14px; }
	.bpga-field-row { flex-direction: column; align-items: stretch; gap: 10px; }
	.bpga-field { flex: 0 0 auto; }
	.bpga-btn { width: 100%; padding: 15px 20px; }
	.bpga-btn-lg { padding: 16px 20px; font-size: 13px; }
	.bpga-tiles { gap: 10px; }
	.bpga-tile { flex: 1 1 28%; min-width: 88px; padding: 12px 8px; }
	.bpga-steps { margin-bottom: 20px; }
	.bpga-progress { margin: 10px 0 18px; }
	.bpga-result-grid { gap: 16px; }
	.bpga-result-right { flex-basis: 100%; }
	.bpga-subhead { margin: 20px 0 10px; }
	.bpga-suggestions { gap: 10px; margin-bottom: 20px; }
	.bpga-suggestions li { padding: 13px 14px 13px 52px; font-size: 14px; }
	.bpga-suggestions li::before { left: 15px; top: 13px; }
	.bpga-cta-box { padding: 18px 14px; }
	.bpga-trust { margin-top: 14px; font-size: 9px; letter-spacing: .14em; }
	.bpga-modal-card { margin: 5vh 12px 0; padding: 22px 18px; }
	.bpga-catlist { margin-top: 12px; }
}