/* SF Partneroldal — a webshop saját dizájnját követi (Jost címsor, Inter szöveg, fekete gomb). */

.sf-partner {
	--p-ink: var( --sf-ink, #101012 );
	--p-mut: var( --sf-muted, #6f6f72 );
	--p-von: var( --sf-line, #e3e3e3 );
	--p-lgy: var( --sf-soft, #f4f4f4 );
	--p-akc: var( --sf-accent, #758ca3 );
	--p-zld: #1f7a44;
	max-width: 1120px;
	margin: 0 auto;
	color: var( --p-ink );
}

.sf-partner h1,
.sf-partner h2,
.sf-partner h3 {
	font-family: "Jost", sans-serif;
	color: var( --p-ink );
	line-height: 1.18;
	margin: 0;
}

.sf-partner p {
	line-height: 1.7;
	margin: 0;
}

.sfp-cimke,
.sfp-eyebrow,
.sfp-ikon {
	font-family: "Jost", sans-serif;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --p-mut );
}

.sfp-eyebrow {
	color: var( --p-akc );
	font-weight: 700;
}

.sfp-apro {
	font-size: .86rem;
	color: var( --p-mut );
	line-height: 1.6;
}

/* ── gomb ── */
.sf-partner .sfp-btn {
	display: inline-block;
	background: var( --p-ink );
	color: #fff;
	border: 1.5px solid var( --p-ink );
	border-radius: 4px;
	font-family: "Jost", sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	font-size: .84rem;
	padding: .85rem 1.7rem;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	transition: background-color .16s ease, color .16s ease;
}

.sf-partner .sfp-btn:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

.sf-partner .sfp-btn-v {
	background: #fff;
	color: var( --p-ink );
}

.sf-partner .sfp-btn-v:hover {
	background: var( --p-ink );
	color: #fff;
}

/* ── hero ── */
.sfp-hero {
	text-align: center;
	padding: 1.2rem 1.25rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
}

.sf-partner .sfp-focim {
	font-size: clamp( 1.6rem, 4.2vw, 2.4rem );
	font-weight: 700;
	text-wrap: balance;
	max-width: 22ch;
	text-transform: none;
}

.sfp-lead {
	max-width: 56ch;
	color: var( --p-mut );
	font-size: 1.02rem;
}

/* ── szintek ── */
.sfp-szintek {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1rem;
	/* felül hely a „Legtöbb előny" jelvénynek, hogy ne érjen a szekció szélébe */
	padding: 1rem 1.25rem 2.6rem;
}

.sfp-kartya {
	border: 1px solid var( --p-von );
	border-radius: 8px;
	padding: 1.6rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	background: #fff;
}

.sfp-kartya.sfp-top {
	border-color: var( --p-ink );
	border-width: 2px;
	padding: calc( 1.6rem - 1px ) calc( 1.4rem - 1px );
	position: relative;
}

.sfp-kartya.sfp-top::after {
	content: "Legtöbb előny";
	position: absolute;
	top: -.65rem;
	left: 1.25rem;
	background: var( --p-ink );
	color: #fff;
	font-family: "Jost", sans-serif;
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .24em .62em;
	border-radius: 4px;
}

.sfp-pill {
	align-self: flex-start;
	font-family: "Jost", sans-serif;
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 5px;
	padding: .3em .7em;
	background: var( --p-lgy );
	color: var( --p-mut );
}

.sfp-pill-z {
	background: #e9f5ee;
	color: var( --p-zld );
}

.sfp-kartya h2 {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: none;
}

.sfp-kinek {
	font-size: .88rem;
	color: var( --p-mut );
}

.sfp-vallalas {
	border-top: 1px solid var( --p-von );
	border-bottom: 1px solid var( --p-von );
	padding: .7rem 0;
	display: flex;
	flex-direction: column;
	gap: .12rem;
}

.sfp-vallalas b {
	font-family: "Jost", sans-serif;
	font-size: 1rem;
}

.sfp-kartya ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .48rem;
	font-size: .89rem;
	flex: 1;
}

.sfp-kartya li {
	padding-left: 1.1rem;
	position: relative;
	line-height: 1.5;
}

.sfp-kartya li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .56em;
	width: .38rem;
	height: .38rem;
	background: var( --p-zld );
	border-radius: 50%;
}

.sfp-kartya li.sfp-fo {
	font-weight: 600;
}

.sfp-kartya li.sfp-fo::before {
	background: var( --p-ink );
	width: .44rem;
	height: .44rem;
	top: .52em;
}

/* ── PRO25 és bevonatok ── */
.sfp-pro {
	border-top: 1px solid var( --p-von );
	border-bottom: 1px solid var( --p-von );
	background: var( --p-lgy );
	padding: 2.6rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sfp-pro-fej {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.sfp-pro-fej h2 {
	font-size: clamp( 1.3rem, 3vw, 1.7rem );
	font-weight: 700;
	text-transform: none;
}

.sfp-pro-fej p {
	color: var( --p-mut );
	font-size: .96rem;
}

.sf-partner .sfp-link {
	align-self: flex-start;
	font-family: "Jost", sans-serif;
	font-weight: 600;
	font-size: .86rem;
	letter-spacing: .02em;
	color: var( --p-ink );
	text-decoration: none;
	border-bottom: 2px solid var( --p-ink );
	padding-bottom: 2px;
	margin-top: .2rem;
}

.sf-partner .sfp-link:hover {
	color: var( --p-akc );
	border-bottom-color: var( --p-akc );
}

.sfp-csempek {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9.5rem, 1fr ) );
	gap: .8rem;
	align-items: start;
}

.sfp-csempe {
	margin: 0;
	min-width: 0;
}

.sf-partner .sfp-csempe a {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	background: #fff;
	border: 1px solid var( --p-von );
	border-radius: 8px;
	padding: .7rem .7rem .85rem;
	text-decoration: none;
	color: var( --p-ink );
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.sf-partner .sfp-csempe a:hover,
.sf-partner .sfp-csempe a:focus-visible {
	border-color: var( --p-ink );
	transform: translateY( -2px );
	box-shadow: 0 10px 22px -18px rgba( 0, 0, 0, .6 );
}

.sfp-csempe-kep {
	display: block;
	aspect-ratio: 1 / 1;
	background: var( --p-lgy );
	border-radius: 5px;
	overflow: hidden;
}

.sfp-csempe-kep img,
.sfp-nincskep {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

.sfp-csempe-nev {
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.35;
	display: block;
}

/* ── futószalag: a PRO25 sor magától gördül ── */
.sfp-futoszalag {
	display: flex;
	gap: .8rem;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 5%, #000 95%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 5%, #000 95%, transparent );
}

.sfp-szalag {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .8rem;
	flex: 0 0 auto;
	animation: sfp-csusz 46s linear infinite;
}

.sfp-futoszalag:hover .sfp-szalag,
.sfp-futoszalag:focus-within .sfp-szalag {
	animation-play-state: paused;
}

.sfp-szalag .sfp-csempe {
	flex: 0 0 10.5rem;
	width: 10.5rem;
}

.sfp-szalag .sfp-csempe a {
	height: 100%;
}

.sfp-szalag {
	align-items: stretch;
}

@keyframes sfp-csusz {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( calc( -100% - .8rem ) ); }
}

.sfp-vissza .sfp-szalag {
	animation-direction: reverse;
	animation-duration: 58s;
}

@media ( prefers-reduced-motion: reduce ) {
	.sfp-szalag {
		animation: none;
	}

	.sfp-futoszalag {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sfp-futoszalag .sfp-szalag[aria-hidden="true"] {
		display: none;
	}
}

.sfp-bevonat {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	border-top: 1px solid var( --p-von );
	padding-top: 1.6rem;
}

.sfp-pro-labjegyzet {
	max-width: none;
}

/* ── bizalmi sáv ── */
/* Asztalon négy oszlop, elválasztó vonalakkal, mozgás nélkül.
   A léptetős, húzható forma csak mobilon lép életbe (lásd a 900px-es blokkot). */
.sfp-bizalom {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	border-top: 1px solid var( --p-von );
}

.sfp-bizalom > div {
	padding: 1.7rem 1.5rem;
	border-right: 1px solid var( --p-von );
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.sfp-bizalom > div:last-child {
	border-right: 0;
}

.sfp-bizalom h3 {
	font-size: 1rem;
	font-weight: 700;
}

.sfp-bizalom p {
	font-size: .87rem;
	color: var( --p-mut );
	line-height: 1.6;
}

.sfp-ikon {
	color: var( --p-akc );
	font-weight: 700;
	margin-bottom: .2rem;
}

/* ── űrlap ── */
.sfp-urlap-keret {
	max-width: 640px;
	margin: 0 auto;
	padding: 2.8rem 1.25rem 3.2rem;
	scroll-margin-top: 90px;
}

.sfp-urlap-fej {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.sfp-urlap-fej h2 {
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
}

.sfp-urlap-fej p {
	color: var( --p-mut );
	font-size: .95rem;
}

.sfp-elotoltve,
.sfp-hiba {
	font-size: .88rem;
	border-radius: 6px;
	padding: .7rem .9rem;
	margin-bottom: 1rem;
	text-align: center;
}

.sfp-elotoltve {
	background: var( --p-lgy );
	color: var( --p-mut );
}

.sfp-hiba {
	background: #fdeceb;
	color: #b3341c;
	font-weight: 600;
}

.sfp-urlap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .9rem;
	border: 1px solid var( --p-von );
	border-radius: 10px;
	padding: 1.6rem;
	background: #fff;
}

.sfp-teljes {
	grid-column: 1 / -1;
}

.sfp-mezo {
	display: flex;
	flex-direction: column;
	gap: .32rem;
	min-width: 0;
}

.sfp-mezo label {
	font-size: .76rem;
	font-weight: 600;
	color: var( --p-mut );
	font-family: "Jost", sans-serif;
	letter-spacing: .02em;
}

.sfp-opc {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: .75;
}

.sf-partner .sfp-mezo input,
.sf-partner .sfp-mezo select,
.sf-partner .sfp-mezo textarea {
	width: 100%;
	border: 1.5px solid var( --p-von );
	border-radius: 6px;
	padding: .68rem .8rem;
	font-family: "Inter", system-ui, sans-serif;
	font-size: .95rem;
	background: #fff;
	color: var( --p-ink );
	transition: border-color .16s ease;
}

.sf-partner .sfp-mezo input:focus,
.sf-partner .sfp-mezo select:focus,
.sf-partner .sfp-mezo textarea:focus {
	border-color: var( --p-ink );
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.sf-partner .sfp-mezo textarea {
	resize: vertical;
	min-height: 5rem;
}

.sfp-kuldes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	text-align: center;
	margin-top: .3rem;
}

.sfp-kuldes .sfp-btn {
	width: 100%;
	max-width: 22rem;
	padding: 1rem 1.7rem;
}

.sfp-csapda {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sfp-kesz {
	border: 1.5px solid var( --p-zld );
	border-radius: 10px;
	padding: 2rem 1.6rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: #f2faf5;
}

.sfp-kesz h2 {
	font-size: 1.45rem;
	font-weight: 700;
	text-transform: uppercase;
}

.sfp-kesz p {
	color: var( --p-mut );
}

/* ── reszponzív ── */
@media ( max-width: 900px ) {
	.sfp-szintek {
		grid-template-columns: 1fr;
		max-width: 34rem;
		margin: 0 auto;
	}

	.sfp-pro {
		grid-template-columns: 1fr;
	}

	.sfp-bizalom {
		grid-template-columns: 1fr 1fr;
	}

	.sfp-bizalom > div:nth-child( 2n ) {
		border-right: 0;
	}

	.sfp-bizalom > div:nth-child( -n + 2 ) {
		border-bottom: 1px solid var( --p-von );
	}
}

@media ( max-width: 560px ) {
	.sfp-hero {
		padding: 1.8rem 1rem 1.8rem;
	}

	.sfp-szintek {
		padding: 0 1rem 1.8rem;
	}

	.sfp-pro-bal,
	.sfp-pro-jobb {
		padding: 1.8rem 1.15rem;
	}

	.sfp-prolista {
		grid-template-columns: 1fr;
	}

	.sfp-bizalom {
		grid-template-columns: 1fr;
	}

	.sfp-bizalom > div {
		border-right: 0;
		border-bottom: 1px solid var( --p-von );
	}

	.sfp-bizalom > div:last-child {
		border-bottom: 0;
	}

	.sfp-urlap {
		grid-template-columns: 1fr;
		padding: 1.15rem;
	}

	.sfp-urlap-keret {
		padding: 2rem 1rem 2.4rem;
	}
}

/* ── szintválasztó ──
   Ugyanaz a számozott kártyás forma asztalon és mobilon is.
   Az egyetlen különbség, hogy asztalon három oszlop, mobilon egy. */
.sf-partner .sfp-szintvalaszto {
	border: 0;
	margin: 0 0 .2rem;
	padding: 0;
	min-width: 0;
}

/* Sima span, nem <legend>: azt a böngésző a fieldset keretébe
   pozicionálja, és nem igazodik a mezők bal széléhez. */
.sf-partner .sfp-szint-cim {
	display: block;
	font-family: "Jost", sans-serif;
	font-size: .95rem;
	font-weight: 700;
	color: var( --p-ink );
	letter-spacing: .01em;
	padding: 0;
	margin: 0 0 .55rem;
}

.sfp-valasztas-jelzes {
	font-size: .82rem;
	color: var( --p-zld );
	font-weight: 600;
	margin: -.3rem 0 .55rem;
}

.sfp-gombsor {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .5rem;
}

/* A fieldset egyben .sfp-mezo is, ezért a mezőcímke-szabály ráülne
   ezekre a label elemekre. Itt visszavesszük a normál szövegstílust. */
.sfp-gombsor label {
	margin: 0;
	cursor: pointer;
	min-width: 0;
	color: var( --p-ink );
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	font-family: "Inter", system-ui, sans-serif;
}

.sfp-gombsor input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sfp-vlap {
	display: flex;
	align-items: center;
	gap: .65rem;
	height: 100%;
	border: 1.5px solid var( --p-von );
	border-radius: 10px;
	background: var( --p-lgy );
	padding: .78rem .85rem;
	transition: background-color .15s ease, border-color .15s ease,
		color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sfp-vszam {
	flex: 0 0 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	border: 1.5px solid #d8d8d6;
	background: #fff;
	display: grid;
	place-items: center;
	font-family: "Jost", sans-serif;
	font-weight: 700;
	font-size: .8rem;
	color: var( --p-mut );
	transition: inherit;
}

.sfp-vszov {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.sfp-vszov b {
	font-family: "Jost", sans-serif;
	font-size: .95rem;
	font-weight: 700;
	color: var( --p-ink );
}

.sfp-vszov small {
	font-size: .76rem;
	color: var( --p-mut );
	font-weight: 400;
}

.sfp-gombsor label:hover .sfp-vlap {
	background: #fff;
	border-color: var( --p-ink );
	transform: translateY( -1px );
}

.sfp-gombsor input:checked + .sfp-vlap {
	background: var( --p-ink );
	border-color: var( --p-ink );
	box-shadow: 0 10px 22px -16px rgba( 0, 0, 0, .9 );
}

.sfp-gombsor input:checked + .sfp-vlap .sfp-vszam {
	background: #fff;
	border-color: #fff;
	color: var( --p-ink );
}

.sfp-gombsor input:checked + .sfp-vlap .sfp-vszov b {
	color: #fff;
}

.sfp-gombsor input:checked + .sfp-vlap small {
	color: rgba( 255, 255, 255, .72 );
}

.sfp-gombsor input:focus-visible + .sfp-vlap {
	outline: 2px solid var( --p-akc );
	outline-offset: 2px;
}

/* mobilon egymás alá */
@media ( max-width: 640px ) {
	.sfp-gombsor {
		grid-template-columns: 1fr;
		gap: .42rem;
	}
}

/* ── az oldal címe középre ── */
body.sf-partner-oldal .hero-section .entry-header,
body.sf-partner-oldal .hero-section .page-title {
	text-align: center;
}

body.sf-partner-oldal .hero-section {
	padding-bottom: 0;
	margin-bottom: 0;
}

body.sf-partner-oldal .hero-section .entry-header {
	margin-bottom: 0;
}

body.sf-partner-oldal .entry-content {
	margin-top: .6rem;
	padding-top: 0;
}

@media ( max-width: 560px ) {
	.sfp-pro {
		padding: 1.8rem 1rem;
	}

	.sfp-csempek {
		grid-template-columns: repeat( auto-fill, minmax( 7.5rem, 1fr ) );
		gap: .6rem;
	}

	.sfp-szalag .sfp-csempe {
		flex-basis: 8.5rem;
		width: 8.5rem;
	}
}

/* ══════════════════════════════════════════════════════════════
   Összecsukható szintek és odaragadó gomb.
   Asztali nézetben a kártya pontosan úgy néz ki, mint eddig: a
   <summary> sima blokként viselkedik, a nyíl és a kattintás kikapcsolva.
   ══════════════════════════════════════════════════════════════ */

.sfp-kartya > .sfp-kfej {
	display: block;
	list-style: none;
	cursor: default;
}

.sfp-kartya > .sfp-kfej::-webkit-details-marker,
.sfp-kartya > .sfp-kfej::marker {
	display: none;
	content: "";
}

.sfp-kfej-szov {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-start;
}

.sfp-nyil,
.sfp-ksz,
.sfp-ragado-apro {
	display: none;
}

.sfp-ktest {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	flex: 1;
}

/* asztali nézetben a fejléc alatt ugyanaz a térköz, mint korábban */
@media ( min-width: 901px ) {
	.sfp-kartya > .sfp-kfej {
		pointer-events: none;
		margin-bottom: .85rem;
	}
}

/* az odaragadó gomb csak mobilon */
.sfp-ragado {
	display: none;
}

/* ── mobil: harmonika ── */
@media ( max-width: 900px ) {
	.sfp-szintek {
		gap: .55rem;
		padding-top: .4rem;
	}

	.sfp-kartya {
		padding: 0;
		border-radius: 8px;
	}

	.sfp-kartya.sfp-top {
		padding: 0;
		border-width: 1.5px;
	}

	.sfp-kartya.sfp-top::after {
		top: -.6rem;
		left: .9rem;
	}

	.sfp-kartya {
		background: var( --p-lgy );
		border-radius: 10px;
	}

	.sfp-kartya[open] {
		background: #fff;
		border-color: var( --p-ink );
		box-shadow: 0 10px 24px -20px rgba( 0, 0, 0, .6 );
	}

	.sfp-kartya > .sfp-kfej {
		display: flex;
		align-items: center;
		gap: .7rem;
		padding: .85rem .95rem;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* sorszámozott kör, mint a szintválasztón */
	.sfp-ksz {
		display: grid;
		place-items: center;
		flex: 0 0 1.65rem;
		height: 1.65rem;
		border-radius: 50%;
		border: 1.5px solid #d8d8d6;
		background: #fff;
		font-family: "Jost", sans-serif;
		font-weight: 700;
		font-size: .78rem;
		color: var( --p-mut );
	}

	.sfp-kartya[open] .sfp-ksz {
		background: var( --p-ink );
		border-color: var( --p-ink );
		color: #fff;
	}

	.sfp-kfej-szov {
		gap: .05rem;
		flex: 1;
		min-width: 0;
	}

	/* a címke fölösleges, a sorszám és a név elég */
	.sfp-kartya .sfp-pill {
		display: none;
	}

	.sfp-kartya h2 {
		font-size: 1.02rem;
	}

	.sfp-kinek {
		font-size: .82rem;
	}

	/* nyitás-zárás jelzés */
	.sfp-nyil {
		display: block;
		position: relative;
		width: 1.5rem;
		height: 1.5rem;
		flex: 0 0 auto;
		border-radius: 6px;
		background: #eeeeec;
	}

	.sfp-kartya[open] .sfp-nyil {
		background: var( --p-ink );
	}

	.sfp-nyil::before,
	.sfp-nyil::after {
		content: "";
		position: absolute;
		background: var( --p-mut );
		border-radius: 1px;
		transition: transform .18s ease, opacity .18s ease;
	}

	.sfp-nyil::before {
		top: .69rem;
		left: .35rem;
		width: .8rem;
		height: .12rem;
	}

	.sfp-nyil::after {
		top: .35rem;
		left: .69rem;
		width: .12rem;
		height: .8rem;
	}

	.sfp-kartya[open] .sfp-nyil::before {
		background: #fff;
	}

	.sfp-kartya[open] .sfp-nyil::after {
		transform: scaleY( 0 );
		opacity: 0;
	}

	.sfp-ktest {
		padding: 0 .95rem .95rem 3.3rem;
		gap: .6rem;
	}

	.sfp-ktest .sfp-vallalas {
		flex-direction: row;
		align-items: baseline;
		gap: .4rem;
		border-top: 0;
		border-bottom: 1px solid var( --p-von );
		padding: 0 0 .5rem;
		font-size: .78rem;
	}

	.sfp-ktest .sfp-vallalas b {
		font-size: .86rem;
	}

	/* a ragadó gomb fölé kerülő sor */
	.sfp-ragado-apro {
		display: block;
		text-align: center;
		font-size: .7rem;
		color: var( --p-mut );
		margin-bottom: .4rem;
	}

	/* odaragadó jelentkezés-gomb */
	.sfp-ragado {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: #fff;
		border-top: 1px solid var( --p-von );
		padding: .6rem 1rem;
		margin: 0 -1.25rem;
		box-shadow: 0 -8px 20px -16px rgba( 0, 0, 0, .7 );
	}

	.sfp-ragado .sfp-btn {
		display: block;
		width: 100%;
	}

	/* mobil: húzható, léptetős kártyasor */
	.sfp-bizalom {
		display: flex;
		gap: .6rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		padding: 1.2rem 1rem;
	}

	.sfp-bizalom::-webkit-scrollbar {
		display: none;
	}

	.sfp-bizalom > div {
		flex: 0 0 min( 16rem, 82vw );
		scroll-snap-align: start;
		border: 1px solid var( --p-von );
		border-right: 1px solid var( --p-von );
		border-radius: 9px;
		padding: 1.1rem 1.15rem;
	}

	.sfp-bizalom > div:last-child {
		border-right: 1px solid var( --p-von );
	}
}

/* ── a szintek szakaszcíme ── */
.sf-partner .sfp-szintek-cim {
	grid-column: 1 / -1;
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: none;
	margin-bottom: .2rem;
}

@media ( max-width: 900px ) {
	.sf-partner .sfp-szintek-cim {
		font-size: 1.15rem;
		margin-bottom: 0;
	}
}

/* ══════════════════════════════════════════════════════════
   Szintválasztó figyelemfelhívás, CSAK MOBILON.
   Egyszer fut le, amikor az űrlap a képernyőre ér. A már
   kiválasztott gomb kimarad belőle, és mozgás nincs benne,
   csak a keret sötétedik meg egy pillanatra, sorban.
   ══════════════════════════════════════════════════════════ */
@media ( max-width: 640px ) {
	@keyframes sfp-keretvillan {
		0%   { border-color: var( --p-von ); }
		35%  { border-color: var( --p-ink ); }
		55%  { border-color: var( --p-ink ); }
		100% { border-color: var( --p-von ); }
	}

	.sfp-gombsor.sfp-fut input:not( :checked ) + .sfp-vlap {
		animation: sfp-keretvillan 1.6s ease both;
	}

	.sfp-gombsor.sfp-fut label:nth-child( 2 ) input:not( :checked ) + .sfp-vlap {
		animation-delay: .3s;
	}

	.sfp-gombsor.sfp-fut label:nth-child( 3 ) input:not( :checked ) + .sfp-vlap {
		animation-delay: .6s;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sfp-gombsor.sfp-fut input + .sfp-vlap {
		animation: none;
	}
}

/* ══════════════════════════════════════════════════════════════
   A három kártya belső sorai egy vonalba kerülnek.
   Subgriddel próbáltam, de a <details> belső szerkezete megtöri,
   ezért determinisztikus a megoldás: a leírásnak két sornyi hely
   van fenntartva, így a fejlécek egyforma magasak, a gomb pedig
   a kártya aljára ül, függetlenül a felsorolás hosszától.
   ══════════════════════════════════════════════════════════════ */
@media ( min-width: 901px ) {
	.sfp-kinek {
		min-height: 2.7em;
	}

	.sfp-kartya > .sfp-kfej {
		flex: 0 0 auto;
	}

	.sfp-ktest {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	.sfp-kartya .sfp-vallalas {
		flex: 0 0 auto;
	}

	.sfp-kartya ul {
		flex: 0 1 auto;
	}

	/* a gomb mindhárom kártyán a legaljára kerül */
	.sfp-ktest > .sfp-btn {
		margin-top: auto;
	}
}

/* ── adatkezelési hozzájárulás ── */
.sf-partner .sfp-elfogad {
	align-self: stretch;
	max-width: 22rem;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	cursor: pointer;
	font-size: .85rem;
	line-height: 1.5;
	color: var( --p-mut );
	font-weight: 400;
	font-family: "Inter", system-ui, sans-serif;
	letter-spacing: 0;
	text-align: left;
}

.sf-partner .sfp-elfogad input {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: .12rem 0 0;
	accent-color: var( --p-ink );
	cursor: pointer;
}

.sf-partner .sfp-elfogad a {
	color: var( --p-ink );
	text-decoration: underline;
}