/* ============================================================================
   Balance — KÉPZÉS-AJÁNLÓ (Tinder-pakli)
   ============================================================================

   ⚠ EZ A FÁJL CSAK AZ AJÁNLÓ OLDALAIN TÖLTŐDIK (`balance_ajanlo_assets()`),
     ezért nem terheli a többi lapot. A kártya NYELVE viszont a meglévő
     design: a `.bal-top-card` család (a találatok oldalon újrahasznosítva),
     a szint-színek pedig a `landing-page.css` `.bal-top-visual--*` értékei.

   A szint-színek SZÁNDÉKOSAN a term-metából érkező kódból jönnek
   (`_balance_kategoria_szin`: fiz-1…lel-1, semleges), nem a kártya saját
   ötletéből — így egy új kategória azonnal helyes színt kap.
   ============================================================================ */

.bal-ajanlo {
	max-width: 560px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

/* ---------------------------------------------------------------------------
   IDŐJÁRÁS-VÁLASZTÓ — napos / felhős / vegyes

   ⚠ KÉT HELYEN: a pakli ELEJÉN (felirattal + magyarázattal) és a vezérlők alatt
     KICSIBEN (`--mini`), hogy közben is át lehessen váltani — mint a 2D/3D váltót.
   ⚠ A `!` jelölés hiányzik szándékosan: a modul gyökerével együtt szelektálok
     (`.bal-ajanlo .bal-ajanlo-ido` = 0,2,0), mert a téma `.bal-content a`
     szabálya (0,1,1) különben kékre festené a gombok feliratát.
   --------------------------------------------------------------------------- */

.bal-ajanlo .bal-ajanlo-ido-sav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.bal-ajanlo .bal-ajanlo-ido-felirat {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #94a3b8;
}

.bal-ajanlo .bal-ajanlo-ido {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: #334155;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s, border-color .18s, color .18s, box-shadow .25s;
}

.bal-ajanlo .bal-ajanlo-ido svg { display: block; flex: 0 0 auto }
.bal-ajanlo .bal-ajanlo-ido--napos svg { color: #f59e0b }
.bal-ajanlo .bal-ajanlo-ido--felhos svg { color: #64748b }
.bal-ajanlo .bal-ajanlo-ido--vegyes svg { color: #0d9488 }

.bal-ajanlo .bal-ajanlo-ido:hover {
	border-color: #94a3b8;
	background: #f8fafc;
}

.bal-ajanlo .bal-ajanlo-ido.is-active {
	border-color: #0000;
	background: linear-gradient(108deg, #0a58ff, #0092cf 45%, #10c98c);
	color: #fff;
	box-shadow: 0 12px 26px -14px #0a58ff99;
}

.bal-ajanlo .bal-ajanlo-ido.is-active svg { color: #fff }

.bal-ajanlo .bal-ajanlo-ido-leiras {
	flex: 1 1 100%;
	margin: 2px 0 0;
	font-size: 12.5px;
	color: #64748b;
}

/* a közbeni, kis váltó: a vezérlők alatt, középre zárva */
.bal-ajanlo .bal-ajanlo-ido-sav--mini {
	justify-content: center;
	margin: 12px 0 0;
}

.bal-ajanlo .bal-ajanlo-ido-sav--mini .bal-ajanlo-ido {
	padding: 6px 11px;
	font-size: 11.5px;
	gap: 5px;
}

.bal-ajanlo .bal-ajanlo-ido-sav--mini .bal-ajanlo-ido svg { width: 14px; height: 14px }

/* --- szint-színek: ugyanazok, mint a `.bal-top-visual--*` gradiens kezdetei --- */
.bal-ajanlo-kartya--fiz-1 { --bal-szin: #f59e0b }
.bal-ajanlo-kartya--fiz-2 { --bal-szin: #f97316 }
.bal-ajanlo-kartya--fiz-3 { --bal-szin: #ea580c }
.bal-ajanlo-kartya--erz-1 { --bal-szin: #0d9488 }
.bal-ajanlo-kartya--erz-2 { --bal-szin: #059669 }
.bal-ajanlo-kartya--erz-3 { --bal-szin: #10b981 }
.bal-ajanlo-kartya--men-1 { --bal-szin: #4f46e5 }
.bal-ajanlo-kartya--men-2 { --bal-szin: #2563eb }
.bal-ajanlo-kartya--men-3 { --bal-szin: #0284c7 }
.bal-ajanlo-kartya--lel-1 { --bal-szin: #7c3aed }
.bal-ajanlo-kartya--semleges { --bal-szin: #64748b }

/* --- a szint HÁTTERE: vízfesték-gyűrű, a szint színében ---------------------

   A négy kép a letöltött négy színből készült (narancs/zöld/kék/lila), és a
   SZINTHEZ kötődik, nem a kategóriához — ha egy kategória később más szintre
   kerül, automatikusan a helyes képet kapja. Egy szint mind a három
   árnyalata (1/2/3) ugyanazt a képet használja.

   ⚠ A kép ÁLLÓ vászon (900×1400), a gyűrű a vászon szélességének ~52%-a,
     KÖZÉPEN — ezért `cover` + középre zárás mellett egyetlen nézetben sem
     vágja el a gyűrűt, csak a felesleg megy le (mérve 375/390/520 px kártyán).
   ⚠ A `semleges` szándékosan NEM kap képet (nincs szint-színe). */
.bal-ajanlo-kartya--fiz-1,
.bal-ajanlo-kartya--fiz-2,
.bal-ajanlo-kartya--fiz-3 { --bal-kartya-alap: url(kartya-hatter-narancs.jpg) }
.bal-ajanlo-kartya--erz-1,
.bal-ajanlo-kartya--erz-2,
.bal-ajanlo-kartya--erz-3 { --bal-kartya-alap: url(kartya-hatter-zold.jpg) }
.bal-ajanlo-kartya--men-1,
.bal-ajanlo-kartya--men-2,
.bal-ajanlo-kartya--men-3 { --bal-kartya-alap: url(kartya-hatter-kek.jpg) }
.bal-ajanlo-kartya--lel-1 { --bal-kartya-alap: url(kartya-hatter-lila.jpg) }

/* ---------------------------------------------------------------------------
   Haladás
   --------------------------------------------------------------------------- */

.bal-ajanlo-halad {
	text-align: right;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   A színpad és a kártyák
   --------------------------------------------------------------------------- */

.bal-ajanlo-szinpad {
	position: relative;
	min-height: 420px;
	margin: 14px 0 20px;
	/* ⚠ A húzás közben a böngésző ne görgessen: e nélkül mobilon a lap
	   elmozdul a kártya alatt. */
	touch-action: none;
}

.bal-ajanlo-kartya {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 34px 30px;
	border-radius: 26px;
	border: 1px solid #ffffff;
	/* ⚠ A HÁTTÉR HÁROM RÉTEG, felülről lefelé:
	   1) fehér fátyol — a szöveg helyén (a gyűrű LYUKÁBAN) erősebb, a gyűrű vonalán
	      gyengébb. MÉRVE: a vonal a fátyol NÉLKÜL is 8,3:1 kontrasztot ad a
	      #0f172a szöveggel, tehát a fátyol nem az olvashatóságért kell, hanem a
	      hangulatért — ezért engedtük vissza a színt (a szöveg 17,9:1-en ül);
	   2) a SZINT vízfesték-gyűrűje (`--bal-kartya-alap`, a szint-színek blokkjából),
	      `cover` + középen — a felesleg levágva. Ha nincs (semleges), nem látszik;
	   3) a korábbi fehér-ezüst gradiens — ez a TARTALÉK, ha a kép nem tölt be. */
	background-color: #ffffff;
	background-image:
		radial-gradient(78% 62% at 50% 50%, #ffffff99 0%, #ffffff75 46%, #ffffff54 100%),
		var(--bal-kartya-alap, none),
		linear-gradient(150deg, #ffffff, #f8fafc 58%, #eef2ff);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 34px 74px -38px #0f172a73, inset 0 1px 0 #ffffff;
	transform-origin: 50% 92%;
	will-change: transform;

	/* ⚠ KELL a maszkhoz: a színes réteg nem lóghat ki a lekerekített sarkakon. */
	overflow: hidden;

	/* a mélységi létra: a következő kártya kicsit lejjebb és kisebb */
	transform: translate3d(0, calc(var(--bal-melyseg, 0) * 12px), 0)
		scale(calc(1 - var(--bal-melyseg, 0) * .05));
	opacity: calc(1 - var(--bal-melyseg, 0) * .18);
	transition: transform .4s cubic-bezier(.22,1.1,.36,1), opacity .3s linear;
}

.bal-ajanlo-kartya:not(.is-aktiv) {
	pointer-events: none;
}

.bal-ajanlo-kartya.is-aktiv {
	cursor: grab;
}

.bal-ajanlo-kartya.is-fogva {
	cursor: grabbing;
	/* a „felvettem a kártyát” érzés: nagyobb árnyék, kicsit szétterülő fény */
	box-shadow: 0 46px 96px -36px #0f172a59, 0 0 0 1px #ffffffb3, inset 0 1px 0 #ffffff;
}

/* a kártya bal széle a szint színét viszi — egy pillantásra látszik a szint */
.bal-ajanlo-kartya::before {
	content: "";
	position: absolute;
	left: 0;
	top: 24px;
	bottom: 24px;
	width: 6px;
	border-radius: 0 6px 6px 0;
	background: linear-gradient(180deg, var(--bal-szin, #0a58ff), #10c98c);
}

/* ⚠⚠ SPECIFICITÁS KELL: a téma `balance-tutor.css`-ében ez áll:
   `.bal-content p, .bal-content li { font-size: 1rem; line-height: 1.72; color: #475569 }`
   — ez (0,1,1), ami **felülírja** az egyosztályos (0,1,0) szabályomat. Mért tünet:
   a kártyaszöveg `16px` / `#475569` volt, hiába írtam 19–26px-et. Ezért a modul
   gyökerével együtt szelektálok: `.bal-ajanlo .bal-ajanlo-kartya-szoveg` = (0,2,0). */
.bal-ajanlo .bal-ajanlo-kartya-szoveg {
	margin: 0;
	font-size: clamp(23px, 3.2vw, 34px);
	font-weight: 700;
	line-height: 1.26;
	letter-spacing: -.015em;
	color: #0f172a;
	text-wrap: balance;
	text-align: center;
}

/* ⚠ A KÉPES KÁRTYA ELŐKÉSZÍTÉSE — a rétegek már itt vannak, kép nélkül láthatatlanok.
   A kép a `--bal-kartya-kep` változóból jön (a JS a kártya `kep` mezõjébõl teszi be),
   és a `data-van-kep="1"` kapcsolja be a világos szöveget + a fátylat. */
.bal-ajanlo-kartya-kep {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--bal-kartya-kep, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
}

.bal-ajanlo-kartya-fatyol {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, #0f172a1a 0%, #0f172a57 48%, #0f172a9e 100%);
	opacity: 0;
}

.bal-ajanlo-kartya[data-van-kep="1"] { border-color: #ffffff2e; background: #0f172a }
.bal-ajanlo-kartya[data-van-kep="1"] .bal-ajanlo-kartya-kep,
.bal-ajanlo-kartya[data-van-kep="1"] .bal-ajanlo-kartya-fatyol { opacity: 1 }

.bal-ajanlo-kartya[data-van-kep="1"] .bal-ajanlo-kartya-szoveg {
	color: #ffffff;
	text-shadow: 0 2px 16px #0f172a99;
}

.bal-ajanlo-kartya[data-van-kep="1"] .bal-ajanlo-kartya-lab { color: #ffffffe0 }

.bal-ajanlo-kartya-belso { text-align: center }

.bal-ajanlo .bal-ajanlo-kartya-lab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #94a3b8;
}

.bal-ajanlo-kartya-pont {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bal-szin, #0a58ff);
}

/* a döntés jelzése HÚZÁS KÖZBEN — színes maszk a kártyán + nagy jelölő
   a kártya FELSŐ HARMADÁBAN (a sarok helyett: oda néz a szem, nem a sarokra)

   ⚠ A maszk erőssége a `--bal-jelzo-ero` (0…1) értékből jön, és **legfeljebb
     20%** (0,2) — ennél erősebb takarás elnyomná a kurzus szövegét.
   ⚠ A maszk a húzás IRÁNYÁBÓL szivárog be (`--bal-maszk-x/y`), ezért a
     visszajelzés a mozgással együtt, térben is értelmes. */
.bal-ajanlo-kartya-maszk {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: calc(var(--bal-jelzo-ero, 0) * .2);
	background: radial-gradient(125% 95% at var(--bal-maszk-x, 50%) var(--bal-maszk-y, 50%), var(--bal-jelzo-szin, #94a3b8), transparent 70%);
	transition: opacity .1s linear;
}

.bal-ajanlo-kartya-jelzo {
	position: absolute;
	top: 8%;
	left: 50%;
	z-index: 4;
	width: 84px;
	height: 84px;
	margin-left: -42px;
	pointer-events: none;
	opacity: min(1, calc(var(--bal-jelzo-ero, 0) * 1.7));
	transform: scale(calc(.84 + var(--bal-jelzo-ero, 0) * .16));
	filter: drop-shadow(0 8px 18px #ffffffd9);
	transition: opacity .1s linear;
}

.bal-ajanlo-kartya-jelzo svg { display: block; width: 100%; height: 100% }

/* a kártya belső tartalma a rétegek FÖLÖTT van (kép + fátyol + maszk alatta) */
.bal-ajanlo-kartya-belso {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	height: 100%;
}

/* a jel színe = a jelölő színe (a színátmenetes SVG-vel azonos tónus) */
.bal-ajanlo-kartya[data-jelzo="nem_igaz"] { --bal-jelzo-szin: #dc2626; --bal-maszk-x: 2%; --bal-maszk-y: 50% }
.bal-ajanlo-kartya[data-jelzo="igaz"] { --bal-jelzo-szin: #0d9488; --bal-maszk-x: 98%; --bal-maszk-y: 50% }
.bal-ajanlo-kartya[data-jelzo="nagyon_igaz"] { --bal-jelzo-szin: #d97706; --bal-maszk-x: 50%; --bal-maszk-y: 2% }
.bal-ajanlo-kartya[data-jelzo="kihagyom"] { --bal-jelzo-szin: #94a3b8; --bal-maszk-x: 50%; --bal-maszk-y: 98% }

/* ---------------------------------------------------------------------------
   Vezérlők
   --------------------------------------------------------------------------- */

.bal-ajanlo-vezerlok {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.bal-ajanlo-gomb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #334155;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .18s, box-shadow .22s, background .22s, border-color .22s;
}

/* a felemelés csak a pirula alakú gomboknak szól — a jelölő-gombnak nem */
.bal-ajanlo-gomb:hover:not(:disabled):not(.bal-ajanlo-gomb--ikon) {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -18px #0f172a66;
}

.bal-ajanlo-gomb:disabled {
	opacity: .45;
	cursor: default;
}

/* ⚠⚠ A DÖNTÉS-GOMBOKON NINCS PIRULA: itt SZÁNDÉKOSAN csak a FELIRAT színe marad.
   A korábbi (komittolt) változat mindegyiknek színes hátteret és keretet adott —
   az a „látható gomb” volt, amit a felhasználó kifejezetten nem kért. A felület
   helyét most a jelölő korongja adja (lásd 14. szakasz). */
.bal-ajanlo-gomb.is-igaz { color: #047857 }
.bal-ajanlo-gomb.is-nagyon { color: #b45309 }
.bal-ajanlo-gomb.is-nem { color: #b91c1c }
.bal-ajanlo-gomb.is-kihagy { color: #64748b }
.bal-ajanlo-gomb--vissza { color: #475569; border-style: dashed }

.bal-ajanlo-gomb-nyil,
.bal-ajanlo-gomb-ikon { display: inline-flex }

.bal-ajanlo-sugo {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: #94a3b8;
}

.bal-ajanlo-ures {
	text-align: center;
	color: #475569;
}

/* ---------------------------------------------------------------------------
   Szünet és a pakli vége
   --------------------------------------------------------------------------- */

.bal-ajanlo-szunet {
	margin: 0 0 16px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
	color: #0f766e;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s linear, transform .35s cubic-bezier(.22,1.2,.36,1);
}

.bal-ajanlo-szunet.is-latszik {
	opacity: 1;
	transform: none;
}

.bal-ajanlo-vege {
	margin-top: 24px;
	padding: 28px 24px;
	border-radius: 24px;
	text-align: center;
	background: linear-gradient(150deg, #ffffff, #f0fdfa 60%, #eef2ff);
	border: 1px solid #ffffff;
	box-shadow: 0 30px 66px -38px #0f172a73;
}

.bal-ajanlo-vege-cim {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 800;
	color: #0f172a;
}

.bal-ajanlo-vege-alcim {
	margin: 0 0 18px;
	color: #64748b;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
   A TALÁLATOK OLDAL
   --------------------------------------------------------------------------- */

.bal-ajanlo-eredmeny {
	max-width: 720px;
	margin: 0 auto;
}

.bal-ajanlo-osszegzes {
	font-size: 16px;
	color: #334155;
}

.bal-ajanlo-talalat {
	margin: 0 0 30px;
	padding: 18px 18px 6px;
	border-radius: 26px;
	background: linear-gradient(150deg, #ffffff, #f8fafc 70%, #eef2ff);
	border: 1px solid #ffffff;
	box-shadow: 0 30px 66px -40px #0f172a66;
}

.bal-ajanlo-talalat-fej {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.bal-ajanlo-szazalek {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: linear-gradient(150deg, #0a58ff, #10c98c);
	color: #ffffff;
	line-height: 1.05;
}

.bal-ajanlo-szazalek b { font-size: 22px; font-weight: 900 }
.bal-ajanlo-szazalek span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .9 }

/* ⚠⚠ SPECIFICITÁS (a nyolcadik esete ugyanennek a csapdának): a téma
   `balance-tutor.css`-ében `.bal-content b { color: #1e293b }` (0,1,1) áll —
   ugyanolyan erős, mint az egyosztályos szabályom, DE KÉSŐBB töltődik, ezért nyert.
   MÉRT tünet (2026-10-06): a kék körben a `25%` `rgb(30,41,59)` volt, az „illőség"
   fehér — vagyis kék gombon kék betű.
   ⚠⚠ ÉS A JAVÍTÁSOM ELSŐ VÁLTOZATA (`.bal-ajanlo .bal-ajanlo-szazalek b`) HATÁSTALAN
   volt a TALÁLATOK oldalán, mert ott nincs `.bal-ajanlo` ős — csak a paklin.
   Ezért a KÉTSZERES OSZTÁLY (0,2,1): ős-FÜGGETLEN, minden wrappernél nyer. */
.bal-ajanlo-szazalek.bal-ajanlo-szazalek,
.bal-ajanlo-szazalek.bal-ajanlo-szazalek b { color: #ffffff }

.bal-ajanlo-indok {
	flex: 1 1 240px;
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.bal-ajanlo-parba {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(108deg, #0a58ff, #0092cf 45%, #10c98c);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .18s, box-shadow .25s, filter .25s;
}

.bal-ajanlo-parba:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -18px #0a58ff99;
}

.bal-ajanlo-parba:disabled { cursor: default; filter: saturate(.6); opacity: .85 }
.bal-ajanlo-parba.is-kesz { background: #059669 }

.bal-ajanlo-wishlist {
	font-size: 13.5px;
	color: #64748b;
}

.bal-ajanlo-ujra {
	text-align: center;
	font-size: 14px;
}

.bal-ajanlo-talalat .bal-top-card { box-shadow: none; border: 1px solid #e2e8f0 }

/* ---------------------------------------------------------------------------
   Mobil
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bal-ajanlo-szinpad { min-height: 340px }

	.bal-ajanlo-kartya {
		padding: 26px 22px;
		border-radius: 22px;
	}

	.bal-ajanlo-vezerlok {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.bal-ajanlo-gomb { justify-content: center; padding: 10px 12px }
	.bal-ajanlo-gomb--vissza { grid-column: 1 / -1 }

	.bal-ajanlo-talalat-fej { gap: 12px }
	.bal-ajanlo-szazalek { width: 66px; height: 66px }
	.bal-ajanlo-szazalek b { font-size: 18px }
}

/* ---------------------------------------------------------------------------
   Csökkentett mozgás — nincs dőlés, nincs repülés
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bal-ajanlo-kartya,
	.bal-ajanlo-kartya-maszk,
	.bal-ajanlo-kartya-jelzo,
	.bal-ajanlo-gomb,
	.bal-ajanlo-gomb--ikon::before,
	.bal-ajanlo-parba {
		transition: none;
	}

	.bal-ajanlo-kartya {
		transform: scale(calc(1 - var(--bal-melyseg, 0) * .05));
	}
}

/* ============================================================================
   13. VÁLTOZATOK — V1 csiszolt · V2 egykezes (ALAP) · V3 adaptív
   ============================================================================

   ⚠ A VÁLTOZAT a szerverről jön (`?valtozat=1|2|3`, WP-opció `balance_ajanlo_valtozat`),
     és a `.bal-ajanlo[data-valtozat="N"]` szelektorra ül. A JS ugyanaz mindháromban
     (assets/balance-ajanlo.js) — csak a DÖNTÉSEK HELYE és a haladás-kijelzés más.

   ⚠ EMLÉKEZTETŐ A MÉRT HIBÁKRA (a terv 9. pontja):
     · a húzás-küszöb RÖGZÍTÉSKOR 32%, VISSZAÁLLÁSKOR 24% (hiszterézis) — a
       korábbi 30% körüli sávban a kártya a szándékos visszahúzásnál is elment;
     · a sebesség csak KIEGÉSZÍTŐ és 0,65 px/ms — a gyors mozdulat ne döntsön;
     · minden érintőfelület legalább 44×44 px (WCAG 2.5.5/2.5.8), és van
       NEM-HÚZÁSOS út is (gombok, kurzorok, billentyűzet) a WCAG 2.2 SC 2.5.7-hez.
   ========================================================================== */

/* --- közös: állapotok, súly, fókusz, üzenetek --------------------------------- */

/* ⚠ A `hidden` attribútumot a display-szabályok felülírják, ezért kell ez a sor. */
.bal-ajanlo-lista[hidden],
.bal-ajanlo-szinpad[hidden],
.bal-ajanlo-vezerlok[hidden] { display: none }

.bal-ajanlo-kartya.is-aktiv { cursor: grab }
.bal-ajanlo-kartya.is-fogva { cursor: grabbing }

/* A válaszok SÚLYA látható — a modell ne legyen rejtett. */
.bal-ajanlo-suly {
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.bal-ajanlo-gomb:focus-visible,
.bal-ajanlo-lista-gomb-egy:focus-visible,
.bal-ajanlo-lista-gomb:focus-visible,
.bal-ajanlo-korai:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}

.bal-ajanlo-gomb:disabled,
.bal-ajanlo-lista-gomb-egy:disabled { opacity: .45; cursor: not-allowed }

.bal-ajanlo-varakozas {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-size: 14px;
	color: #64748b;
}

.bal-ajanlo-snackbar {
	position: fixed;
	left: 50%;
	bottom: calc(206px + var(--bal-ajanlo-chrome, 0px) + env(safe-area-inset-bottom));
	z-index: 60;
	max-width: min(92vw, 420px);
	transform: translate(-50%, 10px);
	opacity: 0;
	pointer-events: none;
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, .94);
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	transition: opacity .2s linear, transform .2s ease-out;
}

.bal-ajanlo-snackbar.is-latszik { opacity: 1; transform: translate(-50%, 0) }

/* V1-ben nincs rögzített sáv, ezért az üzenet az oldal aljára ül. */
.bal-ajanlo[data-valtozat="1"] ~ .bal-ajanlo-snackbar,
.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-snackbar { bottom: calc(24px + env(safe-area-inset-bottom)) }

/* --- a VÁLTOZAT-VÁLTÓ: fejlesztői vezérlő, csak a szerkesztőnek --------------- */

.bal-ajanlo-valto-sav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 8px 10px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
}

.bal-ajanlo-valto-felirat {
	margin-right: 4px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #64748b;
}

.bal-ajanlo-valto {
	padding: 6px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: #334155;
	font-size: 12px;
	text-decoration: none;
}

.bal-ajanlo-valto.is-active {
	border-color: #0d9488;
	background: #0d9488;
	color: #fff;
	font-weight: 600;
}

/* --- V1: csiszolt — sticky gombsáv, mindig kézben ------------------------------ */
.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-szinpad {
	min-height: 340px;
	min-height: min(420px, calc(100dvh - 340px));
}

.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-vezerlok {
	position: sticky;
	bottom: var(--bal-ajanlo-chrome, 0px);
	z-index: 20;
	padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .97) 36%);
	backdrop-filter: blur(6px);
}

.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-gomb {
	min-width: 44px;
	min-height: 44px;
	gap: 8px;
	justify-content: center;
}

.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-gomb-nyil,
.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-gomb-ikon { display: inline-flex }

/* --- V2: egykezes (ALAP) — a döntés a hüvelyk alatt --------------------------- */

/* hely a rögzített sávnak, hogy ne takarja a tartalmat (a téma alsó navigációjával együtt) */
.bal-ajanlo[data-valtozat="2"] { padding-bottom: calc(198px + var(--bal-ajanlo-chrome, 0px) + env(safe-area-inset-bottom)) }

.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-szinpad {
	min-height: 300px;
	max-height: 44dvh;
}

/* a szám a színpad tetején marad, de halkan — a haladás-érzet a csíkban van */
.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-halad {
	text-align: center;
	font-size: 11px;
	color: #64748b;
}

.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-vezerlok {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--bal-ajanlo-chrome, 0px);
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* ⚠ JOYSTICK mobilon: csillag FENT, mínusz LENT, ✗ balra, ✓ jobbra,
	   a VISSZAVONÁS a kártya KÖZEPÉN — és egyetlen gombon sincs felirat. */
	grid-template-areas:
		"csik   csik   csik"
		"ures1  nagyon ures2"
		"nem    vissza igaz"
		"ures3  kihagy ures4";
	gap: 8px;
	padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 -6px 20px rgba(15, 23, 42, .06);
}

.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-dontes="nem_igaz"] { grid-area: nem }
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-dontes="kihagyom"] { grid-area: kihagy }
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-dontes="igaz"] { grid-area: igaz }
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-dontes="nagyon_igaz"] { grid-area: nagyon }
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-vissza] { grid-area: vissza }
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-csik] { grid-area: csik }

/* ⚠ A korai kimenet NEM a `nagyon` cellába kerül (ott a Nagyon igaz gomb ül) —
   saját, teljes szélességű sorba, mert a DOM-ban utolsóként fűződik be. */
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-korai] {
	grid-column: 1 / -1;
	min-height: 48px;
}

/* a gombok ikon fölött, szöveg alatt — rövid újj-mozdulat, nagy célfelület */
.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb {
	justify-content: center;
	min-height: 54px;
	padding: 6px;
	text-align: center;
}

.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb-ikon svg { width: 34px; height: 34px }
.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb--vissza .bal-ajanlo-gomb-nyil svg { width: 22px; height: 22px }

/* a visszavonás KÖZÉPEN: halk, szürke korong — nem döntés, mūvelet */
.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb--vissza {
	--bal-ikon-1: #f1f5f9;
	--bal-ikon-2: #e2e8f0;
}

/* a legritkább, legnagyobb súlyú döntés szándékosan KÜLÖN, teljes szélességben */
.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-dontes="nagyon_igaz"] {
	flex-direction: row;
	min-height: 48px;
	gap: 8px;
}

/* V2 haladás-csík: 24 szegmens, a súly szerint színezve */
.bal-ajanlo-csik {
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: 6px;
}

.bal-ajanlo-csik i {
	flex: 1 1 0;
	height: 6px;
	border-radius: 3px;
	background: #e2e8f0;
}

.bal-ajanlo-csik i.is-igaz { background: #10b981 }
.bal-ajanlo-csik i.is-nagyon { background: #047857; height: 8px }
.bal-ajanlo-csik i.is-nem { background: #94a3b8 }
.bal-ajanlo-csik i.is-kihagy { background: #cbd5e1 }

/* --- V3: adaptív — bizonyosság, korai kimenet, lista -------------------------- */

.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-szinpad { min-height: 320px }

/* fénypontok: DÍSZÍTŐ jelzés, a jelentést a szerverről jövő MONDAT hordozza */
.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-halad[data-biztonsag]::after {
	display: block;
	margin-top: 4px;
	letter-spacing: 3px;
	font-size: 10px;
	color: #cbd5e1;
}

.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-halad[data-biztonsag="keves"]::after { content: "○ ○ ○" }
.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-halad[data-biztonsag="kozeledik"]::after { content: "● ○ ○"; color: #f59e0b }
.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-halad[data-biztonsag="eleg_biztos"]::after { content: "● ● ○"; color: #0d9488 }
.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-halad[data-biztonsag="biztos"]::after { content: "● ● ●"; color: #047857 }

.bal-ajanlo-korai {
	border: 1px solid #0d9488;
	color: #0f766e;
	background: rgba(13, 148, 136, .06);
	font-weight: 600;
}

/* a korai kimenet 3 válasz után jelenhet meg — ez lágy, nem ugrik */
@media (prefers-reduced-motion: no-preference) {
	.bal-ajanlo-korai { animation: bal-ajanlo-be .3s ease-out }
}

@keyframes bal-ajanlo-be {
	from { opacity: 0; transform: translateY(6px) }
	to { opacity: 1; transform: none }
}

.bal-ajanlo-lista-gomb {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
}

.bal-ajanlo-lista-gomb[aria-expanded="true"] { border-color: #0d9488; color: #0f766e }

/* --- lista-mód: a húzás NÉLKÜLI út (WCAG 2.2 SC 2.5.7 garanciája) ------------ */

.bal-ajanlo-lista {
	display: grid;
	gap: 12px;
	margin: 12px 0 20px;
}

.bal-ajanlo-lista-sor {
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background: #fff;
	transition: border-color .2s linear, opacity .2s linear;
}

.bal-ajanlo-lista-sor.is-kesz { border-color: #10b981; opacity: .55 }
.bal-ajanlo-lista-sor[data-valasz="nagyon_igaz"] { border-color: #047857 }

.bal-ajanlo-lista-szoveg {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.45;
}

.bal-ajanlo-lista-gombok {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 560px) {
	.bal-ajanlo-lista-gombok { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

.bal-ajanlo-lista-gomb-egy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #fff;
	font-size: 12px;
	cursor: pointer;
}

.bal-ajanlo-lista-gomb-egy i { font-style: normal; font-size: 10px; opacity: .6 }
.bal-ajanlo-lista-gomb-egy.is-igaz { border-color: #a7f3d0 }
.bal-ajanlo-lista-gomb-egy.is-nagyon { border-color: #6ee7b7 }
.bal-ajanlo-lista-gomb-egy.is-nem { border-color: #cbd5e1 }
.bal-ajanlo-lista-gomb-egy:hover { background: #f8fafc }

/* --- keskeny kijelző: a V2 sáv a keskeny mobil ELSŐDLEGES esete ---------------- */

@media (max-width: 480px) {
	.bal-ajanlo[data-valtozat="2"] { padding-bottom: calc(206px + var(--bal-ajanlo-chrome, 0px) + env(safe-area-inset-bottom)) }
	/* ⚠⚠ A JOYSTICK OSZLOPAI: 3 egyenlő oszlop kell, hogy az `grid-template-areas`
	   érvényes maradjon (a korábbi `56px repeat(3, …)` NÉGY oszlopot adott, ami
	   eltért a 3 cellás area-soroktól — ilyenkor a böngésző ELDOBJA az area-sort,
	   és minden gomb auto-elhelyezéssel máshova kerül). */
	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-vezerlok { grid-template-columns: repeat(3, minmax(0, 1fr)) }
	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb-ikon svg { width: 32px; height: 32px }
	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-snackbar { bottom: calc(214px + var(--bal-ajanlo-chrome, 0px) + env(safe-area-inset-bottom)) }
}

/* ============================================================================
   14. A NÉGY DÖNTÉS JELÖLŐJE — nem gomb, hanem JEL
   ============================================================================

   ✗ nem igaz (piros) · ⊖ nem fontos (szürke) · ★ nagyon igaz (arany) ·
   ✓ igaz (zöldeskék, a márka zöldje) — mind színátmenetes SVG.

   ⚠⚠ A DÖNTÉS-GOMBOKON NINCS KERET ÉS NINCS FEHÉR PIRULA — a felhasználó
     kérése szerint a jel maga a felület. A kattinthatóságot egy halvány,
     színátmenetes KORONG adja a jel mögött (hoverre erősödik), és a
     feliratok is megmaradnak (a jel + szó együtt olvasható).
   --------------------------------------------------------------------------- */

.bal-ajanlo-gomb--ikon {
	position: relative;
	/* ⚠ KELL a `z-index: -1` pszeudo-elemhez: enélkül a korong a KÁRTYA háttere
	   MÖGÉ kerülne (a `position: relative` önmagában nem nyit veremkörnyezetet). */
	isolation: isolate;
	z-index: 0;
	border: none;
	background: none;
	box-shadow: none;
	padding: 8px 12px;
	border-radius: 20px;
}

.bal-ajanlo-gomb--ikon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(72% 72% at 50% 26%, var(--bal-ikon-1, #eef2f6), var(--bal-ikon-2, #e2e8f0));
	opacity: .55;
	transition: opacity .18s linear, transform .18s ease-out;
}

.bal-ajanlo-gomb--ikon:hover::before { opacity: .9; transform: scale(1.04) }
.bal-ajanlo-gomb--ikon:active::before { transform: scale(.97) }

.bal-ajanlo-gomb--ikon.is-nem { --bal-ikon-1: #fee2e2; --bal-ikon-2: #fecaca }
.bal-ajanlo-gomb--ikon.is-igaz { --bal-ikon-1: #ccfbf1; --bal-ikon-2: #a7f3d0 }
.bal-ajanlo-gomb--ikon.is-nagyon { --bal-ikon-1: #fef3c7; --bal-ikon-2: #fde68a }
.bal-ajanlo-gomb--ikon.is-kihagy { --bal-ikon-1: #eef2f6; --bal-ikon-2: #e2e8f0 }

.bal-ajanlo-gomb--ikon .bal-ajanlo-gomb-ikon svg { width: 26px; height: 26px }
.bal-ajanlo-gomb--ikon .bal-ajanlo-gomb-szoveg { font-weight: 600 }

/* a lista-mód chipjei ugyanezt a négy jelet viselik */
.bal-ajanlo-lista-gomb-egy.is-nem { color: #b91c1c }
.bal-ajanlo-lista-gomb-egy.is-igaz { color: #0d9488 }
.bal-ajanlo-lista-gomb-egy.is-nagyon { color: #b45309 }
.bal-ajanlo-lista-gomb-egy.is-kihagy { color: #64748b }

/* ============================================================================
   15. TABLET ÉS DESKTOP — a döntések a KÁRTYA ALATT, nem a hüvelyk alatt
   ============================================================================

   ⚠⚠ EDDIG CSAK MOBIL MÓD VOLT. A V2 „egykezes” ötlete a hüvelyk-sávról szól,
     és az a helyes kézben tartott telefonon. Tableten és desktopon viszont a
     1440px széles, 191px magas RÖGZÍTETT sáv aránytalan: a kártya 560px-es
     hasáb, körülötte üres a képernyő, a sáv mégis teljes szélességű.

   Ezért 768px fölött a sáv **folyásba** kerül, a kártya alá, középre zárva —
   és a színpad nagyobb (400px), mert van hely. A haladás-csík, a
   snackbar-visszavonás és a súly-feliratok maradnak (azok nem mobil-specifikusak);
   csak a RÖGZÍTÉS és a hüvelyk-geometria tűnik el. Az `alsoChrome()` mérése
   ilyenkor nem is fut (nincs rögzített sáv, amit el kellene kerülni).
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.bal-ajanlo { max-width: 640px }

	.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-szinpad,
	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-szinpad,
	.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-szinpad {
		min-height: 400px;
		max-height: none;
	}

	/* V2: a hüvelyk-sáv helyett a kártya alatti, középre zárt döntés-sáv */
	.bal-ajanlo[data-valtozat="2"] { padding-bottom: 24px }

	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb { min-height: 52px }

	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb-ikon svg { width: 30px; height: 30px }

	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-vezerlok {
		position: static;
		display: grid;
		max-width: 560px;
		margin: 0 auto;
		padding: 12px;
		border: 1px solid #e2e8f0;
		border-radius: 18px;
		background: #f8fafc;
		box-shadow: none;
		backdrop-filter: none;
		grid-template-columns: 56px repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"vissza csik   csik   csik   csik"
			"ures   nem    kihagy nagyon igaz";
	}

	.bal-ajanlo[data-valtozat="2"] .bal-ajanlo-gomb {
		flex-direction: row;
		gap: 8px;
		min-height: 52px;
		font-size: 12.5px;
	}

	.bal-ajanlo[data-valtozat="2"] [data-bal-ajanlo-korai] { grid-column: 1 / -1 }

	/* V1 és V3: vissza a természetes, egysoros vezérlősávra */
	.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-vezerlok,
	.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-vezerlok {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.bal-ajanlo[data-valtozat="1"] .bal-ajanlo-gomb--vissza,
	.bal-ajanlo[data-valtozat="3"] .bal-ajanlo-gomb--vissza { grid-column: auto }

	.bal-ajanlo-snackbar { bottom: 24px }
}

/* ============================================================================
   16. ELŐNÉZETI ESZKÖZ-VÁLTÓ — mobil / tablet / desktop (csak a szerkesztőnek)
   ============================================================================

   ⚠ MINEK: a pakli 768px alatt MOBIL (hüvelyk-joystick), fölötte a kártya alatti
     folyásban lévő sáv. Hogy a kettőt EGY képernyőn lehessen összehasonlítani,
     a modul a `data-nezet` szerint a választott eszköz szélességébe zárja magát,
     és az elrendezést **kényszeríti** — a viewport szélességétől függetlenül.

   ⚠ A `data-nezet` NÉLKÜL minden bitszerűen a régi: az automatikus (viewport)
     működés nem változik, mert a szabályok mind `[data-nezet]`-re ülnek.
   --------------------------------------------------------------------------- */

/*
 * ⚠⚠ A NÉZET-VÁLTÓ (mobil/tablet/desktop) IKON-STÍLUSA ÁTKÖLTÖZÖTT a
 *   `balance-nezet-eszkoz.css`-be, mert az MINDEN oldalon tölt (a váltó a
 *   fejlécben is megjelenik), ez a fájl viszont csak a pakli két oldalán.
 *   Itt szándékosan nem maradt másolat (egy forrás igazság).
 */

/* az előnézeti keret — a választott eszköz szélességében */
.bal-ajanlo[data-nezet] {
	margin: 0 auto;
	padding-inline: 14px;
	border-radius: 24px;
	outline: 1px dashed #cbd5e1;
	outline-offset: 6px;
}

.bal-ajanlo[data-nezet="mobil"] { max-width: 390px }
.bal-ajanlo[data-nezet="tablet"] { max-width: 768px }
.bal-ajanlo[data-nezet="desktop"] { max-width: 1120px }

/* --- MOBIL mód KÉNYSZERÍTVE: a joystick a viewport alján, 390px szélesen ----- */

.bal-ajanlo[data-nezet="mobil"][data-valtozat="2"] { padding-bottom: calc(206px + env(safe-area-inset-bottom)) }

.bal-ajanlo[data-nezet="mobil"] .bal-ajanlo-szinpad { min-height: 300px; max-height: 44dvh }

.bal-ajanlo[data-nezet="mobil"][data-valtozat="2"] .bal-ajanlo-vezerlok {
	position: fixed;
	left: 50%;
	right: auto;
	width: 390px;
	max-width: 100vw;
	transform: translateX(-50%);
	display: grid;
	padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
	border: 1px solid #e2e8f0;
	border-radius: 18px 18px 0 0;
	background: #fffffffa;
	box-shadow: 0 -6px 20px #0f172a0f;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"csik   csik   csik"
		"ures1  nagyon ures2"
		"nem    vissza igaz"
		"ures3  kihagy ures4";
}

.bal-ajanlo[data-nezet="mobil"][data-valtozat="2"] .bal-ajanlo-gomb {
	justify-content: center;
	min-height: 54px;
	padding: 6px;
}

.bal-ajanlo[data-nezet="mobil"][data-valtozat="2"] .bal-ajanlo-gomb-ikon svg { width: 34px; height: 34px }
.bal-ajanlo[data-nezet="mobil"] .bal-ajanlo-snackbar { bottom: calc(206px + env(safe-area-inset-bottom)) }

/* --- TABLET/DESKTOP mód KÉNYSZERÍTVE: a sáv a kártya alatt, folyásban --------- */

.bal-ajanlo[data-nezet="tablet"][data-valtozat="2"],
.bal-ajanlo[data-nezet="desktop"][data-valtozat="2"] { padding-bottom: 24px }

.bal-ajanlo[data-nezet="tablet"] .bal-ajanlo-szinpad,
.bal-ajanlo[data-nezet="desktop"] .bal-ajanlo-szinpad { min-height: 400px; max-height: none }

.bal-ajanlo[data-nezet="tablet"][data-valtozat="2"] .bal-ajanlo-vezerlok,
.bal-ajanlo[data-nezet="desktop"][data-valtozat="2"] .bal-ajanlo-vezerlok {
	position: static;
	left: auto;
	right: auto;
	width: auto;
	transform: none;
	display: grid;
	max-width: 560px;
	margin: 0 auto;
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	background: #f8fafc;
	box-shadow: none;
	backdrop-filter: none;
	grid-template-columns: 56px repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"vissza csik   csik   csik   csik"
		"ures   nem    kihagy nagyon igaz";
}

.bal-ajanlo[data-nezet="tablet"][data-valtozat="2"] .bal-ajanlo-gomb,
.bal-ajanlo[data-nezet="desktop"][data-valtozat="2"] .bal-ajanlo-gomb {
	justify-content: center;
	min-height: 52px;
	padding: 6px;
}

.bal-ajanlo[data-nezet="tablet"][data-valtozat="2"] .bal-ajanlo-gomb-ikon svg,
.bal-ajanlo[data-nezet="desktop"][data-valtozat="2"] .bal-ajanlo-gomb-ikon svg { width: 30px; height: 30px }

.bal-ajanlo[data-nezet="tablet"] .bal-ajanlo-snackbar,
.bal-ajanlo[data-nezet="desktop"] .bal-ajanlo-snackbar { bottom: 24px }

/* ============================================================================
   16. TALÁLATOK — HÁROM SÁV + LENYITHATÓ „TOVÁBBI TALÁLATOK"  (2026-10-07)
   ----------------------------------------------------------------------------
   A felhasználó kérése: „legyen strukturált a találat: Belépő szint, haladó,
   mester, mindegyikhez 4-4 találat, valamint egy további találatok lenyitható
   rész."

   ⚠⚠ SPECIFICITÁS: a téma `balance-tutor.css`-ében `.bal-content h3` (0,1,1)
   él, ami az EGYOSZTÁLYOS szabályomat legyőzné — ez a csapda ebben a projektben
   nyolcszor szedte már rá a csapatot. Ezért a sáv-szabályok `.main-column`
   előtagot kapnak (0,2,0), ami minden érintett oldalon jelen van. A gombnál
   KÉTSZERES OSZTÁLY áll (0,2,0), mert az ős-FÜGGETLEN — a `%`-körnél pont az
   ős-függő javítás bukott meg a találatok oldalán.
   ============================================================================ */

.main-column .bal-ajanlo-sav { margin: 0 0 28px }

.main-column .bal-ajanlo-sav-cim {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

.main-column .bal-ajanlo-sav-nev { font-size: inherit; color: inherit }

.main-column .bal-ajanlo-sav-db {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.main-column .bal-ajanlo-sav-leiras {
    margin: 0 0 16px;
    font-size: 14px;
    color: #64748b;
}

/* --- a lenyitható rész: natív <details>, nyíl a cím végén ------------------ */

.main-column .bal-ajanlo-tovabbi {
    margin: 0 0 28px;
    padding: 4px 16px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: linear-gradient(160deg, #ffffff, #f8fafc);
}

.main-column .bal-ajanlo-tovabbi-fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 2px;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
}

.main-column .bal-ajanlo-tovabbi-fej::-webkit-details-marker { display: none }
.main-column .bal-ajanlo-tovabbi-fej::marker { content: "" }

.main-column .bal-ajanlo-tovabbi-cim::after {
    content: "▾";
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    color: #0d9488;
    transition: transform .2s ease;
}

.main-column .bal-ajanlo-tovabbi[open] .bal-ajanlo-tovabbi-cim::after { transform: rotate(180deg) }

.main-column .bal-ajanlo-tovabbi-db {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.main-column .bal-ajanlo-tovabbi[open] .bal-ajanlo-tovabbi-fej {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.main-column .bal-ajanlo-tovabbi .bal-ajanlo-talalat { margin-bottom: 22px }

/* --- a kedvenc-gomb: KÖR, IKON, FELIRAT NÉLKÜL ---------------------------- */

.bal-ajanlo-parba.bal-ajanlo-parba {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
}

.bal-ajanlo-parba .bal-ajanlo-sziv { display: block; width: 22px; height: 22px }

/* ⚠ A kész állapot a szív KITÖLTÉSE — a felirat helyett ez a visszajelzés. */
.bal-ajanlo-parba.is-kesz .bal-ajanlo-sziv { fill: currentColor }
.bal-ajanlo-parba.is-folyamatban { opacity: .72 }

/* --- a lista-mód: ugyanaz a grafikus jel, KÖR alakban, KÖZÉPRE ------------ */

.bal-ajanlo-lista-gombok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bal-ajanlo-lista-gombok .bal-ajanlo-gomb--ikon {
    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}