/*
 * HCGPT Membership — auth screens (register / login / lost password
 * / reset password).
 *
 * Loaded by `Assets::enqueue_auth_forms()` only on pages that
 * actually render one of the auth shortcodes
 * (`[hcgpt-membership-register]`, `[hcgpt-membership-login]`,
 * `[hcgpt-membership-lost-password]`, `[hcgpt-membership-reset-password]`).
 *
 * Design: same Playful Modern language as the pricing cards
 * (Variant D) — gradient accent, generous radii, soft shadows.
 *
 * Pattern: a `.hcgpt-mb-auth-shell` page wrapper centers the
 * card vertically + horizontally; a `.hcgpt-mb-auth-card` holds
 * the header + form + footer link.
 *
 * @package HCGPT\Membership
 */

/* ------------------------------------------------------------------
 * 0) Tokens (scoped under the auth shell so we don't bleed)
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-shell {
	--auth-bg:           #fafafa;
	--auth-surface:      #ffffff;
	--auth-surface-2:    #fafafa;
	/* Auth-card outer background. Distinct token so we can theme
	 * the card without dragging input fields / step circles /
	 * radio cards along (those keep using --auth-surface).
	 * Beta.56 (Davide's request): dark-mode value is #212121eb —
	 * #212121 with 92% alpha so the page canvas behind shows
	 * through faintly, giving the card a "glass on dark" feel. */
	--auth-card-bg:      #ffffff;
	--auth-border:       rgba(23, 23, 23, 0.08);
	--auth-border-strong: rgba(23, 23, 23, 0.15);
	--auth-text:         #171717;
	--auth-text-2:       #262626;
	--auth-muted:        #737373;
	--auth-accent:       #6e3aff;
	--auth-accent-2:     #ff3a8c;
	--auth-accent-3:     #ff8a3a;
	--auth-accent-bg:    rgba(110, 58, 255, 0.08);
	--auth-success:      #16a34a;
	--auth-success-bg:   rgba(34, 197, 94, 0.10);
	--auth-danger:       #dc2626;
	--auth-danger-bg:    rgba(239, 68, 68, 0.10);
	--auth-radius:       12px;
	--auth-radius-lg:    20px;
	--auth-shadow:       0 12px 32px -16px rgba(23, 23, 23, 0.12),
	                     0 4px 12px -4px rgba(23, 23, 23, 0.06);
	--auth-gradient:     linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%);
	--auth-gradient-soft: linear-gradient(135deg, rgba(110, 58, 255, 0.05) 0%, rgba(255, 58, 140, 0.05) 50%, rgba(255, 138, 58, 0.05) 100%);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------------------------------------------
 * 1) Page shell — full-width, centered, transparent
 *
 * Davide's call (beta.47): no painted background or ambient glow
 * — those clashed with the theme-provided page background (the
 * Themify Parallax theme on staging has its own full-page colour
 * and the gradient-soft fade on top of it looked off). The shell
 * is now purely a layout helper: full-width, vertical centering,
 * generous breathing room. The card carries the visual weight.
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-shell {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	background: transparent;
	position: relative;
}

/* ------------------------------------------------------------------
 * 2) Auth card — the main content panel
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	background: var(--auth-card-bg);
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius-lg);
	padding: 40px 36px 32px;
	box-shadow: var(--auth-shadow);
	color: var(--auth-text);
}

/* Wide variant — used by content-heavy auth-style pages (Complete
 * Profile, Checkout, Cancel Subscription) where 460 px is too
 * cramped for the form fields. Modifier added by the relevant
 * shortcode renderers, not auto-applied. */
.hcgpt-mb-auth-card.hcgpt-mb-auth-card--wide {
	max-width: 720px;
}

/* Two-column form fieldset inside auth-card — useful for
 * Complete Profile's `shared` and `business` field groups. The
 * card already has `display: flex; gap: 16px` on the form, so
 * this nested grid sits inside one of those rows. */
.hcgpt-mb-auth-card .hcgpt-mb-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

@media (max-width: 540px) {
	.hcgpt-mb-auth-card {
		padding: 28px 22px 24px;
		border-radius: 16px;
	}
}

