/**
 * Bonza. Login / Signup modal skin (86eypb6k6).
 *
 * Restyles Blocksy Companion Pro's native account modal (#account-modal,
 * .ct-account-modal, framework/features/header/account-modal.php plus
 * header/modal/login.php, register.php, lostpassword.php) to match the
 * Figma "LOGIN/SIGNUP MODAL" component set (node 20769:93836).
 *
 * Figma component-set inspection (Gate: variant/state coverage): the set
 * 20769:93836 has exactly four components, DEVICE=D/T STATE=LOGIN,
 * DEVICE=M STATE=LOGIN, DEVICE=D/T STATE=SIGNUP, DEVICE=M STATE=SIGNUP.
 * No hover, focus, active, disabled, error or loading variants exist in
 * the set. This matches the ticket text itself: "Validation states,
 * error states... are not drawn and need specifying." Interactive states
 * below (:hover, :focus-visible) are added defensively from the design
 * system's existing brand colors, not from a drawn Figma state.
 *
 * Scope note: this file only restyles Companion Pro's existing modal
 * markup. No new HTML or JS. Card structure, tab switching, form
 * submission, WooCommerce registration fields, the newsletter checkbox
 * (Klaviyo hook) and the error/notification box all come from Companion
 * Pro and other active plugins already. See the task report for the full
 * Gate 2 config-investigation writeup of what was satisfied by config
 * versus what needed this CSS.
 *
 * Breakpoint: Blocksy's own internal mobile cutoff is 690px, not 768px.
 * The Figma "DEVICE=M" (380px) frame applies below that. "DEVICE=D/T"
 * (424px, identical for tablet and desktop) applies at or above it.
 *
 * Tokens below are bridged through CSS custom properties with Figma
 * fallback values: `--bonza-login-*` reads `--theme-palette-color-*` or
 * a future `--wp--preset--font-family--*` first, so this adopts real
 * brand tokens automatically once Phase 1/2 global setup lands, with no
 * edit needed here.
 *
 * Known gap, flagged rather than silently resolved (see task report):
 * Kobe1.1 and Nominee Heavy Extended are not uploaded or registered
 * anywhere on this site yet (checked Companion Pro Custom Fonts: empty).
 * Font-family below falls back to system stacks until that gets settled;
 * the ticket itself says this needs settling across the whole task set,
 * not just this modal.
 *
 * Checked memory (memory_search "Blocksy Companion Pro account login
 * modal CSS bonza") for prior gotchas: the closest hit is a My Account
 * nav pattern where Blocksy's compiled CSS reads a custom property
 * (`--account-nav-text-active-color`) rather than plain `color`, so a
 * direct override there does nothing. The account-modal tab rule in
 * header-account-modal-lazy.scss uses plain `color`/`background`, no
 * custom-property indirection, so the direct overrides below do apply.
 */

