/**
 * BankPro WP — Customer Portal stylesheet.
 * Mobile-first. Neutral banking palette (not tied to any real bank's
 * branding) — every color is a CSS custom property so a school/instructor
 * can retheme it without touching selectors.
 */

.bankpro-portal {
	--bankpro-primary: #1657a3;
	--bankpro-primary-dark: #0f3d73;
	--bankpro-accent: #0f9d6a;
	--bankpro-danger: #c0392b;
	--bankpro-warning: #b8860b;
	--bankpro-bg: #f4f6f9;
	--bankpro-surface: #ffffff;
	--bankpro-border: #dde3ea;
	--bankpro-text: #1c2733;
	--bankpro-text-muted: #5b6b7c;
	--bankpro-radius: 10px;
	--bankpro-shadow: 0 1px 3px rgba(20, 30, 45, 0.08), 0 1px 2px rgba(20, 30, 45, 0.06);
	--bankpro-space-1: 4px;
	--bankpro-space-2: 8px;
	--bankpro-space-3: 16px;
	--bankpro-space-4: 24px;
	--bankpro-space-5: 32px;

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bankpro-text);
	background: var(--bankpro-bg);
	max-width: 1100px;
	margin: 0 auto;
	border-radius: var(--bankpro-radius);
	overflow: hidden;
}

.bankpro-portal *,
.bankpro-portal *::before,
.bankpro-portal *::after {
	box-sizing: inherit;
}

.bankpro-portal a {
	color: var(--bankpro-primary);
}

/* Prompt 21 (Phase 6) — real-browser testing found `.bankpro-portal a`'s
   generic link color (specificity 0,1,1) silently beating
   `.bankpro-btn--primary`'s `color: #fff` (specificity 0,1,0) whenever a
   primary button is rendered as an `<a>` inside `.bankpro-portal` (e.g. the
   registration success panel's "Go to Login" link) — white text became
   invisible against the same-color background. `--secondary`/`--ghost`
   were unaffected only by coincidence (their own intended text color
   already equals `.bankpro-portal a`'s). Re-declared here at higher
   specificity (0,2,1) — the same "redeclare, don't fight the cascade"
   pattern already used for `.bankpro-btn--secondary:hover` above. */
.bankpro-portal a.bankpro-btn--primary {
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Header / brand / nav toggle                                        */
/* ------------------------------------------------------------------ */

.bankpro-portal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
	padding: var(--bankpro-space-3) var(--bankpro-space-4);
	background: var(--bankpro-primary-dark);
	color: #fff;
	flex-wrap: wrap;
}

.bankpro-portal__brand {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	font-weight: 600;
	font-size: 1.05rem;
}

.bankpro-portal__logo {
	font-size: 1.3rem;
}

.bankpro-portal__header-actions {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-3);
}

.bankpro-portal__greeting {
	font-size: 0.9rem;
	opacity: 0.9;
}

.bankpro-portal__nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	position: relative;
}

/* Prompt 22 (Phase 12) — real bug found via mobile browser testing (the
   toggle is only ever visible below the 720px breakpoint, so no prior
   phase's desktop-only testing ever rendered it): Hello Elementor's
   reset.css ships a generic `button:focus, button:hover { background-color:
   #CC3366 }` rule that silently replaced this button's background the
   instant it was clicked/focused, since nothing here previously redeclared
   those states. Same root cause, same fix shape, as the already-documented
   Astra `button:hover` cascade issue `.bankpro-btn--secondary`/`.bankpro-btn--ghost`
   already guard against below — redeclaring both states here raises this
   rule's specificity so it always wins, regardless of theme. Matches
   `.bankpro-portal__nav-link:hover`'s own existing hover treatment for
   visual consistency within the same dark header bar. */
.bankpro-portal__nav-toggle:hover,
.bankpro-portal__nav-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
}

.bankpro-portal__nav-toggle-bar,
.bankpro-portal__nav-toggle-bar::before,
.bankpro-portal__nav-toggle-bar::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: #fff;
}

.bankpro-portal__nav-toggle-bar {
	top: 50%;
	transform: translateY(-50%);
}

.bankpro-portal__nav-toggle-bar::before {
	top: -7px;
}

.bankpro-portal__nav-toggle-bar::after {
	top: 7px;
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */

.bankpro-portal__nav {
	background: var(--bankpro-primary);
}

.bankpro-portal__nav-list {
	list-style: none;
	margin: 0;
	padding: 0 var(--bankpro-space-2);
	display: flex;
	flex-wrap: wrap;
}

.bankpro-portal__nav .bankpro-portal__nav-link {
	display: block;
	padding: 12px var(--bankpro-space-3);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	border-bottom: 3px solid transparent;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.bankpro-portal__nav .bankpro-portal__nav-link:hover,
.bankpro-portal__nav .bankpro-portal__nav-link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.bankpro-portal__nav .bankpro-portal__nav-link.is-active {
	color: #fff;
	border-bottom-color: var(--bankpro-accent);
}

/* ------------------------------------------------------------------ */
/* Notifications (toasts)                                             */
/* ------------------------------------------------------------------ */

.bankpro-portal__notifications {
	position: fixed;
	top: var(--bankpro-space-3);
	right: var(--bankpro-space-3);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-2);
	max-width: min(360px, calc(100vw - 32px));
}

.bankpro-toast {
	background: var(--bankpro-surface);
	border-left: 4px solid var(--bankpro-primary);
	border-radius: 6px;
	box-shadow: var(--bankpro-shadow);
	padding: var(--bankpro-space-2) var(--bankpro-space-3);
	font-size: 0.9rem;
	animation: bankpro-toast-in 0.2s ease-out;
}

.bankpro-toast--error {
	border-left-color: var(--bankpro-danger);
}

.bankpro-toast--success {
	border-left-color: var(--bankpro-accent);
}

@keyframes bankpro-toast-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------------ */
/* Main content / cards                                                */
/* ------------------------------------------------------------------ */

.bankpro-portal__main {
	padding: var(--bankpro-space-4);
	background: var(--bankpro-bg);
}

.bankpro-view__title {
	margin: 0 0 var(--bankpro-space-4);
	font-size: 1.5rem;
}

.bankpro-card {
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius);
	box-shadow: var(--bankpro-shadow);
	padding: var(--bankpro-space-4);
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-card--centered {
	text-align: center;
	max-width: 420px;
	margin: var(--bankpro-space-5) auto;
}

/* Registration wizard (Phase 21/6) — needs the extra width for the 2-column
   field grid the .bankpro-recipient-fields__grid pattern produces, and
   left-aligned text (matching the Transfer wizard it otherwise mirrors),
   so it uses its own modifier instead of widening the shared
   .bankpro-card--centered (still used, unchanged, by Login/Forgot
   Password/Reset Password). */
.bankpro-card--wizard {
	max-width: 640px;
	margin: var(--bankpro-space-5) auto;
}

/* -------------------------------------------------------------------- */
/* Login (Phase 21/3 modernization) — still `.bankpro-card--centered`     */
/* (unchanged), just a few additive, narrowly-scoped rules so it visually */
/* matches the Registration wizard's polish without becoming a second     */
/* component system.                                                     */
/*                                                                        */
/* Task 4 — the same badge/full-width-CTA treatment is now also applied   */
/* to Forgot Password and Reset Password (same `.bankpro-card--centered`  */
/* family, same visitor flow) by reusing this exact class and extending   */
/* this exact selector — no second badge design, no global change to      */
/* `.bankpro-btn--primary` or `.bankpro-card--centered` themselves.       */
/* -------------------------------------------------------------------- */

/* A small circular icon badge — echoes the wizard step-indicator's circle
   treatment (`.bankpro-wizard-steps li::before`) as a branding touch, not an
   implication of steps; none of Login/Forgot/Reset Password have steps. */
.bankpro-login-badge {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--bankpro-space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bankpro-primary);
	color: #fff;
}

#bankpro-login-form .bankpro-btn--primary,
#bankpro-forgot-password-form .bankpro-btn--primary,
#bankpro-reset-password-form .bankpro-btn--primary,
#bankpro-reset-password-invalid .bankpro-btn--primary {
	width: 100%;
	margin-top: var(--bankpro-space-2);
}

/* The one login error that isn't already sitting directly beside its own
   field (identifier/password/pin each have their own inline
   `.bankpro-field__error`) — a non-empty server-rejection message gets the
   same filled-banner treatment `.bankpro-alert--error` already uses
   elsewhere (same color tokens), so it reads as a real alert rather than a
   small red caption easy to miss above the submit button. */
#bankpro-login-form [data-error-for="login"]:not(:empty) {
	background: var(--bankpro-danger-bg);
	border: 1px solid color-mix(in srgb, var(--bankpro-danger) 30%, transparent);
	border-radius: var(--bankpro-radius-md);
	padding: var(--bankpro-space-2) var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-3);
	font-weight: 600;
}

.bankpro-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-card__head h2 {
	margin: 0;
	font-size: 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Account summary card                                                */
/* ------------------------------------------------------------------ */

.bankpro-summary-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-4);
	flex-wrap: wrap;
}

.bankpro-summary-card__type {
	margin: 0;
	color: var(--bankpro-text-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bankpro-summary-card__number {
	margin: 2px 0 0;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.bankpro-summary-card__figures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-summary-card__figure {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bankpro-summary-card__label {
	font-size: 0.8rem;
	color: var(--bankpro-text-muted);
}

.bankpro-summary-card__value {
	font-size: 1.6rem;
	font-weight: 700;
}

.bankpro-summary-card__value--accent {
	color: var(--bankpro-accent);
}

/* ------------------------------------------------------------------ */
/* Maskable values (account number / balance reveal toggle)            */
/* ------------------------------------------------------------------ */

.bankpro-mask-toggle__wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bankpro-mask-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--bankpro-text-muted);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}

/* Stage 3, Increment 3.5 finding: this base rule only guarded :hover/
   :focus-visible — a real mouse click sets :focus without :focus-visible
   (Chrome's own heuristic excludes pointer-triggered focus from
   :focus-visible), so a genuine click on any `.bankpro-mask-toggle`
   outside the hero (e.g. the account-strip cards' own toggles, which have
   no scoped override of their own) fell through to Hello Elementor's
   `[type="button"]:focus { background:#CC3366 }` — confirmed live via a
   real click + zoomed screenshot before this fix. The hero's own scoped
   `.bankpro-dashboard-hero .bankpro-mask-toggle` override already covered
   :focus correctly; this is the same fix applied to the shared base rule
   every other consumer relies on. */
.bankpro-mask-toggle:hover,
.bankpro-mask-toggle:focus,
.bankpro-mask-toggle:focus-visible {
	color: var(--bankpro-primary);
	background: rgba(0, 0, 0, 0.05);
}

/* Same eye icon in both states — "revealed" is communicated by color
   (and by the value itself changing) rather than swapping glyphs. */
.bankpro-mask-toggle[aria-pressed="true"] {
	color: var(--bankpro-primary);
}

.bankpro-mask-toggle:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 1px;
}

/* Phase 21/2 — when the toggle wraps a live form `<input>` (Security-tab
   Transaction PIN fields) rather than a static display `<span>`, the wrap
   needs to fill the field's full width so the input can stretch normally;
   the original Dashboard-summary use case never needed this, since its
   `<span>` sits at natural inline width. Scoped to `.bankpro-field` so the
   original `.bankpro-mask-toggle__wrap` rule above is completely unaffected
   anywhere else it's already used. */
.bankpro-field .bankpro-mask-toggle__wrap {
	display: flex;
	width: 100%;
}

.bankpro-field .bankpro-mask-toggle__wrap input {
	flex: 1 1 auto;
	min-width: 0;
}

.bankpro-field .bankpro-mask-toggle {
	flex-shrink: 0;
}

.bankpro-summary-card__hint {
	margin: var(--bankpro-space-3) 0 0;
	font-size: 0.85rem;
	color: var(--bankpro-warning);
}

/* ------------------------------------------------------------------ */
/* Quick actions                                                       */
/* ------------------------------------------------------------------ */

.bankpro-quick-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-quick-action {
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius);
	box-shadow: var(--bankpro-shadow);
	padding: var(--bankpro-space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bankpro-space-2);
	text-decoration: none;
	color: var(--bankpro-text);
	text-align: center;
	min-height: 88px;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Every state explicit — default/:hover/:focus/:focus-visible/:active —
   the exact gap Increment 2.1 left (only :hover/:focus-visible were
   guarded, so a real mouse click landed on Hello Elementor's
   `[type="button"]:focus, button:focus { background:#CC3366 }`-style rule)
   is not repeated here; see CUSTOMER_PORTAL.md's Increment 3.3 section. */
.bankpro-quick-action:hover,
.bankpro-quick-action:focus,
.bankpro-quick-action:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-quick-action:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-quick-action:active {
	transform: translateY(-1px);
}

.bankpro-quick-action__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bankpro-primary) 12%, transparent);
	color: var(--bankpro-primary);
}

.bankpro-quick-action__label {
	font-size: 0.85rem;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.bankpro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.bankpro-btn--primary {
	background: var(--bankpro-primary);
	color: #fff;
}

/* Stage 4, Increment 4.3 finding: missing plain :focus here too — the same
   gap as `.bankpro-mask-toggle`/`.bankpro-btn--secondary` (3.5) and
   `.bankpro-btn--ghost` (4.2). Directly reachable via the Transfer Wizard's
   Next/Back/Confirm/Verify Code buttons. */
.bankpro-btn--primary:hover,
.bankpro-btn--primary:focus,
.bankpro-btn--primary:focus-visible {
	background: var(--bankpro-primary-dark);
}

.bankpro-btn--secondary {
	background: #fff;
	border-color: var(--bankpro-primary);
	color: var(--bankpro-primary);
}

/* Explicit hover/focus overrides — without these, a theme's own generic
   `button:hover` rule (element selector + pseudo-class) can outrank this
   single-class base rule and silently replace the button's background
   and/or text color (confirmed live: Astra's `button:hover` rule did
   exactly this to `.bankpro-destination-card`, `.bankpro-btn--secondary`,
   and `.bankpro-btn--ghost` alike, since none of them redeclared these
   properties for the `:hover` state). Redeclaring both here raises this
   rule's own specificity so it always wins, regardless of theme. */
/* Stage 3, Increment 3.5 finding: missing plain :focus here too — the same
   gap as `.bankpro-mask-toggle` above, and directly reachable on the
   Dashboard via the balance chart's error-state "Try Again" button
   (`bankpro-dashboard-chart.js` builds it with this exact class). A real
   click's `:focus-visible` outcome is not reliably testable on this
   specific button (a retry click immediately replaces the DOM node before
   any inspection can run), so this is fixed proactively rather than left
   depending on an unreliable heuristic — consistent with this project's own
   established "don't rely on :focus-visible alone for a real mouse click"
   finding (see the chart's own range-button comment above). */
.bankpro-btn--secondary:hover,
.bankpro-btn--secondary:focus,
.bankpro-btn--secondary:focus-visible {
	background: color-mix(in srgb, var(--bankpro-primary) 8%, #fff);
	color: var(--bankpro-primary);
}

.bankpro-btn--ghost {
	background: transparent;
	border-color: var(--bankpro-border);
	color: var(--bankpro-text);
}

/* Stage 4, Increment 4.2 finding: missing plain :focus here too — the same
   gap as `.bankpro-mask-toggle`/`.bankpro-btn--secondary` (Stage 3.5).
   Confirmed live on the Statement view's real `<button type="button">`
   Print control: a genuine mouse click left it with :focus true but
   :focus-visible false, and it rendered Hello Elementor's
   `[type="button"]:focus { background:#CC3366 }` leak (`rgba(170,42,85,…)`
   background, white text) until this fix. */
.bankpro-btn--ghost:hover,
.bankpro-btn--ghost:focus,
.bankpro-btn--ghost:focus-visible {
	background: rgba(0, 0, 0, 0.04);
	color: var(--bankpro-text);
}

.bankpro-btn--small {
	min-height: 36px;
	padding: 6px 14px;
	font-size: 0.85rem;
}

.bankpro-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bankpro-btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */

.bankpro-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: #eef1f5;
	color: var(--bankpro-text-muted);
}

.bankpro-badge--active,
.bankpro-badge--completed {
	background: #e3f7ee;
	color: #0f7a4d;
}

.bankpro-badge--frozen,
.bankpro-badge--paused_at_step,
.bankpro-badge--verifying,
.bankpro-badge--suspended {
	background: #fdf1de;
	color: var(--bankpro-warning);
}

.bankpro-badge--closed,
.bankpro-badge--failed,
.bankpro-badge--cancelled,
.bankpro-badge--expired {
	background: #fbe9e7;
	color: var(--bankpro-danger);
}

.bankpro-badge--in_progress,
.bankpro-badge--pending_activation {
	background: #e7f0fb;
	color: var(--bankpro-primary);
}

/* ------------------------------------------------------------------ */
/* Amount coloring                                                     */
/* ------------------------------------------------------------------ */

.bankpro-amount {
	font-weight: 600;
	white-space: nowrap;
}

.bankpro-amount--credit {
	color: var(--bankpro-accent);
}

.bankpro-amount--debit {
	color: var(--bankpro-danger);
}

/* ------------------------------------------------------------------ */
/* Definition lists                                                    */
/* ------------------------------------------------------------------ */

.bankpro-definition-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-2) var(--bankpro-space-4);
	margin: 0;
}

