/*
 * A 2D KURZUSKÁRTYA — PONTOSAN a 3D kártya (2026-10-06).
 *
 * A felhasználó kérése: „Legyen a 2D kártya pontosan olyan, mint a 3D, kivéve a
 * fenti képet: ha nem az alap (mellékelt kép) van, hanem egyedi kép, akkor az
 * maradjon. Ha az alapkép van, akkor inkább legyen a 3D színes fejléce. A
 * Részletek gomb legyen a 2D-ban ugyanott, mint a 3D-ben. A Jelentkezem is. És a
 * Jelentkezem/Kosárba gomb legyen ugyanolyan méretű, formájú, mint a 3D kártyákon.”
 *
 * ⚠⚠ MINDEN érték a 3D kártyáról MÉRVE (2026-10-04/06, éles):
 *   fejléc 168px · ikon 48×48/16px · kategória 11px/800 · jelvény 6px 11px/11px
 *   · törzs padding 16px 18px 18px · meta 12.5px · cím 17px/800/1.35 (9px fent)
 *   · leírás 13.5px/1.6 (7px fent) · idősor 12.5px/gap 14px (20px fent)
 *   · Részletek 8px 14px/12.5px/999px + translateY(-9px) + margin-left auto
 *   · lábléc margin-top 12px · ár 17px/800 · Jelentkezem 11px 19px/13px/800 (120×42)
 *
 * ⚠⚠ SPECIFICITÁS (három csapda, mind MÉRVE):
 *   1. a téma `.bal-content a` (0,1,1) → minden szín-szabály kap előtagot;
 *   2. a Tutor Pro értesítő-szabálya `a.tutor-btn-block.tutor-btn-md.tutor-btn-outline-primary`
 *      = (0,3,1) — ez MEGVERTE a (0,3,0) gomb-szabályomat, ezért a fő gomb
 *      14px sugarat és 14.4px/680 betűt kapott (46px magas lett a 42 helyett).
 *      A javítás: KÉTSZERES osztály → (0,4,1);
 *   3. a `.tutor-mt-12`/`.tutor-mb-20` segédosztályok (0,1,0) — a saját soraim
 *      (0,2,0) verik.
 *
 * ⚠ Ez a fájl NEM a `landing-page.css`-t bővíti: az az archívumon nincs betöltve,
 *   ezért minden stílus itt önálló (a 3D kártya receptje 1:1 átvéve).
 */

/* ───────────────────────────────────────────────────────────────────────────
   1. A BAL OLDALI SZŰRŐSÁV KESKENYEBB

   Mért érték (1440 px, /tanfolyamok/): a szűrő `tutor-col-3` = 25% = 336 px,
   a kártya 299 px; a 3D kártya 372 px. A 25%-ot fix 260 px-re visszük, és a
   rács-oszlopot `calc(100% - 260px)`-re — így a kettő PONTOSAN kitölti a sort,
   a kártya 324–333 px lesz (nagyobb ablakban arányosan több).
   (228 px-nél a szűrő címkéi már két sorba törtek — mértem.)

   ⚠⚠ NE használj itt `flex: 1 1 auto`-t a rács-oszlopra! MÉRVE: a Tutor sora
     `flex-wrap: wrap`, és a rács `min-width: auto` miatt nem zsugorodik a
     tartalma alá — így az oszlop a KÖVETKEZŐ sorba fordult, teljes szélességben,
     és a kártyák a szűrő ALÁ csúsztak. A `calc()`-os szélesség zárja ki ezt.

   ⚠ CSILLAG: a `min-width: 1200px`-en KÍVÜL nem nyúlunk hozzá! Ott a Tutor a
     szűrőt kihúzható fiókként (`position: fixed; width: 340px`) használja —
     azt egy fix szélesség tönkretenné.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
	.tutor-row > .tutor-col-3.tutor-course-filter-container {
		flex: 0 0 260px;
		width: 260px;
		max-width: 260px;
	}

	.tutor-row > .tutor-col-xl-9 {
		flex: 0 0 auto;
		width: calc(100% - 260px);
		max-width: calc(100% - 260px);
	}

	/* A rács hézagát a 3D paklihoz igazítjuk (ott `gap: 18px`) — így a két pakli
	   ritmusa ugyanaz, és a kártya is ~9 px-t nyer. Mérve: a Tutor 32 px-et tesz. */
	.tutor-row .tutor-course-list.tutor-grid { gap: 18px }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. A FEJLÉC — a 3D kártya színes vizuálja (168 px), VAGY a kurzus SAJÁT képe

   ⚠ A 3D kártyán a fejléc MINDIG gradiens (nincs kép). A 2D kártyán:
     · VALÓDI kép → az marad (minta és fehér kör nélkül),
     · sablon-borító (könyv+toll, ~5 KB PNG) → a 3D színes fejléce lép a helyére.
   A szerver dönti el (`balance_2d_kartya_alap_kep()`), a JS teszi rá a
   `bal-2d-alap` / `bal-2d-van-kep` osztályt.
   ─────────────────────────────────────────────────────────────────────────── */
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual {
	position: relative;
	height: 168px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #0fb98b, #12b981 55%, #0ea5a0);
}

