/*
 *  Balance — a WOO KOSÁR és PÉNZTÁR megjelenése (wc-mód)
 *
 *  MIÉRT: a Woo-migráció után a kosár és a pénztár a Woo **saját, díszítetlen**
 *  mark-upját kapta — a korábbi (Tutor-korszakú) dizájn csak a régi oldalakra
 *  töltődött. A felhasználó kérése: „legyen szép, egyszerű és hasznos, egységes
 *  a honlappal".
 *
 *  ⚠⚠ ALAPELV: a Woo MARKUPJÁT **nem** írjuk át — ez CSAK stíluslap. A fizetési
 *     űrlap működése (mezőnevek, `#payment`, `#place_order`, a Stripe-konténerek,
 *     a kupon-űrlap, a POST-cél) érintetlen. Ezért nem lehet vele fizetést elrontani.
 *
 *  HATÓKÖR: `body.woocommerce-cart` / `body.woocommerce-checkout` — a Woo saját
 *     body-osztályai, más oldalra nem szivárog ki semmi.
 *
 *  A11Y / UX, amit SZÁNDÉKOSAN alkalmaz:
 *    · `:focus-visible` gyűrű MINDEN interaktív elemen (billentyűzetes használat),
 *    · célfelületek ≥ 44 px (ujjal is kényelmes),
 *    · a hiba NEM csak színnel jelölt (felkiáltó-jel + szöveg + `aria`-barát mark-up),
 *    · `prefers-reduced-motion` esetén minden animáció kikapcsol,
 *    · kontraszt: a szövegek #0f172a / #5b6b7f a fehér kártyán (≥ 4.5:1),
 *    · ⚠ NINCS „ragadós" (sticky) összegző panel: a pénztárnál a CTA-nak mindig
 *      elérhetőnek kell lennie — egy viewportnál magasabb ragadós elem
 *      használhatatlanná teheti a „Megrendelés" gombot.
 *
 *  @package balance
 */

/* =====================================================================
 *  1. TOKENEK — a shell `:root` értékeire épül (--bal-grad, --blue, --green)
 * ===================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
	--woo-radius: 16px;
	--woo-radius-sm: 12px;
	--woo-line: #e6ecf3;
	--woo-line-strong: #d6e0ea;
	--woo-ink: #0f172a;
	--woo-muted: #5b6b7f;
	--woo-card: #fff;
	--woo-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -20px rgba(15, 23, 42, .22);
	--woo-fej: #0a1626;
}

/* A Woo `woocommerce-no-js` osztályt rak a body-ra, ha a JS késik — a
   gombok ettől nem tűnhetnek el. */
body.woocommerce-cart .bal-content,
body.woocommerce-checkout .bal-content {
	max-width: 1180px;
	margin-inline: auto;
}

/* =====================================================================
 *  2. CÍMEK — a lapnak eddig NEM volt `h1`-je (mért: 0 db). Az `h1`-et a
 *     PHP adja (`balance-woo-penztar.php`), itt csak a megjelenés.
 * ===================================================================== */

.bal-content .bal-woo-cim {
	margin: 0 0 6px;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--woo-fej);
}

.bal-content .bal-woo-alcim {
	margin: 0 0 26px;
	color: var(--woo-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* A szekció-címek („Számlázási adatok", „A rendelés tartalma") elé egy rövid
   gradiens vonal — ez a márka jelzése, és vizuálisan tagolja az űrlapot. */
.bal-content form.checkout h3,
.bal-content .cart_totals h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--woo-fej);
}

.bal-content form.checkout h3::before,
.bal-content .cart_totals h2::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 3px;
	border-radius: 999px;
	background: var(--bal-grad);
}

/* =====================================================================
 *  3. KÁRTYÁK — a kosár és a pénztár blokkjai
 * ===================================================================== */

.bal-content .woocommerce-cart-form,
.bal-content .cart_totals,
.bal-content #customer_details,
.bal-content #order_review {
	background: var(--woo-card);
	border: 1px solid var(--woo-line);
	border-radius: var(--woo-radius);
	box-shadow: var(--woo-shadow);
	padding: 22px 22px 24px;
}

.bal-content #order_review {
	padding-bottom: 20px;
}

/* =====================================================================
 *  4. ÜRES KOSÁR — a „régi" grafika visszahozása, a márka ikon-nyelvén
 *     (ugyanaz a kosár-ikon, mint a fejlécben: egységes jelzés).
 * ===================================================================== */

.bal-content .cart-empty.woocommerce-info {
	position: relative;
	display: block;
	margin: 0;
	padding: 46px 24px 30px;
	text-align: center;
	background: var(--woo-card);
	border: 1px solid var(--woo-line);
	border-radius: var(--woo-radius);
	box-shadow: var(--woo-shadow);
	color: var(--woo-fej);
	font-size: 18px;
	font-weight: 600;
}

/* ⚠⚠ MÉRVE (2026-10-08): a Woo `.woocommerce-info::before`-je ABSZOLÚT
   pozícióban ül és a szövegre csúszik. Ezért az ikont NEM CSS-ből, hanem
   szerveroldalon rajzoljuk ki (igazi, folyamban lévő SVG) — a Woo ikonját
   pedig kikapcsoljuk. Így nincs cascada-csata, és minden böngészőben egyforma. */
.bal-content .cart-empty.woocommerce-info::before {
	content: none !important;
}

.bal-content .bal-woo-ures-ikon {
	margin: 0 auto 4px;
	line-height: 0;
	text-align: center;
}

.bal-content .bal-woo-ures-ikon svg {
	width: 104px;
	height: 104px;
}

/* A régi maszkos ikon-változó már nem kell — a helyére valódi SVG került. */

.bal-content .cart-empty.woocommerce-info::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin: 18px auto 0;
	border-radius: 999px;
	background: var(--bal-grad);
	opacity: .55;
}

.bal-content .woocommerce-cart .return-to-shop,
.bal-content .return-to-shop.woocommerce-info {
	margin-top: 22px;
	text-align: center;
}

/* =====================================================================
 *  5. KOSÁR TÁBLÁZAT
 * ===================================================================== */

.bal-content table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
}

.bal-content table.shop_table thead th {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--woo-line);
	color: var(--woo-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}

.bal-content table.shop_table tbody td {
	padding: 18px 0;
	border-bottom: 1px solid var(--woo-line);
	vertical-align: middle;
}

.bal-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.bal-content .product-name a {
	color: var(--woo-ink);
	font-weight: 600;
	text-decoration: none;
}

.bal-content .product-name a:hover {
	text-decoration: underline;
}

/* A törlés gomb: kis, de 44 px-es célfelület (ujjal is eltalálható). */
.bal-content .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 999px;
	color: #b42318 !important;
	background: #fef3f2;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}

.bal-content .product-remove a.remove:hover {
	background: #fee4e2;
	transform: scale(1.06);
}

/* Kupon-sáv */
.bal-content .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* =====================================================================
 *  6. MEZŐK — egységes, kényelmes űrlap
 * ===================================================================== */

.bal-content form.checkout .form-row,
.bal-content .woocommerce-Input,
.bal-content input.input-text,
.bal-content textarea,
.bal-content select {
	font-size: 15px;
}

.bal-content .woocommerce-Input,
.bal-content input.input-text,
.bal-content select,
.bal-content textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	color: var(--woo-ink);
	background: #fff;
	border: 1px solid var(--woo-line-strong);
	border-radius: var(--woo-radius-sm);
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .02);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bal-content textarea {
	min-height: 96px;
}

.bal-content .woocommerce-Input:focus,
.bal-content input.input-text:focus,
.bal-content select:focus,
.bal-content textarea:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}

.bal-content .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--woo-ink);
}

/* A kötelező csillag a márka színében, de a mező ne legyen rikító. */
.bal-content .required {
	color: #b42318;
	text-decoration: none;
}

/* Csak a BILLENTYŰZETTES fókusz kap gyűrűt (egérrel nem villog). */
.bal-content a:focus-visible,
.bal-content button:focus-visible,
.bal-content .button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .55);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Hiba: szín + jelzés (nem csak szín) */
.bal-content .woocommerce-invalid input.input-text,
.bal-content .woocommerce-invalid select {
	border-color: #b42318;
	background: #fffbfa;
}

.bal-content .woocommerce-invalid label::after {
	content: " — kötelező";
	color: #b42318;
	font-weight: 600;
}

/* =====================================================================
 *  7. PÉNZTÁR ELRENDEZÉS — 2 hasáb asztali nézetben (űrlap | összegzés)
 * ===================================================================== */

@media (min-width: 992px) {
	.bal-content form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 26px;
		align-items: start;
	}

	.bal-content form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.bal-content form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 14px;
	}

	.bal-content form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
	}

	/* A Woo saját úszó elrendezését itt kikapcsoljuk (gridet használunk). */
	.bal-content form.checkout #customer_details,
	.bal-content form.checkout #order_review {
		float: none;
		width: auto;
	}
}

/* Az összegző táblázat a kártyán belül ne kapjon külön keretet. */
.bal-content #order_review table.shop_table {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.bal-content #order_review table.shop_table tfoot th,
.bal-content #order_review table.shop_table tfoot td {
	padding: 12px 0;
	border-top: 1px solid var(--woo-line);
}

.bal-content #order_review .order-total .amount {
	font-size: 20px;
	font-weight: 800;
	color: var(--woo-fej);
}

/* =====================================================================
 *  8. FIZETÉSI MÓDOK + CTA
 * ===================================================================== */

.bal-content #payment {
	background: transparent;
	border-radius: 0;
}

.bal-content #payment::before {
	content: "";
	display: block;
	height: 1px;
	margin: 16px 0 18px;
	background: linear-gradient(90deg, var(--woo-line), rgba(230, 236, 243, 0));
}