.bankpro-definition-list > div {
	display: flex;
	justify-content: space-between;
	gap: var(--bankpro-space-2);
	padding: var(--bankpro-space-2) 0;
	border-bottom: 1px solid var(--bankpro-border);
}

.bankpro-definition-list > div:last-child {
	border-bottom: none;
}

.bankpro-definition-list dt {
	color: var(--bankpro-text-muted);
	font-size: 0.88rem;
}

.bankpro-definition-list dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.bankpro-definition-list__accent {
	color: var(--bankpro-accent);
}

/* ------------------------------------------------------------------ */
/* Account grid                                                        */
/* ------------------------------------------------------------------ */

.bankpro-account-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-account-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-account-card__head h2 {
	margin: 0;
	font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* Card grid — attractive banking-style cards, never real card data    */
/* ------------------------------------------------------------------ */

.bankpro-cardgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-bankcard {
	border-radius: var(--bankpro-radius);
	padding: var(--bankpro-space-4);
	color: #fff;
	background: linear-gradient(135deg, var(--bankpro-primary) 0%, var(--bankpro-primary-dark) 100%);
	box-shadow: var(--bankpro-shadow);
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-3);
}

.bankpro-bankcard--credit {
	background: linear-gradient(135deg, #2f3542 0%, #1c2733 100%);
}

.bankpro-bankcard__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bankpro-bankcard__brand {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8rem;
	opacity: 0.85;
}

.bankpro-bankcard__number {
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	font-family: "Courier New", Courier, monospace;
}

.bankpro-bankcard__bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
}

.bankpro-bankcard__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.bankpro-bankcard__value {
	display: block;
	font-weight: 600;
	margin-top: 2px;
}

.bankpro-bankcard__limit {
	font-size: 0.8rem;
	opacity: 0.85;
}

.bankpro-bankcard__actions {
	display: flex;
	gap: var(--bankpro-space-2);
}

.bankpro-bankcard .bankpro-badge {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.bankpro-bankcard .bankpro-btn--ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.bankpro-bankcard .bankpro-btn--ghost:hover,
.bankpro-bankcard .bankpro-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ */
/* Transaction list (dashboard)                                        */
/* ------------------------------------------------------------------ */

.bankpro-transaction-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bankpro-transaction-list__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bankpro-space-3);
	padding: var(--bankpro-space-2) 0;
	border-bottom: 1px solid var(--bankpro-border);
}

.bankpro-transaction-list__item:last-child {
	border-bottom: none;
}

.bankpro-transaction-list__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bankpro-transaction-list__desc {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bankpro-transaction-list__date {
	font-size: 0.8rem;
	color: var(--bankpro-text-muted);
}

.bankpro-empty {
	color: var(--bankpro-text-muted);
	font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Responsive tables -> cards                                          */
/* ------------------------------------------------------------------ */

.bankpro-table-card {
	padding: 0;
	overflow: hidden;
}

.bankpro-table {
	width: 100%;
	border-collapse: collapse;
}

.bankpro-table th,
.bankpro-table td {
	text-align: left;
	padding: 12px var(--bankpro-space-3);
	border: none;
	border-bottom: 1px solid var(--bankpro-border);
	font-size: 0.9rem;
}

.bankpro-table thead {
	background: var(--bankpro-bg);
}

.bankpro-table tbody tr:last-child td {
	border-bottom: none;
}

/* Hello Elementor's reset.css styles every bare `<table>` on the site
   (zebra-striped odd rows, a hover tint, borders on all four cell sides)
   with selectors like `table tbody>tr:nth-child(odd)>td` — that selector
   chains more element selectors than `.bankpro-table td` does, so it's
   genuinely *more specific*, not just later in source order (the
   `border: none` above already handles the border sides; loading
   portal.css after the theme's reset, per its `hello-elementor`
   dependency, doesn't help here since this isn't a tie). Restated with a
   matching element chain so it wins on its own terms rather than via
   `!important`. */
.bankpro-table tbody tr:nth-child(odd) td,
.bankpro-table tbody tr:hover td {
	background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.bankpro-field {
	margin-bottom: var(--bankpro-space-3);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bankpro-field label {
	font-weight: 600;
	font-size: 0.9rem;
}

.bankpro-field input[type="text"],
.bankpro-field input[type="number"],
.bankpro-field input[type="password"],
.bankpro-field input[type="email"],
.bankpro-field input[type="tel"],
.bankpro-field input[type="date"],
.bankpro-field select,
.bankpro-field textarea {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--bankpro-border);
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	color: var(--bankpro-text);
	width: 100%;
}

.bankpro-field textarea {
	min-height: 88px;
	resize: vertical;
}

.bankpro-field__hint {
	font-size: 0.82rem;
	color: var(--bankpro-text-muted);
	margin: 0;
}

.bankpro-field__error {
	font-size: 0.85rem;
	color: var(--bankpro-danger);
	margin: 0;
	min-height: 1em;
}

.bankpro-field__error:empty {
	display: none;
}

.bankpro-account-selector {
	max-width: 360px;
}

/* ------------------------------------------------------------------ */
/* Transfer wizard                                                     */
/* ------------------------------------------------------------------ */

.bankpro-wizard-steps {
	display: flex;
	list-style: none;
	margin: 0 0 var(--bankpro-space-4);
	padding: 0;
	gap: var(--bankpro-space-2);
	flex-wrap: wrap;
}

.bankpro-wizard-steps li {
	flex: 1 1 auto;
	text-align: center;
	padding: var(--bankpro-space-2);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--bankpro-text-muted);
	border-bottom: 3px solid var(--bankpro-border);
}

.bankpro-wizard-steps li.is-active {
	color: var(--bankpro-primary);
	border-bottom-color: var(--bankpro-primary);
}

.bankpro-wizard-steps li.is-complete {
	color: var(--bankpro-accent);
	border-bottom-color: var(--bankpro-accent);
}

.bankpro-wizard-panel h2 {
	margin-top: 0;
	font-size: 1.1rem;
}

.bankpro-wizard-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
	margin-top: var(--bankpro-space-4);
}

/* Registration wizard's first step has no Back button — right-align its
   lone Continue button instead of letting space-between push it flush left. */
.bankpro-wizard-actions--first {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Destination selector (Prompt 15)                                    */
/* ------------------------------------------------------------------ */

.bankpro-destination-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-destination-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: var(--bankpro-space-3);
	border: 1px solid var(--bankpro-border);
	border-radius: 10px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	min-height: 88px;
}

/* Stage 4, Increment 4.3 finding: same missing-:focus gap, on a real
   `<button type="button">` — the exact tag/type shape that has already
   leaked Hello Elementor's `#CC3366` in 3.5 and 4.2 when only
   :focus-visible was guarded. */
.bankpro-destination-card:hover,
.bankpro-destination-card:focus,
.bankpro-destination-card:focus-visible {
	border-color: var(--bankpro-primary);
	background: color-mix(in srgb, var(--bankpro-primary) 4%, #fff);
	outline: 2px solid transparent;
}

.bankpro-destination-card.is-selected {
	border-color: var(--bankpro-primary);
	background: color-mix(in srgb, var(--bankpro-primary) 8%, #fff);
}

.bankpro-destination-card__icon {
	font-size: 1.4rem;
	line-height: 1;
}

.bankpro-destination-card__label {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bankpro-text);
}

.bankpro-destination-card__hint {
	font-size: 0.8rem;
	color: var(--bankpro-text-muted);
}

.bankpro-recipient-fields[hidden] {
	display: none;
}

.bankpro-conversion-estimate {
	font-size: 0.85rem;
	color: var(--bankpro-text-muted);
	margin: 4px 0 0;
	min-height: 1.2em;
}

.bankpro-conversion-estimate.is-loading {
	font-style: italic;
}

.bankpro-conversion-estimate.is-error {
	color: var(--bankpro-danger);
}

/* ------------------------------------------------------------------ */
/* Verification progress                                               */
/* ------------------------------------------------------------------ */

.bankpro-transfer-status__heading {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 var(--bankpro-space-3);
}

.bankpro-progress {
	background: var(--bankpro-border);
	border-radius: 999px;
	height: 14px;
	overflow: hidden;
}

.bankpro-progress__bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--bankpro-primary), var(--bankpro-accent));
	transition: width 0.4s ease;
}

.bankpro-progress__percentage {
	text-align: center;
	margin: var(--bankpro-space-2) 0 var(--bankpro-space-4);
	font-weight: 700;
	color: var(--bankpro-primary);
}

.bankpro-verification-panel {
	max-width: 360px;
	margin: 0 auto;
	text-align: center;
}

.bankpro-verification-panel__step {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: var(--bankpro-space-3);
}

#bankpro-code-input {
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 1.2rem;
}

.bankpro-transfer-result {
	text-align: center;
	padding: var(--bankpro-space-3) 0;
}

.bankpro-transfer-result h2 {
	margin-top: 0;
}

.bankpro-transfer-result--success h2 {
	color: var(--bankpro-accent);
}

.bankpro-transfer-result--error h2,
.bankpro-transfer-result--locked h2 {
	color: var(--bankpro-danger);
}

/* ------------------------------------------------------------------ */
/* Security list                                                       */
/* ------------------------------------------------------------------ */

.bankpro-security-account-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bankpro-security-account-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--bankpro-space-2) 0;
	border-bottom: 1px solid var(--bankpro-border);
}

.bankpro-security-account-list li:last-child {
	border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Mobile (<= 720px)                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
	.bankpro-portal {
		border-radius: 0;
	}

	.bankpro-portal__nav-toggle {
		display: block;
	}

	.bankpro-portal__nav {
		display: none;
	}

	.bankpro-portal.is-nav-open .bankpro-portal__nav {
		display: block;
	}

	.bankpro-portal__nav-list {
		flex-direction: column;
		padding: var(--bankpro-space-2);
	}

	.bankpro-portal__greeting {
		display: none;
	}

	.bankpro-portal__main {
		padding: var(--bankpro-space-3);
	}

	.bankpro-summary-card__figures,
	.bankpro-quick-actions {
		grid-template-columns: 1fr 1fr;
	}

	.bankpro-summary-card__value {
		font-size: 1.3rem;
	}

	.bankpro-wizard-actions {
		flex-direction: column-reverse;
	}

	.bankpro-wizard-actions .bankpro-btn {
		width: 100%;
	}

	.bankpro-destination-grid {
		grid-template-columns: 1fr;
	}

	/* Table -> stacked cards */
	.bankpro-table--responsive thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.bankpro-table--responsive,
	.bankpro-table--responsive tbody,
	.bankpro-table--responsive tr,
	.bankpro-table--responsive td {
		display: block;
		width: 100%;
	}

	.bankpro-table--responsive tr {
		border-bottom: 1px solid var(--bankpro-border);
		padding: var(--bankpro-space-2) var(--bankpro-space-3);
	}

	.bankpro-table--responsive td {
		display: flex;
		justify-content: space-between;
		gap: var(--bankpro-space-3);
		border-bottom: none;
		padding: 6px 0;
	}

	.bankpro-table--responsive td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--bankpro-text-muted);
		flex-shrink: 0;
	}
}

@media (min-width: 721px) {
	.bankpro-definition-list {
		grid-template-columns: 1fr 1fr;
	}

	.bankpro-cardgrid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* Prompt 22 (Phase 12) — real bug found via tablet-width browser testing
   (721-~780px, e.g. the actual viewport this environment renders for a
   "768px" request): the mobile rule above only drops
   `.bankpro-summary-card__value` to the compact 1.3rem font size at
   <=720px, so just past that breakpoint it jumps back to the 1.6rem
   default (see the base rule near the top of this file) before the
   two-column `.bankpro-summary-card__figures` grid is wide enough to fit
   "USD ********05" on one line, wrapping the currency code onto its own
   line. Reuses the same compact size already proven safe for mobile,
   bridging the gap up to a safe margin past where it was confirmed to
   fit on one line unaided (~780px). */
@media (min-width: 721px) and (max-width: 800px) {
	.bankpro-summary-card__value {
		font-size: 1.3rem;
	}
}

/* ------------------------------------------------------------------ */
/* Accessibility: respect reduced-motion                               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bankpro-progress__bar,
	.bankpro-quick-action,
	.bankpro-toast {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Notification bell + Notifications view (Prompt 10)                  */
/* ------------------------------------------------------------------ */

.bankpro-notification-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 1.1rem;
	color: inherit;
}

.bankpro-notification-bell:hover {
	background: rgba(0, 0, 0, 0.05);
}

.bankpro-notification-bell__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--bankpro-danger);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.bankpro-notification-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-2);
}

.bankpro-notification-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius);
	padding: var(--bankpro-space-3);
}

.bankpro-notification-item.is-unread {
	border-left: 4px solid var(--bankpro-primary);
	background: #f7faff;
}

.bankpro-notification-item__body p {
	margin: 4px 0;
	color: var(--bankpro-text-muted);
}

.bankpro-notification-item__body time {
	font-size: 0.78rem;
	color: var(--bankpro-text-muted);
}

/* ------------------------------------------------------------------ */
/* Statement view (Prompt 10)                                          */
/* ------------------------------------------------------------------ */

.bankpro-statement__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
	flex-wrap: wrap;
}

.bankpro-statement__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-3);
	align-items: flex-end;
}

.bankpro-statement__filters .bankpro-field {
	flex: 1 1 140px;
	min-width: 120px;
	/* .bankpro-field's own margin-bottom (for plain stacked-form vertical
	   rhythm elsewhere) is still part of each field's box for this flex
	   row's `align-items: flex-end` — without zeroing it here, the Apply
	   button (no such margin) sits below where the fields visually end,
	   most noticeably when a lone field wraps onto its own row next to
	   the button on narrower screens. Row spacing already comes from the
	   parent's own `gap`. */
	margin-bottom: 0;
}

.bankpro-statement__filters > .bankpro-btn {
	flex-shrink: 0;
}

.bankpro-statement__identity,
.bankpro-statement__summary {
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bankpro-space-3);
	margin-top: var(--bankpro-space-3);
}

/* ------------------------------------------------------------------ */
/* Print (statement print-friendly output — Prompt 10 §10)             */
/* ------------------------------------------------------------------ */

@media print {
	.bankpro-portal__header,
	.bankpro-portal__nav,
	.bankpro-portal__notifications,
	.bankpro-print-hide {
		display: none !important;
	}

	.bankpro-portal {
		max-width: none;
		box-shadow: none;
	}

	.bankpro-view--statement .bankpro-card {
		box-shadow: none;
		border: 1px solid #000;
	}

	.bankpro-statement__table {
		font-size: 0.85rem;
	}
}

/* ==================================================================== */
/* Prompt 18 — BankPro Design System Refinement                         */
/* Everything below is additive: no selector above is removed or        */
/* redefined with different values. New tokens extend the existing      */
/* `.bankpro-portal` custom-property block (a second rule targeting the */
/* same class is valid CSS and simply adds more properties); new        */
/* component classes are new selectors; existing components (cards,     */
/* badges, buttons, tables) gain extra states/variants via additional   */
/* modifier classes, never by changing what an existing class already   */
/* does. This keeps every Prompt 13-17 screen visually identical unless */
/* it opts into a new modifier.                                         */
/* ==================================================================== */

.bankpro-portal {
	/* Extended color tokens */
	--bankpro-primary-hover: #124a8c;
	--bankpro-secondary: #5b6b7c;
	--bankpro-surface-elevated: #ffffff;
	--bankpro-info: #2f6fb3;
	--bankpro-info-bg: #eaf2fb;
	--bankpro-success-bg: #e3f7ee;
	--bankpro-success: #0f7a4d;
	--bankpro-warning-bg: #fdf1de;
	--bankpro-danger-bg: #fbe9e7;

	/* Typography scale — a deliberate hierarchy, not ad-hoc rem values */
	--bankpro-font-display: 700 2.25rem/1.15 inherit;
	--bankpro-font-h1: 700 1.75rem/1.2 inherit;
	--bankpro-font-h2: 700 1.35rem/1.25 inherit;
	--bankpro-font-h3: 600 1.1rem/1.3 inherit;
	--bankpro-font-h4: 600 0.95rem/1.35 inherit;
	--bankpro-font-body: 400 1rem/1.5 inherit;
	--bankpro-font-small: 400 0.85rem/1.4 inherit;
	--bankpro-font-caption: 400 0.75rem/1.3 inherit;
	--bankpro-font-label: 600 0.78rem/1.3 inherit;
	--bankpro-font-numeric: 700 1.75rem/1.2 inherit;

	/* Radius scale */
	--bankpro-radius-none: 0;
	--bankpro-radius-sm: 6px;
	--bankpro-radius-md: 10px;
	--bankpro-radius-lg: 18px;
	--bankpro-radius-pill: 999px;

	/* Shadow scale */
	--bankpro-shadow-none: none;
	--bankpro-shadow-subtle: 0 1px 2px rgba(20, 30, 45, 0.06);
	--bankpro-shadow-medium: 0 4px 12px rgba(20, 30, 45, 0.1), 0 1px 3px rgba(20, 30, 45, 0.06);
	--bankpro-shadow-elevated: 0 12px 32px rgba(20, 30, 45, 0.16), 0 2px 8px rgba(20, 30, 45, 0.08);

	/* Extended spacing */
	--bankpro-space-6: 40px;
	--bankpro-space-7: 56px;
}