#account-modal {
	/*
	 * Verified live (2026-08-26, Playwright on bonza-retheme.local): Blocksy
	 * ships its OWN default palette (--theme-palette-color-1: #2872fa,
	 * -2: #1559ed, a blue demo preset) even with theme_mods_blocksy-child
	 * completely empty of colorPaletteColor* keys. A `var(--theme-palette-
	 * color-1, #ffc125)` fallback never fires because the property IS set,
	 * just to the wrong (unbranded) value, so the modal rendered Blocksy's
	 * demo blue instead of Bonza gold/green on first pass.
	 *
	 * Bonza's real brand palette hasn't landed in the Customizer yet
	 * (separate Phase 1/2 foundational-token work, not this ticket). Rather
	 * than wait on that or touch the site-wide palette from a single-modal
	 * ticket, the two palette custom properties are overridden HERE, scoped
	 * to #account-modal only: same cascade-into-Blocksy's-own-var pattern
	 * used for the account-page nav elsewhere in this codebase. Every other
	 * page and component keeps reading the unmodified global blue; only
	 * this modal subtree sees Bonza's gold/green. If/when the global
	 * palette is corrected to these same values, this override becomes a
	 * no-op and can be deleted.
	 */
	--theme-palette-color-1: #ffc125;
	--theme-palette-color-2: #247b4e;

	/*
	 * Same bug, same fix, one property over. Blocksy unconditionally emits
	 * `--theme-text-color` (defaulting to `--theme-palette-color-3`), so a
	 * `var(--theme-text-color, #2e2a2a)` fallback never fires either. It
	 * silently inherited whatever un-branded value palette-3 resolves to.
	 * Overridden directly and scoped to #account-modal, same as the two
	 * palette vars above.
	 *
	 * Corrected from #494545 to Figma's literal #2e2a2a (fable-5.1 pixel
	 * audit, CU-86eypb6k6, deltaE 12.2 against the earlier live value):
	 * #2e2a2a on white is well past every WCAG text threshold (about
	 * 14.8:1), so unlike the two substitutions below there is no
	 * accessibility reason to deviate from the Figma-literal value here.
	 */
	--theme-text-color: #2e2a2a;

	/* Local design tokens (Figma-accurate, now backed by the overrides above). */
	--bonza-login-text: var(--theme-text-color);
	--bonza-login-heading-active: var(--theme-palette-color-2);
	/*
	 * NOT the literal Figma hex (#ffc125). Measured: #ffc125 on white is
	 * 1.63:1, which fails WCAG 2.2 AA at any size (large-text threshold is
	 * 3:1, normal is 4.5:1). This is live, interactive tab-label text, not
	 * passive decoration, so it can't ship as-drawn the way the input-border
	 * gap below used to, until CU-86eypb8gy fixed that one too. #8a5d00
	 * keeps the same hue family and measures about
	 * 5.2:1 against white, passing at both the 18px desktop and 14px mobile
	 * sizes this label renders at. Flagged for designer sign-off on the
	 * exact shade, not silently matched pixel for pixel.
	 */
	--bonza-login-heading-inactive: #8a5d00;
	/* Kept as its own token (not inlined at the call site below) so a
	 * genuine mobile-specific value can be reintroduced here later
	 * without touching the rule that consumes it. */
	--bonza-login-heading-inactive-mobile: var(--bonza-login-heading-inactive);
	--bonza-login-cta-bg: var(--theme-palette-color-1);
	/* Corrected from #000000 to Figma's literal #2e2a2a, same audit as
	 * --theme-text-color above (deltaE was 17.6 against the earlier
	 * live value). #2e2a2a on the #ffc125 CTA background measures well
	 * past 4.5:1, so no substitution is needed here either. */
	--bonza-login-cta-text: #2e2a2a;
	--bonza-login-link: #6e5d84;
	/* editor-friendly-ok: this restyles Companion Pro's own account-modal
	   markup (see this file's scope note above, lines 18-24) with no new
	   HTML/JS and no Gutenberg block or pattern counterpart.
	   WHY #7c828c not the Figma-literal #d1d5db: this token styles only the
	   form input border (line ~238) below, whose resting state has no
	   other cue (background is plain white, the focus-visible rule below
	   is the only other state change). #d1d5db on white measures 1.47:1,
	   fails the WCAG 1.4.11 3:1 non-text-component floor -- the "flagged,
	   not fixed" note this file used to carry here. This audit has since
	   established, across four merged border-contrast fixes on the same
	   site (checkout shipping/account steps, shipping-method pill, Stripe
	   card field), that a form input's resting border with no redundant
	   cue is a real functional-boundary failure, not passive decoration,
	   so it gets the same fix rather than staying deferred: #7c828c
	   measures 3.87:1 on white, same value already established elsewhere
	   in this audit. CU-86eypb8gy. */
	--bonza-login-border: #7c828c;
	--bonza-login-input-bg: #ffffff;
	--bonza-login-card-border: #efefef;

	/* FIX (typography contract, CU-86eyxb3yv): this divergent --bonza-font-*
	   pattern chained to var(--wp--preset--font-family--nominee/--kobe, ...)
	   with NO real Nominee/Kobe1.1 literal anywhere in the chain -- it only
	   ever rendered correctly because theme.json happens to emit those preset
	   vars inline on the page (a latent failure: any page/context where the
	   preset vars aren't emitted silently falls to 'Arial Black'/-apple-system).
	   Collapsed onto the same robust literal-first pattern every other
	   component in custom/css/ uses (cart-drawer-filled.css, checkout-*.css):
	   the real font name first, --theme-font-family as the one live fallback. */
	--bonza-font-heading: "Nominee", var(--theme-font-family, sans-serif);
	--bonza-font-body: "Kobe1.1", var(--theme-font-family, sans-serif);
}

