/* Ilfov Quiz — Variant B: Full-screen wizard */
.iq-quiz {
	--iq-green-dark: #2d5a27;
	--iq-green-mid: #3d7232;
	--iq-green-light: #eef7ec;
	--iq-amber: #c8860a;
	--iq-cream: #fdfaf4;
	--iq-bg: #f5f0e8;
	--iq-text: #2c2010;
	--iq-muted: #7a6a50;
	--iq-border: #e8e0d0;

	position: relative;
	min-height: 100vh;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	background: transparent;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--iq-text);
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

/* === Top progress bar — minimal, native, no background === */
.iq-topbar {
	background: transparent;
	padding: 24px 5vw 8px;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.iq-topbar-counter {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--iq-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
	min-width: 60px;
	white-space: nowrap;
}
.iq-topbar-counter span { color: var(--iq-muted); opacity: .6; }
.iq-topbar-progress {
	flex: 1;
	height: 2px;
	background: rgba(122, 106, 80, 0.12);
	border-radius: 2px;
	overflow: hidden;
}
.iq-topbar-progress-fill {
	height: 100%;
	background: var(--iq-color, var(--iq-green-dark));
	transition: width .5s cubic-bezier(.4, 0, .2, 1);
	width: 0;
}
.iq-topbar-brand {
	font-size: 11px;
	color: var(--iq-muted);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 600;
	opacity: .6;
}

/* === Step container === */
.iq-stage {
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 30px 5vw 60px;
}
.iq-quiz[data-current-step="0"] .iq-stage { padding-top: 60px; }
.iq-step {
	width: 100%;
	max-width: 720px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.iq-step[hidden] { display: none; }
.iq-step.iq-step--entering {
	opacity: 0;
	transform: translateX(20px);
}

/* === Breadcrumbs (centered, inside intro) === */
.iq-breadcrumbs {
	font-size: 13px;
	color: var(--iq-muted);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.iq-breadcrumbs a {
	color: var(--iq-color, var(--iq-green-dark));
	text-decoration: none;
	transition: color .2s;
}
.iq-breadcrumbs a:hover { text-decoration: underline; }
.iq-bc-sep { color: var(--iq-muted); font-size: 14px; opacity: .5; }
.iq-bc-current { color: var(--iq-text); font-weight: 600; }

/* Hide topbar on intro step */
.iq-quiz[data-current-step="0"] .iq-topbar { display: none !important; }

/* === INTRO === */
.iq-step-intro { text-align: center; }
.iq-intro-tag {
	display: inline-block;
	padding: 6px 16px;
	background: var(--iq-green-light);
	color: var(--iq-color, var(--iq-green-dark));
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.iq-step-intro .iq-intro-title,
.iq-step-intro h1 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	color: var(--iq-text);
	margin: 0 0 20px;
	line-height: 1.15;
	letter-spacing: -.02em;
	padding: 0;
}
.iq-intro {
	color: var(--iq-muted);
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.7;
	max-width: 540px;
	margin: 0 auto 40px;
}
.iq-intro-meta {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.iq-intro-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--iq-muted);
}
.iq-intro-meta-item strong { color: var(--iq-text); font-weight: 700; }

/* === Name capture on intro === */
.iq-name-capture {
	max-width: 400px;
	margin: 0 auto 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.iq-name-capture label {
	font-size: 15px;
	font-weight: 600;
	color: var(--iq-text);
	margin-bottom: 2px;
}
.iq-name-capture input[type=text] {
	width: 100%;
	padding: 14px 18px;
	background: #fff;
	border: 2px solid var(--iq-border);
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--iq-text);
	box-sizing: border-box;
	transition: all .2s;
	text-align: center;
}
.iq-name-capture input:focus {
	outline: none;
	border-color: var(--iq-color, var(--iq-green-dark));
	box-shadow: 0 0 0 4px rgba(45, 90, 39, 0.1);
}
.iq-name-capture input.iq-input-error {
	border-color: #dc2626;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* === Greeting bar on question steps === */
.iq-greeting {
	text-align: center;
	font-size: 14px;
	color: var(--iq-color, var(--iq-green-dark));
	font-weight: 600;
	margin-bottom: 8px;
	min-height: 20px;
}
.iq-greeting:empty { display: none; }

/* === QUESTION === */
.iq-step-question { display: flex; flex-direction: column; }
.iq-q-header { margin-bottom: 36px; text-align: center; }
.iq-q-num {
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	color: var(--iq-muted);
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 600;
}
.iq-q-num span { color: var(--iq-color, var(--iq-green-dark)); }
.iq-q-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 700;
	color: var(--iq-text);
	margin: 0;
	line-height: 1.25;
	letter-spacing: -.01em;
}

/* === Options — big rounded buttons === */
.iq-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 auto 30px;
	max-width: 600px;
	width: 100%;
}
.iq-option {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 26px;
	background: #fff;
	border: 2px solid var(--iq-border);
	border-radius: 16px;
	cursor: pointer;
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	font-size: 16px;
	color: var(--iq-text);
	user-select: none;
}
.iq-option:hover {
	border-color: var(--iq-color, var(--iq-green-dark));
	transform: translateX(4px);
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.iq-option input[type=radio],
.iq-option input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Radio indicator (single select) */
.iq-option-radio {
	width: 22px;
	height: 22px;
	border: 2px solid var(--iq-border);
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s;
}
.iq-option-radio::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--iq-color, var(--iq-green-dark));
	transform: scale(0);
	transition: transform .2s;
}
.iq-option:has(input:checked) {
	border-color: var(--iq-color, var(--iq-green-dark));
	background: color-mix(in srgb, var(--iq-color, var(--iq-green-dark)) 6%, white);
}
.iq-option:has(input:checked) .iq-option-radio { border-color: var(--iq-color, var(--iq-green-dark)); }
.iq-option:has(input:checked) .iq-option-radio::after { transform: scale(1); }
.iq-option:has(input:checked) span { color: var(--iq-color, var(--iq-green-dark)); font-weight: 600; }

