.xlite-login-wrap {
	margin: 16px 0;
	text-align: center;
}

.xlite-login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid #000;
	border-radius: 6px;
	background: #000;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: opacity .15s ease;
}

.xlite-login-button:hover,
.xlite-login-button:focus {
	opacity: .82;
	color: #fff !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

.xlite-x-mark {
	margin-right: 10px;
	font-size: 18px;
	font-weight: 700;
}

#login .xlite-login-button {
	width: 100%;
}

/*
 * Unified WordPress login layout.
 *
 * The selectors below intentionally apply only to body.login so the X login
 * shortcode keeps its original appearance on public pages. They also
 * normalize common wrappers used by Google, GitHub, Telegram and Turnstile
 * login plugins without depending on those plugins being active.
 */
body.login {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 32px 16px;
	background: #f3f5f8;
}

body.login * {
	box-sizing: border-box;
}

body.login #login {
	width: 420px;
	max-width: 100%;
	margin: 0;
	padding: 28px;
	border: 1px solid #e2e7ee;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(28, 39, 54, .12);
}

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

body.login #login h1 a {
	width: 180px;
	max-width: 100%;
	height: 58px;
	margin: 0 auto;
	background-size: contain;
}

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

body.login #login form > p,
body.login #login form > div {
	max-width: 100%;
}

body.login #login label {
	font-size: 14px;
	font-weight: 500;
	color: #273142;
}

body.login #login .input,
body.login #login input[type="text"],
body.login #login input[type="email"],
body.login #login input[type="password"] {
	min-height: 48px;
	margin: 6px 0 16px;
	padding: 8px 12px;
	border: 1px solid #c9d1dc;
	border-radius: 8px;
	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: #2271b1;
	box-shadow: 0 0 0 2px rgba(34, 113, 177, .18);
}

body.login #login .wp-pwd {
	margin-bottom: 4px;
}

body.login #login .wp-pwd .input {
	margin-bottom: 16px;
}

body.login #login .wp-pwd .button.wp-hide-pw {
	top: 6px;
	height: 48px;
}

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

body.login #login .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

body.login #login .forgetmenot input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
}

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

body.login #login .submit .button-primary,
body.login #login #wp-submit {
	float: none;
	width: 100%;
	min-height: 46px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
}

body.login #login .xlite-login-wrap {
	width: 100%;
	margin: 12px 0;
}

body.login #login .xlite-login-button {
	width: 100%;
	min-height: 48px;
	border-radius: 8px;
}

/* Login with GitHub currently outputs Bootstrap utility classes. */
body.login #login .text-center.my-3 {
	width: 100%;
	margin: 12px 0 !important;
	text-align: center;
}

body.login #login .text-center.my-3 > a.btn,
body.login #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: 48px;
	margin: 0 !important;
	padding: 10px 16px;
	border: 1px solid #20242a !important;
	border-radius: 8px;
	background: #fff;
	color: #20242a;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
}

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

/* Common Google Sign-In wrappers and their generated iframe. */
body.login #login #wp-login-google-login-button,
body.login #login .g_id_signin,
body.login #login [class*="google-login"],
body.login #login [class*="google_login"] {
	width: 100%;
	max-width: 100%;
	margin: 12px 0;
	text-align: center;
}

body.login #login #wp-login-google-login-button > div,
body.login #login .g_id_signin > div,
body.login #login .g_id_signin iframe {
	max-width: 100% !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Cloudflare Turnstile containers are normally 300px wide. */
body.login #login .cf-turnstile,
body.login #login [class*="turnstile"],
body.login #login iframe[src*="challenges.cloudflare.com"] {
	display: block;
	max-width: 100%;
	margin: 12px auto !important;
}

/* Telegram widgets render inside an iframe; center the iframe and wrapper. */
body.login #login [id*="telegram"],
body.login #login [class*="telegram"],
body.login #login iframe[src*="telegram"] {
	display: block;
	max-width: 100%;
	margin: 12px auto !important;
	text-align: center;
}

body.login #login .nsl-container,
body.login #login .mo-openid-app-icons {
	width: 100%;
	max-width: 100%;
	margin: 12px 0;
}

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

body.login .language-switcher {
	margin-top: 18px;
}

@media (max-width: 480px) {
	body.login {
		align-items: flex-start;
		padding: 18px 12px;
	}

	body.login #login {
		width: 100%;
		padding: 22px 18px;
		border-radius: 12px;
	}

	body.login #login h1 {
		margin-bottom: 18px;
	}
}