/* =============================================================================
   QR Feedback — hitelesítési oldalak (regisztráció, bejelentkezés)
   Két hasábos elrendezés: bal oldalon az űrlap, jobb oldalon bizalomépítő
   panel. Mobilon a panel a lényegre szűkül és az űrlap alá kerül.
   ========================================================================== */

.auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: start;
	padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}

@media (max-width: 940px) {
	.auth {
		grid-template-columns: 1fr;
	}
}

.auth__form-wrap {
	max-width: 480px;
	width: 100%;
	margin-inline: auto;
}

.auth__card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.auth__head {
	margin-bottom: var(--space-6);
}

.auth__head h1 {
	font-size: var(--step-3);
	margin-bottom: var(--space-2);
}

.auth__head p {
	color: var(--text-muted);
	font-size: var(--step--1);
}

.auth__form {
	margin-top: var(--space-5);
}

.auth__submit {
	margin-top: var(--space-6);
}

.auth__foot {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
	text-align: center;
	font-size: var(--step--1);
	color: var(--text-muted);
}

.auth__legal {
	margin-top: var(--space-5);
	font-size: .78rem;
	line-height: 1.6;
	color: var(--text-faint);
}

/* ---- Jelszó-erősség mérő ------------------------------------------------ */
.strength {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.strength__track {
	display: flex;
	gap: 5px;
}

.strength__track i {
	flex: 1;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--border);
	transition: background var(--transition);
}

.strength[data-score="1"] .strength__track i:nth-child(-n + 1) { background: var(--danger); }
.strength[data-score="2"] .strength__track i:nth-child(-n + 2) { background: var(--warning); }
.strength[data-score="3"] .strength__track i:nth-child(-n + 3) { background: var(--accent); }
.strength[data-score="4"] .strength__track i { background: var(--success); }

.strength__label {
	font-size: var(--step--1);
	color: var(--text-faint);
}

.strength__rules {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	font-size: .78rem;
	color: var(--text-faint);
}

.strength__rules li::before {
	content: "○ ";
	color: var(--text-faint);
}

.strength__rules li[data-ok="true"] {
	color: var(--success);
}

.strength__rules li[data-ok="true"]::before {
	content: "✓ ";
	color: var(--success);
}

/* ---- Oldalsó bizalmi panel ---------------------------------------------- */
.auth__aside {
	position: sticky;
	top: calc(var(--header-height) + var(--space-5));
	padding: clamp(var(--space-5), 4vw, var(--space-7));
	border-radius: var(--radius-xl);
	background:
		radial-gradient(700px 320px at 100% 0%, rgba(199, 154, 80, .22), transparent 65%),
		linear-gradient(155deg, var(--ink-800), var(--ink-950));
	color: #FFFFFF;
	box-shadow: var(--shadow-lg);
}

@media (max-width: 940px) {
	.auth__aside {
		position: static;
	}
}

.auth__aside h2 {
	font-size: var(--step-2);
	color: inherit;
	margin-bottom: var(--space-3);
}

.auth__aside > p {
	color: rgba(255, 255, 255, .84);
	font-size: var(--step--1);
	line-height: 1.7;
}

.auth__aside .check-list {
	margin-top: var(--space-5);
}

.auth__aside .check-list li {
	color: rgba(255, 255, 255, .88);
	font-size: var(--step--1);
}

.auth__aside .check-list svg {
	color: var(--gold-300);
}

/* A globális `strong { color: var(--text) }` sötét alapon olvashatatlan lenne. */
.auth__aside strong {
	color: #FFFFFF;
}

.auth__aside-quote {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: var(--step--1);
	line-height: 1.65;
	color: rgba(255, 255, 255, .88);
}

.auth__aside-quote span {
	display: block;
	margin-top: var(--space-3);
	color: rgba(255, 255, 255, .62);
	font-size: .78rem;
}

/* ---- Egyszerű, központosított állapotoldal (pl. e-mail megerősítés) ----- */
.status-page {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}

.status-page__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto var(--space-5);
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent-text);
}

.status-page__icon svg {
	width: 38px;
	height: 38px;
}

.status-page__icon--success {
	background: var(--success-soft);
	color: var(--success);
}

.status-page__icon--error {
	background: var(--danger-soft);
	color: var(--danger);
}

.status-page h1 {
	font-size: var(--step-3);
	margin-bottom: var(--space-3);
}

.status-page p {
	color: var(--text-muted);
	margin-bottom: var(--space-6);
}

.status-page .btn-row {
	justify-content: center;
}

/* ---- Intézményi tájékoztató a regisztrációs űrlapon --------------------- */
.auth__notice {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4);
	border-radius: var(--radius);
	background: var(--gold-soft);
	border: 1px solid var(--gold-line);
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.6;
}

.auth__notice svg {
	width: 22px;
	height: 22px;
	color: var(--gold-text);
}

/* Aloldali hivatkozások az oldalsáv alján */
.auth__aside-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: var(--step--1);
}

.auth__aside-links a {
	color: var(--gold-300);
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid rgba(224, 190, 126, .45);
}

.auth__aside-links a:hover {
	color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

/* Egyoszlopos auth-elrendezés (jelszó-oldalak, oldalsáv nélkül) */
.auth--single {
	grid-template-columns: 1fr;
}

/* Fiókoldal középre zárt panelje */
.account-panel {
	max-width: 720px;
	margin-inline: auto;
}

/* A hitelesítési oldalak sötét oldalsávján is látszódjon a link. */
.auth__aside .mail-link--onink {
	color: var(--gold-300);
}

.auth__aside .mail-link--onink:hover {
	color: #FFFFFF;
}