/**
 * Naturéka Belépő Kvíz — megjelenés.
 *
 * A színek és a betűk az Elementor globális változóiból jönnek, tehát ha a
 * Naturéka arculata változik, a kvíz magától követi. A fallback értékek a
 * jelenlegi arculati színek.
 */

.nk-kviz {
	--nk-eben: var(--e-global-color-38a2d02, #392b25);
	--nk-zold: var(--e-global-color-8635458, #7f8a57);
	--nk-zold-sotet: var(--e-global-color-1d0c6ec, #5f6b44);
	--nk-arany: var(--e-global-color-68a1bff, #e9c970);
	--nk-homok: var(--e-global-color-c6a4f03, #f4e8d5);
	--nk-homok-vilagos: #faf3e7;
	--nk-feher: #fff;
	--nk-cim-betu: var(--e-global-typography-primary-font-family, "Ivvy"), Georgia, "Times New Roman", serif;
	--nk-szoveg-betu: var(--e-global-typography-text-font-family, "Poppins"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	box-sizing: border-box;
	max-width: 812px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: var(--nk-szoveg-betu);
	color: var(--nk-eben);
	text-align: center;
	/* A téma a gombokra nowrap-et tesz, attól a hosszú válasz kilógna. */
	white-space: normal;
}

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

.nk-kviz__keret {
	position: relative;
	padding: 14px 20px 26px;
}

/*
 * A doboz szándékosan FEHÉR: a fejléc is homok árnyalatú, és ha a kvíz is az
 * lenne, beleolvadna. A válaszok és az eredménykártya viszik a homokot.
 */
.nk-kviz--keretes .nk-kviz__keret {
	background: var(--nk-feher);
	border: 1px solid rgba(57, 43, 37, 0.08);
	border-radius: 22px;
	padding: 34px 34px 28px;
	box-shadow: 0 28px 56px -34px rgba(57, 43, 37, 0.6), 0 2px 6px -3px rgba(57, 43, 37, 0.12);
}

/* ── Bevezető ─────────────────────────────────────────────────────────── */

.nk-kviz__bevezeto {
	margin: 0 0 22px;
	font-family: var(--nk-cim-betu);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	line-height: 1.35;
	color: var(--nk-eben);
}

.nk-kviz__bevezeto::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 16px auto 0;
	background: var(--nk-arany);
}

/* ── Színpad ──────────────────────────────────────────────────────────── */

.nk-kviz__szin {
	position: relative;
}

.nk-kviz__lepes[hidden],
.nk-kviz__vegpont[hidden] {
	display: none;
}

.nk-kviz__lepes,
.nk-kviz__vegpont {
	animation: nk-kviz-be 0.32s ease both;
}

@keyframes nk-kviz-be {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.nk-kviz__kerdes {
	margin: 0 0 20px;
	font-family: var(--nk-cim-betu);
	font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2rem);
	line-height: 1.25;
	font-weight: 500;
	color: var(--nk-eben);
}

/* ── Válaszok ─────────────────────────────────────────────────────────── */

.nk-kviz__valaszok {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.nk-kviz__valasz-sor {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nk-kviz__valasz-sor::before,
.nk-kviz__valasz-sor::marker {
	content: none;
}

.nk-kviz__valasz {
	display: flex;
	white-space: normal;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 60px;
	padding: 16px 20px;
	background: var(--nk-homok-vilagos);
	border: 1px solid rgba(57, 43, 37, 0.12);
	border-radius: 14px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--nk-eben);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.nk-kviz__valasz-szoveg {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

.nk-kviz__valasz-nyil {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--nk-feher);
	position: relative;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.nk-kviz__valasz-nyil::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -5px;
	border-right: 2px solid var(--nk-zold);
	border-bottom: 2px solid var(--nk-zold);
	transform: rotate(-45deg);
	transition: border-color 0.18s ease;
}

/*
 * A téma saját gombstílusa erősebb a sima osztályválasztónknál: hover-en
 * magenta hátteret és fehér szöveget tesz mindenre. Ezért a válaszgomb minden
 * állapotát külön ki kell mondani, gomb-elemre szűkített választóval.
 */
.nk-kviz button.nk-kviz__valasz,
.nk-kviz button.nk-kviz__valasz:hover,
.nk-kviz button.nk-kviz__valasz:focus,
.nk-kviz button.nk-kviz__valasz:focus-visible,
.nk-kviz button.nk-kviz__valasz:active {
	background-image: none;
	background-color: var(--nk-homok-vilagos);
	color: var(--nk-eben);
}

.nk-kviz button.nk-kviz__valasz:hover,
.nk-kviz button.nk-kviz__valasz:focus-visible,
.nk-kviz button.nk-kviz__valasz:active {
	background-color: var(--nk-feher);
	border-color: var(--nk-zold);
	box-shadow: 0 10px 22px -16px rgba(57, 43, 37, 0.75);
	transform: translateY(-1px);
}

.nk-kviz button.nk-kviz__valasz:focus {
	outline: none;
}

.nk-kviz button.nk-kviz__valasz:focus-visible {
	outline: 2px solid var(--nk-zold);
	outline-offset: 3px;
}

.nk-kviz__valasz:hover .nk-kviz__valasz-nyil,
.nk-kviz__valasz:focus-visible .nk-kviz__valasz-nyil {
	background: var(--nk-zold);
	transform: translateX(3px);
}

.nk-kviz__valasz:hover .nk-kviz__valasz-nyil::before,
.nk-kviz__valasz:focus-visible .nk-kviz__valasz-nyil::before {
	border-color: var(--nk-feher);
}

.nk-kviz__valasz[data-nk-valasztott="1"] {
	border-color: var(--nk-zold);
	background: #fffdf8;
}

/* ── Végpont: a kiemelt eredménykártya ────────────────────────────────── */

.nk-kviz__vegpont {
	text-align: center;
}

.nk-kviz__eredmeny {
	position: relative;
	overflow: hidden;
	padding: 36px 30px 32px;
	background: linear-gradient(180deg, #fbf4e9 0%, #f5e8d6 100%);
	border-radius: 20px;
	box-shadow: 0 26px 50px -34px rgba(57, 43, 37, 0.85);
	animation: nk-kviz-eredmeny 0.5s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

/* Arany-zöld szalag a kártya tetején: ettől látszik, hogy ez a megérkezés. */
.nk-kviz__eredmeny::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--nk-zold) 0%, var(--nk-arany) 50%, var(--nk-zold) 100%);
}

.nk-kviz__jel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--nk-feher);
	color: var(--nk-zold);
	animation: nk-kviz-pecset 0.55s 0.12s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.nk-kviz__felvezeto {
	margin: 0 0 6px;
	font-size: 0.74rem;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--nk-zold-sotet);
}

.nk-kviz__cimke {
	margin: 0 0 16px;
	font-family: var(--nk-cim-betu);
	font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--nk-eben);
}

.nk-kviz__cimke::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--nk-arany);
}

.nk-kviz__vegpont-szoveg {
	margin: 0 auto 26px;
	max-width: 620px;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	line-height: 1.65;
}

@keyframes nk-kviz-eredmeny {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes nk-kviz-pecset {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* A téma minden linket aláhúz, ezért kell az erősebb választó. */
.nk-kviz a.nk-kviz__gomb,
.nk-kviz a.nk-kviz__gomb:hover,
.nk-kviz a.nk-kviz__gomb:focus {
	text-decoration: none;
}

.nk-kviz__gomb {
	display: inline-block;
	padding: 15px 34px;
	background: var(--nk-zold);
	border: 1px solid var(--nk-zold);
	border-radius: 999px;
	color: var(--nk-feher);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.6px;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nk-kviz__gomb:hover,
.nk-kviz__gomb:focus-visible {
	background: var(--nk-zold-sotet);
	border-color: var(--nk-zold-sotet);
	color: var(--nk-feher);
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -18px rgba(57, 43, 37, 0.9);
}

/* ── Lábléc: vissza és újrakezdés ─────────────────────────────────────── */

.nk-kviz__lablec {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 24px;
	margin-top: 22px;
}

.nk-kviz__vissza,
.nk-kviz__ujra {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 4px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.88rem;
	color: rgba(57, 43, 37, 0.7);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.18s ease;
}

/* A téma gomb-hoverje ide is magenta hátteret tenne, ezért itt is minden
   állapotot ki kell mondani. */
.nk-kviz button.nk-kviz__vissza,
.nk-kviz button.nk-kviz__ujra,
.nk-kviz button.nk-kviz__vissza:hover,
.nk-kviz button.nk-kviz__ujra:hover,
.nk-kviz button.nk-kviz__vissza:focus,
.nk-kviz button.nk-kviz__ujra:focus,
.nk-kviz button.nk-kviz__vissza:active,
.nk-kviz button.nk-kviz__ujra:active {
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

.nk-kviz button.nk-kviz__vissza:hover,
.nk-kviz button.nk-kviz__ujra:hover,
.nk-kviz button.nk-kviz__vissza:focus-visible,
.nk-kviz button.nk-kviz__ujra:focus-visible {
	color: var(--nk-eben);
}

.nk-kviz__vissza[hidden],
.nk-kviz__ujra[hidden] {
	display: none;
}

.nk-kviz__vissza-nyil {
	width: 6px;
	height: 6px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ── Folyamatjelző ────────────────────────────────────────────────────── */

.nk-kviz__folyamat {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin: 0 0 20px;
}

.nk-kviz__pont {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(57, 43, 37, 0.18);
	transition: background-color 0.24s ease, transform 0.24s ease;
}

.nk-kviz__pont--aktiv {
	background: var(--nk-zold);
	transform: scale(1.25);
}

.nk-kviz__pont--kesz {
	background: var(--nk-arany);
}

/* ── Képes fejléc a kvíz fölé ([natureka_kviz_fejlec]) ────────────────── */

.nk-fejlec {
	position: relative;
	overflow: hidden;
	padding: clamp(66px, 11vw, 124px) 20px clamp(112px, 15vw, 156px);
	background-color: #f4e8d5;
	background-position: center 60%;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	font-family: var(--e-global-typography-text-font-family, "Poppins"), sans-serif;
	color: var(--e-global-color-38a2d02, #392b25);
}

.nk-fejlec::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(244, 232, 213, 0.7) 0%, rgba(244, 232, 213, 0.92) 100%);
}

.nk-fejlec__belso {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

.nk-fejlec__kicker {
	margin: 0 0 14px;
	font-size: 0.74rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--e-global-color-8635458, #7f8a57);
}

.nk-fejlec__cim {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, "Ivvy"), Georgia, serif;
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
	line-height: 1.1;
	font-weight: 500;
	color: var(--e-global-color-38a2d02, #392b25);
}

.nk-fejlec__vonal {
	display: block;
	width: 58px;
	height: 2px;
	margin: 22px auto;
	background: var(--e-global-color-68a1bff, #e9c970);
}

.nk-fejlec__alcim {
	margin: 0 auto;
	max-width: 560px;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
	line-height: 1.6;
	color: rgba(57, 43, 37, 0.82);
}

/* A kvíz ráúszik a fejléc aljára. */
.nk-kviz--felcsusztat {
	position: relative;
	z-index: 2;
	margin-top: clamp(-140px, -13vw, -96px);
}

/* Halk lábjegyzet a kvíz alá (a tesztoldalon a magyarázó sor). */
.nk-kviz-jegyzet {
	max-width: 640px;
	margin: 26px auto 72px;
	padding: 14px 18px;
	border-left: 3px solid var(--e-global-color-8635458, #7f8a57);
	border-radius: 0 8px 8px 0;
	background: rgba(244, 232, 213, 0.55);
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(57, 43, 37, 0.78);
}

@media (max-width: 600px) {
	.nk-kviz--felcsusztat {
		margin-top: -86px;
	}
}

/* ── JS nélkül ────────────────────────────────────────────────────────── */

.nk-kviz__noscript {
	margin-top: 12px;
	font-size: 0.95rem;
}

.nk-kviz__noscript ul {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.nk-kviz__noscript a {
	color: var(--nk-zold-sotet);
}

/* ── Mobil ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.nk-kviz--keretes .nk-kviz__keret {
		padding: 24px 16px 20px;
		border-radius: 18px;
	}

	.nk-kviz__valasz {
		min-height: 56px;
		padding: 14px 16px;
		font-size: 0.97rem;
		gap: 10px;
	}

	.nk-kviz__eredmeny {
		padding: 28px 18px 24px;
		border-radius: 16px;
	}

	.nk-kviz__gomb {
		display: block;
		width: 100%;
		padding: 16px 20px;
	}

	.nk-kviz__lablec {
		gap: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nk-kviz__lepes,
	.nk-kviz__vegpont,
	.nk-kviz__eredmeny,
	.nk-kviz__jel {
		animation: none;
	}

	.nk-kviz * {
		transition-duration: 0.01ms !important;
	}
}