.bal-content ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bal-content ul.wc_payment_methods li {
	padding: 12px 14px;
	border: 1px solid var(--woo-line);
	border-radius: var(--woo-radius-sm);
	background: #fcfdff;
}

/* A kiválasztott fizetési mód jelzése: keret + halvány márka-háttér. */
.bal-content ul.wc_payment_methods li:has(input:checked) {
	border-color: rgba(37, 99, 235, .45);
	background: linear-gradient(180deg, rgba(37, 99, 235, .05), rgba(16, 185, 129, .04));
}

.bal-content ul.wc_payment_methods label {
	font-weight: 600;
	color: var(--woo-ink);
	cursor: pointer;
}

/* A Stripe (UPE) és az Express Checkout konténerek: levegő, hogy a beágyazott
   mezők ne lógjanak ki a kártyából. A működésükhöz nem nyúlunk. */
.bal-content #wc-stripe-upe-element,
.bal-content .wc-stripe-express-checkout-element,
.bal-content #wc-stripe-express-checkout-element {
	margin-top: 12px;
}

/* A kártya-űrlap kerete (a Stripe iframe-je a saját stílusát hozza). */
.bal-content .wc-stripe-elements-field,
.bal-content .wc-stripe-upe-element iframe {
	border-radius: var(--woo-radius-sm);
}

.bal-content #place_order,
.bal-content .checkout-button,
.bal-content button.button.alt,
.bal-content a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 14px 22px;
	color: #fff;
	background: var(--bal-grad);
	border: 0;
	border-radius: var(--woo-radius-sm);
	box-shadow: var(--bal-shadow-btn, 0 11px 22px rgba(10, 88, 255, .22));
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.bal-content #place_order:hover,
.bal-content .checkout-button:hover,
.bal-content button.button.alt:hover {
	transform: translateY(-1px);
	box-shadow: var(--bal-shadow-hover, 0 14px 32px -10px rgba(10, 88, 255, .5));
	filter: saturate(1.06);
}

.bal-content #place_order:active {
	transform: translateY(0);
}

/* Feltöltés közben: ne lehessen kétszer fizetni, és LÁTSZÓDJON, hogy történik valami. */
.bal-content #place_order.bal-tolt,
.bal-content .checkout-button.bal-tolt {
	opacity: .72;
	cursor: progress;
	filter: saturate(.8);
}

.bal-content #place_order.bal-tolt::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-top-color: #fff;
	animation: bal-woo-porges .7s linear infinite;
}

@keyframes bal-woo-porges {
	to { transform: rotate(360deg); }
}

/* A másodlagos gombok (kupon, kosár frissítése) visszafogottak. */
.bal-content .coupon button,
.bal-content button[name="update_cart"],
.bal-content .woocommerce-Button--secondary {
	min-height: 44px;
	padding: 10px 16px;
	color: var(--woo-ink);
	background: #f1f5f9;
	border: 1px solid var(--woo-line-strong);
	border-radius: var(--woo-radius-sm);
	font-weight: 600;
	cursor: pointer;
}

.bal-content .coupon button:hover,
.bal-content button[name="update_cart"]:hover {
	background: #e8eef5;
}

/* Biztonsági sor a fizetés gombja alatt (a PHP adja, hogy fordítható legyen) */
.bal-content .bal-woo-biztonsag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--woo-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.bal-content .bal-woo-biztonsag svg {
	flex: 0 0 auto;
	color: var(--green);
}

/* =====================================================================
 *  9. ÜZENETEK (Woo notice-ok) — jól látható, de nem rikító
 * ===================================================================== */

.bal-content .woocommerce-notices-wrapper {
	margin-bottom: 20px;
}

.bal-content .woocommerce-message,
.bal-content .woocommerce-info,
.bal-content .woocommerce-error {
	margin: 0 0 12px;
	padding: 14px 16px 14px 18px;
	background: #f8fafc;
	border: 1px solid var(--woo-line);
	border-left: 4px solid var(--blue);
	border-radius: var(--woo-radius-sm);
	color: var(--woo-ink);
	font-size: 14.5px;
	list-style: none;
}

.bal-content .woocommerce-message {
	border-left-color: var(--green);
}

.bal-content .woocommerce-error {
	border-left-color: #b42318;
	background: #fffbfa;
}

/* =====================================================================
 *  10. MOBIL — egy hasáb, kényelmes célfelületek
 * ===================================================================== */

@media (max-width: 991px) {
	.bal-content .woocommerce-cart-form,
	.bal-content .cart_totals,
	.bal-content #customer_details,
	.bal-content #order_review {
		padding: 18px 16px;
	}

	.bal-content table.shop_table_responsive thead {
		display: none;
	}

	.bal-content #place_order {
		min-height: 52px;
	}
}

/* =====================================================================
 *  11. MOZGÁS-KORLÁTOZÁS — aki kéri, ne lásson animációt
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bal-content #place_order,
	.bal-content .checkout-button,
	.bal-content button.button.alt,
	.bal-content .product-remove a.remove {
		transition: none;
	}

	.bal-content #place_order:hover {
		transform: none;
	}

	.bal-content #place_order.bal-tolt::before {
		animation: none;
	}
}

/* =====================================================================
 *  12. AZ „ÜRES KOSÁR" SZÖVEGE ÉS A WALLET-ELVÁLASZTÓ
 * ===================================================================== */

.bal-content .bal-woo-ures-szoveg {
	max-width: 460px;
	margin: 10px auto 0;
	color: var(--woo-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

/* A „vagy fizess kártyával" sor — csak akkor kerül ki (JS), ha a wallet TÉNYLEG
   megjelent; addig semmi nem látszik belőle (nincs hamis ígéret). */
.bal-content .bal-woo-vagy {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 14px;
	color: var(--woo-muted);
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bal-content .bal-woo-vagy::before,
.bal-content .bal-woo-vagy::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--woo-line);
}

/* =====================================================================
 *  13. FINOMÍTÁS — a KÉPERNYŐKÉPEN mért hibák javítása (2026-10-08)
 * ===================================================================== */

/* (a) A téma saját táblázat-stílusa belső keretet és csíkozást tesz a
       sorokra — a saját kártyáinkban ez „doboz a dobozban" hatást ad.
       Itt kikapcsoljuk (a `!important` azért kell, mert a téma
       `tr:nth-child()` szabálya erősebb). */
.bal-content .woocommerce-cart-form table.shop_table,
.bal-content #order_review table.shop_table {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.bal-content .woocommerce-cart-form table.shop_table th,
.bal-content .woocommerce-cart-form table.shop_table td,
.bal-content #order_review table.shop_table th,
.bal-content #order_review table.shop_table td {
	background-color: transparent !important;
	background-image: none !important;
	border-radius: 0;
}

/* (b) KOSÁR: két hasáb asztali nézetben (táblázat | összegzés) — eddig a
       Woo úszó elrendezése miatt az összegző „beljebb csúszott". */
@media (min-width: 992px) {
	body.woocommerce-cart .bal-content .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 26px;
		align-items: start;
	}

	body.woocommerce-cart .bal-content .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	body.woocommerce-cart .bal-content .woocommerce > .woocommerce-cart-form {
		grid-column: 1;
		margin: 0;
	}

	body.woocommerce-cart .bal-content .cart-collaterals {
		grid-column: 2;
		width: auto;
		float: none;
	}

	body.woocommerce-cart .bal-content .cart-collaterals .cart_totals {
		width: auto;
		float: none;
	}
}

/* (c) A KUPON-SOR: a mező eddig kilógott a kártyából. A `label` MARAD
       (képernyőolvasó miatt), csak a szélességek rendeződnek. */
.bal-content .woocommerce-cart-form .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bal-content .woocommerce-cart-form .coupon {
	display: flex;
	flex: 1 1 320px;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.bal-content .woocommerce-cart-form .coupon .input-text {
	flex: 1 1 160px;
	max-width: 240px;
}

.bal-content .woocommerce-cart-form button[name="update_cart"] {
	margin-left: auto;
}

/* (d) A BIZTONSÁGI SOR eddig a „Megrendelés" gomb alá csúszott (a Woo
       úszó elemei miatt). A `clear` + blokk-elrendezés rendezi. */
.bal-content #payment .form-row.place-order {
	display: block;
	float: none;
}

.bal-content .bal-woo-biztonsag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	clear: both;
	margin: 16px 0 0;
	color: var(--woo-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.bal-content .bal-woo-biztonsag svg {
	flex: 0 0 auto;
	color: var(--green);
}

/* (e) A PÉNZTÁRON a „További információk" (megjegyzés) kerüljön a számlázási
       mezők ALÁ, teljes szélességben — így a folyamat egy irányban halad:
       adatok → megjegyzés → összegzés → fizetés. */
@media (min-width: 992px) {
	.bal-content form.checkout #customer_details .col-1,
	.bal-content form.checkout #customer_details .col-2 {
		float: none;
		width: 100%;
		margin-bottom: 22px;
	}
}

/* (f) A hosszú placeholder („Emelet, lépcsőház, lakás, stb.") ne lógjon ki. */
.bal-content input.input-text::placeholder,
.bal-content textarea::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* (g) A kosár-oldal RÁCSÁBAN az `h1` és az alcím is teljes szélességű —
       különben egymás MELLÉ kerülnek (a rács közvetlen elemei lettek volna). */
body.woocommerce-cart .bal-content .woocommerce > .bal-woo-cim,
body.woocommerce-cart .bal-content .woocommerce > .bal-woo-alcim {
	grid-column: 1 / -1;
}

.bal-content .bal-woo-cim + .bal-woo-alcim {
	margin-bottom: 22px;
}