/* ------------------------------------------------------------------
 * 3) Header
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card__header {
	margin-bottom: 28px;
	text-align: center;
}

/* Brand lockup: standalone star mark + Poppins 900 wordmark
 * arranged horizontally, BLOCK-level so the auth-card title
 * below stacks under it (Davide on staging35 beta.57: "fai
 * sì che Logo+BRAND siano centrati e sotto Create your
 * Account"). Pulls the SVG from
 * /assets/images/SOLO_LOGO-haircolorGPT-1024.svg.
 *
 * Sized down from beta.56 — 116 px was too dominant; 72 px
 * mark + 26 px wordmark sits in a more balanced visual
 * proportion with the rest of the card. */
.hcgpt-mb-brand-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto 18px;
}

.hcgpt-mb-brand-lockup__mark,
.hcgpt-mb-auth-card__logo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0;
	object-fit: contain;
	flex-shrink: 0;
}

.hcgpt-mb-brand-lockup__wordmark {
	font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--auth-text);
	white-space: nowrap;
}

@media (max-width: 540px) {
	.hcgpt-mb-brand-lockup {
		gap: 10px;
		margin-bottom: 14px;
	}
	.hcgpt-mb-brand-lockup__mark,
	.hcgpt-mb-auth-card__logo {
		width: 56px;
		height: 56px;
	}
	.hcgpt-mb-brand-lockup__wordmark {
		font-size: 20px;
	}
}

.hcgpt-mb-auth-card__title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 8px;
	background: var(--auth-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* Block-level so it stacks UNDER the brand lockup. Pre-beta.58
	 * this was `inline-block` — combined with the lockup's
	 * (then) inline-flex display + the header's text-align center
	 * the title slipped to the right of the wordmark instead of
	 * sitting on its own row. */
	display: block;
	line-height: 1.2;
}

.hcgpt-mb-auth-card__subtitle {
	font-size: 14px;
	color: var(--auth-muted);
	margin: 0 auto;
	line-height: 1.5;
	/* Force a balanced 2-line wrap (or 1-line on wider cards) so
	 * we never end up with a single orphan word like "account."
	 * on a row by itself. `text-wrap: balance` is the modern way
	 * (Chrome 114+, Safari 17.4+, FF 121+); the `max-width` is
	 * the fallback that achieves a similar effect on older
	 * browsers by constraining the line length. */
	max-width: 38ch;
	text-wrap: balance;
}

/* ------------------------------------------------------------------
 * 4) Form — overrides the legacy frontend.css grid
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card form,
.hcgpt-mb-auth-card .hcgpt-mb-register-form,
.hcgpt-mb-auth-card .hcgpt-mb-login-form,
.hcgpt-mb-auth-card .hcgpt-mb-delete-account-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: none;
}

.hcgpt-mb-auth-card label:not(.hcgpt-mb-checkbox) {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
	color: var(--auth-text);
	margin: 0;
}

.hcgpt-mb-auth-card label > span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--auth-muted);
	text-transform: uppercase;
}

/* Fieldset grouping (Complete Profile billing type, MGA invite
 * level, etc.). Lighter chrome than a plain card so it reads
 * as "section of this form" rather than "another card". */
.hcgpt-mb-auth-card fieldset {
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius);
	padding: 14px 16px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--auth-surface-2);
}

.hcgpt-mb-auth-card fieldset legend {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--auth-muted);
	padding: 0 6px;
}

/* Radio rows inside fieldset (private vs business, etc.) */
.hcgpt-mb-auth-card fieldset > label {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--auth-text);
	cursor: pointer;
}

.hcgpt-mb-auth-card fieldset > label > span {
	font-size: 14px;
	font-weight: 500;
	color: var(--auth-text);
	text-transform: none;
	letter-spacing: 0;
}

.hcgpt-mb-auth-card fieldset input[type="radio"],
.hcgpt-mb-auth-card fieldset input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--auth-accent);
}

