/*
 * Auth screens — A-01 to A-08.
 *
 * From the prototype's Login / Register / Store Setup files. One shell serves
 * all of them: a centred column on a tinted page, the brand stacked above a
 * white card.
 *
 *   column   width min(440px, 100%), gap 24
 *   card     border 1px #E6EFEA, radius 16, padding 32, gap 18
 *   field    label Roboto 12px #49454F, input 52px, border #CAC4D0, radius 8
 *
 * The Material-style field (small label above a tall outlined input) is the
 * one place the design uses the M3 component library from the Figma file's
 * internal canvas, so it is kept here and nowhere else.
 *
 * @package Uloominate
 */

.ulm-auth {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--ulm-tint-mint);
}

.ulm-auth__center {
	flex: 1;
	display: grid;
	place-items: center;
	padding: 40px 20px;
}

.ulm-auth__col {
	width: min(440px, 100%);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* A-02 carries more fields than the sign-in screens, and the design widens
   the column rather than lengthening the card. */
.ulm-auth__col--md { width: min(520px, 100%); }

/*
 * Wider column for the screens that carry a plan comparison or a wizard.
 * A-03 is 1080 because it is the only auth screen laid out as two columns —
 * the form beside the plan-summary aside. At 760 the aside had nowhere to go
 * and dropped underneath, which is what made the screen look nothing like the
 * design.
 */
.ulm-auth__col--wide { width: min(1080px, 100%); }
.ulm-auth__col--wizard { width: min(880px, 100%); }

/* --- brand ------------------------------------------------------------- */

/*
 * The lockup, centred above the card. It used to be the mark stacked over the
 * site name set in the wordmark font — see the note in inc/components/auth.php
 * for why every screen dropped that pairing.
 */
.ulm-auth__brand {
	display: flex;
	justify-content: center;
}

/*
 * Sized by width with `height: auto`; the intrinsic 1600x291 on the element
 * holds the row before it loads. Capped against the column so the wide
 * variants — A-03 at 1080px, the wizard at 880 — do not scale the logo up with
 * them: the brand is the same size on every auth screen, which is what makes
 * them read as one flow.
 */
.ulm-auth__brand-logo {
	width: min(220px, 60%);
	height: auto;
	transition: opacity var(--ulm-duration-fast) ease;
}

.ulm-auth__brand:hover .ulm-auth__brand-logo,
.ulm-auth__brand:focus-visible .ulm-auth__brand-logo { opacity: .82; }

/* --- card -------------------------------------------------------------- */

.ulm-auth__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	background: var(--ulm-surface);
	border: 1px solid #E6EFEA;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 24px 48px -32px rgba(41, 72, 60, .4);
}

.ulm-auth__title {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--ulm-deep);
}

.ulm-auth__lede {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
}

.ulm-auth__foot {
	text-align: center;
	font-size: 14px;
	color: var(--ulm-ink-muted);
}

.ulm-auth__foot a { font-weight: var(--ulm-fw-semibold); }

/* --- Material-style field ---------------------------------------------- */

/*
 * The form-field component (.ulm-mfield) used to live here. It moved to
 * components.css because ulm_field() is used on the vendor editor, coupons,
 * subscription, profile and contact screens — none of which load auth.css, so
 * every one of those forms was rendering as bare browser inputs.
 */


.ulm-auth__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

/* --- form-level error -------------------------------------------------- */

.ulm-auth__error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--ulm-danger-bg);
	border-left: 3px solid var(--ulm-danger);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ulm-deep);
}

.ulm-auth__error[hidden] { display: none; }

/* --- plan picker (A-03) ------------------------------------------------- */

/*
 * The plan picker (.ulm-planpick) moved to components.css. It is used by A-03
 * Register Vendor and by V-11 Subscription, which are in different areas and
 * load different stylesheets — so the base rules sat here while V-11 rendered
 * the component unstyled.
 */


/* --- content standard consent ------------------------------------------ */

.ulm-standard {
	padding: 16px;
	background: var(--ulm-tint-mint);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ulm-standard__title {
	font-weight: var(--ulm-fw-semibold);
	font-size: 14px;
	color: var(--ulm-deep);
}

.ulm-standard ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-inline-start: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink);
}

/* --- A-07 pending state ------------------------------------------------- */

.ulm-pending__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--ulm-warning-bg);
	color: var(--ulm-warning);
	font-size: 13px;
	font-weight: var(--ulm-fw-semibold);
}

.ulm-pending__timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
}

.ulm-pending__step {
	position: relative;
	display: flex;
	gap: 14px;
	padding-bottom: 22px;
}

.ulm-pending__step:last-child { padding-bottom: 0; }

/* The connector runs between the markers, not past the last one. */
.ulm-pending__step:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-block-start: 28px;
	inset-inline-start: 13px;
	width: 2px;
	height: calc(100% - 28px);
	background: var(--ulm-border);
}

.ulm-pending__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ulm-surface-alt);
	color: var(--ulm-ink-muted);
	font-size: 13px;
	font-weight: var(--ulm-fw-semibold);
}

.ulm-pending__step--done .ulm-pending__marker {
	background: var(--ulm-primary);
	color: var(--ulm-ink-invert);
}

.ulm-pending__step--current .ulm-pending__marker {
	background: var(--ulm-gold);
	color: var(--ulm-deep);
}

.ulm-pending__step-title {
	font-weight: var(--ulm-fw-semibold);
	font-size: 15px;
	color: var(--ulm-deep);
}

