/* ============================================================================
   Balance — bejelentkezés, regisztráció, űrlapok és a 404
   ----------------------------------------------------------------------------
   Ez a fájl a balance-tutor.css KIEGÉSZÍTÉSE: azokat a felületeket stílusolja,
   amik nem a Tutor vagy a WooCommerce részei — a belépő oldalt, a 404-et, és
   a WordPress saját bejelentkező oldalát.

   Ugyanazok a tokenek, mint a landingnél.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. BEJELENTKEZŐ OLDAL — két hasáb, a landing hangulatában
   --------------------------------------------------------------------------- */

.bal-auth {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	max-width: 1060px;
	margin: 0 auto;
}

.bal-auth-aside {
	background: linear-gradient(160deg, #f0fdf9 0%, #ecfdf5 55%, #f8fafc 100%);
	border: 1px solid #d9f2e7;
	border-radius: 22px;
	padding: 28px 26px 30px;
}

.bal-auth-mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--bal-grad);
	color: #fff;
	box-shadow: 0 11px 22px rgba(37, 99, 235, 0.18);
	margin-bottom: 18px;
}

.bal-auth-eyebrow {
	font-size: 0.7rem;
	font-weight: 720;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #748398;
	margin: 0 0 10px;
}

.bal-auth-aside h2 {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #0f172a;
	margin: 0 0 12px;
}

.bal-auth-copy {
	font-size: 0.95rem;
	line-height: 1.65;
	color: #52606f;
	margin: 0 0 20px;
}

.bal-auth-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.bal-auth-points li {
	position: relative;
	padding-left: 26px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #334155;
}

.bal-auth-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #d1fae5;
	box-shadow: inset 0 0 0 4px #ecfdf5;
}

.bal-auth-card {
	background: #fff;
	border: 1px solid #e9eef1;
	border-radius: 22px;
	padding: 30px 28px 26px;
	box-shadow: var(--bal-shadow-card);
}

.bal-auth-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #047857;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.bal-auth-card h1 {
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0f172a;
	margin: 0 0 8px;
}

.bal-auth-sub {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #66758a;
	margin: 0 0 22px;
}

/* A WordPress `wp_login_form()` a saját osztályait hozza — azokat igazítjuk. */
.bal-auth-card .login-username,
.bal-auth-card .login-password,
.bal-auth-card .login-remember {
	margin-bottom: 14px;
}

.bal-auth-card label {
	display: block;
	font-size: 0.85rem;
	font-weight: 620;
	color: #334155;
	margin-bottom: 6px;
}

.bal-auth-card input[type="text"],
.bal-auth-card input[type="email"],
.bal-auth-card input[type="password"] {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #e2eaf0;
	border-radius: 0.9rem;
	background: #fff;
	color: #0f172a;
	font-size: 0.925rem;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bal-auth-card input:focus {
	border-color: var(--bal-green);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.bal-auth-card input[type="checkbox"] {
	accent-color: var(--bal-green);
	margin-right: 7px;
}

.bal-auth-card .login-remember label {
	display: flex;
	align-items: center;
	font-weight: 500;
	color: #52606f;
}

.bal-auth-card .button-primary,
.bal-auth-card input[type="submit"],
.bal-auth-card #bal-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin-top: 6px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--bal-grad);
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 680;
	cursor: pointer;
	box-shadow: 0 11px 22px rgba(37, 99, 235, 0.18), inset 0 1px rgba(255, 255, 255, 0.22);
	transition: transform 0.16s, box-shadow 0.16s;
}

.bal-auth-card .button-primary:hover,
.bal-auth-card input[type="submit"]:hover,
.bal-auth-card #bal-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.5);
}

.bal-auth-links {
	margin: 16px 0 0;
	text-align: center;
	font-size: 0.88rem;
}

.bal-auth-links a {
	color: #66758a;
	text-decoration: none;
	transition: color 0.16s;
}