/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */
/*
 * Companion Pro's own dynamic-styles stylesheet (theme-integration.php,
 * appended to <body> at runtime, so it lands after this enqueued file in
 * source order) carries the identical selector `#account-modal
 * .ct-panel-content { padding: 35px }` at the same specificity, and wins
 * the tie by load order. The doubled class below raises specificity by
 * one step so this rule always wins regardless of injection order,
 * without an !important.
 */
#account-modal .ct-panel-content.ct-panel-content {
	padding: 0;
}

#account-modal .ct-account-modal {
	max-width: 380px;
	border: 1px solid var(--bonza-login-card-border);
	border-radius: 12px;
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
	font-family: var(--bonza-font-body);
	color: var(--bonza-login-text);
}

@media (min-width: 690px) {
	#account-modal .ct-account-modal {
		max-width: 424px;
		border-radius: 8px;
		box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.06);
	}
}

/* ------------------------------------------------------------------ */
/* Tabs. Companion Pro renders `ul > li.ct-login` and `li.ct-register`. */
/* Figma draws these as large headline toggles, so this is a full       */
/* re-skin of the plugin's default 12px uppercase pill bar.             */
/* ------------------------------------------------------------------ */
#account-modal .ct-account-modal > ul {
	border-bottom: none;
}

#account-modal .ct-account-modal > ul li {
	height: 56px;
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-bottom: 3px solid transparent;
	background: transparent;
	opacity: 1;
	color: var(--bonza-login-heading-inactive);
}

#account-modal .ct-account-modal > ul li:first-child {
	border-right: none;
}

#account-modal .ct-account-modal > ul li.active {
	color: var(--bonza-login-heading-active);
	border-bottom-color: var(--bonza-login-heading-active);
}

/* source: DERIVED -- "no hover/focus variants exist in the set" (this file's
   own file-header note); this LOGIN/SIGNUP tab-label dim is a defensive
   addition, not a contract component. Opacity-only, no reflow. */
#account-modal .ct-account-modal > ul li:not(.active):hover {
	opacity: 0.75;
	background: transparent;
}

@media (min-width: 690px) {
	#account-modal .ct-account-modal > ul li {
		height: 56px;
		font-size: 18px;
		line-height: 26px;
		letter-spacing: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Form area                                                           */
/* ------------------------------------------------------------------ */
#account-modal .ct-account-forms {
	padding: 32px 24px 40px;
}

@media (min-width: 690px) {
	#account-modal .ct-account-forms {
		padding: 40px 36px;
	}
}

#account-modal .ct-account-modal form label {
	display: block;
	font-family: var(--bonza-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--bonza-login-text);
	margin-bottom: 6px;
}

/* editor-friendly-ok: same accepted pattern as the rest of this file (see
 * the note above #account-modal) -- this restyles Companion Pro's own
 * account-modal markup, no Gutenberg block/pattern counterpart exists.
 *
 * Required-field asterisk (fable-5.1 pixel audit, CU-86eypb6k6): Figma
 * draws "Email *" / "Password *" in red on both the login and register
 * forms, and ONLY on those two fields. Neither field is actually
 * required= in the plugin markup, and the plugin's own label strings
 * carry no asterisk, so this is styled as a decorative ::after rather
 * than added via the gettext overrides (which only remap existing
 * plugin strings, not append new markup).
 *
 * Targeted by `for` attribute, not by a form-wrapper selector (a second
 * independent code-review audit caught that the first version of this
 * rule, scoped only to `.ct-login-form form label` / `.ct-register-form
 * form label`, also matched the Remember-me checkbox's own <label>,
 * which lives inside the same login form, rendering "Remember me *"; it
 * would equally have matched any label a plugin injects into the
 * register form via `do_action('woocommerce_register_form')`, e.g. a
 * future newsletter checkbox). The four ids below are each the specific
 * field this asterisk belongs to, so no other label in either form can
 * ever match, regardless of what else those forms render: user_login
 * (login email), user_pass (login password), ct_user_email (register
 * email), user_pass_register (register password).
 *
 * Not the Figma-literal pure red (#ff0000): that measures about 4.0:1 on
 * white, just under the WCAG 1.4.3 4.5:1 normal-text floor (computed:
 * relative luminance 0.2126, contrast (1.05)/(0.2126+0.05) = 4.0). This
 * asterisk is meaningful text (it signals "required", the same category
 * as this file's other documented substitutions, not passive
 * decoration), so #cc0000 is used instead: same computation gives
 * relative luminance 0.128, contrast (1.05)/(0.128+0.05) = 5.9:1,
 * comfortably passing while staying visibly red. Flagged here the same
 * way as the other substitutions in this file, not silently matched
 * pixel for pixel. */
