#login-panel{
	font-family: var(--Font-Family);
    width: 35%;
	/* 35% of a 2560px monitor is a 900px-wide login card. Cap it at the width
	   the form actually needs. */
	max-width: 440px;
	margin-top: 40px;
    border-radius: 18px;
    background-color: #ffffff;
    background-image: url('/img/periva-logo-green.svg');
    background-repeat: no-repeat;
    background-position: center 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 40px 32px 40px;
	/* Was an offset 5px/5px grey drop — the card looked pasted onto the
	   background rather than floating above it. */
	box-shadow: var(--pv-shadow-hi);
}
#login-form{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 150px;
}
#login-background{
    position: relative;
    z-index: 1;
	height: 100%;
    width: 100%;
}
/* The shell paints near-black behind all this, which is what any gap in the
   backdrop showed as. Paint the backdrop image's own dark teal instead, so a
   browser that still finds a pixel to expose exposes something in palette. */
html, body {
	background-color: #004E51;
}
/* 2026-07-28: fixed to the viewport rather than placed in the document.
   It was `absolute` at top/left -10% with a 110% box, which puts the whole
   overscan above and to the left: the bottom edge landed exactly on 100% of
   the initial containing block. On a phone that block is the small viewport,
   so the moment the browser's URL bar collapsed the page grew and the image
   didn't — the dark app shell showed as a band across the bottom, which is the
   "cut off" backdrop. Fixed, with the overscan split evenly, so the parallax
   has room to move in all four directions and the image always reaches every
   edge regardless of what the browser chrome does. */
.parallax-background{
	position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
	background-image: url('/img/periva-bg.png');
    background-size: cover;
    background-position: center;
    transform: translate(0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    transition: transform 0.1s ease-out; 
    perspective: 1000px; 
}
.input-label{
	font-size: 13px;
	line-height: 1.3;
	margin-bottom: 8px;
	margin-top: 0;
	font-weight: 700;
	/* 0.1rem of tracking on a two-word field label reads as a logo, not a
	   label. The app's field labels have none. */
	letter-spacing: 0.01em;
	color: var(--pv-ink);
}
.input-box input{
	width: 100%;
    box-sizing: border-box;
    height: 48px;
    /* 16px on a 48px field is nearly a pill. Matches the app's inputs now:
       10px corners, the stronger hairline, and the green focus ring. */
    border-radius: var(--pv-radius-sm);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 10px 10px;
    border: 1px solid var(--pv-line-strong);
    padding: 0 14px;
	text-indent: 0;
	letter-spacing: normal;
	font-size: 15px;
	color: var(--pv-ink);
	transition: border-color 0.15s var(--pv-ease), box-shadow 0.15s var(--pv-ease);
}
.input-box input:hover{
	border-color: var(--pv-green);
}
.input-box input:focus{
	outline: none;
	border-color: var(--pv-green);
	box-shadow: 0 0 0 3px rgba(68, 168, 140, 0.22);
}
/* Field and captcha on one line, vertically centred. The image used to be a
   floated sibling with a 30px left margin, so it sat below the baseline of the
   input it belongs to. */
.input-box.login-code{
	display: flex;
	align-items: center;
	gap: 12px;
}
.input-box.login-code input{
	flex: 1 1 auto;
	min-width: 0;
}
#password{
	font-size: 16px;
	letter-spacing: 0.3rem;
}

.login-password {
	position: relative;
}

.toggle-password-show {
	transition: var(--Ease-transition);
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 13px;  
	width: 24px;
	height: 24px;
	background-image: url(/img/eye-icon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.5;
}
  
.toggle-password-show:hover{
	opacity: 1;
	background-image: url(/img/eye-closed-icon.svg);
}

/* Language switcher container */
/* #system_language {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
} */

#system_language{
	transition: var(--Ease-transition);
    width: 128px;
    background-color: var(--White);
    border: 1px solid var(--Light-grey-1);
    border-radius: var(--Basic-Forms-Input-Border-Radius);
    background-image: url(/img/up-down.svg);
    background-repeat: no-repeat;
    background-position: right 16px top 16px;
    background-size: 22px 22px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
}
 
.system_language_value, .system_language-list-item {
	padding: 16px 16px 16px 45px;
	cursor: pointer;	
}
.system_language-item-selected {	
	font-weight: bold;
}

