/* ─────────────────────────────────────────────────────────────────────
   account-auth.css — the `.ap-auth` component family: login,
   registration, password-reminder, password-reminder-sent.

   Extracted verbatim from the four `*-sandbox.php` inline <style> blocks
   (task 0026, 2026-07-30) into ONE shared sheet consumed by the sandbox
   pages AND the live account root templates (woocommerce/myaccount/*),
   the same move as product-page-checkout.css.

   SELF-CONTAINED on purpose: the sandbox auth pages load only
   product-page-chrome.css (via chrome-styles.php) — NOT
   product-page-ago.css — so the checkbox + buyer-radio primitives that
   otherwise live in ago.css are included here. The `.ap-pp__personalize__
   field` / `-field-input` primitives DO live in chrome.css, so they are
   NOT redeclared. url() icon refs are `../img/sandbox/…`, relative to
   this file's location in assets/css/ (same convention as chrome.css).

   The four source files reused the same class names with context-specific
   values; those collisions are resolved here by adjacency selectors and
   the `.ap-auth--centered` modifier (the sent page), noted inline.
   ───────────────────────────────────────────────────────────────────── */

/* Body wrapper — centred narrow column (middle four grid columns via
   `--grid-col5-inset`), 64px below the header, 88px above the footer.
   The sent page centres its cross-axis (`--centered`) so the success
   badge hugs the column centre. */
.ap-auth {
	padding: 64px var(--grid-col5-inset, 680px) 88px;
	display: flex;
	flex-direction: column;
}
.ap-auth--centered {
	align-items: center;
}

/* ── Success badge (password-reminder-sent) — same recipe as the checkout
   confirmation's `.ap-co__success`: black chip framing a 56px green ring
   + white tick, both sweeping on once the page settles (`.is-confirmed`,
   added by account-auth.js). ── */