/* (h) A kupon-sor EGY sorban maradjon: mező + gomb, jobbra a frissítés. */
.bal-content .woocommerce-cart-form .coupon {
	flex: 0 1 auto;
}

.bal-content .woocommerce-cart-form .coupon .input-text {
	flex: 0 0 200px;
	width: 200px;
}

/* =====================================================================
 *  14. LÉPÉSJELZŐ, BIZTONSÁGI SÁV, TIPOGRÁFIAI FINOMSÁGOK
 *      (Baymard „Checkout Usability" mintái — a Balance arculatára szabva)
 * ===================================================================== */

/* --- lépésjelző: Kosár → Adatok és fizetés → Hozzáférés --------------- */
.bal-content .bal-woo-lepesek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.bal-content .bal-woo-lepes {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--woo-muted);
	font-size: 13.5px;
	font-weight: 600;
}

.bal-content .bal-woo-lepes-jel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--woo-line-strong);
	background: #fff;
	color: var(--woo-muted);
	font-size: 12.5px;
	font-weight: 700;
}

.bal-content .bal-woo-lepes--kesz {
	color: var(--woo-ink);
}

.bal-content .bal-woo-lepes--kesz .bal-woo-lepes-jel {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}

.bal-content .bal-woo-lepes--aktiv {
	color: var(--woo-fej);
}

.bal-content .bal-woo-lepes--aktiv .bal-woo-lepes-jel {
	background: var(--bal-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(10, 88, 255, .55);
}

/* --- biztonsági sáv: három rövid, ELLENŐRZÖTT állítás --------------- */
.bal-content ul.bal-woo-biztonsag {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.bal-content ul.bal-woo-biztonsag li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--woo-muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.bal-content ul.bal-woo-biztonsag svg {
	flex: 0 0 auto;
	color: var(--green);
}

/* --- tipográfiai finomságok ----------------------------------------- */

/* Az összegek TABULÁRIS számjegyekkel: a tételek és a végösszeg egy vonalban. */
.bal-content .woocommerce-Price-amount,
.bal-content .amount,
.bal-content .shop_table td {
	font-variant-numeric: tabular-nums;
}

/* A pénztár minimumra szabott mezői: az ORSZÁG rejtve marad (az értéke a bolt
   alapértelmezett országa: HU), a cím/telefon/mezők pedig már a PHP-ben
   kikerülnek — lásd `balance_woo_penztar_mezok_minimum()` (§ a modulban). */
.bal-content form.checkout .form-row.bal-woo-rejtett {
	display: none;
}

/* A fókuszban lévő mezősor címkéje a márka kékjére vált — szemmel is
   követhető, hol jár a kitöltés (nem csak a vékony keret jelzi). */
.bal-content form.checkout .form-row:focus-within > label {
	color: var(--blue);
}

/* A kártya-szekció címkéje (a JS teszi a Stripe-mező fölé). */
.bal-content .bal-woo-kartya-cim {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 10px;
	color: var(--woo-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* ⚠ A Stripe-keret háttere felülről átfedheti a címkét (mért, 2026-10-08) —
	   ezért a címke saját fehér hátteret és réteget kap. */
	position: relative;
	z-index: 2;
	background: var(--woo-card);
	padding-top: 2px;
}

.bal-content .bal-woo-kartya-cim::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--woo-line);
}

/* A KUPON-sáv a pénztáron legyen VISSZAFOGOTT (Baymard: a kupon-mezőt ne
   hangsúlyozzuk — aki keres kódot, megtalálja; aki nem, ne álljon meg rajta). */
.bal-content .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 8px 0 8px 14px;
	background: transparent;
	border: 0;
	border-left: 3px solid var(--blue);
	border-radius: 0;
	color: var(--woo-muted);
	font-size: 14px;
}

.bal-content .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--blue);
	font-weight: 600;
}

/* ⚠ MÉRVE (2026-10-08): ÜRES kosárnál a Woo más sablont tölt, és a két-hasábos
   rács szétdobta a tartalmat (a cím és a gomb egymás MELLÉ került). Ilyenkor
   egy folyamba rendezzük. */
body.woocommerce-cart .bal-content .woocommerce:has(.cart-empty) {
	display: block;
}

/* Az üres kosár egyetlen cselekvése: „Kurzusok böngészése" — ez legyen a
   MÁRKA gombja, ne a téma szürke pirulája. */
body.woocommerce-cart .bal-content .return-to-shop .button,
body.woocommerce-cart .bal-content a.wc-backward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 26px;
	color: #fff;
	background: var(--bal-grad);
	border: 0;
	border-radius: var(--woo-radius-sm);
	box-shadow: var(--bal-shadow-btn, 0 11px 22px rgba(10, 88, 255, .22));
	font-weight: 700;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

body.woocommerce-cart .bal-content .return-to-shop .button:hover,
body.woocommerce-cart .bal-content a.wc-backward:hover {
	transform: translateY(-1px);
	box-shadow: var(--bal-shadow-hover, 0 14px 32px -10px rgba(10, 88, 255, .5));
}

/* Az üres kosár szövege az ikon alatt, egy folyamban. */
.bal-content .bal-woo-ures-szoveg {
	margin: 18px 0 0;
	text-align: center;
}

/* =====================================================================
 *  16. CSISZOLÁS — összegző, fizetési kártya, mezőrács (2026-10-08)
 * ===================================================================== */

/* (a) AZ ÖSSZEGZŐ: a kurzus-sor és a végösszeg kapja meg a súlyát -------- */

.bal-content #order_review tbody td {
	padding: 15px 0;
	border-bottom: 1px solid var(--woo-line);
}

.bal-content #order_review tbody td.product-name {
	color: var(--woo-fej);
	font-weight: 600;
}

.bal-content #order_review tbody td.product-name .product-quantity {
	color: var(--woo-muted);
	font-weight: 500;
}

.bal-content #order_review tbody td.product-total,
.bal-content #order_review tfoot td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bal-content #order_review tfoot th {
	color: var(--woo-muted);
	font-weight: 600;
}

/* A VÉGÖSSZEG: erősebb vonal + halvány márka-átmenet + nagyobb szám. */
.bal-content #order_review tr.order-total th,
.bal-content #order_review tr.order-total td {
	padding-top: 16px;
	border-top: 2px solid var(--woo-line-strong);
	background: linear-gradient(180deg, rgba(37, 99, 235, .05), rgba(16, 185, 129, .035));
}

.bal-content #order_review tr.order-total .amount {
	color: var(--woo-fej);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* (b) A FIZETÉSI KÁRTYA: a wallet és a kártya vizuálisan elválik ------------ */

.bal-content #payment .bal-woo-kartya-cim {
	margin-top: 22px;
}

/* A Stripe kártya-kerete legyen „input-csoport” hatású, és ne ugorjon:
   legalább 64 px magas, hogy a mount pillanatában se billenjen a kártya. */
.bal-content #wc-stripe-upe-element,
.bal-content .wc-stripe-upe-element {
	min-height: 64px;
	padding: 14px 14px 10px;
	background: #fff;
	border: 1px solid var(--woo-line-strong);
	border-radius: var(--woo-radius-sm);
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .02);
}

/* (c) A „MEGRENDELÉS” GOMB: a kártyaadatok alatt, prémium kivitelben -------- */

.bal-content #place_order {
	margin-top: 6px;
	letter-spacing: .02em;
}

/* (d) A MEZŐRÁCS: az e-mail, a telefon és a közterület külön sorban -------- */

.bal-content form.checkout #billing_email_field,
.bal-content form.checkout #billing_phone_field,
.bal-content form.checkout #billing_address_1_field,
.bal-content form.checkout #billing_adoszam_field,
.bal-content form.checkout #order_comments_field {
	width: 100%;
	clear: both;
	float: none;
}

/* A magyar cím-sorrend: irányzószám | város EGY sorban (a pár a Woo saját
   `form-row-first/last` osztályait kapja a PHP-ben). */
.bal-content form.checkout #billing_postcode_field,
.bal-content form.checkout #billing_city_field {
	margin-bottom: 1em;
}

/* (e) FINOMÍTÁS: a mezők címkéje kicsit szellősebb, a csillag diszkrét ---- */

.bal-content form.checkout .form-row label {
	margin-bottom: 7px;
	letter-spacing: .005em;
}

.bal-content form.checkout .form-row {
	margin-bottom: 16px;
}

/* (f) A „megjegyzés” mező ne nyomja el a gombot ------------------------- */

.bal-content form.checkout #order_comments_field textarea {
	min-height: 84px;
}

/* =====================================================================
 *  17. A WOO SAJÁT IKONJAI ÉS A FIZETÉSI DOBOZ TISZTÍTÁSA (2026-10-08)
 * =====================================================================
 *
 *  MÉRVE a böngészőben: a Woo `.woocommerce-info::before` beszédbuborék-ikonja
 *  (abszolút pozícióban, `top:1em; left:1.5em`) **a kupon-sor szövegére**
 *  csúszik, és ugyanez az ikon adja a fizetési doboz szürke „nyíl" alakját.
 *  A saját dizájnunkban nincs rájuk szükség (a jelzést a színes bal szegély és
 *  a saját ikonjaink adják) — ezért a hatókörünkben kikapcsoljuk őket.
 */

.bal-content .woocommerce-info::before,
.bal-content .woocommerce-message::before,
.bal-content .woocommerce-error::before {
	content: none !important;
}

/* A KIVÁLASZTOTT fizetési mód ne kapjon színes keretet és hátteret: a fizetési
   doboz legyen tiszta fehér, hogy a Stripe-mezők és a gomb tisztán üljenek
   benne (a kiválasztottságot a rádiógomb és a saját „Bankkártyás fizetés"
   gombunk jelzi). */