/* -------------------------------------------------------------------- */
/* Section header component                                             */
/* -------------------------------------------------------------------- */

.bankpro-section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-4);
	flex-wrap: wrap;
}

.bankpro-section-header__text {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-3);
	min-width: 0;
}

.bankpro-section-header__icon {
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bankpro-radius-md);
	background: var(--bankpro-info-bg);
}

.bankpro-section-header__title {
	margin: 0;
	font: var(--bankpro-font-h2);
	color: var(--bankpro-text);
}

.bankpro-section-header__subtitle {
	margin: 2px 0 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-section-header__action {
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* Status badge — full status vocabulary                                */
/* -------------------------------------------------------------------- */

.bankpro-badge--pending,
.bankpro-badge--scheduled {
	background: var(--bankpro-info-bg);
	color: var(--bankpro-info);
}

.bankpro-badge--processing {
	background: var(--bankpro-warning-bg);
	color: var(--bankpro-warning);
}

.bankpro-badge--awaiting_approval {
	background: var(--bankpro-info-bg);
	color: var(--bankpro-info);
}

.bankpro-badge--info {
	background: var(--bankpro-info-bg);
	color: var(--bankpro-info);
}

.bankpro-badge--with-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bankpro-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* Empty state component                                                */
/* -------------------------------------------------------------------- */

.bankpro-empty-state {
	text-align: center;
	padding: var(--bankpro-space-6) var(--bankpro-space-4);
	color: var(--bankpro-text-muted);
}

.bankpro-empty-state__icon {
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: var(--bankpro-space-2);
	opacity: 0.7;
}

.bankpro-empty-state__title {
	margin: 0 0 4px;
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
}

.bankpro-empty-state__description {
	margin: 0;
	font: var(--bankpro-font-small);
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

.bankpro-empty-state__action {
	margin-top: var(--bankpro-space-3);
}

/* -------------------------------------------------------------------- */
/* Alert component                                                      */
/* -------------------------------------------------------------------- */

.bankpro-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--bankpro-space-2);
	padding: var(--bankpro-space-3);
	border-radius: var(--bankpro-radius-md);
	border: 1px solid transparent;
	font: var(--bankpro-font-small);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-alert__icon {
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1.4;
}

.bankpro-alert__title {
	margin: 0 0 2px;
	font: var(--bankpro-font-h4);
}

.bankpro-alert__message {
	margin: 0;
	color: inherit;
}

.bankpro-alert--info {
	background: var(--bankpro-info-bg);
	border-color: color-mix(in srgb, var(--bankpro-info) 30%, transparent);
	color: var(--bankpro-info);
}

.bankpro-alert--success {
	background: var(--bankpro-success-bg);
	border-color: color-mix(in srgb, var(--bankpro-success) 30%, transparent);
	color: var(--bankpro-success);
}

.bankpro-alert--warning {
	background: var(--bankpro-warning-bg);
	border-color: color-mix(in srgb, var(--bankpro-warning) 30%, transparent);
	color: var(--bankpro-warning);
}

.bankpro-alert--error {
	background: var(--bankpro-danger-bg);
	border-color: color-mix(in srgb, var(--bankpro-danger) 30%, transparent);
	color: var(--bankpro-danger);
}

/* -------------------------------------------------------------------- */
/* Account Balance widget — style variants (Prompt 18)                  */
/* -------------------------------------------------------------------- */

.bankpro-ew-balance {
	border-radius: var(--bankpro-radius-lg);
	padding: var(--bankpro-space-4);
}

.bankpro-ew-balance__label {
	display: block;
	font: var(--bankpro-font-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bankpro-text-muted);
	margin: var(--bankpro-space-2) 0 2px;
}

.bankpro-ew-balance__label:first-child {
	margin-top: 0;
}

.bankpro-ew-balance__value {
	display: block;
	font: var(--bankpro-font-numeric);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	word-break: break-word;
}

.bankpro-ew-balance--classic {
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	box-shadow: var(--bankpro-shadow-subtle);
}

.bankpro-ew-balance--premium {
	background: linear-gradient(135deg, var(--bankpro-primary) 0%, var(--bankpro-primary-dark) 100%);
	box-shadow: var(--bankpro-shadow-elevated);
	color: #fff;
}

.bankpro-ew-balance--premium .bankpro-ew-balance__label {
	color: rgba(255, 255, 255, 0.75);
}

.bankpro-ew-balance--premium .bankpro-ew-balance__value {
	color: #fff;
}

.bankpro-ew-balance--minimal {
	background: transparent;
	padding: var(--bankpro-space-2) 0;
}

.bankpro-ew-balance--elevated {
	background: var(--bankpro-surface-elevated);
	box-shadow: var(--bankpro-shadow-elevated);
	border: 1px solid var(--bankpro-border);
}

/* -------------------------------------------------------------------- */
/* Account Card widget — style variants + hover (Prompt 18)             */
/* -------------------------------------------------------------------- */

.bankpro-ew-card {
	border-radius: var(--bankpro-radius-lg);
	padding: var(--bankpro-space-4);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bankpro-ew-card--classic {
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	box-shadow: var(--bankpro-shadow-subtle);
}

.bankpro-ew-card--premium {
	background: linear-gradient(135deg, var(--bankpro-primary) 0%, var(--bankpro-primary-dark) 100%);
	color: #fff;
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-ew-card--premium .bankpro-ew-card__type,
.bankpro-ew-card--premium .bankpro-ew-card__meta {
	color: rgba(255, 255, 255, 0.8);
}

.bankpro-ew-card--premium .bankpro-badge {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.bankpro-ew-card--elevated {
	background: var(--bankpro-surface-elevated);
	box-shadow: var(--bankpro-shadow-elevated);
	border: 1px solid var(--bankpro-border);
}

.bankpro-ew-card--hoverable:hover,
.bankpro-ew-card--hoverable:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-ew-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--bankpro-space-3);
	gap: var(--bankpro-space-2);
}

.bankpro-ew-card__type {
	font: var(--bankpro-font-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bankpro-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bankpro-ew-card__amount {
	display: block;
	font: var(--bankpro-font-numeric);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
	margin-bottom: var(--bankpro-space-2);
}

.bankpro-ew-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-3);
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-ew-card__meta span {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* -------------------------------------------------------------------- */
/* Quick Actions — hover polish (Prompt 18)                             */
/* -------------------------------------------------------------------- */

.bankpro-ew-quick-actions {
	display: grid;
	gap: var(--bankpro-space-3);
}

.bankpro-ew-quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bankpro-space-2);
	text-align: center;
	text-decoration: none;
	color: var(--bankpro-text);
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius-lg);
	box-shadow: var(--bankpro-shadow-subtle);
	padding: var(--bankpro-space-4) var(--bankpro-space-2);
	min-height: 96px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bankpro-ew-quick-action:hover,
.bankpro-ew-quick-action:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--bankpro-shadow-medium);
	border-color: var(--bankpro-primary);
}

.bankpro-ew-quick-action__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.bankpro-ew-quick-action__label {
	font: var(--bankpro-font-label);
	text-transform: none;
	letter-spacing: normal;
}

/* -------------------------------------------------------------------- */
/* Recent Transactions widget — icon + status polish (Prompt 18)        */
/* -------------------------------------------------------------------- */

.bankpro-ew-transactions {
	border-radius: var(--bankpro-radius-lg);
}

.bankpro-ew-transactions .bankpro-transaction-list__item {
	border-radius: var(--bankpro-radius-sm);
	padding: var(--bankpro-space-2) var(--bankpro-space-1);
	transition: background 0.12s ease;
}

.bankpro-ew-transactions .bankpro-transaction-list__item:hover {
	background: var(--bankpro-bg);
}

.bankpro-ew-transactions .bankpro-transaction-list__main {
	flex-direction: row;
	align-items: center;
	gap: var(--bankpro-space-2);
}

.bankpro-transaction-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bankpro-transaction-list__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	font-weight: 700;
}

.bankpro-transaction-list__icon--credit {
	background: var(--bankpro-success-bg);
	color: var(--bankpro-success);
}

.bankpro-transaction-list__icon--debit {
	background: var(--bankpro-danger-bg);
	color: var(--bankpro-danger);
}

.bankpro-ew-transactions__view-all {
	display: inline-block;
	margin-top: var(--bankpro-space-2);
	font: var(--bankpro-font-small);
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Transfer wizard — numbered step indicator (Prompt 18, CSS-only)      */
/* -------------------------------------------------------------------- */

.bankpro-wizard-steps {
	counter-reset: bankpro-step;
	gap: 0;
	align-items: flex-start;
}

.bankpro-wizard-steps li {
	position: relative;
	border-bottom: none;
	padding: 0 var(--bankpro-space-1);
}

.bankpro-wizard-steps li::before {
	counter-increment: bankpro-step;
	content: counter(bankpro-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: var(--bankpro-border);
	color: var(--bankpro-text-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.bankpro-wizard-steps li::after {
	content: "";
	position: absolute;
	top: 14px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--bankpro-border);
	z-index: -1;
}

.bankpro-wizard-steps li:first-child::after {
	display: none;
}

.bankpro-wizard-steps li.is-active::before {
	background: var(--bankpro-primary);
	color: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bankpro-primary) 18%, transparent);
}

.bankpro-wizard-steps li.is-complete::before {
	background: var(--bankpro-accent);
	color: #fff;
	content: "✓";
}

.bankpro-wizard-steps li.is-complete::after {
	background: var(--bankpro-accent);
}

/* -------------------------------------------------------------------- */
/* Destination cards — richer hover/active (Prompt 18)                  */
/* -------------------------------------------------------------------- */

.bankpro-destination-card {
	border-radius: var(--bankpro-radius-lg);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bankpro-destination-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--bankpro-shadow-medium);
}

.bankpro-destination-card.is-selected {
	box-shadow: 0 0 0 2px var(--bankpro-primary);
}

.bankpro-destination-card__icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bankpro-radius-md);
	background: var(--bankpro-info-bg);
	color: var(--bankpro-info);
	font-size: 1.3rem;
}

/* -------------------------------------------------------------------- */
/* Awaiting Bank Approval — polished, non-error presentation            */
/* -------------------------------------------------------------------- */

.bankpro-verification-panel--awaiting {
	max-width: 420px;
	padding: var(--bankpro-space-4);
	background: var(--bankpro-info-bg);
	border-radius: var(--bankpro-radius-lg);
}

.bankpro-verification-panel--awaiting::before {
	content: "🏦";
	display: block;
	font-size: 2rem;
	margin-bottom: var(--bankpro-space-2);
}

.bankpro-verification-panel--awaiting .bankpro-verification-panel__step {
	color: var(--bankpro-info);
}

/* -------------------------------------------------------------------- */
/* Financial value emphasis helper (used by widgets for large figures)  */
/* -------------------------------------------------------------------- */

.bankpro-financial-value {
	font: var(--bankpro-font-numeric);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.bankpro-financial-value--sm {
	font-size: 1.1rem;
}

.bankpro-financial-value--lg {
	font-size: 2.25rem;
}

/* -------------------------------------------------------------------- */
/* Small-phone tier (~390px / 375px / 320px)                            */
/* -------------------------------------------------------------------- */

@media (max-width: 400px) {
	.bankpro-ew-balance__value,
	.bankpro-ew-card__amount {
		font-size: 1.4rem;
	}

	.bankpro-quick-actions,
	.bankpro-ew-quick-actions {
		grid-template-columns: 1fr 1fr;
		gap: var(--bankpro-space-2);
	}

	.bankpro-section-header {
		flex-direction: column;
		align-items: stretch;
	}

	.bankpro-wizard-steps li {
		font-size: 0.7rem;
	}

	.bankpro-wizard-steps li::before {
		width: 22px;
		height: 22px;
		font-size: 0.7rem;
	}
}

@media (max-width: 340px) {
	.bankpro-quick-actions,
	.bankpro-ew-quick-actions {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Large-desktop tier (~1440px) — a touch more breathing room           */
/* -------------------------------------------------------------------- */

@media (min-width: 1440px) {
	.bankpro-portal {
		max-width: 1280px;
	}
}

/* ==================================================================== */
/* Prompt 19 — BankPro UI/UX Completion & Design-System Expansion       */
/* Everything below is additive, same rule as the Prompt 18 section     */
/* above: no existing selector is redefined with different values, so   */
/* every already-shipped screen stays visually identical unless it      */
/* opts into a new token/modifier/control.                              */
/* ==================================================================== */

.bankpro-portal {
	/* Background — Prompt 19 names this distinctly from the original
	   `--bankpro-bg`; both point at the same value so existing rules
	   keep working unchanged while new rules can use either name. */
	--bankpro-background: var(--bankpro-bg);

	/* Semantic status/amount tokens — map onto the existing color
	   tokens rather than inventing new raw hex values, per "use the
	   existing BankPro token architecture where possible." */
	--bankpro-credit: var(--bankpro-success);
	--bankpro-debit: var(--bankpro-danger);
	--bankpro-pending: var(--bankpro-info);
	--bankpro-completed: var(--bankpro-success);
	--bankpro-failed: var(--bankpro-danger);
	--bankpro-expired: var(--bankpro-secondary);

	/* Typography — one additional step between H4 and Body */
	--bankpro-font-body-lg: 400 1.1rem/1.5 inherit;

	/* Semantic spacing aliases — self-documenting names for the existing
	   scale, not new magic numbers. */
	--bankpro-space-section: var(--bankpro-space-5);
	--bankpro-space-card: var(--bankpro-space-4);
	--bankpro-space-grid-gap: var(--bankpro-space-3);
	--bankpro-space-component-gap: var(--bankpro-space-2);
	--bankpro-space-button: var(--bankpro-space-2) var(--bankpro-space-4);
	--bankpro-space-form: var(--bankpro-space-3);
	--bankpro-space-mobile: var(--bankpro-space-3);

	/* Radius — Prompt 19 adds an explicit "XL" step */
	--bankpro-radius-xl: 24px;

	/* Shadow — Prompt 19 names "card" and "strong" explicitly */
	--bankpro-shadow-card: var(--bankpro-shadow-medium);
	--bankpro-shadow-strong: 0 20px 48px rgba(20, 30, 45, 0.22), 0 4px 12px rgba(20, 30, 45, 0.1);
}

/* -------------------------------------------------------------------- */
/* Welcome Header widget (new, Prompt 19)                               */
/* -------------------------------------------------------------------- */

.bankpro-ew-welcome {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-3);
}

.bankpro-ew-welcome__avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bankpro-primary);
	color: #fff;
	font: var(--bankpro-font-h2);
}

.bankpro-ew-welcome__name {
	margin: 0;
	font: var(--bankpro-font-h1);
	color: var(--bankpro-text);
}

.bankpro-ew-welcome__subtitle {
	margin: 2px 0 0;
	font: var(--bankpro-font-body);
	color: var(--bankpro-text-muted);
}

/* -------------------------------------------------------------------- */
/* Total Balance Summary widget (new, Prompt 19)                        */
/* -------------------------------------------------------------------- */

.bankpro-ew-total-balance__label {
	margin: var(--bankpro-space-2) 0 2px;
	font: var(--bankpro-font-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bankpro-text-muted);
}

.bankpro-ew-total-balance__label:first-child {
	margin-top: 0;
}

.bankpro-ew-total-balance__value {
	margin: 0;
	font: var(--bankpro-font-numeric);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	word-break: break-word;
}