.ulm-pending__step-body {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
}

/* --- A-08 wizard -------------------------------------------------------- */

/*
 * The wizard's own title, above the progress bar. Every step already has its
 * own heading — "Name your store", "Add your logo and banner" — and without
 * something above them a vendor landing mid-wizard has no single answer to
 * "what am I doing here". It is centred because it belongs to the whole card
 * rather than to the step, which is left-aligned like the fields under it.
 */
.ulm-wizard__heading {
	margin: 0 0 4px;
	font-weight: var(--ulm-fw-semibold);
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ulm-primary);
}

.ulm-wizard__progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Keep the step indicator clear of whatever the step puts under it. */
.ulm-wizard__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 6px;
}

.ulm-wizard__dot {
	flex: 1;
	height: 6px;
	border-radius: 100px;
	background: var(--ulm-border);
	transition: background var(--ulm-duration-base) ease;
}

.ulm-wizard__dot--done,
.ulm-wizard__dot--current { background: var(--ulm-primary); }

.ulm-wizard__stepline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--ulm-ink-muted);
}

.ulm-wizard__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 4px;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 520px) {
	.ulm-auth__card { padding: 22px; }
	.ulm-auth__row { grid-template-columns: minmax(0, 1fr); }
	.ulm-wizard__actions { flex-direction: column-reverse; }
	.ulm-wizard__actions .ulm-btn { width: 100%; }
}


/* --- founding-vendor promo banner (A-03) -------------------------------- */

/*
 * Gold, full width of the column, above the form — the first thing read after
 * the wordmark. The promise it carries is the reason most vendors are on this
 * screen at all, so it is not tucked into the form's lede.
 */
.ulm-auth__promo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 20px;
	background: var(--ulm-gold);
	border-radius: 12px;
	text-align: center;
}

.ulm-auth__promo-title {
	font-weight: var(--ulm-fw-bold);
	font-size: 15px;
	color: var(--ulm-deep);
}

.ulm-auth__promo-body {
	font-size: 14px;
	color: var(--ulm-deep);
}

/* --- two-column split: form beside aside (A-03) ------------------------- */

/*
 * flex rather than grid, and the form takes an absurd grow factor on purpose:
 * the two columns sit side by side until the form can no longer hold 440px,
 * and then the aside wraps underneath by itself. A grid with fixed tracks
 * needed a breakpoint to do the same thing and got it wrong between 900 and
 * 1080 where the aside was squeezed to an unreadable width.
 */
.ulm-auth__split {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.ulm-auth__split > .ulm-auth__card {
	flex: 999 1 440px;
	min-width: 0;
}

.ulm-auth__aside {
	flex: 1 1 300px;
	max-width: 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ulm-aside-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--ulm-surface);
	border: 1px solid #E6EFEA;
	border-radius: 16px;
}

/* --- selected-plan summary (A-03 aside) --------------------------------- */

.ulm-plansum[hidden] { display: none; }

.ulm-plansum__name {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 17px;
	color: var(--ulm-deep);
}

.ulm-plansum__price {
	font-family: var(--ulm-font-numeric);
	font-weight: var(--ulm-fw-semibold);
	font-size: 26px;
	line-height: 1.2;
	color: var(--ulm-teal);
}

.ulm-plansum__features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ulm-plansum__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink);
}

.ulm-plansum__tick {
	display: grid;
	place-items: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ulm-info-bg);
	color: var(--ulm-primary);
	font-size: 11px;
	font-weight: var(--ulm-fw-bold);
}

/* --- "what happens next" steps (A-03 aside) ----------------------------- */

.ulm-steps__title {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 15px;
	color: var(--ulm-deep);
}

.ulm-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ulm-step;
}

.ulm-steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
	counter-increment: ulm-step;
}

.ulm-steps li::before {
	content: counter(ulm-step);
	display: grid;
	place-items: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ulm-tint-mint);
	color: var(--ulm-primary);
	font-size: 12px;
	font-weight: var(--ulm-fw-bold);
}

/* --- cross-link banner (A-02) ------------------------------------------- */

/*
 * Sits outside the card, between it and the back link. Someone who came to
 * register as a buyer but actually means to sell needs to find that out before
 * they fill the form in, not after.
 */
.ulm-auth__crosslink {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: var(--ulm-tint-peach);
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink);
}

.ulm-auth__crosslink-mark {
	display: grid;
	place-items: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ulm-surface);
	color: var(--ulm-warning);
	font-size: 12px;
	font-weight: var(--ulm-fw-bold);
}

.ulm-auth__crosslink a { font-weight: var(--ulm-fw-semibold); }

/* --- back to site ------------------------------------------------------- */

/*
 * The auth screens carry no site header, so this is the only way back out.
 */
.ulm-auth__back {
	text-align: center;
	font-size: 13px;
	color: var(--ulm-ink-muted);
}

.ulm-auth__back:hover { color: var(--ulm-primary); }

/* --- A-09 what a card actually commits you to --------------------------- */

/*
 * Answered before the button, not after it. Somebody deciding whether to type
 * a card number into a site they registered with four minutes ago is deciding
 * whether to trust it, and the answers are short enough to just give.
 */
.ulm-cardfacts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 16px;
	list-style: none;
	background: var(--ulm-tint-mint);
	border-radius: 12px;
}

.ulm-cardfacts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ulm-ink);
}

.ulm-cardfacts svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ulm-primary);
}