/**
 * KS Auth — login / register / reset form styling + Merchant popup shell.
 *
 * Two layers:
 *   1. AUTH FORMS — the WooCommerce login/register forms, styled by their own
 *      classes (.woocommerce-form-login / -register) so the SAME look applies
 *      wherever they appear: the Merchant popup, /hesabim, and the checkout
 *      "returning customer" login. Only the login/register forms are targeted,
 *      never the checkout billing fields.
 *   2. POPUP SHELL — container / overlay / close / guest-exit, scoped to
 *      .merchant-login-popup (popup-only).
 *
 * Everything derives from the core tokens in ks-tokens.css — change a brand
 * colour or radius there and this follows. A few button props keep !important
 * to beat Botiga's `.button` base.
 */

:root {
	/* Popup shell tokens (derive from core). */
	--ks-auth-primary: var(--ks-primary, #000000);
	--ks-auth-accent: var(--ks-accent, #da6900);
	--ks-auth-radius: var(--ks-radius-card, 16px);
	--ks-auth-muted: var(--ks-muted, #6a6a6a);

	/* Phosphor eye / eye-slash as mask images (project icon library — see
	   KS_VM_Icons 'eye' / 'eye-slash'). Mask so the glyph inherits a colour. */
	--ks-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'/%3E%3C/svg%3E");
	--ks-eye-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76ZM101.25,110.46l41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z'/%3E%3C/svg%3E");
}

/* ═══════════════════════ 1. AUTH FORMS (everywhere) ═══════════════════════ */

/* Fields — reuse the core .ks-field look via the WC input class. `body` prefix
   lifts specificity over Botiga's input rules on /hesabim + checkout. */
body .woocommerce-form {
	grid-gap: 0 !important;
}

body .woocommerce-form-login .input-text,
body .woocommerce-form-register .input-text,
body .woocommerce-ResetPassword .input-text {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: var(--ks-field-pad-y) var(--ks-field-pad-x);
	border: var(--ks-field-border-width) solid var(--ks-field-border-color);
	border-radius: var(--ks-field-radius);
	background: var(--ks-field-bg);
	font-size: var(--ks-field-font-size); /* ≥16px so iOS doesn't zoom on focus */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .woocommerce-form-login .input-text:focus,
body .woocommerce-form-register .input-text:focus,
body .woocommerce-ResetPassword .input-text:focus {
	border-color: var(--ks-field-focus-border);
	box-shadow: 0 0 0 3px var(--ks-field-focus-ring);
	outline: none;
}

body .woocommerce-form-login .input-text::placeholder,
body .woocommerce-form-register .input-text::placeholder {
	color: #9a9a9a;
}

/* Field labels (not the "Beni hatırla" checkbox label). */
body .woocommerce-form-login label[for]:not(.woocommerce-form__label-for-checkbox),
body .woocommerce-form-register label[for]:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 3px !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--ks-ink, #1a1a1a);
}

body .woocommerce-form-login .form-row,
body .woocommerce-form-register .form-row {
	margin-bottom: 13px;
}

/* "Beni hatırla" — tidy checkbox row. Block-level flex (width:fit-content keeps
   the click target tight) so the bottom margin reliably spaces it from the button
   below — that gap lives here now, not on the submit's margin-top. */
body .woocommerce-form-login__rememberme {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 9px;
	/* !important beats Merchant's `.merchant-login-popup-content …__rememberme
	   { margin-bottom:0 }` (0,2,0). This 8px is the checkbox→button gap now. */
	margin: 2px 0 20px !important;
	font-size: 14px;
	color: var(--ks-ink, #333);
	cursor: pointer;
	user-select: none;
}

/* Checkbox — rounded + brand-filled to match the inputs. WooCommerce's theme
   skin hides the real <input> (position:absolute; opacity:0; 0×0) and paints the
   control on the label span: the box is span::after, the tick span::before
   (revealed by input:checked). So we restyle THOSE pseudo-elements — round the
   box, fill it with the brand colour when checked, and float the (recoloured
   white) tick above the fill. Global to every WC checkbox (rememberme here, plus
   my-account / checkout) so they all read the same. */
body .woocommerce-form__label-for-checkbox span:not(.required)::after {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	left: 0;
	top: 50%;
	margin-top: -8px;
	border: var(--ks-field-border-width, 1.5px) solid var(--ks-field-border-color, #d9d9d9);
	border-radius: 3px;
	background: var(--ks-field-bg, #fff);
	z-index: 1;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body .woocommerce-form__label-for-checkbox input:checked + span:not(.required)::after,
body .woocommerce-form__label-for-checkbox input:checked + .error + span:not(.required)::after {
	background: var(--ks-primary, #000);
	border-color: var(--ks-primary, #000);
}

/* Tick floats above the fill and turns white — the theme draws it dark with
   borders, so we re-draw it sized/centred for the bigger box, recolour it, and
   raise its stacking order over the filled box (opacity stays theme-controlled:
   input:checked + span::before → opacity 1). */
body .woocommerce-form__label-for-checkbox span:not(.required)::before {
	left: 5px;
	top: 50%;
	margin-top: -6px;
	width: 6px;
	height: 10px;
	border: solid var(--ks-primary-contrast, #fff);
	border-width: 0 2px 2px 0;
	border-radius: 0;
	transform: rotate(45deg);
	z-index: 2;
}

/* Keyboard focus ring on the visible box (the real input is 0×0 / opacity:0). */
body .woocommerce-form__label-for-checkbox input:focus-visible + span:not(.required)::after,
body .woocommerce-form__label-for-checkbox input:focus-visible + .error + span:not(.required)::after {
	border-color: var(--ks-field-focus-border, #da6900);
	box-shadow: 0 0 0 3px var(--ks-field-focus-ring, rgba(218, 105, 0, 0.16));
}

/* Login: "Parolanızı mı unuttunuz?" is pulled up beside the Parola label
   (ks-auth.js relocates it there), right-aligned with the label and a notch
   smaller so it reads as a helper, not a field. Popup only. */
.merchant-login-popup .ks-vm-pw-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.merchant-login-popup .ks-vm-pw-head label[for="password"] {
	margin-bottom: 0 !important;
}

.merchant-login-popup .ks-vm-pw-head .woocommerce-LostPassword {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.2;
	white-space: nowrap;
}

/* ── Password reveal (Phosphor eye / eye-slash) ─────────────────────────────
   WooCommerce wraps the field in .password-input and appends an (icon-font-less,
   so empty) .show-password-input button, then toggles .display-password on it.
   Position it inside the field on the right; paint the icon via a mask so it
   inherits colour. Global — fixes the popup, /hesabim and reset forms alike. */
body .password-input {
	position: relative;
	display: block;
}

body .password-input .input-text {
	padding-right: 46px;
}

body .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background-color: var(--ks-auth-muted) !important; /* becomes the icon colour */
	cursor: pointer;
	-webkit-mask: var(--ks-eye) center / 20px 20px no-repeat;
	mask: var(--ks-eye) center / 20px 20px no-repeat;
	transition: background-color 0.15s ease;
}

body .show-password-input:hover,
body .show-password-input:focus-visible {
	background-color: var(--ks-auth-primary) !important;
	outline: none;
}

body .show-password-input.display-password {
	-webkit-mask-image: var(--ks-eye-slash);
	mask-image: var(--ks-eye-slash);
}

/* ── Submit buttons — the exact store button standard (add-to-cart / "Gelince
      Haber Ver"): same 46px pill, 0.95em capitalize label, 0.3px tracking. The
      text-transform !important beats Botiga's uppercase on WC buttons. ─────── */
body .woocommerce-form-login__submit,
body .woocommerce-form-register__submit {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	min-height: var(--ks-btn-min-height, 46px);
	/* login: the gap above the button now lives on "Beni hatırla"'s margin-bottom */
	/* extra top padding = optical vertical nudge to dead centre (see token) */
	padding: var(--ks-btn-optical-nudge, 0px) var(--ks-btn-pad-x, 24px) 0;
	background: var(--ks-submit-bg, #f3c924) !important;   /* "Sepete Ekle" gold */
	color: var(--ks-submit-text, #000) !important;
	border: 0 !important;                                  /* Sepete Ekle has no border */
	border-radius: var(--ks-btn-radius, 100px) !important;
	font-family: inherit;
	font-size: var(--ks-btn-font-size, 0.95em);
	font-weight: var(--ks-btn-font-weight, 600);
	line-height: var(--ks-btn-line-height, 1.4);
	letter-spacing: var(--ks-btn-letter-spacing, 0.3px);
	text-transform: var(--ks-btn-text-transform, capitalize) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover mirrors add-to-cart: gold → orange, black → white label. */
body .woocommerce-form-login__submit:hover,
body .woocommerce-form-login__submit:focus,
body .woocommerce-form-register__submit:hover,
body .woocommerce-form-register__submit:focus {
	background: var(--ks-submit-hover-bg, #da6900) !important;
	color: var(--ks-submit-hover-text, #fff) !important;
}

/* Login submit: no top margin — its spacing from "Beni hatırla" comes from the
   checkbox row's margin-bottom instead (register keeps the shared 8px). */
body .woocommerce-form-login__submit {
	margin-top: 0;
}

/* ── "Google ile devam et" — shared social button at the TOP of the login AND
      register forms (popup, /hesabim, checkout login; KS_VM_Google_Auth prints
      it). Store-standard pill via .ks-btn; colours follow Google's light spec
      (white field so the official multi-colour G keeps its required backdrop).
      !important mirrors the submit block — Botiga skins buttons inside the WC
      forms. ─────────────────────────────────────────────────────────────── */
body .ks-btn.ks-vm-google-btn {
	gap: 10px;
	background: var(--ks-google-bg, #fff) !important;
	border: var(--ks-btn-border-width, 1px) solid var(--ks-google-border, #747775) !important;
	color: var(--ks-google-text, #1f1f1f) !important;
	border-radius: var(--ks-btn-radius, 100px) !important;
	/* NOT the store's capitalize: Turkish "ile/devam et" must stay lowercase
	   ("Google Ile Devam Et" is wrong twice — casing AND the dotless-I trap). */
	text-transform: none !important;
}

body .ks-btn.ks-vm-google-btn:hover,
body .ks-btn.ks-vm-google-btn:focus {
	background: var(--ks-google-hover-bg, #f7f8f8) !important;
	color: var(--ks-google-text, #1f1f1f) !important;
}

.ks-vm-google-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* Optical centring — MEASURED, don't eyeball (canvas font-metrics probe,
   scratchpad measure2.js): flex centres the label's 21.28px line box, which
   parks the cap body (cap top→baseline) +0.5px BELOW the button's geometric
   centre; the tuned optical sweet spot from the store-button work is −0.5px
   (a hair high). Lift the LABEL alone by 1px — the G icon already sits at
   +0.33px, effectively centred, and must not ride up with it. */
body .ks-btn.ks-vm-google-btn .ks-vm-google-label {
	position: relative;
	top: -1px;
}

.ks-vm-google-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* "veya" between two hairlines, separating the Google path from the form. */
.ks-vm-auth-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	color: var(--ks-muted, #6a6a6a);
	font-size: 13px;
}

.ks-vm-auth-or::before,
.ks-vm-auth-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ks-line, #e0e0e0);
}


/* Lost-password link — a muted helper at rest (same tone as the auth prompt),
   warming to the brand accent on hover. Appears in popup + /hesabim. */
body .woocommerce-LostPassword a {
	color: var(--ks-muted, #6a6a6a);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

body .woocommerce-LostPassword a:hover {
	color: var(--ks-auth-accent);
	text-decoration: underline;
}

body .woocommerce-LostPassword {
	margin-top: 2px;
	font-size: 14px;
}

/* Ad + Soyad grid (our registration extension). */
.ks-vm-reg-names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 10px;
	margin-bottom: 13px; /* row spacing, since the inner form-rows are zeroed */
}

/* Even out the pair: WooCommerce gives the first field a bottom margin the
   second lacks, which makes the row look lopsided. */
.ks-vm-reg-names .form-row {
	margin-bottom: 0 !important;
}

@media (max-width: 420px) {
	.ks-vm-reg-names {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Turnstile (popup only): pulled OUT of flow (absolute + invisible) while it runs
   so it takes no space and there's no open-time flash — but it's still rendered,
   so the managed challenge executes and the token is issued as usual. ks-auth.js
   adds .ks-ts-show only if a challenge genuinely needs interaction, dropping it
   back into the form; it's tucked away again once solved. On /hesabim (no
   ks-auth.js) the widget stays in normal flow, so it can never hide unsolvably. */
.merchant-login-popup .woocommerce-form {
	position: relative;
}

.merchant-login-popup .cf-turnstile {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}

.merchant-login-popup .cf-turnstile.ks-ts-show {
	position: static;
	opacity: 1;
	pointer-events: auto;
	margin: 0 0 10px; /* top gap comes from "Beni hatırla"'s margin-bottom */
	transition: opacity 0.3s ease; /* fades IN on reveal (base opacity is 0) */
}

/* The rememberme + submit row is a flex column; ks-auth.js drops the Turnstile
   in as a third child (so it lands between "Beni hatırla" and the button), which
   the flex column reorders. Plain block flow stacks it in DOM order. */
.merchant-login-popup .woocommerce-form-login .form-row.ks-vm-ts-row {
	display: block;
}

/* WooCommerce's hidden order-attribution inputs and the empty privacy-policy
   placeholder are zero-height, but each still eats a flex-gap slot between the
   last field and the submit button. Take them out of the flow entirely (the
   attribution inputs still submit while display:none). */
body .woocommerce-form-register wc-order-attribution-inputs,
body .woocommerce-form-register .woocommerce-privacy-policy-text:empty {
	display: none;
}

/* ═══════════════════════ 2. POPUP SHELL (popup only) ══════════════════════ */

/* The shortcode's guest "Giriş Yap" link renders hidden in wp_footer — it only
   exists as the toggle ks-auth.js clicks to reuse Merchant's own binding. */
.ks-vm-auth-src {
	display: none !important;
}

/* Above the side-cart drawer (99999) and any sticky Elementor header. */
body .merchant-login-popup {
	z-index: 100001;
}

body .merchant-login-popup-overlay {
	background: rgba(15, 15, 15, 0.55);
}

body .merchant-login-popup-body {
	border-radius: var(--ks-auth-radius);
	box-shadow: 0 24px 64px -16px rgba(15, 15, 15, 0.45);
	max-height: 80vh;
}

body .merchant-login-popup-content {
	padding: 34px 34px 16px;
}

/* Breathing room under the "Giriş Yap" / "Üye Ol" title — the form was starting
   too tight against the heading. */
body .merchant-login-popup-content #customer_login h2 {
	margin: 0 0 25px;
}

/* ── Mobile: the popup IS the screen (operator decision) ──────────────────────
   Under 768px the card grows to fill the fixed flex wrapper (which already
   spans the viewport): no radius, no shadow, no 80vh cap. The body becomes a
   flex column so short content still parks the actions strip at the bottom;
   taller content scrolls inside (overflow:auto is Merchant's own). The close
   button stays absolute at the card's top — now the screen's top corner. */
@media (max-width: 767px) {
	body .merchant-login-popup-body {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
	}

	body .merchant-login-popup-content {
		flex: 1 0 auto;
	}

	/* iPhone home-bar clearance for the bottom-parked actions. */
	.ks-vm-auth-actions {
		padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	}
}

body .merchant-login-popup-close {
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--ks-auth-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}

body .merchant-login-popup-close:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--ks-auth-primary);
}

/* Botiga skins .woocommerce form.login/.register as a grey card — flatten it so
   the popup shell provides the only framing. */
body .merchant-login-popup form.login,
body .merchant-login-popup form.register {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Merchant's footer text-links are replaced by the .ks-vm-auth-toggle button
   (ks-auth.js still clicks them behind the scenes to reuse the switch logic). */
body .merchant-login-popup-footer.ks-vm-auth-footer-off {
	display: none;
}

/* ── Alternate actions: register/login switch + guest exit ───────────────────
   ks-auth.js builds these below the form. The switch button (with its prompt)
   shows in every context; the guest exit only in the checkout gate
   (.ks-vm-auth--checkout). */
.ks-vm-auth-actions {
	padding: 6px 34px 20px;
}

@media (max-width: 480px) {
	.ks-vm-auth-actions {
		padding: 6px 20px 16px;
	}
}

/* Register/Login switch button — always shown, on top of the strip. */
.ks-vm-auth-toggle-wrap {
	margin-bottom: 10px;
}

/* Prompt above the switch button ("Henüz üye değil misiniz?" on the login view,
   "Zaten üye misiniz?" on the register view) — mirrored from Merchant's footer
   copy by ks-auth.js. Centred label flanked by hairline rules, with breathing
   room before the button below. */
/* !important on the margin beats Botiga's `body… p:last-of-type { margin-bottom:0 }`
   (the prompt is the last <p> in its wrapper), same as the buttons below. */
.ks-vm-auth-actions .ks-vm-auth-toggle-prompt {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px !important;
	font-size: 14px;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-auth-actions .ks-vm-auth-toggle-prompt::before,
.ks-vm-auth-actions .ks-vm-auth-toggle-prompt::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ks-line, #e0e0e0);
}

.ks-vm-auth-actions .ks-vm-auth-toggle-prompt:empty {
	display: none;
}

/* The switch button spans the strip. */
.ks-btn.ks-vm-auth-toggle {
	width: 100%;
	justify-content: center;
}

/* Switch button = filled secondary (Elementor "Button Secondary"), darkening to
   "Button Secondary Hover" on hover. Solid, not an outline. */
.ks-btn.ks-vm-auth-toggle {
	background: var(--ks-secondary, #232324);
	border-color: var(--ks-secondary, #232324);
	color: var(--ks-primary-contrast, #fff);
}

.ks-btn.ks-vm-auth-toggle:hover,
.ks-btn.ks-vm-auth-toggle:focus {
	background: var(--ks-secondary-hover, #000000);
	border-color: var(--ks-secondary-hover, #000000);
	color: var(--ks-primary-contrast, #fff);
}

/* ═════════════════ Validation state + popup notices (v2.87) ═════════════════
   Set by ks-auth-validate.js on every auth form (popup, my-account, checkout
   login, lost/reset password, edit-account). ALL message text is delivered as
   KSToast toasts (operator decision) — fields only carry the invalid STATE
   below. The popup's notice card (printed by print_popup_notices_area) is the
   no-JS fallback: hidden whenever the validator ran (ks-vm-toast-mode). */

/* Submit loading — the add-to-cart contract: spinner immediately to the LEFT
   of the label (label stays), button inert while the action is in flight.
   Set/cleared by ks-auth-validate.js (see setLoading there for the full
   start/reset map). Keyframes are local — frontend.css (which owns the
   add-to-cart copy) doesn't load on every page this does. */
body .woocommerce-form button[type="submit"].ks-vm-btn-loading,
body .woocommerce-EditAccountForm button[type="submit"].ks-vm-btn-loading,
body form.lost_reset_password button[type="submit"].ks-vm-btn-loading,
body .ks-vm-google-btn.ks-vm-btn-loading {
	pointer-events: none;
}

/* 🚨 İKONLU butonlar bu yoldan GEÇMEZ: spinner butona eklenince içerik
   genişler ve etiket yerinden oynar. İkonu olanlarda spinner ikonun KENDİ
   kutusuna çizilir (aşağıda) — ürün sayfası butonlarındaki kural ile aynı
   desen (operatör: "bu hiçbir butonumuzda olmamalı"). */
body .woocommerce-form button[type="submit"].ks-vm-btn-loading::before,
body .woocommerce-EditAccountForm button[type="submit"].ks-vm-btn-loading::before,
body form.lost_reset_password button[type="submit"].ks-vm-btn-loading::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: ks-vm-auth-spin 0.6s linear infinite;
}

/* Google butonu: spinner G LOGOSUNUN yerinde döner, kutu boyutu değişmez.
   Logo `visibility:hidden` ile GİZLENİR ama yerini korur; spinner de aynı
   kutuya mutlak konumla çizilir. Böylece loader açılıp kapanırken etiket bir
   piksel bile oynamaz. */
.ks-vm-google-icon {
	position: relative;
}
body .ks-vm-google-btn.ks-vm-btn-loading .ks-vm-google-icon svg {
	visibility: hidden;
}
body .ks-vm-google-btn.ks-vm-btn-loading .ks-vm-google-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: ks-vm-auth-spin 0.6s linear infinite;
}

@keyframes ks-vm-auth-spin {
	to { transform: rotate(360deg); }
}

/* Invalid inputs — aria-invalid is the styling hook, so assistive tech and
   the visual state can never disagree. Scoped to the auth forms. */
.woocommerce-form input.input-text[aria-invalid="true"],
.woocommerce-EditAccountForm input.input-text[aria-invalid="true"],
form.lost_reset_password input.input-text[aria-invalid="true"] {
	border-color: var(--ks-danger, #c8321f) !important;
}

.woocommerce-form input.input-text[aria-invalid="true"]:focus,
.woocommerce-EditAccountForm input.input-text[aria-invalid="true"]:focus,
form.lost_reset_password input.input-text[aria-invalid="true"]:focus {
	border-color: var(--ks-danger, #c8321f) !important;
	box-shadow: 0 0 0 3px rgba(200, 50, 31, 0.14) !important;
}

/* ── Popup notice area (no-JS fallback) ──
   Empty by default (zero footprint); when Merchant's JS injects a result it
   renders as a compact card, announced via the wrapper's aria-live. Botiga's
   full-width banner styling is neutralised inside the popup. While the
   validator runs (ks-vm-toast-mode) the card stays hidden — the same result
   arrives as a toast instead. */
.merchant-login-popup.ks-vm-toast-mode .woocommerce-notices-wrapper {
	display: none !important;
}

.merchant-login-popup .woocommerce-notices-wrapper:empty {
	display: none;
}

.merchant-login-popup .woocommerce-notices-wrapper {
	margin: 0 0 14px;
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-error,
.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-message,
.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-info {
	list-style: none;
	margin: 0 0 10px;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--ks-radius-field, 10px);
	font-size: 13.5px;
	line-height: 1.5;
	background: var(--ks-danger-soft, #fdeeec);
	color: var(--ks-danger, #c8321f);
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-message {
	background: var(--ks-ok-soft, #e9f5ec);
	color: var(--ks-ok, #1a7f37);
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-info {
	background: #f5f5f5;
	color: var(--ks-ink, #1a1a1a);
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-error::before,
.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-message::before,
.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-info::before {
	display: none;
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-error li {
	margin: 0;
	padding: 0;
}

.merchant-login-popup .woocommerce-notices-wrapper .woocommerce-error li + li {
	margin-top: 6px;
}

/* ─── Account-gate no-JS notice (inside <noscript>, printed only on the
   ?ks-auth landing — see KS_VM_Auth::render_popup_source). Fixed bottom
   pill above everything; the link goes to script-free wp-login.php. ─── */
.ks-vm-auth-noscript {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 100002; /* above the popup overlay (100001) */
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 12px 22px;
	border-radius: 100px;
	background: var(--ks-secondary, #232324);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ks-vm-auth-noscript a {
	color: var(--ks-submit-bg, #f3c924);
	text-decoration: underline;
	text-underline-offset: 3px;
}