.bal-auth-links a:hover {
	color: var(--bal-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bal-auth-bottom {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid #eef2f6;
	text-align: center;
	font-size: 0.9rem;
	color: #66758a;
}

.bal-auth-bottom a {
	color: var(--bal-green-deep);
	font-weight: 700;
	text-decoration: none;
}

.bal-auth-bottom a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A WordPress bejelentkezési hibaüzenete */
.bal-auth-card .message,
.bal-auth-card #login_error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left-width: 4px;
	border-radius: 12px;
	padding: 12px 16px;
	color: #b91c1c;
	font-size: 0.9rem;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   2. 404 OLDAL
   --------------------------------------------------------------------------- */

.bal-404 {
	text-align: center;
	max-width: 640px;
	margin: clamp(30px, 7vw, 90px) auto;
}

.bal-404-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 74px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #0f172a;
	color: #6ee7b7;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 22px;
}

.bal-404 h1 {
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #0f172a;
	margin: 0 0 14px;
}

.bal-404 p {
	font-size: 1rem;
	line-height: 1.7;
	color: #66758a;
	margin: 0 auto 26px;
	max-width: 480px;
}

.bal-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   3. ÁLTALÁNOS SEGÉD-ELEMEK
   --------------------------------------------------------------------------- */

.bal-embed {
	width: 100%;
}

.bal-empty {
	text-align: center;
	max-width: 620px;
	margin: clamp(30px, 6vw, 80px) auto;
}

.bal-empty h1 {
	margin-bottom: 12px;
}

.bal-empty code {
	background: #f1f5f9;
	padding: 2px 7px;
	border-radius: 5px;
	font-size: 0.9em;
}

/* A gomb-osztályok, mint a landingnél */
.bal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 680;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}

.bal-btn--primary {
	color: #fff;
	background: var(--bal-grad);
	box-shadow: 0 11px 22px rgba(37, 99, 235, 0.18), inset 0 1px rgba(255, 255, 255, 0.22);
}

.bal-btn--primary:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.5);
	text-decoration: none;
}

.bal-btn--secondary {
	color: #334155;
	background: rgba(255, 255, 255, 0.72);
	border-color: #e2eaf0;
	box-shadow: 0 5px 14px rgba(22, 42, 70, 0.035);
}

.bal-btn--secondary:hover {
	color: #334155;
	transform: translateY(-1px);
	border-color: #a7f3d0;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   3/b. GOOGLE-BEJELENTKEZÉS
   A Tutor `social-login` addonja szúrja be a Google Identity Service gombját.
   A plugin a saját <style>-ját az oldal TÖRZSÉBE írja, ezért az felülírja a
   fejlécből betöltött szabályainkat — a `.bal-auth-card` őssel adunk nagyobb
   specificitást, `!important` nélkül.

   A gomb helyét a `functions.php` → `balance_google_button_placement()`
   igazítja (a Tutor a `tutor_after_registration_form_wrap` hookkal az űrlap
   UTÁN szúrja be, ezért kerül alulra). Itt csak a megjelenés van.
   --------------------------------------------------------------------------- */

.bal-auth-divider {
	/* A „vagy" ugyanabban a 300px-es sávban, mint a Google gomb — lásd lentebb. */
	--bal-social-band: 300px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(var(--bal-social-band), 100%);
	margin: 22px auto 2px;
	color: #8a99ab;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bal-auth-divider::before,
.bal-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5ecf3;
}

.bal-auth-divider span {
	padding: 0 12px;
}

/* A Google konténer. A DOM-sorrendet a `functions.php` állítja be, ezért itt
   csak a megjelenés van — `order`-t szándékosan NEM használunk, mert a szülő
   blokk-szintű, ott hatástalan lenne, egy flex szülőben viszont váratlanul
   átrendezné az oldalt. */
#tutor-pro-social-authentication.tutor-social-authentication {
	display: flex;
	flex-direction: column;
	padding-top: 18px;
	border-top: 0;
}

.bal-auth-card #tutor-pro-social-authentication {
	align-items: center;
}

/* ── A GOMB SARKAI — ⚠️⚠️ NEM SZABAD LEVÁGNI (MÉRVE 2026-10-11) ───────────
   Itt korábban ez állt:

       #tutor-pro-social-authentication,
       #tutor-pro-google-authentication,
       #tutor-pro-google-authentication > div {
           border-radius: var(--bal-social-radius);   // 6px / 14px
           overflow: hidden;
       }

   A szándék az volt, hogy a Google gombja a szomszédos gombok sugarát kapja.
   Ez azonban **NEM MŰKÖDHET**, és a gomb sarkait levágta:

     • A Google gombja egy IFRAME-ben él (más domain), ezért belülről NEM
       érhető el — sugarat adni neki csak **levágással** (körbevágással)
       lehetne.
     • A `#tutor-pro-google-authentication > div` (a Google wrapper-e)
       **pontosan a látható gomb doboza** (300×40 px). A rajta lévő
       `border-radius: 14px` + `overflow: hidden` ezért a gomb SAJÁT
       sarkaiba vágott bele.

   **Mérve (éles, a sorok tinta-térképe):** a felső és az alsó keret-vonal
   csak `x=13`-tól indult `x=363`-ig — a 376 px széles képen **13-13 px
   hiányzott mindkét oldalon**, és a függőleges keretek sem értek össze a
   sarkokban. Ez a „le van vágva a gomb sarka".

   Ezért a levágás MINDEN szinten megszűnik: a Google gombja a saját
   (hivatalos, 4px-es) sarkával jelenik meg, érintetlenül. Ha a GSI a jövőben
   a dokumentumba rajzolja a gombot (FedCM), akkor a `balance-gomb.css`
   egységes szabálya ad neki sugarat — az elem saját sugarát festi, nem vág. */
