/**
 * Styles for the sign in page
 *
 * @copyright   2026, ON1
 */

#sign-in.split-bg {
	background: linear-gradient(to right, #1e1e1e 0 50%, #f6f6f7 50% 100%);
}

#sign-in .split {
	padding: 5rem 2.5rem;
	height: 100%;
}

@media (max-width: 767.98px) {
	#sign-in.split-bg {
		background: none;
	}

	#sign-in .split {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	#sign-in.split-bg .split-dark {
		background: #1e1e1e;
	}

	#sign-in.split-bg .split-light {
		background: #f6f6f7;
	}
}

#sign-in .split h2 {
	margin-bottom: 1rem;
}

#sign-in .split-dark .split-copy {
	color: var(--text-300);
	margin-bottom: 2.25rem;
}

#sign-in .split-light .split-copy {
	color: var(--text-300);
}

#sign-in .split-dark .account-features {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	list-style: none;
	margin: 0 0 2.25rem 0;
	padding: 0;
}

#sign-in .split-dark .account-features .account-feature {
	align-items: flex-start;
	display: flex;
	gap: 1.25rem;
	margin-bottom: 0;
}

#sign-in .split-dark .account-features .account-feature-icon {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--blue-500);
	display: flex;
	height: 2.5em;
	justify-content: center;
	width: 2.5em;
}

#sign-in .split-dark .account-features h4 {
	color: var(--text-50);
	font-size: var(--text-base);
	margin-bottom: 0.25rem;
}

#sign-in .split-dark .account-features p {
	color: var(--text-500);
	font-size: var(--text-xs);
}

#sign-in .split-dark blockquote {
	border-left: 2px solid var(--blue-500);
	margin: 0;
	padding: 0 0 0 1rem;
}

#sign-in .split-dark blockquote p {
	color: var(--text-500);
	line-height: 1.5;
	margin-bottom: 0.75rem;
}

#sign-in .split-dark blockquote cite {
	color: var(--text-600);
	font-size: var(--text-mini);
	font-weight: 700;
}

#sign-in #loginform {
	margin-bottom: 1.5rem;
}

#sign-in #loginform label {
	color: var(--text-300);
	font-size: var(--text-mini);
	font-weight: 700;
}

#sign-in #loginform .remember-row label {
	color: var(--text-300);
	font-weight: 400;
	font-size: var(--text-sm);
	letter-spacing: initial;
	text-transform: none;
}

#sign-in #loginform #rememberme {
	margin-top: 0.3125rem;
}

#sign-in #loginform .form-control {
	font-size: var(--text-sm);
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
}

#sign-in #loginform .remember-row {
	margin-bottom: 1.25rem;
}

#sign-in .btn {
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	width: 100%;
}

/* !- Alerts
   Same shape as the alerts on the create account, lost password, and reset
   password pages. These sit inside .split-light, so they resolve against the
   light tokens the panel pins. */
#sign-in .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;
}

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

#sign-in .profile-alert p {
	color: var(--text-100);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

#sign-in .profile-alert p + p {
	margin-top: 0.5rem;
}

#sign-in .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);
}

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

#sign-in .profile-alert.alert-info {
	background: var(--blue-transparent);
	border-color: color-mix(in srgb, var(--blue-500) 40%, transparent);
}

#sign-in .profile-alert.alert-info i {
	color: var(--blue-500);
}

#sign-in .form-divider {
	align-items: center;
	color: var(--text-400);
	display: flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 1rem;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
}

#sign-in .form-divider::before,
#sign-in .form-divider::after {
	background: var(--bg-600);
	content: '';
	flex: 1;
	height: 1px;
}

#sign-in .sign-up-note {
	color: var(--text-400);
	font-size: var(--text-mini);
}