/**
 * Quiz Funnel — front-end modal styles.
 * All visual tokens are CSS custom properties, overridable per-quiz via inline
 * style on .qzf-modal (see qzf_design_to_css_vars()).
 */

.qzf-modal {
	--qzf-navy: #0F3355;
	--qzf-navy-dark: #0A2540;
	--qzf-option-bg: #EEF2F5;
	--qzf-option-hover: #E2E9EF;
	--qzf-option-selected-bg: #E4EDF5;
	--qzf-option-selected-border: #0F3355;
	--qzf-track: #C6D2DC;
	--qzf-success: #1F9D55;
	--qzf-body: #46586B;
	--qzf-disabled-bg: #E9EDF1;
	--qzf-disabled-text: #A3AEB9;
	--qzf-radius-card: 6px;
	--qzf-radius-btn: 999px;
	--qzf-modal-radius: 4px;
	--qzf-font-heading: Georgia, 'Times New Roman', serif;
	--qzf-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
	--qzf-heading-size: 32px;
	--qzf-maxwidth: 1000px;
}

/* Trigger button (inline shortcode).
   The design tokens live on .qzf-modal, which is NOT an ancestor of the
   trigger, so every var() here needs an explicit fallback or the button
   renders white-on-transparent (invisible). Per-quiz colours are also
   passed inline on the element itself by the shortcode. */