.bal-content ul.wc_payment_methods li {
	background: #fff;
}

.bal-content ul.wc_payment_methods li:has(input:checked) {
	border-color: var(--woo-line);
	background: #fff;
}

/* Védekező szabály: a Woo bejelentkezés-emlékeztetője (a bolt beállításában KI
   van kapcsolva, a mark-up viszont egyes állapotokban megjelenhet) ne
   zavarhassa a kupon-sort. */
.bal-content .woocommerce-form-login-toggle,
.bal-content form.woocommerce-form-login {
	display: none !important;
}

/* MÉRVE: a fizetési doboz szürke „buborékja" a Woo saját `.payment_box`-a
   (background: rgb(220, 215, 226)), a felső nyíl pedig a klasszikus Woo
   `.payment_box::before` szegély-háromszöge. Mindkettőt lecseréljük tiszta
   fehér dobozra, nyíl nélkül — így a Stripe-mezők és a saját gombunk tisztán
   ülnek benne. (A leírás-szöveget nem érinti, csak a keretet.)
   ⚠ A `div` azért kell: a Woo szabálya `#payment div.payment_box` (specificitás
   1,2,1), ami erősebb a `#payment .payment_box`-nál (1,2,0) — a `div`-vel
   megfordul a sorrend. Ezt MÉRTÜK a böngészőben. */
.bal-content #payment ul.wc_payment_methods div.payment_box {
	background: #fff;
	border: 0;
	margin: 0;
	padding: 0;
}

.bal-content #payment div.payment_box::before,
.bal-content #payment div.payment_box::after {
	content: none !important;
	border: 0 !important;
}

/* A Stripe `fieldset.wc-upe-form` saját kerete külön téglalapot rajzolt a
   „Bankkártyás fizetés" gomb köré (MÉRVE a böngészőben). Levesszük, hogy a gomb
   közvetlenül a fizetési dobozban üljön — a kártyamezők saját keretét ez nem
   érinti. */
.bal-content #payment fieldset.wc-upe-form {
	border: 0;
	margin: 0;
	padding: 0;
}

/* =====================================================================
 *  18. A KÁRTYAADATOK NYITÓ GOMBJA (2026-10-08, a felhasználó kérése)
 * =====================================================================
 *
 *  A kártya-űrlap induláskor ÖSSZECSÚSZVA van; a „Bankkártyás fizetés”
 *  gomb nyitja ki (a JS teszi ki, csak a pénztáron).
 */

.bal-content .bal-woo-osszecsukva {
	display: none !important;
}

.bal-content .bal-woo-kartya-gomb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 48px;
	margin: 16px 0 4px;
	padding: 12px 18px;
	color: var(--woo-ink);
	background: #fff;
	border: 1px solid var(--woo-line-strong);
	border-radius: var(--woo-radius-sm);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.bal-content .bal-woo-kartya-gomb:hover {
	border-color: rgba(37, 99, 235, .55);
	background: #fbfdff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(10, 88, 255, .5);
}

.bal-content .bal-woo-kartya-gomb svg {
	flex: 0 0 auto;
	color: var(--blue);
}

.bal-content .bal-woo-kartya-gomb--rejtett {
	display: none;
}

/* =====================================================================
 *  18. AZ „ÜRES KOSÁR" IKON (maszkolt SVG, a fejléc kosár-ikonjának a párja)
 * ===================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
	--bal-ures-ikon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.5h10.2L19.5 7H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.2'/%3E%3Ccircle cx='17' cy='19.5' r='1.2'/%3E%3C/svg%3E");
}

/* =====================================================================
 *  19. „TÁROLT ENERGIA" — A LAP ÉS A Panelek SZÍNVILÁGA (2026-10-08)
 * =====================================================================
 *
 *  MIÉRT: a tulajdonos kérése — „a checkoutnak lehetnek esztétikus színei,
 *  nem kell fehérnek lennie, lehet lágy átmenet rajta". A válasz NEM a „szín
 *  mindenhol": a szín a KERETÉ és az AKCENTUSÉ, az ADATBEVITEL fehér marad.
 *  A tintázott rétegek mindegyike VILÁGOSABB a benne lévő mezőknél — ezért az
 *  olvashatóság javul, nem romlik (lásd a méréseket lent).
 *
 *  ⚠⚠ A FESTŐ ELEM: a `.bal-body` a <body>-n van, a shell pedig
 *     `background:#f8fafc`-ot ad neki — ha csak `.bal-body`-t írnánk (0,1,0),
 *     a mosás ELTŰNNE. A `body.woocommerce-*.bal-body` (0,2,1) deklaráltan nyer,
 *     és nem függ a betöltési sorrendtől (a LiteSpeed kombinálhat).
 *
 *  ⚠ SÁVOSODÁS: az alfa-rampa .04 → 0 = 10 szint a 255-ből, ~870 px-en. Ha
 *     1920 px-en, 100%-os zoomon mégis sávokat látni: az alfát .03-ra venni,
 *     vagy egyetlen közel függőleges (172 deg) lineáris mosásra váltani.
 *
 *  ⚠ Az átlátszó végpont UGYANAZZAL az RGB-vel (`rgba(37,99,235,0)`), nem a
 *     `transparent` kulcsszóval — az egyes renderelőkben szürke lerakódást ad.
 *  ⚠ `background-attachment: fixed` SZÁNDÉKOSAN nincs (sávosodás + scroll-jank).
 *
 *  KONTRASZT (számolt, a teljes gradiens-pályát végigmintavételezve):
 *    #0f172a a lapon 17,03 · a legélénkebb mosáson 15,16
 *    #5b6b7f (--woo-muted) a legélénkebb mosáson 4,77 (PASS, kis tartalék)
 *    #4e6076 (--woo-muted-2) ugyanott 5,47  → a lapra írt szöveg ezt kapja
 *    #0f172a / #5b6b7f az „energia" panel legélénkebb pontján 16,86 / 5,14
 */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
	/* A lap és a két fény. Az alfa ≤ .04: efelett a --woo-muted a fények
	   metszéspontjában 4,5:1 alá esik. */
	--woo-lap: #f7fafc;
	--woo-feny-kek: rgba(37, 99, 235, .04);
	--woo-feny-zold: rgba(16, 185, 129, .04);

	/* A „papír" panel (számlázási adatok): fehér, de nem steril. */
	--woo-panel-papir-1: #ffffff;
	--woo-panel-papir-2: #fdfefe;

	/* Az „energia" panel (összegzés): három megálló, kék-zöld tenger.
	   A delták 3/2/2 és 5/1/6 szint, közel FÜGGŐLEGES szögön → nincs sáv. */
	--woo-energia-1: #fbfdff;
	--woo-energia-2: #f8fbfd;
	--woo-energia-3: #f3faf7;

	/* Panel-hajszálvonalak (a semleges szürke helyett hűvösek). */
	--woo-panel-line: #e3ebf3;
	--woo-panel-line-2: #d8e4ee;

	/* A mosásra írt szöveg: a --woo-muted ott 4,77 — átmegy, de kevés a
	   tartaléka. Ezért a lap-szintű alcím külön, sötétebb tokent kap. */
	--woo-muted-2: #4e6076;

	/* A MEZŐ: a felület fehér marad (ez a legolvashatóbb), a KERET erősödik,
	   mert a panel mögötte már nem tiszta fehér. Mérve: #d6e0ea = 1,34:1,
	   #c3d1e0 = 1,55:1 → a leválasztás JOBB, mint eddig. */
	--woo-mezo: #ffffff;
	--woo-mezo-line: #c3d1e0;

	/* Az összegző panel árnyéka KÉK, nem semleges: „energiának" látszik. */
	--woo-energia-shadow:
		0 1px 2px rgba(12, 42, 86, .05),
		0 18px 40px -22px rgba(10, 88, 255, .28);

	/* A panel 1px-es színátmenetes szegélye (a Linear/Vercel hajszálvonal-minta):
	   a KITÖLTÉST a padding-box festi, a SZEGÉLYT a border-box. Így egyetlen
	   `border: 1px solid transparent` mellett színátmenetes a vonal — maszatos
	   keret nélkül, nulla layout-költséggel. */
	--woo-el-1: linear-gradient(105deg, rgba(37, 99, 235, .40), rgba(16, 185, 129, .34));
	--woo-el-2: linear-gradient(105deg, rgba(37, 99, 235, .52), rgba(16, 185, 129, .46));

	/* A végösszeg-sor sávja — a meglévő 5%/3,5% helyett, tokennel. */
	--woo-kiemelt-1: #edf3fc;
	--woo-kiemelt-2: #ebf8f3;

	/* Értesítés-felületek. */
	--woo-info-bg: #f6fafe;
	--woo-ok-bg: #f3fbf7;
	--woo-hiba-bg: #fff7f6;

	/* ⚠⚠ A CTA: a --bal-grad MINTÁZATA marad, a MEGÁLLÓK sötétebbek.
	   MÉRVE, a teljes pályát végigmintavételezve fehér szöveggel:
	     --bal-grad   (#0a58ff/#0092cf/#10c98c) → min 2,15:1  ✗ FAIL
	     ez a változat (#0a58ff/#0d6fc4/#077a5b) → min 5,14:1  ✓ PASS
	   A betűméret növelése NEM menti meg (18,66 px-nél 3:1 kellene, a menta
	   2,15 — az is kevés). A világos menta a DISPLAY-vége marad (chipek, ikonok,
	   SÖTÉT szöveggel), de fehér szövegű gombé nem lehet. */
	--bal-grad-cta: linear-gradient(108deg, #0a58ff, #0d6fc4 45%, #077a5b);

	/* ⚠ ÉLÉNKEBB változat a NAGY, FÉLKÖVÉR gombokhoz és a bankkártyához
	   (a felhasználó kérése: a zöld vég ne legyen tompa).
	   MÉRVE, fehér szöveggel a teljes pályán: ez a változat 3,77:1 — ez a
	   WCAG „large text" (≥18,66 px félkövér) küszöbét (3:1) teljesíti, a
	   4,5:1-et NEM. Ezért a címke 19 px / 700 — a méret nem csökkenthető.
	   A világos menta (#10c98c, a landing vége) 2,15:1 = FAIL, azt NEM használjuk. */
	--bal-grad-elo: linear-gradient(108deg, #0a58ff, #0092cf 45%, #0b9668);
}

/* --- a) A LAP MOSÁSA: két lágy fény a sarkokban ---------------------- */
body.woocommerce-cart.bal-body,
body.woocommerce-checkout.bal-body,
body.woocommerce-order-received.bal-body {
	background-color: var(--woo-lap);
	background-image:
		radial-gradient(115% 80% at 8% 0%, var(--woo-feny-kek) 0%, rgba(37, 99, 235, 0) 62%),
		radial-gradient(100% 75% at 100% 100%, var(--woo-feny-zold) 0%, rgba(16, 185, 129, 0) 60%);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size:
		clamp(900px, 130%, 2000px) clamp(600px, 95%, 1400px),
		clamp(800px, 120%, 1800px) clamp(560px, 90%, 1300px);
	background-position: 0 0, 100% 100%;
}

/* A lapra írt alcím a sötétebb tokent kapja (5,47:1 a legélénkebb ponton). */
body.woocommerce-cart .bal-content .bal-woo-alcim,
body.woocommerce-checkout .bal-content .bal-woo-alcim {
	color: var(--woo-muted-2);
}

/* --- b) A „PAPÍR" panel: a munka oldala (számlázási adatok) ---------- */
body.woocommerce-cart .bal-content #customer_details,
body.woocommerce-checkout .bal-content #customer_details {
	background:
		linear-gradient(180deg, var(--woo-panel-papir-1) 0%, var(--woo-panel-papir-2) 100%) padding-box,
		var(--woo-el-1) border-box;
	border: 1px solid transparent;
	box-shadow:
		0 1px 2px rgba(12, 42, 86, .05),
		0 14px 34px -22px rgba(10, 88, 255, .22);
}

