/* Shared visual language for the auth + contact flow — Login, Register,
   VerifyOtp, Authentication, ConfirmAccount, Contact. .hero/.hero-card had
   zero CSS backing anywhere before this file: pure Bootstrap defaults, no
   design tokens, no radius/shadow system — despite being the first thing
   every new user sees (register → confirm → verify → log in) and the one
   other page (Contact) reachable from the More sheet. */

.hero {
	min-height: calc(100vh - var(--header-total) - var(--tabbar-reserve));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.hero-card {
	background: var(--color-surface);
	border: 1px solid var(--color-muted-stroke);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2);
	padding: 2.5rem;
	max-width: 560px;
	width: 100%;
	animation: authFadeInUp 0.5s ease-out;
}

.hero-card .logo-wrap {
	display: inline-block;
}

.hero-card .logo {
	height: 72px;
	width: 72px;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.hero-card h1 {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-text);
}

.hero-card h5 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
}

.hero-card p {
	color: var(--color-text-secondary);
}

/* The "OR" divider pill needs to sit on the card's own surface, not the page
   background behind it — Bootstrap's .bg-body resolves to the page bg. */
.hero-card .bg-body {
	background: var(--color-surface) !important;
}

.hero-card .vr {
	background-color: var(--color-muted-stroke);
	opacity: 1 !important;
}

.hero-card hr {
	border-color: var(--color-muted-stroke);
	opacity: 1;
}

.hero-card .form-control.rounded-pill {
	border-radius: 999px;
}

.hero-card .terms-link {
	color: var(--color-accent);
}

/* The secondary "New here? Create an account" / "Already have an account? Log
   in" link — deliberately lower-weight than the primary action above it, so
   the page reads as one clear default with an escape hatch, not two equal
   choices. */
.auth-switch {
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.auth-switch a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: none;
}

.auth-switch a:hover {
	text-decoration: underline;
}

/* Shared between VerifyOtp (sending the code) and ConfirmAccount (confirming
   the token) — both are "waiting on a server round trip before the card can
   show its real content" moments, so they share one spinner treatment. */
.otp-sending-spinner {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto;
	border: 3px solid var(--color-muted-stroke);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: otpSpin 0.8s linear infinite;
}

@keyframes otpSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.otp-sending-spinner {
		animation-duration: 2.5s;
	}
}

@keyframes authFadeInUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-card {
		animation: none;
	}
}

@media (max-width: 640px) {
	.hero-card {
		padding: 2rem 1.5rem;
	}

	.hero-card h1 {
		font-size: 1.5rem;
	}
}