/**
 * Front-end portal login page (not wp-login.php).
 */

.ss-portal-login {
	background-color: var(--ss-navy);
	background-image:
		linear-gradient(
			165deg,
			color-mix(in srgb, var(--ss-navy) 78%, transparent) 0%,
			color-mix(in srgb, var(--ss-navy) 52%, transparent) 42%,
			color-mix(in srgb, var(--ss-navy) 82%, transparent) 100%
		),
		url("../images/login-bg-sea.jpg");
	background-image:
		linear-gradient(
			165deg,
			color-mix(in srgb, var(--ss-navy) 72%, transparent) 0%,
			color-mix(in srgb, var(--ss-navy) 45%, transparent) 45%,
			color-mix(in srgb, var(--ss-navy) 78%, transparent) 100%
		),
		image-set(
			url("../images/login-bg-sea.webp") type("image/webp"),
			url("../images/login-bg-sea.jpg") type("image/jpeg")
		);
	background-position: center 45%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--ss-white);
	display: grid;
	min-block-size: 100vh;
	min-block-size: 100dvh;
	place-items: center;
	padding: clamp(1.5rem, 5vw, 3.5rem) var(--ss-page-gutter);
}

.ss-portal-login__inner {
	inline-size: min(100%, 23.5rem);
	text-align: center;
}

.ss-portal-login__logo {
	margin: 0 auto 1.35rem;
}

.ss-portal-login__logo img {
	display: block;
	height: auto;
	inline-size: min(100%, 13.5rem);
	margin-inline: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

.ss-portal-login__eyebrow {
	color: color-mix(in srgb, var(--ss-white) 78%, var(--ss-teal-light));
	font-size: var(--ss-fs-label);
	font-weight: 700;
	letter-spacing: var(--ss-kicker-tracking);
	margin: 0 0 0.55rem;
	text-transform: uppercase;
}

.ss-portal-login__title {
	color: var(--ss-white);
	font-size: var(--ss-fs-display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.35rem;
}

.ss-portal-login__error {
	background: color-mix(in srgb, var(--ss-white) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--ss-orange) 55%, transparent);
	border-inline-start: 0.25rem solid var(--ss-orange);
	border-radius: 0.75rem;
	color: var(--ss-white);
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	text-align: start;
}

.ss-portal-login__form {
	backdrop-filter: blur(10px);
	background: rgb(16 46 74 / 58%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 1.1rem;
	box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 28%);
	padding: 1.45rem 1.3rem 1.3rem;
	text-align: start;
}

.ss-portal-login__form > p {
	margin: 0;
}

.ss-portal-login__field {
	margin: 0 0 1rem !important;
}

.ss-portal-login__field label {
	color: rgb(255 255 255 / 92%);
	display: block;
	font-size: var(--ss-fs-label);
	font-weight: 600;
	margin: 0 0 0.4rem;
}

.ss-portal-login__field input[type="text"],
.ss-portal-login__field input[type="password"],
.ss-portal-login__field input[type="email"] {
	appearance: none;
	background: rgb(6 21 38 / 88%) !important;
	border: 1.5px solid rgb(255 255 255 / 28%) !important;
	border-radius: 0.4rem !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--ss-white) !important;
	display: block !important;
	float: none !important;
	font-family: inherit;
	font-size: var(--ss-fs-body);
	inline-size: 100% !important;
	margin: 0 !important;
	max-inline-size: none !important;
	min-block-size: 3rem;
	padding: 0.7rem 0.9rem;
	width: 100% !important;
}

.ss-portal-login__field input:-webkit-autofill,
.ss-portal-login__field input:-webkit-autofill:hover,
.ss-portal-login__field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ss-white);
	box-shadow: 0 0 0 1000px #061526 inset !important;
	caret-color: var(--ss-white);
	transition: background-color 99999s ease-out;
}

.ss-portal-login__field input:focus {
	border-color: var(--ss-teal-light) !important;
	box-shadow: 0 0 0 0.2rem rgb(39 167 172 / 35%) !important;
	outline: none;
}

.ss-portal-login__password-wrap {
	display: block !important;
	inline-size: 100%;
	line-height: 0;
	position: relative;
	width: 100%;
}

.ss-portal-login__password-wrap br {
	display: none !important;
}

.ss-portal-login__password-wrap input[type="password"],
.ss-portal-login__password-wrap input[type="text"] {
	padding-inline-end: 4rem !important;
}

.ss-portal-login__toggle-pw {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0.5rem;
	box-shadow: none !important;
	color: rgb(255 255 255 / 82%) !important;
	cursor: pointer;
	display: inline-flex !important;
	font: inherit;
	font-size: var(--ss-fs-caption) !important;
	font-weight: 650;
	inset-block-start: 50%;
	inset-inline-end: 0.45rem;
	justify-content: center;
	line-height: 1;
	margin: 0 !important;
	min-block-size: 2rem !important;
	min-inline-size: auto !important;
	padding: 0.35rem 0.55rem !important;
	position: absolute !important;
	transform: translateY(-50%);
	width: auto !important;
	z-index: 2;
}

.ss-portal-login__toggle-pw:hover,
.ss-portal-login__toggle-pw:focus-visible {
	color: var(--ss-white) !important;
}

.ss-portal-login__remember {
	margin: 0 0 1.15rem !important;
}

.ss-portal-login__remember label {
	align-items: center;
	color: rgb(255 255 255 / 90%);
	display: inline-flex;
	font-size: var(--ss-fs-body);
	gap: 0.5rem;
	line-height: 1.2;
}

.ss-portal-login__remember input {
	accent-color: var(--ss-orange);
	inline-size: 1rem;
	margin: 0;
	min-block-size: 1rem;
}

.ss-portal-login__submit {
	margin: 0 !important;
}

.ss-portal-login__button {
	background: var(--ss-orange) !important;
	border: 0 !important;
	border-radius: 0.4rem !important;
	box-shadow: none !important;
	color: var(--ss-white) !important;
	cursor: pointer;
	display: block !important;
	float: none !important;
	font: inherit;
	font-size: var(--ss-fs-body) !important;
	font-weight: 700;
	inline-size: 100% !important;
	margin: 0 !important;
	min-block-size: 3rem;
	padding: 0.75rem 1.25rem !important;
	transition: background-color 180ms ease, transform 180ms ease;
	width: 100% !important;
}

.ss-portal-login__button:hover {
	background: color-mix(in srgb, var(--ss-orange) 88%, black) !important;
	transform: translateY(-1px);
}

.ss-portal-login__button:focus-visible {
	outline: 0.2rem solid var(--ss-orange);
	outline-offset: 0.2rem;
}

.ss-portal-login__links {
	display: grid;
	gap: 0.65rem;
	margin: 1.25rem 0 0 !important;
}

.ss-portal-login__links a {
	color: rgb(255 255 255 / 82%);
	font-size: var(--ss-fs-body);
	text-decoration: none;
}

.ss-portal-login__links a:hover {
	color: var(--ss-white);
	text-decoration: underline;
}

body.ss-is-portal-login .ss-site-header,
body.ss-is-portal-login .ss-site-footer,
body.ss-is-portal-login .wp-site-blocks > header,
body.ss-is-portal-login .wp-site-blocks > footer {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ss-portal-login__button {
		transition: none;
	}

	.ss-portal-login__button:hover {
		transform: none;
	}
}