/* --- c) Az „ENERGIA" panel: a bizalom oldala (összegzés) -------------
   ⚠ A szög 168 fok (közel függőleges), NEM 90: a delta így a panel
   MAGASSÁGÁN oszlik el, nem a szélességén — széles lapon ott sávosodna. */
body.woocommerce-cart .bal-content #order_review,
body.woocommerce-checkout .bal-content #order_review,
body.woocommerce-cart .bal-content .cart_totals {
	background:
		linear-gradient(168deg, var(--woo-energia-1) 0%, var(--woo-energia-2) 46%, var(--woo-energia-3) 100%) padding-box,
		var(--woo-el-2) border-box;
	border: 1px solid transparent;
	box-shadow: var(--woo-energia-shadow);
}

/* A kosár TÉTELES táblázata marad fehér (sok sor — ott a szín zavarna),
   csak a szegély kapja a márka-hajszálvonalat. */
body.woocommerce-cart .bal-content .woocommerce-cart-form {
	background:
		linear-gradient(180deg, var(--woo-panel-papir-1), var(--woo-panel-papir-2)) padding-box,
		var(--woo-el-1) border-box;
	border: 1px solid transparent;
}

/* --- d) A VÉGÖSSZEG sora: a lap egyetlen megengedett „színes sávja" ---
   ⚠⚠ MÉRVE (2026-10-08, böngésző): ez a sáv ELŐSZÖR nem érvényesült, és az ok
   a SAJÁT korábbi szabályunk volt: a kosár-táblázathoz írt
   `.bal-content .woocommerce-cart-form table.shop_table … { background:
   transparent !important }` szelektor-listájának egyik tagja a PÉNZTÁR
   táblázatára is illeszkedik → az `!important` nyert a színátmenet ellen.
   Ugyanígy a keretet a `tfoot td` szabály (1,2,3) vitte el a mi (1,2,2) ellen.
   Ezért itt: erősebb szelektor (1,2,4) + a HÁTTÉREN indokolt `!important`
   (a saját, régebbi `!important`-unk ellen — nincs más út osztály-szinten).
   ⚠ A sor a Woo sablonjában a `tfoot`-ban van (mért: a `tfoot td` szabály
      illeszkedett rá) — ezért a `tfoot` a szelektorban. */
.bal-content #order_review table.shop_table tfoot tr.order-total th,
.bal-content #order_review table.shop_table tfoot tr.order-total td {
	padding-top: 16px;
	border-top: 2px solid var(--woo-line-strong);
	background: linear-gradient(180deg, var(--woo-kiemelt-1), var(--woo-kiemelt-2)) !important;
}

/* --- e) MEZŐK: fehér felület, erősebb keret (lásd 20. pont is) ------- */
.bal-content .woocommerce-Input,
.bal-content input.input-text,
.bal-content select,
.bal-content textarea {
	background: var(--woo-mezo);
	border-color: var(--woo-mezo-line);
}

/* ⚠ MÉRVE: a mai #94a3b8 placeholder 2,56:1 a fehér mezőn → AA FAIL.
   A #64748b 4,76:1 (PASS), és még mindig halványabb a beírt szövegnél. */
.bal-content input.input-text::placeholder,
.bal-content textarea::placeholder {
	color: #64748b;
	opacity: 1;
}

/* --- f) A FIZETÉSI MÓDOK: fehér sorok, a tintát a KÖZÜK és a keret adja
   ⚠ A §17 mért döntését MEGTARTJUK: a sor és a payment_box fehér marad,
   mert a Stripe-mezők tiszta felületen ülnek. A kijelöltséget GYŰRŰ +
   szegély jelzi — nem kitöltés. */
.bal-content ul.wc_payment_methods li {
	background: #fff;
	border: 1px solid var(--woo-panel-line-2);
	border-radius: var(--woo-radius-sm);
}

.bal-content ul.wc_payment_methods li + li {
	margin-top: 10px;
}

.bal-content ul.wc_payment_methods li:has(input:checked) {
	background: #fff;
	border-color: rgba(37, 99, 235, .34);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
}

/* A fizetési blokk előtti elválasztó: márka-tintás hajszálvonal. */
.bal-content #payment::before {
	content: "";
	display: block;
	height: 1px;
	margin: 16px 0 18px;
	background: linear-gradient(
		90deg,
		rgba(37, 99, 235, .16),
		rgba(16, 185, 129, .12) 45%,
		rgba(37, 99, 235, 0)
	);
}

