/* ==========================================================================
   Lokify — auth (sign up / verify) design system
   Tokens below are pulled from the Zeplin project "Lokify" (web), not eyeballed:
     colors      -> project colour styles (PurpleBrand / Purple / Neutral / Red)
     type scale  -> project text styles (SF Pro; Display and Text ramps)
     geometry    -> "Sign Up/Freelancer" screen (1520x982)
   Standalone: intentionally does NOT depend on the legacy Elementor stylesheets.
   ========================================================================== */

:root {
	/* ── PurpleBrand ── */
	--brand-50:  #EAE6F1;
	--brand-100: #BFB0D2;
	--brand-300: #74549F;
	--brand-500: #30006F;   /* brand base — matches kPrimaryColor in the app */
	--brand-600: #2C0065;   /* primary button fill */
	--brand-700: #22004F;
	--brand-900: #14002F;

	/* ── Purple (accent / focus) ── */
	--purple-50:  #F9F5FF;
	--purple-200: #E9D7FE;
	--purple-400: #B692F6;
	--purple-500: #9E77ED;
	--purple-600: #7F56D9;
	--focus-ring: #A855F7;  /* input focus border, per the Email field in the mock */

	/* ── Neutrals ── */
	--white:       #FFFFFF;
	--neutral-50:  #FAFAFA;
	--neutral-100: #F5F5F5;
	--neutral-200: #E5E5E5;
	--neutral-300: #D4D4D4;  /* input border */
	--neutral-400: #A3A3A3;  /* placeholder */
	--neutral-500: #737373;  /* helper text */
	--neutral-600: #525252;
	--neutral-700: #404040;
	--neutral-900: #171717;  /* body text */
	--neutral-950: #0A0A0A;

	/* ── Feedback ── */
	--red-50:  #FEF2F2;
	--red-300: #FCA5A5;
	--red-600: #DC2626;
	--red-700: #B91C1C;
	--green-50:  #F0FDF4;
	--green-300: #86EFAC;
	--green-700: #15803D;

	/* ── Type scale (px sizes / line-heights straight from Zeplin) ── */
	--text-xs:   12px;  --lh-xs:   18px;
	--text-sm:   14px;  --lh-sm:   20px;
	--text-md:   16px;  --lh-md:   24px;
	--text-lg:   18px;  --lh-lg:   28px;
	--text-xl:   20px;  --lh-xl:   30px;
	--display-xs: 24px; --lh-dxs:  32px;
	--display-sm: 30px; --lh-dsm:  38px;
	--display-md: 36px; --lh-dmd:  44px;
	--display-lg: 48px; --lh-dlg:  60px;

	/* Design is SF Pro; Inter is the closest widely-available web fallback and
	   keeps the same metrics feel. Apple platforms pick up SF via -apple-system. */
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
	        "Inter", "Segoe UI", system-ui, sans-serif;

	--radius: 8px;          /* inputs + buttons, per Zeplin */
	--radius-lg: 12px;

	--form-w: 477px;        /* form column width in the 1520px design */
	--panel-w: 607px;       /* testimonial panel width */
	--field-h: 44px;
	--btn-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.lok-auth {
	margin: 0;
	font-family: var(--font);
	font-size: var(--text-md);
	line-height: var(--lh-md);
	color: var(--neutral-900);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

/* ── Two-panel shell ──────────────────────────────────────────────────────
   The design is 913px form side + 607px panel at 1520px wide. The panel is
   given a fixed track so it keeps its proportions on wide screens, then is
   dropped below the form under 960px rather than being squeezed. */
.lok-shell {
	display: grid;
	/* The design is 913px form + 607px panel at 1520px wide — a 60/40 split.
	   A fixed 607px track only holds that ratio at exactly 1520px: narrower and
	   the panel crowds the form (55% at 1100px), wider and it shrinks away
	   (32% on a 1900px screen), leaving the form side visibly heavier. A plain
	   percentage keeps the designed balance at every width. */
	grid-template-columns: 1fr 40%;
	min-height: 100vh;
}

.lok-form-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 128px 32px 64px;   /* logo sits at y=128 in the design */
	overflow-y: auto;
}

.lok-form-inner {
	width: 100%;
	max-width: var(--form-w);
}

/* ── Brand ── */
.lok-logo {
	display: block;
	width: 150px;
	/* Zeplin: logo box ends at y=169, heading starts at y=208 => 39px. */
	margin: 0 auto 39px;
}

.lok-logo img { display: block; width: 100%; height: auto; }

/* ── Headings ── */
.lok-title {
	/* Zeplin: heading ends at y=246, first field label starts at y=286 => 40px.
	   Pages that pair the heading with a subtitle override this below. */
	margin: 0 0 40px;
	font-size: var(--display-sm);
	font-weight: 700;
	line-height: var(--lh-dsm);
	color: var(--neutral-950);
	text-align: center;
	letter-spacing: -.01em;
}

.lok-title:has(+ .lok-subtitle) { margin-bottom: 8px; }

.lok-subtitle {
	margin: 0 0 56px;
	font-size: var(--text-lg);
	font-weight: 400;
	line-height: var(--lh-lg);
	color: var(--neutral-700);
	text-align: center;
}

/* ── Role picker ──────────────────────────────────────────────────────────
   Real radios kept visually hidden so keyboard nav and form semantics work;
   the label is the visible target. */
.lok-roles {
	display: flex;
	gap: 48px;
	justify-content: center;
	padding: 0;
	margin: 0 0 72px;
	border: 0;
}

/* Both cards take the width of the widest one so the pair stays symmetrical
   about the centre line, while still being wide enough for the longer label. */
.lok-role { flex: 0 1 auto; }

.lok-role-card { min-width: 207px; }

.lok-role input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.lok-role-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px 16px;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.lok-role-card:hover { transform: translateY(-2px); }

.lok-role-card img {
	width: 150px;
	height: 150px;
	object-fit: contain;
}

.lok-role-card span {
	font-size: var(--display-xs);
	font-weight: 500;
	line-height: var(--lh-dxs);
	color: var(--neutral-900);
	/* "Business Owner" must stay on one line. The gap between the label width
	   and the card is small, so a slightly wider font metric than the one this
	   was measured against is enough to break it onto two lines — nowrap makes
	   that impossible regardless of which font actually resolves. */
	white-space: nowrap;
}

.lok-role input:checked + .lok-role-card {
	background: var(--purple-50);
	border-color: var(--purple-600);
}

.lok-role input:focus-visible + .lok-role-card {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ── Fields ── */
.lok-field { margin-bottom: 32px; }

/* Two fields on one row (First / Last name) */
.lok-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.lok-field label,
.lok-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--neutral-900);
}

