/* ==========================================================================
   BatteryGo -- Login / Register

   Split auth layout: an animated WebGL fluid panel on the left, the form on
   the right. The markup is the neon theme's login structure (.login-content,
   .form-steps, the error blocks), driven by auth-login.js and
   auth-register.js, so this file restyles it rather than replacing it.

   Loaded last, after neon-theme.css / neon-forms.css. Those ship a dark login
   skin at up to five levels of class specificity, so overrides here are
   prefixed with `body.login-page` to reliably win the cascade.
   ========================================================================== */


/* Layout
   ========================================================================== */

body.login-page {
	background: #ffffff;
	color: #18181b;
	margin: 0;
}

.auth-shell {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
}

/* On mobile the art panel becomes a band across the top third of the page with
   the logo centred on it; on desktop it grows into the full left column. */
.auth-art {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	height: 33vh;
	min-height: 170px;
	max-height: 320px;
	overflow: hidden;
	padding: 24px;
	background: #0a0a0b radial-gradient(120% 90% at 25% 20%, #0d3b16 0%, #0a0a0b 60%);
}

/* The tagline and trust line only have room in the desktop column. */
.auth-art .auth-art-copy,
.auth-art .auth-art-foot {
	display: none;
}

.auth-panel {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 48px 24px 24px;
}

/* Auto margins centre the content in whatever height the column has, and push
   the mobile footer (.auth-panel-foot) to the bottom. */
.auth-panel-inner {
	width: 100%;
	max-width: 384px;
	margin-top: auto;
	margin-bottom: auto;
}

@media (min-width: 1024px) {

	.auth-shell {
		-ms-flex-direction: row;
		flex-direction: row;
	}

	.auth-art {
		-ms-flex-align: stretch;
		align-items: stretch;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
		width: 50%;
		height: 100vh;
		min-height: 0;
		max-height: none;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		padding: 48px;
	}

	/* flex-start keeps the column from stretching the table, which would
	   widen the caption past the headline. */
	.auth-art .auth-art-copy {
		display: table;
		-ms-flex-item-align: start;
		align-self: flex-start;
	}

	/* Footer text left, app badges pushed right; the badges drop below the
	   text when the row runs out of room. */
	.auth-art .auth-art-foot {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: end;
		align-items: flex-end;
		-ms-flex-pack: justify;
		justify-content: space-between;
		gap: 16px 24px;
	}

	.auth-panel {
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
		width: 50%;
		min-height: 100vh;
		padding: 48px 24px 64px;
	}
}


/* Art panel
   ========================================================================== */

#auth-fluid-canvas {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.auth-grain {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	opacity: .12;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 128px 128px;
}

.auth-art-block {
	position: relative;
	z-index: 10;
}

/* The headline fills the first line exactly: it never wraps, and the block is
   a table so its width is the headline's width. The sub-copy is the table's
   caption, which always takes the table's width -- so it starts on line two
   and wraps to the headline's edge. auth-pages.js scales the block's
   font-size down when the column is too narrow for the headline at 30px.
   (px, not rem -- neon-core.css sets html { font-size: 10px }.) */
.auth-art-copy {
	font-size: 30px;
}

.auth-art-copy p {
	margin: 0;
	font-size: 1em;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: -.02em;
}

.auth-art-headline {
	white-space: nowrap;
	color: #ffffff;
}

.auth-art-sub {
	display: table-caption;
	caption-side: bottom;
	color: rgba(255, 255, 255, .4);
}

.auth-art-foot p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .3);
}

.auth-copyright {
	margin: 14px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, .25);
}


/* Brand lockup
   ========================================================================== */

.auth-brand {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none;
}

.auth-brand:hover,
.auth-brand:focus {
	text-decoration: none;
}

/* Mouse clicks get no ring; keyboard focus does, in white against the art. */
.auth-brand:focus:not(:focus-visible) {
	outline: none;
}

.auth-brand:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .7);
	outline-offset: 4px;
	border-radius: 4px;
}

/* The wordmark source is 2277x496. Both axes are pinned to an integer pair on
   that exact ratio (202/44 = 4.5909 vs 4.5907) -- letting width fall out as
   `auto` produced a fractional box, which is what made the downscale dither. */
.auth-brand img {
	display: block;
	width: 202px;
	height: 44px;
}

/* Mobile counterpart of the art-panel footer, which is hidden at this size:
   copyright left, app badges right, badges wrapping below when needed. */
.auth-panel-foot {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 14px 16px;
	width: 100%;
	padding-top: 40px;
}

.auth-copyright-mobile {
	margin: 0;
	font-size: 12px;
	color: #a1a1aa;
}

