/* =========================================================
   Riviera — Auth (login / registrazione)
   Dipende da 'riviera-components' -> eredita tutti i token rn-*.
   NON ridichiarare i :root token.
   ========================================================= */

.rn-auth {
	min-height: calc(100vh - var(--rn-header-h) - var(--rn-bottomnav-h));
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--rn-space-6) var(--rn-gutter) var(--rn-space-8);
	background: var(--rn-color-bg);
}

.rn-auth__card {
	width: 100%;
	max-width: 440px;
	background: var(--rn-color-surface);
	border: 1px solid var(--rn-border);
	border-radius: var(--rn-radius-lg);
	box-shadow: var(--rn-shadow-md);
	padding: var(--rn-space-6);
}

@media (min-width: 768px) {
	.rn-auth {
		align-items: center;
		padding-block: var(--rn-space-8);
	}
	.rn-auth__card { padding: var(--rn-space-7); }
}

.rn-auth__head {
	text-align: center;
	margin-bottom: var(--rn-space-6);
}

.rn-auth__eyebrow {
	display: block;
	font-family: var(--rn-font-sans);
	font-size: var(--rn-fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rn-gold-600);
	font-weight: var(--rn-fw-semibold);
	margin-bottom: var(--rn-space-2);
}

.rn-auth__title {
	font-family: var(--rn-font-display);
	font-size: var(--rn-fs-3xl);
	line-height: var(--rn-lh-tight);
	color: var(--rn-color-text);
	margin: 0 0 var(--rn-space-1);
}

.rn-auth__subtitle {
	font-size: var(--rn-fs-sm);
	color: var(--rn-color-text-muted);
	margin: 0;
}

.rn-auth__form { display: flex; flex-direction: column; gap: var(--rn-space-4); }

.rn-auth__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rn-space-4);
}
@media (min-width: 480px) {
	.rn-auth__row--2 { grid-template-columns: 1fr 1fr; }
}

/* Password field con toggle */
.rn-auth__pw { position: relative; }
.rn-auth__pw .rn-input { padding-right: 44px; }
.rn-auth__pw-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--rn-color-text-muted);
	cursor: pointer;
	border-radius: var(--rn-radius-sm);
}
.rn-auth__pw-toggle:hover { color: var(--rn-color-text); }
.rn-auth__pw-toggle svg { width: 20px; height: 20px; }

/* Messaggio globale (errore/successo) */
.rn-auth__alert {
	display: none;
	padding: var(--rn-space-3) var(--rn-space-4);
	border-radius: var(--rn-radius);
	font-size: var(--rn-fs-sm);
	line-height: var(--rn-lh-snug);
}
.rn-auth__alert.is-visible { display: block; }
.rn-auth__alert--error {
	background: color-mix(in srgb, var(--rn-color-danger) 10%, var(--rn-color-surface));
	border: 1px solid color-mix(in srgb, var(--rn-color-danger) 35%, transparent);
	color: var(--rn-color-danger);
}
.rn-auth__alert--success {
	background: color-mix(in srgb, var(--rn-color-success) 12%, var(--rn-color-surface));
	border: 1px solid color-mix(in srgb, var(--rn-color-success) 35%, transparent);
	color: var(--rn-color-success);
}

/* Riga opzioni (ricordami / password dimenticata) */
.rn-auth__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-space-3);
	font-size: var(--rn-fs-sm);
}
.rn-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-2);
	color: var(--rn-color-text-muted);
	cursor: pointer;
	user-select: none;
}
.rn-auth__remember input { width: 18px; height: 18px; accent-color: var(--rn-gold); }
.rn-auth__link {
	color: var(--rn-gold-600);
	text-decoration: none;
	font-weight: var(--rn-fw-medium);
}
.rn-auth__link:hover { text-decoration: underline; }

/* Footer della card (switch tra login/registrati) */
.rn-auth__foot {
	margin-top: var(--rn-space-5);
	text-align: center;
	font-size: var(--rn-fs-sm);
	color: var(--rn-color-text-muted);
}

/* Spinner dentro il bottone in submit */
.rn-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.rn-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	color: var(--rn-color-on-gold);
	animation: rn-auth-spin .6s linear infinite;
}
@keyframes rn-auth-spin { to { transform: rotate(360deg); } }

/* Hint sotto le password (forza) */
.rn-auth__pwhint { font-size: var(--rn-fs-xs); color: var(--rn-color-text-muted); margin-top: -2px; }