.hcgpt-mb-auth-card input[type="text"],
.hcgpt-mb-auth-card input[type="email"],
.hcgpt-mb-auth-card input[type="password"],
.hcgpt-mb-auth-card input[type="tel"],
.hcgpt-mb-auth-card input[type="url"] {
	width: 100%;
	min-height: 0;
	padding: 12px 14px;
	font-size: 14px;
	border: 1px solid var(--auth-border-strong);
	border-radius: var(--auth-radius);
	background: var(--auth-surface);
	color: var(--auth-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	box-sizing: border-box;
}

.hcgpt-mb-auth-card input[type="text"]:focus,
.hcgpt-mb-auth-card input[type="email"]:focus,
.hcgpt-mb-auth-card input[type="password"]:focus,
.hcgpt-mb-auth-card input[type="tel"]:focus,
.hcgpt-mb-auth-card input[type="url"]:focus {
	outline: none;
	border-color: var(--auth-accent);
	box-shadow: 0 0 0 4px var(--auth-accent-bg);
}

.hcgpt-mb-auth-card input::placeholder {
	color: var(--auth-muted);
	opacity: 0.7;
}

/* ------------------------------------------------------------------
 * 5) Checkboxes (Terms / Privacy / Marketing)
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card .hcgpt-mb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--auth-text-2);
	cursor: pointer;
	line-height: 1.5;
	margin: 4px 0;
}

.hcgpt-mb-auth-card .hcgpt-mb-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--auth-accent);
	cursor: pointer;
	min-height: 0;
}

.hcgpt-mb-auth-card .hcgpt-mb-checkbox a {
	color: var(--auth-accent);
	text-decoration: none;
	font-weight: 600;
}

.hcgpt-mb-auth-card .hcgpt-mb-checkbox a:hover {
	text-decoration: underline;
}

.hcgpt-mb-auth-card .hcgpt-mb-checkbox--optional {
	color: var(--auth-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------------
 * 6) Submit button — gradient brand
 *
 * Beta.105 — Davide policy: NO full-width buttons on desktop/tablet.
 * Default state: inline-block, sensible min-width, centered via the
 * auto-margin trick. On mobile (<= 540px) the button reverts to
 * `width:100%` so the touch target is comfortable.
 *
 * The form-level `text-align: center` ensures the inline-block
 * button sits in the middle of the card. Existing layouts that
 * embed the button inside a flex container still work because
 * the button is still `display: block`.
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card button[type="submit"],
.hcgpt-mb-auth-card .hcgpt-mb-btn--primary {
	display: block;
	width: auto;
	min-width: 220px;
	max-width: 100%;
	margin: 8px auto 0;
	padding: 14px 36px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center; /* beta.106 — Davide: il <a> con display:block ereditava text-align:start dal parent, "LOG IN" finiva a sinistra. */
	text-decoration: none;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	background: var(--auth-gradient);
	color: #fff;
	box-shadow: 0 8px 20px rgba(110, 58, 255, 0.3);
	transition: all 0.18s ease;
	min-height: 0;
}

@media (max-width: 540px) {
	.hcgpt-mb-auth-card button[type="submit"],
	.hcgpt-mb-auth-card .hcgpt-mb-btn--primary {
		width: 100%;
		min-width: 0;
		padding: 14px 20px;
	}
}

.hcgpt-mb-auth-card button[type="submit"]:hover,
.hcgpt-mb-auth-card .hcgpt-mb-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(110, 58, 255, 0.4);
}

.hcgpt-mb-auth-card button[type="submit"]:focus-visible,
.hcgpt-mb-auth-card .hcgpt-mb-btn--primary:focus-visible {
	outline: 3px solid var(--auth-accent-bg);
	outline-offset: 2px;
}

.hcgpt-mb-auth-card button[type="submit"]:active,
.hcgpt-mb-auth-card .hcgpt-mb-btn--primary:active {
	transform: translateY(0);
}

