/**
 * Lost password page
 *
 * @copyright   2026, ON1
 */

/* !- Already signed in */
#already-signed-in {
	text-align: center;
}

/* !- Section
   Dark is pinned rather than themed: data-theme="dark" on the section resets
   the tokens for the rail and page head, and the background is a literal hex
   so the toggle can't lighten it. Same technique as the create account and
   sign in pages. */
#lost-password {
	background: #1e1e1e;
	padding-bottom: 5rem;
	padding-top: 2.5rem;
}

/* !- Page head */
#lost-password .page-head {
	border-bottom: 1px solid var(--bg-700);
	margin-bottom: 2.5rem;
	padding-bottom: 1.75rem;
}

#lost-password .breadcrumb-trail {
	color: var(--text-500);
	font-size: var(--text-mini);
	letter-spacing: 0.02em;
	margin-bottom: 0.625rem;
}

#lost-password .page-head h1 {
	font-size: var(--text-4xl);
	margin-bottom: 0.625rem;
}

#lost-password .page-head-copy p:last-child {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

#lost-password .page-head-aside {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 0;
	padding-top: 0.375rem;
}

@media (min-width: 992px) {
	#lost-password .page-head-aside {
		text-align: right;
	}
}

/* !- Benefits rail
   --rail-offset is set from lost-password.js, which measures #site-header and
   adds a gap. It can't be a fixed value here: the header height falls out of
   the nav's own padding and line height, so it would drift the moment the nav
   changes. The fallback covers the no-js case. */
#lost-password .benefits-rail {
	position: sticky;
	top: var(--rail-offset, 1.5rem);
}

#lost-password .benefits-rail .eyebrow {
	color: var(--blue-500);
	margin-bottom: 0.625rem;
}

#lost-password .benefits-rail h2 {
	font-size: var(--text-xl);
	line-height: 1.4;
	margin-bottom: 1.75rem;
}

#lost-password .benefit-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding-left: 0;
}

#lost-password .benefit-item {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

#lost-password .benefit-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	flex: 0 0 2.125rem;
	font-size: var(--text-xs);
	height: 2.125rem;
	justify-content: center;
	width: 2.125rem;
}

#lost-password .benefit-icon.icon-blue {
	background: var(--blue-transparent);
	color: var(--blue-500);
}

#lost-password .benefit-icon.icon-green {
	background: var(--green-transparent);
	color: var(--green-500);
}

#lost-password .benefit-icon.icon-gold {
	background: var(--gold-transparent);
	color: var(--gold-500);
}

#lost-password .benefit-icon.icon-purple {
	background: color-mix(in srgb, var(--purple-500) 12%, transparent);
	color: var(--purple-500);
}

#lost-password .benefit-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

#lost-password .benefit-title {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.125rem;
}

#lost-password .benefit-desc {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.5;
}

#lost-password .rail-signin {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.125rem 1.25rem;
}

#lost-password .rail-signin p {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

@media (max-width: 991.98px) {
	#lost-password .benefits-rail {
		position: static;
	}
}

/* !- Card
   The light counterpart to the section above: data-theme="light" is fixed in
   the markup, so everything inside resolves to the light tokens and stays
   there when the toggle flips. The column is sized to the card rather than the
   card capped inside a wider column, so there's no dead space beside it. */
#lost-password .lost-password-content {
	background: var(--white);
	border-radius: var(--border-radius);
	padding: 2.75rem;
}

#lost-password .state-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	font-size: var(--text-xl);
	height: 3rem;
	justify-content: center;
	margin-bottom: 1.25rem;
	width: 3rem;
}

#lost-password .state-icon.icon-blue {
	background: var(--blue-transparent);
	color: var(--blue-500);
}

#lost-password .state-icon.icon-green {
	background: var(--green-transparent);
	color: var(--green-500);
}

#lost-password .state-icon.icon-red {
	background: color-mix(in srgb, var(--red-500) 12%, transparent);
	color: var(--red-500);
}

#lost-password .lost-password-content h2 {
	font-size: var(--text-xl);
	margin-bottom: 0.625rem;
}

#lost-password .card-intro {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 1.75rem;
}

#lost-password .lost-password-content > p {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* !- Alerts */
#lost-password .profile-alert {
	align-items: flex-start;
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	gap: 0.875rem;
	margin-bottom: 1.5rem;
	padding: 1.125rem 1.25rem;
}

#lost-password .profile-alert i {
	font-size: var(--text-base);
	margin-top: 0.125rem;
}

#lost-password .profile-alert p {
	font-size: var(--text-sm);
	margin-bottom: 0;
}

#lost-password .profile-alert p + p {
	margin-top: 0.5rem;
}

#lost-password .profile-alert.alert-danger {
	background: color-mix(in srgb, var(--red-500) 10%, transparent);
	border-color: color-mix(in srgb, var(--red-500) 40%, transparent);
	color: var(--text-100);
}

#lost-password .profile-alert.alert-danger i {
	color: var(--red-500);
}

#lost-password .profile-alert.alert-danger p {
	color: var(--text-100);
}

/* !- Field */
#lost-password .form-label {
	color: var(--text-100);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 0.375rem;
}

#lost-password .required-field {
	color: var(--red-500);
	font-weight: 700;
	margin-left: 0.125rem;
}

#lost-password .invalid-feedback {
	color: var(--red-500);
	font-size: var(--text-mini);
	font-weight: 700;
}

/* !- Submit */
#lost-password .submit-bar {
	margin-top: 1.5rem;
}

#lost-password #lost-password-button {
	padding: 0.875rem 2.25rem;
	white-space: nowrap;
	width: 100%;
}

#lost-password .submit-note {
	color: var(--text-500);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 0;
	margin-top: 1rem;
	text-align: center;
}

/* !- Secondary actions */
#lost-password .card-actions {
	border-top: 1px solid var(--bg-100);
	margin-top: 1.75rem;
	padding-top: 1.5rem;
}

#lost-password .card-actions p {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

#lost-password .card-actions p + p {
	margin-top: 0.375rem;
}

@media (max-width: 575.98px) {
	#lost-password {
		padding-top: 1.5rem;
	}

	#lost-password .page-head h1 {
		font-size: var(--text-3xl);
	}

	#lost-password .lost-password-content {
		padding: 1.5rem 1.25rem;
	}
}