/*
 * ============================================================================
 * A KURZUS-RÉSZLETEK OLDAL — a Balance saját elrendezése (2026-10-07)
 * ============================================================================
 *
 * A minta a `/teszt-3d/` prototípus kurzus-részletek oldala. A döntéseket és a
 * mért tényeket lásd: `inc/balance-kurzus.php`.
 *
 * ⚠⚠ HÁROM DOLOG, AMI MINDEN SZABÁLYT MEGHATÁROZ
 * ─────────────────────────────────────────────
 *   1. A téma `.bal-content a` (0,1,1), `.bal-content p` (0,1,1) és
 *      `.bal-content h2/h3` szabályai **erősebbek az egyosztályos** modul-
 *      szabálynál → ezért itt MINDEN szabály `.bal-kurzus` előtagot kap
 *      (0,2,0). `!important` egy helyen sincs.
 *   2. A `--bal-grad` és a `--green` a `balance-shell.css :root`-jában él
 *      (minden oldalon), a kategória-színek viszont eddig CSAK a
 *      `landing-page.css`-ben (az a kurzusoldalon nem tölt) → ezért a
 *      színátmenetek itt **ismételve** vannak. ⚠ Ha a `landing-page.css`
 *      kategória-palettája változik, **ugyanabban a körben** ezt is léptetni
 *      kell (a `landing-page.css` 1270–1298. sora az igazság forrása).
 *   3. A színátmenetek `background-image`-et adnak, az alap-szabályok
 *      `background-color`-t — így **nem ütköznek**, és a borítókép
 *      (`.is-kep`, 0,3,0) felülírja a színátmenetet.
 */

/* ───────────────────────────────────────────────────────────────────────────
   1. A KATEGÓRIA SZÍNÁTMENETEI (a `_balance_kategoria_szin` term-meta kulcsai)
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus .bal-kurzus-grad--fiz-1 { background-image: linear-gradient(135deg, #f59e0b, #fbbf24) }
.bal-kurzus .bal-kurzus-grad--fiz-2 { background-image: linear-gradient(135deg, #f97316, #fb923c) }
.bal-kurzus .bal-kurzus-grad--fiz-3 { background-image: linear-gradient(135deg, #ea580c, #f59e0b) }
.bal-kurzus .bal-kurzus-grad--erz-1 { background-image: linear-gradient(135deg, #0d9488, #14b8a6) }
.bal-kurzus .bal-kurzus-grad--erz-2 { background-image: linear-gradient(135deg, #059669, #10b981) }
.bal-kurzus .bal-kurzus-grad--erz-3 { background-image: linear-gradient(135deg, #10b981, #34d399) }
.bal-kurzus .bal-kurzus-grad--men-1 { background-image: linear-gradient(135deg, #4f46e5, #6366f1) }
.bal-kurzus .bal-kurzus-grad--men-2 { background-image: linear-gradient(135deg, #2563eb, #3b82f6) }
.bal-kurzus .bal-kurzus-grad--men-3 { background-image: linear-gradient(135deg, #0284c7, #38bdf8) }
.bal-kurzus .bal-kurzus-grad--lel-1 { background-image: linear-gradient(135deg, #7c3aed, #a855f7) }
.bal-kurzus .bal-kurzus-grad--semleges { background-image: linear-gradient(135deg, #64748b, #94a3b8) }

/* ───────────────────────────────────────────────────────────────────────────
   2. AZ ELRENDEZÉS
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus {
	padding: 6px 0 56px;
}

.bal-kurzus-morzsa {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
}

.bal-kurzus-morzsa a { color: #64748b }
.bal-kurzus-morzsa a:hover { color: #0b7a5c }
.bal-kurzus-morzsa-jelen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b }

.bal-kurzus-racs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 26px;
	align-items: start;
}

.bal-kurzus-fo { min-width: 0 }

/* ───────────────────────────────────────────────────────────────────────────
   3. A HERO — színátmenet VAGY valódi borítókép
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus .bal-kurzus-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 208px;
	padding: 30px clamp(20px, 3.4vw, 38px) 32px;
	overflow: hidden;
	border-radius: 28px;
	color: #fff;
	background-color: #0f766e;
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .45);
}

/* valódi kép: a fátyol az olvashatóságért (0,3,0 → veri a színátmenetet) */
.bal-kurzus .bal-kurzus-hero.is-kep { background-image: var(--bal-kurzus-kep) }