#tutor-pro-social-authentication,
#tutor-pro-google-authentication,
#tutor-pro-google-authentication > div {
	border-radius: 0;
	overflow: visible;
}

/* ── ZÁROLVA, AMÍG A NÉV ÜRES ─────────────────────────────────────────────
   A Google-regisztrációnál a `first_name` / `last_name` kötelező. A gomb
   viszont az űrlapon KÍVÜL van, ezért a natív érvényesítés nem éri el — a
   kattintást a `functions.php` fogja el, itt csak láttatjuk, hogy zárolva van.

   Az `inert` tulajdonság a modern böngészőkben maga is tiltja a kattintást és
   a fókuszt; a `.is-locked` a tartalék a régieknek, és a halványítás is ez adja. */
#tutor-pro-social-authentication.is-locked {
	opacity: 0.5;
	filter: grayscale(0.35);
	pointer-events: none;
	cursor: not-allowed;
}

/* A zárolt gomb fölötti magyarázat. Csak akkor látszik, ha a nevek üresek.
   A szélesség a gomb 300px-es sávjához igazodik, és `margin: auto`-val
   középre ül — ezért a margó itt EGYBEN tartalmazza a vízszintes `auto`-t. */
.bal-social-hint {
	width: min(300px, 100%);
	/* ⚠️ `!important` KELL: a `.bal-content p { margin: 0 0 1.1em }`
	   (balance-tutor.css) specifikusabb, mint ez az egyosztályos szabály, ezért
	   nélküle a vízszintes `auto` nem érvényesül, és a szöveg balra tapad
	   (mérve: marginLeft 0px az `auto` helyett). Itt egy általános
	   bekezdés-szabályt írunk felül egy konkrét komponensen — erre való. */
	margin: 0 auto 14px !important;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
}

.bal-social-hint[hidden] {
	display: none;
}

/* A `vagy` elválasztó a gomb ALATT, az űrlap előtt — a regisztráción.
   ⚠️ A vízszintes margó `auto` KELL: ha itt `0` áll, ez a szabály (két osztály
   + gyerek-kombinátor, azaz specifikusabb) felülírja a `.bal-auth-divider`
   `margin: auto`-ját, és az elválasztó a konténer bal szélére tapad
   (mérve: 109px eltérés a gomb közepétől). */
.tutor-card > .bal-auth-divider {
	margin: 18px auto 16px;
}

/* ── KÉTMÓDUSÚ REGISZTRÁCIÓ: választó, névbekérő ─────────────────────────
   Alapból a Google-ág aktív: a hét mezős űrlap rejtve, helyette egy rövid
   névbekérő. Az „E-mail" gombra váltva jön elő a teljes űrlap.
   A logika a `functions.php` → `balance_google_button_placement()`. */

.bal-method-chooser {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	width: min(470px, 100%);
	margin: 0 auto 20px;
}

.bal-method-btn {
	flex: 1 1 200px;
	min-width: 0;
	padding: 13px 18px;
	border: 1.5px solid #e2eaf0;
	border-radius: 14px;
	background: #fff;
	color: #334155;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .16s, box-shadow .16s, background .16s, transform .16s;
}

.bal-method-btn:hover {
	transform: translateY(-1px);
	border-color: #a7f3d0;
	box-shadow: 0 8px 20px rgba(22, 42, 70, 0.06);
}

.bal-method-btn.is-selected {
	border-color: var(--bal-green);
	background: #f0fdf9;
	color: #065f46;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10);
}

.bal-method-btn:focus-visible {
	outline: 2px solid var(--bal-green);
	outline-offset: 2px;
}

