/* ==========================================================================
   Moot Freight Network — carrier login, dark chrome
   ==========================================================================

   The freight login shares its markup with every other portal login, and that
   markup is styled by portal.css, whose last section repaints the whole portal
   white. portal.css is shared with the driver and sender portals, which are settled
   and parked, so nothing here touches it: this file loads after it and overrides it
   for the freight login only.

   Two scopes do that, and both are freight-only:

     .portal--freight-auth   on the section, in page-freight-login.php
     body.moot-freight-login-page   added by moot_freight_body_classes()

   Both are two-class selectors against portal.css's single-class ones, so they win
   on specificity rather than on load order -- which matters, because a combine-and
   -minify cache on this host has reordered stylesheets before.

   The signup page next door is the same navy, glass and lime, from
   assets/css/freight-onboarding.css. Change one and look at the other: a carrier
   goes straight from this page to that one, or back again.
   ========================================================================== */

body.moot-freight-login-page {
	margin: 0;
	background: #060b18 !important;
	background-image: none !important;
	color: #f8fafc;
	color-scheme: dark;
	font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
}

body.moot-freight-login-page #main-content.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

.portal--freight-auth {
	--fl-lime: #b8f215;
	--fl-text: #f8fafc;
	--fl-label: #cbd5e1;
	--fl-muted: #94a3b8;
	--fl-border: rgba(148, 163, 184, 0.16);
	position: relative;
	/* The site header stands down on portal pages, so there is no header height to
	   subtract here the way portal.css subtracts it. */
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: clamp(2rem, 8vh, 4rem) 1.25rem;
	background:
		radial-gradient(70% 55% at 82% -8%, rgba(184, 242, 21, 0.12), transparent 62%),
		radial-gradient(60% 45% at 8% 108%, rgba(123, 132, 255, 0.1), transparent 60%),
		#060b18;
	color: var(--fl-text);
	overflow: hidden;
}

/* portal.css paints this blue. The page's own lights are on the section above, so
   this layer is off. */
.portal--freight-auth .portal__bg-glow {
	background: none;
}

.portal--freight-auth .portal__card {
	max-width: 460px;
	padding: 2.75rem 2.25rem;
	background: rgba(11, 20, 38, 0.62);
	border: 1px solid var(--fl-border);
	border-radius: 28px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 24px 60px rgba(2, 6, 23, 0.45);
	backdrop-filter: blur(12px);
}

.portal--freight-auth .portal__brand {
	margin-bottom: 1.75rem;
}

/* The logo file is the blue mark with a navy wordmark, which all but disappears on
   a navy card. This is the same treatment the dark site header gives it. Three
   classes deep because moot-clean-icons.css, which also loads on portal pages,
   sets `.moot-brand-logo__img { filter: none }`. */
.portal--freight-auth .portal__brand .moot-brand-logo__img {
	display: block;
	width: auto;
	height: 38px;
	max-width: 170px;
	max-height: 40px;
	margin-inline: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.portal--freight-auth .portal__badge {
	color: var(--fl-lime);
	background: rgba(184, 242, 21, 0.1);
	border: 1px solid rgba(184, 242, 21, 0.28);
	letter-spacing: 0.08em;
}

.portal--freight-auth .portal__title {
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.portal--freight-auth .portal__subtitle {
	color: var(--fl-muted);
}

.portal--freight-auth .portal-form__group label {
	color: var(--fl-label);
}

.portal--freight-auth .portal-form__group input {
	background: rgba(6, 11, 24, 0.55);
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 12px;
	box-shadow: none;
	color: var(--fl-text);
}

.portal--freight-auth .portal-form__group input::placeholder {
	color: #64748b;
}

.portal--freight-auth .portal-form__group input:focus {
	border-color: rgba(184, 242, 21, 0.5);
	background: rgba(6, 11, 24, 0.75);
	box-shadow: 0 0 0 3px rgba(184, 242, 21, 0.16);
}

/* Chrome paints its own near-white over an autofilled field and ignores
   background-color, so a remembered email would arrive in a white box. */
.portal--freight-auth .portal-form__group input:-webkit-autofill,
.portal--freight-auth .portal-form__group input:-webkit-autofill:hover,
.portal--freight-auth .portal-form__group input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--fl-text);
	-webkit-box-shadow: 0 0 0 1000px #0b1426 inset;
	caret-color: var(--fl-text);
}

/* The same lime pill as Continue on the signup page and Get Started on the site. */
.portal--freight-auth .portal-form__actions .btn--primary {
	background: var(--fl-lime);
	border-color: transparent;
	border-radius: 999px;
	color: #06210b;
	font-weight: 700;
	box-shadow: 0 14px 30px rgba(184, 242, 21, 0.22);
}

.portal--freight-auth .portal-form__actions .btn--primary:hover {
	background: #c7ff2b;
	color: #06210b;
	transform: translateY(-1px);
}

.portal--freight-auth .portal-alert--error {
	color: #fca5a5;
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(248, 113, 113, 0.32);
}

.portal--freight-auth .portal-alert--success {
	color: var(--fl-lime);
	background: rgba(184, 242, 21, 0.1);
	border-color: rgba(184, 242, 21, 0.32);
}

.portal--freight-auth .portal-form__footer {
	color: var(--fl-muted);
}

.portal--freight-auth .portal-form__footer a {
	color: var(--fl-lime);
	font-weight: 700;
	text-decoration: none;
}

.portal--freight-auth .portal-form__footer a:hover {
	text-decoration: underline;
}

/* The sender login link is the secondary way out and should not compete with
   creating a freight account. */
.portal--freight-auth .portal-form__footer--muted a {
	color: var(--fl-muted);
	font-weight: 600;
}

@media (max-width: 720px) {
	.portal--freight-auth .portal__card {
		padding: 2rem 1.35rem;
		border-radius: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portal--freight-auth .portal-form__actions .btn--primary:hover {
		transform: none;
	}
}