/*
 * Sign in / create account (Views/store/auth.php). Screen styles only: everything else comes
 * from tokens.css, base.css and components.css. Mobile first.
 */

.st-auth {
	display: grid;
	max-width: var(--st-container);
	margin-inline: auto;
}

/* ----- Brand panel: desktop only (the image is never requested on phones) ----- */
.st-auth__brand {
	display: none;
}

/* ----- Form column ----- */
.st-auth__main {
	padding: var(--st-space-5) var(--st-gutter) 0; /* the page-end space comes from main (base.css) */
}

.st-auth__card {
	width: 100%;
	max-width: 27.5rem; /* 440px: one comfortable form column */
	margin-inline: auto;
}

.st-auth__title {
	margin: 0 0 var(--st-space-4);
	font-size: var(--st-text-2xl);
	line-height: var(--st-leading-tight);
	letter-spacing: var(--st-tracking-tight);
}

.st-auth__intro {
	margin: 0 0 var(--st-space-4);
	color: var(--st-ink-muted);
	line-height: var(--st-leading-body);
}

/* Two equal tabs: "Sign in" / "Create account" */
.st-auth .st-tabs__list {
	gap: 0;
}

.st-auth .st-tabs__tab {
	flex: 1 1 0;
	font-size: var(--st-text-base);
}

.st-auth .st-tabs__panel:focus-visible {
	outline-offset: var(--st-space-1);
}

/* Server messages (role="alert"): empty until there is something to say */
.st-auth__alert:empty {
	display: none;
}

.st-auth__alert {
	margin-bottom: var(--st-space-4);
}

.st-auth__form .st-notice .st-icon,
.st-auth__alert .st-icon {
	flex: none;
	margin-top: 2px;
}

/* ----- Code step ----- */
.st-auth__sent {
	margin-bottom: var(--st-space-4);
	color: var(--st-ink);
	line-height: var(--st-leading-ui);
}

.st-auth__sent:focus {
	outline: none;
}

.st-auth__sent strong {
	overflow-wrap: anywhere;
}

.st-auth__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--st-link);
	font: inherit;
	font-weight: var(--st-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.st .st-auth__link:hover {
	text-decoration-thickness: 2px;
}

.st-auth__otp .st-input {
	max-width: 12rem;
	font-size: var(--st-text-lg);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.3em;
}

.st-auth__resend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-2);
	margin: calc(-1 * var(--st-space-2)) 0 var(--st-space-4);
}

.st-auth__resend .st-btn {
	margin-left: calc(-1 * var(--st-space-2)); /* ghost button text lines up with the field */
}

.st-auth__resend .st-btn:disabled {
	background: transparent;
	border-color: transparent;
	text-decoration: none;
}

.st-auth__timer {
	font-size: var(--st-text-ui);
	color: var(--st-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* ----- Sign up: country code + mobile on one row, one legend ----- */
.st-auth__phone {
	margin: 0 0 var(--st-space-4);
	padding: 0;
	border: 0;
	min-width: 0;
}

.st-auth__phone legend {
	padding: 0;
	margin-bottom: var(--st-space-2);
}

.st-auth__phone-row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: var(--st-space-2);
}

.st-auth__phone .st-field {
	margin-bottom: 0;
}

.st-auth__phone > .st-help,
.st-auth__phone > .st-error {
	margin-top: var(--st-space-2);
}

.st-auth__legal {
	margin: 0 0 var(--st-space-4);
	font-size: var(--st-text-sm);
	line-height: var(--st-leading-ui);
	color: var(--st-ink-muted);
}

.st-auth__legal a {
	color: var(--st-ink);
}

/* ----- "or" divider, social, switch link ----- */
.st-auth__or {
	display: flex;
	align-items: center;
	gap: var(--st-space-3);
	margin: var(--st-space-4) 0;
	font-size: var(--st-text-ui);
	color: var(--st-ink-muted);
}

.st-auth__or::before,
.st-auth__or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--st-border);
}

.st-auth__social img {
	flex: none;
}

.st-auth__switch {
	margin: var(--st-space-5) 0 0;
	padding-top: var(--st-space-4);
	border-top: 1px solid var(--st-border);
	text-align: center;
	color: var(--st-ink-muted);
}

.st-auth__switch a {
	color: var(--st-ink);
	font-weight: var(--st-weight-semibold);
}

@media (min-width: 768px) {
	.st-auth__main {
		padding-top: var(--st-space-7);
	}
}

@media (min-width: 1024px) {
	.st-auth {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.st-auth__brand {
		display: flex;
		align-items: flex-end;
		min-height: 100%;
		padding: var(--st-space-6);
		background-color: var(--st-surface-inverse);
		background-image:
			linear-gradient(to top, color-mix(in srgb, var(--st-surface-inverse) 90%, transparent) 0%, color-mix(in srgb, var(--st-surface-inverse) 72%, transparent) 45%, transparent 78%),
			url("../../img/auth-clan-800.avif");
		background-size: cover;
		background-position: center top;
		color: var(--st-ink-inverse);
	}

	/* Keep the tagline in view when the panel runs past the bottom of the window */
	.st-auth__brand-text {
		position: sticky;
		bottom: var(--st-space-6);
	}

	.st-auth__brand-title {
		margin: 0;
		font-size: var(--st-text-3xl);
		font-weight: var(--st-weight-bold);
		line-height: var(--st-leading-tight);
		letter-spacing: var(--st-tracking-tight);
	}

	.st-auth__facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--st-space-2) var(--st-space-4);
		margin: var(--st-space-4) 0 0;
		padding: 0;
		list-style: none;
		font-size: var(--st-text-ui);
		font-weight: var(--st-weight-medium);
	}

	.st-auth__facts li {
		display: inline-flex;
		align-items: center;
		gap: var(--st-space-2);
	}

	.st-auth__main {
		display: flex;
		align-items: center;
		padding: var(--st-space-7) var(--st-space-6);
	}

	/* Split screen: the brand panel runs down to the footer */
	.st main:has(> .st-auth) {
		padding-bottom: 0;
	}
}

/* Code step: the email is fixed (use "Change email") */
.st-auth .st-input[readonly] {
	background: var(--st-surface-muted);
	border-color: var(--st-border);
	color: var(--st-ink-muted);
}