/* Checkbox indicator (multi select) */
.iq-option-checkbox {
	width: 22px;
	height: 22px;
	border: 2px solid var(--iq-border);
	border-radius: 6px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s;
}
.iq-option--multi:has(input:checked) .iq-option-checkbox {
	border-color: var(--iq-color, var(--iq-green-dark));
	background: var(--iq-color, var(--iq-green-dark));
}
.iq-option--multi:has(input:checked) .iq-option-checkbox::after {
	content: '✓';
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* Continue button for multi-select (disabled state) */
.iq-btn-continue-multi:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* === Selected option micro-animation === */
.iq-option--selected {
	border-color: var(--iq-color, var(--iq-green-dark)) !important;
	background: color-mix(in srgb, var(--iq-color, var(--iq-green-dark)) 8%, white) !important;
	transform: scale(0.98);
}
.iq-option--selected::after {
	content: '\2713';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
	color: var(--iq-color, var(--iq-green-dark));
	animation: iq-check-in 0.3s ease;
}
@keyframes iq-check-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.5); }
	to { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Prefilled indicator */
.iq-option.iq-prefilled::before {
	content: '';
	position: absolute;
	right: 24px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--iq-color, var(--iq-green-dark));
}

/* === Navigation buttons === */
.iq-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}
.iq-nav-spacer { flex: 1; }
.iq-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	border-radius: 100px;
	border: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	white-space: nowrap;
}
.iq-btn-primary {
	background: var(--iq-color, var(--iq-green-dark));
	color: #fff;
	box-shadow: 0 4px 16px rgba(45, 90, 39, 0.25);
}
.iq-btn-primary:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(45, 90, 39, 0.35);
}
.iq-btn-secondary {
	background: rgba(255, 255, 255, 0.8);
	color: var(--iq-color, var(--iq-green-dark));
	border: 2px solid var(--iq-color, var(--iq-green-dark));
}
.iq-btn-secondary:hover { background: var(--iq-green-light); }
.iq-btn-back {
	background: transparent;
	color: var(--iq-muted);
	padding: 14px 20px;
}
.iq-btn-back:hover { color: var(--iq-text); }
.iq-btn-small {
	padding: 10px 22px;
	font-size: 13px;
}
.iq-btn-ghost {
	background: transparent;
	color: var(--iq-muted);
	border: 1px solid var(--iq-border);
}
.iq-btn-ghost:hover {
	color: var(--iq-text);
	border-color: var(--iq-text);
}
.iq-link {
	color: var(--iq-muted);
	font-size: 13px;
	display: inline-block;
	margin-top: 16px;
	text-decoration: underline;
}