/* ------------------------------------------------------------------
 * 7) Footer link
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card__footer,
.hcgpt-mb-auth-card .hcgpt-mb-register-form__login,
.hcgpt-mb-auth-card .hcgpt-mb-login-form__register {
	margin: 24px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--auth-muted);
}

.hcgpt-mb-auth-card__footer a,
.hcgpt-mb-auth-card .hcgpt-mb-register-form__login a,
.hcgpt-mb-auth-card .hcgpt-mb-login-form__register a {
	color: var(--auth-accent);
	font-weight: 600;
	text-decoration: none;
}

.hcgpt-mb-auth-card__footer a:hover,
.hcgpt-mb-auth-card .hcgpt-mb-register-form__login a:hover,
.hcgpt-mb-auth-card .hcgpt-mb-login-form__register a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * 7.5) MGA invite landing
 * ----------------------------------------------------------------*/
.hcgpt-mb-invite-shell {
	align-items: flex-start;
	min-height: 70vh;
	padding-top: 56px;
}

.hcgpt-mb-auth-card.hcgpt-mb-auth-card--invite {
	max-width: 620px;
	overflow: hidden;
	padding: 42px 42px 34px;
}

.hcgpt-mb-auth-card--invite::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--auth-gradient);
}

.hcgpt-mb-invite-card__header {
	margin-bottom: 22px;
}

.hcgpt-mb-invite-card__eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--auth-muted);
}

.hcgpt-mb-invite-card__meta {
	display: grid;
	gap: 10px;
	margin: 24px 0;
	padding: 0;
}

.hcgpt-mb-invite-card__meta-row {
	display: grid;
	grid-template-columns: minmax(120px, 0.45fr) 1fr;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius);
	background: var(--auth-surface-2);
}

.hcgpt-mb-invite-card__meta-row dt,
.hcgpt-mb-invite-card__meta-row dd {
	margin: 0;
}

.hcgpt-mb-invite-card__meta-row dt {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--auth-muted);
}

.hcgpt-mb-invite-card__meta-row dd {
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--auth-text-2);
	overflow-wrap: anywhere;
}

.hcgpt-mb-invite-card__role {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--auth-accent-bg);
	color: var(--auth-accent);
	font-size: 12px;
	font-weight: 800;
}

.hcgpt-mb-invite-card__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 26px 0 0;
}

.hcgpt-mb-auth-card .hcgpt-mb-invite-card__actions .hcgpt-mb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-decoration: none;
}

.hcgpt-mb-auth-card .hcgpt-mb-invite-card__ghost {
	min-width: 160px;
	padding: 13px 30px;
	border: 1px solid var(--auth-border-strong);
	border-radius: 999px;
	background: var(--auth-surface);
	color: var(--auth-text-2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.18s ease;
}

.hcgpt-mb-auth-card .hcgpt-mb-invite-card__ghost:hover,
.hcgpt-mb-auth-card .hcgpt-mb-invite-card__ghost:focus-visible {
	border-color: var(--auth-accent);
	color: var(--auth-accent);
}

.hcgpt-mb-invite-card__footnote {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--auth-muted);
}

.hcgpt-mb-invite-card__footer {
	margin-top: 18px;
}

