/* =================================================
   TrackTech GT - Login redesign (added on top of style.css)
   Safe to delete this file + its <link> in index.php to revert.
   ================================================= */

#login, #login *, #login *::before, #login *::after {
	box-sizing: border-box;
}

body#login {
	background-image: none;
	background-color: #eef1f5;
	display: block;
}

#login .login-screen {
	display: flex;
	min-height: 100vh;
}

#login .wrapper {
	width: 360px;
	flex-shrink: 0;
}

#login .wrapper .inner-wrapper {
	box-sizing: border-box;
	width: 360px;
	height: 100vh;
	background: #ffffff;
	opacity: 1;
	padding: 0 48px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: center;
	overflow-y: auto;
}

#login .brand-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 72px 0 28px;
}
#login .brand-mark img { width: 78px; height: auto; margin-bottom: 10px; }
#login .brand-mark .name {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.01em;
	color: #021e42;
	line-height: 1.1;
}
#login .brand-mark .sub {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	color: #0d3f8f;
}

#login .social-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}
#login .social-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: #f1f4f8;
	color: #5b6a86;
	text-decoration: none;
	font-size: 0.76rem;
	font-weight: 500;
}
#login .social-pill:hover { background: #e4e9f2; color: #0d3f8f; }
#login .social-pill svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; }

#login .login-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
	color: #0d3f8f;
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
}
#login .login-tagline::before, #login .login-tagline::after {
	content: "";
	height: 1px;
	width: 20px;
	background: #1c7fd6;
	opacity: 0.5;
}
#login .login-title {
	font-family: 'Manrope', sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	color: #021e42;
	margin: 0 0 22px;
}

#login .wrapper .inner-wrapper .content {
	height: auto;
	text-align: left;
}
#login .wrapper .inner-wrapper .content .content-block {
	height: auto;
}
#login #recover,
#login #register {
	display: none;
}

#login .row3 { margin-bottom: 16px; }
#login .field-label {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #5b6a86;
	margin-bottom: 6px;
}

#login input.inputbox {
	height: 48px;
	background-color: #f1f4f8;
	border: 1px solid #e3e7ee;
	border-radius: 10px;
	padding-left: 16px;
	font-family: 'Inter', sans-serif;
	color: #16233d;
}
#login input.inputbox:hover,
#login input.inputbox:focus {
	background-color: #ffffff;
	border-color: #1c7fd6;
}
#login .icon.icon-user,
#login .icon.icon-password { background-image: none; }

#login .content-block .reveal { top: 15px; right: 12px; }

#login .wrapper .content-block input.button {
	background: #0d3f8f;
	border-radius: 10px;
	font-family: 'Manrope', sans-serif;
}
#login .wrapper .content-block input.button:hover { opacity: 0.92; }

#login .recover-register-block,
#login .footer .mobile-v {
	display: none;
}

#login .footer {
	border-top: none;
	margin-top: 20px;
}
#login .footer .select { min-width: 90px; }

/* right showcase image - full artwork, never cropped */
#login .showcase {
	flex: 1;
	background: #03306f;
	min-width: 0;
}
#login .showcase img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 980px) {
	#login .showcase { display: none; }
}
@media (max-width: 720px) {
	#login .wrapper,
	#login .wrapper .inner-wrapper { width: 100%; }
}