.bankpro-ew-total-balance__count {
	margin: var(--bankpro-space-2) 0 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

/* -------------------------------------------------------------------- */
/* Notification Bell widget (new, Prompt 19) — reuses the classic       */
/* portal header's own `.bankpro-notification-bell` rules already       */
/* defined above; no new selector needed for the icon/badge themselves. */
/* -------------------------------------------------------------------- */

/* ==================================================================== */
/* Stage F — making view-wrapper widgets' internal markup designable.   */
/* Every rule below *redeclares* an existing selector with the same     */
/* result by default (each `var(--x, fallback)` fallback is the exact   */
/* value the original rule already used) — so nothing visually changes  */
/* until a widget's own Style controls set the custom property on its   */
/* `.bankpro-ew-view-wrap` wrapper. This avoids touching any View's PHP */
/* markup while still giving Elementor real, working style hooks into   */
/* content those views render. Custom properties are intentionally      */
/* scoped by writing them on `.bankpro-ew-view-wrap` (not `:root` or    */
/* `.bankpro-portal`), so two widget instances on the same page never   */
/* collide — Elementor's own `{{WRAPPER}}` selector already guarantees  */
/* that isolation.                                                      */
/* ==================================================================== */

/* `.bankpro-ew-view-wrap` itself has no background/border by default (its
   own Style-tab controls above are all opt-in, empty until an admin sets
   one), but the View markup it wraps very often does — cards, tables,
   headings sitting immediately inside it. With zero default padding here,
   that inner content rendered flush against the widget's outer edge on
   every one of the 12 view-wrapper widgets (confirmed live). This is a
   plain default, not a `var(--x, fallback)` Style-control hook — Elementor's
   own per-instance Padding control (already present in every view-wrapper
   widget's Container section) still overrides it normally, since Elementor
   writes that value into `{{WRAPPER}} .bankpro-ew-view-wrap`, which is more
   specific than this bare selector. */
.bankpro-ew-view-wrap {
	padding: var(--bankpro-space-4);
}

/* Transactions Table (shared `.bankpro-table` also used by Scheduled
   Transfers/Loans — a widget-level override there is scoped by
   `.bankpro-ew-view-wrap` too, so it never leaks across widgets). */
.bankpro-table th,
.bankpro-table td {
	padding: var(--bankpro-table-row-padding-v, 12px) var(--bankpro-table-row-padding-h, var(--bankpro-space-3));
	border-bottom-color: var(--bankpro-table-border-color, var(--bankpro-border));
}

.bankpro-table thead {
	background: var(--bankpro-table-header-bg, var(--bankpro-bg));
}

/* The unscoped `.bankpro-table td` padding rule above has the same
   specificity as `.bankpro-table--responsive td`'s mobile padding
   (defined inside `@media (max-width: 720px)` further up this file) but
   comes later in source order, so it was silently winning even on mobile
   — reverting the stacked-card rows back to desktop padding and crowding
   their content against the card's border/edge. Restated here, scoped to
   mobile, so the intended compact card padding wins again. */
@media (max-width: 720px) {
	.bankpro-table--responsive td {
		padding: 6px 0;
	}
}

.bankpro-amount--credit {
	color: var(--bankpro-amount-credit-color, var(--bankpro-accent));
}

.bankpro-amount--debit {
	color: var(--bankpro-amount-debit-color, var(--bankpro-danger));
}

/* Notifications */
.bankpro-notification-list {
	gap: var(--bankpro-notification-item-gap, var(--bankpro-space-2));
}

.bankpro-notification-item {
	border-radius: var(--bankpro-notification-item-radius, var(--bankpro-radius));
}

.bankpro-notification-item.is-unread {
	border-left-color: var(--bankpro-notification-unread-color, var(--bankpro-primary));
}

.bankpro-notification-item__body time {
	font: var(--bankpro-notification-timestamp-font, var(--bankpro-font-caption));
}

/* Bank Cards */
.bankpro-bankcard {
	border-radius: var(--bankpro-bankcard-radius, var(--bankpro-radius));
	box-shadow: var(--bankpro-bankcard-shadow, var(--bankpro-shadow));
}

.bankpro-bankcard__number {
	font-size: var(--bankpro-bankcard-number-size, 1.15rem);
}

/* Loans — progress bar + definition list (also shared by Profile) */
.bankpro-progress__bar {
	background: var(--bankpro-progress-color, linear-gradient(90deg, var(--bankpro-primary), var(--bankpro-accent)));
}

.bankpro-definition-list > div {
	border-bottom-color: var(--bankpro-definition-list-border-color, var(--bankpro-border));
	padding: var(--bankpro-definition-list-row-padding, var(--bankpro-space-2)) 0;
}

.bankpro-definition-list dd {
	color: var(--bankpro-definition-list-value-color, var(--bankpro-text));
}

/* -------------------------------------------------------------------- */
/* Beneficiaries — real baseline component styling (Prompt 19).         */
/* `.bankpro-beneficiary__*` had no dedicated rules before this phase   */
/* (it rendered as plain unstyled text inside the generic `.bankpro-    */
/* card` wrapper) — this is new, additive component CSS, not a redefine */
/* of anything that previously had different values.                   */
/* -------------------------------------------------------------------- */

.bankpro-list {
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-beneficiary-gap, var(--bankpro-space-3));
}

.bankpro-beneficiary {
	padding: var(--bankpro-space-4);
}

.bankpro-beneficiary__header {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	flex-wrap: wrap;
	margin-bottom: var(--bankpro-space-2);
}

.bankpro-beneficiary__name {
	font: var(--bankpro-font-h4);
	color: var(--bankpro-beneficiary-name-color, var(--bankpro-text));
}

.bankpro-beneficiary__favorite {
	color: #d4a017;
	font-size: 1.1rem;
	line-height: 1;
}

.bankpro-beneficiary__detail {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-3);
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-beneficiary__nickname {
	font-style: italic;
}

.bankpro-beneficiary__actions {
	display: flex;
	gap: var(--bankpro-space-2);
}

/* -------------------------------------------------------------------- */
/* Stage G/H — shared loading (skeleton) state + empty-state variant.   */
/* Reusable, presentation-only component classes — not wired into any   */
/* View's markup by this phase (no View needed one added; every fetch   */
/* this codebase already has shows its own explicit "Processing…"/      */
/* disabled-button feedback, per `CUSTOMER_PORTAL.md` §8's "server      */
/* confirms, then animate" rule). Available for any future JS-driven    */
/* fetch (e.g. a notification list refresh) to use without inventing a  */
/* new placeholder pattern.                                             */
/* -------------------------------------------------------------------- */

.bankpro-skeleton {
	display: block;
	border-radius: var(--bankpro-radius-sm);
	background: linear-gradient(90deg, var(--bankpro-border) 25%, var(--bankpro-bg) 50%, var(--bankpro-border) 75%);
	background-size: 200% 100%;
	animation: bankpro-skeleton-shimmer 1.4s ease-in-out infinite;
}

.bankpro-skeleton--line {
	height: 1em;
	margin-bottom: var(--bankpro-space-2);
}

.bankpro-skeleton--block {
	height: 80px;
}

.bankpro-skeleton--circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

@keyframes bankpro-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bankpro-skeleton {
		animation: none;
		background: var(--bankpro-border);
	}
}

.bankpro-empty-state--compact {
	padding: var(--bankpro-space-3) var(--bankpro-space-2);
}

.bankpro-empty-state--compact .bankpro-empty-state__icon {
	font-size: 1.5rem;
	margin-bottom: var(--bankpro-space-1);
}

/* ======================================================================
 * Prompt 22 (Phase 10) — Completed Transfer UX + Printable Receipt
 * Entirely additive: no selector above is redefined with different values.
 * ==================================================================== */

/* ---------------------------------------------------------------- */
/* Completed-state icon + two-action panel (extends the existing     */
/* .bankpro-transfer-result block above, unchanged for cancelled/    */
/* failed/expired/pending — only the new `--completed` modifier and  */
/* its children are added here).                                    */
/* ---------------------------------------------------------------- */

.bankpro-transfer-result__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--bankpro-space-3);
	border-radius: 50%;
	background: var(--bankpro-success-bg, #e3f7ee);
	color: var(--bankpro-success, #0f7a4d);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
}

.bankpro-transfer-result--completed p {
	color: var(--bankpro-text-muted);
	margin: 0 0 var(--bankpro-space-4);
}

.bankpro-transfer-result__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bankpro-space-3);
}

.bankpro-btn__icon {
	font-size: 1.05em;
	line-height: 1;
}

@media (max-width: 720px) {
	.bankpro-transfer-result__actions {
		flex-direction: column;
	}

	.bankpro-transfer-result__actions .bankpro-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- */
/* Transfer Receipt view                                             */
/* ---------------------------------------------------------------- */

.bankpro-receipt-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-receipt {
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius);
	box-shadow: var(--bankpro-shadow);
	max-width: 560px;
	margin: 0 auto;
	padding: var(--bankpro-space-5) var(--bankpro-space-4);
}

.bankpro-receipt__header {
	text-align: center;
	padding-bottom: var(--bankpro-space-4);
	border-bottom: 1px dashed var(--bankpro-border);
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-receipt__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bankpro-space-2);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--bankpro-primary-dark);
}

.bankpro-receipt__brand-icon {
	font-size: 1.4rem;
}

.bankpro-receipt__title {
	margin: var(--bankpro-space-1) 0 0;
	color: var(--bankpro-text-muted);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bankpro-receipt__status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bankpro-space-2);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-receipt__status-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	font-weight: 700;
	background: var(--bankpro-success-bg, #e3f7ee);
	color: var(--bankpro-success, #0f7a4d);
}

.bankpro-receipt__status--other .bankpro-receipt__status-icon {
	background: #eef1f5;
	color: var(--bankpro-text-muted);
}

.bankpro-receipt__status-label {
	margin: 0;
	font-weight: 700;
	font-size: 1.1rem;
}

.bankpro-receipt__amount {
	text-align: center;
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--bankpro-text);
	margin: 0 0 var(--bankpro-space-4);
	word-break: break-word;
}

.bankpro-receipt__section {
	margin-bottom: var(--bankpro-space-4);
}

/* Each party column is already narrow inside the two-column grid below —
   keep its own definition list single-column even at the 721px+ breakpoint
   where .bankpro-definition-list otherwise goes two-column (§7.173 above),
   so long labels/values never get cramped into two 130px-wide halves. */
.bankpro-receipt__party .bankpro-definition-list {
	grid-template-columns: 1fr;
}

.bankpro-receipt__mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
}

.bankpro-receipt__parties {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-4);
	padding-top: var(--bankpro-space-3);
	border-top: 1px dashed var(--bankpro-border);
}

.bankpro-receipt__party-label {
	margin: 0 0 var(--bankpro-space-2);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bankpro-text-muted);
}

.bankpro-receipt__note p:last-child {
	margin: 0;
	word-break: break-word;
}

.bankpro-receipt__footer {
	margin: var(--bankpro-space-4) 0 0;
	padding-top: var(--bankpro-space-3);
	border-top: 1px dashed var(--bankpro-border);
	text-align: center;
	font-size: 0.78rem;
	color: var(--bankpro-text-muted);
}