/* --- g) A CTA: a sötétített márka-átmenet (5,14:1 a teljes pályán) --- */
.bal-content #place_order,
.bal-content .checkout-button,
.bal-content button.button.alt,
.bal-content a.checkout-button,
.bal-content .bal-woo-beteljesules-gomb {
	background: var(--bal-grad-cta, linear-gradient(108deg, #0a58ff, #0d6fc4 45%, #077a5b));
}

/* ⚠ `filter: saturate()` HELYETT brightness(): a saturate a sötétített zöld
   végét világosítaná → rontaná a fehér szöveg kontrasztját. */
.bal-content #place_order:hover,
.bal-content .checkout-button:hover,
.bal-content button.button.alt:hover,
.bal-content .bal-woo-beteljesules-gomb:hover {
	filter: brightness(1.03);
}

/* --- h) ÉRTESÍTÉSEK: tintázott felület, márka bal szegély ------------- */
.bal-content .woocommerce-message,
.bal-content .woocommerce-info,
.bal-content .woocommerce-error {
	background: var(--woo-info-bg);
}

.bal-content .woocommerce-message { background: var(--woo-ok-bg); }
.bal-content .woocommerce-error { background: var(--woo-hiba-bg); }

/* --- i) LÉPÉSJELZŐ chipek: a márka marad, de olvashatóan ---------------
   ⚠ MÉRVE: a fehér szám a #10b981 zöldön 2,54:1 → AA FAIL. A megoldás nem a
   márkaszín elhagyása, hanem a SÖTÉT tinta: #0f172a a zöldön 7,04:1 → PASS. */
.bal-content .bal-woo-lepes--kesz .bal-woo-lepes-jel {
	background: var(--green);
	border-color: var(--green);
	color: #0f172a;
}

.bal-content .bal-woo-lepes--aktiv .bal-woo-lepes-jel {
	background: var(--bal-grad-cta);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(10, 88, 255, .55);
}

/* --- j) BIZTONSÁGI SÁV: halvány üveg, backdrop-filter NÉLKÜL (perf) --- */
.bal-content ul.bal-woo-biztonsag {
	background: #f8fbfc;
	border: 1px solid var(--woo-panel-line);
	border-radius: var(--woo-radius-sm);
	padding: 12px 16px;
}

/* --- k) MOBIL: keskeny oszlopban EGY fény, laposabb panel -------------
   ⚠ Keskeny hasábon a diagonális tintás átmenet „csíknak" látszana. */
@media (max-width: 430px) {
	body.woocommerce-cart.bal-body,
	body.woocommerce-checkout.bal-body,
	body.woocommerce-order-received.bal-body {
		background-image:
			radial-gradient(120% 70% at 10% 0%, rgba(37, 99, 235, .03) 0%, rgba(37, 99, 235, 0) 58%);
		background-size: clamp(600px, 150%, 1200px) clamp(420px, 80%, 900px);
		background-position: 0 0;
	}

	body.woocommerce-cart .bal-content #order_review,
	body.woocommerce-checkout .bal-content #order_review,
	body.woocommerce-cart .bal-content .cart_totals {
		background:
			linear-gradient(180deg, var(--woo-energia-2) 0%, var(--woo-energia-3) 100%) padding-box,
			var(--woo-el-2) border-box;
	}

	.bal-content ul.bal-woo-biztonsag {
		background: transparent;
		border: 0;
		padding: 0;
	}
}

/* --- l) NYOMTATÁS: tinta-takarékos, sötét szöveg fehéren -------------- */
@media print {
	body.woocommerce-cart.bal-body,
	body.woocommerce-checkout.bal-body,
	body.woocommerce-order-received.bal-body {
		background: #fff !important;
	}

	.bal-content #customer_details,
	.bal-content #order_review,
	.bal-content .cart_totals,
	.bal-content .woocommerce-cart-form,
	.bal-content .bal-woo-beteljesules {
		background: #fff !important;
		border: 1px solid #cfcfcf !important;
		box-shadow: none !important;
	}
}

/* ⚠ SZÁNDÉKOSAN NINCS `prefers-color-scheme: dark` ág (light-only döntés) —
   a következő ablak ne „javítsa ki". */

/* =====================================================================
 *  20. KÉNYSZERÍTŐ MEZŐ-FELÜLET (2026-10-08, MÉRVE)
 * =====================================================================
 *
 *  ⚠⚠ MÉRVE a böngészőben: a `#billing_email` `border-radius` 4px, a keret
 *     `rgba(32,7,7,.8)`, a padding 7.5px — miközben a §6 szabálya 12px-t és
 *     #d6e0ea-t ír, és az élő CSS byte-azonos a repóval. A repóban NINCS
 *     `billing_email` szelektor — tehát a NYERTES szabály a gyermek-témán
 *     KÍVÜL van, és ID-t tartalmaz: a `#billing_email` (1,0,0) legyőzi a
 *     `.bal-content input.input-text`-et (0,2,1), mert az ID a specificitás
 *     ELSŐ tengelyén dönt. Ugyanaz a csapda, mint a §17-ben a
 *     `#payment div.payment_box` (1,2,1) esete.
 *
 *  Osztály-szelektor ID-t nem tud legyőzni — ezért itt `!important` KELL, nem
 *  kényelemből. Hatókör: csak a pénztár/kosár űrlapja, és a --woo-mezo*
 *  tokenekre épül (tokent váltva ez is vált).
 */
body.woocommerce-cart .bal-content form.checkout input.input-text,
body.woocommerce-checkout .bal-content form.checkout input.input-text,
body.woocommerce-cart .bal-content form.checkout select,
body.woocommerce-checkout .bal-content form.checkout select,
body.woocommerce-cart .bal-content form.checkout textarea,
body.woocommerce-checkout .bal-content form.checkout textarea {
	background-color: var(--woo-mezo) !important;
	border-color: var(--woo-mezo-line) !important;
	border-radius: var(--woo-radius-sm) !important;
}

/* =====================================================================
 *  21. A SZERTARTÁS RITMUSA — az ív: Kosár → Adatok és fizetés → Hozzáférés
 * =====================================================================
 *
 *  MIÉRT: a tulajdonos kérése — „valami olyan legyen, ami szertartásossá
 *  teszi a fizetést, mint egy kellemes szertartást". A megoldás nem több
 *  dísz, hanem RITMUS: (1) az oldal lassan, sorban épül fel; (2) a három
 *  állomás közül az, ahol jársz, halkan lélegzik; (3) a sáv addig világosodik,
 *  amíg az adatok készen nem állnak; (4) a fizetés után a harmadik állomás
 *  „MEGÉRKEZIK" — és a hozzáférés kimondva, ünnepélyesen ott van.
 *
 *  ⚠ Minden mozgás `prefers-reduced-motion` esetén kikapcsol (lásd lent).
 *  ⚠ A `#customer_details` és a `#order_review` NEM kap `overflow: hidden`-t:
 *     az klippelná a Stripe iframe-jeit (mért tanulság).
 */

/* --- a) Lassú, sorban épülő oldal: a szertartás három felvonása ------- */
@keyframes bal-woo-belebeg {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.bal-content .bal-woo-lepesek-nav {
	animation: bal-woo-belebeg .5s cubic-bezier(.22, .61, .36, 1) both;
}

.bal-content #customer_details {
	animation: bal-woo-belebeg .5s cubic-bezier(.22, .61, .36, 1) .09s both;
}

.bal-content #order_review {
	animation: bal-woo-belebeg .5s cubic-bezier(.22, .61, .36, 1) .18s both;
}

.bal-content ul.bal-woo-biztonsag {
	animation: bal-woo-belebeg .5s cubic-bezier(.22, .61, .36, 1) .27s both;
}

/* --- b) A lépés-ív: alatta egy sáv, amely „megtelik" -----------------
   A sáv szélessége a KÉSZ állomások arányában nő (a JS teszi rá a
   `.bal-woo-lepesek--kesz` osztályt, amikor az adatok készen állnak). */
.bal-content .bal-woo-lepesek-nav {
	position: relative;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--woo-panel-line);
}

.bal-content .bal-woo-lepesek-nav::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--green), #0092cf 60%, rgba(37, 99, 235, .35));
	transform: scaleX(.34);
	transform-origin: left center;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.bal-content .bal-woo-lepesek-nav.bal-woo-lepesek--kesz::after {
	transform: scaleX(1);
}

/* A SORON KÖVETKEZŐ állomás („az adatok készen vannak, a fizetés van hátra"):
   halvány gyűrű a chipen — nem „aktív", csak „ez jön". A 3. állomást a
   fizetés előtt SOHA nem kiáltjuk ki aktívnak (a jelzés így őszinte). */
.bal-content .bal-woo-lepes--kovetkezo {
	color: var(--woo-fej);
}

.bal-content .bal-woo-lepes--kovetkezo .bal-woo-lepes-jel {
	background: #fff;
	border-color: rgba(37, 99, 235, .45);
	color: var(--blue);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .06);
}

/* --- c) Az AKTÍV állomás halkan lélegzik (nem villog) ----------------- */
@keyframes bal-woo-legzes-aktiv {
	0%, 100% { box-shadow: 0 6px 14px -6px rgba(10, 88, 255, .55), 0 0 0 0 rgba(10, 88, 255, .12); }
	50%      { box-shadow: 0 6px 14px -6px rgba(10, 88, 255, .55), 0 0 0 6px rgba(10, 88, 255, 0); }
}

.bal-content .bal-woo-lepes--aktiv .bal-woo-lepes-jel {
	animation: bal-woo-legzes-aktiv 4.2s ease-in-out infinite;
}

/* --- d) A CTA: a szertartás szíve — nagyon halk lélegzés --------------
   A hover kikapcsolja az animációt, különben felülírná a hover-árnyékot. */
@keyframes bal-woo-legzes-gomb {
	0%, 100% { box-shadow: 0 11px 22px rgba(10, 88, 255, .22), inset 0 1px rgba(255, 255, 255, .24); }
	50%      { box-shadow: 0 15px 32px -4px rgba(10, 88, 255, .34), inset 0 1px rgba(255, 255, 255, .24); }
}

body.woocommerce-checkout .bal-content #place_order {
	animation: bal-woo-legzes-gomb 4.6s ease-in-out infinite;
}

body.woocommerce-checkout .bal-content #place_order:hover,
body.woocommerce-checkout .bal-content #place_order:focus-visible {
	animation: none;
}

/* --- e) A SZERTARTÁS ZÁRÓ KÉPE: „A hozzáférésed aktív" ---------------
   A fizetés utáni oldal (order-received) — ide fut be az ív. */
body.woocommerce-order-received .bal-content .bal-woo-beteljesules {
	position: relative;
	margin: 0 0 28px;
	padding: 30px 30px 26px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--woo-radius);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(16, 185, 129, .10) 0%, rgba(16, 185, 129, 0) 62%) padding-box,
		linear-gradient(168deg, #fbfefd 0%, #f6fcf9 100%) padding-box,
		linear-gradient(105deg, rgba(16, 185, 129, .55), rgba(37, 99, 235, .34)) border-box;
	box-shadow: 0 1px 2px rgba(12, 42, 86, .05), 0 18px 40px -22px rgba(16, 185, 129, .35);
}

.bal-content .bal-woo-beteljesules-medal {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 16px;
	border-radius: 999px;
	border: 1px solid rgba(16, 185, 129, .35);
	background: radial-gradient(circle at 32% 26%, #ffffff 0%, #eafaf3 58%, #d7f4e7 100%);
	box-shadow: 0 12px 26px -14px rgba(16, 185, 129, .55);
	color: var(--green);
}

@keyframes bal-woo-megérkezik {
	from { opacity: 0; transform: scale(.86); }
	to   { opacity: 1; transform: none; }
}

.bal-content .bal-woo-beteljesules-medal {
	animation: bal-woo-megérkezik .62s cubic-bezier(.22, .61, .36, 1) .12s both;
}

.bal-content .bal-woo-beteljesules-cim {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--woo-fej);
}

.bal-content .bal-woo-beteljesules-szoveg {
	max-width: 56ch;
	margin: 0 auto 20px;
	color: var(--woo-muted-2);
	font-size: 15px;
	line-height: 1.65;
}

.bal-content .bal-woo-beteljesules-gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 14px 30px;
	color: #fff;
	border: 0;
	border-radius: var(--woo-radius-sm);
	box-shadow: var(--bal-shadow-btn, 0 11px 22px rgba(10, 88, 255, .22));
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.bal-content .bal-woo-beteljesules-gomb:hover {
	transform: translateY(-1px);
	box-shadow: var(--bal-shadow-hover, 0 14px 32px -10px rgba(10, 88, 255, .5));
}

