/* Passwordless login panel — self-contained (My Account has no checkout-redesign CSS). */
.smart-login {
	max-width: 420px;
	margin: 0 0 24px;
	padding: 22px;
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* Inside the checkout sign-in panel the contact card already supplies the surface (and the panel has
   its own top-border divider) — flatten the passwordless card so it reads as a clean section, not a
   card-in-a-card. My Account has no .ck-signin-panel, so it keeps the card. */
.ck-signin-panel .smart-login {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
/* (.smart-login-title / .smart-login-sub removed — the panel's title + "New or returning…" sub were
   always hidden in the only live context (the switch on checkout + My Account) and the [smart_login]
   shortcode is unused, so the markup + these rules were dead.) */
/* Universal "new or returning" helper line — shown to everyone, so it never reveals account existence. */
.smart-login-hint {
	font-size: 12px;
	color: #7a8595;
	line-height: 1.5;
	margin: 0 0 16px;
}
.smart-login-codetitle {
	font-size: 15px;
	font-weight: 700;
	color: #01234a;
	margin: 0 0 6px;
}
.smart-login-label {
	display: block;
	font-size: 12px;
	color: #7a8595;
	margin: 0 0 4px;
}
.smart-login-input {
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	padding: 0 14px;
	font-size: 15px;
	border: 1px solid #d5dae1;
	border-radius: 9px;
	background: #fff;
}
.smart-login-input:focus {
	outline: 2px solid #bd5b0b;
	outline-offset: 1px;
	border-color: #bd5b0b;
}
.smart-login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4b5563;
	margin: 12px 0;
}
.smart-login-btn {
	width: 100%;
	background: #bd5b0b;
	color: #fff;
	border: 0;
	border-radius: 11px;
	padding: 14px;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s ease;
}
.smart-login-btn:hover { background: #a44e09; }
.smart-login-btn:disabled { opacity: .65; cursor: default; }
.smart-login-status {
	font-size: 14px;
	color: #1c2835;
	margin: 0 0 14px;
}
.smart-login-boxes {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
}
.smart-login-box {
	flex: 1 1 0;
	min-width: 0;
	height: 52px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	color: #01234a;
	border: 1px solid #d5dae1;
	border-radius: 9px;
	background: #fff;
}
.smart-login-box:focus {
	outline: 2px solid #bd5b0b;
	outline-offset: 1px;
	border-color: #bd5b0b;
}
/* Filled state — all 6 boxes entered → green border (JS toggles .is-filled). */
.smart-login-boxes.is-filled .smart-login-box { border-color: #5cb874; }
/* Error state — boxes / password go red on a bad code or wrong password (JS toggles .is-error). */
.smart-login-boxes.is-error .smart-login-box { border-color: #c0392b; }
.smart-login-input.is-error { border-color: #c0392b; }
/* Inline error — the spec mockup's red box (.err): tinted background, alert-circle icon, only shown when
   there's a message. */
.smart-login-error { margin: 0; }
.smart-login-error:empty { display: none; }
.smart-login-error:not(:empty) {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 9px 0 12px;
	padding: 7px 9px;
	background: #fdecea;
	border-radius: 7px;
	color: #c0392b;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}
.smart-login-error:not(:empty)::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
}
.smart-login-resend {
	background: none;
	border: 0;
	color: #01234a;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}
/* During the resend cooldown ("Resend in Ns"): muted + non-interactive (JS also guards the click). */
.smart-login-resend.is-cooling {
	color: #97a1ad;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}

/* --- Code boxes stay hidden until a code is actually sent (the JS un-hides
   .smart-login-code after a successful request). The old "disabled preview"
   that showed greyed boxes under the email form was read as clutter. --- */
.smart-login-code[hidden] { display: none !important; }
.smart-login-presend { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: #5f6b7a; }
.smart-login-switch .smart-login-request[hidden] ~ .smart-login-code .smart-login-presend { display: none; }
.smart-login-code .smart-login-status:empty { margin: 0; }
/* "New or returning, enter your email for a 6-digit code." — redundant with the field label + the
   pre-send hint; hide it in the switch (My Account + checkout). */

/* --- Field polish for the switch panes (input / label / code boxes / status) ---------------------
   The checkout applies this via the theme (deeper, checkout-only selector that still wins there); mirror
   it here so My Account — and anywhere the switch renders — matches. Does NOT hide "Keep me signed in"
   (that's a checkout-only choice). --- */
.smart-login-switch .ck-pane .smart-login-input {
	display: block; /* block (not inline-block) so vertical margins collapse → consistent gaps both panes */
	width: 100%;
	height: 54px;
	margin: 0 0 14px;
	padding: 8px 14px;
	border: 1px solid #d5dae1;
	border-radius: 9px;
	font-size: 15px;
	background: #fff;
}
.smart-login-switch .ck-pane .smart-login-input:focus {
	outline: none;
	border-color: #bd5b0b;
	box-shadow: 0 0 0 3px rgba(189, 91, 11, .12);
}
.smart-login-switch .ck-pane .smart-login-label {
	display: block;
	margin: 0 0 5px;
	font-size: 11px;
	font-weight: 500;
	color: #7a8595;
}
.smart-login-switch .ck-pane .smart-login-boxes {
	justify-content: flex-start;
	gap: 8px;
	margin: 0 0 12px;
}
.smart-login-switch .ck-pane .smart-login-box {
	flex: 1 1 0;
	max-width: 46px;
	height: 52px;
	font-size: 20px;
	font-weight: 800;
	border: 1.5px solid #c7d6ea;
	border-radius: 10px;
	background: #fff;
}
.smart-login-switch .ck-pane .smart-login-box:focus {
	outline: none;
	border-color: #bd5b0b;
	box-shadow: 0 0 0 3px rgba(189, 91, 11, .12);
}
.smart-login-switch .ck-pane .smart-login-codetitle { font-size: 14px; margin: 0 0 4px; }
.smart-login-switch .ck-pane .smart-login-status { font-size: 13px; margin: 0 0 12px; }
.smart-login-switch .ck-pane .smart-login-error:not(:empty) { color: #c0392b; font-size: 12.5px; } /* let the red-box base apply */
.smart-login-switch .ck-pane .smart-login-error:empty { min-height: 0; margin: 0; padding: 0; }
.smart-login-switch .ck-pane .smart-login-resend { font-size: 12.5px; }
/* Spacing rhythm in the panes: breathing room above + below the send / log-in button (the send button
   sat flush against the email field above and the pre-send hint below — gap was 0). */
.smart-login-switch .ck-pane .smart-login-btn { display: block; width: 100%; margin: 11px 0 0; }
.smart-login-switch .ck-pane .smart-login-presend { margin: 0 0 10px; }

/* --- Checkout-context guard ---------------------------------------------------------------------
   When the panel renders inside the checkout sign-in collapsible, the checkout theme CSS bleeds in:
   its floating-label rules force absolute-positioned labels (which yanks "Keep me signed in" out of
   flow) and its button styling paints the CTA navy. Keep the panel's own labels in flow and its CTA
   orange. Scoped to .smart-login so nothing else is affected. */
.smart-login label,
.smart-login .smart-login-label,
.smart-login .smart-login-remember {
	position: static !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	margin-top: 0;
}
.smart-login .smart-login-label { display: block; margin-bottom: 4px; }
/* !important beats checkout.css's `...sc-woo-billing-shipping-fields label{margin:0}` (0,3,2) which
   otherwise collapses the "Keep me signed in" spacing inside the checkout sign-in panel. */
.smart-login .smart-login-remember { display: flex; margin: 14px 0 !important; }
.smart-login .smart-login-btn { background: #bd5b0b !important; color: #fff !important; }
.smart-login .smart-login-btn:hover { background: #a44e09 !important; }
/* checkout-redesign.css paints `.ck-contact-card .ck-signin-panel button[type=submit]` navy with
   !important (0,3,1); out-specify it (0,3,2), scoped to the panel, so the CTA stays orange there. */
.ck-signin-panel .smart-login button.smart-login-btn[type="submit"] { background: #bd5b0b !important; color: #fff !important; }
.ck-signin-panel .smart-login button.smart-login-btn[type="submit"]:hover { background: #a44e09 !important; }

/* ---- Segmented Email-code / Password toggle (replaces the old collapsed fallback) ------------- */
.smart-login-seg {
	display: flex;
	background: #f1f3f5;
	border-radius: 11px;
	padding: 4px;
	margin: 0 0 16px;
}
.smart-login-seg-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 9px 8px;
	font-size: 14px;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
}
.smart-login-seg-btn svg { width: 15px; height: 15px; flex: none; }
.smart-login-seg-btn[aria-selected="true"] { background: #fff; color: #01234a; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.ck-pane[hidden] { display: none; }

/* The panel + password form are panes inside the page card — flatten them (the toggle is the chrome).
   The toggle labels the method, so the panel's own "Sign in without a password" title is redundant. */
.smart-login-switch .smart-login,
.smart-login-switch .smart-login-pwform {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Password pane fields: reuse the panel field styles, and keep them in flow + orange CTA inside the
   checkout sign-in panel (where the checkout CSS would otherwise interfere). */
.smart-login-pwform label.smart-login-label,
.smart-login-pwform .smart-login-remember,
.smart-login-pwform .smart-login-remember label { position: static !important; transform: none !important; top: auto !important; left: auto !important; width: auto !important; }
.smart-login-pwform .smart-login-remember { display: flex; margin: 14px 0 !important; }
.smart-login-pwform .smart-login-btn,
.ck-signin-panel .smart-login-pwform button.smart-login-btn[type="submit"] { background: #bd5b0b !important; color: #fff !important; }
.smart-login-pwform .smart-login-btn:hover,
.ck-signin-panel .smart-login-pwform button.smart-login-btn[type="submit"]:hover { background: #a44e09 !important; }
.smart-login-lost { display: block; text-align: center; font-size: 13px; color: #01234a; margin: 12px 0 0; text-decoration: none; }
.smart-login-lost:hover { text-decoration: underline; }

/* --- "Keep me signed in" clickability + field rhythm -------------------------------------------
   The checkout/account theme CSS sets `pointer-events: none` on its form labels (and shrinks native
   checkboxes), which kills the click target on the "Keep me signed in" row in BOTH panes — the label
   and its checkbox become un-clickable. Restore pointer events and a real, native checkbox here. */
.smart-login .smart-login-remember,
.smart-login-pwform .smart-login-remember,
.smart-login .smart-login-remember input[type="checkbox"],
.smart-login-pwform .smart-login-remember input[type="checkbox"] {
	pointer-events: auto !important;
}
.smart-login .smart-login-remember,
.smart-login-pwform .smart-login-remember { cursor: pointer; }
.smart-login .smart-login-remember input[type="checkbox"],
.smart-login-pwform .smart-login-remember input[type="checkbox"] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	margin: 0 !important;
	opacity: 1 !important;
	flex: 0 0 auto !important; /* never let the flex row shrink it to 0 */
	cursor: pointer;
}

/* Password pane stacks two labelled inputs; the checkout/account context gives them no bottom margin,
   so "Email or username" and "Password" rows collapse together. Add vertical rhythm. */
.smart-login-pwform .smart-login-input { margin-bottom: 14px; }

/* Sign-in-panel CTA buttons (Log in, Email-me-a-code) — refined weight/size from the spec mockup, but the
   colour follows the SITE standard (brand orange #bd5b0b, same as Place Order), not the mockup's #BD5A18,
   so the panel stays consistent with the rest of checkout. Scoped to the switch panel via `.ck-pane` so
   the chunky site-style Place Order button is untouched; (0,3,0) + !important beats the earlier
   `.smart-login(-pwform) .smart-login-btn` (0,2,0) overrides above. */
.smart-login-switch .ck-pane .smart-login-btn {
	padding: 11px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 9px !important;
	background: #bd5b0b !important;
	border: 1px solid #bd5b0b !important;
	color: #fff !important;
}
.smart-login-switch .ck-pane .smart-login-btn:hover {
	background: #a44e09 !important;
	border-color: #a44e09 !important;
}