.lok-input,
.lok-select,
.lok-textarea {
	width: 100%;
	height: var(--field-h);
	padding: 10px 14px;
	font-family: inherit;
	font-size: var(--text-md);
	line-height: var(--lh-md);
	color: var(--neutral-900);
	background: var(--white);
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lok-textarea { height: auto; min-height: 96px; resize: vertical; }

.lok-input::placeholder,
.lok-textarea::placeholder { color: var(--neutral-400); }

.lok-input:focus,
.lok-select:focus,
.lok-textarea:focus {
	outline: none;
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
}

/* Invalid is applied by JS after a submit attempt, not via :invalid, so errors
   never appear while the user is still typing their first character. */
.lok-input.is-invalid,
.lok-select.is-invalid,
.lok-textarea.is-invalid {
	border-color: var(--red-600);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.lok-hint {
	margin: 6px 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--neutral-500);
}

.lok-error {
	display: none;
	margin: 6px 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--red-600);
}

.lok-error.show { display: block; }

/* ── Phone: country code select + number, inside one bordered box ── */
.lok-phone {
	display: flex;
	align-items: center;
	height: var(--field-h);
	background: var(--white);
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lok-phone:focus-within {
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
}

.lok-phone.is-invalid {
	border-color: var(--red-600);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.lok-phone select {
	height: 100%;
	padding: 0 24px 0 14px;
	font: inherit;
	font-size: var(--text-md);
	color: var(--neutral-900);
	appearance: none;
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		no-repeat right 8px center;
	border: 0;
	cursor: pointer;
}

.lok-phone select:focus { outline: none; }

/* The inner input carries no border of its own — the wrapper owns it. */
.lok-phone input {
	flex: 1;
	height: 100%;
	min-width: 0;
	padding: 0 14px 0 4px;
	font: inherit;
	font-size: var(--text-md);
	color: var(--neutral-900);
	background: none;
	border: 0;
}

.lok-phone input:focus { outline: none; }
.lok-phone input::placeholder { color: var(--neutral-400); }

/* ── Password reveal ── */
.lok-password { position: relative; }

.lok-password .lok-input { padding-right: 44px; }

.lok-reveal {
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	padding: 6px;
	color: var(--neutral-400);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 6px;
	transform: translateY(-50%);
}

.lok-reveal:hover { color: var(--neutral-600); }

.lok-reveal:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

/* ── Terms ── */
.lok-terms {
	/* Zeplin: terms sit at y=748 and the button at y=792. The password field
	   carries a hint line under it that the frame does not show, so the top
	   margin absorbs the difference to keep both on their designed baselines. */
	margin: 55px 0 24px;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--neutral-700);
	text-align: center;
}

.lok-terms a {
	font-weight: 600;
	color: var(--brand-500);
	text-decoration: none;
}

.lok-terms a:hover { text-decoration: underline; }

/* Checkbox variant, used when explicit consent must be recorded. */
.lok-terms-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 24px 0 16px;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--neutral-700);
	text-align: left;
}

