/* 2026-07-27 v1.1
 * - Added compact login form spacing and full-width primary action styling.
 * - Moved the password visibility control inside the input.
 * - Styled the remember-me checkbox as an accessible switch.
 * - Made the switch off-position explicit for reliable reverse transitions.
 */

.login-form {
	display:flex;
	flex-direction:column;
	gap:var(--spacing-lg,18px);
}

.login-form > h2,
.login-form p {
	margin:0;
}

.login-email-field,
.login-password-field {
	display:flex;
	flex-direction:column;
	gap:var(--spacing-xs,6px);
	width:100%;
	align-self:stretch;
}

.login-email-field > div,
.login-email-field input {
	width:100%;
	max-width:100%;
	box-sizing:border-box;
}

.login-form input:not([type="checkbox"]) {
	min-height:54px;
	padding:12px 14px;
	font-size:18px;
	line-height:1.25;
}

.login-password-field__control {
	position:relative;
	width:100%;
}

.login-password-field__control > input {
	width:100%;
	padding-right:58px!important;
}

.login-form .login-password-field__toggle {
	position:absolute;
	top:50%;
	right:5px;
	width:44px;
	height:44px;
	min-width:44px;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--frontcolor);
	align-items:center;
	justify-content:center;
	transform:translateY(-50%);
	cursor:pointer;
}

.login-form .login-password-field__toggle:hover,
.login-form .login-password-field__toggle:focus-visible {
	background:color-mix(in srgb, var(--frontcolor) 10%, transparent);
	outline:none;
}

.login-form .login-password-field__toggle .fa {
	margin:auto;
	font-size:20px;
}

.login-remember-toggle {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--spacing-md,12px);
	width:100%;
	min-height:34px;
	cursor:pointer;
}

.login-remember-toggle__text {
	font-size:16px;
	line-height:1.25;
}

.login-remember-toggle__input {
	position:absolute;
	width:1px;
	height:1px;
	margin:0;
	opacity:0;
	pointer-events:none;
}

.login-remember-toggle__control {
	position:relative;
	width:50px;
	height:30px;
	flex:0 0 50px;
	border:2px solid var(--frontcolor);
	border-radius:999px;
	background:transparent;
	box-sizing:border-box;
	transition:background-color 0.18s ease;
}

.login-remember-toggle__control::after {
	content:'';
	position:absolute;
	top:3px;
	left:3px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--frontcolor);
	transform:translateX(0);
	transition:transform 0.18s ease, background-color 0.18s ease;
}

.login-remember-toggle__input:checked + .login-remember-toggle__control {
	background:var(--frontcolor);
}

.login-remember-toggle__input:checked + .login-remember-toggle__control::after {
	background:var(--frontcolor-contrast);
	transform:translateX(20px);
}

.login-remember-toggle__input:focus-visible + .login-remember-toggle__control {
	outline:3px solid color-mix(in srgb, var(--frontcolor) 25%, transparent);
	outline-offset:3px;
}

.login-submit-group,
.login-submit {
	width:100%;
}

.login-form .button-primary {
	justify-content:center;
	gap:var(--spacing-sm,8px);
	background:var(--frontcolor);
	border-color:var(--frontcolor);
	color:var(--frontcolor-contrast)!important;
	font-weight:700;
}

.login-form .button-primary > * {
	color:inherit!important;
}

.login-links {
	display:flex;
	flex-direction:column;
	gap:var(--spacing-xs,6px);
}

.login-links a {
	font-weight:600;
}

@media only screen and (max-width:820px) {
	.portal-wrapper > .login-form {
		min-height:0;
	}
}