/**
 * Create account 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 sign in page's splits. */
#create-account {
	background: #1e1e1e;
	padding-bottom: 5rem;
	padding-top: 2.5rem;
}

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

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

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

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

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

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

/* !- Benefits rail
   --rail-offset is set from create-account.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. */
#create-account .benefits-rail {
	position: sticky;
	top: var(--rail-offset, 1.5rem);
}

#create-account .rail-photo {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

#create-account .rail-photo img {
	display: block;
	width: 100%;
}

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

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

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

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

#create-account .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;
}

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

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

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

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

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

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

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

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

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

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

/* !- Alerts */
#create-account .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;
}

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

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

#create-account .profile-alert p + p {
	margin-top: 0.5rem;
}

#create-account .profile-alert-title {
	color: var(--text-50);
	font-weight: 600;
}

#create-account .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);
}

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

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

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

/* !- Form 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. */
#create-account .create-account-content {
	background: var(--white);
	border-radius: var(--border-radius);
	padding: 2.75rem;
}

#create-account .form-section {
	margin-bottom: 2.25rem;
}

#create-account .form-section:last-of-type {
	margin-bottom: 0;
}

#create-account .form-section-head {
	align-items: center;
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.875rem;
}

#create-account .form-section-num {
	align-items: center;
	background: var(--blue-500);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	flex: 0 0 1.5rem;
	font-size: var(--text-micro);
	font-weight: 800;
	height: 1.5rem;
	justify-content: center;
	width: 1.5rem;
}

#create-account .form-section-head h2 {
	font-size: var(--text-lg);
	margin-bottom: 0;
}

#create-account .card-sub {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

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

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

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

/* Bootstrap only reveals .invalid-feedback as a following sibling of the invalid
   control (:invalid ~ .invalid-feedback). The password fields wrap their input
   so the show/hide button can be positioned against it, which puts the message
   outside that sibling relationship, so it never appeared at all. Matched
   through the wrapper instead.

   The message deliberately stays outside .pw-wrap: moving it inside restores
   Bootstrap's own selector, but .pw-toggle is pinned to the wrapper's full
   height, so a visible message stretches the wrapper and drags the eye icon
   down out of the field with it. */
#create-account .was-validated .pw-wrap:has(:invalid) ~ .invalid-feedback {
	display: block;
}

#create-account .field-hint {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-bottom: 0;
	margin-top: 0.375rem;
}

/* !- Password fields
   The toggle is stretched the full height of the field (top and bottom both
   pinned) and centers its icon, rather than sitting at the field's top edge. */
#create-account .pw-wrap {
	position: relative;
}

#create-account .pw-wrap .form-control {
	padding-right: 3rem;
}

/* Bootstrap paints its own right-aligned validation icon on a valid or invalid
   field, which lands underneath the eye. Suppressed here, and the padding is
   restated because Bootstrap's validated selectors outrank the rule above. */
#create-account .pw-wrap .form-control.is-invalid,
#create-account .pw-wrap .form-control.is-valid,
#create-account .was-validated .pw-wrap .form-control:invalid,
#create-account .was-validated .pw-wrap .form-control:valid {
	background-image: none;
	padding-right: 3rem;
}

#create-account .pw-toggle {
	align-items: center;
	background: none;
	border: none;
	bottom: 0;
	color: var(--text-400);
	cursor: pointer;
	display: flex;
	font-size: var(--text-sm);
	justify-content: center;
	padding: 0 0.875rem;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
}

#create-account .pw-toggle:hover {
	color: var(--text-100);
}

/* !- Terms */
#create-account .terms-row {
	border-top: 1px solid var(--bg-700);
	margin-top: 2.25rem;
	padding-top: 1.75rem;
}

#create-account .terms-row .form-check-label {
	color: var(--text-300);
	font-size: var(--text-sm);
}

/* !- Submit */
#create-account .submit-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

#create-account #create-account-button {
	padding: 0.875rem 2.25rem;
	white-space: nowrap;
}

#create-account .submit-bar-copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 12.5rem;
}

/* The v3 badge is hidden, so Google's attribution has to appear in the markup */
#create-account .recaptcha-notice {
	color: var(--text-500);
	font-size: var(--text-tiny);
	line-height: 1.5;
	margin-bottom: 0;
}

#create-account .submit-note {
	color: var(--text-500);
	font-size: var(--text-mini);
	line-height: 1.5;
	margin-bottom: 0;
}

/* Hidden because it overlaps .scroll-top and the discount drawers. Google
   allows this as long as the attribution text is shown instead, which it is
   in .recaptcha-notice above. */
.grecaptcha-badge {
	visibility: hidden;
}

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

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

	#create-account .create-account-content {
		padding: 1.5rem 1.25rem;
	}
}