@media (max-width: 600px) {
	.hcgpt-mb-invite-shell {
		min-height: auto;
		padding-top: 28px;
	}

	.hcgpt-mb-auth-card.hcgpt-mb-auth-card--invite {
		padding: 32px 22px 26px;
	}

	.hcgpt-mb-invite-card__meta-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.hcgpt-mb-invite-card__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.hcgpt-mb-auth-card .hcgpt-mb-invite-card__actions .hcgpt-mb-btn,
	.hcgpt-mb-auth-card .hcgpt-mb-invite-card__ghost {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * 8) Inline notices (success / error from form submit)
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card .hcgpt-mb-notice {
	padding: 12px 16px;
	border-radius: var(--auth-radius);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 4px;
}

.hcgpt-mb-auth-card .hcgpt-mb-notice--success {
	background: var(--auth-success-bg);
	color: #14532d;
	border-left: 3px solid var(--auth-success);
}

.hcgpt-mb-auth-card .hcgpt-mb-notice--error,
.hcgpt-mb-auth-card .hcgpt-mb-notice--danger {
	background: var(--auth-danger-bg);
	color: #7f1d1d;
	border-left: 3px solid var(--auth-danger);
}

/* ------------------------------------------------------------------
 * 9) Plan hint banner (when arriving via /join-now/{slug}/)
 *
 * The Smart Signup Endpoint adds a query so we can show the
 * registering user which plan they're about to subscribe to.
 * Renders inside the card, before the form.
 * ----------------------------------------------------------------*/
.hcgpt-mb-auth-card__plan-hint {
	background: var(--auth-accent-bg);
	border: 1px solid rgba(110, 58, 255, 0.2);
	border-radius: var(--auth-radius);
	padding: 12px 14px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--auth-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

.hcgpt-mb-auth-card__plan-hint::before {
	content: '✨';
	font-size: 18px;
}

.hcgpt-mb-auth-card__plan-hint strong {
	color: var(--auth-accent);
}

/* ------------------------------------------------------------------
 * 9.A) Multi-step register form (beta.53 Treatwell-style)
 *
 * - `.hcgpt-mb-stepper` is the breadcrumb-style 1·2·3·4 indicator
 *   above the form. It's pure CSS — no JS needed for visual state,
 *   just toggle `.is-active` on the matching `<li>`.
 * - `.hcgpt-mb-step` are the four `<fieldset>` panels. Only one is
 *   visible at a time (`is-active`); the others are display:none.
 *   Without JS the form gracefully degrades to a long-form (see
 *   the `:not(.has-stepper)` fallback at the bottom of this block).
 * - `.hcgpt-mb-radio-cards` / `.hcgpt-mb-multiselect-cards` are
 *   tap-friendly card grids — inputs are visually hidden but
 *   accessible; selection state is conveyed with border + bg
 *   on the parent label.
 * ----------------------------------------------------------------*/

.hcgpt-mb-auth-card--stepper {
	max-width: 560px;
}

.hcgpt-mb-stepper {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	justify-content: space-between;
	gap: 4px;
	counter-reset: hcgpt-step;
}

.hcgpt-mb-stepper__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--auth-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	position: relative;
}

.hcgpt-mb-stepper__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--auth-border-strong);
	background: var(--auth-surface);
	color: var(--auth-muted);
	font-size: 13px;
	font-weight: 700;
	transition: all 0.18s ease;
	/* Beta.56: clip the gradient to the rounded shape. Without
	 * `background-clip: padding-box` + `overflow: hidden`, certain
	 * theme stylesheets (parallax-child / app-shell) inject
	 * background-image rules with `background-clip: border-box`
	 * that bleed the gradient onto the border square, producing
	 * the "quadrato all'interno del cerchio" Davide reported on
	 * staging35 beta.55. */
	background-clip: padding-box;
	overflow: hidden;
}

.hcgpt-mb-stepper__item.is-active span {
	background: var(--auth-gradient);
	background-clip: padding-box;
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(110, 58, 255, 0.25);
}

.hcgpt-mb-stepper__item.is-done span {
	background: var(--auth-accent);
	color: #fff;
	border-color: transparent;
}

.hcgpt-mb-stepper__item.is-done span::before {
	content: '✓';
}

.hcgpt-mb-stepper__item.is-done span > * {
	display: none;
}

.hcgpt-mb-stepper__item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 16px;
	left: calc(50% + 18px);
	right: calc(-50% + 18px);
	height: 2px;
	background: var(--auth-border);
	z-index: -1;
}

.hcgpt-mb-stepper__item.is-done:not(:last-child)::after,
.hcgpt-mb-stepper__item.is-active:not(:last-child)::after {
	background: var(--auth-accent);
}

.hcgpt-mb-stepper__item small {
	font-weight: 600;
}

/* Step panels.
 *
 * Specificity note: the auth-forms.css already carries an earlier
 * rule `.hcgpt-mb-auth-card fieldset { display: flex; ... }` for
 * the legacy single-step register form. That rule has specificity
 * (0,2,0) and would override a plain `.hcgpt-mb-step` (0,1,0),
 * leaving every step visible at once (the bug Davide hit on
 * beta.53). Scoping the step rules under `.hcgpt-mb-auth-card`
 * lifts them to (0,2,0) and adding `.is-active` to the visible
 * variant makes it (0,3,0) so it wins cleanly without `!important`.
 */