@media (min-width: 721px) {
	.bankpro-receipt__parties {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 720px) {
	.bankpro-receipt {
		padding: var(--bankpro-space-4) var(--bankpro-space-3);
	}

	.bankpro-receipt-toolbar {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.bankpro-receipt-toolbar .bankpro-btn {
		width: 100%;
	}

	.bankpro-receipt__amount {
		font-size: 1.7rem;
	}
}

@media (max-width: 400px) {
	.bankpro-receipt {
		padding: var(--bankpro-space-3) var(--bankpro-space-2);
	}

	.bankpro-receipt__amount {
		font-size: 1.45rem;
	}

	.bankpro-receipt__status-icon {
		width: 48px;
		height: 48px;
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------- */
/* Receipt print — additive; does not modify the existing statement  */
/* @media print block above. .bankpro-print-hide already hides the   */
/* portal header/nav/notifications (see that block); this only adds  */
/* receipt-specific paper formatting and hides the receipt's own     */
/* toolbar buttons.                                                  */
/* ---------------------------------------------------------------- */

@media print {
	.bankpro-view--transfer-receipt .bankpro-receipt {
		box-shadow: none;
		border: 1px solid #000;
		max-width: none;
		margin: 0;
	}

	.bankpro-view--transfer-receipt .bankpro-receipt__status-icon,
	.bankpro-view--transfer-receipt .bankpro-transfer-result__icon {
		background: none;
		border: 2px solid #000;
		color: #000;
	}

	.bankpro-view--transfer-receipt .bankpro-receipt__brand {
		color: #000;
	}
}

/* ======================================================================
 * Prompt 22 (Phase 11) — Customer FrontEnd Isolation & WordPress Admin
 * Boundary. Additive only. The new Forgot Password / Reset Password screens
 * (`ForgotPasswordView`/`ResetPasswordView`) reuse the existing
 * `.bankpro-portal--gate` / `.bankpro-card--centered` / `.bankpro-field` /
 * `.bankpro-field__hint` / `.bankpro-field__error` / `.bankpro-mask-toggle`
 * components verbatim — already responsive, already tested, nothing new to
 * add for them. The one genuinely new element is the post-reset success
 * banner on the Login screen.
 * ==================================================================== */

.bankpro-field__hint--success {
	color: var(--bankpro-success, #0f7a4d);
	background: var(--bankpro-success-bg, #e3f7ee);
	border-radius: var(--bankpro-radius);
	padding: var(--bankpro-space-2) var(--bankpro-space-3);
}

/* ======================================================================
 * Phase 13 (Stage 1) — Premium Design System Foundation
 * Additive only, same rule every prior "Prompt N" section in this file has
 * followed: no selector above is redefined with different values, so every
 * already-shipped classic-portal screen and Elementor widget instance stays
 * visually identical unless it opts into one of the new tokens/classes
 * below. This section establishes the *system* (tokens, icon plumbing,
 * component primitives) — it does not migrate any individual screen's
 * markup, per this stage's explicit scope.
 * ==================================================================== */

.bankpro-portal {
	/* New "ink" surface tokens — a deliberate *second* dark scale, kept
	   separate from --bankpro-primary (the interactive/CTA blue everything
	   already uses) so existing buttons/links/nav are completely
	   unaffected. Used only by new premium-surface treatments below. */
	--bankpro-ink-900: #0b2540;
	--bankpro-ink-700: #123a63;
	--bankpro-ink-500: #1c4f7c;

	/* Restrained warm accent — used sparingly (premium highlights), never
	   as a primary interactive color. */
	--bankpro-amber: #b8863b;
	--bankpro-amber-bg: #fbf3e6;

	/* A reusable, token-driven focus treatment for the *new* components in
	   this section only — the existing global `:focus-visible` outline
	   rule further down this file is untouched, so every already-shipped
	   focus state is unaffected. */
	--bankpro-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bankpro-primary) 35%, transparent);

	/* Icon sizing scale, consumed by `.bankpro-icon--sm/--lg` below. */
	--bankpro-icon-size-sm: 16px;
	--bankpro-icon-size-md: 20px;
	--bankpro-icon-size-lg: 24px;
}

/* A later rule targeting the same selector as this file's original
   `.bankpro-portal { font-family: ... }` declaration (line 28) simply wins
   by normal CSS source order — this refines the base type stack without
   deleting the historical original declaration. Deliberately still a
   system-font stack (no new font file added: zero network dependency,
   zero licensing question, nothing to self-host) — reordered and widened
   for a more considered, premium-reading result across platforms. */
.bankpro-portal {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI",
		"Inter", "SF Pro Display", Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------- */
/* Tabular numerals for financial figures — additive to each selector's  */
/* existing rule block above; every one of these already sets `font:` to */
/* a --bankpro-font-numeric (or similar bold) token, this only adds the  */
/* one property a `font:` shorthand cannot carry.                        */
/* -------------------------------------------------------------------- */

.bankpro-summary-card__value,
.bankpro-receipt__amount,
.bankpro-ew-balance__value,
.bankpro-ew-card__amount,
.bankpro-ew-total-balance__value,
.bankpro-financial-value,
.bankpro-amount,
.bankpro-bankcard__number,
.bankpro-bankcard__value {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- */
/* Icon system (BankPro\Core\IconLibrary)                                */
/* -------------------------------------------------------------------- */

.bankpro-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: -0.125em;
}

.bankpro-icon--sm {
	width: var(--bankpro-icon-size-sm);
	height: var(--bankpro-icon-size-sm);
}

.bankpro-icon--lg {
	width: var(--bankpro-icon-size-lg);
	height: var(--bankpro-icon-size-lg);
}

/* -------------------------------------------------------------------- */
/* Card hierarchy — extends the existing `.bankpro-card` base (unchanged) */
/* with four new modifiers.                                              */
/* -------------------------------------------------------------------- */

.bankpro-card--elevated {
	border-color: transparent;
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-card--premium {
	background: linear-gradient(135deg, var(--bankpro-ink-700), var(--bankpro-ink-900));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--bankpro-shadow-strong);
}

.bankpro-card--premium .bankpro-card__head h2 {
	color: #fff;
}

.bankpro-card--financial-summary {
	background: linear-gradient(135deg, var(--bankpro-ink-500), var(--bankpro-ink-900));
	border-color: transparent;
	color: #fff;
	box-shadow: var(--bankpro-shadow-strong);
}

/* Explicit hover/focus/active on the new interactive card variant — per
   this phase's own rule, declared here rather than discovered later via
   browser testing. Hello Elementor's `reset.css` has no generic `div`/`a`
   hover rule as aggressive as its `button` one, but this is declared
   explicitly regardless, on principle, exactly like every button variant
   below. */
.bankpro-card--interactive {
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bankpro-card--interactive:hover,
.bankpro-card--interactive:focus-visible {
	box-shadow: var(--bankpro-shadow-elevated);
	transform: translateY(-3px);
}

.bankpro-card--interactive:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-card--interactive:active {
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------- */
/* Button hierarchy additions — Danger / Icon-utility / Loading           */
/* -------------------------------------------------------------------- */

.bankpro-btn--danger {
	background: var(--bankpro-danger);
	color: #fff;
}

.bankpro-btn--danger:hover,
.bankpro-btn--danger:focus-visible {
	background: color-mix(in srgb, var(--bankpro-danger) 82%, #000);
}

.bankpro-btn--danger:active {
	background: color-mix(in srgb, var(--bankpro-danger) 70%, #000);
}

.bankpro-btn--danger:disabled {
	background: var(--bankpro-danger);
}

.bankpro-btn--icon {
	min-width: 44px;
	padding: 10px;
}

.bankpro-btn--icon.bankpro-btn--small {
	min-width: 36px;
	padding: 6px;
}

.bankpro-btn--primary:active {
	background: var(--bankpro-primary-dark);
}

.bankpro-btn--secondary:active {
	background: color-mix(in srgb, var(--bankpro-primary) 16%, #fff);
}

.bankpro-btn--ghost:active {
	background: rgba(0, 0, 0, 0.08);
}

.bankpro-btn--loading {
	position: relative;
	pointer-events: none;
}

.bankpro-btn--loading > :not(.bankpro-btn__spinner) {
	visibility: hidden;
}

.bankpro-btn__spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-top-color: transparent;
	opacity: 0.85;
	animation: bankpro-spin 0.7s linear infinite;
}

@keyframes bankpro-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------- */
/* Form refinement — additive states for the existing `.bankpro-field`    */
/* input/select/textarea selector already declared above (line 846).     */
/* -------------------------------------------------------------------- */

.bankpro-field input[type="text"],
.bankpro-field input[type="number"],
.bankpro-field input[type="password"],
.bankpro-field input[type="email"],
.bankpro-field input[type="tel"],
.bankpro-field input[type="date"],
.bankpro-field select,
.bankpro-field textarea {
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bankpro-field input:hover:not(:disabled):not(:focus),
.bankpro-field select:hover:not(:disabled):not(:focus),
.bankpro-field textarea:hover:not(:disabled):not(:focus) {
	border-color: var(--bankpro-secondary);
}

.bankpro-field input:focus-visible,
.bankpro-field select:focus-visible,
.bankpro-field textarea:focus-visible {
	border-color: var(--bankpro-primary);
}

.bankpro-field input:disabled,
.bankpro-field select:disabled,
.bankpro-field textarea:disabled {
	background: var(--bankpro-bg);
	color: var(--bankpro-text-muted);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------- */
/* Table row hover — refines (does not remove) the Hello-Elementor-       */
/* defeating rule above (line ~825): that rule keeps this exact selector  */
/* winning on specificity; this later declaration supplies BankPro's own  */
/* deliberate hover tint instead of `transparent`, still explicitly       */
/* authored, still immune to the theme's own generic table-hover rule.    */
/* -------------------------------------------------------------------- */

.bankpro-table tbody tr:hover td {
	background-color: var(--bankpro-bg);
}

/* -------------------------------------------------------------------- */
/* New primitives: Tabs / Divider / Tooltip                              */
/* -------------------------------------------------------------------- */

.bankpro-tabs {
	display: flex;
	gap: var(--bankpro-space-2);
	border-bottom: 1px solid var(--bankpro-border);
	margin-bottom: var(--bankpro-space-4);
	overflow-x: auto;
}

.bankpro-tab {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: var(--bankpro-space-2) var(--bankpro-space-3);
	font: var(--bankpro-font-label);
	color: var(--bankpro-text-muted);
	cursor: pointer;
	min-height: 44px;
	white-space: nowrap;
}

.bankpro-tab:hover,
.bankpro-tab:focus-visible {
	color: var(--bankpro-text);
	background: rgba(0, 0, 0, 0.03);
}

.bankpro-tab:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: -2px;
}

.bankpro-tab:active {
	background: rgba(0, 0, 0, 0.06);
}

.bankpro-tab.is-active {
	color: var(--bankpro-primary);
	border-bottom-color: var(--bankpro-primary);
}

.bankpro-divider {
	border: none;
	border-top: 1px solid var(--bankpro-border);
	margin: var(--bankpro-space-4) 0;
}

.bankpro-divider--label {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-3);
	margin: var(--bankpro-space-4) 0;
	color: var(--bankpro-text-muted);
	font: var(--bankpro-font-caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bankpro-divider--label::before,
.bankpro-divider--label::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--bankpro-border);
}

.bankpro-tooltip {
	position: relative;
	display: inline-flex;
}

.bankpro-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--bankpro-ink-900);
	color: #fff;
	font: var(--bankpro-font-caption);
	padding: 6px 10px;
	border-radius: var(--bankpro-radius-sm);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
}

.bankpro-tooltip:hover .bankpro-tooltip__bubble,
.bankpro-tooltip:focus-within .bankpro-tooltip__bubble {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------- */
/* Reduced motion — new transitions/animations introduced in this        */
/* section only; the file's original `@media (prefers-reduced-motion)`   */
/* block (covering .bankpro-progress__bar/.bankpro-quick-action/         */
/* .bankpro-toast) is untouched.                                         */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bankpro-card--interactive,
	.bankpro-btn__spinner,
	.bankpro-tooltip__bubble,
	.bankpro-field input,
	.bankpro-field select,
	.bankpro-field textarea {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
 * Prompt 13 — Increment 2: Premium Global Application Shell
 * Additive only, same rule as every section above: nothing here deletes an
 * earlier declaration's text (including the Phase 12 nav-toggle
 * Hello-Elementor fix, whose explicit :hover/:focus-visible guard is
 * extended below, not replaced). `PortalRenderer::render_shell_open()`
 * gained three new wrapper elements (`__header-inner`, `__nav-inner`,
 * `__main-inner`, all sharing one new `.bankpro-shell-container` class) and
 * two new disclosure menus (user menu, nav "More" menu) — this section is
 * their styling, organized in the order the brief requested.
 * ============================================================ */

/* ---------------------------------------------------------------- */
/* 1. Shell / container                                              */
/* ---------------------------------------------------------------- */

/* Evolves the shell from a centered ~1100px box into a true full-width
   application frame — header/nav/main now each paint their own full-width
   background; only their *content* is capped, via `.bankpro-shell-container`
   below, at the same ~1280px boundary the file's original 1440px tier
   already established (not a new, arbitrary width). */
.bankpro-portal {
	max-width: none;
	margin: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

@media (min-width: 1440px) {
	.bankpro-portal {
		max-width: none;
	}
}

.bankpro-shell-container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
}

/* ---------------------------------------------------------------- */
/* 2. Header                                                         */
/* ---------------------------------------------------------------- */

/* Deliberately moves the header from the original dark `--primary-dark`
   surface to a light one — an explicit brief requirement ("clean white/
   light surface"), not an accidental drift. The nav bar just below keeps a
   colored surface (§4) so the two tiers remain visually distinct. */
.bankpro-portal__header {
	background: var(--bankpro-surface);
	color: var(--bankpro-text);
	border-bottom: 1px solid var(--bankpro-border);
	padding: 0;
}

.bankpro-portal__header-inner {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-3);
	padding: var(--bankpro-space-3) var(--bankpro-space-4);
	min-height: 64px;
}

.bankpro-portal__header-actions {
	color: var(--bankpro-text);
}

.bankpro-portal__greeting {
	display: none;
}

/* ---------------------------------------------------------------- */
/* 3. Brand                                                           */
/* ---------------------------------------------------------------- */

.bankpro-portal__brand {
	margin-right: auto;
	color: var(--bankpro-text);
}

.bankpro-portal__brand-icon {
	width: 26px;
	height: 26px;
	color: var(--bankpro-primary);
}

.bankpro-portal__site-name {
	font: var(--bankpro-font-h3);
	color: var(--bankpro-text);
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- */
/* 4. Desktop navigation                                             */
/* ---------------------------------------------------------------- */

.bankpro-portal__nav {
	background: var(--bankpro-bg);
	border-bottom: 1px solid var(--bankpro-border);
}

.bankpro-portal__nav-inner {
	padding: 0 var(--bankpro-space-4);
}

.bankpro-portal__nav-list {
	padding: 0;
	gap: 2px;
}

.bankpro-portal__nav .bankpro-portal__nav-link {
	color: var(--bankpro-text-muted);
	font: var(--bankpro-font-label);
	text-transform: none;
	letter-spacing: normal;
	padding: 14px var(--bankpro-space-3);
	border-bottom: 2px solid transparent;
}

.bankpro-portal__nav .bankpro-portal__nav-link:hover,
.bankpro-portal__nav .bankpro-portal__nav-link:focus-visible {
	color: var(--bankpro-text);
	background: color-mix(in srgb, var(--bankpro-primary) 6%, transparent);
}

.bankpro-portal__nav-more {
	position: relative;
	display: flex;
	align-items: center;
}

.bankpro-portal__nav-more-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	color: var(--bankpro-text-muted);
	font: var(--bankpro-font-label);
	padding: 14px var(--bankpro-space-3);
	cursor: pointer;
	min-height: 44px;
	border-bottom: 2px solid transparent;
}

.bankpro-portal__nav-more-caret {
	transition: transform 0.15s ease;
}

.bankpro-portal__nav-more.is-open .bankpro-portal__nav-more-caret {
	transform: rotate(180deg);
}

.bankpro-portal__nav-more-list {
	list-style: none;
	margin: 0;
	padding: var(--bankpro-space-2);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius-md);
	box-shadow: var(--bankpro-shadow-elevated);
	display: none;
	z-index: 60;
}

.bankpro-portal__nav-more.is-open .bankpro-portal__nav-more-list {
	display: block;
}

.bankpro-portal__nav-more-list .bankpro-portal__nav-link {
	display: block;
	border-bottom: none;
	border-radius: var(--bankpro-radius-sm);
	padding: 10px var(--bankpro-space-2);
	min-height: 40px;
}

.bankpro-portal__nav-more-list .bankpro-portal__nav-link:hover,
.bankpro-portal__nav-more-list .bankpro-portal__nav-link:focus-visible {
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
	color: var(--bankpro-text);
}

/* ---------------------------------------------------------------- */
/* 5. Active states                                                  */
/* ---------------------------------------------------------------- */

.bankpro-portal__nav .bankpro-portal__nav-link.is-active {
	color: var(--bankpro-primary);
	font-weight: 700;
	border-bottom-color: var(--bankpro-primary);
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
}

.bankpro-portal__nav-more.is-active .bankpro-portal__nav-more-trigger {
	color: var(--bankpro-primary);
	font-weight: 700;
	border-bottom-color: var(--bankpro-primary);
}

.bankpro-portal__nav-more-list .bankpro-portal__nav-link.is-active {
	color: var(--bankpro-primary);
	font-weight: 700;
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
}

/* ---------------------------------------------------------------- */
/* 6. User area                                                      */
/* ---------------------------------------------------------------- */

.bankpro-portal__user {
	position: relative;
}

.bankpro-portal__user-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	background: transparent;
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius-pill);
	padding: 6px 10px 6px 6px;
	cursor: pointer;
	color: var(--bankpro-text);
	min-height: 44px;
}

.bankpro-portal__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bankpro-primary);
	color: #fff;
	font: var(--bankpro-font-label);
	flex-shrink: 0;
}

.bankpro-portal__user-name {
	font: var(--bankpro-font-small);
	font-weight: 600;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bankpro-portal__user-caret {
	color: var(--bankpro-text-muted);
	transition: transform 0.15s ease;
}

.bankpro-portal__user-trigger[aria-expanded="true"] .bankpro-portal__user-caret {
	transform: rotate(180deg);
}

.bankpro-portal__user-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius-md);
	box-shadow: var(--bankpro-shadow-elevated);
	padding: var(--bankpro-space-2);
	z-index: 60;
}

/* Scoped under `.bankpro-portal__user-menu` (not just the bare
   `.bankpro-portal__user-menu-link` class) so this reaches the (0,2,0)
   specificity tier — a single-class version of this rule was confirmed
   live to lose to two pre-existing (0,1,1) rules: BankPro's own generic
   `.bankpro-portal a { color: var(--bankpro-primary) }` (line ~43) and
   Hello Elementor's `.page-content a { text-decoration: underline }`,
   neither of which is a `button` rule, so this is a genuinely new leak
   shape, not the already-known button one. Same "redeclare at matching or
   higher specificity" fix already used throughout this file. */
.bankpro-portal__user-menu .bankpro-portal__user-menu-link {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	padding: 10px var(--bankpro-space-2);
	border-radius: var(--bankpro-radius-sm);
	color: var(--bankpro-text);
	text-decoration: none;
	font: var(--bankpro-font-small);
	font-weight: 600;
	min-height: 40px;
}

.bankpro-portal__user-menu .bankpro-portal__user-menu-link:hover,
.bankpro-portal__user-menu .bankpro-portal__user-menu-link:focus-visible {
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
}

.bankpro-portal__user-menu .bankpro-portal__user-menu-link.is-active {
	color: var(--bankpro-primary);
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
}

.bankpro-portal__user-menu .bankpro-portal__user-menu-link--danger {
	color: var(--bankpro-danger);
}

.bankpro-portal__user-menu .bankpro-portal__user-menu-link--danger:hover,
.bankpro-portal__user-menu .bankpro-portal__user-menu-link--danger:focus-visible {
	background: var(--bankpro-danger-bg);
	color: var(--bankpro-danger);
}

.bankpro-portal__user-menu-divider {
	height: 1px;
	background: var(--bankpro-border);
	margin: var(--bankpro-space-1) var(--bankpro-space-2);
}

/* ---------------------------------------------------------------- */
/* 7. Notification                                                   */
/* ---------------------------------------------------------------- */

/* Scoped under `.bankpro-portal__header-actions` for the same reason the
   user-menu links are above: a bare `.bankpro-notification-bell` (0,1,0)
   loses to `.bankpro-portal a`'s (0,1,1), which was silently painting this
   icon the wrong (primary blue, not muted) color — confirmed live via a
   zoomed screenshot before this fix. */
.bankpro-portal__header-actions .bankpro-notification-bell {
	color: var(--bankpro-text-muted);
	text-decoration: none;
}

.bankpro-portal__header-actions .bankpro-notification-bell:hover,
.bankpro-portal__header-actions .bankpro-notification-bell:focus-visible {
	color: var(--bankpro-primary);
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
}

.bankpro-portal__header-actions .bankpro-notification-bell:active {
	background: color-mix(in srgb, var(--bankpro-primary) 14%, transparent);
}

/* ---------------------------------------------------------------- */
/* 8. Mobile navigation (drawer content)                             */
/* ---------------------------------------------------------------- */

@media (max-width: 720px) {
	.bankpro-portal__header-inner {
		padding: var(--bankpro-space-2) var(--bankpro-space-3);
		min-height: 56px;
	}

	.bankpro-portal__nav-inner {
		padding: var(--bankpro-space-4) var(--bankpro-space-3);
	}

	.bankpro-portal__nav-list {
		gap: 0;
	}

	.bankpro-portal__nav .bankpro-portal__nav-link {
		padding: 14px var(--bankpro-space-3);
		border-bottom: none;
		border-left: 3px solid transparent;
		border-radius: 0;
		min-height: 48px;
	}

	.bankpro-portal__nav .bankpro-portal__nav-link.is-active {
		background: color-mix(in srgb, var(--bankpro-primary) 10%, transparent);
		border-left-color: var(--bankpro-primary);
		border-bottom: none;
	}

	/* Same markup, no JS branching: the trigger disappears and the list it
	   controlled becomes an always-visible, flat, divided continuation of
	   the primary items — exactly the mobile drawer content the brief's own
	   mockup shows (§10), including Statement/Beneficiaries/Scheduled
	   Transfers/Loans/Security/Profile all present. */
	.bankpro-portal__nav-more {
		display: block;
	}

	.bankpro-portal__nav-more-trigger {
		display: none;
	}

	.bankpro-portal__nav-more-list {
		position: static;
		display: block;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: transparent;
		padding: var(--bankpro-space-2) 0 0;
		margin-top: var(--bankpro-space-2);
		border-top: 1px solid var(--bankpro-border);
	}

	.bankpro-portal__nav-more-list .bankpro-portal__nav-link {
		border-radius: 0;
		border-left: 3px solid transparent;
		padding: 14px var(--bankpro-space-3);
		min-height: 48px;
	}

	.bankpro-portal__nav-more-list .bankpro-portal__nav-link.is-active {
		background: color-mix(in srgb, var(--bankpro-primary) 10%, transparent);
		border-left-color: var(--bankpro-primary);
	}

	.bankpro-portal__user-name,
	.bankpro-portal__user-caret {
		display: none;
	}

	.bankpro-portal__user-trigger {
		padding: 4px;
		border-color: transparent;
	}

	.bankpro-portal__user-menu {
		right: 0;
		left: auto;
	}
}

/* ---------------------------------------------------------------- */
/* 9. Drawer / backdrop                                              */
/* ---------------------------------------------------------------- */

/* Refines (does not delete) the original Prompt-N mobile rule further up
   this file (`@media (max-width:720px){ .bankpro-portal__nav{display:none}
   .bankpro-portal.is-nav-open .bankpro-portal__nav{display:block} }`):
   this later, more specific override turns that instant show/hide into a
   real sliding drawer panel, using visibility+transition-delay (not just
   `display`) so the drawer's links are correctly out of the keyboard tab
   order while closed, not just visually hidden. */
/* Hard safety default, placed *before* the mobile media query below on
   purpose: at equal specificity, later source order wins, so this must
   precede the @media block or it would permanently defeat the mobile
   `display:block` override regardless of viewport width (a real bug
   caught live: the backdrop stayed `display:none` even while open,
   letting mobile drawer-backdrop clicks fall through to the page content
   underneath instead of closing the drawer). */
.bankpro-portal__nav-backdrop {
	display: none;
}

@media (max-width: 720px) {
	.bankpro-portal__nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 86vw);
		overflow-y: auto;
		z-index: 100;
		border-bottom: none;
		border-right: 1px solid var(--bankpro-border);
		box-shadow: var(--bankpro-shadow-elevated);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.bankpro-portal.is-nav-open .bankpro-portal__nav {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}

	.bankpro-portal__nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(11, 37, 64, 0.45);
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.bankpro-portal.is-nav-open .bankpro-portal__nav-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.2s ease, visibility 0s linear 0s;
	}
}

body.bankpro-scroll-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* 10. Responsive tiers — toggle button visibility                   */
/* ---------------------------------------------------------------- */