#account-modal label[for='user_login']::after,
#account-modal label[for='user_pass']::after,
#account-modal label[for='ct_user_email']::after,
#account-modal label[for='user_pass_register']::after {
	content: ' *';
	color: #cc0000;
}

/* Companion Pro's own privacy-policy paragraph (register form only)
 * renders with no line-height rule, so it inherits the browser default
 * (~1.65x, matching the rest of this modal's default label text before
 * this file was written). Figma specifies the same tight 14/16 as the
 * rest of the form body text (fable-5.1 pixel audit, CU-86eypb6k6: live
 * measured 23.1px vs Figma's 16px). */
#account-modal .woocommerce-privacy-policy-text {
	font-family: var(--bonza-font-body);
	font-size: 16px;
	line-height: 20px;
	color: var(--bonza-login-text);
}

/* ------------------------------------------------------------------ */
/* Register tab, matched to Figma LOGIN/SIGNUP MODAL STATE=SIGNUP       */
/* (20769:93833 D/T 424 wide, 20769:93832 M 380 wide). Lan asked for an  */
/* exact Figma match here, so the Kobe 16px floor does not apply in this */
/* form: newsletter label and privacy copy are Kobe1.1 Regular 14/16.    */
/* Rhythm from Figma (D/T): first label 45px under the tabs, checkbox    */
/* row 16px tall 12px under the password field, captcha 24px under it,   */
/* privacy copy 20px under the captcha, REGISTER button 22px under the   */
/* privacy copy, 50px from the button to the card's bottom edge. Mobile  */
/* uses 40px side padding, first label 64px under the tabs, and 68px     */
/* below the button.                                                     */
/* ------------------------------------------------------------------ */
#account-modal .ct-register-form {
	margin: 32px 0 28px;
	padding: 0 16px;
}

#account-modal .ct-account-modal .ct-register-form form > p.bonza-register-newsletter:not(:last-child) {
	margin: 0 0 24px;
}

#account-modal .ct-account-modal .bonza-register-newsletter label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--bonza-login-text);
}

#account-modal .bonza-register-newsletter .ct-checkbox {
	top: 0;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
}

#account-modal .ct-register-form .cf-turnstile {
	margin-bottom: 20px;
}

#account-modal .ct-register-form .cf-turnstile-br {
	display: none;
}

#account-modal .ct-register-form .woocommerce-privacy-policy-text {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 16px;
}

#account-modal .ct-register-form .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

#account-modal .ct-account-modal form input.input::placeholder {
	font-size: 14px;
	line-height: 16px;
}

@media (min-width: 690px) {
	#account-modal .ct-register-form {
		margin: 4px 0 10px;
		padding: 0;
	}
}

/* Figma's vertical rhythm between field groups is 12px, tighter than the
 * ~20px this modal was inheriting from Companion Pro / browser default
 * <p> margins (fable-5.1 pixel audit, CU-86eypb6k6). Excludes
 * `.login-remember` (a second independent code-review audit proved the
 * first version of this rule, `p:not(:last-child)` alone, is (1 id, 2
 * classes, 2 types) and beats the remember-row's own `.login-remember`
 * rule at (1 id, 1 class, 0 types) regardless of source order, so that
 * row was silently rendering this 12px instead of its own intended 10px
 * -- a comment claiming otherwise was wrong and has been removed). Also
 * excludes `:last-child` so the submit button's wrapping <p> doesn't
 * gain an unwanted trailing gap. */
#account-modal .ct-login-form form > p:not(:last-child):not(.login-remember),
#account-modal .ct-register-form form > p:not(:last-child):not(.login-remember) {
	margin-bottom: 12px;
}

#account-modal .ct-account-modal form input.input {
	width: 100%;
	height: auto;
	/* 13px top/bottom + 20px line-height + 2px border = 48px total, matching
	 * Figma (fable-5.1 pixel audit, CU-86eypb6k6: live was 42px, 12px
	 * padding + 16px line-height + 2px border). Horizontal padding
	 * unchanged. The text is 16px/20px (Kobe 16px floor for form fields), so
	 * 13px top/bottom keeps the total at 48px. */
	padding: 13px 12px;
	font-family: var(--bonza-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--bonza-login-text);
	background: var(--bonza-login-input-bg);
	border: 1px solid var(--bonza-login-border);
	border-radius: 8px;
}

