/* MkopoEasy sign-in. Loaded on every website page through web_include_css,
   so every rule is scoped to the login and set-password routes. */

body[data-path="login"],
body[data-path="update-password"] {
	--mk-green: #4bb333;
	--mk-green-strong: #35861f;
	--mk-green-stronger: #2c7119;
	--mk-green-deep: #1c4d12;
	--mk-red: #f8323d;
	--mk-field-bg: #f1f4f1;
	--mk-field-border: #e1e6e0;

	min-height: 100vh;
	background: linear-gradient(135deg, #3a9426 0%, #2a6d1b 45%, var(--mk-green-deep) 100%) fixed;
}

body[data-path="login"] .page-content-wrapper,
body[data-path="update-password"] .page-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 24px 16px;
}

body[data-path="login"] .page-content-wrapper > main,
body[data-path="update-password"] .page-content-wrapper > main {
	width: 100%;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	max-width: 440px;
	min-height: 0;
	padding: 30px;
	background-color: #fff;
	border: none;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(10, 40, 5, 0.35);
}

body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head {
	/* beats the template's items-start / text-left utility classes */
	align-items: center !important;
	text-align: center !important;
}

body[data-path="login"] .page-card-head img.app-logo,
body[data-path="update-password"] .page-card-head img.app-logo {
	content: url("/assets/mkopoeasy/images/mkopoeasy-logo-full.svg");
	height: 40px;
	max-height: 40px;
	width: auto;
}

body[data-path="login"] .page-card .page-card-body input.form-control,
body[data-path="update-password"] .page-card .page-card-body input.form-control {
	height: 28px;
	padding: 6px 8px 6px 32px;
	background-color: var(--mk-field-bg);
	background-repeat: no-repeat;
	background-position: 9px center;
	background-size: 16px 16px;
	border: 1px solid var(--mk-field-border);
	border-radius: 8px;
	box-shadow: none;
	transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
}

body[data-path="login"] .page-card .page-card-body .email-field input.form-control,
body[data-path="update-password"] .page-card .page-card-body .email-field input.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8a79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

body[data-path="login"] .page-card .page-card-body .password-field input.form-control,
body[data-path="update-password"] .page-card .page-card-body .password-field input.form-control {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8a79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

body[data-path="login"] .page-card .page-card-body input.form-control:focus,
body[data-path="update-password"] .page-card .page-card-body input.form-control:focus {
	background-color: #fff;
	border-color: var(--mk-green);
	box-shadow: 0 0 0 3px rgba(75, 179, 51, 0.22);
	outline: none;
}

body[data-path="login"] .page-card .page-card-body .form-group.invalid input.form-control,
body[data-path="login"] .page-card .page-card-body.invalid input.form-control,
body[data-path="update-password"] .page-card .page-card-body .form-group.invalid input.form-control,
body[data-path="update-password"] .page-card .page-card-body.invalid input.form-control {
	border-color: var(--mk-red);
}

body[data-path="login"] .page-card .page-card-body .password-field .toggle-password,
body[data-path="update-password"] .page-card .page-card-body .password-field .toggle-password {
	right: 9px;
}

body[data-path="login"] .page-card .es-button,
body[data-path="update-password"] .page-card .es-button {
	--bt-solid-bg: var(--mk-green-strong);
	--bt-solid-bg-hover: var(--mk-green-stronger);
	--bt-solid-bg-active: var(--mk-green-deep);
	--bt-solid-fg: #fff;
	--bt-focus: rgba(75, 179, 51, 0.45);

	border-radius: 8px;
	font-weight: 500;
}

body[data-path="login"] .sign-up-message a,
body[data-path="login"] .resend-link a,
body[data-path="update-password"] .sign-up-message a {
	color: var(--mk-green-strong);
	font-weight: 600;
}

body[data-path="login"] .sign-up-message a:hover,
body[data-path="login"] .resend-link a:hover,
body[data-path="update-password"] .sign-up-message a:hover {
	color: var(--mk-green-stronger);
}

@media (max-width: 575.98px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card {
		max-width: 440px;
		min-height: 0;
		padding: 24px 20px;
		border-radius: 16px;
	}
}