/* .login-username{
	background-image: url('/img/user-icon.svg');
} */
/* .login-password{
	background-image: url('/img/password_input.svg');
}
.login-email{
	background-image: url('/img/email_input.svg');
} */
/* .login-code{
	background-image: url('/img/code_input.svg');
} */
#rec_seccode{
	float: none;
}
/* The generated code image is a small grey bitmap; unframed next to a 48px
   field it read as a rendering artifact rather than something to copy. Give it
   the field's own box so the two look like a pair. */
.security-code{
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 104px;
	height: 48px;
	padding: 0 8px;
	margin: 0;
	object-fit: contain;
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-radius-sm);
	background-color: var(--pv-bg-1);
}
/* The primary action was a black pill — the one button every user presses, in a
   colour that appears nowhere else in the product. It uses the shared button
   recipe now, same as every primary action inside the app. */
#login, #recover_password, #change_password	{
	transition: var(--pv-btn-transition);
	background-color: var(--pv-green);
	background-image: var(--pv-btn-grad);
	color: white;
	text-align: center;
	padding: 15px 18px;
	font-weight: var(--pv-btn-weight);
	border-radius: var(--pv-btn-radius);
	font-size: 16px;
	cursor: pointer;
	opacity: 1;
	box-shadow: var(--pv-btn-shadow);
}
#login:hover,
#recover_password:hover,
#change_password:hover {
	transform: translateY(-1px);
	box-shadow: var(--pv-btn-shadow-hi);
	opacity: 1;
}
#login:active,
#recover_password:active,
#change_password:active {
	transform: translateY(1px);
	box-shadow: var(--pv-btn-shadow);
}
/* "Remember me" was black-outlined with a grey knob that turned the retired
   brand red when on, and hovered translucent red. Brand green throughout. */
.switch{
	transition: background-color 0.2s var(--pv-ease), border-color 0.2s var(--pv-ease);
	width: 40px;
    height: 20px;
    box-sizing: content-box;
    padding-top: 3px;
    padding-left: 3px;
    border-radius: var(--pv-radius-pill);
    background-color: var(--pv-bg-1);
    cursor: pointer;
    border: 1px solid var(--pv-line-strong);
    margin: 0;
}
.switch:hover {
	background-color: var(--pv-green-bg);
	border-color: var(--pv-green);
}
.switch_label{
	margin: 0;
	line-height: 1.3;
	color: var(--pv-ink);
}
.switch_knob{
	transition: margin-left 0.18s var(--pv-ease), background-color 0.18s var(--pv-ease);
	width: 16px;
	height: 16px;
	border-radius: var(--pv-radius-pill);
	background-color: var(--pv-line-strong);
}

.switch-selected{
	background-color: var(--pv-green-bg);
	border-color: var(--pv-green);
}
.switch-selected .switch_knob{
	background-color: var(--pv-green);
	margin-left: 20px;
}
/* Was a float and a line-height guess, which left the knob and its label on
   slightly different centre lines. */
#remember_me_panel{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
}
#remember_me{
	flex: 0 0 auto;
	float: none;
	margin: 0;
}
/* Secondary action. Was black at 16px — the same weight as the primary button
   it sits under, in the same colour, so the page had two equal-looking CTAs. */
#password_recover, #login_site{
	display: block;
	text-decoration: none;
	width: 100%;
	/* 2026-07-28: was 22px, which read as a separate block of the page rather
	   than the alternative to the button right above it. */
	margin-top: 14px;
	text-align: center;
	color: var(--pv-green-ink);
	font-size: 14px;
	font-weight: 600;
}
#password_recover:hover, #login_site:hover{
	text-decoration: underline;
}

/* 2026-05-22: driver-portal entry point. Plain text link — visually
 * twinned with #password_recover above it (same display block + center
 * align), but in brand teal instead of black so it reads as a
 * distinct affordance, not a duplicate of the recover-password link.
 * Slightly smaller than #password_recover so the visual hierarchy
 * stays: Login (primary) > Recover password > Driver Login. Hover
 * underline confirms clickability without changing the layout. */
#driver_portal_link {
	display: block;
	text-decoration: none;
	width: 100%;
	margin-top: 10px;
	text-align: center;
	/* Third in the hierarchy, so it steps back from the green recover link
	   above it rather than competing in another shade of teal. */
	color: var(--pv-ink-soft);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