.qzf-trigger {
	display: inline-block;
	background: var(--qzf-navy, #0F3355);
	color: var(--qzf-trigger-text, #fff);
	font-family: var(--qzf-font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--qzf-radius-btn, 999px);
	cursor: pointer;
	text-decoration: none;
}
.qzf-trigger:hover { background: var(--qzf-navy-dark, #0A2540); }

/* Overlay */
.qzf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 35, 55, .45);
	font-family: var(--qzf-font-body);
	color: var(--qzf-body);
	padding: 24px;
	box-sizing: border-box;
}
.qzf-modal.is-open { display: flex; }
.qzf-modal * { box-sizing: border-box; }

/* Panel */
.qzf-panel {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: var(--qzf-maxwidth);
	max-height: 90vh;
	overflow-y: auto;
	border-radius: var(--qzf-modal-radius);
	padding: 48px 64px 56px;
	box-shadow: 0 20px 60px rgba(10, 37, 64, .25);
}

/* Close button */
.qzf-close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #5b6b7b;
	font-size: 26px;
	line-height: 1;
	padding: 0;
}
.qzf-close:hover { color: var(--qzf-navy); }

/* Header: eyebrow + counter + progress */
.qzf-head { text-align: center; }
.qzf-eyebrow {
	color: var(--qzf-navy);
	font-size: 14px;
	letter-spacing: .01em;
	margin: 0 0 6px;
}
.qzf-counter {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 14px;
}
.qzf-counter .qzf-current { color: var(--qzf-navy); }
.qzf-counter .qzf-total { color: #9aa7b3; font-weight: 400; }

.qzf-progress {
	height: 4px;
	background: var(--qzf-track);
	border-radius: 2px;
	max-width: 360px;
	margin: 0 auto 28px;
	overflow: hidden;
}
.qzf-progress-fill {
	height: 100%;
	width: 0;
	background: var(--qzf-navy);
	border-radius: 2px;
	transition: width .35s ease;
}
.qzf-progress.is-complete .qzf-progress-fill { background: var(--qzf-success); }

.qzf-progress-wrap { position: relative; max-width: 360px; margin: 0 auto 28px; }
.qzf-progress-wrap .qzf-progress { margin-bottom: 0; }
.qzf-check {
	position: absolute;
	right: -26px;
	top: -8px;
	width: 20px;
	height: 20px;
	color: var(--qzf-success);
	display: none;
}
.qzf-progress-wrap.is-complete .qzf-check { display: block; }

/* Headline / subtext / helper */
.qzf-headline {
	font-family: var(--qzf-font-heading);
	color: var(--qzf-navy);
	font-size: var(--qzf-heading-size);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 10px;
	font-weight: 700;
}
.qzf-subtext {
	text-align: center;
	color: var(--qzf-body);
	font-size: 16px;
	margin: 0 auto 10px;
	max-width: 760px;
}
.qzf-helper {
	text-align: center;
	color: var(--qzf-body);
	font-size: 15px;
	margin: 0 0 28px;
}

/* Options */
.qzf-options {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 940px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.qzf-option { position: relative; }
.qzf-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.qzf-option label {
	display: block;
	background: var(--qzf-option-bg);
	border: 2px solid transparent;
	border-radius: var(--qzf-radius-card);
	padding: 20px 24px;
	text-align: center;
	color: var(--qzf-navy);
	font-size: 16px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.qzf-option label:hover { background: var(--qzf-option-hover); }
.qzf-option input:checked + label {
	background: var(--qzf-option-selected-bg);
	border-color: var(--qzf-option-selected-border);
}
.qzf-option input:focus-visible + label {
	outline: 2px solid var(--qzf-navy);
	outline-offset: 2px;
}
.qzf-option.is-flash label { background: var(--qzf-option-selected-bg); border-color: var(--qzf-option-selected-border); }

/* Text-type question inputs */
.qzf-text-field {
	max-width: 520px;
	margin: 0 auto;
}
.qzf-text-field input {
	width: 100%;
	background: var(--qzf-option-bg);
	border: 2px solid transparent;
	border-radius: var(--qzf-radius-card);
	padding: 16px 18px;
	font-size: 16px;
	color: var(--qzf-navy);
}
.qzf-text-field input:focus { outline: none; border-color: var(--qzf-navy); }

/* Footer nav */
.qzf-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 40px;
}
.qzf-footer.has-back { justify-content: center; }
.qzf-back {
	background: none;
	border: 0;
	color: var(--qzf-navy);
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
}
.qzf-back[hidden] { display: none; }
.qzf-continue {
	background: var(--qzf-navy);
	color: #fff;
	border: 0;
	border-radius: var(--qzf-radius-btn);
	font-size: 16px;
	font-weight: 600;
	padding: 15px 34px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.qzf-continue:hover { background: var(--qzf-navy-dark); }
.qzf-continue:disabled,
.qzf-submit:disabled {
	background: var(--qzf-disabled-bg);
	color: var(--qzf-disabled-text);
	cursor: not-allowed;
}

/* Contact step */
.qzf-contact-fields {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.qzf-field input {
	width: 100%;
	background: var(--qzf-option-bg);
	border: 2px solid transparent;
	border-radius: var(--qzf-radius-card);
	padding: 16px 18px;
	font-size: 16px;
	color: var(--qzf-navy);
}
.qzf-field input::placeholder { color: #6b7c8c; }
.qzf-field input:focus { outline: none; border-color: var(--qzf-navy); }
.qzf-field.is-invalid input { border-color: #c0392b; }
.qzf-field .qzf-error {
	color: #c0392b;
	font-size: 13px;
	margin: 6px 2px 0;
	display: none;
}
.qzf-field.is-invalid .qzf-error { display: block; }

.qzf-consent {
	max-width: 560px;
	margin: 16px auto 0;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--qzf-body);
}
.qzf-consent input { margin-top: 3px; }
.qzf-disclaimer {
	max-width: 700px;
	margin: 18px auto 0;
	font-size: 12px;
	line-height: 1.5;
	color: #7b8996;
	text-align: center;
}
.qzf-disclaimer a { color: var(--qzf-navy); }

.qzf-form-error {
	max-width: 560px;
	margin: 0 auto 16px;
	background: #fdecea;
	border: 1px solid #f5c6c0;
	color: #a12b1e;
	padding: 12px 16px;
	border-radius: var(--qzf-radius-card);
	font-size: 14px;
	text-align: center;
}

/* Honeypot */
.qzf-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* Spinner */
.qzf-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: qzf-spin .7s linear infinite;
	margin-right: 8px;
	vertical-align: -2px;
}
@keyframes qzf-spin { to { transform: rotate(360deg); } }

/* Success screen */
.qzf-success { text-align: center; padding: 20px 0; }
.qzf-success-check {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	color: var(--qzf-success);
}
.qzf-success-headline {
	font-family: var(--qzf-font-heading);
	color: var(--qzf-navy);
	font-size: 28px;
	margin: 0 0 12px;
}
.qzf-success-message { font-size: 16px; color: var(--qzf-body); max-width: 600px; margin: 0 auto; }

/* Chevron glyphs */
.qzf-chevron { width: 14px; height: 14px; }

/* Responsive: full-screen sheet under 768px */
@media (max-width: 768px) {
	.qzf-modal { padding: 0; align-items: stretch; }
	.qzf-panel {
		max-width: none;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
		padding: 56px 20px 32px;
	}
	.qzf-headline { font-size: 24px; }
	.qzf-options { gap: 12px; }
	.qzf-option label { padding: 16px; }
	.qzf-footer { flex-direction: column-reverse; gap: 16px; }
	.qzf-continue,
	.qzf-submit { width: 100%; justify-content: center; }
	.qzf-back { width: 100%; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.qzf-progress-fill { transition: none; }
	.qzf-spinner { animation: none; }
}

/* Body scroll lock helper */
body.qzf-lock { overflow: hidden; }

/* Inline (embedded) mode — renders in the page flow, no overlay/backdrop.
   Shares .qzf-modal so it inherits the design tokens, but is not fixed. */
.qzf-modal.qzf-inline,
.qzf-modal.qzf-inline.is-open {
	position: static;
	inset: auto;
	display: block;
	background: none;
	padding: 0;
	z-index: auto;
}
.qzf-inline .qzf-panel {
	position: static;
	max-height: none;
	height: auto;
	overflow: visible;
	margin: 0 auto;
	padding: 40px 48px;
	border: 1px solid #e3e8ec;
	box-shadow: 0 4px 20px rgba(10, 37, 64, .06);
}
@media (max-width: 768px) {
	.qzf-inline .qzf-panel {
		height: auto;
		padding: 28px 18px;
	}
}