/**
 * Vantage Magic Login for WooCommerce
 *
 * Two contexts are styled here:
 *  1. The request form, which lives inside the active theme and therefore
 *     borrows as much as it can from WooCommerce rather than imposing a look.
 *  2. The standalone landing page, which has no theme at all and has to carry
 *     its own weight.
 */

/* -------------------------------------------------------------------------
 * 1. The request form (in-theme)
 * ---------------------------------------------------------------------- */

.vantage-magic-login {
	margin: 0 0 2em;
}

.vantage-magic-login__title {
	margin-bottom: 0.4em;
}

.vantage-magic-login__description {
	margin-bottom: 1em;
}

.vantage-magic-login__input {
	width: 100%;
	box-sizing: border-box;
}

/* One box per digit, which is what people expect from a code and what phone
 * keyboards and autofill are tuned for. The row spans the full width of the
 * form so it reads as the primary thing on the page rather than a stray field
 * narrower than its own button. */
.vantage-magic-login__code-label {
	display: block;
	margin-bottom: 0.5em;
}

.vantage-magic-login__code-inputs {
	display: flex;
	gap: 0.5em;
	width: 100%;
	max-width: 24em;
}

.vantage-magic-login__code-input {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.5em;
	text-align: center;
}

/* Only used where the surrounding checkout does not print WooCommerce's own
 * notices, so this has to carry the message on its own. */
.vantage-magic-login__notice {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.04);
}

.vantage-magic-login__notice--error {
	background: rgba(190, 30, 45, 0.08);
}

