/**
 * The logged-out account screen.
 *
 * Styles markup that belongs to Magic Login and Nextend rather than to us —
 * their forms, our screen. That is the deliberate trade: the plugins keep every
 * security-sensitive step (token, expiry, single use, brute-force banning,
 * Turnstile verification) and we keep the appearance. A plugin update that
 * changes their markup costs a stylesheet fix, not a broken sign-in.
 *
 * Selectors below therefore follow their class names on purpose.
 *
 * @package Purovitalis
 */

.pv-auth {
	background: var(--pv-surface-background);
	padding: clamp(40px, 8vw, 96px) var(--pv-gutter);
}

.pv-auth__inner {
	margin: 0 auto;
	max-width: 30rem;
	width: 100%;
}

.pv-auth__brand {
	display: block;
	line-height: 0;
	margin: 0 0 32px;
}

.pv-auth__logo {
	height: auto;
	width: 132px;
}

.pv-auth__title {
	color: var(--pv-text);
	font-family: var(--pv-font-heading);
	font-size: clamp(26px, 4vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 8px;
}

.pv-auth__sub {
	color: var(--pv-neutral-300);
	font-size: 16px;
	margin: 0 0 28px;
}

.pv-auth__legal {
	color: var(--pv-neutral-300);
	font-size: 13px;
	line-height: 1.5;
	margin: 16px 0 0;
}

.pv-auth__legal a {
	color: inherit;
}

.pv-auth__aside {
	color: var(--pv-neutral-300);
	font-size: 14px;
	margin: 24px 0 0;
	text-align: center;
}

/* --- Magic Login's form ------------------------------------------------- */

/*
 * The plugin prints its own "Quick Login with Magic Link" heading and a
 * "Please enter your username or email address" note. Both restate what the
 * screen's own title and subtitle say, in the plugin's words rather than ours.
 * The message paragraph is left in the DOM — its container is where the AJAX
 * response writes errors — but the static intro copy is not shown.
 */
.pv-auth .magic-login-woo-account > .woocommerce-form-title {
	display: none;
}

/*
 * The header is where the plugin writes its AJAX status — "Sending…", then the
 * confirmation or the error. It must stay visible. An earlier version hid
 * `.magic-login-form-header > p.message` to suppress the static intro copy, and
 * that selector also matched every message the plugin injected afterwards: the
 * confirmation rendered with the right text and zero visible height, so a
 * successful send looked exactly like nothing happening. auth.js removes the
 * intro node instead, once, so nothing injected later is affected.
 */
.pv-auth .magic-login-form-header,
.pv-auth .magic-login-code-form-header {
	font-size: 15px;
	line-height: 1.5;
}

.pv-auth .magic-login-form-header p,
.pv-auth .magic-login-code-form-header .info {
	background: var(--pv-brand-cream);
	border-radius: var(--pv-radius);
	margin: 0 0 16px;
	padding: 12px 14px;
}

.pv-auth .magic-login-form-header p.magic_login_block_login_error,
.pv-auth .magic-login-form-header p.error {
	background: rgba(219, 85, 33, 0.08);
	color: #a8364f;
}

.pv-auth .magic-login-inline-login-form,
.pv-auth .magic-login-inline-code-form {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* The code form wraps its field in a <p>; strip the margin so the spacing
   comes from the flex column like every other step. */
.pv-auth .magic-login-inline-code-form p {
	margin: 0;
}

/* auth.js rewrites this label's text — the plugin's "Username or Email
   Address" asks for a username no customer of this store has. */
.pv-auth .magic-login-inline-login-form label[for="user_login"],
.pv-auth label[for="magic_login_token"],
.pv-auth label[for="first_name"],
.pv-auth label[for="last_name"],
.pv-auth label[for="email"] {
	color: var(--pv-neutral-300);
	display: block;
	font-family: var(--pv-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.pv-auth .magic-login-inline-login-form input[type="text"],
.pv-auth .magic-login-inline-login-form input[type="email"],
.pv-auth .magic-login-inline-login-form input[type="tel"],
.pv-auth .magic-login-inline-code-form input[type="text"],
.pv-auth #magic_login_token,
.pv-auth #magic_login_registration_form input[type="text"],
.pv-auth #magic_login_registration_form input[type="email"] {
	background: var(--pv-surface-card);
	border: 1.5px solid var(--pv-border-default);
	border-radius: 14px;
	color: var(--pv-text);
	font: inherit;
	font-size: 16px;
	/*
	 * Height is set here rather than left to the content. The code field runs
	 * at 20px in a monospace face and every other field at 16px, which made the
	 * email step visibly shorter than the code step that follows it — two
	 * boxes in the same flow, a few pixels apart in size, which reads as
	 * sloppiness rather than as a difference that means anything.
	 */
	min-height: 56px;
	padding: 14px 16px;
	width: 100%;
}

.pv-auth .magic-login-inline-login-form input:focus {
	border-color: var(--pv-brand-orange);
	outline: 2px solid var(--pv-brand-orange);
	outline-offset: 1px;
}

/* The emailed code is eight digits (PVC_Auth) — spaced out so it reads as a
   code rather than a number, and monospaced so the digits do not shift. */
.pv-auth__form.is-code-step #magic_login_token {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 20px;
	letter-spacing: 0.3em;
	text-align: center;
}

.pv-auth .magic-login-submit,
.pv-auth .magic-login-code-submit {
	background: var(--pv-text);
	border: 1.5px solid var(--pv-text);
	border-radius: var(--pv-radius-full);
	color: var(--pv-text-inverse);
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	margin: 16px 0 0;
	padding: 14px 24px;
	transition: background 150ms ease;
	width: 100%;
}

.pv-auth .magic-login-submit:hover,
.pv-auth .magic-login-submit:focus-visible,
.pv-auth .magic-login-code-submit:hover,
.pv-auth .magic-login-code-submit:focus-visible {
	background: var(--pv-brand-purple);
	border-color: var(--pv-brand-purple);
}

/* Turnstile renders a fixed-size iframe; centre it rather than let it sit
   flush left against a full-width field. */
.pv-auth .magic-login-captcha-wrapper {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}

.pv-auth .magic-login-message,
.pv-auth .magic-login-error,
.pv-auth .magic-login-success {
	border-radius: var(--pv-radius);
	font-size: 14px;
	line-height: 1.5;
	margin: 16px 0 0;
	padding: 12px 14px;
}

.pv-auth .magic-login-error {
	background: rgba(219, 85, 33, 0.08);
	color: #a8364f;
}

.pv-auth .magic-login-success {
	background: rgba(133, 168, 135, 0.14);
	color: #4d7050;
}

/* --- the registration (name) step --------------------------------------- */

/* Magic Login shows first and last name when it does not recognise the
   address. Two fields on one row so the step reads as small. */
.pv-auth__form.is-name-step .magic-login-inline-login-form {
	display: grid;
	gap: 0 12px;
	grid-template-columns: 1fr 1fr;
}

.pv-auth__form.is-name-step .magic-login-inline-login-form > *:not(label):not(input) {
	grid-column: 1 / -1;
}

@media (max-width: 480px) {
	.pv-auth__form.is-name-step .magic-login-inline-login-form {
		grid-template-columns: 1fr;
	}
}

/* --- Nextend's buttons --------------------------------------------------- */

.pv-auth__social:empty {
	display: none;
}

.pv-auth__social {
	margin: 24px 0 0;
}

/* Their default is a coloured, branded bar sized to its own content. On this
   screen the email field is the primary action, so the social buttons are
   outlined and matched to the field's width — a narrower button beside a
   full-width one reads as the more important of the two. */
/*
 * div.nsl-container-block .nsl-container-buttons is inline-grid in the
 * plugin's own stylesheet, so the row shrinks to its content and the button's
 * width:100% resolves against 236px instead of the column. Matching their
 * specificity with the leading div. is what makes block-level grid stick.
 */
.pv-auth div.nsl-container .nsl-container-buttons {
	display: grid;
	gap: 10px;
	width: 100%;
}

.pv-auth .nsl-container .nsl-container-buttons a {
	border: 1.5px solid var(--pv-border-default) !important;
	border-radius: var(--pv-radius-full) !important;
	box-shadow: none !important;
	max-width: none !important;
	width: 100% !important;
}

/* Rule / OR / rule, drawn on the wrapper so no extra markup is needed. */
.pv-auth__divider {
	align-items: center;
	color: var(--pv-neutral-300);
	display: flex;
	font-size: 12px;
	font-weight: 700;
	gap: 14px;
	letter-spacing: 0.1em;
	margin: 24px 0 20px;
	text-transform: uppercase;
}

.pv-auth__divider::before,
.pv-auth__divider::after {
	background: var(--pv-border-default);
	content: "";
	flex: 1;
	height: 1px;
}

/* Hidden until Nextend actually has a button to show. */
.pv-auth__social:empty + .pv-auth__divider,
.pv-auth__divider:has(+ .pv-auth__social:empty) {
	display: none;
}

/* --- the chrome-free shell (auth.php) ----------------------------------- */

/*
 * Only applies on the bare template, so the account page keeps its normal
 * layout everywhere else. Centres the panel vertically on a tall screen and
 * falls back to normal flow on a short one, so the code step can grow without
 * pushing the button off the bottom.
 */
.pv-auth-page {
	background: var(--pv-surface-background);
}

.pv-auth-shell {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 40px 0;
}

.pv-auth-page .pv-auth {
	padding-block: 0;
	width: 100%;
}

/* --- Magic Login's registration form ------------------------------------ */

/*
 * The plugin draws this step as a grey card — #f9f9f9, a #ddd hairline, 8px
 * radius, 20px of padding — sitting inside our own panel. Two cards nested is
 * one too many, and none of it is the brand. Flattened so the step reads as a
 * continuation of the screen rather than a plugin embedded in it.
 *
 * Selector specificity matches the plugin's own (it scopes several of these
 * through the form's id), which is why the id appears here rather than a class.
 */
.pv-auth #magic_login_registration_form {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.pv-auth #magic_login_registration_form p {
	margin: 0 0 14px;
}

/* First and last name share a row; the plugin already groups them. */
.pv-auth #magic_login_registration_form .form-group {
	display: grid;
	gap: 0 12px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 420px) {
	.pv-auth #magic_login_registration_form .form-group {
		grid-template-columns: 1fr;
	}
}

