/* ================================================================
   ARVINITY QUALIFIER — FRONT-END STYLES

   Colors are pulled from the active theme's CSS variables first
   (--accent, --bg-onyx, --surface-charcoal, etc. — matching the
   Arvinity Studio design tokens) and fall back to the brand's own
   values if the theme doesn't define them. A quiz's Appearance
   settings can override --aq-accent per instance via an inline
   style attribute on .aq-quiz-wrap.
================================================================ */

.aq-quiz-wrap {
	--aq-accent:        var(--accent, #7A2CFF);
	--aq-accent-hover:  var(--accent-hover, #621acc);
	--aq-bg:            var(--bg-onyx, #0D0F12);
	--aq-surface:       var(--surface-charcoal, #1A1D24);
	--aq-text:          var(--text-light, #F5F7FA);
	--aq-muted:         var(--text-muted, #8A95A0);
	--aq-border:        var(--border-default, rgba(255, 255, 255, 0.09));
	--aq-radius:        2px;
	--aq-font:          var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--aq-font-display:  var(--font-display, "Bebas Neue", Impact, sans-serif);

	background: var(--aq-surface);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--aq-radius);
	overflow: hidden;
	font-family: var(--aq-font);
	color: var(--aq-text);
	max-width: 520px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.aq-quiz-wrap * { box-sizing: border-box; }

.aq-header {
	padding: 2rem 2.25rem 1.75rem;
	background: linear-gradient(135deg, rgba(122, 44, 255, 0.14) 0%, rgba(122, 44, 255, 0.02) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.aq-progress-label {
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--aq-accent);
	margin: 0 0 0.5rem;
}

.aq-card-heading {
	font-family: var(--aq-font-display);
	font-weight: 400;
	letter-spacing: 0.03em;
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--aq-text);
	margin: 0 0 0.375rem;
}

.aq-card-subheading {
	font-size: 0.8125rem;
	color: var(--aq-muted);
	margin: 0;
}

.aq-progress-bar {
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	overflow: hidden;
	margin-top: 1.25rem;
}

.aq-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--aq-accent);
	border-radius: 100px;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.aq-body { padding: 2rem 2.25rem 2.25rem; }

.aq-step { display: none; }
.aq-step.active { display: block; animation: aqFade 0.35s ease both; }
@keyframes aqFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aq-question {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--aq-text);
	line-height: 1.4;
	margin: 0 0 1.5rem;
}

.aq-options { display: flex; flex-direction: column; gap: 0.75rem; }

.aq-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.25rem;
	background: var(--aq-bg);
	border: 1px solid var(--aq-border);
	border-radius: var(--aq-radius);
	color: var(--aq-text);
	font-family: var(--aq-font);
	font-size: 0.9375rem;
	font-weight: 300;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.aq-option:hover     { border-color: var(--aq-accent); background: rgba(122, 44, 255, 0.06); transform: translateX(2px); }
.aq-option.selected  { border-color: var(--aq-accent); background: rgba(122, 44, 255, 0.1); }

.aq-option-arrow {
	opacity: 0;
	color: var(--aq-accent);
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}
.aq-option:hover .aq-option-arrow,
.aq-option.selected .aq-option-arrow { opacity: 1; }

.aq-back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1.5rem;
	font-size: 0.8rem;
	color: var(--aq-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--aq-font);
}
.aq-back:hover { color: var(--aq-accent); }
.aq-back[hidden] { display: none; }

.aq-loading { text-align: center; padding: 2.5rem 0; }
.aq-loading-spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(122, 44, 255, 0.2);
	border-top-color: var(--aq-accent);
	margin: 0 auto 1.25rem;
	animation: aqSpin 0.8s linear infinite;
}
@keyframes aqSpin { to { transform: rotate(360deg); } }
.aq-loading p { font-size: 0.875rem; color: var(--aq-muted); margin: 0; }

.aq-result-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.4rem 0.875rem;
	border-radius: 100px;
	margin-bottom: 1.25rem;
	background: rgba(122, 44, 255, 0.1);
	border: 1px solid rgba(122, 44, 255, 0.25);
	color: var(--aq-accent);
}

.aq-result-heading {
	font-family: var(--aq-font-display);
	font-weight: 400;
	letter-spacing: 0.03em;
	font-size: 1.625rem;
	line-height: 1.15;
	color: var(--aq-text);
	margin: 0 0 0.75rem;
}

.aq-result-body {
	font-size: 0.875rem;
	color: var(--aq-muted);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.aq-restart {
	display: inline-block;
	margin-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--aq-muted);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--aq-font);
}
.aq-restart:hover { color: var(--aq-accent); }

.aq-embed-placeholder {
	padding: 1.5rem;
	border: 1px dashed rgba(122, 44, 255, 0.3);
	border-radius: var(--aq-radius);
	background: rgba(122, 44, 255, 0.03);
	font-family: monospace;
	font-size: 0.8rem;
	color: var(--aq-muted);
	line-height: 1.6;
}

/* Whatever gets embedded here — a Calendly widget, an iframe, a
   scheduler script's rendered output — shouldn't be able to blow out
   the card width on narrow screens. */
.aq-form-embed iframe,
.aq-form-embed img,
.aq-form-embed video {
	max-width: 100%;
}

@media (max-width: 480px) {
	.aq-header { padding: 1.5rem 1.5rem 1.25rem; }
	.aq-body   { padding: 1.5rem; }
}