/**
 * WalletPro customer wallet — accessibility hardening (#116).
 *
 * This stylesheet is intentionally presentational only. It adds NO layout
 * opinions beyond what accessibility requires, so it layers cleanly on top of
 * any theme. Its whole job is to make the wallet UI's WCAG guarantees come
 * from the plugin rather than from whatever theme a merchant happens to run:
 *
 *  - a visible, high-contrast focus indicator on every wallet control, even
 *    under a theme that resets `outline: 0` (WCAG 2.4.7 Focus Visible);
 *  - contrast-safe colors for the wallet's own colored text (the +/- ledger
 *    amounts and the top-up bonus line) so meaning never relies on a theme's
 *    palette (WCAG 1.4.3 Contrast, 1.4.1 Use of Color);
 *  - keyboard jump targets that land below any sticky header (scroll-margin)
 *    so the in-page section nav is usable with a keyboard.
 *
 * Selectors are scoped to the wallet surfaces so nothing here can affect the
 * rest of the My Account page or the wider site.
 */

/* -------------------------------------------------------------------------
 * Visible focus indicator.
 *
 * `:focus-visible` is the modern, pointer-aware affordance; the plain `:focus`
 * rule is the fallback for engines without `:focus-visible` and, crucially,
 * defeats any theme that sets `outline: 0`. The 2px solid ring plus a 2px
 * offset halo reads on both light and dark control backgrounds, and the
 * outline color (#0b3d91) clears 3:1 against white as a non-text UI component.
 * ---------------------------------------------------------------------- */
.walletpro-wallet-dashboard a:focus,
.walletpro-wallet-dashboard button:focus,
.walletpro-wallet-dashboard input:focus,
.walletpro-wallet-dashboard select:focus,
.walletpro-wallet-dashboard textarea:focus,
.account-funds-add a:focus,
.account-funds-add button:focus,
.account-funds-add input:focus,
.walletpro-redeem :focus,
.walletpro-transfer :focus,
.walletpro-request :focus,
.walletpro-withdraw :focus,
.walletpro-kyc-upload :focus,
.walletpro-incoming-requests :focus,
.walletpro-history-filters :focus,
.walletpro-referrals :focus {
	outline: 2px solid #0b3d91;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0b3d91;
}

/*
 * Where the browser supports `:focus-visible`, only show the ring for
 * keyboard/AT focus and suppress the duplicate `:focus` ring on pointer
 * clicks. The `:focus-visible` ring itself is identical to the rule above.
 */
@supports selector(:focus-visible) {
	.walletpro-wallet-dashboard a:focus:not(:focus-visible),
	.walletpro-wallet-dashboard button:focus:not(:focus-visible),
	.walletpro-wallet-dashboard input:focus:not(:focus-visible),
	.walletpro-wallet-dashboard select:focus:not(:focus-visible),
	.walletpro-wallet-dashboard textarea:focus:not(:focus-visible),
	.account-funds-add :focus:not(:focus-visible),
	.walletpro-redeem :focus:not(:focus-visible),
	.walletpro-transfer :focus:not(:focus-visible),
	.walletpro-request :focus:not(:focus-visible),
	.walletpro-withdraw :focus:not(:focus-visible),
	.walletpro-kyc-upload :focus:not(:focus-visible),
	.walletpro-incoming-requests :focus:not(:focus-visible),
	.walletpro-history-filters :focus:not(:focus-visible),
	.walletpro-referrals :focus:not(:focus-visible) {
		outline: none;
		box-shadow: none;
	}

	.walletpro-wallet-dashboard a:focus-visible,
	.walletpro-wallet-dashboard button:focus-visible,
	.walletpro-wallet-dashboard input:focus-visible,
	.walletpro-wallet-dashboard select:focus-visible,
	.walletpro-wallet-dashboard textarea:focus-visible,
	.account-funds-add :focus-visible,
	.walletpro-redeem :focus-visible,
	.walletpro-transfer :focus-visible,
	.walletpro-request :focus-visible,
	.walletpro-withdraw :focus-visible,
	.walletpro-kyc-upload :focus-visible,
	.walletpro-incoming-requests :focus-visible,
	.walletpro-history-filters :focus-visible,
	.walletpro-referrals :focus-visible {
		outline: 2px solid #0b3d91;
		outline-offset: 2px;
		box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0b3d91;
	}
}

/* High-contrast / forced-colors mode: defer to the system focus color. */
@media (forced-colors: active) {
	.walletpro-wallet-dashboard :focus,
	.walletpro-wallet-dashboard :focus-visible {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
}

/* -------------------------------------------------------------------------
 * Contrast-safe colored text.
 *
 * The ledger table marks credits/debits with a +/- glyph (so meaning is never
 * color-only) and colors the amount. We pin those colors to shades that clear
 * 4.5:1 against a white cell, instead of inheriting an unknown theme color.
 * #1c6b3f (green) ≈ 5.4:1 and #b00910 (red) ≈ 6.1:1 on #ffffff.
 * ---------------------------------------------------------------------- */
.account-funds-transactions .account-funds-amount.positive {
	color: #1c6b3f;
}

.account-funds-transactions .account-funds-amount.negative {
	color: #b00910;
}

/* The top-up bonus line: a readable green that clears AA on white. */
.account-funds-package .account-funds-package-bonus {
	color: #1c6b3f;
}

/* -------------------------------------------------------------------------
 * Keyboard jump targets.
 *
 * The in-page section nav links to empty anchor spans. `scroll-margin-top`
 * keeps the jumped-to section from hiding under a sticky theme header, and the
 * anchors are programmatically focusable (tabindex=-1 in markup) so screen
 * readers announce the destination when focus is moved there.
 * ---------------------------------------------------------------------- */
.walletpro-section-anchor {
	display: block;
	scroll-margin-top: 6rem;
}

/* The section nav reads as a simple inline list; ensure adequate target size
 * and spacing for the link list without overriding theme link colors. */
.walletpro-wallet-dashboard__nav a {
	display: inline-block;
	padding: 0.25em 0;
}