/* The submit carries the same class as the login step's but is scoped by the
   form id in the plugin's stylesheet, so it needs the id here to win. */
.pv-auth #magic_login_registration_form input[type="submit"],
.pv-auth #magic_login_registration_form .magic-login-submit {
	background: var(--pv-text);
	border: 1.5px solid var(--pv-text);
	border-radius: var(--pv-radius-full);
	color: var(--pv-text-inverse);
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	margin: 4px 0 0;
	padding: 14px 24px;
	width: 100%;
}

.pv-auth #magic_login_registration_form input[type="submit"]:hover,
.pv-auth #magic_login_registration_form .magic-login-submit:hover {
	background: var(--pv-brand-purple);
	border-color: var(--pv-brand-purple);
}

/* The plugin's own status line above the form. */
.pv-auth .registration_result .info {
	background: var(--pv-brand-cream);
	border-radius: var(--pv-radius);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 20px;
	padding: 12px 14px;
}

.pv-auth .registration_result:empty,
.pv-auth .registration_result .info:empty {
	display: none;
}

/* --- the marketing opt-in ------------------------------------------------ */

/*
 * Regular weight, not the bold the surrounding form inherits. A consent line
 * set in bold reads as a warning; this is an offer, and it should look like
 * ordinary prose next to the fields it follows.
 */
