body.login {
	background: #eeeeee;
}

.login {
	padding-inline: 0.75rem;

	form {
		border-radius: 20px;
		background: #fff;
		border: 2px solid #bbbdc0;
		margin-top: 0;

		label[for="user_login"],
		label[for="user_pass"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}

	#user_login,
	#user_pass {
		padding: 0.5rem;

		&::placeholder,
		&::placeholder {
			color: #6b7280;
			font-size: 16px;
			opacity: 0.8;
			transition: opacity 0.3s ease;
		}

		&:focus::placeholder,
		&:focus::placeholder {
			opacity: 0.5;
		}

		&:not(:focus)::placeholder,
		&:not(:focus)::placeholder {
			opacity: 1;
		}
	}

	.login__label {
		margin-bottom: 1rem;
		font-size: 16px;
		color: #212529;
	}
}

@media screen and (min-width: 768px) {
	.login {
		padding-inline: 1.5rem;
	}
}

input[type="radio"] {
	height: 26px;
	width: 26px;

	border: 1px solid #4596b1;

	&:checked::before {
		width: 18px;
		height: 18px;
		background-color: #4596b1;
		margin: 3px;
	}
}

#role-selector {
	margin-bottom: 20px;
	position: relative !important;
	z-index: 99 !important;
	display: flex;
	flex-direction: column;
	order: -1;

	h2 {
		font-size: 24px;
		font-weight: normal;
		padding-bottom: 10px;
		font-family: "bree-serif", serif;
		border-bottom: 1px solid #bbbdc0;
	}

	h3 {
		margin: 1rem 0;
		font-family: "proxima-nova", sans-serif;
		font-size: 18px;
		color: #495057;
	}
}

#nav,
#backtoblog {
	display: none;
}

#mo_saml_login_sso_button,
#teacher-password-reset,
#mo_saml_button,
#loginform p:first-of-type,
#loginform .user-pass-wrap,
#loginform .forgetmenot,
#loginform input[type="submit"] {
	display: none !important;
}

#login {
	max-width: 100%;
	display: flex;
	flex-direction: column;

	#backtoblog {
		order: 99;
	}

	#loginform,
	#mo_saml_login_sso_button,
	#teacher-password-reset {
		order: 4;
	}

	h1 {
		order: 2 !important;
		a{
			margin: 0 auto 36px;
		}
	}

	&.instructor-login {
		#loginform {
			display: flex;
			flex-direction: column;
		}

		#mo_saml_login_sso_button {
			display: flex !important;
			padding-top: 10px;
			padding-bottom: 10px;
			float: none;
			font-size: 16px !important;
			order: 3 !important;
		}

		#mo_saml_button {
			display: block !important;
			height: auto !important;

			div:has(b) {
				display: none;
			}
		}

		#teacher-password-reset {
			display: block !important;
			text-align: center;
			margin-top: 15px;

			a {
				color: #777;
				text-decoration: none;
				font-size: 13px;

				&:hover {
					color: #2271b1;
				}
			}
		}

		#loginform p:first-of-type,
		#loginform .user-pass-wrap,
		#loginform .forgetmenot,
		#loginform input[type="submit"],
		p#nav:has(.wp-login-register) {
			display: none !important;
		}
	}

	&.student-login {
		#loginform {
			display: flex;
			flex-direction: column;
		}

		#loginform {
			p:first-of-type,
			.user-pass-wrap,
			.forgetmenot,
			input[type="submit"] {
				display: block !important;
			}
		}

		/* Make sure the password visibility toggle works */
		.wp-pwd button {
			pointer-events: auto !important;
		}

		#mo_saml_login_sso_button,
		#teacher-password-reset,
		#mo_saml_button {
			display: none !important;
		}
	}
}

#wp-submit,
#mo_saml_login_sso_button {
	font-size: 16px;
	padding: 5px 20px;

	border-radius: 10px;
	background: #4596b1;
	border: none;
}

/* Clear WordPress disabled styles */
#login input[type="password"]:disabled,
#login input[type="text"]:disabled {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.login-copyright {
	margin: 1rem auto;
	text-align: center;
	color: #6c757d;
	font-size: 11px;
}