/* === Resume banner === */
.iq-resume-banner {
	background: color-mix(in srgb, var(--iq-color, var(--iq-green-dark)) 8%, white);
	border: 1px solid color-mix(in srgb, var(--iq-color, var(--iq-green-dark)) 25%, transparent);
	border-radius: 14px;
	padding: 20px 24px;
	margin: 0 auto 28px;
	max-width: 460px;
	text-align: center;
}
.iq-resume-banner p {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--iq-text);
	font-weight: 500;
}
.iq-resume-banner .iq-btn {
	margin: 0 6px;
}

/* === Share buttons === */
.iq-share-quiz {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto 28px;
	flex-wrap: wrap;
}
.iq-share-quiz span {
	font-size: 13px;
	color: var(--iq-muted);
}
.iq-share-btn-small {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: 1px solid var(--iq-border);
	background: #fff;
	color: var(--iq-text);
	text-decoration: none;
	transition: all .2s;
}
.iq-share-btn-small:hover {
	border-color: var(--iq-color, var(--iq-green-dark));
	color: var(--iq-color, var(--iq-green-dark));
}

/* === FORM step === */
.iq-step-form { max-width: 540px; margin: 0 auto; }
.iq-step-form h3 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.6rem, 3vw, 2rem);
	color: var(--iq-text);
	margin: 0 0 30px;
	text-align: center;
	font-weight: 700;
	letter-spacing: -.01em;
}
.iq-step-form form { display: flex; flex-direction: column; gap: 16px; }
.iq-step-form label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: var(--iq-muted);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.iq-step-form input[type=text],
.iq-step-form input[type=email],
.iq-step-form input[type=tel] {
	width: 100%;
	padding: 14px 18px;
	background: #fff;
	border: 2px solid var(--iq-border);
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--iq-text);
	box-sizing: border-box;
	margin-top: 6px;
	transition: all .2s;
}
.iq-step-form input:focus {
	outline: none;
	border-color: var(--iq-color, var(--iq-green-dark));
	background: #fff;
	box-shadow: 0 0 0 4px rgba(45, 90, 39, 0.1);
}
.iq-hint {
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--iq-muted);
	opacity: 0.8;
	margin-top: 2px;
}
.iq-checkbox {
	flex-direction: row !important;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--iq-text);
	font-weight: 400;
	padding: 12px 0;
}
.iq-checkbox input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--iq-color, var(--iq-green-dark));
	flex-shrink: 0;
}
.iq-checkbox a { color: var(--iq-color, var(--iq-green-dark)); }

/* === RESULT inline (after submit) === */
.iq-step-result { max-width: 720px; }
.iq-result-card {
	background: #fff;
	border: 1px solid var(--iq-border);
	padding: 40px;
	border-radius: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}
.iq-score-box { text-align: center; margin: 16px 0 30px; }
.iq-score-pct {
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 800;
	color: var(--iq-color, var(--iq-green-dark));
	font-family: 'Playfair Display', serif;
	line-height: 1;
	letter-spacing: -.02em;
}
.iq-score-label {
	color: var(--iq-muted);
	font-size: 14px;
	margin-top: 8px;
	letter-spacing: .03em;
}
.iq-score-bar {
	background: rgba(122, 106, 80, 0.15);
	height: 8px;
	border-radius: 4px;
	margin: 20px auto 0;
	max-width: 400px;
	overflow: hidden;
}
.iq-score-fill {
	background: linear-gradient(90deg, var(--iq-color, var(--iq-green-dark)), var(--iq-green-mid));
	height: 100%;
	border-radius: 4px;
	transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
.iq-result-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
}

