/*
 * OpenES login screens.
 * Loaded on wp-login.php and on the frontend /login/ page.
 */

:root {
	--oe-login-brand: #1f5f99;
	--oe-login-brand-dark: #173a5e;
	--oe-login-action: #273449;
	--oe-login-action-hover: #1f2a3b;
	--oe-login-accent: #2f9c87;
	--oe-login-bg: #f4f7fb;
	--oe-login-card: #ffffff;
	--oe-login-text: #172033;
	--oe-login-muted: #64748b;
	--oe-login-line: #d9e4ef;
	--oe-login-focus: 0 0 0 4px rgba(31, 95, 153, .16);
	--oe-login-content-offset: 64px;
}

html,
body.login {
	min-height: 100%;
	overflow: hidden;
}

body.login {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 48px 8vw;
	color: var(--oe-login-text);
	background:
		linear-gradient(135deg, rgba(244, 247, 251, .96), rgba(255, 255, 255, .88) 58%, rgba(233, 244, 240, .82)),
		var(--oe-login-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.openes-login-page,
body.openes-login-page.custom-background {
	overflow: hidden;
	color: var(--oe-login-text);
	background:
		linear-gradient(135deg, rgba(244, 247, 251, .96), rgba(255, 255, 255, .88) 58%, rgba(233, 244, 240, .82)),
		var(--oe-login-bg) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.login::before {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(48vw, 720px);
	content: "";
	background:
		linear-gradient(142deg, rgba(23, 58, 94, .98), rgba(31, 95, 153, .90) 58%, rgba(47, 156, 135, .84)),
		linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: auto, 64px 64px, 64px 64px;
	clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
	pointer-events: none;
}

body.openes-login-page #content.site-content::before {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: min(48vw, 720px);
	content: "";
	background:
		linear-gradient(142deg, rgba(23, 58, 94, .98), rgba(31, 95, 153, .90) 58%, rgba(47, 156, 135, .84)),
		linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: auto, 64px 64px, 64px 64px;
	clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
	pointer-events: none;
}

body.login::after {
	position: fixed;
	top: 34px;
	left: clamp(28px, 4vw, 72px);
	z-index: 0;
	width: 92px;
	height: 5px;
	border-radius: 999px;
	content: "";
	background: rgba(255, 255, 255, .78);
	box-shadow: 28px 18px 0 rgba(255, 255, 255, .32);
	pointer-events: none;
}

body.openes-login-page #content.site-content::after {
	position: absolute;
	top: 34px;
	left: clamp(28px, 4vw, 72px);
	z-index: 0;
	width: 92px;
	height: 5px;
	border-radius: 999px;
	content: "";
	background: rgba(255, 255, 255, .78);
	box-shadow: 28px 18px 0 rgba(255, 255, 255, .32);
	pointer-events: none;
}

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

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

body.openes-login-page #page,
body.openes-login-page .site-content-contain,
body.openes-login-page #content.site-content,
body.openes-login-page #content > .wrap,
body.openes-login-page #primary,
body.openes-login-page #main,
body.openes-login-page .site-main,
body.openes-login-page .entry-content {
	background: transparent !important;
}

body.openes-login-page #page,
body.openes-login-page .site-content-contain {
	max-height: 100vh;
	overflow: hidden;
}

body.openes-login-page #content.site-content {
	position: relative;
	min-height: calc(100vh - var(--oe-header-height, 68px)) !important;
	padding: 48px 8vw !important;
	overflow: hidden;
}

body.openes-login-page #content > .wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	min-height: calc(100vh - var(--oe-header-height, 68px) - 96px) !important;
	padding: 0;
}

body.openes-login-page #primary {
	position: relative;
	width: min(100%, 430px);
	max-width: 430px;
	margin: 0;
	padding: 0;
	transform: translateY(var(--oe-login-content-offset));
}

body.openes-login-page #main {
	padding: 0;
}

body.openes-login-page .entry-header,
body.openes-login-page .edit-link {
	display: none;
}