.bal-content .bal-woo-beteljesules-lablec {
	margin: 16px 0 0;
	color: var(--woo-muted);
	font-size: 13px;
}

/* A Woo saját „Köszönjük a rendelést" sora: halkabb, nem kiabál. */
body.woocommerce-order-received .bal-content .woocommerce-notice--success {
	margin: 0 0 18px;
	color: var(--woo-muted-2);
	font-size: 15px;
	line-height: 1.6;
}

/* Az áttekintő adatok (rendelésszám, dátum, összeg): nyugodt rács. */
body.woocommerce-order-received .bal-content ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 26px;
	padding: 16px 18px;
	list-style: none;
	background: #f8fbfc;
	border: 1px solid var(--woo-panel-line);
	border-radius: var(--woo-radius-sm);
}

body.woocommerce-order-received .bal-content ul.woocommerce-order-overview li {
	margin: 0;
	color: var(--woo-muted-2);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

body.woocommerce-order-received .bal-content ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	color: var(--woo-ink);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* --- f) MOZGÁS-KORLÁTOZÁS: minden szertartás-mozgás kikapcsol --------- */
@media (prefers-reduced-motion: reduce) {
	.bal-content .bal-woo-lepesek-nav,
	.bal-content #customer_details,
	.bal-content #order_review,
	.bal-content ul.bal-woo-biztonsag,
	.bal-content .bal-woo-beteljesules-medal,
	body.woocommerce-checkout .bal-content #place_order,
	.bal-content .bal-woo-lepes--aktiv .bal-woo-lepes-jel {
		animation: none;
	}

	.bal-content .bal-woo-lepesek-nav::after { transition: none; }
}

/* =====================================================================
 *  22. A BANKÁRTYA, A LÁGY FÉNY ÉS A PÉNZTÁR VÉGLEGES RENDJE (2026-10-08)
 * =====================================================================
 *
 *  A felhasználó kérése: a számlázási adatlap kapjon megnyugtató színt; a
 *  kurzor alatt legyen finom lágy fény; a rendelés tartalma legyen egyszerűbb
 *  (részösszeg nélkül); a „Fizetési adatok mentése…" ne kapjon külön dobozt;
 *  a bankkártya legyen VALÓDI kártya (jellegzetes csík, felirat), az EGÉSZ
 *  kártya egy gomb, ami 3D-ben megfordul (a hátán Kártyaszám / Lejárat / CVC
 *  `***`-ként), és ha az adat hiánytalan, a csíkon: „Kártyaadatok rendben";
 *  a „Fizetési lehetőségek" a kártya FÖLÉ; a Megrendelés ALATT GPay/Apple Pay;
 *  a Megrendelés gomb a jelentkezem/kosárba gombok családjában; a 3 biztonsági
 *  sor balra zárva; a kupon-sáv a tartalom és a fizetés közé.
 */

/* --- a) A SZÁMLÁZÁSI ADATLAP színe: „megnyugtató papír" ---------------- */
body.woocommerce-cart .bal-content #customer_details,
body.woocommerce-checkout .bal-content #customer_details {
	background:
		linear-gradient(168deg, #fbfdff 0%, #f8fbfd 52%, #f4faf7 100%) padding-box,
		var(--woo-el-1) border-box;
}

/* --- b) A LÁGY FÉNY: a panel háttere fölött, a TARTALOM alatt ---------
   ⚠ `z-index: -1` önmagában a panel háttere MÖGÉ kerülne (láthatatlan) —
     ezért kell a szülőn saját stacking context (`isolation: isolate`). */
body.woocommerce-cart .bal-content #customer_details,
body.woocommerce-checkout .bal-content #customer_details,
body.woocommerce-cart .bal-content #order_review,
body.woocommerce-checkout .bal-content #order_review {
	position: relative;
	isolation: isolate;
}

body.woocommerce-cart .bal-content .bal-woo-feny,
body.woocommerce-checkout .bal-content .bal-woo-feny {
	position: absolute;
	left: 0;
	top: 0;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(
		closest-side,
		rgba(16, 185, 129, .10) 0%,
		rgba(37, 99, 235, .07) 44%,
		rgba(37, 99, 235, 0) 74%
	);
	opacity: 0;
	transform: translate3d(0, 0, 0);
	transition: opacity .25s ease;
	will-change: transform;
}

body.woocommerce-cart .bal-content .bal-woo-feny--be,
body.woocommerce-checkout .bal-content .bal-woo-feny--be {
	opacity: 1;
}

/* ⚠ A fény a panel HÁTTERE fölött, de minden szöveg ALATT festődik — ezért
   olvashatósági kockázat nincs. A SAJÁT hátterű elemek (mezők) kitakarják,
   ami szándékos: a fény a „papírra" vetül, nem az űrlapra. */

/* --- c) A RENDELÉS TARTALMA egyszerűbb: fejléc és részösszeg nélkül --- */
.bal-content #order_review table.shop_table thead,
.bal-content #order_review table.shop_table tr.cart-subtotal {
	display: none;
}

/* --- d) „Fizetési lehetőségek" a KÁRTYA FÖLÉ -------------------------- */
.bal-content ul.wc_payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--woo-fej);
}

.bal-content ul.wc_payment_methods li > input.input-radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--blue);
}

/* --- e) A 3D BANKÁRTYA -----------------------------------------------
   ⚠ VALÓDI kártyaarány: 85,60 × 53,98 mm = 1,5858. A méret a flip alatt FIX. */
.bal-content .bal-woo-kartya-doboz {
	position: relative;
	z-index: 1;
	perspective: 1200px;
	max-width: 380px;
	margin: 0 auto 4px;
}

.bal-content .bal-woo-kartya {
	display: block;
	width: 100%;
	aspect-ratio: 1.5858;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 36px -22px rgba(10, 88, 255, .42);
	transition: transform .18s ease, box-shadow .18s ease;
}

.bal-content .bal-woo-kartya:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .07), 0 22px 44px -22px rgba(10, 88, 255, .5);
}

.bal-content .bal-woo-kartya:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* A FORGÓ elem — csak ez visz transformot (a hover-emelés külön elemen van). */
.bal-content .bal-woo-kartya-bel {
	position: absolute;
	inset: 0;
	display: block;
	transform-style: preserve-3d;
	transition: transform .62s cubic-bezier(.2, .7, .25, 1);
}

.bal-content .bal-woo-kartya[aria-expanded="true"] .bal-woo-kartya-bel {
	transform: rotateY(180deg);
}

.bal-content .bal-woo-kartya-lap {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden; /* ⚠ a LAPON szabad; a preserve-3d elemen NEM */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: var(--bal-shadow-btn, 0 11px 22px rgba(10, 88, 255, .22));
}

/* ELŐLAP: a márka-gradiens család (a fehér szöveg a pályán ≥ 3,77:1). */
.bal-content .bal-woo-kartya-lap--elol {
	justify-content: space-between;
	padding: 16px 18px 14px;
	color: #fff;
	background: var(--bal-grad-elo, linear-gradient(108deg, #0a58ff, #0092cf 45%, #0b9668));
}

.bal-content .bal-woo-kartya-elol-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bal-content .bal-woo-kartya-chip {
	position: relative;
	width: 42px;
	height: 30px;
	border-radius: 6px;
	background: linear-gradient(135deg, #fdfdfd, #dbe6f2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.bal-content .bal-woo-kartya-chip::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 3px;
	background:
		repeating-linear-gradient(90deg, rgba(10, 22, 38, .28) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, rgba(10, 22, 38, .22) 0 1px, transparent 1px 8px);
}

.bal-content .bal-woo-kartya-jel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-shadow: 0 1px 1px rgba(10, 22, 38, .18);
}

.bal-content .bal-woo-kartya-szam {
	font-size: clamp(15px, 4.6vw, 19px);
	font-weight: 600;
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bal-content .bal-woo-kartya-elol-lab {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.bal-content .bal-woo-kartya-lab {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .82;
}

.bal-content .bal-woo-kartya-lejarat {
	font-size: 13px;
	font-weight: 600;
}

/* a „jellegzetes csík" az előlapon: vékony, a márka sötét vége */
.bal-content .bal-woo-kartya-elol-csik {
	position: absolute;
	left: 0;
	right: 0;
	top: 58px;
	height: 6px;
	background: linear-gradient(90deg, rgba(4, 32, 74, .42), rgba(3, 58, 44, .34));
}

/* HÁTLAP: világos panel (a Stripe-mezők tiszta felületen ülnek). */
.bal-content .bal-woo-kartya-lap--hat {
	justify-content: flex-start;
	padding: 0;
	transform: rotateY(180deg);
	background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.bal-content .bal-woo-kartya-magnes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 46px;
	padding: 0 16px;
	background: var(--woo-fej, #0a1626);
}

.bal-content .bal-woo-kartya-magnes-szoveg {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff; /* #0a1626 alapon 18,17:1 */
}

.bal-content .bal-woo-kartya-magnes-szoveg[data-allapot="2"]::before { content: "✓ "; }
.bal-content .bal-woo-kartya-magnes-szoveg[data-allapot="1"]::before { content: "• "; opacity: .6; }

.bal-content .bal-woo-kartya-hat-torzs {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px 18px 0;
}

.bal-content .bal-woo-kartya-sor {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
	font-size: 12.5px;
}

.bal-content .bal-woo-kartya-sor i {
	flex: 0 0 84px;
	font-style: normal;
	font-weight: 600;
	color: var(--woo-muted, #5b6b7f);
}

.bal-content .bal-woo-kartya-sor b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--woo-ink, #0f172a);
}

.bal-content .bal-woo-kartya-hat-lab {
	margin-top: auto;
	padding: 0 18px 12px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--woo-muted, #5b6b7f);
}

/* A felolvasott állapot (képernyőolvasónak) — szemmel nem látszik. */
.bal-content .bal-woo-kartya-elo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- f) A VALÓDI STRIPE-MEZŐK RÉTEGE (nincs DOM-mozgatás!) -----------
   ⚠ Az iframe-nek VALÓDI méretet adunk (nem 0×0), ezért a Stripe nem
     „csuklik össze" — a mai 2× resize hack ezért marad. */
.bal-content .wc_payment_method.payment_method_stripe > .payment_box > fieldset#wc-stripe-upe-form {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .24s ease .06s, transform .24s ease .06s;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: visible; /* a Stripe hibaüzenete ne vágódjon le */
}

.bal-content .wc_payment_method.payment_method_stripe > .payment_box.bal-woo-kartya-nyitva > fieldset#wc-stripe-upe-form {
	position: static;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	margin: 14px 0 0;
}

/* Védekező szabály: a régi „összecsukva" osztály NE tüntesse el a mezőket
   (a kártya váltotta fel a régi gombot). */
.bal-content #wc-stripe-upe-form.bal-woo-osszecsukva {
	display: block !important;
}

/* --- g) A „Fizetési adatok mentése…" sor: a kártya ALATT, DOBOZ NÉLKÜL - */
.bal-content .payment_box fieldset:not([id]) {
	border: 0;
	padding: 0;
	margin: 14px 0 0;
	font-size: 13px;
}

.bal-content #wc-stripe-new-payment-method {
	width: 18px;
	height: 18px;
	accent-color: var(--blue);
}