.hcgpt-mb-auth-card .hcgpt-mb-step {
	/* Override the legacy `.hcgpt-mb-auth-card fieldset` rule
	 * (lines ~190 of this file). That rule paints fieldsets with
	 * a soft surface-2 background, a thin border, padding and
	 * radius — which is correct for "section card" fieldsets in
	 * Complete Profile / MGA, but for the multi-step register
	 * panels we want NO chrome at all (the auth-card itself is
	 * the chrome). On staging35 beta.54 Davide flagged this as
	 * "secondo background grigio antracite, sembra deformato"
	 * because radio/multiselect cards spilled outside the inner
	 * box, making the inner card look like it only wrapped the
	 * legend+hint area. Resetting all the inherited fieldset
	 * decorations brings the step panel flush with the auth-card. */
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	display: none;
}

.hcgpt-mb-auth-card .hcgpt-mb-step.is-active {
	display: block;
	animation: hcgpt-mb-step-in 0.22s ease-out;
}

@keyframes hcgpt-mb-step-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hcgpt-mb-step__legend {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 6px;
	padding: 0;
	width: 100%;
}

.hcgpt-mb-step__legend small {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--auth-accent);
}

.hcgpt-mb-step__legend span {
	font-size: 20px;
	font-weight: 700;
	color: var(--auth-text);
	line-height: 1.3;
}

.hcgpt-mb-step__hint {
	margin: 0 0 18px;
	color: var(--auth-muted);
	font-size: 14px;
	line-height: 1.5;
}

.hcgpt-mb-step__actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.hcgpt-mb-step__actions .hcgpt-mb-btn {
	flex: 1 1 0;
}

.hcgpt-mb-step__actions .hcgpt-mb-btn--ghost {
	/* Mirror the primary button's dimensions so BACK and CONTINUE
	 * share the same height + radius (Davide on staging35 beta.56:
	 * "il pulsante BACK sembra ciccione rispetto a CONTINUE").
	 *
	 * Why this rule has to repeat the size box: the
	 * `.hcgpt-mb-auth-card .hcgpt-mb-btn--primary` selector at the
	 * top of section 6 only matches `--primary` — so without an
	 * equivalent rule for `--ghost`, BACK fell through to browser
	 * defaults + the parallax-child theme's generic <button>
	 * styling, which paints it as a small circular blob.
	 *
	 * `flex: 0 0 auto` keeps BACK at its natural width (sized to
	 * the label) while CONTINUE keeps `flex: 1 1 0` and stretches
	 * to fill the remaining row.
	 */
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	margin-top: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	background: transparent;
	color: var(--auth-text-2);
	border: 1px solid var(--auth-border-strong);
	box-shadow: none;
	cursor: pointer;
	transition: all 0.18s ease;
	min-height: 0;
	min-width: 96px; /* avoid the "tiny circle" look on short labels */
	line-height: 1;
}

.hcgpt-mb-step__actions .hcgpt-mb-btn--ghost:hover {
	background: var(--auth-surface-2);
	border-color: var(--auth-text-2);
	transform: none;
	box-shadow: none;
}

.hcgpt-mb-step__actions .hcgpt-mb-btn--ghost:focus-visible {
	outline: 3px solid var(--auth-accent-bg);
	outline-offset: 2px;
}

/* Radio / multiselect card grids */
.hcgpt-mb-radio-cards,
.hcgpt-mb-multiselect-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin: 0 0 8px;
}