body.openes-login-page .entry-content {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.openes-login-page #primary::before {
	display: none;
}

body.openes-login-page #primary::after {
	display: none;
}

body.openes-login-page .entry-content::before {
	display: none;
}

body.openes-login-page .entry-content > .um,
body.openes-login-page .entry-content > form,
body.openes-login-page .entry-content #loginform {
	width: 100%;
	margin: 0 !important;
	padding: 30px !important;
	border: 1px solid rgba(217, 228, 239, .92) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, .96) !important;
	box-shadow: 0 22px 55px rgba(15, 23, 42, .14) !important;
	backdrop-filter: blur(14px);
}

body.openes-login-page .um .um-form {
	margin: 0 !important;
	padding: 0 !important;
}

body.login #login {
	position: relative;
	z-index: 1;
	width: min(100%, 430px);
	margin: 0;
	padding: 0;
	transform: translateY(var(--oe-login-content-offset));
}

body.login #login h1 {
	display: none;
}

body.login #login h1 a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	width: auto;
	margin: 0;
	padding: 0 0 0 58px;
	color: var(--oe-login-text);
	background: none;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-indent: 0;
	text-decoration: none;
}

body.login #login h1 a::before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	content: "";
	background:
		linear-gradient(135deg, var(--oe-login-brand), var(--oe-login-accent));
	box-shadow: 0 14px 28px rgba(31, 95, 153, .26);
}

body.login #login h1 a::after {
	position: absolute;
	top: 16px;
	left: 14px;
	width: 16px;
	height: 16px;
	border: 3px solid #ffffff;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	content: "";
	transform: rotate(-35deg);
}

body.login form {
	margin: 0;
	padding: 30px;
	border: 1px solid rgba(217, 228, 239, .92);
	border-radius: 8px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
	backdrop-filter: blur(14px);
}

body.login label {
	margin-bottom: 8px;
	color: var(--oe-login-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.35;
}

body.openes-login-page .entry-content label,
body.openes-login-page .um .um-field-label label,
body.openes-login-page .um-field-checkbox-option,
body.openes-login-page .um-field-radio-option {
	margin-bottom: 8px !important;
	color: var(--oe-login-text) !important;
	font-size: 13px !important;
	font-weight: 650 !important;
	line-height: 1.35 !important;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	min-height: 46px;
	margin: 6px 0 16px;
	padding: 10px 13px;
	border: 1px solid var(--oe-login-line);
	border-radius: 7px;
	color: var(--oe-login-text);
	background: #fbfdff;
	font-size: 15px;
	line-height: 1.35;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.openes-login-page .entry-content input[type="text"],
body.openes-login-page .entry-content input[type="password"],
body.openes-login-page .entry-content input[type="email"],
body.openes-login-page .um .um-form input[type="text"],
body.openes-login-page .um .um-form input[type="password"],
body.openes-login-page .um .um-form input[type="email"] {
	width: 100% !important;
	min-height: 46px !important;
	margin: 6px 0 16px !important;
	padding: 10px 13px !important;
	border: 1px solid var(--oe-login-line) !important;
	border-radius: 7px !important;
	color: var(--oe-login-text) !important;
	background: #fbfdff !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: rgba(31, 95, 153, .66);
	background: #ffffff;
	box-shadow: var(--oe-login-focus);
	outline: none;
}

body.openes-login-page .entry-content input[type="text"]:focus,
body.openes-login-page .entry-content input[type="password"]:focus,
body.openes-login-page .entry-content input[type="email"]:focus,
body.openes-login-page .um .um-form input[type="text"]:focus,
body.openes-login-page .um .um-form input[type="password"]:focus,
body.openes-login-page .um .um-form input[type="email"]:focus {
	border-color: rgba(31, 95, 153, .66) !important;
	background: #ffffff !important;
	box-shadow: var(--oe-login-focus) !important;
	outline: none !important;
}

body.login .button.wp-hide-pw {
	top: 4px;
	right: 4px;
	min-width: 38px;
	height: 38px;
	border: 0;
	color: var(--oe-login-muted);
	box-shadow: none;
}

body.login .button.wp-hide-pw:focus {
	border: 0;
	box-shadow: var(--oe-login-focus);
}

body.login .forgetmenot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	width: 100%;
	margin: 0 0 14px;
}

body.login .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--oe-login-muted);
	font-size: 13px;
	font-weight: 600;
}