.bankpro-portal__nav-toggle-icon {
	width: 22px;
	height: 22px;
}

.bankpro-portal__nav-toggle-icon--close {
	display: none;
}

.bankpro-portal.is-nav-open .bankpro-portal__nav-toggle-icon--open {
	display: none;
}

.bankpro-portal.is-nav-open .bankpro-portal__nav-toggle-icon--close {
	display: block;
}

@media (max-width: 720px) {
	.bankpro-portal__nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------- */
/* 11. Accessibility — explicit focus-visible for the new buttons     */
/* (the file's global `a/input/select/textarea/.bankpro-btn` focus rule    */
/* further up does not cover a plain, un-classed `<button>`).              */
/* ---------------------------------------------------------------- */

.bankpro-portal__nav-toggle:focus-visible,
.bankpro-portal__nav-more-trigger:focus-visible,
.bankpro-portal__user-trigger:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-portal__user-menu-link:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: -2px;
}

/* ---------------------------------------------------------------- */
/* 12. Reduced motion                                                */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bankpro-portal__nav,
	.bankpro-portal__nav-backdrop,
	.bankpro-portal__nav-more-caret,
	.bankpro-portal__user-caret {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- */
/* 13. Hello Elementor defensive overrides                            */
/* Every new <button> in this shell gets its own explicit default/hover/   */
/* focus-visible/active contract, exactly like the Phase 12 nav-toggle     */
/* fix already established — never left to inherit from a theme rule.      */
/* ---------------------------------------------------------------- */

.bankpro-portal__nav-toggle {
	background: transparent;
	border-color: var(--bankpro-border);
	color: var(--bankpro-text);
}

/* `:focus` (not just `:hover`/`:focus-visible`) is required on all three
   buttons below — found live, via a real mouse click, not assumed: Hello
   Elementor's `reset.css` leak on these targets `[type="button"]:focus`
   (plain `:focus`, which a genuine mouse click sets) alongside `:hover`;
   `:focus-visible` alone does not reliably match a mouse-driven click in
   most browsers' own heuristics, so a guard that only covered
   `:hover`/`:focus-visible` still let the pink leak through on click. */
.bankpro-portal__nav-toggle:hover,
.bankpro-portal__nav-toggle:focus,
.bankpro-portal__nav-toggle:focus-visible {
	background: color-mix(in srgb, var(--bankpro-primary) 8%, transparent);
	border-color: var(--bankpro-primary);
	color: var(--bankpro-text);
}

.bankpro-portal__nav-toggle:active {
	background: color-mix(in srgb, var(--bankpro-primary) 14%, transparent);
}

.bankpro-portal__nav-more-trigger:hover,
.bankpro-portal__nav-more-trigger:focus,
.bankpro-portal__nav-more-trigger:focus-visible {
	color: var(--bankpro-text);
	background: color-mix(in srgb, var(--bankpro-primary) 6%, transparent);
}

.bankpro-portal__nav-more-trigger:active {
	background: color-mix(in srgb, var(--bankpro-primary) 12%, transparent);
}

.bankpro-portal__user-trigger:hover,
.bankpro-portal__user-trigger:focus,
.bankpro-portal__user-trigger:focus-visible {
	background: color-mix(in srgb, var(--bankpro-primary) 6%, transparent);
	border-color: var(--bankpro-border);
}

.bankpro-portal__user-trigger:active {
	background: color-mix(in srgb, var(--bankpro-primary) 12%, transparent);
}

/* ============================================================
 * Prompt 13 — Increment 2.1: Responsive Navigation Refinement
 * Additive only. Live testing after Increment 2 found the six primary nav
 * links (plus "More") wrapping onto a second row at both 755px and
 * 1011px. Two compounding causes, both found live rather than assumed:
 *
 * 1. THE REAL ROOT CAUSE — Hello Elementor's own `theme.css` ships a
 *    Bootstrap-style responsive content-width cap on `.site-main`
 *    (`body:not([class*="elementor-page-"]) .site-main`: 500px at
 *    >=576px, 600px at >=768px, 800px at >=992px, wider beyond) for any
 *    page not using the Elementor Canvas template — which `/my-account/`
 *    does not. This silently shrank `.bankpro-portal` itself (confirmed
 *    live: 500px wide inside a 755px viewport) to far less than the
 *    viewport width, long before any of this phase's own nav CSS ever
 *    got a fair amount of room to work with. Neutralized *only* on pages
 *    that actually render the BankPro shell (`body:has(.bankpro-portal)`)
 *    — every other page on the site keeps the theme's normal reading-
 *    width behavior untouched. This override ties the theme rule's own
 *    specificity, so it depends on winning by source order rather than
 *    specificity: `Plugin.php` now declares both `hello-elementor`
 *    (reset.css) *and* `hello-elementor-theme-style` (theme.css — a
 *    separate handle the theme registers, confirmed against its own
 *    functions.php) as dependencies of `bankpro-portal`, so WordPress
 *    always prints portal.css after theme.css and this rule wins without
 *    needing `!important`. (Previously `portal.css` only depended on the
 *    reset handle and was printed *before* theme.css, which is why an
 *    earlier version of this rule needed `!important` as a workaround —
 *    see the `Plugin.php` dependency array for the real fix.) */

body:has(.bankpro-portal) .site-main {
	max-width: none;
}

@media (min-width: 721px) {
	.bankpro-portal__nav-list {
		flex-wrap: nowrap;
	}
}

/* Compact tablet (721–1023px). Tighter padding/gap/type-size only — every
   touch target here still clears 40px, comfortably above the usual 24px
   minimum and close to the file's own 44px baseline elsewhere. */
@media (min-width: 721px) and (max-width: 1023px) {
	.bankpro-portal__nav-inner {
		padding: 0 var(--bankpro-space-3);
	}

	.bankpro-portal__nav-list {
		gap: 0;
	}

	.bankpro-portal__nav .bankpro-portal__nav-link {
		padding: 12px 10px;
		font-size: 0.76rem;
	}

	.bankpro-portal__nav-more-trigger {
		padding: 12px 10px;
		font-size: 0.76rem;
	}
}

/* ============================================================
 * Prompt 13 — Stage 3, Increment 3.1: Dashboard Greeting, Hero, Accounts
 * Additive only. `DashboardView` no longer renders `.bankpro-summary-card`
 * (that class/its rules above are left completely untouched for any other
 * consumer) — replaced with the new classes below. Quick Actions and
 * Recent Transactions are untouched this increment; their existing
 * `.bankpro-quick-action`/`.bankpro-transaction-list` rules elsewhere in
 * this file are unaffected.
 * ============================================================ */

/* -------------------------------------------------------------------- */
/* Greeting                                                              */
/* -------------------------------------------------------------------- */

.bankpro-dashboard-greeting {
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-dashboard-greeting__heading {
	margin: 0 0 4px;
	font: var(--bankpro-font-display);
	color: var(--bankpro-text);
	letter-spacing: -0.01em;
}

.bankpro-dashboard-greeting__subtitle {
	margin: 0;
	font: var(--bankpro-font-body-lg);
	color: var(--bankpro-text-muted);
}

/* -------------------------------------------------------------------- */
/* Total Balance Hero — built on the existing .bankpro-card--financial-  */
/* summary premium-navy modifier (Increment 1); only its dashboard-      */
/* specific inner content is new here.                                  */
/* -------------------------------------------------------------------- */

.bankpro-dashboard-hero {
	padding: var(--bankpro-space-5) var(--bankpro-space-4);
}

.bankpro-dashboard-hero__groups {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-5);
}

.bankpro-dashboard-hero__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bankpro-dashboard-hero__label {
	font: var(--bankpro-font-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.7);
}

.bankpro-dashboard-hero__value {
	font: var(--bankpro-font-display);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.bankpro-dashboard-hero__hint {
	margin: var(--bankpro-space-4) 0 0;
	font: var(--bankpro-font-small);
	color: rgba(255, 255, 255, 0.7);
}

/* The shared `.bankpro-mask-toggle` is styled elsewhere for light
   surfaces (`color: var(--bankpro-text-muted)`) — this scoped override
   adapts it for the hero's dark surface only; the global rule and every
   other consumer of `.bankpro-mask-toggle` are unaffected. */
.bankpro-dashboard-hero .bankpro-mask-toggle {
	color: rgba(255, 255, 255, 0.7);
}

.bankpro-dashboard-hero .bankpro-mask-toggle:hover,
.bankpro-dashboard-hero .bankpro-mask-toggle:focus,
.bankpro-dashboard-hero .bankpro-mask-toggle:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

.bankpro-dashboard-hero .bankpro-mask-toggle:active {
	background: rgba(255, 255, 255, 0.22);
}

/* -------------------------------------------------------------------- */
/* Accounts strip                                                        */
/* -------------------------------------------------------------------- */

.bankpro-dashboard-accounts {
	margin: var(--bankpro-space-4) 0;
}

.bankpro-dashboard-accounts__heading {
	margin: 0 0 var(--bankpro-space-3);
	font: var(--bankpro-font-h3);
	color: var(--bankpro-text);
}

.bankpro-dashboard-accounts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-dashboard-account-card {
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-2);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bankpro-dashboard-account-card:hover {
	box-shadow: var(--bankpro-shadow-elevated);
	transform: translateY(-2px);
}

.bankpro-dashboard-account-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bankpro-space-2);
}

.bankpro-dashboard-account-card__type {
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
}

.bankpro-dashboard-account-card__number {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
	letter-spacing: 0.03em;
}

.bankpro-dashboard-account-card__balance {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--bankpro-space-1);
}

.bankpro-dashboard-account-card__balance-label {
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-dashboard-account-card__balance-value {
	font: var(--bankpro-font-h2);
	color: var(--bankpro-text);
	font-variant-numeric: tabular-nums;
}

.bankpro-dashboard-account-card__hint {
	margin: 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-warning);
}

.bankpro-dashboard-account-card__action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--bankpro-space-2);
	padding-top: var(--bankpro-space-2);
	border-top: 1px solid var(--bankpro-border);
	color: var(--bankpro-primary);
	text-decoration: none;
	font: var(--bankpro-font-label);
	min-height: 40px;
}

.bankpro-dashboard-account-card__action:hover,
.bankpro-dashboard-account-card__action:focus,
.bankpro-dashboard-account-card__action:focus-visible {
	color: var(--bankpro-primary-dark);
	text-decoration: underline;
}

.bankpro-dashboard-account-card__action:active {
	color: var(--bankpro-primary-dark);
}

/* -------------------------------------------------------------------- */
/* Responsive tiers                                                      */
/* -------------------------------------------------------------------- */

@media (min-width: 721px) {
	.bankpro-dashboard-accounts__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bankpro-dashboard-hero__value {
		font-size: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.bankpro-dashboard-accounts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 720px) {
	.bankpro-dashboard-hero {
		padding: var(--bankpro-space-4) var(--bankpro-space-3);
	}

	.bankpro-dashboard-hero__groups {
		gap: var(--bankpro-space-3);
	}
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                        */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bankpro-dashboard-account-card {
		transition: none !important;
	}
}

/* ============================================================
 * Prompt 13 — Stage 3, Increment 3.2: Dashboard Balance Chart
 * Additive only. `.bankpro-dashboard-chart` extends the existing
 * `.bankpro-card` base (unchanged) — only its own inner content is new.
 * ============================================================ */

.bankpro-dashboard-chart {
	margin: var(--bankpro-space-4) 0;
}

.bankpro-dashboard-chart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bankpro-space-3);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-dashboard-chart__heading {
	margin: 0;
	font: var(--bankpro-font-h3);
	color: var(--bankpro-text);
}

.bankpro-dashboard-chart__range {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--bankpro-bg);
	border-radius: var(--bankpro-radius-pill);
}

/* Every state explicit — default/:hover/:focus/:focus-visible/:active —
   per this project's own repeatedly-learned Hello Elementor lesson: a
   plain `<button type="button">` is exactly what
   `[type="button"]:focus, [type="button"]:hover { background:#CC3366 }`
   targets, and `:focus-visible` alone does not reliably cover a genuine
   mouse click in most browsers' own heuristics. */
.bankpro-dashboard-chart__range-btn {
	min-height: 32px;
	padding: 6px 14px;
	border: none;
	border-radius: var(--bankpro-radius-pill);
	background: transparent;
	color: var(--bankpro-text-muted);
	font: var(--bankpro-font-label);
	cursor: pointer;
}

.bankpro-dashboard-chart__range-btn:hover,
.bankpro-dashboard-chart__range-btn:focus,
.bankpro-dashboard-chart__range-btn:focus-visible {
	color: var(--bankpro-text);
	background: color-mix(in srgb, var(--bankpro-primary) 10%, transparent);
}

.bankpro-dashboard-chart__range-btn:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 1px;
}

.bankpro-dashboard-chart__range-btn:active {
	background: color-mix(in srgb, var(--bankpro-primary) 18%, transparent);
}

.bankpro-dashboard-chart__range-btn.is-active {
	background: var(--bankpro-primary);
	color: #fff;
	font-weight: 700;
}

.bankpro-dashboard-chart__range-btn.is-active:hover,
.bankpro-dashboard-chart__range-btn.is-active:focus,
.bankpro-dashboard-chart__range-btn.is-active:focus-visible {
	background: var(--bankpro-primary-dark);
	color: #fff;
}

.bankpro-dashboard-chart__body {
	min-height: 220px;
}

.bankpro-dashboard-chart__skeleton {
	height: 220px;
}

.bankpro-dashboard-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
}