.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--mint { background: linear-gradient(135deg, #0fb98b, #12b981 55%, #0ea5a0) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--blue { background: linear-gradient(135deg, #4f46e5, #2563eb 60%, #3b82f6) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--violet { background: linear-gradient(135deg, #7c3aed, #a21caf 60%, #c026d3) }

/* ★★ A KATEGÓRIA SZÍNEI (2026-10-07) — UGYANAZ a paletta, mint a 3D felületen.
   A felhasználó: „a 3d felületen jók a színek, igazodjon minden ahhoz".
   ⚠ Az IGAZSÁG FORRÁSA a `landing-page.css` 1270–1298. sora (`.bal-top-visual--*`,
     a 3D kártya fejléce) — ha ott változik, itt is léptetni kell UGYANABBAN a
     körben. Az értékek 1:1 onnan származnak.
   ⚠ A fenti `mint|blue|violet` szándékosan megmarad (JS-tartalék + régi, cache-elt
     adathalmaz), de a szerver már a kategória-kulcsot adja. */
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--fiz-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--fiz-2 { background: linear-gradient(135deg, #f97316, #fb923c) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--fiz-3 { background: linear-gradient(135deg, #ea580c, #f59e0b) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--erz-1 { background: linear-gradient(135deg, #0d9488, #14b8a6) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--erz-2 { background: linear-gradient(135deg, #059669, #10b981) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--erz-3 { background: linear-gradient(135deg, #10b981, #34d399) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--men-1 { background: linear-gradient(135deg, #4f46e5, #6366f1) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--men-2 { background: linear-gradient(135deg, #2563eb, #3b82f6) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--men-3 { background: linear-gradient(135deg, #0284c7, #38bdf8) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--lel-1 { background: linear-gradient(135deg, #7c3aed, #a855f7) }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual--semleges { background: linear-gradient(135deg, #64748b, #94a3b8) }

/* a Tutor 16:9 kerete töltse ki a fejlécet */
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual > a { position: absolute; inset: 0; display: block }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual > a > div { position: absolute; inset: 0; padding-bottom: 0 }
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual img { display: block; width: 100%; height: 100%; object-fit: cover }

/* a sablon-borítót elrejtjük — a gradiens marad */
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual.bal-2d-alap img { display: none }

/* a 3D fejléc két dísze — CSAK a színes fejlécen (fotón nem) */
.tutor-course-card .tutor-course-thumbnail.bal-2d-visual.bal-2d-alap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(#ffffff 1px, #0000 1px);
	background-size: 14px 14px;
	opacity: .18;
}

.tutor-course-card .tutor-course-thumbnail.bal-2d-visual.bal-2d-alap::after {
	content: "";
	position: absolute;
	top: -34px;
	right: -26px;
	z-index: 1;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff2e, #0000 70%);
}

/* a fejléc felső sora: ikon + kategória (a 3D-n `bal-top-visual-top` + `bal-top-cat`) */
.bal-2d-top {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	z-index: 4;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.bal-2d-ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background: #ffffff33;
	border: 1px solid #ffffff4d;
	border-radius: 16px;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.bal-2d-kat {
	padding: 6px 11px;
	background: #00000040;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── jelvények — a fejléc bal alsó sarkában, mint a 3D kártyán ── */
.bal-2d-jelvenyek {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bal-2d-jelveny {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	color: #fff;
	background: #ffffff33;
	border: 1px solid #ffffff4d;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.bal-2d-jelveny--ingyenes {
	color: #042e1c;
	background: #34d399;
	border-color: transparent;
}

.bal-2d-jelveny svg { flex: 0 0 auto }

/* szint: három sáv, a szintnek megfelelően töltve (1 / 2 / 3) */
.bal-2d-savok {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 11px;
}

.bal-2d-savok i {
	display: block;
	width: 3px;
	height: 5px;
	background: rgba(255, 255, 255, .45);
	border-radius: 2px;
}

.bal-2d-savok i:nth-child(2) { height: 8px }
.bal-2d-savok i:nth-child(3) { height: 11px }
.bal-2d-savok i.is-feltolt { background: #fff }

/* ───────────────────────────────────────────────────────────────────────────
   3. A TÖRZS — meta sor, cím, leírás, óra+lecke sor, oktató sor
   (mind a 3D kártya méreteivel; a sorokat a JS illeszti be)
   ─────────────────────────────────────────────────────────────────────────── */
.tutor-course-card .bal-2d-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 600;
}

/* „Új képzés” — a 3D-n zöld pirula, nem sima szöveg */
.tutor-course-card .bal-2d-uj {
	padding: 3px 9px;
	color: #059669;
	background: #e7f8f1;
	border: 1px solid #c8ecdd;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
}

.tutor-course-card .bal-2d-csillag { display: inline-flex; align-items: center; gap: 4px; color: #f59e0b }
.tutor-course-card .bal-2d-pont { color: #cbd5e1 }

.tutor-course-card .tutor-card-body .tutor-course-name {
	margin: 9px 0 0;
	color: #0f172a;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.35;
}

.tutor-course-card .tutor-card-body .tutor-course-name a { color: inherit; text-decoration: none }
.tutor-course-card .tutor-card-body .tutor-course-name a:hover { color: #1d4ed8 }

.tutor-course-card .bal-2d-desc {
	margin: 7px 0 0;
	color: #64748b;
	font-size: 13.5px;
	line-height: 1.6;
}

/* ⚠⚠ AZ IDŐ SOR — ez a 3D kártya kulcsa: a hossz + „N lecke” + a Részletek.
   ⚠ A KÉTSZERES osztály (`.bal-2d-ido.bal-2d-ido`) azért kell, mert a KORÁBBI
     `balance-tutor.css`-beli létszám-elrejtő szabályom
     (`.bal-content .tutor-course-card .tutor-card-body .tutor-meta:not(…:has(…))`,
     (0,3,1)) `margin: 0 0 12px`-t tesz rá — MÉRVE ez nyerte a `margin-top: 20px`
     helyett. A kétszeres osztály (0,4,0) már erősebb. */
.tutor-course-card .tutor-card-body .bal-2d-ido.bal-2d-ido {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0 0;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 500;
}

.tutor-course-card .tutor-card-body .bal-2d-ido .bal-2d-lecke {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tutor-course-card .tutor-card-body .bal-2d-ido svg { color: #94a3b8 }

/* „Részletek” — ugyanott, mint a 3D-n: az óra+lecke sorban, jobbra, kiemelve.
   ⚠ MÉRVE 110×36 a 3D-n: ezért `line-height: 18px` (a sor örökölt 19.5px-e
     38 px magas pirulát adott). */
.tutor-course-card .tutor-card-body .bal-2d-ido a.bal-2d-reszletek {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 8px 14px;
	color: #0b7a5c;
	background: #e7f8f1;
	border: 1px solid #c8ecdd;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
	transform: translateY(-9px);
	transition: background .16s, transform .16s;
}

.tutor-course-card .tutor-card-body .bal-2d-ido a.bal-2d-reszletek:hover {
	color: #0b7a5c;
	background: #d5f2e7;
	transform: translateY(-11px);
}

/* az oktató sora — a 3D-n: „Név · Szerep”, szaggatott vonallal */
.tutor-course-card .bal-2d-oktato {
	border-top: 1px dashed #e2e8f0;
	margin: auto 0 0;
	padding-top: 12px;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 600;
}

/* a 3D kártyán nincs avatar és nincs kategória-link (az a FEJLÉCBEN van).
   ⚠ A kategória-link href-je az archívumon
     `…/course-category/belso-iranytu/?tutor-course-filter-category=71` — és a
     KORÁBBI zöld pirula-szabályom (`.bal-content … a[href*="/course-category/"]`,
     MÉRVE (0,4,1)) `display: inline-block`-ot ad neki. Ezért itt (0,5,1). */
.tutor-course-card .bal-2d-oktato .tutor-avatar { display: none }

	/* ★★ A SZERZŐ-SOR (2026-10-07) — a kategória VISSZA, a szerep HELYETT.
	   A felhasználó: „a kártyákon »szerző dr. Orbán Géza Itt: · Alapító« — ez nem
	   jó, mert az Alapító helyett a kategóriát kell kiírni, a szerző ALÁ, mert
	   vannak hosszabb kategóriák, amik nem férnének ki”.
	   ⚠⚠ EDDIG AZ ALÁBBI SZABÁLY ELREJTETTE a Tutor saját kategória-linkjét —
	     ezért maradt vissza a gazdátlan „Itt:”, és ezért került a helyére az
	     oktató szerepe. Most a kategória LÁTSZIK, a szerepet a JS már nem fűzi be,
	     és az „Itt: …” a szerző ALATT, külön sorban áll (a JS zárja blokkba). */
	.tutor-course-card .bal-2d-oktato .bal-2d-itt {
		display: block;
		color: #94a3b8;
		font-weight: 400;
	}

	.tutor-course-card .bal-2d-oktato .bal-2d-itt a {
		color: #94a3b8;
		font-weight: 400;
	}
/* ───────────────────────────────────────────────────────────────────────────
   4. A LÁBLÉC — ár + a fő gomb, egy sorban (a 3D `bal-top-foot`-ja)
   ─────────────────────────────────────────────────────────────────────────── */
.tutor-course-card .tutor-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.tutor-course-card .tutor-card-footer .list-item-button {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* ⚠⚠ A FIZETŐS kártyákon a Tutor az árat ÉS a gombot EGY wrapperbe teszi
   (`.tutor-d-flex.tutor-align-c…`), ami tartalomra zsugorodik és BALRA áll —
   ezért a „Kosárba” beljebb került, mint az ingyenes „Jelentkezem” (MÉRVE:
   a wrapper 224 px, a gomb jobb széle 970 a tartalom jobb széle 1038 helyett).
   A wrapper kitöltése teszi a gombot UGYANODA, mint az ingyenesnél. */
.tutor-course-card .tutor-card-footer > .tutor-d-flex {
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* a beszúrt ár (ingyenes kurzusnál a Tutor nem tesz ár-elemet) */
.tutor-course-card .tutor-card-footer .bal-2d-ar,
.tutor-course-card .tutor-card-footer .list-item-price .price {
	color: #059669;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.tutor-course-card .tutor-card-footer .list-item-price .price del {
	color: #94a3b8;
	font-size: 12.5px;
	font-weight: 600;
}

/* A FŐ GOMB — „Jelentkezem” / „Kosárba”: MÉRVE 120×42 (a 3D-n ugyanennyi).
   ⚠⚠ KÉTSZERES osztály = (0,4,1): a Tutor Pro értesítő-szabálya (0,3,1) VOLT az
     erősebb, és 14px sugarat + 14.4px/680 betűt adott a gombnak (46px magas lett).
   ⚠⚠ `min-height: 0` KELL: a KORÁBBI `balance-tutor.css`-beli szabályom
     (`.bal-content .tutor-course-card .tutor-card-footer .tutor-btn`, (0,3,1))
     MÉRVE `min-height: 46px`-et ad — ez tartotta 46 px magasan a gombot a 42 helyett.
   ⚠ `line-height: 20px` = 13 px betűnél pont 42 px (11+20+11). */
.tutor-course-card .tutor-card-footer a.bal-2d-elsodleges.bal-2d-elsodleges {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-height: 0;
	height: auto;
	padding: 11px 19px;
	color: #fff;
	background: linear-gradient(108deg, #0a58ff, #0092cf 45%, #10c98c);
	border: 0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	line-height: 20px;
	letter-spacing: normal;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 20px #0a58ff33;
	transition: transform .18s, box-shadow .18s;
}

.tutor-course-card .tutor-card-footer a.bal-2d-elsodleges.bal-2d-elsodleges:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px #0a58ff4d;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. A SZŰRŐ — TÖMÖREBB ÉS LEBONTHATÓ, ALAPBÓL ÖSSZECSUKVA (2026-10-06)

   A felhasználó: „a keresés mező alatti szűrő legyen tömörebb és lebontható, és
   alapból összecsukva” + „típus, kategória, stb kibontható”.

   ⚠⚠ MÉRVE (/tanfolyamok/, 1440 px): a szűrőoszlop ~1340 px magas volt —
     „Kategória” 558 px, „Szint” 214 px, „Típus” 112 px, „Ár” 112 px, „Címke” 24 px.
     Összecsukva ~330 px.

   ⚠ A `bal-2d-szuro` / `bal-2d-szuro-fej` / `bal-2d-szuro-torzs` osztályokat a JS
     teszi fel (a Tutor minden szakasza `h3.tutor-widget-title` +
     `div.tutor-widget-content`). A KERESŐMEZŐ és a cím nélküli blokk („Összes
     szűrő törlése”) szándékosan kimarad — azok mindig látszanak.
   ─────────────────────────────────────────────────────────────────────────── */

/* a szakaszok közti Tutor-margó (48 px) helyett 8 px — ettől lesz tömör */
.tutor-course-filter-form .tutor-widget { margin-top: 8px }

/* a szakasz fejléce: kattintható, tömör sor */
.bal-2d-szuro .bal-2d-szuro-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	color: #0f172a;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background .16s, border-color .16s;
}

.bal-2d-szuro .bal-2d-szuro-fej:hover { background: #e8eef6 }

.bal-2d-szuro.is-nyitva .bal-2d-szuro-fej {
	color: #0b7a5c;
	background: #eef7f3;
	border-color: #c8ecdd;
}

.bal-2d-szuro .bal-2d-szuro-fej:focus-visible {
	outline: 2px solid var(--bal-blue, #2563eb);
	outline-offset: 2px;
}

.bal-2d-szuro .bal-2d-szuro-nyil {
	display: inline-flex;
	flex: 0 0 auto;
	color: #64748b;
	transition: transform .18s;
}

.bal-2d-szuro.is-nyitva .bal-2d-szuro-nyil { transform: rotate(180deg) }

/* a szakasz tartalma ALAPBÓL CSukva */
.bal-2d-szuro .bal-2d-szuro-torzs { display: none }

.bal-2d-szuro.is-nyitva .bal-2d-szuro-torzs {
	display: block;
	padding-top: 10px;
}

/* tömörebb belső lista — ⚠ MÉRVE: a szűrő listája NEM `.tutor-form-check`, hanem
   `ul.tutor-list > li.tutor-list-item` (36 px sor + **16 px** alsó margó → 11
   kategória = 572 px). A 6 px-es margó ~110 px-t hoz vissza. */
.bal-2d-szuro .bal-2d-szuro-torzs .tutor-list-item { margin-bottom: 6px }
.bal-2d-szuro .bal-2d-szuro-torzs .tutor-list-item:last-child { margin-bottom: 0 }
.bal-2d-szuro .bal-2d-szuro-torzs .tutor-list-item label { font-size: 12.5px; line-height: 1.35 }

/* a szűrőoszlop belső margója kisebb (a nagy nézetben) — a mobil fiók 32 px marad */
@media (min-width: 1200px) {
	.tutor-course-filter-container { padding: 20px }
}

/* ───────────────────────────────────────────────────────────────────────────
   5b. AZ ÁR-SKÁLA — 0–100 000 Ft (2026-10-06)
   A „Fizetős” jelölőnégyzet helyére lép (a JS cseréli ki).
   Az érték `name="bal-ar-max"` mező az űrlapban → a szerver is látja.
   ─────────────────────────────────────────────────────────────────────────── */
.bal-2d-ar-skalaz { padding: 2px 0 0 }

.bal-2d-ar-felirat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 600;
}

.bal-2d-ar-felirat b {
	color: #059669;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.bal-2d-ar-csuszka {
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.bal-2d-ar-csuszka::-webkit-slider-runnable-track {
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
}

.bal-2d-ar-csuszka::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -7px;
	background: linear-gradient(135deg, #0fb98b, #0ea5a0);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px #0f172a2e;
}

.bal-2d-ar-csuszka::-moz-range-track {
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
}

.bal-2d-ar-csuszka::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #0fb98b;
	border: 2px solid #fff;
	border-radius: 50%;
}

.bal-2d-ar-csuszka:focus-visible {
	outline: 2px solid var(--bal-blue, #2563eb);
	outline-offset: 2px;
}

.bal-2d-ar-veg {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 600;
}

/* ⚠ „Csak ingyenes” bepipálva a skála ELSZÜRKÜL (és le van tiltva) — 2026-10-06. */
.bal-2d-ar-skalaz.is-szurke { opacity: .45 }
.bal-2d-ar-skalaz.is-szurke .bal-2d-ar-felirat b { color: #94a3b8 }
.bal-2d-ar-skalaz.is-szurke .bal-2d-ar-csuszka { cursor: not-allowed }

.bal-2d-ar-skalaz.is-szurke .bal-2d-ar-csuszka::-webkit-slider-thumb {
	background: #cbd5e1;
	box-shadow: none;
}

.bal-2d-ar-skalaz.is-szurke .bal-2d-ar-csuszka::-moz-range-thumb { background: #cbd5e1 }