.lok-terms-check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--brand-600);
}

/* ── Buttons ── */
.lok-btn {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--btn-h);
	padding: 0 20px;
	font-family: inherit;
	font-size: var(--text-md);
	font-weight: 600;
	line-height: var(--lh-md);
	color: var(--white);
	cursor: pointer;
	background: var(--brand-600);
	border: 1px solid var(--brand-600);
	border-radius: var(--radius);
	transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}

.lok-btn:hover:not(:disabled) {
	background: var(--brand-700);
	border-color: var(--brand-700);
}

.lok-btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.lok-btn:disabled { cursor: not-allowed; }

/* Idle "Continue" before a role is picked: grey, per the design. */
.lok-btn.is-idle:disabled {
	color: var(--neutral-400);
	background: var(--neutral-200);
	border-color: var(--neutral-200);
}

.lok-btn-ghost {
	color: var(--brand-600);
	background: none;
	border: 1px solid var(--neutral-300);
}

.lok-btn-ghost:hover:not(:disabled) {
	background: var(--neutral-50);
	border-color: var(--neutral-400);
}

.lok-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: var(--white);
	border-radius: 50%;
	animation: lok-spin .7s linear infinite;
}

.lok-btn.is-busy .lok-spinner { display: block; }

@keyframes lok-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.lok-spinner { animation-duration: 2s; }
	.lok-role-card:hover { transform: none; }
}

/* ── Footer link ── */
.lok-alt {
	margin-top: 16px;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--neutral-700);
	text-align: center;
}

.lok-alt a {
	font-weight: 600;
	color: var(--brand-500);
	text-decoration: none;
}

.lok-alt a:hover { text-decoration: underline; }

/* ── Form-level status ── */
.lok-status {
	display: none;
	padding: 11px 14px;
	margin-bottom: 20px;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	border-radius: var(--radius);
}

.lok-status.show { display: block; }

.lok-status.is-error {
	color: var(--red-700);
	background: var(--red-50);
	border: 1px solid var(--red-300);
}

.lok-status.is-success {
	color: var(--green-700);
	background: var(--green-50);
	border: 1px solid var(--green-300);
}

/* ── Role-conditional groups ── */
[data-role-only] { display: none; }
[data-role-only].show { display: block; }

/* ── Testimonial panel ────────────────────────────────────────────────────
   Flat brand fill with a soft violet bloom in the lower right, matching the
   Zeplin render (the panel is #30006F with a radial highlight, not a linear
   gradient corner to corner). */
.lok-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 59px 50px 60px;
	overflow: hidden;
	color: var(--white);
	background: var(--brand-500);
}

/* The panel is decoration beside a form that can be much taller than the
   screen (the signup details step runs past 1000px). Letting it stretch to the
   document height strands the tagline hundreds of pixels below the fold, so
   the user sees an empty purple column. Sticking it to the viewport keeps the
   quote and the tagline framed together no matter how long the form gets. */
@media (min-width: 641px) {
	.lok-panel {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100dvh;
	}
}

.lok-panel::after {
	position: absolute;
	right: -25%;
	bottom: -30%;
	width: 95%;
	padding-top: 95%;
	content: "";
	background: radial-gradient(circle, rgba(140, 70, 240, .75) 0%,
	                                    rgba(90, 30, 190, .35) 45%,
	                                    transparent 70%);
	pointer-events: none;
}

.lok-quote {
	position: relative;
	z-index: 1;
	/* 501px is the design's measure at a 607px panel. Once the panel grows past
	   that on a wide screen, holding the cap leaves a large empty gutter, so the
	   quote is allowed to scale with the panel while keeping a readable limit. */
	max-width: min(640px, 100%);
	margin: 0;
}

.lok-quote p {
	margin: 0 0 20px;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 22px;
	color: var(--white);
}

.lok-quote figcaption {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lok-quote img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}

.lok-quote-name {
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: var(--lh-xs);
}

.lok-quote-role {
	font-size: var(--text-xs);
	font-weight: 400;
	line-height: var(--lh-xs);
	color: rgba(255, 255, 255, .72);
}

/* "Work together." is 36px, "Grow together." 48px — two distinct sizes. */
.lok-panel-tagline {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--display-lg);
	font-weight: 700;
	line-height: var(--lh-dlg);
	letter-spacing: -.02em;
}