/* A névbekérő — a Google-ágon ez helyettesíti a hét mezős űrlapot. */
.bal-name-prompt {
	width: min(470px, 100%);
	margin: 0 auto 18px;
	padding: 20px 22px 22px;
	border: 1.5px solid #e2eaf0;
	border-radius: 16px;
	background: #fbfdfe;
}

.bal-name-prompt-title {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	text-align: center;
}

.bal-name-field {
	margin: 0 0 14px;
}

.bal-name-field:last-child {
	margin-bottom: 0;
}

.bal-name-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #475569;
}

.bal-name-field input {
	width: 100%;
	padding: 0.75rem 0.95rem;
	border: 1.5px solid var(--bal-line-strong);
	border-radius: 0.9rem;
	background: #fff;
	color: var(--bal-ink);
	font-family: inherit;
	font-size: 0.925rem;
	line-height: 1.5;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.bal-name-field input:focus {
	border-color: var(--bal-green);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* A Google-gomb konténere a választó ALATT ül, ezért a felső margó fölösleges. */
.bal-google-mode #tutor-pro-google-authentication,
.bal-google-mode .bal-social-hint {
	display: block;
}

/* A rejtett űrlap ne foglaljon helyet, de a mezői maradjanak a DOM-ban. */
.bal-google-mode#tutor-registration-form[hidden] {
	display: none;
}

/* A megerősítő gomb — csak akkor jelenik meg, ha a Google-ból jött név.
   Ilyenkor a Google-gomb eltűnik, és ez veszi át a helyét. */
.bal-name-confirm {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 13px 18px;
	border: 0;
	border-radius: 14px;
	background: var(--bal-grad);
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 680;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 11px 22px rgba(37, 99, 235, 0.18), inset 0 1px rgba(255, 255, 255, 0.22);
	transition: transform .16s, box-shadow .16s;
}

.bal-name-confirm:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.5);
}

.bal-name-confirm[hidden] {
	display: none;
}

/* Megerősítés közben a panel kiemelve — ilyenkor a labelek olvashatók. */
.bal-name-prompt.is-confirming {
	border-color: #a7f3d0;
	background: #f0fdf9;
}

/* A `vagy` elválasztó a Google-ágon fölösleges (nincs mit elválasztani). */
.bal-google-mode .bal-auth-divider {
	display: none;
}

/* ── A REGISZTRÁCIÓS CONSENT (a pipa + a két jogi link) ───────────────────
   A pipa a szöveg MELLETT van, bal oldalon — a szöveg közvetlenül UTÁNA
   kezdődik. A Tutor saját `.tutor-form-check` szabálya `space-between`-et
   használ, ami a szöveget a jobb szélre tolja, ezért azt felül kell írni.

   A tördelést (`nowrap`) azért engedjük, hogy a szöveg a pipa mellett maradjon;
   a hosszú szöveg a `min-width: 0` + `flex: 1 1 auto` miatt szűkül, nem törik. */
.bal-content .tutor-form-check.tutor-d-flex,
.tutor-form-check.tutor-d-flex {
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}

.tutor-form-check.tutor-d-flex > .tutor-label {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
	text-align: left;
}

/* A pipa a saját helyén marad, és nem nyomódik össze. */
.tutor-form-check.tutor-d-flex > .tutor-checkbox {
	flex: 0 0 auto;
}

/* ── IGAZÍTÁS AZ ŰRLAPHOZ ─────────────────────────────────────────────────
   A regisztráción a Google-konténer az űrlap TESTVÉRE, ezért a szülő belső
   margóját kapja — az űrlap viszont SAJÁT belső margót is hozhat
   (`.tutor-p-8` = 24px). Ezért a gomb kilóghat.

   ⚠️ Ezt NEM lehet fix értékkel megoldani: a diák-regisztráción az űrlapon van
   24px belső margó, az oktatóin NINCS (mérve: 470px vs 486px széles űrlap).
   Ezért a margót a `functions.php` → `balance_google_button_placement()`
   állítja be, az űrlap SAJÁT belső margójából számolva. */