/* Non-text (border) contrast: --bonza-login-border is now #7c828c
 * (3.87:1 on white), see its definition above for the full writeup --
 * this superseded the earlier "kept as-drawn, flagged for design
 * sign-off" note (Gate 3B) once the same pattern was independently
 * confirmed as a real fix elsewhere in this audit, CU-86eypb8gy. */
#account-modal .ct-account-modal form input.input:focus-visible {
	outline: 2px solid var(--bonza-login-heading-active);
	outline-offset: 1px;
	border-color: var(--bonza-login-heading-active);
}

/* Password reveal icon. Blocksy's own `.show-password-input` mask-image
 * icon (show-password.scss) already inherits `--theme-text-color`. This
 * only bumps size to match the Figma 20x20 (the plugin default is 14x14). */
#account-modal [class*='password-input'] input {
	padding-inline-end: 44px;
}

/* Fixed-pixel centering, not percentage-based (a second independent
 * code-review audit flagged that an earlier calc(), based on a fixed 40px
 * field-height fallback, put this 20px icon about 4px above centre once
 * the input's own height changed from 42px to 48px above; `top: calc(50%
 * - 10px)` was the fix at the time). Caught live by Lan on the register
 * field specifically once text is typed: WooCommerce's password-strength
 * meter (Companion Pro's own account/password-strength.js, confirmed
 * reading it directly) inserts a `.woocommerce-password-strength` div as
 * a THIRD sibling inside this same wrapper the moment the field has a
 * value (`field.nextElementSibling.after(...)`, landing right after this
 * icon). That grows the wrapper past just the input's own height, and
 * `50%` of the now-taller wrapper no longer lines up with the input's own
 * row -- the login field's wrapper never gets that third sibling (no
 * strength meter on login), so this only ever showed up on Sign Up. Fixed
 * to a literal 14px (half of the input's own fixed 48px height, minus
 * half the icon's 20px: (48-20)/2), which anchors to the input's own
 * fixed size instead of the wrapper's total height, so it can't be
 * disturbed by anything else the wrapper gains later. Mathematically
 * identical to the old calc() for the login case (wrapper height there
 * IS always exactly 48px), so this is a strict fix with no behaviour
 * change where the bug didn't exist. */
/* editor-friendly-ok: same accepted pattern as the rest of this file (see
 * line 119) -- Companion Pro's own account-modal markup, not a block-editor
 * surface. */
#account-modal [class*='password-input'] .show-password-input {
	width: 20px;
	height: 20px;
	top: 14px;
	/* editor-friendly-ok: same accepted pattern as line 119/385 above.
	 * Figma draws this icon in the same purple as the link color, not
	 * the body-text color it inherits by default. The icon is a CSS
	 * mask, so Blocksy paints it via `background-color` (confirmed
	 * reading the theme's own compiled CSS), not `color`. */
	background-color: #6e5d84; /* 5.9:1 on the #ffffff input background -- same value as --bonza-login-link above, well past the 3:1 UI-component floor */
}

/* ------------------------------------------------------------------ */
/* Remember me / forgot password row                                   */
/* ------------------------------------------------------------------ */
/* Companion Pro's own `.col-2` class stacks this row to a column below
 * its internal breakpoint; Figma's mobile frame keeps it a single row
 * (checkbox+label left, link right) at every width this modal renders at
 * (fable-5.1 pixel audit, CU-86eypb6k6: live was column, 2 lines, on
 * mobile). Forced back to row unconditionally. */
#account-modal .login-remember {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	font-family: var(--bonza-font-body);
	font-size: 16px;
	line-height: 20px;
	color: var(--bonza-login-text);
	/* Figma spacing: remember row to CTA is 10px, tighter than the 12px
	 * used between the other field groups below. This rule's specificity
	 * (1 id, 1 class, 0 types) only wins over the general field-group
	 * rule below because that rule now explicitly excludes
	 * `.login-remember` -- it never won on specificity alone (a second
	 * independent code-review audit caught this: the general rule's
	 * `:not(:last-child)` used to outrank this rule regardless of source
	 * order, so this 10px was previously a dead declaration). */
	margin-bottom: 10px;
}

