/* Login page look for Mall Leasing: light daytime city background, white card, a short product panel (login.js).
   web_include_css loads this on every website page of every site with the app, so each rule is scoped to
   the login page of a site that sets the body class (login.update_website_context). */

body.mall-leasing-login[data-path="login"] {
	min-height: 100vh;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.62) 38%, rgba(255, 255, 255, 0) 72%),
		url("/assets/property_management/images/login-bg.svg") center bottom / cover no-repeat fixed,
		#eef5fb;
}

body.mall-leasing-login[data-path="login"] .web-footer,
body.mall-leasing-login[data-path="login"] footer {
	display: none;
}

body.mall-leasing-login[data-path="login"] .page-content-wrapper,
body.mall-leasing-login[data-path="login"] main {
	background: transparent;
}

body.mall-leasing-login[data-path="login"] .page_content {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 64px;
	min-height: calc(100vh - 80px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 24px;
}

/* the sign-in card */
body.mall-leasing-login[data-path="login"] section .page-card {
	width: 400px;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 32px 28px;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(19, 35, 63, 0.08);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(30, 60, 100, 0.16), 0 2px 6px rgba(30, 60, 100, 0.06);
}

/* sky-blue to gold strip along the top of the card, the two colours of the background */
body.mall-leasing-login[data-path="login"] section .page-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #3f86c8 0%, #6aa7dc 55%, #e9b85c 100%);
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-head img.app-logo {
	max-height: 44px;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(42, 100, 160, 0.25);
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-head h4 {
	color: #13233f;
	font-size: 24px;
	font-weight: 700;
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-head .page-card-subtitle {
	color: #5b6b82;
}

body.mall-leasing-login[data-path="login"] section .page-card .form-label {
	color: #22324d;
	font-weight: 600;
}

body.mall-leasing-login[data-path="login"] section .page-card input[type="text"],
body.mall-leasing-login[data-path="login"] section .page-card input[type="email"],
body.mall-leasing-login[data-path="login"] section .page-card input[type="password"] {
	height: 38px;
	border: 1px solid #d5e1ee;
	border-radius: 10px;
	background-color: #f6f9fc;
	color: #13233f;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

body.mall-leasing-login[data-path="login"] section .page-card input[type="text"]:focus,
body.mall-leasing-login[data-path="login"] section .page-card input[type="email"]:focus,
body.mall-leasing-login[data-path="login"] section .page-card input[type="password"]:focus {
	border-color: #3f86c8;
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(63, 134, 200, 0.18);
	outline: none;
}

body.mall-leasing-login[data-path="login"] section .page-card .field-icon {
	color: #6f86a3;
}

body.mall-leasing-login[data-path="login"] section .page-card .forgot-password-message a,
body.mall-leasing-login[data-path="login"] section .page-card .sign-up-message a {
	color: #2f6fae;
	font-weight: 500;
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-login,
body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-forgot,
body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-signup {
	height: 40px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #4b93d4 0%, #2a64a0 100%);
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 8px 18px rgba(42, 100, 160, 0.28);
	transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-forgot:disabled,
body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-signup:disabled {
	opacity: 0.55;
	box-shadow: none;
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-login:hover,
body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-forgot:not(:disabled):hover,
body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-signup:not(:disabled):hover {
	filter: brightness(1.05);
	box-shadow: 0 10px 22px rgba(42, 100, 160, 0.34);
	transform: translateY(-1px);
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-login-option {
	height: 40px;
	border: 1px solid #d5e1ee;
	border-radius: 10px;
	background: #ffffff;
	color: #22324d;
}

body.mall-leasing-login[data-path="login"] section .page-card .page-card-actions .btn-login-option:hover {
	border-color: #b9cde3;
	background: #f1f6fb;
}

/* product panel beside the card (added by login.js) */
.pm-login-hero {
	flex: 1;
	max-width: 520px;
	color: #13233f;
}

.pm-login-hero .pm-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	padding: 4px 12px;
	border: 1px solid rgba(47, 111, 174, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	color: #2f6fae;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pm-login-hero h1 {
	margin: 0 0 12px;
	color: #13233f;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
}

.pm-login-hero p {
	margin: 0 0 28px;
	color: #3b4a63;
	font-size: 16px;
	line-height: 1.6;
}

.pm-login-hero ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-login-hero li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	color: #22324d;
	font-size: 15px;
	line-height: 1.5;
}

/* a white check in a blue circle */
.pm-login-hero li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / 20px no-repeat,
		linear-gradient(135deg, #4b93d4, #2a64a0);
	box-shadow: 0 3px 8px rgba(42, 100, 160, 0.25);
}

.pm-login-hero h1 span {
	color: #2f6fae;
}

/* tablets and phones: card only, centred, with a 16px gutter */
@media (max-width: 900px) {
	body.mall-leasing-login[data-path="login"] .page-content-wrapper {
		padding-top: 0;
	}

	body.mall-leasing-login[data-path="login"] .page_content {
		justify-content: center;
		min-height: 100svh;
		padding: 24px 0;
	}

	body.mall-leasing-login[data-path="login"] .page_content > section {
		width: 100%;
		padding: 0 16px;
	}

	body.mall-leasing-login[data-path="login"] section .page-card {
		width: 100%;
		padding: 28px 20px;
	}

	.pm-login-hero {
		display: none;
	}
}