/* === Erasure form === */
.iq-erasure-wrap {
	max-width: 540px;
	margin: 60px auto;
	padding: 36px;
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--iq-border);
}
.iq-erasure-wrap h2 {
	font-family: 'Playfair Display', serif;
	color: var(--iq-text);
	margin: 0 0 16px;
}
.iq-erasure-wrap label { display: block; margin: 14px 0; font-size: 14px; color: var(--iq-muted); }
.iq-erasure-wrap input[type=email] {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--iq-border);
	border-radius: 12px;
	font-size: 15px;
	margin-top: 6px;
	box-sizing: border-box;
	font-family: inherit;
}
.iq-msg { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.iq-msg-ok { background: var(--iq-green-light); color: var(--iq-color, var(--iq-green-dark)); }
.iq-msg-err { background: #fef2e0; color: var(--iq-amber); }

/* === Mobile === */
@media (max-width: 700px) {
	.iq-topbar { padding: 14px 5vw; gap: 14px; }
	.iq-topbar-brand { display: none; }
	.iq-topbar-counter { font-size: 13px; min-width: 60px; }
	.iq-stage { padding: 24px 5vw; }
	.iq-step-intro h2 { font-size: 2rem; }
	.iq-q-title { font-size: 1.5rem; }
	.iq-option { padding: 16px 20px; font-size: 15px; gap: 12px; }
	.iq-nav { flex-direction: column-reverse; gap: 10px; }
	.iq-nav .iq-btn { width: 100%; justify-content: center; }
	.iq-result-card { padding: 24px 18px; }
	.iq-intro-meta { gap: 16px; }
	.iq-name-capture { max-width: 100%; }
	.iq-share-quiz { flex-direction: column; gap: 8px; }
	.iq-resume-banner { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   Inline result — personalizat per quiz (v2.6)
   ============================================================ */
.iq-inline-header { text-align:center; margin-bottom:20px; }
.iq-inline-emoji { font-size:3rem; display:block; margin-bottom:8px; }
.iq-inline-title { font-size:1.25rem; color:#374151; margin:0 0 6px; font-weight:400; }
.iq-inline-profile-label { font-size:1.5rem; font-weight:800; color:#111; }
.iq-inline-pros, .iq-inline-cons { margin:16px 0; padding:14px 18px; border-radius:8px; }
.iq-inline-pros { background:#f0fdf4; border-left:4px solid #10b981; }
.iq-inline-cons { background:#fffbeb; border-left:4px solid #f59e0b; }
.iq-inline-pros h3, .iq-inline-cons h3 { margin:0 0 8px; font-size:.9375rem; }
.iq-inline-pros ul, .iq-inline-cons ul { margin:0; padding:0 0 0 18px; }
.iq-inline-pros li, .iq-inline-cons li { margin:4px 0; font-size:.9rem; line-height:1.5; color:#374151; }
.iq-inline-calc { margin:16px 0; }
.iq-inline-calc h3 { margin:0 0 10px; font-size:.9375rem; }
.iq-inline-calc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.iq-inline-calc-item { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:12px; text-align:center; }
.iq-calc-val { display:block; font-size:1.125rem; font-weight:800; color:var(--iq-color, #2563eb); }
.iq-calc-lbl { display:block; font-size:.7rem; color:#6b7280; margin-top:4px; text-transform:uppercase; letter-spacing:.03em; }
.iq-inline-teaser { margin:16px 0; padding:14px 18px; background:#f9fafb; border-radius:8px; border:1px solid #e5e7eb; }
.iq-inline-teaser p { margin:0; font-size:.9375rem; color:#374151; line-height:1.6; font-style:italic; }
.iq-inline-tips { margin:16px 0; }
.iq-inline-tips h3 { margin:0 0 8px; font-size:.9375rem; }
.iq-inline-tips ul { margin:0; padding:0 0 0 18px; }
.iq-inline-tips li { margin:4px 0; font-size:.9rem; color:#374151; }
.iq-inline-localities { margin:16px 0; }
.iq-inline-localities h3 { margin:0 0 10px; font-size:.9375rem; }
.iq-inline-loc-chips { display:flex; flex-wrap:wrap; gap:6px; }
.iq-loc-chip { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; color:#1e40af; padding:6px 12px; border-radius:20px; font-size:.8125rem; font-weight:500; }
.iq-loc-chip small { color:#6b7280; font-weight:400; }
.iq-inline-cta { text-align:center; margin:24px 0 8px; }
.iq-btn-hero { font-size:1.0625rem; padding:14px 28px; }
.iq-inline-cta-sub { font-size:.8125rem; color:#6b7280; margin:8px 0 0; }

/* OTP verification */
.iq-otp-section { margin:16px 0; padding:20px; background:#f0f9ff; border:2px solid #bfdbfe; border-radius:12px; text-align:center; }
.iq-otp-info { font-size:.9375rem; color:#1e40af; margin:0 0 16px; }
.iq-otp-input-wrapper { margin:0 0 16px; }
.iq-otp-input { width:180px; padding:12px 16px; font-size:1.75rem; font-weight:800; letter-spacing:8px; text-align:center; border:2px solid #d1d5db; border-radius:8px; font-family:monospace; outline:none; transition:border-color .15s; }
.iq-otp-input:focus { border-color:var(--iq-color, #2563eb); }
.iq-otp-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.iq-otp-error { color:#dc2626; font-size:.875rem; margin:12px 0 0; }
#iq-otp-resend:disabled { opacity:.5; cursor:not-allowed; }