/* ============================================================
   AITAS login card + sitewide popup — v3.5.0 (2026-07-27)
   Scope: .aac-pop (the footer dialog) and .aac-lc (the card), nothing else.
   This file ships on EVERY logged-out page, so it is deliberately small and
   fully self-contained: it may not assume aitas-account.css is present, and
   every selector is rooted at one of the two classes above so it can never
   reach another surface.
   Enqueued at priority 47 — AFTER aitas-account.css (45) — so on /my-account/,
   where both load, the card's own rules win every equal-specificity tie.
   Animation grammar = the CART popup's, token for token (css/aitas-cart.css).
   Marker token (survives minification): --aitas-acc-pop-marker
   ============================================================ */

/* ---------- overlay + dialog (cart-popup parity) ---------- */
.aac-pop-ov {
	position: fixed; inset: 0; background: rgba(16,22,33,.5);
	opacity: 0; transition: opacity .22s ease; z-index: 100002;
}
body.aac-pop-open .aac-pop-ov { opacity: 1; }
.aac-pop-ov[hidden] { display: none; }

/* R11-W2 — the text caret never painted inside this dialog, for every Chromium
   visitor. The popup used to centre itself with `left/top:50%` +
   `transform:translate(-50%,-50%)` and declared `will-change:transform,opacity`,
   which promotes it to its own composited layer PERMANENTLY (will-change is not
   a hint that expires) and, worse, at a FRACTIONAL layer offset — the resolved
   matrix read e.g. matrix(1,0,0,1,-212,-172.094). Chromium does not rasterize
   the 1px blinking caret inside such a layer: three screenshots of a focused
   input 300ms apart came back byte-IDENTICAL, and snapping the transform to
   integers made the bytes alternate again.

   So the RESTING state now carries no transform at all and no will-change. The
   centring is done by layout instead: a fixed box with `inset:0`, a definite
   width and `height:fit-content` is centred by `margin:auto` on both axes (the
   over-constrained case resolves to equal margins only when both the size and
   both insets are definite — hence fit-content rather than auto).

   The entrance still animates: opacity plus a small scale, ENDING at
   `transform:none`, so the composited layer the animation creates is discarded
   the moment it finishes and the caret gets a normal raster target. Markup and
   selectors are untouched — this file's copy is baked into the footer of every
   cached logged-out page. */
.aac-pop {
	--aitas-acc-pop-marker: aac350;
	position: fixed; inset: 0; margin: auto;
	width: min(424px, calc(100vw - 28px));
	height: fit-content;
	max-height: min(92vh, 900px);
	transform: translateY(6px) scale(.96);
	opacity: 0; z-index: 100003;
	display: flex; flex-direction: column;
	transition: opacity .22s ease, transform .24s cubic-bezier(.2,.75,.3,1);
}
body.aac-pop-open .aac-pop { transform: none; opacity: 1; }
body.aac-pop-open { overflow: hidden; }
/* closed = out of the a11y tree and the tab order; JS sets [hidden] on
   transitionend, so the close transition still runs */
.aac-pop[hidden] { display: none; }

/* ---------- the card ---------- */
.aac-lc {
	--lc-ink:#232323; --lc-ink2:#1A2230; --lc-deep:#1D80C7; --lc-blue:#4F9AD0;
	--lc-tint:#EDF3F9; --lc-line:#E2ECF5; --lc-line2:#D5DEEA;
	--lc-muted:#9AA6B6; --lc-label:#808696; --lc-red:#C33A3A;
	background: #fff; border-radius: 16px; color: var(--lc-ink);
	font-size: 16px; line-height: 1.45; font-family: inherit;
	display: flex; flex-direction: column; min-height: 0;
}
.aac-lc--pop { box-shadow: 0 24px 70px rgba(16,22,33,.28); overflow: hidden; }
/* inline on /my-account/: the same card, centred, with a hairline instead of
   the dialog's lift — it is a page, not something floating over one */