.ap-auth__success {
	display: inline-flex;
	padding: var(--space-8, 8px);
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: var(--radius-999, 999px);
	background: var(--basic-black, #000);
}
.ap-auth__success__check {
	display: block;
	width: 56px;
	height: 56px;
}
.ap-auth__success__check-ring,
.ap-auth__success__check-tick {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
}
.ap-auth__success.is-confirmed .ap-auth__success__check-ring,
.ap-auth__success.is-confirmed .ap-auth__success__check-tick {
	animation: ap-auth-success-draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ap-auth-success-draw {
	to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-auth__success__check-ring,
	.ap-auth__success__check-tick {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Page title — `.type-heading-md` carries the type; this owns colour +
   centring. On the sent page the title sits 32px below the badge. */
.ap-auth__title {
	color: var(--text-primary, #191919);
	text-align: center;
}
.ap-auth__success + .ap-auth__title {
	margin-top: var(--space-32, 32px);
}

/* ── "ARBA" divider (login, registration) — two hairlines flanking a
   centred label; 48px above (to the Google button). ── */
.ap-auth__divider {
	margin-top: var(--space-48, 48px);
	display: flex;
	align-items: center;
	gap: var(--space-32, 32px);
}
.ap-auth__divider-line {
	flex: 1 0 0;
	height: 1px;
	background: var(--divider-background-light, #E4E4E4);
}
.ap-auth__divider-label {
	color: var(--text-tertiary, #787878);
}

/* ── Buyer-type radiogroup (registration) — "Fizinis asmuo" / "Juridinis
   asmuo"; 32px above (to the divider). Custom radio via `::before` keyed
   off `aria-pressed`, 8px to the label. ── */
.ap-auth__buyer-type {
	margin-top: var(--space-32, 32px);
	display: flex;
	gap: var(--space-16, 16px);
}
.ap-auth__buyer-option {
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	color: var(--text-primary, #191919);
	cursor: pointer;
}
.ap-auth__buyer-option::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: url('../img/sandbox/radio-unchecked.svg');
	background-repeat: no-repeat;
	background-position: center;
}
.ap-auth__buyer-option[aria-pressed="true"]::before {
	background-image: url('../img/sandbox/radio-checked.svg');
}
.ap-sandbox .ap-auth__buyer-option:hover,
.ap-sandbox .ap-auth__buyer-option:focus,
.ap-sandbox .ap-auth__buyer-option:focus-visible,
.ap-sandbox .ap-auth__buyer-option:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* ── Remember-me row + checkbox (login) — the checkbox primitive is
   inlined here (ago.css isn't loaded on sandbox auth pages) in lockstep
   with `.ap-pp__personalize__checkbox` there: `appearance:none` white
   square, SVG on `:checked` via the per-element `--ap-pp-checkbox-icon`
   set in markup. ── */
.ap-auth__remember {
	margin-top: var(--space-12, 12px);
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	color: var(--text-secondary, #5C5C5C);
	cursor: pointer;
}
.ap-pp__personalize__checkbox {
	appearance: none;
	-webkit-appearance: none;
	accent-color: initial;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
	border: 1px solid var(--gray-200, #E4E4E4);
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
}
.ap-sandbox .ap-pp__personalize__checkbox:checked {
	background-color: transparent;
	background-image: var(--ap-pp-checkbox-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):hover,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):focus,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):focus-visible,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):active {
	background-color: #FFFFFF;
	border-color: var(--gray-200, #E4E4E4);
	color: inherit;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-pp__personalize__checkbox:checked:hover,
.ap-sandbox .ap-pp__personalize__checkbox:checked:focus,
.ap-sandbox .ap-pp__personalize__checkbox:checked:focus-visible,
.ap-sandbox .ap-pp__personalize__checkbox:checked:active {
	background-color: transparent;
	background-image: var(--ap-pp-checkbox-icon);
	border-color: transparent;
	color: inherit;
	outline: none;
	box-shadow: none;
}

/* ── Fields — the shared wrapper ships `flex:1`; pin it to content height
   inside this flex column. Base 24px gap (login/registration, after the
   divider/buyer-type); the reminder's field sits right after the title
   (32px); stacked login fields tighten to 16px. ── */
.ap-auth .ap-pp__personalize__field {
	flex: 0 0 auto;
	margin-top: var(--space-24, 24px);
}
.ap-auth__title + .ap-pp__personalize__field {
	margin-top: var(--space-32, 32px);
}
.ap-auth .ap-pp__personalize__field + .ap-pp__personalize__field {
	margin-top: var(--space-16, 16px);
}

/* Field head / label / error */
.ap-auth__field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-8, 8px);
}
.ap-auth__field-label {
	color: var(--text-primary, #191919);
}
.ap-auth__field-error {
	display: none;
	color: var(--input-helper-error, #B8000E);
	text-align: right;
}
.ap-pp__personalize__field.is-invalid .ap-auth__field-error {
	display: block;
}

/* Helper note — base = registration (16px below the field, secondary);
   the sent page's note is smaller/tertiary/centred (via `--centered`). */
.ap-auth__note {
	margin-top: var(--space-16, 16px);
	color: var(--text-secondary, #5C5C5C);
}
.ap-auth--centered .ap-auth__note {
	margin-top: var(--space-8, 8px);
	color: var(--text-tertiary, #787878);
	text-align: center;
}
.ap-auth__note-email {
	color: var(--text-primary, #191919);
}

/* Primary submit — 60px/15px form button. Base 24px gap (login after
   remember-me, reminder after the field); registration's submit sits
   32px below its note. */
.ap-auth__submit {
	margin-top: var(--space-24, 24px);
	display: flex;
	width: 100%;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border-radius: var(--radius-15, 15px);
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	cursor: pointer;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
}
.ap-auth__note + .ap-auth__submit {
	margin-top: var(--space-32, 32px);
}
.ap-sandbox .ap-auth__submit:hover,
.ap-sandbox .ap-auth__submit:focus,
.ap-sandbox .ap-auth__submit:focus-visible,
.ap-sandbox .ap-auth__submit:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Legal consent line (registration) — 24px below the CTA. */
.ap-auth__legal {
	margin-top: var(--space-24, 24px);
	color: var(--text-secondary, #5C5C5C);
	text-align: center;
}
.ap-auth__legal a,
.ap-sandbox .ap-auth__legal a:hover,
.ap-sandbox .ap-auth__legal a:focus,
.ap-sandbox .ap-auth__legal a:focus-visible,
.ap-sandbox .ap-auth__legal a:active {
	color: var(--text-primary, #191919);
	text-decoration: none;
}

/* Forgot-password link (login) — centred, primary, no underline, 24px
   below the sign-in CTA. */
.ap-auth__forgot,
.ap-sandbox .ap-auth__forgot:hover,
.ap-sandbox .ap-auth__forgot:focus,
.ap-sandbox .ap-auth__forgot:focus-visible,
.ap-sandbox .ap-auth__forgot:active {
	display: block;
	margin-top: var(--space-24, 24px);
	color: var(--text-primary, #191919);
	text-align: center;
	text-decoration: none;
}

/* Secondary (ghost) button — 60px/15px, transparent fill, 2px outline;
   48px below whatever precedes it. On the centred (sent) page it must
   `align-self: stretch` to keep full column width. */
.ap-auth__secondary {
	margin-top: var(--space-48, 48px);
	display: flex;
	width: 100%;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border-radius: var(--radius-15, 15px);
	border: 2px solid var(--button-secondary-outline-enabled, #F0F0F0);
	background: transparent;
	color: var(--text-primary, #191919);
	cursor: pointer;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
}
.ap-auth--centered .ap-auth__secondary {
	align-self: stretch;
}
.ap-sandbox .ap-auth__secondary:hover,
.ap-sandbox .ap-auth__secondary:focus,
.ap-sandbox .ap-auth__secondary:focus-visible,
.ap-sandbox .ap-auth__secondary:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
	border-color: var(--button-secondary-outline-hover, var(--button-secondary-outline-enabled, #F0F0F0));
	outline: none;
	box-shadow: none;
}

/* Google OAuth button (login, registration) — shares the ghost shape;
   this owns only the 32px gap to the title. The LIVE account templates
   render this button when Nextend's Google provider is enabled (it is,
   on this install); the sandbox pages show it unconditionally. */
.ap-auth__oauth {
	margin-top: var(--space-32, 32px);
}
.ap-auth__oauth-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

/* Mobile (≤768px) — 24px insets, per the sibling sandboxes' baseline. */
@media (max-width: 768px) {
	.ap-auth {
		padding: 24px 24px 64px;
	}
}