/* a színátmenetes hero két dísze — fotón NEM kell */
.bal-kurzus .bal-kurzus-hero:not(.is-kep)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(#ffffff 1px, #0000 1px);
	background-size: 15px 15px;
	opacity: .16;
}

.bal-kurzus .bal-kurzus-hero:not(.is-kep)::after {
	content: "";
	position: absolute;
	top: -70px;
	right: -50px;
	z-index: 0;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff33, #0000 70%);
}

.bal-kurzus-hero-fatyol { display: none }

.bal-kurzus .bal-kurzus-hero.is-kep .bal-kurzus-hero-fatyol {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(200deg, #08112040, #081120d0);
}

.bal-kurzus-hero-ikon {
	position: absolute;
	top: 26px;
	right: 26px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	color: #fff;
	background: #ffffff2b;
	box-shadow: inset 0 0 0 1px #ffffff4d;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.bal-kurzus-hero-belso { position: relative; z-index: 1 }

.bal-kurzus-jelvenyek { display: flex; flex-wrap: wrap; gap: 8px }

.bal-kurzus .bal-kurzus-jelveny {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	background: #0a11282e;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.bal-kurzus .bal-kurzus-jelveny--uveg {
	background: #ffffff2e;
	box-shadow: inset 0 0 0 1px #ffffff4d;
	letter-spacing: 0;
}

.bal-kurzus .bal-kurzus-jelveny--ingyenes { background: #34d399; color: #053b28 }

.bal-kurzus .bal-kurzus-hero h1 {
	max-width: 40ch;
	margin: 14px 0 0;
	font-size: clamp(1.62rem, 3.1vw, 2.32rem);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: -.02em;
	color: #fff;
}

.bal-kurzus .bal-kurzus-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.bal-kurzus .bal-kurzus-hero-meta > span { display: inline-flex; align-items: center; gap: 7px }
.bal-kurzus .bal-kurzus-hero-meta svg { flex: 0 0 auto; opacity: .9 }

/* ───────────────────────────────────────────────────────────────────────────
   4. A PANELEK — „Mit kapsz ettől a kurzustól?" és a Tematika
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus .bal-kurzus-panel {
	margin-top: 18px;
	padding: 24px clamp(18px, 2.6vw, 28px) 26px;
	border: 1px solid #e6ecf1;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .35);
}

.bal-kurzus .bal-kurzus-panel > h2,
.bal-kurzus .bal-kurzus-panel-fej h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #0f172a;
}

.bal-kurzus .bal-kurzus-panel-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.bal-kurzus .bal-kurzus-pirula {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	background: #f1f5f9;
}

.bal-kurzus .bal-kurzus-leiras {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.7;
	color: #475569;
}

.bal-kurzus .bal-kurzus-leiras > :first-child { margin-top: 0 }
.bal-kurzus .bal-kurzus-leiras > :last-child { margin-bottom: 0 }
.bal-kurzus .bal-kurzus-leiras p { margin: 0 0 1em; color: #475569 }
.bal-kurzus .bal-kurzus-leiras ul,
.bal-kurzus .bal-kurzus-leiras ol { margin: 0 0 1em; padding-left: 20px }
.bal-kurzus .bal-kurzus-leiras h2,
.bal-kurzus .bal-kurzus-leiras h3 { margin: 1.2em 0 .5em; font-size: 16px; font-weight: 800; color: #0f172a }

.bal-kurzus-chipek { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }

.bal-kurzus .bal-kurzus-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #047857;
	background: #ecfdf5;
	box-shadow: inset 0 0 0 1px #a7f3d0;
}

.bal-kurzus .bal-kurzus-chip--kell { color: #b45309; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a }
.bal-kurzus .bal-kurzus-chip--nincs { color: #334155; background: #f1f5f9; box-shadow: inset 0 0 0 1px #e2e8f0 }

/* ───────────────────────────────────────────────────────────────────────────
   5. A TEMATIKA — accordion, a jelölő a BORÍTÓ színével, FEHÉR betűvel
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus-tematika { display: flex; flex-direction: column; gap: 10px }

.bal-kurzus .bal-kurzus-tema {
	overflow: hidden;
	border: 1px solid #eef2f6;
	border-radius: 18px;
	background: #f8fafc;
}

.bal-kurzus .bal-kurzus-tema[open] { background: #fff; border-color: #e2e8f0 }

.bal-kurzus .bal-kurzus-tema > summary {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
}

.bal-kurzus .bal-kurzus-tema > summary::-webkit-details-marker { display: none }
.bal-kurzus .bal-kurzus-tema > summary:hover { background: #f1f5f9 }

/* a sorszám — a színátmenetet a `.bal-kurzus-grad--*` adja (fehér betű) */
.bal-kurzus .bal-kurzus-szam {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 13px;
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	background-color: #94a3b8;
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .6);
}

.bal-kurzus-tema-szoveg { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto }

.bal-kurzus .bal-kurzus-tema-cim {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.35;
	color: #0f172a;
}

.bal-kurzus .bal-kurzus-tema-meta { font-size: 12px; font-weight: 700; color: #64748b }

.bal-kurzus-nyil {
	position: relative;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid #94a3b8;
	border-bottom: 2px solid #94a3b8;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .18s ease;
}

.bal-kurzus .bal-kurzus-tema[open] .bal-kurzus-nyil { transform: rotate(225deg) translateY(-2px) }

.bal-kurzus .bal-kurzus-leckek {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 10px 16px 14px;
	border-top: 1px solid #eef2f6;
	list-style: none;
}

.bal-kurzus .bal-kurzus-leckek li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 11px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #475569;
}

.bal-kurzus .bal-kurzus-leckek li:hover { background: #f8fafc }

.bal-kurzus .bal-kurzus-lecke-ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	color: #94a3b8;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. A TUTOR FÜLEK (az `info` nélkül — lásd a modult)
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus .bal-kurzus-fulek { margin-top: 22px }

.bal-kurzus .bal-kurzus-fulek .tutor-is-sticky { position: static }

.bal-kurzus .tutor-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 6px;
	border: 1px solid #e6ecf1;
	border-radius: 16px;
	background: #f8fafc;
	list-style: none;
}

.bal-kurzus .tutor-nav .tutor-nav-item { margin: 0 }
.bal-kurzus .tutor-nav .tutor-nav-more { display: none }

.bal-kurzus .tutor-nav .tutor-nav-link {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: #475569;
	background: transparent;
	text-decoration: none;
}

.bal-kurzus .tutor-nav .tutor-nav-link:hover { color: #0f172a; background: #eef2f7 }

.bal-kurzus .tutor-nav .tutor-nav-link.is-active {
	color: #fff;
	background-image: var(--bal-grad);
	box-shadow: 0 8px 18px -10px rgba(10, 88, 255, .6);
}

.bal-kurzus .tutor-tab .tutor-tab-item { display: none }
.bal-kurzus .tutor-tab .tutor-tab-item.is-active { display: block }

/* A fül SAJÁT tartalom-doboza kap kártyát (nem a fül-burkoló), hogy ne
   legyen dupla keret. Az értékelés-fül wrapperét a Tutor adja. */
.bal-kurzus .tutor-tab-item .tutor-pagination-wrapper-replaceable {
	margin-top: 18px;
	padding: 22px clamp(18px, 2.6vw, 26px) 24px;
	border: 1px solid #e6ecf1;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .35);
}

.bal-kurzus .tutor-pagination-wrapper-replaceable > h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #0f172a;
}

/* ★ Az üres állapot KICSI — a Tutor `width="85%"`-os illusztrációja önmagában
   egy fél képernyőt vitt volna el (mérve 2026-10-07). */
.bal-kurzus .tutor-tab-item .tutor-empty-state { padding: 12px 0 6px }
.bal-kurzus .tutor-tab-item .tutor-empty-state img { width: 128px; max-width: 45%; height: auto; margin: 0 auto }
.bal-kurzus .tutor-tab-item .tutor-empty-state .tutor-fs-6 { font-size: 13.5px; font-weight: 600; color: #64748b }
.bal-kurzus .tutor-tab-item .tutor-row { margin: 14px 0 0 }

/* Biztonsági háló: ha egy Tutor-kiegészítő mégis „info" jellegű fület ad,
   annak a blokkjai is kártyát kapnak. */

.bal-kurzus .tutor-course-details-content,
.bal-kurzus .tutor-course-benefits,
.bal-kurzus .tutor-course-requirements,
.bal-kurzus .tutor-course-target-audience {
	margin-top: 18px;
	padding: 22px clamp(18px, 2.6vw, 26px);
	border: 1px solid #e6ecf1;
	border-radius: 22px;
	background: #fff;
}

.bal-kurzus .tutor-course-details-content h2,
.bal-kurzus .tutor-course-benefits h3,
.bal-kurzus .tutor-course-requirements h3,
.bal-kurzus .tutor-course-target-audience h3 {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
}

.bal-kurzus .tutor-course-benefits ul,
.bal-kurzus .tutor-course-requirements ul,
.bal-kurzus .tutor-course-target-audience ul { margin: 0; padding: 0; list-style: none }

.bal-kurzus .tutor-course-benefits li,
.bal-kurzus .tutor-course-requirements li,
.bal-kurzus .tutor-course-target-audience li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}

.bal-kurzus .tutor-course-benefits li::before,
.bal-kurzus .tutor-course-requirements li::before,
.bal-kurzus .tutor-course-target-audience li::before {
	content: "";
	position: absolute;
	top: .38em;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background-image: var(--bal-grad);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. AZ OLDALSÁV — fedél + ár + beiratkozó doboz + oktató
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus-oldal { min-width: 0 }

.bal-kurzus-ragados { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px }

.bal-kurzus .bal-kurzus-kartya {
	overflow: hidden;
	border: 1px solid #e6ecf1;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 22px 46px -26px rgba(15, 23, 42, .45);
}

.bal-kurzus .bal-kurzus-fedel {
	position: relative;
	display: grid;
	place-items: center;
	height: 132px;
	color: #fff;
	background-color: #0f766e;
	background-size: cover;
	background-position: center;
}

.bal-kurzus .bal-kurzus-fedel.is-kep { background-image: var(--bal-kurzus-kep) }

.bal-kurzus .bal-kurzus-fedel:not(.is-kep)::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(#ffffff 1px, #0000 1px);
	background-size: 14px 14px;
	opacity: .18;
}

/* ⚠ Csak képnél van szerepe — gradiensnél NEM szabad a rácsba kerülnie
   (egy extra grid-elem eltolná az ikont). */
.bal-kurzus-fedel-fatyol { display: none }

.bal-kurzus .bal-kurzus-fedel.is-kep .bal-kurzus-fedel-fatyol {
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, #08112033, #081120c4);
}

.bal-kurzus-fedel-ikon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	color: #fff;
	background: #ffffff2b;
	box-shadow: inset 0 0 0 1px #ffffff4d;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* A Tutor beiratkozó doboza — a SAJÁT sablonja, csak átszabva */
.bal-kurzus .tutor-sidebar-card {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.bal-kurzus .tutor-sidebar-card .tutor-card-body { padding: 20px 22px 4px }
.bal-kurzus .tutor-sidebar-card .tutor-card-footer { padding: 12px 22px 22px; border-top: 0 }

.bal-kurzus .tutor-course-single-pricing { margin: 0 }

.bal-kurzus .tutor-course-single-pricing .tutor-fs-4 {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #0f172a;
}

.bal-kurzus .tutor-course-single-btn-group { margin-top: 14px }

/* FORMA/MÉRET — az oldalsáv minden gombja ugyanakkora. SZÍNT itt NEM adunk:
   a színt a gomb saját szabálya hozza. */
.bal-kurzus .tutor-sidebar-card .tutor-btn,
.bal-kurzus .tutor-sidebar-card .tutor-enroll-course-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 20px;
	border-radius: 16px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

/* ★ SZÍN — CSAK az ingyenes beiratkozás.
   ⚠⚠ MÉRVE (2026-10-07): az első változatban itt egy ÁLTALÁNOS
     `.tutor-btn` szín-szabály állt, és a fizetős kurzuson **mindhárom** gomb
     („Hozzáadás a kosárhoz", „Vásárolj most", „Ajándékozd ezt a kurzust")
     ugyanolyan gradiensre váltott — 314×52, megkülönböztethetetlenül. A
     fizetős út szándékos hierarchiája („Kosárba" KERETES, „Vásárolj most"
     TÖMÖTT) a `balance-kosar.css`-ben él, ezért azt itt NEM írjuk felül. */
.bal-kurzus .tutor-sidebar-card .tutor-enroll-course-button {
	color: #fff;
	background-color: #0a58ff;
	background-image: var(--bal-grad);
	box-shadow: 0 14px 28px -14px rgba(10, 88, 255, .7);
}

.bal-kurzus .tutor-sidebar-card .tutor-enroll-course-button:hover { filter: brightness(1.06) }

/* ★ A FIZETŐS ÚT két gombja — a szándékos hierarchia:
     „Hozzáadás a kosárhoz" KERETES (másodlagos), „Vásárolj most" TÖMÖTT.
   ⚠⚠ MÉRVE (2026-10-07): a Tutor 4.1.1 a kosár-gombot **`data-cy` jelölővel**
     adja (`data-cy="tutor-native-add-to-cart"`), és **`.tutor-native-add-to-cart`
     OSZTÁLY NINCS rajta** — ezért a `balance-kosar.css` keretes szabálya erre a
     gombra nem illeszkedik (a `data-cy` a mérőeszköznek szól). Itt pótoljuk,
     attribútum-szelektorral ((0,4,0) — a Tutor `.tutor-btn-primary`-ját veri).
   ⚠ A „Vásárolj most" a `.bal-vegy-meg-azonnal` osztályt viseli. */
.bal-kurzus .tutor-sidebar-card .tutor-btn[data-cy="tutor-native-add-to-cart"],
.bal-kurzus .tutor-sidebar-card .tutor-btn.tutor-btn-gift {
	border: 1px solid #dbe3ec;
	color: #314056;
	background-color: #fff;
	background-image: none;
	box-shadow: none;
}

.bal-kurzus .tutor-sidebar-card .tutor-btn[data-cy="tutor-native-add-to-cart"]:hover,
.bal-kurzus .tutor-sidebar-card .tutor-btn.tutor-btn-gift:hover { background-color: #f8fafc }

.bal-kurzus .tutor-sidebar-card .bal-vegy-meg-azonnal {
	border-color: transparent;
	color: #fff;
	background-color: #0a58ff;
	background-image: var(--bal-grad);
	box-shadow: 0 14px 28px -14px rgba(10, 88, 255, .7);
}

/* Az ár-sor — a Tutor két alakja (`sidebar-card-pricing` fizetősnél,
   `single-pricing` ingyenesnél). Az akciós ár zöld, az eredeti áthúzva. */
.bal-kurzus .tutor-course-single-pricing .tutor-fs-4,
.bal-kurzus .tutor-course-sidebar-card-pricing .tutor-fs-4 {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #0f172a;
}

.bal-kurzus .tutor-course-sidebar-card-pricing del {
	margin-left: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #94a3b8;
}

.bal-kurzus .tutor-course-sidebar-card-pricing:has(del) .tutor-fs-4 { color: #047857 }

.bal-kurzus .tutor-sidebar-card .tutor-btn-outline-primary {
	color: #0f172a;
	background-image: none;
	background-color: #f1f5f9;
	box-shadow: inset 0 0 0 1px #e2e8f0;
}

.bal-kurzus .tutor-sidebar-card .tutor-fs-7.tutor-color-muted { margin-top: 12px; font-size: 12.5px; text-align: center }

.bal-kurzus .tutor-sidebar-card .tutor-ul { margin: 0; padding: 0; list-style: none }

.bal-kurzus .tutor-sidebar-card .tutor-ul li,
.bal-kurzus .tutor-sidebar-card .tutor-card-footer li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 11px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
}

.bal-kurzus .tutor-sidebar-card .tutor-card-footer li:first-child { margin-top: 0 }
.bal-kurzus .tutor-sidebar-card .tutor-card-footer li [class^="tutor-icon"],
.bal-kurzus .tutor-sidebar-card .tutor-card-footer li [class*=" tutor-icon"] { color: #0b7a5c; margin: 0 }

/* Az oktató — a Tutor saját blokkja („Egy kurzus, amelyet készített") */
.bal-kurzus .bal-kurzus-oktato {
	padding: 20px 22px;
	border: 1px solid #e6ecf1;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 34px -26px rgba(15, 23, 42, .35);
}

.bal-kurzus .bal-kurzus-oktato h3 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
}

.bal-kurzus .bal-kurzus-oktato .tutor-instructor,
.bal-kurzus .bal-kurzus-oktato .tutor-instructor-card { display: flex; align-items: center; gap: 12px }

.bal-kurzus .bal-kurzus-oktato img {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	object-fit: cover;
}

.bal-kurzus .bal-kurzus-oktato a { font-size: 14.5px; font-weight: 800; color: #0f172a }
.bal-kurzus .bal-kurzus-oktato .tutor-instructor-designation,
.bal-kurzus .bal-kurzus-oktato .tutor-instructor-rating { font-size: 12.5px; font-weight: 600; color: #64748b }

/* ───────────────────────────────────────────────────────────────────────────
   8. KAPCSOLÓDÓ KÉPZÉSEK
   ─────────────────────────────────────────────────────────────────────────── */
.bal-kurzus .bal-kurzus-kapcsolod { margin-top: 34px }

.bal-kurzus .bal-kurzus-kapcsolod-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.bal-kurzus .bal-kurzus-kapcsolod-fej h2 { margin: 0; font-size: 19px; font-weight: 800; color: #0f172a }

.bal-kurzus .bal-kurzus-kapcsolod-fej a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: #1d4ed8;
}

.bal-kurzus-kapcsolod-racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.bal-kurzus .bal-kurzus-kapcsolod-kartya {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid #e6ecf1;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .4);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.bal-kurzus .bal-kurzus-kapcsolod-kartya:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 38px -24px rgba(15, 23, 42, .5);
}

.bal-kurzus .bal-kurzus-kapcsolod-ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: #fff;
	background-color: #94a3b8;
}

.bal-kurzus-kapcsolod-szoveg { display: flex; flex-direction: column; gap: 2px; min-width: 0 }

.bal-kurzus .bal-kurzus-kapcsolod-cim {
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.3;
	color: #0f172a;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bal-kurzus .bal-kurzus-kapcsolod-meta { font-size: 12.5px; font-weight: 600; color: #64748b }
.bal-kurzus .bal-kurzus-kapcsolod-ar { margin-top: 2px; font-size: 13.5px; font-weight: 800; color: #0f172a }
.bal-kurzus .bal-kurzus-kapcsolod-ar.is-ingyenes { color: #047857 }

/* ───────────────────────────────────────────────────────────────────────────
   9. MOBIL / TABLET
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bal-kurzus-racs { grid-template-columns: minmax(0, 1fr); gap: 18px }
	.bal-kurzus-ragados { position: static }
}

@media (max-width: 640px) {
	.bal-kurzus .bal-kurzus-hero { padding: 24px 18px 26px; border-radius: 22px; min-height: 180px }
	.bal-kurzus-hero-ikon { top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 15px }
	.bal-kurzus .bal-kurzus-hero-meta { gap: 6px 14px; font-size: 13px }
	.bal-kurzus .bal-kurzus-tema > summary { padding: 12px 12px; gap: 10px }
	.bal-kurzus .bal-kurzus-szam { width: 34px; height: 34px; border-radius: 12px }
	.bal-kurzus .bal-kurzus-panel { padding: 20px 16px 22px; border-radius: 20px }
}