.aac-lc:not(.aac-lc--pop) {
	max-width: 424px; margin: 24px auto 40px;
	border: 1px solid var(--lc-line); box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* typography leaks: the cabinet renders inside .entry-content > .container_block,
   where crypt.css sets 15px margins on every p/li/ul (0,1,1) — every rhythm in
   this card comes from flex gaps, so the reset is total */
.aac-lc p, .aac-lc ul, .aac-lc li, .aac-lc form { margin: 0 !important; padding: 0 !important; }
.aac-lc ul { list-style: none !important; }

.aac-lc__h {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 17px 22px; border-bottom: 1px solid var(--lc-line); flex: 0 0 auto;
}
.aac-lc__t {
	margin: 0 !important; font-size: 21px; font-weight: 800; line-height: 1.2;
	color: var(--lc-ink); text-align: left !important;
}
.aac-lc__x {
	width: 34px; height: 34px; flex: 0 0 auto; border: 0; background: transparent;
	border-radius: 50%; cursor: pointer; color: var(--lc-label); padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s; position: relative;
}
.aac-lc__x:hover { background: #F0F3F8; color: var(--lc-ink2); }
.aac-lc__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* touch target (WCAG 2.2 §2.5.8): the painted circle stays 34px — only the hit
   box grows, via a transparent pseudo that hit-tests to its originating button.
   Absolutely positioned ⇒ zero layout box, zero paint, header height unchanged.
   The 5px overhang lives inside the header's own 15–17px padding: it can neither
   leave the card nor reach the «Вхід» title (>250px away at every width). */
.aac-lc__x::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 44px; height: 44px; transform: translate(-50%, -50%);
	border-radius: 50%; background: transparent;
}

.aac-lc__b { padding: 20px 22px 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---------- form-reset kit (the fought-and-won subset) ----------
   WooCommerce core `.woocommerce form .form-row{padding:3px;margin:0 0 6px}`
   and `.form-row label{line-height:2}` (0,3,1), plus bootstrap reboot's
   `label{margin-bottom:.5rem}`, all load before this file and out-rank bare
   scoped classes — the sixth leak class (kb\theme-frontend.md). Per-control
   !important is the only pattern that wins. */
.aac-lc .form-row { margin: 0 !important; padding: 0 !important; width: 100% !important; float: none !important; display: block; position: relative; }
.aac-lc .form-row::before, .aac-lc .form-row::after { content: none; }
.aac-lc .form-row + .form-row { margin-top: 12px !important; }
.aac-lc input.input-text {
	height: 54px !important; width: 100%; box-sizing: border-box;
	border: 1px solid var(--lc-line2) !important; border-radius: 12px !important;
	padding: 19px 14px 4px !important; background: #fff; outline: none;
	font: inherit; font-size: 15px; color: var(--lc-ink); box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.aac-lc input.input-text:focus { border-color: var(--lc-deep) !important; box-shadow: 0 0 0 3px rgba(29,128,199,.14); }
/* a theme global paints placeholders full ink; these carry a single space, so
   this only matters if one ever shows a real prompt */
.aac-lc input.input-text::placeholder { color: var(--lc-muted) !important; opacity: 1 !important; }

/* floating label — SIBLING-driven, so no JS sweep is needed anywhere: the input
   is rendered before its label and `:not(:placeholder-shown)` covers typed,
   pasted AND autofilled values (the Chromium :has() invalidation gap that made
   the cabinet's JS sweep mandatory does not apply to sibling combinators). */
.aac-lc .aac-ffld > label {
	position: absolute; left: 15px; top: 27px; transform: translateY(-50%);
	margin: 0 !important; padding: 0 !important;
	color: var(--lc-muted); font-size: 15px; font-weight: 400 !important;
	line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important;
	pointer-events: none; transition: all .15s; z-index: 2; white-space: nowrap;
	max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis;
}
.aac-lc .aac-ffld > input.input-text:focus + label,
.aac-lc .aac-ffld > input.input-text:not(:placeholder-shown) + label,
.aac-lc .aac-ffld > input.input-text:-webkit-autofill + label,
.aac-lc .aac-ffld.has-val > label {
	top: 12px; transform: none; font-size: 11.5px; font-weight: 700 !important;
	color: var(--lc-label); letter-spacing: .3px;
}

/* password reveal */
.aac-ffld--eye > input.input-text { padding-right: 48px !important; }
.aac-lc .aac-eye {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; border: 0; background: transparent; padding: 0;
	cursor: pointer; color: var(--lc-muted); border-radius: 9px; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center; transition: color .15s;
}
.aac-lc .aac-eye:hover, .aac-lc .aac-eye.is-on { color: var(--lc-deep); }
.aac-lc .aac-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aac-lc .aac-eye.is-on .aac-eye__s { display: none; }

/* ---------- CTA ---------- */
.aac-lc .aac-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 50px; padding: 0 22px; width: 100%; margin-top: 16px;
	background: var(--lc-blue); color: #fff !important; border: 0; border-radius: 12px;
	font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1;
	cursor: pointer; text-decoration: none !important; white-space: nowrap;
	box-shadow: 0 8px 20px rgba(47,127,209,.4); transition: filter .15s, transform .05s;
}
.aac-lc .aac-btn:hover { filter: brightness(1.06); color: #fff !important; }
.aac-lc .aac-btn:active { transform: translateY(1px); }
.aac-lc .aac-btn:disabled { opacity: .55; cursor: default; }
.aac-lc .aac-btn.is-busy { opacity: .7; cursor: progress; }
.aac-lc .aac-linkish {
	color: var(--lc-deep); font-weight: 600; font-size: 13.5px; background: none;
	border: 0; padding: 0; cursor: pointer; font-family: inherit; text-decoration: none;
}
.aac-lc .aac-linkish:hover { text-decoration: underline; color: var(--lc-deep); }

/* R7-A1: the privacy line drops further below the CTA (12 → 22px of air) and
   loses a pixel of type (12 → 11px). It is a consent footnote, not a second
   instruction, and at 12px sitting 12px under the button it read as part of it.
   Both containers share this partial, so the popup and the inline card move
   together — as they must, being the same card. */
/* .aac-lc-prefixed, not bare: the typography-leak reset above
   (`.aac-lc p{margin:0!important}`, 0,2,0) out-ranked these 0,1,0 rules, so both
   of them computed 0 and the two lines sat flush under the CTA. On the inline
   card a 12px flex gap inherited from aitas-account.css hid it; in the popup —
   which loads this file alone — nothing did. Fixed at the same time as the gap
   below, so the popup and the inline card share ONE vertical rhythm. */
.aac-lc .aac-lc__legal { margin: 22px 0 0 !important; font-size: 11px; line-height: 1.55; color: var(--lc-muted); text-align: center; }
.aac-lc__legal a { color: var(--lc-label); text-decoration: underline; text-underline-offset: 2px; }
.aac-lc__legal a:hover { color: var(--lc-deep); }
.aac-lc .aac-lc__lost { margin: 14px 0 0 !important; text-align: center; }

/* ---------- OTP ---------- */
/* gap:0 is load-bearing. aitas-account.css sets `.aac-otp__step{gap:12px}` for
   the thankyou claim card, and on /my-account/ — the one page where both
   stylesheets load — that gap silently added 12px to every step of the login
   card, so the popup and the inline card had DIFFERENT vertical rhythms.
   The card's rhythm is margin-driven in this file; this makes that true on both
   surfaces, which is what "one partial, two containers" has to mean. */
.aac-lc .aac-otp__step { display: none; flex-direction: column; gap: 0; }
.aac-lc .aac-otp__step.is-on { display: flex; }
.aac-lc .aac-otp__sent { font-size: 13.5px; color: var(--lc-ink2); line-height: 1.5; margin: 0 0 14px !important; }
.aac-lc .aac-otp__sent b { font-weight: 700; }
.aac-lc .aac-code { display: flex; gap: 8px; }
.aac-lc .aac-code input {
	flex: 1; min-width: 0; height: 56px !important; box-sizing: border-box;
	text-align: center; font-size: 21px !important; font-weight: 800; color: var(--lc-ink);
	border: 1px solid var(--lc-line2) !important; border-radius: 11px !important;
	background: #fff; padding: 0 !important; font-family: inherit; -moz-appearance: textfield;
}
.aac-lc .aac-code input:focus { border-color: var(--lc-deep) !important; box-shadow: 0 0 0 3px rgba(29,128,199,.14); outline: none; }
.aac-lc .aac-otp.is-err .aac-code input { border-color: #E23B3B !important; background: #FEF7F7; }
/* the error lines are filled by JS — empty means no error */
.aac-lc .aac-otp__err { display: none; font-size: 13px; color: var(--lc-red); font-weight: 600; line-height: 1.4; margin: 10px 0 0 !important; }
.aac-lc .aac-otp.is-err .aac-otp__err:not(:empty) { display: block; }
.aac-lc .aac-otp__eerr { font-size: 13px; color: var(--lc-red); font-weight: 600; line-height: 1.4; margin: 9px 0 0 !important; }
.aac-lc .aac-otp__eerr[hidden] { display: none; }
.aac-lc .aac-otp__resend {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-top: 14px;
}
.aac-lc .aac-otp__resend button:disabled { color: var(--lc-muted); cursor: default; text-decoration: none; font-weight: 600; }

/* Turnstile: `interaction-only` paints nothing until Cloudflare wants a
   challenge, but the iframe exists at zero size regardless — the JS measures
   offsetHeight and toggles .is-shown, so the gap is paid only when a challenge
   is actually painted. */
.aac-lc .aac-cap { margin: 0; }
.aac-lc .aac-cap:empty { display: none; }
.aac-lc .aac-cap.is-shown { margin-top: 12px; }
.aac-lc .aac-cap iframe { max-width: 100%; }

/* ---------- the mode switch ---------- */
.aac-lc__f { border-top: 1px solid var(--lc-line); padding: 12px 22px 16px; flex: 0 0 auto; }
.aac-lc__f[hidden] { display: none; }
.aac-lc__sw {
	display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
	background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: inherit;
	font-size: 14px; font-weight: 600; color: var(--lc-deep); line-height: 1.3;
	position: relative;
}
.aac-lc__sw[hidden] { display: none; }
.aac-lc__sw:hover { text-decoration: underline; }
/* touch target: same technique as the ✕ — the label/chevron keep their 30.2px
   box (footer height unchanged), the hit box reads 46px. The ~7.9px overhang
   stays inside the footer's 11–12px top padding + the body's bottom padding,
   so it never reaches the privacy links / «Забули пароль?» above (≥27px away). */
.aac-lc__sw::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	height: 46px; transform: translateY(-50%); background: transparent;
}
.aac-lc__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aac-lc__chev--up { transform: rotate(180deg); }

/* keyboard focus: a theme global sets outline:none on every interactive element */
.aac-lc a:focus-visible, .aac-lc button:focus-visible, .aac-lc input:focus-visible {
	outline: 2px solid var(--lc-deep) !important; outline-offset: 2px;
}

/* ---------- mobile ---------- */
@media (max-width: 480px) {
	.aac-pop { width: calc(100vw - 20px); max-height: calc(100vh - 24px); }
	.aac-lc__h { padding: 15px 18px; }
	.aac-lc__t { font-size: 19px; }
	.aac-lc__b { padding: 18px 18px 16px; }
	.aac-lc__f { padding: 11px 18px 15px; }
	.aac-lc .aac-code { gap: 6px; }
	.aac-lc .aac-code input { height: 52px !important; font-size: 19px !important; }
	.aac-lc:not(.aac-lc--pop) { margin: 16px auto 32px; }
}