/* ==========================================================================
   Autentificare + creare cont client
   ========================================================================== */

/*
 * Ecran complet, poză + formular unul lângă altul — găsit în audit UX
 * (2026-09-25): înainte, poza (max 440/720px) stătea deasupra unui formular
 * centrat într-un container de 760px, cu spațiu mort enorm pe ecrane late.
 * Pe mobil, poza devine o bandă orizontală edge-to-edge deasupra formularului;
 * de la 900px în sus, cele două stau în coloane egale, poza rămâne fixă
 * (`sticky`) cât timp formularul lung (înregistrare profesionist) scrolează.
 */
.jp-authpage {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.jp-authpage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: calc(100vh - var(--jp-header-h));
	}
}

.jp-authpage__media {
	position: relative;
	height: 200px;
	overflow: hidden;
	background: var(--jp-ink-100);
}

.jp-authpage__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jp-authpage__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 15, 40, 0) 55%, rgba(16, 15, 40, .35) 100%);
}

@media (min-width: 900px) {
	.jp-authpage__media {
		position: sticky;
		top: var(--jp-header-h);
		height: calc(100vh - var(--jp-header-h));
	}
}

.jp-authpage__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--jp-s7) var(--jp-s5);
}

@media (min-width: 1024px) {
	.jp-authpage__panel { padding: var(--jp-s9) var(--jp-s7); }
}

.jp-authform {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	padding: var(--jp-s6);
	background: var(--jp-white);
	border: 1px solid var(--jp-ink-100);
	border-radius: var(--jp-r-xl);
	box-shadow: var(--jp-sh-2);
}

.jp-authform__title {
	width: 100%;
	max-width: 440px;
	margin: 0 auto var(--jp-s5);
	font-size: var(--jp-fs-h2);
}

/* Înregistrare profesionist: formularul (.jp-proform) e mai lat (720px) —
   titlul și panoul îl urmează, ca să nu pară un formular scurt rătăcit
   într-o coloană lată. */
.jp-authpage__panel--wide .jp-authform__title,
.jp-authpage__panel--wide .jp-proform { max-width: 720px; }

.jp-authform__lead {
	margin: 0 0 var(--jp-s5);
	color: var(--jp-ink-500);
	font-size: var(--jp-fs-small);
}

.jp-authform__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--jp-s3);
}

.jp-authform__lost {
	font-size: var(--jp-fs-small);
	color: var(--jp-primary-600);
	text-decoration: none;
}

.jp-authform__lost:hover { text-decoration: underline; }

.jp-authform__foot {
	margin-top: var(--jp-s6);
	padding-top: var(--jp-s5);
	border-top: 1px solid var(--jp-ink-100);
	text-align: center;
	font-size: var(--jp-fs-small);
	color: var(--jp-ink-500);
}

.jp-authform__foot p {
	margin: 0 0 var(--jp-s2);
}

.jp-authform__foot p:last-child { margin-bottom: 0; }

.jp-authform__foot a {
	color: var(--jp-primary-600);
	font-weight: 600;
	text-decoration: none;
}

.jp-authform__foot a:hover { text-decoration: underline; }

/* ---------- Preferințe de email ---------- */
/* Pagina se deschide dintr-un email, deci adesea pe telefon și de către cineva
   care vrea să termine în două secunde: o listă, fără decor. */
.jp-prefs {
	max-width: 620px;
	margin-inline: auto;
}

.jp-prefs__who {
	color: var(--jp-ink-500);
}

.jp-prefs__list {
	margin: var(--jp-s5) 0;
	padding: 0;
	list-style: none;
}

.jp-prefs__item + .jp-prefs__item {
	margin-top: var(--jp-s3);
}

.jp-prefs__row {
	display: flex;
	align-items: flex-start;
	gap: var(--jp-s3);
	padding: var(--jp-s4);
	border: 1px solid var(--jp-ink-300);
	border-radius: var(--jp-r-md);
	background: var(--jp-white);
	cursor: pointer;
}

.jp-prefs__row:hover {
	border-color: var(--jp-primary-500);
}

.jp-prefs__row input[type="checkbox"] {
	margin-top: 3px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--jp-primary-600);
}

.jp-prefs__label {
	display: block;
	color: var(--jp-ink-700);
}

.jp-prefs__desc {
	display: block;
	margin-top: 2px;
	font-size: var(--jp-fs-small);
	line-height: 1.5;
	color: var(--jp-ink-500);
}

.jp-prefs__note {
	padding: var(--jp-s3) var(--jp-s4);
	border-radius: var(--jp-r-md);
	background: var(--jp-ink-50);
	font-size: var(--jp-fs-small);
	line-height: 1.6;
	color: var(--jp-ink-500);
}