.vantage-magic-login__restart {
	margin: 1em 0 0;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.vantage-magic-login__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Deliberately almost empty: this is a link, and it should look like whatever
 * the theme's links look like. Only spacing is ours. */
.vantage-magic-login__toggle {
	display: inline-block;
	margin: 0 0 1.5em;
	cursor: pointer;
}

.vantage-magic-login__separator {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 1.5em 0;
	color: #767676;
	font-size: 0.875em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vantage-magic-login__separator::before,
.vantage-magic-login__separator::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: 0.25;
}

.vantage-magic-login--checkout {
	padding: 1.25em 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

/* WooCommerce gives notices tabindex="-1" and focuses them on load so screen
 * readers announce them. That part is worth keeping; the focus ring a theme
 * then draws around a box nobody navigated to is not, and on some themes it is
 * a very loud one. Only the ring is suppressed, and only on notices: focus
 * styling everywhere else, including anything reachable by keyboard, is
 * untouched. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-notices-wrapper [tabindex="-1"]:focus {
	outline: none;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 2. The standalone landing page
 * ---------------------------------------------------------------------- */

body.vantage-magic-login-page {
	margin: 0;
	padding: 0;
	background: var(--vml-page-background, #f4f4f6);
	color: #1c1c1e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.vml-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	box-sizing: border-box;
}

.vml-card {
	width: 100%;
	max-width: 440px;
	padding: 40px 32px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
	text-align: center;
	box-sizing: border-box;
}

.vml-card__logo img {
	max-width: 200px;
	max-height: 80px;
	height: auto;
	margin: 0 auto 24px;
	display: block;
}

.vml-card__wordmark {
	display: block;
	margin-bottom: 24px;
	color: #6b6b70;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.vml-card__notice {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	text-align: left;
}

.vml-card__notice--success {
	background: rgba(0, 128, 96, 0.08);
	color: #16624e;
}

.vml-card__notice--error {
	background: rgba(190, 30, 45, 0.08);
	color: #8a1f2a;
}

.vml-card__heading {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.25;
}

.vml-card__message {
	margin: 0 0 24px;
	color: #47474d;
}

.vml-card__account {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: #f4f4f6;
	border-radius: 6px;
	font-size: 15px;
}

.vml-card__account-label {
	display: block;
	color: #6b6b70;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vml-card__account-email {
	font-weight: 600;
	word-break: break-all;
}

.vml-button {
	display: block;
	width: 100%;
	padding: 14px 20px;
	background: var(--vml-accent, #1c1c1e);
	border: 0;
	border-radius: 6px;
	color: var(--vml-accent-text, #ffffff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.vml-button:hover,
.vml-button:focus {
	filter: brightness( 0.9 );
}

.vml-card__note {
	margin: 20px 0 0;
	color: #6b6b70;
	font-size: 13px;
}

.vml-card__request {
	margin-top: 24px;
	text-align: left;
}

.vml-card__request input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d3d3d8;
	border-radius: 6px;
	font-size: 16px;
	box-sizing: border-box;
}

.vml-card__request label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.vml-card__request .vantage-magic-login__button {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 14px 20px;
	background: var(--vml-accent, #1c1c1e);
	border: 0;
	border-radius: 6px;
	color: var(--vml-accent-text, #ffffff);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.vml-card__links {
	margin: 28px 0 0;
	color: #6b6b70;
	font-size: 14px;
}

.vml-card__links a {
	color: #6b6b70;
}

@media (prefers-color-scheme: dark) {
	body.vantage-magic-login-page {
		background: var(--vml-page-background, #17171a);
		color: #f2f2f4;
	}

	.vml-card {
		background: #202024;
		box-shadow: none;
	}

	.vml-card__message,
	.vml-card__note,
	.vml-card__links,
	.vml-card__links a,
	.vml-card__wordmark,
	.vml-card__account-label {
		color: #a1a1a8;
	}

	.vml-card__account {
		background: #2a2a30;
	}

	.vml-button,
	.vml-card__request .vantage-magic-login__button {
		background: var(--vml-accent, #f2f2f4);
		color: var(--vml-accent-text, #17171a);
	}

	.vml-card__request input[type="email"] {
		background: #2a2a30;
		border-color: #3a3a42;
		color: #f2f2f4;
	}
}

/* -------------------------------------------------------------------------
 * 3. The WordPress login screen (wp-login.php)
 *
 * The form is injected above WordPress's own login box, so it needs to read
 * as a matching card rather than as loose content.
 * ---------------------------------------------------------------------- */

body.login .vantage-magic-login {
	margin: 20px 0 0;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #c3c4c7;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	text-align: left;
}

body.login .vantage-magic-login__description {
	margin: 0 0 16px;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
}

body.login .vantage-magic-login__field {
	margin: 0;
}

body.login .vantage-magic-login label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.5;
}

body.login .vantage-magic-login__input {
	width: 100%;
	margin: 0 0 16px;
	padding: 6px 8px;
	background: #ffffff;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	font-size: 16px;
	line-height: 1.33;
	box-sizing: border-box;
}

body.login .vantage-magic-login__input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

body.login .vantage-magic-login__actions {
	margin: 0;
}

body.login .vantage-magic-login__button {
	width: 100%;
	min-height: 32px;
	padding: 0 12px;
	background: #2271b1;
	border: 1px solid #2271b1;
	border-radius: 3px;
	color: #ffffff;
	font-size: 13px;
	line-height: 2.30769231;
	cursor: pointer;
}

body.login .vantage-magic-login__button:hover,
body.login .vantage-magic-login__button:focus {
	background: #135e96;
	border-color: #135e96;
}

body.login .vantage-magic-login__separator {
	margin: 24px 0 -12px;
	color: #646970;
	font-size: 11px;
}

body.login .vantage-magic-login__code-inputs {
	max-width: 100%;
	gap: 0.35em;
}

body.login .vantage-magic-login__code-input {
	padding: 6px 0;
	text-align: center;
}

/* WordPress styles every form on the login screen as its own white card. Ours
 * already is one, so the inner box has to be neutralised or the form renders as
 * a card inside a card. */
body.login .vantage-magic-login form {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Inside CheckoutWC's Information step the form is not a panel of its own: it
 * sits directly under their email field, in their module, so it drops the card
 * it wears elsewhere and leans on their spacing instead. */
.vantage-magic-login--cfw {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.vantage-magic-login--cfw .vantage-magic-login__description {
	margin: 0 0 0.75em;
}

.vantage-magic-login__create-account {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1em;
}

.vantage-magic-login__create-account input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.vantage-magic-login__create-account label {
	margin: 0;
	line-height: 1.3;
}

/* Email matching on the checkout. Both offers are in the markup; which one the
 * shopper sees depends on whether their address turned out to match a customer.
 * Everything is visible until the script adds vml-match-ready, so a checkout
 * whose script never arrived still asks both questions rather than neither. */
.vml-match-ready .vantage-magic-login__found {
	display: none;
}

.vml-match-ready.vml-is-found .vantage-magic-login__found {
	display: block;
}

/* After the rule above, and matching one class more than it, so that choosing
 * to carry on as a guest actually wins against having been recognised. */
.vml-match-ready.vml-is-found .vantage-magic-login__guest-choice,
.vml-match-ready.vml-is-found.vml-is-guest .vantage-magic-login__found {
	display: none;
}

/* Last, so that waiting for an answer beats the answer it had before.
 *
 * Only the sign-in offer is withdrawn while waiting: telling someone we have
 * found their account for an address nobody has looked at yet is a lie, while
 * offering an account to someone who turns out to have one is merely a
 * swap-out a moment later. Hiding both, which this used to do, left the step
 * empty whenever an answer was slow or never came. */
.vml-match-ready.vml-is-checking .vantage-magic-login__found {
	display: none;
}

/* The instruction line directly above already says what the boxes are for, so
 * a second label is only clutter on screen — but the group still needs one to
 * announce itself, so it stays for screen readers. */
.vantage-magic-login__code-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Room between the notice that sent them here and the heading that follows it. */
.vantage-magic-login--code .vantage-magic-login__notice {
	margin-bottom: 1.25em;
}

.vantage-magic-login--code .vantage-magic-login__title {
	margin-top: 0.75em;
}

.vantage-magic-login__account-note {
	margin: 0 0 1em;
}

.vantage-magic-login__guest {
	margin: 0;
}

/* The element the checkout fields belong to. It only exists so the browser has
 * a form to submit; everything visible lives further down the page. */
.vantage-magic-login__host-form {
	display: none;
}