#driver_portal_link:hover {
	text-decoration: underline;
}
#login-error{
	width: 100%;
	font-size: 14px;
	text-align: left;
	/* Was #F41626, the retired brand red. */
	color: var(--pv-danger);
	font-weight: 600;
	margin-top: 10px;
}
#recover_panel #login-error{ 
	height: 30px;
	line-height:30px; 
}
#recover_panel #login-error.success{color: #565656;}
#recover_panel{
	margin-top: 150px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

@media (max-width: 1920px) {

	#login-panel {
		width: 35%;
		max-height: 73%;
		transform: translate(-50%, -55%);
		background-size: 14em;
		/* The panel caps its own height but the shell sets overflow:hidden on
		   body, so anything past the cap was simply unreachable — on a
		   landscape phone the Login button sat ~30px below the viewport with
		   no way to scroll to it. Scroll inside the panel instead. */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* This block is what nearly every screen actually gets, so it holds the
	   real desktop appearance. It used to re-derive the controls in `em` —
	   0.8em labels (11px), 2.4em fields, 0.5em corners — which both shrank
	   them below the app's own controls and made every value depend on the
	   inherited font size. The design values live in the base rules above;
	   only the vertical rhythm is adjusted here. */
	#login-form {
		margin-top: 6em;
		gap: 18px;
	}

	#password_recover, #login_site {
		margin-top: 12px;
	}
	/* Mobile: bump the font slightly so the tap target is comfortable
	 * but keep the text-link styling (no border, no fill) so it
	 * stays subordinate to the primary uppercase #login button. */
	#driver_portal_link {
		margin-top: 0.8em;
		font-size: 0.95em;
	}

	.toggle-password-show {
		right: 12px;
		top: 12px;
	}

	#recover_panel {
		margin-top: 2em;
	}
}

@media screen and (max-width: 1024px) {
	#login-panel {
		width: 60%;
	}
}

/* Short viewports — landscape phones, and any desktop window dragged short.
   Tightens the vertical rhythm so the form still fits, and caps the panel
   against the *viewport* rather than a percentage: the panel is absolutely
   positioned, so `max-height: 73%` resolved against its containing block and
   let the card end up taller than the screen it was centred in. Declared
   before the phone block below so a narrow-and-short window gets that
   block's horizontal treatment. */
@media screen and (max-height: 560px) {
	#login-panel {
		/* Without this the cap applies to the content box and the 40px of
		   padding lands on top of it, so the card overshot the viewport by
		   exactly its own padding. */
		box-sizing: border-box;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		/* The desktop rule nudges the card 5% above centre, which pushes a
		   full-height card off the top edge. Centre it properly instead. */
		transform: translate(-50%, -50%);
		margin-top: 0;
		padding: 20px 24px;
		background-size: 8em;
		background-position: center 16px;
	}

	#login-form,
	#recover_panel {
		margin-top: 3.4em;
		gap: 14px;
	}

	#password_recover, #login_site {
		margin-top: 0.6em;
	}
}

/* Phones. The only breakpoint below 1024px was "width: 60%", and because the
   panel isn't border-box that 60% is the *content* width — on a 390px screen
   the form ended up 236px wide inside a 314px card, with 38px of dead margin
   either side. Give the card the screen, and grow the fields to a comfortable
   tap target while we're here (they were 36px tall at 14px). */
@media screen and (max-width: 720px) {
	#login-panel {
		box-sizing: border-box;
		width: auto;
		left: 16px;
		right: 16px;
		max-width: 420px;
		margin: 0 auto;
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px);
		transform: translate(0, -50%);
		padding: 28px 22px;
		border-radius: 14px;
		background-size: 11em;
		background-position: center 28px;
	}

	#login-form {
		margin-top: 5em;
	}

	/* The recover panel reserves a 30px error slot above its first field, so
	   the same margin as the login form would leave a visible hole under the
	   logo. Less margin, same optical gap. */
	#recover_panel {
		margin-top: 2.2em;
	}

	.input-box input {
		height: 48px;
		/* 16px is the threshold below which iOS Safari zooms the page on
		   focus. The viewport meta blocks that today, but relying on a
		   zoom-lock for legibility is the wrong way round. */
		font-size: 16px;
	}

	#login, #recover_password, #change_password {
		font-size: 17px;
	}
}