body.login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	border-color: var(--oe-login-line);
	border-radius: 4px;
	box-shadow: none;
}

body.openes-login-page input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	margin: 0 8px 0 0 !important;
	border-color: var(--oe-login-line) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
}

body.login input[type="checkbox"]:checked::before {
	width: 22px;
	height: 22px;
	margin: -3px 0 0 -4px;
	color: var(--oe-login-brand);
}

body.login .submit {
	clear: both;
	margin: 0;
	text-align: center;
}

body.login .button-primary {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 7px;
	background: var(--oe-login-action);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 44px;
	text-shadow: none;
	box-shadow: 0 13px 24px rgba(39, 52, 73, .24);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.openes-login-page .entry-content input[type="submit"],
body.openes-login-page .entry-content button[type="submit"],
body.openes-login-page .um .um-button,
body.openes-login-page .um a.um-button,
body.openes-login-page .um input[type="submit"].um-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: var(--oe-login-action) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 44px !important;
	text-shadow: none !important;
	box-shadow: 0 13px 24px rgba(39, 52, 73, .24) !important;
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.openes-login-page .um .um-col-alt {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 22px 0 6px !important;
	text-align: center !important;
}

body.openes-login-page .um .um-col-alt .um-field-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	margin: 0 0 16px !important;
	text-align: left !important;
}

body.openes-login-page .um .um-col-alt .um-clear {
	display: none !important;
}

body.openes-login-page .um .um-left {
	float: none !important;
	width: auto !important;
	text-align: center !important;
}

body.openes-login-page .um .um-right,
body.openes-login-page .um .um-button.um-alt,
body.openes-login-page .um a.um-button.um-alt {
	display: none !important;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--oe-login-action-hover);
	color: #ffffff;
	filter: brightness(1.02);
	box-shadow: 0 16px 30px rgba(39, 52, 73, .30);
	transform: translateY(-1px);
}

body.openes-login-page .entry-content input[type="submit"]:hover,
body.openes-login-page .entry-content input[type="submit"]:focus,
body.openes-login-page .entry-content button[type="submit"]:hover,
body.openes-login-page .entry-content button[type="submit"]:focus,
body.openes-login-page .um .um-button:hover,
body.openes-login-page .um .um-button:focus,
body.openes-login-page .um a.um-button:hover,
body.openes-login-page .um a.um-button:focus,
body.openes-login-page .um input[type="submit"].um-button:hover,
body.openes-login-page .um input[type="submit"].um-button:focus {
	background: var(--oe-login-action-hover) !important;
	color: #ffffff !important;
	filter: brightness(1.02);
	box-shadow: var(--oe-login-focus), 0 16px 30px rgba(39, 52, 73, .30) !important;
	transform: translateY(-1px);
}

body.login .button-primary:focus {
	box-shadow: var(--oe-login-focus), 0 16px 30px rgba(39, 52, 73, .30);
}

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

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--oe-login-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color .16s ease;
}

