/* Haagala Quiz — multi-step, RTL, mobile-first */
/* Design System v3.0 — dark+gold theme */
/* Tokens inherited from landing-page.css :root */

:root {
	--lp-focus-ring: rgba(232,184,109,0.25); /* gold glow focus ring */
}

.lp-quiz-section {
	accent-color: var(--lp-gold, #C8973A);
}

.lp-quiz-section ::selection {
	background-color: var(--lp-gold, #C8973A);
	color: #0C0C0E;
}

/* ——— Section wrapper ——— */
.lp-quiz-section {
	background: var(--lp-bg-surface-2, #1C1C22);
	padding-block: 64px;
}

/* ——— Header ——— */
.lp-quiz-section__header {
	text-align: center;
	margin-block-end: 40px;
}

/* ——— Quiz Card ——— */
.lp-quiz-card {
	background: var(--lp-bg-surface, #141418);
	border: 1px solid var(--lp-border, rgba(200,151,58,0.18));
	border-radius: var(--lp-radius-lg, 16px);
	box-shadow: var(--lp-shadow-2, 0 4px 16px rgba(0,0,0,.50));
	padding: 24px;
	max-width: 560px;
	margin-inline: auto;
}

/* ——— Progress ——— */
.lp-quiz-progress {
	margin-block-end: 32px;
}

.lp-quiz-progress__bar {
	height: 4px;
	background: var(--lp-border, rgba(200,151,58,0.18));
	border-radius: var(--lp-radius-full, 9999px);
	overflow: hidden;
	margin-block-end: 8px;
}

.lp-quiz-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--lp-gold, #C8973A), var(--lp-gold-light, #E8B86D));
	border-radius: var(--lp-radius-full, 9999px);
	width: 12.5%;
	transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-quiz-progress__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lp-text-secondary, #9D9585);
	display: block;
	text-align: right;
}

/* ——— Steps ——— */
.lp-quiz-steps {
	position: relative;
	overflow: hidden;
	min-height: 200px;
}

.lp-quiz-step {
	display: none;
}

.lp-quiz-step.is-active {
	display: block;
}

/* ——— Step question ——— */
.lp-quiz-step__question {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lp-text-primary, #F0EBE0);
	margin-block-end: 20px;
	text-align: right;
}

/* ——— Choice Cards grid ——— */
.lp-quiz-choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

/* ——— Choice Card ——— */
.lp-quiz-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--lp-border, rgba(200,151,58,0.18));
	border-radius: var(--lp-radius-md, 8px);
	background: var(--lp-bg-surface-2, #1C1C22);
	cursor: pointer;
	text-align: right;
	direction: rtl;
	transition:
		background var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
		border-color var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
		box-shadow var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
		transform var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1));
	width: 100%;
	font-size: 15px;
	font-weight: 400;
	color: var(--lp-text-primary, #F0EBE0);
	line-height: 1.4;
}

.lp-quiz-choice:hover {
	background: var(--lp-bg-surface-hover, #2A2A38);
	border-color: var(--lp-border-strong, rgba(200,151,58,0.40));
	box-shadow: var(--lp-shadow-1, 0 1px 3px rgba(0,0,0,.40));
	transform: translateY(-1px);
}

.lp-quiz-choice:focus-visible {
	outline: 2px solid var(--lp-gold-light, #E8B86D);
	outline-offset: 3px;
}

.lp-quiz-choice.is-selected {
	background: rgba(200,151,58,0.12);
	border-color: var(--lp-gold, #C8973A);
	border-width: 2px;
	color: var(--lp-gold-light, #E8B86D);
	font-weight: 500;
}

/* ——— Checkmark ——— */
.lp-quiz-choice__check {
	width: 20px;
	height: 20px;
	border-radius: var(--lp-radius-full, 9999px);
	border: 2px solid var(--lp-border, rgba(200,151,58,0.18));
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
	            background var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1));
}

.lp-quiz-choice.is-selected .lp-quiz-choice__check {
	background: var(--lp-gold, #C8973A);
	border-color: var(--lp-gold, #C8973A);
}

.lp-quiz-choice__check svg {
	opacity: 0;
	transition: opacity 150ms ease-out, transform 150ms cubic-bezier(0, 0, 0.2, 1);
	transform: scale(0.6);
	color: #0C0C0E;
}

.lp-quiz-choice.is-selected .lp-quiz-choice__check svg {
	opacity: 1;
	transform: scale(1);
}

/* ——— Input fields ——— */
.lp-quiz-field {
	margin-block-end: 4px;
}

.lp-quiz-field__label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--lp-text-secondary, #9D9585);
	margin-block-end: 6px;
	text-align: right;
}

.lp-quiz-field__input {
	width: 100%;
	padding-block: 12px;
	padding-inline: 16px;
	border: 1px solid var(--lp-border, rgba(200,151,58,0.18));
	border-radius: var(--lp-radius-md, 8px);
	font-size: 16px;
	color: var(--lp-text-primary, #F0EBE0);
	background: var(--lp-bg-surface-2, #1C1C22);
	direction: rtl;
	text-align: right;
	transition: border-color var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
	            box-shadow var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1));
	box-sizing: border-box;
	font-family: inherit;
	appearance: none;
}

.lp-quiz-field__input::placeholder {
	color: var(--lp-text-secondary, #9D9585);
}

.lp-quiz-field__input:focus-visible {
	outline: 2px solid var(--lp-gold, #C8973A);
	outline-offset: 2px;
	border-color: var(--lp-gold, #C8973A);
	box-shadow: 0 0 0 3px var(--lp-focus-ring, rgba(232,184,109,0.25));
}
.lp-quiz-field__input:focus:not(:focus-visible) {
	outline: none;
	border-color: var(--lp-gold, #C8973A);
	box-shadow: 0 0 0 3px var(--lp-focus-ring, rgba(232,184,109,0.25));
}

.lp-quiz-field__input--error {
	border-color: var(--lp-error, #EF5350);
}

.lp-quiz-field__error {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--lp-error, #EF5350);
	margin-block-start: 6px;
	text-align: right;
	min-height: 18px;
}

.lp-quiz-field__helper {
	display: block;
	font-size: 12px;
	color: var(--lp-text-secondary, #9D9585);
	margin-block-start: 4px;
	text-align: right;
}

/* ——— Navigation ——— */
.lp-quiz-nav {
	display: flex;
	justify-content: flex-start;
	gap: 12px;
	margin-block-start: 28px;
	flex-direction: row-reverse;
}

.lp-quiz-btn {
	padding-block: 13px;
	padding-inline: 28px;
	border-radius: var(--lp-radius-full, 9999px);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
	            box-shadow var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1)),
	            transform var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1));
	font-family: inherit;
	line-height: 1;
}

.lp-quiz-btn--primary {
	background: linear-gradient(135deg, var(--lp-gold-light, #E8B86D) 0%, var(--lp-gold, #C8973A) 60%, var(--lp-gold-dark, #8B6520) 100%);
	color: #0C0C0E;
	box-shadow: var(--lp-shadow-gold, 0 0 24px rgba(200,151,58,0.28));
}

.lp-quiz-btn--primary:hover:not(:disabled) {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: var(--lp-shadow-gold-hover, 0 0 36px rgba(200,151,58,0.45), 0 8px 24px rgba(0,0,0,.60));
}

.lp-quiz-btn--primary:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}

.lp-quiz-btn--primary:focus-visible {
	outline: 2px solid var(--lp-gold-light, #E8B86D);
	outline-offset: 3px;
}

.lp-quiz-btn--primary:disabled {
	background: var(--lp-border, rgba(200,151,58,0.18));
	color: var(--lp-text-muted, #5A5550);
	box-shadow: none;
	cursor: not-allowed;
}

.lp-quiz-btn--ghost {
	background: transparent;
	color: var(--lp-gold, #C8973A);
	border: 1px solid var(--lp-border-strong, rgba(200,151,58,0.40));
}

.lp-quiz-btn--ghost:hover {
	background: var(--lp-gold-glow, rgba(200,151,58,0.18));
	border-color: var(--lp-gold, #C8973A);
	transform: translateY(-1px);
}

.lp-quiz-btn--ghost:focus-visible {
	outline: 2px solid var(--lp-gold-light, #E8B86D);
	outline-offset: 3px;
}

/* ——— Disqualification & Success screens ——— */
.lp-quiz-special {
	text-align: center;
	padding-block: 48px;
	padding-inline: 24px;
}

.lp-quiz-special__icon {
	margin-block-end: 20px;
	color: var(--lp-border, rgba(200,151,58,0.18));
}

.lp-quiz-special__icon--success {
	color: var(--lp-success, #4CAF50);
}

.lp-quiz-special__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--lp-text-primary, #F0EBE0);
	margin-block-end: 12px;
}

.lp-quiz-special__body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--lp-text-secondary, #9D9585);
	margin-block-end: 28px;
	max-width: 400px;
	margin-inline: auto;
}

.lp-quiz-special__back {
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-gold-light, #E8B86D);
	text-decoration: none;
}

.lp-quiz-special__back:hover {
	text-decoration: underline;
}

.lp-quiz-special__back--video {
	display: block;
	margin-block-start: 12px;
}

/* ——— Redirect countdown bar ——— */
.lp-quiz-countdown {
	height: 4px;
	background: var(--lp-border, rgba(200,151,58,0.18));
	border-radius: var(--lp-radius-full, 9999px);
	overflow: hidden;
	margin-block: 20px;
}

.lp-quiz-countdown__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--lp-gold, #C8973A), var(--lp-gold-light, #E8B86D));
	border-radius: var(--lp-radius-full, 9999px);
	width: 100%;
	transition: width 3000ms linear;
}

.lp-quiz-countdown__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lp-text-secondary, #9D9585);
}

/* ——— Toast ——— */
.lp-quiz-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--lp-bg-surface-2, #1C1C22);
	color: var(--lp-text-primary, #F0EBE0);
	border: 1px solid var(--lp-border, rgba(200,151,58,0.18));
	padding: 12px 20px;
	border-radius: var(--lp-radius-md, 8px);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
	white-space: nowrap;
}

.lp-quiz-toast.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.lp-quiz-toast__retry {
	background: transparent;
	border: none;
	color: var(--lp-gold-light, #E8B86D);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}

/* ——— Tablet 2-col grid for choices ——— */
@media (min-width: 480px) {
	.lp-quiz-choices--two-col {
		grid-template-columns: 1fr 1fr;
	}
}

/* ——— Desktop padding ——— */
@media (min-width: 768px) {
	.lp-quiz-card {
		padding: 32px;
	}
}

/* ——— Animations ——— */
@keyframes lp-quiz-slide-in-fwd {
	from { transform: translateX(40px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

@keyframes lp-quiz-slide-in-back {
	from { transform: translateX(-40px); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

.lp-quiz-step.is-entering-fwd {
	animation: lp-quiz-slide-in-fwd 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

.lp-quiz-step.is-entering-back {
	animation: lp-quiz-slide-in-back 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.lp-quiz-section *,
	.lp-quiz-section *::before,
	.lp-quiz-section *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}