.pv-auth .pvc-optin {
	margin: 2px 0 18px;
}

.pv-auth .pvc-optin label {
	align-items: flex-start;
	color: var(--pv-neutral-400);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 400;
	gap: 10px;
	line-height: 1.45;
	text-transform: none;
}

.pv-auth .pvc-optin input[type="checkbox"] {
	accent-color: var(--pv-brand-orange);
	flex: none;
	height: 1.1rem;
	margin: 1px 0 0;
	width: 1.1rem;
}

/* The address is read back in the subtitle instead; see hideEmailField() in
   auth.js for why the input stays in the form. */
.pv-auth .pv-auth__field--hidden {
	display: none;
}

/*
 * The address is a read-back, not an emphasis. Bold made it the loudest thing
 * on a step whose actual job is the two name fields below it, so it keeps only
 * the darker text colour to lift it off the muted sentence around it.
 */
.pv-auth .pv-auth__sub strong {
	color: var(--pv-text);
	font-weight: 400;
}

/* Secondary to the black submit above it: same shape, no fill, so the pair
   reads as one choice and its alternative rather than two equal buttons. */
.pv-auth .pv-auth__alt {
	background: none;
	border: 1.5px solid var(--pv-border-default);
	border-radius: var(--pv-radius-full);
	color: var(--pv-text);
	cursor: pointer;
	display: block;
	font-size: 16px;
	font-weight: 700;
	/*
	 * An anchor inherits the body's line-height and an input does not, which
	 * made this sit taller than the submit above it — the secondary choice
	 * looking like the bigger one.
	 */
	line-height: 1.2;
	margin: 12px 0 0;
	min-height: 52px;
	padding: 14px 24px;
	text-align: center;
	text-decoration: none;
	transition: border-color 150ms ease;
}

.pv-auth .pv-auth__alt:hover,
.pv-auth .pv-auth__alt:focus-visible {
	border-color: var(--pv-text);
	color: var(--pv-text);
}

/* --- the plugins' own chrome --------------------------------------------- */

/*
 * Magic Login scopes its registration styling through the form's id, which
 * outranks any class selector of ours: #id + element beats .class .class
 * element every time. These rules exist only to match that specificity — the
 * declarations are the same ones applied to every other step.
 */
.pv-auth #magic_login_registration_form label {
	font-weight: 700;
}

.pv-auth #magic_login_registration_form .pvc-optin label {
	font-weight: 400;
}

/*
 * Nextend draws two boxes: the anchor we style as a pill, and inside it a div
 * carrying border-radius: 4px and an inline background-color: #fff. A square
 * white panel inside a rounded button shows at the corners as a second border.
 *
 * The inner box loses its own shape and fill and the anchor keeps them. The
 * inline style is why background needs !important here — nothing else beats an
 * attribute — and filter/opacity are deliberately left alone, since those are
 * how the plugin renders its own hover and disabled states.
 */
.pv-auth div.nsl-container .nsl-button {
	background: none !important;
	border-radius: inherit !important;
	/*
	 * The remaining edge was not a border at all — Google's light skin draws
	 * its outline as box-shadow: inset 0 0 0 1px #747775, so removing borders
	 * never touched it. Our anchor already supplies the outline Google's
	 * branding asks for, in the colour the rest of this screen uses.
	 */
	box-shadow: none !important;
}

.pv-auth .nsl-container .nsl-button-label-container {
	font-family: inherit;
}