.hcgpt-mb-radio-card,
.hcgpt-mb-multiselect-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1.5px solid var(--auth-border-strong);
	border-radius: var(--auth-radius);
	background: var(--auth-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.hcgpt-mb-radio-card input,
.hcgpt-mb-multiselect-card input {
	/* Visually hidden but still focusable / clickable via the label */
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.hcgpt-mb-radio-card:hover,
.hcgpt-mb-multiselect-card:hover {
	border-color: var(--auth-accent);
	background: var(--auth-surface-2);
}

.hcgpt-mb-radio-card:has(input:checked),
.hcgpt-mb-multiselect-card:has(input:checked) {
	border-color: var(--auth-accent);
	background: var(--auth-accent-bg);
	box-shadow: 0 0 0 3px rgba(110, 58, 255, 0.10);
}

/* Fallback for browsers without :has() — JS toggles .is-checked */
.hcgpt-mb-radio-card.is-checked,
.hcgpt-mb-multiselect-card.is-checked {
	border-color: var(--auth-accent);
	background: var(--auth-accent-bg);
	box-shadow: 0 0 0 3px rgba(110, 58, 255, 0.10);
}

.hcgpt-mb-radio-card__title,
.hcgpt-mb-multiselect-card span:first-of-type {
	font-weight: 600;
	font-size: 14px;
	color: var(--auth-text);
}

.hcgpt-mb-radio-card__hint {
	font-size: 12px;
	color: var(--auth-muted);
	line-height: 1.4;
}

.hcgpt-mb-multiselect-card {
	flex-direction: row;
	align-items: center;
	min-height: 48px;
}

/* Per-step error feedback (rendered by stepper JS when validation fails) */
.hcgpt-mb-step__error {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--auth-danger-bg);
	border-left: 3px solid var(--auth-danger);
	border-radius: var(--auth-radius);
	color: #7f1d1d;
	font-size: 13px;
	line-height: 1.5;
	display: none;
}

.hcgpt-mb-step__error.is-visible {
	display: block;
}

/* ------------------------------------------------------------------
 * 9.B) Graceful degradation — when JS hasn't activated the stepper
 *
 * The form ships with `data-stepper` but no `.has-stepper` class.
 * The stepper JS adds `.has-stepper` once it's wired up. Until
 * then (or if JS is disabled entirely), all four steps are visible
 * as a long form so the user can still complete signup.
 * ----------------------------------------------------------------*/
.hcgpt-mb-register-form:not(.has-stepper) .hcgpt-mb-step {
	display: block;
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--auth-border);
}

.hcgpt-mb-register-form:not(.has-stepper) .hcgpt-mb-step:last-of-type {
	border-bottom: 0;
}

.hcgpt-mb-register-form:not(.has-stepper) .hcgpt-mb-step__actions [data-action="back"],
.hcgpt-mb-register-form:not(.has-stepper) .hcgpt-mb-step__actions [data-action="next"] {
	display: none;
}

.hcgpt-mb-register-form:not(.has-stepper) .hcgpt-mb-stepper {
	display: none;
}