.lok-panel-tagline span {
	display: block;
	font-size: var(--display-md);
	line-height: var(--lh-dmd);
}

/* ── OTP / verify ── */
.lok-otp {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 8px 0 24px;
}

.lok-otp input {
	width: 56px;
	height: 64px;
	font-family: inherit;
	font-size: var(--display-xs);
	font-weight: 600;
	color: var(--neutral-900);
	text-align: center;
	background: var(--white);
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lok-otp input:focus {
	outline: none;
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
}

.lok-otp input.is-invalid { border-color: var(--red-600); }

.lok-resend {
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--neutral-700);
	text-align: center;
}

.lok-resend button {
	font: inherit;
	font-weight: 600;
	color: var(--brand-500);
	cursor: pointer;
	background: none;
	border: 0;
}

.lok-resend button:disabled {
	color: var(--neutral-400);
	cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 960px) {
	.lok-shell { grid-template-columns: 1fr; }

	.lok-form-side { padding: 56px 24px 48px; }

	/* Stacked below the form, the panel is pure decoration that the user must
	   scroll past to finish. Trim it to the tagline and drop the testimonial,
	   which is the tall part. */
	.lok-panel {
		gap: 24px;
		padding: 32px 28px;
	}

	.lok-panel-tagline { font-size: var(--display-md); line-height: var(--lh-dmd); }
	.lok-panel-tagline span { font-size: var(--display-sm); line-height: var(--lh-dsm); }
}

/* On phones the panel was ~35% of the total scroll height on the signup and
   login pages — a third of the page spent scrolling past a quote. Below 640px
   it is removed entirely; the logo at the top of the form already carries the
   brand, so nothing functional is lost. */
/* Wizard pages keep their logo in the panel, so they carry a form-side copy
   that only appears once that panel is gone. */
.lok-logo--mobile { display: none; }

@media (max-width: 640px) {
	.lok-panel { display: none; }

	.lok-logo--mobile { display: block; margin-bottom: 32px; }

	.lok-form-side {
		min-height: 100vh;
		padding: 40px 20px 40px;
	}
}

@media (max-width: 560px) {
	.lok-roles { gap: 16px; }

	/* Drop the desktop min-width: two 207px cards plus the gap cannot fit a
	   360px phone, and the fixed width was silently clipping the second card. */
	.lok-role { flex: 1 1 0; }
	.lok-role-card { min-width: 0; gap: 12px; padding: 16px 8px; }
	.lok-role-card img { width: 104px; height: 104px; }
	.lok-role-card span { font-size: var(--text-lg); line-height: var(--lh-lg); }

	/* Name fields stack rather than cramping to ~120px each. */
	.lok-row { grid-template-columns: 1fr; gap: 0; }

	.lok-otp { gap: 8px; }
	.lok-otp input { width: 44px; height: 56px; font-size: var(--text-xl); }
}

/* ── Forgot-password link row ── */
.lok-forgot {
	display: flex;
	justify-content: flex-end;
	margin: -8px 0 24px;
}

.lok-forgot a {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--brand-500);
	text-decoration: none;
}

.lok-forgot a:hover { text-decoration: underline; }

/* Buttons rendered as links must not pick up the default anchor underline. */
a.lok-btn, a.lok-btn:hover { text-decoration: none; }

/* Login sits the heading ~158px below the logo with no subtitle beneath it
   (Zeplin "Log in": logo y=128, "Welcome Back!" y=286). */
/* The 158px logo-to-heading gap is applied to the logo, not the heading: the
   heading is the form column's first child, so its own margin-top collapses. */
.lok-logo--login { margin-bottom: 116px; }

.lok-title--spaced { margin-bottom: 40px; }

/* Login aligns "Forgot Password?" to the start of the field column, unlike the
   right-aligned treatment used elsewhere. */
.lok-forgot--start { justify-content: flex-start; margin: -8px 0 24px; }

/* Invalid fields show an alert glyph inside the field, per the Zeplin
   "Log in/Errors" screen. Applied as a background so it needs no extra markup
   and never interferes with the input's own value. */
.lok-input.is-invalid {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* The reveal button would collide with the alert glyph, so shift the icon left
   of it on password fields. */
.lok-password .lok-input.is-invalid {
	padding-right: 68px;
	background-position: right 40px center;
}

/* On short viewports (a 768px-tall laptop) the design's generous 128px top
   padding and 116px logo gap push the form just past the fold. Tighten both so
   the whole card fits without scrolling; the proportions are unchanged above. */
@media (min-width: 961px) and (max-height: 820px) {
	.lok-form-side { padding-top: 64px; }
	.lok-logo--login { margin-bottom: 64px; }
	.lok-title--spaced { margin-bottom: 32px; }
}