body.openes-login-page .entry-content a,
body.openes-login-page .um a {
	color: var(--oe-login-muted) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color .16s ease;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus {
	color: var(--oe-login-brand);
	box-shadow: none;
}

body.openes-login-page .entry-content a:hover,
body.openes-login-page .entry-content a:focus,
body.openes-login-page .um a:hover,
body.openes-login-page .um a:focus {
	color: var(--oe-login-brand) !important;
	box-shadow: none !important;
}

body.login .message,
body.login .notice,
body.login #login_error {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid rgba(217, 228, 239, .95);
	border-left: 4px solid var(--oe-login-brand);
	border-radius: 7px;
	color: var(--oe-login-text);
	background: #ffffff;
	box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

body.openes-login-page .um .um-notice,
body.openes-login-page .um .um-field-error,
body.openes-login-page .entry-content .message,
body.openes-login-page .entry-content .notice,
body.openes-login-page .entry-content .error {
	margin: 0 0 16px !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(217, 228, 239, .95) !important;
	border-left: 4px solid var(--oe-login-brand) !important;
	border-radius: 7px !important;
	color: var(--oe-login-text) !important;
	background: #ffffff !important;
	box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
}

body.login #login_error {
	border-left-color: #c2413d;
}

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

body.login .language-switcher select {
	min-height: 38px;
	border-color: var(--oe-login-line);
	border-radius: 7px;
	color: var(--oe-login-text);
	background-color: #ffffff;
	box-shadow: none;
}

body.login .language-switcher .button {
	min-height: 38px;
	border-color: rgba(31, 95, 153, .34);
	border-radius: 7px;
	color: var(--oe-login-brand);
	background: #ffffff;
	font-weight: 700;
	box-shadow: none;
}

@media (max-width: 900px) {
	:root {
		--oe-login-content-offset: 16px;
	}

	body.login {
		justify-content: center;
		padding: 32px 22px;
	}

	body.openes-login-page #content.site-content {
		padding: 32px 22px !important;
	}

	body.login::before {
		width: 100%;
		height: 220px;
		clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%);
	}

	body.openes-login-page #content.site-content::before {
		width: 100%;
		height: 220px;
		clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%);
	}

	body.login::after {
		top: 22px;
		left: 24px;
	}

	body.openes-login-page #content.site-content::after {
		top: 22px;
		left: 24px;
	}

	body.openes-login-page #content > .wrap {
		justify-content: center;
		min-height: calc(100vh - var(--oe-header-height, 68px) - 64px) !important;
	}

	body.login #login {
		margin-top: 86px;
	}

	body.openes-login-page #primary {
		margin-top: 86px;
	}

	body.login form {
		padding: 24px;
	}

	body.openes-login-page .entry-content > .um,
	body.openes-login-page .entry-content > form,
	body.openes-login-page .entry-content #loginform {
		padding: 24px !important;
	}
}

@media (max-width: 480px) {
	:root {
		--oe-login-content-offset: 10px;
	}

	body.login {
		padding: 22px 16px;
	}

	body.openes-login-page #content.site-content {
		padding: 22px 16px !important;
	}

	body.login #login {
		margin-top: 76px;
	}

	body.openes-login-page #primary {
		margin-top: 76px;
	}

	body.login #login h1 a {
		min-height: 42px;
		padding-left: 52px;
		font-size: 24px;
	}

	body.openes-login-page .entry-content::before {
		min-height: 42px;
		padding-left: 52px;
		font-size: 24px;
	}

	body.login #login h1 a::before {
		width: 40px;
		height: 40px;
	}

	body.openes-login-page #primary::before {
		width: 40px;
		height: 40px;
	}

	body.login #login h1 a::after {
		left: 13px;
	}

	body.openes-login-page #primary::after {
		left: 13px;
	}

	body.login form {
		padding: 22px 18px;
	}

	body.openes-login-page .entry-content > .um,
	body.openes-login-page .entry-content > form,
	body.openes-login-page .entry-content #loginform {
		padding: 22px 18px !important;
	}

	body.login .forgetmenot,
	body.login .submit {
		float: none;
		width: 100%;
	}

	body.login .button-primary {
		width: auto;
		min-width: 180px;
		margin-top: 12px;
	}

	body.openes-login-page .entry-content input[type="submit"],
	body.openes-login-page .entry-content button[type="submit"],
	body.openes-login-page .um .um-button,
	body.openes-login-page .um input[type="submit"].um-button {
		width: auto !important;
		min-width: 180px !important;
		margin-top: 12px !important;
	}
}