/* ------------------------------------------------------------------
 * 10) Dark-mode tweaks (rely on user system preference)
 * ----------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
	/* Apply dark tokens by default in dark systems, but `body.hcgpt-theme-light`
	   below explicitly forces light tokens to win when the user has manually
	   selected the Light tone via the header switcher. */
	body:not(.hcgpt-theme-light) .hcgpt-mb-auth-shell {
		--auth-bg:           #0a0a0a;
		--auth-surface:      #171717;
		--auth-surface-2:    #262626;
		/* Dark-mode auth-card outer background — Davide's spec
		 * beta.56. `#212121eb` = #212121 with 92% alpha so the
		 * page canvas behind shows through faintly. The other
		 * dark surfaces (inputs, step circles, radio cards)
		 * still use --auth-surface so they read as opaque
		 * elements ON the card. */
		--auth-card-bg:      #212121eb;
		--auth-border:       rgba(255, 255, 255, 0.08);
		--auth-border-strong: rgba(255, 255, 255, 0.15);
		--auth-text:         #f5f5f5;
		--auth-text-2:       #e5e5e5;
		--auth-muted:        #a3a3a3;
		--auth-accent-bg:    rgba(110, 58, 255, 0.18);
		--auth-shadow:       0 16px 40px -16px rgba(0, 0, 0, 0.4),
		                     0 4px 12px -4px rgba(0, 0, 0, 0.2);
	}
	body:not(.hcgpt-theme-light) .hcgpt-mb-auth-card .hcgpt-mb-notice--success { color: #86efac; }
	body:not(.hcgpt-theme-light) .hcgpt-mb-auth-card .hcgpt-mb-notice--error,
	body:not(.hcgpt-theme-light) .hcgpt-mb-auth-card .hcgpt-mb-notice--danger { color: #fca5a5; }
}

/* ------------------------------------------------------------------
 * 12) Manual theme switcher — `body.hcgpt-theme-light` /
 *     `body.hcgpt-theme-dark`. These take precedence over the
 *     `prefers-color-scheme` media block above so the header
 *     Light/Dark/System toggle has the final word.
 * ----------------------------------------------------------------*/
body.hcgpt-theme-dark .hcgpt-mb-auth-shell {
	--auth-bg:           #0a0a0a;
	--auth-surface:      #171717;
	--auth-surface-2:    #262626;
	--auth-card-bg:      #212121eb;
	--auth-border:       rgba(255, 255, 255, 0.08);
	--auth-border-strong: rgba(255, 255, 255, 0.15);
	--auth-text:         #f5f5f5;
	--auth-text-2:       #e5e5e5;
	--auth-muted:        #a3a3a3;
	--auth-accent-bg:    rgba(110, 58, 255, 0.18);
	--auth-shadow:       0 16px 40px -16px rgba(0, 0, 0, 0.4),
	                     0 4px 12px -4px rgba(0, 0, 0, 0.2);
}
body.hcgpt-theme-dark .hcgpt-mb-auth-card .hcgpt-mb-notice--success { color: #86efac; }
body.hcgpt-theme-dark .hcgpt-mb-auth-card .hcgpt-mb-notice--error,
body.hcgpt-theme-dark .hcgpt-mb-auth-card .hcgpt-mb-notice--danger { color: #fca5a5; }

/* `.hcgpt-theme-light` doesn't need explicit token overrides — the
   default tokens at the top of this file already paint a light card.
   We only need to ensure the dark-scheme media block doesn't bleed
   in, which is handled by `body:not(.hcgpt-theme-light)` above. */

/* ===================================================================
 * 11. StatusPage — confirmation/status pages (account-deleted,
 *     email-verified, thank-you, contact, etc.)
 *     Reuses .hcgpt-mb-auth-shell + .hcgpt-mb-auth-card from sections
 *     1-2 above; only the CTA row + nested-content body need extras.
 * ================================================================ */

.hcgpt-mb-status-card__body {
	margin-top: 12px;
	color: var(--auth-text-2);
	font-size: 15px;
	line-height: 1.55;
}
.hcgpt-mb-status-card__body > *:last-child { margin-bottom: 0; }

.hcgpt-mb-status-card__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	margin-top: 24px;
}

/* Primary button is already styled by `.hcgpt-mb-auth-card .hcgpt-mb-btn--primary`
   (section 6 above) — nothing to add here. We just override the row layout
   so the primary fills available width when alone, and shares the row when
   paired with a secondary. */
.hcgpt-mb-status-card__cta .hcgpt-mb-btn--primary {
	flex: 1 1 200px;
}

/* Secondary ghost button — promoted out of `.hcgpt-mb-step__actions`
   scope so it works inside status cards too. Mirrors the section 6
   ghost styling but slightly smaller to feel "secondary". */
.hcgpt-mb-status-card__cta .hcgpt-mb-btn--ghost {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	background: transparent;
	color: var(--auth-text-2);
	border: 1px solid var(--auth-border-strong);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.18s ease;
	min-height: 0;
	line-height: 1;
}
.hcgpt-mb-status-card__cta .hcgpt-mb-btn--ghost:hover {
	background: var(--auth-surface-2);
	border-color: var(--auth-text-2);
}
.hcgpt-mb-status-card__cta .hcgpt-mb-btn--ghost:focus-visible {
	outline: 3px solid var(--auth-accent-bg);
	outline-offset: 2px;
}

/* Mobile: stack both CTAs full-width for thumb-friendly targets. */
@media (max-width: 480px) {
	.hcgpt-mb-status-card__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.hcgpt-mb-status-card__cta .hcgpt-mb-btn--primary,
	.hcgpt-mb-status-card__cta .hcgpt-mb-btn--ghost {
		flex: 1 1 auto;
		width: 100%;
	}
}