.bankpro-dashboard-chart__grid-line {
	stroke: var(--bankpro-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.bankpro-dashboard-chart__area {
	fill: color-mix(in srgb, var(--bankpro-primary) 10%, transparent);
	stroke: none;
}

.bankpro-dashboard-chart__line {
	fill: none;
	stroke: var(--bankpro-primary);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.bankpro-dashboard-chart__point {
	fill: var(--bankpro-surface);
	stroke: var(--bankpro-primary);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.bankpro-dashboard-chart__note {
	margin: var(--bankpro-space-2) 0 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-dashboard-chart__state {
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Chart entrance — restrained, respects reduced motion below. */
.bankpro-dashboard-chart__svg {
	animation: bankpro-dashboard-chart-fade-in 0.35s ease;
}

@keyframes bankpro-dashboard-chart-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bankpro-dashboard-chart__svg {
		animation: none !important;
	}
}

@media (max-width: 720px) {
	.bankpro-dashboard-chart__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.bankpro-dashboard-chart__range {
		align-self: stretch;
	}

	.bankpro-dashboard-chart__range-btn {
		flex: 1;
	}
}

/* ============================================================
 * Prompt 13 — Stage 3, Increment 3.3: Recent Transactions + Quick Actions
 * Quick Actions' own `.bankpro-quick-action*` rules above were edited in
 * place — the redesign this increment exists to deliver, not a second
 * instance layered alongside the old one. Recent Transactions is additive
 * only: a single new scoping wrapper class below, row-flex-scoped exactly
 * like `.bankpro-ew-transactions` already scopes the same override for the
 * Elementor widget. `.bankpro-transaction-list`, `.bankpro-transaction-
 * list__icon`/`--credit`/`--debit`, `.bankpro-transaction-list__text`,
 * `.bankpro-amount`, and `.bankpro-empty-state`/`--compact` are all reused
 * verbatim, unmodified — no new rule needed for any of them.
 * ============================================================ */

.bankpro-dashboard-transactions .bankpro-transaction-list__main {
	flex-direction: row;
	align-items: center;
	gap: var(--bankpro-space-2);
}

/* ============================================================
 * Prompt 13 — Stage 3, Increment 3.4: Financial Insights
 * Additive only. `.bankpro-dashboard-insights` extends the existing
 * `.bankpro-card`/`.bankpro-card--elevated` base (unchanged); each inner
 * insight card extends `.bankpro-card` too, with its default margin-bottom
 * and hover treatment turned off since — unlike the account-strip cards —
 * these are not clickable and must not look interactive (Part M). Value
 * coloring reuses `.bankpro-amount--credit`/`--debit` verbatim, unmodified.
 * ============================================================ */

.bankpro-dashboard-insights__head {
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-dashboard-insights__heading {
	margin: 0 0 4px;
	font: var(--bankpro-font-h3);
	color: var(--bankpro-text);
}

.bankpro-dashboard-insights__subtitle {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-dashboard-insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bankpro-space-3);
}

.bankpro-dashboard-insights__card {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-2);
}

.bankpro-dashboard-insights__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-dashboard-insights__icon {
	color: var(--bankpro-text-muted);
	flex-shrink: 0;
}

.bankpro-dashboard-insights__value {
	font: var(--bankpro-font-numeric);
	color: var(--bankpro-text);
	font-variant-numeric: tabular-nums;
}

.bankpro-dashboard-insights__note {
	margin: var(--bankpro-space-3) 0 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

@media (max-width: 720px) {
	.bankpro-dashboard-insights__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Prompt 13 — Stage 4, Increment 4.1: Accounts View Premium Redesign
 * A new, dedicated `.bankpro-accounts-*` namespace — deliberately not the
 * old `.bankpro-account-grid`/`.bankpro-account-card` classes (still used
 * by LoansView and left untouched here). Card visual language mirrors the
 * Dashboard account-strip's own `.bankpro-dashboard-account-card` (Stage
 * 3.1): same `.bankpro-card`/`.bankpro-card--elevated` base, same masking
 * pattern, same badge system, same action-link treatment.
 * ============================================================ */

.bankpro-accounts-page__head {
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-accounts-page__head .bankpro-view__title {
	margin-bottom: 4px;
}

.bankpro-accounts-page__subtitle {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-accounts-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-5);
	margin-bottom: var(--bankpro-space-4);
	padding: var(--bankpro-space-3) var(--bankpro-space-4);
	background: var(--bankpro-surface);
	border: 1px solid var(--bankpro-border);
	border-radius: var(--bankpro-radius-lg);
}

.bankpro-accounts-overview__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bankpro-accounts-overview__value {
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
	font-variant-numeric: tabular-nums;
}

.bankpro-accounts-overview__label {
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-accounts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-accounts-card {
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-3);
	transition: box-shadow 0.18s ease;
}

.bankpro-accounts-card:hover {
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-accounts-card__head {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
}

.bankpro-accounts-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bankpro-primary) 10%, transparent);
	color: var(--bankpro-primary);
}

.bankpro-accounts-card__type {
	flex: 1 1 auto;
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
}

.bankpro-accounts-card__number {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-accounts-card__balances {
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-3);
	padding: var(--bankpro-space-3) 0;
	border-top: 1px solid var(--bankpro-border);
	border-bottom: 1px solid var(--bankpro-border);
}

.bankpro-accounts-card__balance {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bankpro-accounts-card__balance-label {
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-accounts-card__balance-value {
	font: var(--bankpro-font-numeric);
	color: var(--bankpro-text);
	font-variant-numeric: tabular-nums;
}

.bankpro-accounts-card__balance--secondary .bankpro-accounts-card__balance-value {
	font-size: 1.1rem;
	font-weight: 600;
}

.bankpro-accounts-card__hint {
	margin: 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-warning);
}

.bankpro-accounts-card__meta {
	margin: 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-accounts-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-4);
}

.bankpro-accounts-card__action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--bankpro-primary);
	text-decoration: none;
	font: var(--bankpro-font-label);
}

/* Every state explicit — default/:hover/:focus/:focus-visible/:active —
   per this project's own repeatedly-confirmed Hello Elementor lesson
   (Stage 3.5 §29): a real mouse click sets :focus without :focus-visible,
   so both must be guarded, never :focus-visible alone. */
.bankpro-accounts-card__action:hover,
.bankpro-accounts-card__action:focus,
.bankpro-accounts-card__action:focus-visible {
	color: var(--bankpro-primary-dark);
	text-decoration: underline;
}

.bankpro-accounts-card__action:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-accounts-card__action:active {
	color: var(--bankpro-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
	.bankpro-accounts-card {
		transition: none !important;
	}
}

@media (min-width: 721px) {
	.bankpro-accounts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bankpro-accounts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.bankpro-accounts-overview {
		gap: var(--bankpro-space-4);
	}

	.bankpro-accounts-card__actions {
		flex-direction: column;
		gap: var(--bankpro-space-2);
	}
}

/* ============================================================
 * Prompt 13 — Stage 4, Increment 4.2: Transactions Premium Redesign
 * `.bankpro-transaction-list`/`__icon`/`--credit`/`--debit`/
 * `.bankpro-transaction-list__text` and `.bankpro-amount--credit`/`--debit`
 * are all reused verbatim, unmodified (the same primitives Dashboard's
 * Recent Transactions and RecentTransactionsWidget already use) — only a
 * new page-level scoping namespace and the row-flex override this page
 * needs (mirroring `.bankpro-dashboard-transactions`'s own identical
 * override) are added here.
 * ============================================================ */

.bankpro-transactions-page__head {
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-transactions-page__head .bankpro-view__title {
	margin-bottom: 4px;
}

.bankpro-transactions-page__subtitle {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-transactions-page__selector {
	max-width: 360px;
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-transactions-page .bankpro-transaction-list__main {
	flex-direction: row;
	align-items: center;
	gap: var(--bankpro-space-2);
}

.bankpro-transactions-page__amount-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
}

.bankpro-transactions-page__balance {
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.bankpro-transactions-page__selector {
		max-width: none;
	}
}

/* ============================================================
 * Post-production UX fix — mobile transaction row.
 * At <=720px (the sitewide mobile breakpoint used throughout this file)
 * `.bankpro-transactions-page .bankpro-transaction-list__main`'s row-flex
 * override (above) puts the icon+title+date on the left competing for
 * width against the amount/balance column on the right — on a narrow
 * viewport this squeezes the title down to a few characters before the
 * shared `.bankpro-transaction-list__desc` truncation (nowrap+ellipsis,
 * defined once, up near `.bankpro-transaction-list` itself) kicks in, and
 * the unbroken transaction-id token in `.bankpro-transaction-list__date`
 * has nowhere to wrap cleanly. Fixed by stacking the row vertically on
 * this page only — title/date/id get the full card width on their own
 * line, amount/balance drop to their own right-aligned line below — rather
 * than shrinking either side. `.bankpro-transaction-list__item`'s shared
 * base rules (icon, spacing, border) are untouched; only this page's own
 * row-flex override and the amount column are adjusted, both already
 * page-scoped selectors from the block above.
 * ============================================================ */
@media (max-width: 720px) {
	.bankpro-transactions-page__list-card .bankpro-transaction-list__item {
		flex-direction: column;
		align-items: stretch;
		gap: var(--bankpro-space-2);
	}

	.bankpro-transactions-page .bankpro-transaction-list__desc {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: break-word;
	}

	.bankpro-transactions-page .bankpro-transaction-list__date {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.bankpro-transactions-page__amount-col {
		align-self: flex-end;
	}

	.bankpro-transactions-page__balance {
		white-space: normal;
		text-align: right;
	}
}

/* ============================================================
 * Post-production UX fix — tablet transaction title wrapping.
 * The new, longer "Transferred to X via Category" / "Received from X via
 * Category" titles (customer-facing transfer presentation) can outgrow the
 * available width in the 721-1023px band, where the row stays horizontal
 * (unlike <=720px above) but is narrower than desktop — the shared
 * `.bankpro-transaction-list__desc` nowrap+ellipsis rule then clips a
 * legitimate title mid-word. Scoped to this page and this width band only:
 * the row layout, icon, amount/balance column, and every other page using
 * `.bankpro-transaction-list__desc` (Dashboard, Statement, the Elementor
 * Recent Transactions widget) are untouched — only the title itself is
 * allowed to wrap to a second line instead of truncating.
 * ============================================================ */
@media (min-width: 721px) and (max-width: 1023px) {
	.bankpro-transactions-page .bankpro-transaction-list__desc {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: break-word;
	}
}

/* ============================================================
 * Prompt 13 — Stage 4, Increment 4.2: Statement Premium Polish
 * `.bankpro-table`, `.bankpro-statement__toolbar`/`__filters`/`__identity`/
 * `__table`, `.bankpro-pagination`, and `.bankpro-alert--info` are all
 * reused verbatim/unmodified — `.bankpro-table` is also shared with
 * Scheduled Transfers (confirmed by grep before writing this block), and
 * `.bankpro-statement__table` is depended on by the existing `@media print`
 * rules, so neither is touched. Only the new balance-summary treatment and
 * a small inline row icon are added.
 * ============================================================ */

.bankpro-statement-page__subtitle {
	margin: 4px 0 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-statement-page__summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-5);
}

.bankpro-statement-page__balance {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bankpro-statement-page__balance-label {
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-statement-page__balance-value {
	font: var(--bankpro-font-numeric);
	color: var(--bankpro-text);
	font-variant-numeric: tabular-nums;
}

.bankpro-statement-page__row-icon {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 6px;
	color: var(--bankpro-text-muted);
}

@media print {
	.bankpro-statement-page__row-icon {
		display: none;
	}
}

/* ============================================================
 * Prompt 13 — Stage 4, Increment 4.3: Transfer Wizard + Transfer History
 * The wizard's own step-indicator/destination-card/verification-panel/
 * progress-bar CSS (`.bankpro-wizard-*`, `.bankpro-destination-card*`,
 * `.bankpro-verification-panel*`, `.bankpro-progress*`) already had a
 * fairly developed premium treatment from earlier phases and is left as-is
 * here — this increment only adds a heading/subtitle wrapper for each page
 * and a small transfer-history direction indicator. `.bankpro-table`
 * (shared with Scheduled Transfers and Statement, confirmed by grep) is
 * untouched.
 * ============================================================ */

.bankpro-transfer-page__head {
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-transfer-page__head .bankpro-view__title {
	margin-bottom: 4px;
}

.bankpro-transfer-page__subtitle {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-transfer-history-page__head {
	margin-bottom: var(--bankpro-space-4);
}

.bankpro-transfer-history-page__head .bankpro-view__title {
	margin-bottom: 4px;
}

.bankpro-transfer-history-page__subtitle {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

.bankpro-transfer-history-page__direction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bankpro-transfer-history-page__direction--credit {
	color: var(--bankpro-accent);
}

.bankpro-transfer-history-page__direction--debit {
	color: var(--bankpro-danger);
}

.bankpro-transfer-history-page__type {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--bankpro-text-muted);
}

/* -------------------------------------------------------------------- */
/* Stage 4.3 continued — recipient field grouping (Part D). Category-     */
/* specific recipient fields (international/fintech/crypto) are now real  */
/* `<fieldset>`s with an icon+label `<legend>` instead of an unlabeled    */
/* `<div>`, so a customer can tell at a glance which destination's fields */
/* they're filling in. `internal`'s single-field group needed no change   */
/* — it was already unambiguous.                                          */
/* -------------------------------------------------------------------- */

.bankpro-recipient-fields {
	border: 0;
	margin: 0;
	padding: 0;
}

.bankpro-recipient-fields__legend {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	padding: 0;
	margin-bottom: var(--bankpro-space-3);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bankpro-text);
}

.bankpro-recipient-fields__legend-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--bankpro-radius-md);
	background: var(--bankpro-info-bg);
	color: var(--bankpro-info);
}

.bankpro-recipient-fields__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--bankpro-space-3);
}

@media (min-width: 502px) {
	.bankpro-recipient-fields__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Stage 4.3 continued — grouped Review step (Part E). Replaces the flat  */
/* `<dl>` `renderReview()` used to fill with labeled sections (From / To / */
/* Amount / Note), rendered as sibling `.bankpro-review-group` cards —    */
/* still built from the same `.bankpro-definition-list` component, just   */
/* wrapped per-section. No new financial value is computed anywhere in    */
/* this CSS or the JS that fills it.                                      */
/* -------------------------------------------------------------------- */

.bankpro-review-summary {
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-3);
}

.bankpro-review-group {
	padding: var(--bankpro-space-3);
	background: var(--bankpro-bg);
	border-radius: var(--bankpro-radius-md);
}

.bankpro-review-group__title {
	margin: 0 0 var(--bankpro-space-2);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bankpro-text-muted);
}

/* Registration wizard's Review step (Phase 21/6) — each group gets an Edit
   control that jumps back to the owning step; the Transfer wizard's review
   groups have no such control since that flow has no equivalent "go fix
   this earlier answer" need for a already-committed transfer. */
.bankpro-review-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bankpro-space-2);
	margin-bottom: var(--bankpro-space-2);
}

.bankpro-review-group__head .bankpro-review-group__title {
	margin-bottom: 0;
}

.bankpro-review-group__edit {
	background: none;
	border: none;
	padding: 0;
	color: var(--bankpro-primary);
	font-size: 0.8rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.bankpro-review-group__edit:hover,
.bankpro-review-group__edit:focus-visible {
	text-decoration: underline;
}

.bankpro-review-group .bankpro-definition-list dd.bankpro-financial-value {
	color: var(--bankpro-primary);
}

/* -------------------------------------------------------------------- */
/* Stage 4.3 continued — Awaiting Bank Approval now uses a real           */
/* IconLibrary `bank` icon element instead of the CSS-generated 🏦 emoji   */
/* the pseudo-element below still declares; disabling the pseudo-element   */
/* rather than deleting its original declaration keeps this file's        */
/* additive-only convention (every earlier increment's own comments say   */
/* the same) while actually removing the emoji from what renders.         */
/* -------------------------------------------------------------------- */

.bankpro-verification-panel--awaiting::before {
	content: none;
}

.bankpro-verification-panel--awaiting__icon {
	display: flex;
	justify-content: center;
	margin-bottom: var(--bankpro-space-2);
	color: var(--bankpro-info);
}

/* -------------------------------------------------------------------- */
/* Stage 4.3 continued — a wider desktop tier for the 4-option            */
/* destination grid (previously fixed at 2 columns at every width above   */
/* 720px); ~1011px is one of this increment's own mandated verification   */
/* widths. Additive only — the existing 2-column/1-column tiers below and */
/* above this are untouched.                                              */
/* -------------------------------------------------------------------- */

@media (min-width: 1011px) {
	.bankpro-destination-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------- */
/* Stage 4.3 continued — reduced-motion coverage gap found on the         */
/* destination cards' own `transform`/`box-shadow` hover transition       */
/* (declared in the Prompt 18 section above, never covered by any         */
/* `prefers-reduced-motion` block since). Fixed here rather than in an     */
/* earlier section, matching this file's "never edit a prior declaration, */
/* only add" rule.                                                        */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bankpro-destination-card {
		transition: none !important;
	}
}

/* ============================================================
 * Stage 5.1 — Public Homepage Visual Redesign
 * Replaces Stage 5's own first-pass CSS in place (same session, same
 * uncommitted feature — not a historical increment being disturbed).
 * `.bankpro-home-*` remains the narrowly-scoped namespace; the header/nav
 * markup still reuses `.bankpro-portal`/`.bankpro-portal__nav*` verbatim so
 * `bankpro-portal.js`'s mobile drawer keeps working unmodified. No
 * animation/scroll-JS was added — richness comes from imagery, type scale,
 * and section rhythm instead, per the brief's own "performance over
 * animation" instruction.
 * ============================================================ */

.bankpro-btn--large {
	min-height: 52px;
	padding: 14px 28px;
	font-size: 1.05rem;
}

/* New accent (green) button variant — used only for this page's primary
   CTAs, so the blue nav CTA and the green hero/CTA-band buttons read as two
   deliberately different weights, not a uniform wash of blue. Full explicit
   default/:hover/:focus/:focus-visible/:active, matching every other
   `.bankpro-btn--*` variant's own established contract. */
.bankpro-btn--accent {
	background: var(--bankpro-accent);
	color: #fff;
}

.bankpro-btn--accent:hover,
.bankpro-btn--accent:focus,
.bankpro-btn--accent:focus-visible {
	background: color-mix(in srgb, var(--bankpro-accent) 80%, #000);
	color: #fff;
}

.bankpro-btn--accent:active {
	background: color-mix(in srgb, var(--bankpro-accent) 68%, #000);
}

/* Same `.bankpro-portal a` (0,1,1) vs. single-class (0,1,0) color leak
   already fixed for `.bankpro-btn--primary` — `.bankpro-btn--accent` is a
   new variant and needs the identical guard. */
.bankpro-portal a.bankpro-btn--accent {
	color: #fff;
}

/* Real, live-discovered defect (found while building Stage 5's original
   CTA buttons), not homepage-specific — every `<a class="bankpro-btn ...">`
   anywhere in the plugin lost `text-decoration: none` to Hello Elementor's
   `.page-content a { text-decoration: underline }` (0,1,1) beating
   `.bankpro-btn`'s own (0,1,0). Confirmed live on the real, untouched Login
   page. Fixed once, for every current and future `.bankpro-btn` anchor. */
.bankpro-portal a.bankpro-btn {
	text-decoration: none;
}

/* -------------------------------------------------------------------- */
/* Shell                                                                 */
/* -------------------------------------------------------------------- */

.bankpro-portal--home {
	background: var(--bankpro-surface);
}

.bankpro-home__main {
	padding: 0;
	background: var(--bankpro-surface);
}

/* -------------------------------------------------------------------- */
/* Header — persistent frosted-dark bar, not a plain white strip. Every    */
/* nested selector here is prefixed `.bankpro-portal--home` specifically   */
/* so it safely out-specifies the existing light-theme header rules        */
/* (`.bankpro-portal__nav .bankpro-portal__nav-link` etc., already at      */
/* (0,2,0)) rather than fighting them on source order alone.               */
/* -------------------------------------------------------------------- */

.bankpro-portal--home .bankpro-portal__header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(11, 26, 51, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bankpro-portal--home .bankpro-portal__header-inner {
	color: #fff;
}

.bankpro-portal--home .bankpro-portal__brand-icon {
	color: #fff;
}

.bankpro-portal--home .bankpro-portal__nav {
	background: rgba(11, 26, 51, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 721px) {
	.bankpro-portal--home .bankpro-portal__nav {
		position: sticky;
		top: 64px;
		z-index: 79;
	}
}

.bankpro-portal--home .bankpro-portal__nav .bankpro-portal__nav-link {
	color: rgba(255, 255, 255, 0.8);
}

.bankpro-portal--home .bankpro-portal__nav .bankpro-portal__nav-link:hover,
.bankpro-portal--home .bankpro-portal__nav .bankpro-portal__nav-link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.bankpro-portal--home .bankpro-portal__nav-toggle {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.bankpro-portal--home .bankpro-portal__nav-toggle:hover,
.bankpro-portal--home .bankpro-portal__nav-toggle:focus,
.bankpro-portal--home .bankpro-portal__nav-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.44);
	color: #fff;
}

.bankpro-portal--home .bankpro-portal__nav-toggle:active {
	background: rgba(255, 255, 255, 0.22);
}

.bankpro-portal a.bankpro-home__brand {
	text-decoration: none;
	color: inherit;
	border-radius: var(--bankpro-radius-sm);
}

.bankpro-portal a.bankpro-home__brand:hover,
.bankpro-portal a.bankpro-home__brand:focus,
.bankpro-portal a.bankpro-home__brand:focus-visible,
.bankpro-portal a.bankpro-home__brand:active {
	color: inherit;
	text-decoration: none;
	outline: 2px solid transparent;
}

.bankpro-portal a.bankpro-home__brand:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-home__nav-cta {
	margin-left: auto;
}

/* -------------------------------------------------------------------- */
/* Shared: eyebrow / section head                                       */
/* -------------------------------------------------------------------- */

.bankpro-home__eyebrow {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--bankpro-radius-pill);
	background: var(--bankpro-info-bg, #eaf2fb);
	color: var(--bankpro-primary);
	font: var(--bankpro-font-label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-home__eyebrow--light {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.bankpro-home__section {
	padding: var(--bankpro-space-7) 0;
}

.bankpro-home__section--alt {
	background: var(--bankpro-surface);
}

.bankpro-home__section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--bankpro-space-5);
}

.bankpro-home__section-title {
	margin: var(--bankpro-space-1) 0 var(--bankpro-space-2);
	font: var(--bankpro-font-h1);
	color: var(--bankpro-text);
}

.bankpro-home__section-subtitle {
	margin: 0;
	font: var(--bankpro-font-body-lg);
	color: var(--bankpro-text-muted);
}

.bankpro-home__section-subtitle--light {
	color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

.bankpro-home__hero {
	background: linear-gradient(160deg, #0b1f3a 0%, var(--bankpro-primary-dark) 48%, var(--bankpro-primary) 100%);
	color: #fff;
	padding: var(--bankpro-space-7) 0 var(--bankpro-space-5);
}

.bankpro-home__hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-5);
	align-items: center;
}

.bankpro-home__hero-title {
	margin: 0 0 var(--bankpro-space-3);
	font-weight: 700;
	font-size: clamp(2.1rem, 4.5vw + 1rem, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.bankpro-home__hero-subtitle {
	margin: 0 0 var(--bankpro-space-4);
	font: var(--bankpro-font-body-lg);
	color: rgba(255, 255, 255, 0.86);
	max-width: 46ch;
}

.bankpro-home__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-3);
}

.bankpro-home__hero .bankpro-btn--secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.bankpro-home__hero .bankpro-btn--secondary:hover,
.bankpro-home__hero .bankpro-btn--secondary:focus,
.bankpro-home__hero .bankpro-btn--secondary:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.bankpro-home__trust-row {
	list-style: none;
	margin: var(--bankpro-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-2) var(--bankpro-space-4);
}

.bankpro-home__trust-row li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: var(--bankpro-font-small);
	color: rgba(255, 255, 255, 0.78);
}

.bankpro-home__trust-row li svg {
	color: var(--bankpro-accent);
	flex-shrink: 0;
}

.bankpro-home__hero-visual {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-3);
}

.bankpro-home__preview-card {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--bankpro-radius-lg);
	padding: var(--bankpro-space-4);
	backdrop-filter: blur(6px);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bankpro-home__preview-card--primary {
	box-shadow: var(--bankpro-shadow-elevated);
}

.bankpro-home__preview-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bankpro-home__preview-card-head svg {
	opacity: 0.7;
}

.bankpro-home__preview-card--floating {
	position: absolute;
	left: -14px;
	top: 42%;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--bankpro-text);
	padding: 8px 14px;
	border-radius: var(--bankpro-radius-pill);
	box-shadow: var(--bankpro-shadow-elevated);
	font: var(--bankpro-font-label);
	z-index: 5;
	border: none;
}

.bankpro-home__preview-floating-icon {
	display: inline-flex;
	color: var(--bankpro-success, var(--bankpro-accent));
}

.bankpro-home__preview-label {
	font: var(--bankpro-font-label);
	color: rgba(255, 255, 255, 0.72);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bankpro-home__preview-number {
	font: var(--bankpro-font-small);
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.05em;
}

.bankpro-home__preview-balance {
	font: var(--bankpro-font-numeric);
	color: #fff;
	letter-spacing: 0.08em;
}

.bankpro-home__preview-graph {
	width: 100%;
	height: 44px;
	color: var(--bankpro-accent);
	margin-top: 4px;
}

.bankpro-home__preview-caption {
	margin: var(--bankpro-space-3) 0 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

.bankpro-home__hero .bankpro-home__preview-caption {
	color: rgba(255, 255, 255, 0.6);
}

.bankpro-home__preview-caption--center {
	text-align: center;
}

@media (min-width: 1011px) {
	.bankpro-home__hero-inner {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.bankpro-home__preview-card--secondary {
		margin-left: var(--bankpro-space-5);
		max-width: 240px;
	}
}

/* -------------------------------------------------------------------- */
/* Why BankPro — photo + dark band (asymmetric, not a card grid)         */
/* -------------------------------------------------------------------- */

.bankpro-home__why {
	display: grid;
	grid-template-columns: 1fr;
}

.bankpro-home__why-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bankpro-bg);
}

.bankpro-home__why-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bankpro-home__why-panel {
	background: var(--bankpro-primary-dark);
	color: #fff;
	padding: var(--bankpro-space-6) var(--bankpro-space-4);
}

.bankpro-home__why-title {
	font: var(--bankpro-font-h1);
	color: #fff;
	margin: var(--bankpro-space-2) 0 var(--bankpro-space-4);
}

.bankpro-home__why-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-4);
}

.bankpro-home__why-list li {
	display: flex;
	gap: var(--bankpro-space-3);
	align-items: flex-start;
}

.bankpro-home__why-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bankpro-radius-md);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.bankpro-home__why-icon--light {
	background: rgba(255, 255, 255, 0.14);
}

