/*
 * RE Login — brand chrome on top of parent's baseline login assets.
 * Loaded only on /login/ via odr_login_assets_enqueue.
 *
 * intlTelInput layout + password-strength bar live in
 * omak-dash/theme/admin/login.css. We only re-skin the visible bits.
 */

:root {
	--re-primary: #0cbd18;
	--re-primary-hover: #0aa215;
	--re-primary-tint: rgba(12, 189, 24, 0.12);

	/* Re-skin the strongest pw-meter tier with RE green so it lines up
	   with the rest of the page. The other tiers (red/amber/lime) stay
	   universal — those colors mean weak/fair/good regardless of brand. */
	--rel-login-pw-strong: var(--re-primary);
}

.login-block {
	background: linear-gradient(180deg, #f6fbf6 0%, #ffffff 60%);
	min-height: 100vh;
	min-height: 100dvh;
	padding-top: 2rem;
}

.login-block .auth-box.card {
	border-top: 3px solid var(--re-primary);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
}

.login-block h3 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.login-block .btn-primary {
	background-color: var(--re-primary);
	border-color: var(--re-primary);
}

.login-block .btn-primary:hover,
.login-block .btn-primary:focus {
	background-color: var(--re-primary-hover);
	border-color: var(--re-primary-hover);
	box-shadow: 0 0 0 0.18rem var(--re-primary-tint);
}

.login-block .btn-link {
	color: var(--re-primary);
	text-decoration: none;
}
.login-block .btn-link:hover,
.login-block .btn-link:focus {
	color: var(--re-primary-hover);
	text-decoration: underline;
}

.login-block .form-bar::before,
.login-block .form-bar::after {
	background-color: var(--re-primary);
}

.login-block .form-control:focus {
	border-color: var(--re-primary);
	box-shadow: 0 0 0 0.15rem var(--re-primary-tint);
}

/* "Helping Researchers" footer + back-to-website link — quieter, RE-branded. */
.login-block p.text-inverse a {
	color: var(--re-primary);
}

/* Google login button — RE-tone the hover so the page feels coherent. */
.login-block .btn-google-plus:focus,
.login-block .btn-google-plus:hover {
	box-shadow: 0 0 0 0.18rem var(--re-primary-tint);
}

/* App-download section padding tightened on mobile — currently steals the fold. */
@media (max-width: 575.98px) {
	.login-block .qr-trigger {
		padding: 8px 0;
	}
	.login-block .auth-box.card {
		margin: 0 0.5rem;
	}
}