/* Login appearance only. Scoped so other website pages keep their own layout. */

body:has(#page-login) {
	background: var(--shr-color-page);
	font-family: var(--shr-font);
	color: var(--shr-color-text);
}

body:has(#page-login) .navbar,
body:has(#page-login) .web-footer {
	display: none;
}

body:has(#page-login) .page-content-wrapper {
	min-height: 100svh;
	padding: 48px 16px;
}

#page-login .for-login .page-card,
#page-login .for-forgot .page-card,
#page-login .for-signup .page-card,
#page-login .for-email-login .page-card,
#page-login .for-login-with-email-link .page-card {
	background: var(--shr-color-surface);
	border: var(--shr-border);
	border-radius: var(--shr-radius-panel);
	max-width: 420px;
	padding: 32px 24px;
	box-shadow: none;
}

#page-login .page-card-head h4 {
	color: var(--shr-color-text);
	font-size: 28px;
	font-weight: 650;
	letter-spacing: -0.4px;
}

#page-login .page-card-subtitle,
#page-login .sign-up-message,
#page-login .forgot-password-message {
	color: var(--shr-color-muted);
	font-size: 14px;
}

#page-login .form-control {
	min-height: var(--shr-touch);
	border: var(--shr-border);
	border-radius: var(--shr-radius-control);
	font-size: 16px;
	color: var(--shr-color-text);
}

#page-login .form-control:focus {
	border-color: var(--shr-color-primary);
	box-shadow: 0 0 0 3px var(--shr-color-focus);
}

#page-login .for-login .page-card .page-card-actions .btn-login,
#page-login .for-forgot .page-card .page-card-actions .btn-forgot,
#page-login .for-login-with-email-link .page-card .page-card-actions .btn-login {
	min-height: var(--shr-touch);
	background: var(--shr-color-primary);
	color: #fff;
	border: 0;
	border-radius: var(--shr-radius-control);
	font-size: 16px;
	font-weight: 600;
}

#page-login .for-login .page-card .page-card-actions .btn-login:hover,
#page-login .for-login .page-card .page-card-actions .btn-login:focus,
#page-login .for-forgot .page-card .page-card-actions .btn-forgot:hover,
#page-login .for-forgot .page-card .page-card-actions .btn-forgot:focus {
	background: var(--shr-color-primary);
	color: #fff;
}

#page-login .login-error-banner {
	color: var(--shr-color-danger);
	background: var(--shr-color-danger-bg);
}

#page-login a {
	color: var(--shr-color-primary);
}

@media (max-width: 480px) {
	body:has(#page-login) .page-content-wrapper {
		padding: 0;
	}

	#page-login .for-login .page-card,
	#page-login .for-forgot .page-card,
	#page-login .for-signup .page-card,
	#page-login .for-email-login .page-card,
	#page-login .for-login-with-email-link .page-card {
		min-height: 100svh;
		max-width: none;
		border: 0;
		border-radius: 0;
		padding: 48px 20px 32px;
	}
}