@media (min-width: 1024px) {

	.auth-panel-foot {
		display: none;
	}
}


/* Entrance animation
   ========================================================================== */

/* Ends on `none` rather than translateY(0): the fill-mode holds the last frame,
   and any held transform would make these elements containing blocks for
   fixed-position descendants. */
@-webkit-keyframes auth-fade-up {
	from { opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); }
	to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes auth-fade-up {
	from { opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); }
	to   { opacity: 1; -webkit-transform: none; transform: none; }
}

.auth-fade,
.auth-stagger > * {
	opacity: 0;
	-webkit-animation: auth-fade-up 500ms ease-out forwards;
	animation: auth-fade-up 500ms ease-out forwards;
}

.auth-stagger > *:nth-child(1)  { -webkit-animation-delay:   0ms; animation-delay:   0ms; }
.auth-stagger > *:nth-child(2)  { -webkit-animation-delay:  80ms; animation-delay:  80ms; }
.auth-stagger > *:nth-child(3)  { -webkit-animation-delay: 160ms; animation-delay: 160ms; }
.auth-stagger > *:nth-child(4)  { -webkit-animation-delay: 240ms; animation-delay: 240ms; }
.auth-stagger > *:nth-child(5)  { -webkit-animation-delay: 320ms; animation-delay: 320ms; }
.auth-stagger > *:nth-child(6)  { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
.auth-stagger > *:nth-child(7)  { -webkit-animation-delay: 480ms; animation-delay: 480ms; }
.auth-stagger > *:nth-child(8)  { -webkit-animation-delay: 560ms; animation-delay: 560ms; }
.auth-stagger > *:nth-child(9)  { -webkit-animation-delay: 640ms; animation-delay: 640ms; }
.auth-stagger > *:nth-child(10) { -webkit-animation-delay: 720ms; animation-delay: 720ms; }

.auth-delay-1 { -webkit-animation-delay: 150ms; animation-delay: 150ms; }
.auth-delay-2 { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
.auth-delay-3 { -webkit-animation-delay: 450ms; animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {

	.auth-fade,
	.auth-stagger > * {
		opacity: 1;
		-webkit-animation: none;
		animation: none;
	}
}


/* Neon login container -- stripped of its dark skin
   ========================================================================== */

body.login-page .login-container {
	width: 100%;
}

body.login-page .login-content {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

body.login-page .login-header {
	background: none;
	padding: 0;
}

body.login-page .login-header.login-caret:after {
	display: none;
}

body.login-page .login-content a {
	color: #18181b;
}

body.login-page .login-form {
	position: relative;
	padding-top: 24px;
}

.auth-title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: #09090b;
}

body.login-page .login-header .description {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #71717a;
}


/* Fields
   ========================================================================== */

/* Leaves room for the absolutely-positioned validation message below a field. */
body.login-page .login-form .form-group {
	margin-bottom: 22px;
}

body.login-page .login-form .form-group .input-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	padding: 0;
	background: #ffffff;
	border: 1px solid #e4e4e7;
	border-radius: 10px;
	-webkit-transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
	transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

body.login-page .login-form .form-group .input-group.focused {
	border-color: #0ea910;
	-webkit-box-shadow: 0 0 0 3px rgba(14, 169, 16, .12);
	box-shadow: 0 0 0 3px rgba(14, 169, 16, .12);
}

body.login-page .login-form .form-group .input-group.validate-has-error {
	border-color: #dc2626;
	-webkit-box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

/* jquery.validate drops its label inside the group; float it under the field
   so long messages stay readable and never change the step height. */
body.login-page .login-form .form-group .input-group.validate-has-error .error {
	position: absolute;
	top: 100%;
	right: auto;
	left: 2px;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: #dc2626;
}

body.login-page .login-form .form-group .input-group .input-group-addon {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 40px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	color: #a1a1aa;
	text-align: center;
}

/* Kill the stock divider between the icon and the field. */
body.login-page .login-form .form-group .input-group .input-group-addon:after {
	display: none;
}

/* Lucide field icons, sized to match the show/hide eye. */
body.login-page .login-form .form-group .input-group .input-group-addon svg {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
}

body.login-page .login-form .form-group .input-group .form-control {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 100%;
	height: 42px;
	padding: 0 14px 0 0;
	background: transparent;
	border: 0;
	font-size: 14px;
	color: #18181b;
	-webkit-box-shadow: none;
	box-shadow: none;
}

body.login-page .login-form .form-group .input-group .form-control::-webkit-input-placeholder { color: #a1a1aa; }
body.login-page .login-form .form-group .input-group .form-control::-moz-placeholder { color: #a1a1aa; opacity: 1; }
body.login-page .login-form .form-group .input-group .form-control:-ms-input-placeholder { color: #a1a1aa; }

body.login-page .login-form .form-group .input-group .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* iOS Safari zooms the page into any field whose text is under 16px when it's
   focused. Touch devices get 16px field text; mouse-driven screens keep the 14px
   design. (maximum-scale=1 would also stop it, but blocks pinch-zoom on Android.) */
@media (hover: none) and (pointer: coarse) {

	body.login-page .login-form .form-group .input-group .form-control {
		font-size: 16px;
	}
}

/* Select in a field ("How did you hear about us"): native arrow swapped for a
   Lucide chevron, and placeholder grey until something is picked. */
body.login-page .login-form .form-group .input-group select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 38px;
	text-overflow: ellipsis;
	cursor: pointer;
}

body.login-page .login-form .form-group .input-group select.form-control.is-empty {
	color: #a1a1aa;
}

body.login-page .login-form .form-group .input-group select.form-control option {
	color: #18181b;
}

body.login-page .login-form .form-group .input-group select.form-control::-ms-expand {
	display: none;
}

body.login-page .login-form .form-group .input-group .auth-select-chevron {
	position: absolute;
	top: 50%;
	right: 12px;
	z-index: 3;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: #a1a1aa;
	pointer-events: none;
}

body.login-page .login-form .form-group.auth-heard-detail.is-hidden {
	display: none;
}

body.login-page .login-form .form-group .input-group .auth-select-chevron svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Show/hide button at the end of a password field (auth-pages.js). Muted like
   the field icon at rest, darkening on hover like the text links. */
body.login-page .login-form .form-group .input-group .auth-password-toggle {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	margin-right: 2px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1;
	color: #a1a1aa;
	cursor: pointer;
	-webkit-transition: color 150ms ease;
	transition: color 150ms ease;
}

body.login-page .login-form .form-group .input-group .auth-password-toggle:hover,
body.login-page .login-form .form-group .input-group .auth-password-toggle:focus-visible {
	color: #3f3f46;
}

/* Lucide eye / eye-off, both in the markup; aria-pressed picks which shows. */
body.login-page .login-form .form-group .input-group .auth-password-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

body.login-page .login-form .form-group .input-group .auth-password-toggle .auth-icon-hide,
body.login-page .login-form .form-group .input-group .auth-password-toggle[aria-pressed="true"] .auth-icon-show {
	display: none;
}

body.login-page .login-form .form-group .input-group .auth-password-toggle[aria-pressed="true"] .auth-icon-hide {
	display: block;
}

body.login-page .login-form .form-group .input-group .auth-password-toggle:focus-visible {
	outline: 2px solid rgba(14, 169, 16, .45);
	outline-offset: -2px;
}

body.login-page .login-form .form-group .input-group .auth-password-toggle:focus:not(:focus-visible) {
	outline: none;
}

/* Edge draws its own reveal eye inside password fields; ours replaces it. */
body.login-page .login-form input[type="password"]::-ms-reveal,
body.login-page .login-form input[type="password"]::-ms-clear {
	display: none;
}


/* Buttons
   ========================================================================== */

body.login-page .login-form .form-group .btn-login {
	display: block;
	width: 100%;
	height: 42px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 40px;
	text-align: center;
	-webkit-transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
	transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
}

body.login-page .login-form .form-group .btn-login.btn-primary,
body.login-page .login-form .form-group .btn-login.btn-success {
	background: #0ea910;
	border-color: #0ea910;
	color: #ffffff;
}

body.login-page .login-form .form-group .btn-login.btn-primary:hover,
body.login-page .login-form .form-group .btn-login.btn-primary:focus,
body.login-page .login-form .form-group .btn-login.btn-success:hover,
body.login-page .login-form .form-group .btn-login.btn-success:focus {
	background: #0b8a0d;
	border-color: #0b8a0d;
	color: #ffffff;
}

body.login-page .login-form .form-group .btn-login[disabled],
body.login-page .login-form .form-group .btn-login[disabled]:hover {
	background: #d4d4d8;
	border-color: #d4d4d8;
	color: #ffffff;
	cursor: not-allowed;
}

/* While a submit is in flight (auth-login.js / auth-register.js). The button
   is busy rather than unavailable, so it keeps its green -- overriding the
   grey disabled state above and bootstrap's 65% disabled opacity -- and a
   spinner sits in front of the label. */
body.login-page .login-form .form-group .btn-login.is-loading,
body.login-page .login-form .form-group .btn-login.is-loading:hover,
body.login-page .login-form .form-group .btn-login.is-loading[disabled] {
	background: #0ea910;
	border-color: #0ea910;
	color: #ffffff;
	opacity: 1;
	cursor: progress;
}

body.login-page .login-form .form-group .btn-login .auth-btn-spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin: 0 8px 0 0;
	vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #ffffff;
	border-radius: 50%;
	-webkit-animation: auth-spin 700ms linear infinite;
	animation: auth-spin 700ms linear infinite;
}

body.login-page .login-form .form-group .btn-login.is-loading .auth-btn-spinner {
	display: inline-block;
}

/* Also drives the current-step marker on approval.php. */
@-webkit-keyframes auth-spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes auth-spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

body.login-page .login-form .form-group .btn-login.auth-btn-outline {
	background: #ffffff;
	border-color: #e4e4e7;
	color: #18181b;
}

body.login-page .login-form .form-group .btn-login.auth-btn-outline:hover,
body.login-page .login-form .form-group .btn-login.auth-btn-outline:focus {
	background: #fafafa;
	border-color: #d4d4d8;
	color: #18181b;
}

body.login-page .login-form .form-group .btn-login i {
	margin-right: 6px;
	font-size: 12px;
}

/* "or" divider between sign in and register */
.auth-divider {
	position: relative;
	margin: 18px 0;
	text-align: center;
}

.auth-divider:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #e4e4e7;
}

.auth-divider span {
	position: relative;
	padding: 0 10px;
	background: #ffffff;
	font-size: 12px;
	color: #a1a1aa;
}

/* Register stepper: one segment per step above the fields. The bar of the step
   you're on fills in green as you arrive; finished steps stay green, show a
   check, and are buttons back to themselves. auth-register.js keeps the
   is-current / is-done classes in sync with the visible step. */
body.login-page .auth-stepper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

body.login-page .auth-stepper li {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0px;
	flex: 1 1 0;
	min-width: 0;
}

body.login-page .auth-stepper-item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 2px;
	background: none;
	border: 0;
	border-radius: 4px;
	font: inherit;
	text-align: left;
	color: #a1a1aa;
	cursor: default;
	-webkit-transition: color 150ms ease;
	transition: color 150ms ease;
}

body.login-page .auth-stepper-bar {
	position: relative;
	display: block;
	height: 4px;
	overflow: hidden;
	background: #e4e4e7;
	border-radius: 999px;
}

body.login-page .auth-stepper-bar:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #0ea910;
	border-radius: inherit;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition: -webkit-transform 500ms cubic-bezier(.4, 0, .2, 1);
	transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}

body.login-page .auth-stepper .is-current .auth-stepper-bar:after,
body.login-page .auth-stepper .is-done .auth-stepper-bar:after {
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}

body.login-page .auth-stepper-label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

body.login-page .auth-stepper-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Lucide check, shown once a step is finished. */
body.login-page .auth-stepper-label svg {
	display: none;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	stroke-width: 3;
	color: #0ea910;
}

body.login-page .auth-stepper .is-done .auth-stepper-label svg {
	display: block;
}

body.login-page .auth-stepper .is-current .auth-stepper-item {
	color: #18181b;
}

body.login-page .auth-stepper .is-done .auth-stepper-item {
	color: #71717a;
	cursor: pointer;
}

body.login-page .auth-stepper .is-done .auth-stepper-item:hover,
body.login-page .auth-stepper .is-done .auth-stepper-item:focus-visible {
	color: #18181b;
}

body.login-page .auth-stepper-item:focus-visible {
	outline: 2px solid rgba(14, 169, 16, .45);
	outline-offset: 3px;
}

body.login-page .auth-stepper-item:focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {

	body.login-page .auth-stepper-bar:after {
		-webkit-transition: none;
		transition: none;
	}
}

.auth-terms {
	margin-top: -4px;
	font-size: 12px;
	line-height: 1.5;
	color: #71717a;
}


/* Result blocks
   ========================================================================== */

/* neon-theme.css paints register's errors solid red through a doubled class
   (.form-login-error.form-login-error), so these match it to out-rank it. */
body.login-page .form-login-error.form-login-error,
body.login-page .login-errore {
	display: none;
	margin-bottom: 18px;
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid rgba(220, 38, 38, .2);
	border-radius: 10px;
	color: #b91c1c;
	overflow: hidden;
}

body.login-page .form-login-error.form-login-error h3,
body.login-page .login-errore h3 {
	margin: 0 0 2px;
	padding: 0;
	width: auto;
	background: none;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	color: #b91c1c;
	text-align: left;
}

body.login-page .form-login-error.form-login-error p,
body.login-page .login-errore p {
	margin: 0;
	padding: 0;
	width: auto;
	background: none;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #b91c1c;
	text-align: left;
}

/* Footer links
   ========================================================================== */

body.login-page .login-bottom-links {
	margin-top: 22px;
	text-align: center;
	font-size: 13px;
	line-height: 1.8;
	color: #71717a;
	-webkit-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

body.login-page .login-bottom-links .link {
	display: inline-block;
	margin-bottom: 2px;
	text-transform: none;
	font-size: 13px;
}

body.login-page .login-bottom-links .auth-muted-links {
	font-size: 12px;
	color: #a1a1aa;
}


/* Text links
   ==========================================================================
   No underline at rest. A thin underline fades in on hover and keyboard focus,
   so pointing at a link gives a cue beyond colour -- what WCAG asks for once
   the underline is gone. Links set inside a sentence (.auth-terms) have to
   read as links before anyone hovers, so they also carry weight and a 3.67:1
   step against the grey text around them (3:1 is the minimum).

   Every link darkens on hover, so they all move the same direction: main
   links #3f3f46 -> #09090b, secondary links #71717a -> #18181b. Terms links
   rest at #18181b because anything lighter drops under 3:1 against their
   sentence. (No green on hover: the brand #0ea910 is only 3.1:1 on white, and
   even a darker green reads as a lighter shift from near-black text.)

   The .link selectors are there to out-rank neon-forms.css, whose
   `.login-page .login-bottom-links .link` rules otherwise force the colour,
   a 300ms transition, and a light grey (#aeaeae) on hover. */

body.login-page .login-bottom-links a,
body.login-page .login-bottom-links .link,
body.login-page .auth-terms a {
	color: #3f3f46;
	font-weight: 500;
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
	-webkit-text-decoration-color: transparent;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	border-radius: 2px;
	-webkit-transition: color 150ms ease, -webkit-text-decoration-color 150ms ease;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.login-page .auth-terms a {
	color: #18181b;
	font-weight: 600;
}

body.login-page .login-bottom-links a:hover,
body.login-page .login-bottom-links a:focus-visible,
body.login-page .login-bottom-links .link:hover,
body.login-page .login-bottom-links .link:focus-visible,
body.login-page .auth-terms a:hover,
body.login-page .auth-terms a:focus-visible {
	color: #09090b;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
}

/* Secondary links (Services Agreement, Privacy Policy) start grey and darken
   to the text colour. */
body.login-page .login-bottom-links .auth-muted-links a {
	color: #71717a;
	font-weight: 400;
}

body.login-page .login-bottom-links .auth-muted-links a:hover,
body.login-page .login-bottom-links .auth-muted-links a:focus-visible {
	color: #18181b;
}

/* Keyboard focus gets a ring; bootstrap's click-focus outline is dropped. */
body.login-page .login-bottom-links a:focus-visible,
body.login-page .auth-terms a:focus-visible {
	outline: 2px solid rgba(14, 169, 16, .45);
	outline-offset: 2px;
}

body.login-page .login-bottom-links a:focus:not(:focus-visible),
body.login-page .auth-terms a:focus:not(:focus-visible) {
	outline: none;
}


/* App store badges
   ========================================================================== */

/* Sits at the end of a footer row (art panel on desktop, column on mobile). */
.auth-badges {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
}

.auth-badges a {
	display: block;
	line-height: 0;
}

.auth-badges img {
	display: block;
	height: 38px;
	width: auto;
}

/* Self-hosted copy of Google's badge with its built-in transparent padding
   trimmed off (the original carries 41px of dead space on every side), so its
   box is the artwork and it lines up with the Apple badge edge to edge.
   Stored at 2x; 128x38 is its true 3.36:1 ratio at the Apple badge's height. */
.auth-badges .auth-badge-play img {
	width: 128px;
	height: 38px;
}


/* Register steps
   ========================================================================== */

/* Its own formatting context, so the last field's bottom margin can't collapse
   out of the container. Otherwise that margin sits outside at auto height and
   inside at the fixed height auth-register.js animates, and everything below
   the form jumps when a step change starts and ends. The last field's margin
   is dropped to keep the gap to the links below the same. */
body.login-page .form-steps {
	position: relative;
	display: flow-root;
}

body.login-page .login-form .form-steps .step > .form-group:last-child {
	margin-bottom: 0;
}

/* Neon eases every property of a field over 550ms, which drags behind the
   step transition's own fade and slide. */
body.login-page .login-form .form-steps .form-group {
	-webkit-transition: none;
	transition: none;
}

body.login-page .form-steps .step {
	display: none;
}

body.login-page .form-steps .step.current {
	display: block;
}