.bal-content label[for="wc-stripe-new-payment-method"] {
	display: inline;
	font-size: 13px;
	line-height: 1.5;
	color: var(--woo-muted-2, #4e6076);
}

/* --- h) A MEGRENDELÉS GOMB: a jelentkezem/kosárba gombok családja ------
   ⚠⚠ MÉRVE: a fehér szöveg kontrasztja a teljes pályán —
      #077a5b (korábbi) 5,14 · ez a változat (…/0b9668) 3,77 · a landing
      világos mentája (#10c98c) 2,15 = FAIL.
   A 3,77:1 úgy ELÉG, hogy a címke NAGY és FÉLKÖVÉR (19 px / 700 → a WCAG
   „large text" küszöbe 3:1). ⚠ A CÍMKEMÉRET EZÉRT NEM CSÖKKENTHETŐ. */
body.woocommerce-checkout .bal-content #place_order,
body.woocommerce-cart .bal-content a.checkout-button {
	background: var(--bal-grad-elo, linear-gradient(108deg, #0a58ff, #0092cf 45%, #0b9668));
	background-size: 220% 220%;
	background-position: 0% 50%;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .01em;
	border: 0;
	box-shadow: var(--bal-shadow-btn, 0 11px 22px rgba(10, 88, 255, .22));
	transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
}

body.woocommerce-checkout .bal-content #place_order:hover,
body.woocommerce-cart .bal-content a.checkout-button:hover {
	background-position: 100% 50%;
	transform: translateY(-1px);
	box-shadow: var(--bal-shadow-hover, 0 14px 32px -10px rgba(10, 88, 255, .5)), inset 0 1px rgba(255, 255, 255, .24);
}

body.woocommerce-checkout .bal-content #place_order:focus-visible {
	background-position: 100% 50%;
}

/* --- i) A 3 BIZTONSÁGI SOR BALRA zárva ------------------------------- */
.bal-content ul.bal-woo-biztonsag {
	justify-content: flex-start;
	text-align: left;
}

.bal-content ul.bal-woo-biztonsag li {
	justify-content: flex-start;
	text-align: left;
}

/* --- j) A WALLET a Megrendelés gomb ALATT (GPay / Apple Pay) --------- */
.bal-content .bal-woo-vagy {
	margin: 16px 0 10px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--woo-muted);
}

.bal-content .bal-woo-vagy::before,
.bal-content .bal-woo-vagy::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 34px;
	height: 1px;
	margin: 0 10px;
	background: var(--woo-panel-line-2);
}

/* --- k) A KUPON-sáv: kis sáv a tartalom és a fizetés között ---------- */
.bal-content #order_review .woocommerce-form-coupon-toggle {
	margin: 18px 0 0;
}

.bal-content #order_review .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 8px 0 8px 14px;
	background: transparent;
	border: 0;
	border-left: 3px solid var(--blue);
	border-radius: 0;
	color: var(--woo-muted-2, #4e6076);
	font-size: 13.5px;
}

.bal-content #order_review .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--blue);
	font-weight: 600;
}

.bal-content #order_review .checkout_coupon {
	margin: 12px 0 0;
	padding: 14px 16px;
	background: #f8fbfc;
	border: 1px solid var(--woo-panel-line);
	border-radius: var(--woo-radius-sm);
}

/* A kupon-gomb a Woo szürke pirulája — a panelünkben kilóg. Másodlagos
   márka-gomb: semleges alap, a hover visz a kékre (#0f172a a #f1f5f9-en 16,30:1).
   ⚠⚠ MÉRVE (2026-10-08): a `.checkout_coupon` osztály a PARSEOLT DOM-ban NINCS
   MEG — a Woo egy `<form>`-ot ágyazna a pénztár űrlapjába, azt a böngésző
   ELDOBJA, így a kupon elemei testvérként jelennek meg. Ezért a gombot a
   `name="apply_coupon"` alapján fogjuk meg (az nem vész el). */
.bal-content #order_review button[name="apply_coupon"],
.bal-content #order_review input[name="apply_coupon"] {
	padding: 11px 20px;
	background: #f1f5f9;
	border: 1px solid var(--woo-panel-line-2);
	border-radius: var(--woo-radius-sm);
	color: var(--woo-ink);
	font-weight: 700;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bal-content #order_review button[name="apply_coupon"]:hover,
.bal-content #order_review input[name="apply_coupon"]:hover {
	background: #fff;
	border-color: var(--blue);
	color: var(--blue);
}

/* --- l) MOBIL 320–430 px --------------------------------------------- */
@media (max-width: 430px) {
	.bal-content .bal-woo-kartya-doboz { max-width: 100%; }
	.bal-content .bal-woo-kartya-lap--elol { padding: 13px 15px 11px; }
	.bal-content .bal-woo-kartya-chip { width: 36px; height: 26px; }
	.bal-content .bal-woo-kartya-szam { letter-spacing: .08em; }
	.bal-content .bal-woo-kartya-elol-csik { top: 50px; height: 5px; }
	.bal-content .bal-woo-kartya-magnes { height: 40px; padding: 0 13px; }
	.bal-content .bal-woo-kartya-magnes-szoveg { font-size: 11.5px; }
	.bal-content .bal-woo-kartya-hat-torzs { padding: 10px 14px 0; gap: 5px; }
	.bal-content .bal-woo-kartya-sor i { flex-basis: 72px; font-size: 11.5px; }
	.bal-content .bal-woo-kartya-sor b { font-size: 11.5px; }

	body.woocommerce-checkout .bal-content #place_order { font-size: 17px; }
}

/* --- m) CSÖKKENTETT MOZGÁS: forgatás helyett AZONNALI váltás -------- */
@media (prefers-reduced-motion: reduce) {
	.bal-content .bal-woo-kartya,
	.bal-content .bal-woo-kartya-bel,
	body.woocommerce-checkout .bal-content #place_order {
		transition: none;
	}

	body.woocommerce-checkout .bal-content #place_order { background-position: 50% 50%; }
}

/* =====================================================================
 *  23. AZ ÜRES KOSÁR GOMBJA — LEJJEBB ÉS KÖZÉPRE (2026-10-08)
 * =====================================================================
 *
 *  A felhasználó kérése: „A kurzusok böngészése gombot pozícionáld lejjebb és
 *  zárd középre." Eddig a Woo `p.return-to-shop`-ja BALRA zárva, közvetlenül a
 *  kártya aljára tapadva állt (a képernyőképen mérve).
 *
 *  ⚠⚠ A gomb `display: inline-flex` — az `auto` margó NEM zárja középre, mert
 *     az csak BLOKK-szintű elemen hat. Ezért a SZÜLŐ kap `text-align: center`-t.
 *  ⚠ A Woo üres-kosár mark-upjában a szülő a `.return-to-shop` `p`. Ha egy téma
 *     vagy plugin másképp adja, a `:has(.cart-empty)` ág akkor is elkapja — és
 *     ez a böngészőkben már széles körben támogatott (a tartalom olvashatósága
 *     ettől nem függ).
 *  ⚠ A felső tér a GOMBON van (nem a szülőn), mert a szülő a kártya és a gomb
 *     között egyébként is csak egy `p` — így a távolság pontosan 28 px.
 */
body.woocommerce-cart .bal-content .return-to-shop,
body.woocommerce-cart .bal-content .woocommerce:has(.cart-empty) > p {
	text-align: center;
}

/* ⚠⚠ MEGJEGYZÉS A PÁRHUZAMOS ABLAKNAK: a fájlban van egy KORÁBBI kísérlet is
   erre a feladatra:
     `.bal-content .woocommerce-cart .return-to-shop { text-align: center; margin-top: 22px }`
   Ez a szelektor SOSEM illeszkedik: a `.woocommerce-cart` a `<body>` osztálya,
   nem a `.bal-content` LESZÁRMAZOTTJA — ezért maradt a gomb balra zárva.
   A fenti szabály az érvényes. (A régi szabály szándékosan bent maradt, hogy
   a másik ablak lássa, mi történt; funkcionálisan halott.) */

body.woocommerce-cart .bal-content .return-to-shop .button,
body.woocommerce-cart .bal-content a.wc-backward {
	margin-top: 28px;
}