/* ── A GOOGLE GOMB KÖZÉPRE ZÁRÁSA ─────────────────────────────────────────
   A Google Identity Service a gombot **fix méretre** rajzolja (mért inline
   stílus `size: large`, `width: 300` kérésre:
   `height: 44px; width: 320px; margin: -2px -10px;`).

   ⚠️⚠️ MÉRVE 2026-10-11 — A `-10px` a Google BELSŐ kompenzációja, NEM hiba:
   a LÁTHATÓ gomb 300px, az iframe 320px, és a 10-10px a két szélén átlátszó.
   Ezért a látható gomb akkor van egy vonalban a wrapperrel, ha a `-10px`
   margó MEGMARAD, és az iframe a wrapperen 10px-rel kifuthat.

   Korábban ezt a margót nulláztuk, és a konténer `min(300px, 100%)` volt —
   így az iframe 320px-ről 300px-re **zsugorodott**, a látható gomb 10px-rel
   elcsúszott, a jobb széle pedig **levágódott** (a `max-width: 100%` és az
   `overflow: hidden` miatt). Szűk nézetben (mérve 128px-es konténer) a gomb
   nagy része eltűnt — ez volt a „fura gomb”.

   A megoldás: a konténer teljes szélességű (nem zárja 300px-re a gombot),
   a Google saját méretén marad, és középre ül. A `width: fit-content` wrapper
   ezért szükséges: enélkül nincs felesleges hely, amit középre lehetne tenni.

   A wrapper szélessége = az iframe margó-doboza = a LÁTHATÓ gomb szélessége
   (300px) — ezért a „vagy" elválasztó és a magyarázat 300px-es sávja továbbra
   is pontosan a gombhoz igazodik. */
#tutor-pro-google-authentication {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 44px;
	margin: 0 auto 18px;
	overflow: visible;
}

#tutor-pro-google-authentication > div {
	width: fit-content !important;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ⚠️ Az iframe `-10px` margóját NEM nullázzuk (lásd fentebb), ezért a
   `max-width`-nek engednie kell a 10-10px kifutást: `calc(100% + 20px)`.
   Így széles nézetben az iframe a saját 320px-én marad, szűk nézetben
   pedig arányosan zsugorodik (nem vágódik le). */
#tutor-pro-google-authentication iframe {
	display: block;
	width: auto;
	max-width: calc(100% + 20px);
}

/* Ha a Google betöltése lassú vagy hibára fut, a 44px ne maradjon üresen. */
#tutor-pro-google-authentication:empty {
	min-height: 0;
}

/* ---------------------------------------------------------------------------
   4. MOBIL
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bal-auth {
		grid-template-columns: minmax(0, 1fr);
	}
	.bal-auth-aside {
		order: 2;
	}
	.bal-auth-card {
		order: 1;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   UGYANAZ A GOMB-ANIMÁCIÓ az itteni és a Tutor kék-zöld gombjaira
   ═══════════════════════════════════════════════════════════════════
   ⚠ Ez a stíluslap töltődik be UTOLJÁRA a
     shell → landing → tutor → auth  sorrendben
     (`functions.php` → `balance_enqueue_assets`), ezért kerül IDE a szabály:
     a gombok `background` shorthandje később nem állítja vissza a
     `background-size`-t `auto`-ra, így a csúszásnak lesz mit mozgatnia.

   ⚠ A `.bal-content .bal-btn--primary` a `balance-tutor.css`-ban van (0,2,0)
     specificitással, ezért itt UGYANAZZAL a specificitással szerepel.
   ⚠ A színek változatlanok (`--bal-grad`), csak a csúszás jön hozzá.
   ═══════════════════════════════════════════════════════════════════ */

.bal-auth-card .button-primary,
.bal-auth-card #bal-submit,
.bal-btn--primary,
.bal-content .bal-btn--primary,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary {
	background-size: 220% 220%;
	background-position: 0% 50%;
	transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
}

.bal-auth-card .button-primary:hover,
.bal-auth-card #bal-submit:hover,
.bal-btn--primary:hover,
.bal-content .bal-btn--primary:hover,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary:hover {
	background-position: 100% 50%;
	box-shadow: 0 14px 32px -10px #2563eb80;
}

.bal-auth-card .button-primary:active,
.bal-auth-card #bal-submit:active,
.bal-btn--primary:active,
.bal-content .bal-btn--primary:active,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary:active { transform: translateY(0) }

@media (prefers-reduced-motion: reduce) {
	.bal-auth-card .button-primary,
	.bal-auth-card #bal-submit,
	.bal-btn--primary,
	.bal-content .bal-btn--primary,
	.bal-content .tutor-single-course-sidebar .tutor-btn-primary { transition: none }
}