:root {
	--wkgb-accent: #3858e9;
	--wkgb-accent-dark: #2844c7;
	--wkgb-border: #dce2ea;
	--wkgb-muted: #667085;
	--wkgb-text: #202938;
}

body.login {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px;
	min-height: 100svh;
	padding: 32px 16px !important;
	background:
		radial-gradient(circle at 20% 15%, rgba(56, 88, 233, .08), transparent 30%),
		linear-gradient(145deg, #f8faff 0%, #eef2f7 100%) !important;
	color: var(--wkgb-text);
}

body.login #login {
	flex: 0 0 auto;
	width: 440px !important;
	max-width: 100%;
	margin: 0 auto !important;
	padding: 30px 32px 26px !important;
	border: 1px solid rgba(216, 223, 233, .95) !important;
	border-radius: 18px !important;
	background: rgba(255, 255, 255, .98) !important;
	box-shadow: 0 22px 60px rgba(29, 42, 67, .14) !important;
}

body.login #login h1 {
	margin: 0 0 22px !important;
}

body.login #login h1 a {
	width: 154px !important;
	height: 56px !important;
	margin: 0 auto !important;
	background-position: center !important;
	background-size: contain !important;
}

body.login #login form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.login #login label {
	font-size: 14px;
	font-weight: 550;
	color: var(--wkgb-text);
}

body.login #login .input,
body.login #login input[type="text"],
body.login #login input[type="email"],
body.login #login input[type="password"] {
	width: 100%;
	min-height: 48px;
	margin: 7px 0 16px;
	padding: 9px 12px;
	border: 1px solid #c7d0dd;
	border-radius: 9px;
	background: #fff;
	font-size: 16px;
	box-shadow: none;
}

body.login #login .input:focus,
body.login #login input[type="text"]:focus,
body.login #login input[type="email"]:focus,
body.login #login input[type="password"]:focus {
	border-color: var(--wkgb-accent);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, .14);
}

body.login #login .message,
body.login #login .notice,
body.login #login #login_error {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-width: 0 0 0 4px;
	border-radius: 7px;
	background: #f6f8ff;
	box-shadow: none;
}

.wkgb-social-login {
	display: grid;
	gap: 10px;
	width: 320px;
	max-width: 100%;
	margin: 0 auto;
}

body.login #login .wkgb-social-login > *,
body.login #login .wkgb-social-login .xlite-login-wrap,
body.login #login .wkgb-social-login .text-center.my-3,
body.login #login .wkgb-social-login #wptelegram-login-wrap {
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
}

body.login #login .wkgb-social-login .xlite-login-button,
body.login #login .wkgb-social-login .text-center.my-3 > a,
body.login #login .wkgb-social-login a[href*="github.com/login/oauth"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	max-width: none !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 9px 15px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
}

body.login #login .wkgb-social-login .text-center.my-3 > a,
body.login #login .wkgb-social-login a[href*="github.com/login/oauth"] {
	border: 1px solid #c7d0dd !important;
	background: #fff !important;
	color: var(--wkgb-text) !important;
}

body.login #login .wkgb-social-login .text-center.my-3 > a:hover,
body.login #login .wkgb-social-login a[href*="github.com/login/oauth"]:hover {
	border-color: #98a5b7 !important;
	background: #f8fafc !important;
}

body.login #login .wkgb-social-login .text-center.my-3 img,
body.login #login .wkgb-social-login a[href*="github.com/login/oauth"] img {
	width: 21px;
	height: 21px;
	margin: 0;
}

body.login #login .wkgb-social-login .googlesitekit-sign-in-with-google__frontend-output-button,
body.login #login .wkgb-social-login .googlesitekit-sign-in-with-google__frontend-output-button > div,
body.login #login .wkgb-social-login .googlesitekit-sign-in-with-google__frontend-output-button > div > div {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

body.login #login .wkgb-social-login #wptelegram-login-wrap {
	padding-top: 1px;
	text-align: center;
}

body.login #login .wkgb-social-login .wptelegram-login-or {
	display: none !important;
}

body.login #login .wkgb-social-login .wptelegram-login-output-wrap,
body.login #login .wkgb-social-login iframe[src*="telegram"] {
	display: block;
	margin: 0 auto !important;
}

.wkgb-login-divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 11px;
	margin: 19px 0;
	color: var(--wkgb-muted);
}

.wkgb-login-divider span {
	height: 1px;
	background: var(--wkgb-border);
}

.wkgb-login-divider b {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

body.login #login .cf-turnstile,
body.login #login [id*="cf-turnstile"],
body.login #login iframe[src*="challenges.cloudflare.com"] {
	display: block;
	max-width: 100%;
	margin: 10px auto !important;
}

body.login #login .forgetmenot {
	float: none;
	margin: 13px 0;
}

body.login #login .submit {
	float: none;
	clear: both;
	margin: 13px 0 0;
}

body.login #login #wp-submit {
	float: none;
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 9px;
	background: var(--wkgb-accent);
	font-size: 15px;
	font-weight: 650;
}

body.login #login #wp-submit:hover,
body.login #login #wp-submit:focus {
	background: var(--wkgb-accent-dark);
}

body.login #login #nav,
body.login #login #backtoblog,
body.login #login .privacy-policy-page-link {
	margin: 17px 0 0;
	padding: 0;
	text-align: center;
}

body.login #login #nav a,
body.login #login #backtoblog a {
	color: #526071;
}

body.login .language-switcher {
	flex: 0 0 auto;
	width: 440px;
	max-width: 100%;
	margin: 0 auto !important;
	text-align: center;
}

body.login .language-switcher form {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

@media (max-width: 480px) {
	body.login {
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 16px 12px !important;
	}

	body.login #login {
		width: 100% !important;
		padding: 24px 19px 22px !important;
		border-radius: 14px !important;
	}

	body.login .language-switcher {
		width: 100%;
	}
}

@media (max-height: 760px) and (min-width: 481px) {
	body.login {
		justify-content: flex-start !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.login *,
	body.login *::before,
	body.login *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}