@import url("/css/design_v2/color.css");
@import url("/css/design_v2/font.css");
@import url("/css/design_v2/standards.css");
@import url("/css/design_v2/breakpoints.css");

/* Page layout for auth login flow - two panel layout */
/* Note: Container width is handled by layout wrapper, two_panel handles layout */
.pp-login {
	/* Layout handled by two_panel component */
}

/* Child panels backgrounds */
.pp-login > section:first-child {
	background: var(--Color-Primary-White);
}

.pp-login > section:last-child {
	background: var(--Color-Primary-Neutral-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-login__image {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 60vh;
}

/* Reduce illustration size when enter-code modal is open */
.pp-login--enter-code-open .pp-login__image {
	max-height: 50vh;
}

.pp-login h2 {
	margin-top: var(--Space-L);
	margin-bottom: var(--Space-M);
}

/* Shared styles for all auth forms (login, forgot password, reset password, etc.) */
.pp-auth-form {
	width: 100%;
}

.pp-auth-form fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--Space-M);
	margin-bottom: var(--Space-M);
}

/* Reduce spacing for server-side error messages inside fieldsets */
.pp-auth-form fieldset .pp-v2-error-state {
	margin-top: calc(-1 * var(--Space-M) + var(--Space-XS));
}

@media (min-width: 600px) {
	.pp-login__image {
		max-height: 70vh;
	}

	/* Reduce illustration size when enter-code modal is open (tablet) */
	.pp-login--enter-code-open .pp-login__image {
		max-height: 55vh;
	}
}

@media (min-width: 1240px) {
	.pp-login__image {
		max-height: 85vh;
		width: 100%;
	}

	/* Reduce illustration size when enter-code modal is open (desktop) */
	.pp-login--enter-code-open .pp-login__image {
		max-height: 60vh;
	}
}

/* Success modal button spacing */
.pp-auth-success-button {
	margin-top: var(--Space-L);
}

/* Hide global Flash on login page - we use modals for this flow */
.message {
	display: none;
}