.bankpro-home__why-item-title {
	margin: 0 0 2px;
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
}

.bankpro-home__why-item-description {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

/* Both panels this component appears in (`__why-panel`, `__security-panel`)
   are dark — scoped here by ancestor so the light-text treatment can never
   be forgotten on one of them the way it was on first pass (confirmed live:
   the Why section's text was rendering `--bankpro-text` navy-on-navy,
   nearly unreadable, because only the Security section's markup carried the
   old `--light` modifier classes). Both classes below still exist so any
   existing markup referencing them keeps working, just redundantly. */
.bankpro-home__why-panel .bankpro-home__why-item-title,
.bankpro-home__security-panel .bankpro-home__why-item-title,
.bankpro-home__why-item-title--light {
	color: #fff;
}

.bankpro-home__why-panel .bankpro-home__why-item-description,
.bankpro-home__security-panel .bankpro-home__why-item-description,
.bankpro-home__why-item-description--light {
	color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 1011px) {
	.bankpro-home__why {
		grid-template-columns: 1fr 1fr;
	}

	.bankpro-home__why-media {
		aspect-ratio: auto;
	}

	.bankpro-home__why-panel {
		padding: var(--bankpro-space-7) var(--bankpro-space-6);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------- */
/* About — editorial image + text, real principle chips (no fake stats)  */
/* -------------------------------------------------------------------- */

.bankpro-home__about {
	padding: var(--bankpro-space-7) 0;
}

.bankpro-home__about-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-5);
	align-items: center;
}

.bankpro-home__about-media img {
	width: 100%;
	height: auto;
	border-radius: var(--bankpro-radius-lg);
	box-shadow: var(--bankpro-shadow-elevated);
	display: block;
}

.bankpro-home__about-title {
	font: var(--bankpro-font-h1);
	color: var(--bankpro-text);
	margin: 0 0 var(--bankpro-space-3);
}

.bankpro-home__about-description {
	font: var(--bankpro-font-body-lg);
	color: var(--bankpro-text-muted);
	margin: 0 0 var(--bankpro-space-4);
}

.bankpro-home__principles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-2) var(--bankpro-space-4);
}

.bankpro-home__principles li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: var(--bankpro-font-label);
	color: var(--bankpro-text);
}

.bankpro-home__principles li svg {
	color: var(--bankpro-accent);
}

@media (min-width: 1011px) {
	.bankpro-home__about-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Product showcase — dashboard mockup (illustrative only, see caption)  */
/* -------------------------------------------------------------------- */

.bankpro-home__showcase {
	padding: var(--bankpro-space-7) 0;
	background: var(--bankpro-bg);
}

.bankpro-home__dashboard-mock {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
	background: var(--bankpro-primary-dark);
	border-radius: var(--bankpro-radius-xl);
	padding: var(--bankpro-space-4);
	box-shadow: var(--bankpro-shadow-elevated);
	color: #fff;
}

.bankpro-home__dashboard-mock-hero {
	background: linear-gradient(135deg, var(--bankpro-primary), var(--bankpro-primary-dark));
	border-radius: var(--bankpro-radius-lg);
	padding: var(--bankpro-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-2);
	justify-content: center;
}

.bankpro-home__dashboard-mock-balance {
	font: var(--bankpro-font-numeric);
	font-size: 2rem;
	color: #fff;
	letter-spacing: 0.04em;
}

.bankpro-home__dashboard-mock-side {
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--bankpro-radius-lg);
	padding: var(--bankpro-space-4);
}

.bankpro-home__dashboard-mock-heading {
	margin: 0 0 var(--bankpro-space-2);
	font: var(--bankpro-font-label);
	color: rgba(255, 255, 255, 0.68);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bankpro-home__dashboard-mock-row {
	display: flex;
	align-items: center;
	gap: var(--bankpro-space-2);
	padding: var(--bankpro-space-2) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font: var(--bankpro-font-small);
	color: #fff;
}

.bankpro-home__dashboard-mock-row span:nth-child(2) {
	flex: 1;
}

.bankpro-home__dashboard-mock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.bankpro-home__dashboard-mock-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bankpro-space-2);
	margin-top: var(--bankpro-space-3);
}

.bankpro-home__dashboard-mock-actions span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: var(--bankpro-radius-pill);
	background: rgba(255, 255, 255, 0.1);
	font: var(--bankpro-font-caption);
}

@media (min-width: 1011px) {
	.bankpro-home__dashboard-mock {
		grid-template-columns: 1.4fr 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Security — photo + dark band (mirrors Why, image on the other side)   */
/* -------------------------------------------------------------------- */

.bankpro-home__security {
	display: grid;
	grid-template-columns: 1fr;
}

.bankpro-home__security-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #0b1a33;
}

.bankpro-home__security-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bankpro-home__security-panel {
	background: #0b1a33;
	color: #fff;
	padding: var(--bankpro-space-6) var(--bankpro-space-4);
}

.bankpro-home__security-title {
	font: var(--bankpro-font-h1);
	color: #fff;
	margin: var(--bankpro-space-2) 0 var(--bankpro-space-1);
}

.bankpro-home__security-list {
	list-style: none;
	margin: var(--bankpro-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bankpro-space-4);
}

.bankpro-home__security-list li {
	display: flex;
	gap: var(--bankpro-space-3);
	align-items: flex-start;
}

@media (min-width: 1011px) {
	.bankpro-home__security {
		grid-template-columns: 1fr 1fr;
	}

	.bankpro-home__security-media {
		aspect-ratio: auto;
		order: 2;
	}

	.bankpro-home__security-panel {
		order: 1;
		padding: var(--bankpro-space-7) var(--bankpro-space-6);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------- */
/* How It Works — numbered timeline with a connecting line on desktop    */
/* -------------------------------------------------------------------- */

.bankpro-home__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-5);
}

.bankpro-home__step {
	position: relative;
	text-align: center;
	padding: 0 var(--bankpro-space-3);
}

.bankpro-home__step-number {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto var(--bankpro-space-2);
	border-radius: 50%;
	background: var(--bankpro-primary);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
}

.bankpro-home__step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bankpro-primary);
	margin-bottom: var(--bankpro-space-2);
}

@media (min-width: 755px) {
	.bankpro-home__steps {
		grid-template-columns: repeat(3, 1fr);
		position: relative;
	}

	.bankpro-home__steps::before {
		content: "";
		position: absolute;
		top: 20px;
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 2px;
		background: var(--bankpro-border);
		z-index: 1;
	}
}

/* -------------------------------------------------------------------- */
/* Features — bento grid (2 large tiles + 6 regular, not 8 equal cards)  */
/* -------------------------------------------------------------------- */

.bankpro-home__bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bankpro-space-3);
}

.bankpro-home__feature-card {
	padding: var(--bankpro-space-4);
	border-radius: var(--bankpro-radius-lg);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bankpro-home__feature-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bankpro-shadow-medium);
}

.bankpro-home__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bankpro-radius-md);
	background: var(--bankpro-info-bg, #eaf2fb);
	color: var(--bankpro-primary);
	margin-bottom: var(--bankpro-space-3);
}

.bankpro-home__feature-title {
	margin: 0 0 var(--bankpro-space-1);
	font: var(--bankpro-font-h4);
	color: var(--bankpro-text);
}

.bankpro-home__feature-description {
	margin: 0;
	font: var(--bankpro-font-small);
	color: var(--bankpro-text-muted);
}

@media (min-width: 502px) {
	.bankpro-home__bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.bankpro-home__feature-card--large {
		grid-column: span 2;
	}
}

@media (min-width: 1011px) {
	.bankpro-home__bento {
		grid-template-columns: repeat(6, 1fr);
	}

	.bankpro-home__feature-card {
		grid-column: span 2;
	}

	.bankpro-home__feature-card--large {
		grid-column: span 3;
	}
}

/* -------------------------------------------------------------------- */
/* CTA band                                                              */
/* -------------------------------------------------------------------- */

.bankpro-home__cta {
	background: linear-gradient(135deg, var(--bankpro-primary-dark), #0b1a33);
	color: #fff;
	padding: var(--bankpro-space-6) 0;
}

.bankpro-home__cta-inner {
	text-align: center;
}

.bankpro-home__cta-title {
	margin: 0 0 var(--bankpro-space-4);
	font: var(--bankpro-font-display);
	font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
	color: #fff;
}

.bankpro-home__cta .bankpro-home__hero-actions {
	justify-content: center;
}

.bankpro-portal a.bankpro-home__cta-login {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.bankpro-portal a.bankpro-home__cta-login:hover,
.bankpro-portal a.bankpro-home__cta-login:focus,
.bankpro-portal a.bankpro-home__cta-login:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

.bankpro-home__footer {
	background: var(--bankpro-surface);
	border-top: 1px solid var(--bankpro-border);
	padding: var(--bankpro-space-5) 0;
}

.bankpro-home__footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bankpro-space-3);
	text-align: center;
}

.bankpro-home__footer-brand {
	color: var(--bankpro-text);
}

.bankpro-home__footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bankpro-space-3) var(--bankpro-space-4);
}

.bankpro-portal .bankpro-home__footer-nav a {
	color: var(--bankpro-text-muted);
	text-decoration: none;
	font: var(--bankpro-font-small);
	border-radius: var(--bankpro-radius-sm);
	padding: 4px 2px;
}

.bankpro-portal .bankpro-home__footer-nav a:hover,
.bankpro-portal .bankpro-home__footer-nav a:focus,
.bankpro-portal .bankpro-home__footer-nav a:focus-visible,
.bankpro-portal .bankpro-home__footer-nav a:active {
	color: var(--bankpro-primary);
	text-decoration: underline;
}

.bankpro-portal .bankpro-home__footer-nav a:focus-visible {
	outline: 3px solid #7fb3ff;
	outline-offset: 2px;
}

.bankpro-home__footer-copyright {
	margin: 0;
	font: var(--bankpro-font-caption);
	color: var(--bankpro-text-muted);
}

/* -------------------------------------------------------------------- */
/* Mobile (<= 720px) — matches the project's established breakpoint      */
/* -------------------------------------------------------------------- */

@media (max-width: 720px) {
	.bankpro-home__hero {
		padding: var(--bankpro-space-5) 0 var(--bankpro-space-4);
	}

	.bankpro-home__hero-actions .bankpro-btn,
	.bankpro-home__cta .bankpro-home__hero-actions .bankpro-btn {
		width: 100%;
	}

	.bankpro-home__nav-cta {
		margin-left: 0;
		width: 100%;
	}

	.bankpro-home__section {
		padding: var(--bankpro-space-5) 0;
	}

	.bankpro-home__why-panel,
	.bankpro-home__security-panel {
		padding: var(--bankpro-space-5) var(--bankpro-space-3);
	}

	.bankpro-home__about,
	.bankpro-home__showcase {
		padding: var(--bankpro-space-5) 0;
	}

	/* The floating "Transfer verified" pill's desktop offset would overflow
	   a narrow viewport — reset it into normal flow instead. */
	.bankpro-home__preview-card--floating {
		position: static;
		align-self: flex-start;
		margin: -8px 0 0 var(--bankpro-space-3);
	}
}

/* -------------------------------------------------------------------- */
/* Reduced motion — the only new transition this pass adds is the bento   */
/* card hover lift; the file's original reduced-motion block (top of this */
/* section's predecessor) already covers everything else this page reuses.*/
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bankpro-home__feature-card {
		transition: none !important;
	}
}