/* The generic `form label` rule above (16px/700) has higher CSS
 * specificity (2 type selectors: form, label) than `.login-remember`
 * alone (1 class, 0 type on the label itself), so it was winning
 * regardless of source order and rendering this label at the wrong
 * size/weight (fable-5.1 pixel audit, CU-86eypb6k6: live was 700 16/20,
 * Figma is 400 14/16, matching the rest of this row). One extra class
 * selector (`.ct-account-modal`) restores the intended specificity. */
#account-modal .ct-account-modal .login-remember label {
	display: inline;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 0;
}

#account-modal .ct-forgot-password,
#account-modal .ct-forgot-password-static,
#account-modal .ct-back-to-login {
	font-family: var(--bonza-font-body);
	font-size: 16px;
	line-height: 20px;
	color: var(--bonza-login-text);
}

#account-modal a:focus-visible,
#account-modal li:focus-visible,
#account-modal button:focus-visible {
	outline: 2px solid var(--bonza-login-heading-active);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Primary CTA. LOGIN / REGISTER submit.                                */
/* ------------------------------------------------------------------ */
/* source: FIGMA (default state) -- Button/Primary/Large. bg (--bonza-login-cta-bg
 * = --theme-palette-color-1, gold) + border 1.5px #b86e00 + text #2e2a2a is an
 * exact token match to the contract's measured Primary/Large default, EXCEPT
 * this modal's own fable-5.1 pixel audit (CU-86eypb6k6) confirmed no drop
 * shadow on this specific instance -- kept as-is, not overridden by the
 * generic Button set's "shadow visible" default. Border-width is unchanged
 * between default/hover (only border-color moves), so no reflow risk exists
 * regardless of box-sizing. */
#account-modal .ct-account-modal .ct-button {
	height: 48px;
	padding: 16px;
	font-family: var(--bonza-font-heading);
	font-weight: 900;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bonza-login-cta-text);
	background: var(--bonza-login-cta-bg);
	/* Figma draws a 1.5px darker-gold ring, no drop shadow (fable-5.1
	 * pixel audit, CU-86eypb6k6: live had no border and a shadow Figma
	 * doesn't draw). */
	border: 1.5px solid #b86e00;
	border-radius: 999px;
	box-shadow: none;
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out;
}

/* source: FIGMA -- Primary/Large hover delta: full hue swap gold->dark green
 * (not a darken), border removed, text->white. Corrects the previous generic
 * brightness(0.96) filter, which had no Figma backing and didn't match the
 * measured delta (a filter also risks darkening the border/text together
 * rather than the independent per-property swap Figma draws).
 * editor-friendly-ok: reuses this file's own --theme-palette-color-2
 * Customizer token (same convention as --bonza-login-heading-active above),
 * with the measured Figma value as the literal fallback so an editor
 * palette change still cascades. */
#account-modal .ct-account-modal .ct-button:hover {
	background: var(--theme-palette-color-2, #1C5F3C); /* white text below measures 8.87:1 (WCAG relative-luminance formula) against the #1C5F3C fallback, same value verified elsewhere (cart-drawer-filled.css .bcd-empty-cta--primary:hover) */
	border-color: transparent;
	color: #FFFFFF;
}

/* Close button. Keep Companion Pro's own icon and position. Only make
 * sure it meets a 24px minimum hit target on mobile per WCAG 2.2 AA 2.5.8. */
#account-modal .ct-toggle-close {
	min-width: 24px;
	min-height: 24px;
}

/* Checkbox border colour/radius (Remember-me now, newsletter checkbox once
 * it exists). Previously deferred: a direct `border`/`border-radius`
 * override risked being outranked by Blocksy's own custom properties the
 * same way `--theme-text-color` was earlier in this file (see this file's
 * CHANGELOG entry). Verified this time before writing anything -- fetched
 * the site's actual compiled Blocksy bundle
 * (wp-content/themes/blocksy/static/bundle/main.min.css) rather than
 * guessing: `.ct-checkbox` (the exact class Companion Pro's modal renders
 * on #rememberme, confirmed reading login.php directly) reads
 * `border-color: var(--theme-form-selection-field-initial-color)` and
 * `border-radius: var(--theme-form-checkbox-border-radius, 3px)`. Both are
 * real, live custom properties, so setting them here -- scoped to this
 * modal only, not the sitewide `:root` -- reliably wins with no specificity
 * fight. Figma: #939598 / 4px. Live default: #e1e8ed / 3px. */
#account-modal .ct-account-modal .ct-checkbox {
	--theme-form-selection-field-initial-color: #939598;
	--theme-form-checkbox-border-radius: 4px;
}