/**
 * 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, #494545)` 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.
	 */
	--theme-text-color: #494545;

	/* 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 was. #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;
	--bonza-login-cta-bg: var(--theme-palette-color-1);
	--bonza-login-cta-text: #000000;
	--bonza-login-link: #6e5d84;
	--bonza-login-border: #d1d5db;
	--bonza-login-input-bg: #ffffff;
	--bonza-login-card-border: #efefef;

	--bonza-font-heading: var(--wp--preset--font-family--nominee, 'Arial Black', 'Segoe UI Black', sans-serif);
	--bonza-font-body: var(--wp--preset--font-family--kobe, -apple-system, BlinkMacSystemFont, 'Segoe UI', 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);
}

#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;
}

#account-modal .ct-account-modal form input.input {
	width: 100%;
	height: auto;
	padding: 12px;
	font-family: var(--bonza-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	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 note: #D1D5DB on white measures about 1.3:1,
 * below the WCAG 1.4.11 3:1 threshold for a UI-component boundary. Kept
 * as-drawn (the Figma-specified value) and flagged in the task report for
 * designer sign-off, not silently darkened. See Gate 3B. The focus state
 * below is the compliant path in the meantime. */
#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;
}

#account-modal [class*='password-input'] .show-password-input {
	width: 20px;
	height: 20px;
	top: calc(var(--theme-form-field-height, 40px) / 2 - 10px);
}

/* ------------------------------------------------------------------ */
/* Remember me / forgot password row                                   */
/* ------------------------------------------------------------------ */
#account-modal .login-remember {
	align-items: center;
	font-family: var(--bonza-font-body);
	font-size: 14px;
	line-height: 16px;
	color: var(--bonza-login-text);
}

#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: 14px;
	line-height: 16px;
	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.                                */
/* ------------------------------------------------------------------ */
#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);
	border: none;
	border-radius: 999px;
	box-shadow:
		0px 4px 6px -2px rgba(0, 0, 0, 0.03),
		0px 12px 16px -4px rgba(0, 0, 0, 0.08);
}

#account-modal .ct-account-modal .ct-button:hover {
	filter: brightness(0.96);
}

/* 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;
}