/* Afortis "Bank Accounts" hub — self-contained styles (namespaced .bhub-*).
   Layout = the banking hub (Figma 2301:6727); bank detail = the modal (Figma 2409:13079). */

.bhub {
	--bhub-navy: #3a2a62;
	--bhub-violet: #523f8a;
	--bhub-muted-violet: #9674b5;
	--bhub-ink: #262424;
	--bhub-sec: #606060;
	--bhub-muted: #968f8f;
	--bhub-page: #f5f4f9;
	--bhub-white: #ffffff;
	--bhub-line: rgba(150, 116, 181, 0.3);
	/* wrap = 1280 content box + 2×24 gutter, so hub content sits at the SAME 1280 site-width
	   column as every normal page (and the embedded global chrome). */
	--bhub-wrap: 1328px;
	--bhub-pad: 24px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--bhub-ink);
	line-height: 1.5;
	box-sizing: border-box;
}
.bhub *, .bhub *::before, .bhub *::after { box-sizing: inherit; }
.bhub img { max-width: 100%; }

.bhub-wrap { max-width: var(--bhub-wrap); margin: 0 auto; padding-left: var(--bhub-pad); padding-right: var(--bhub-pad); }

/* ---- shared type ---- */
.bhub-eyebrow { font-size: 14px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: var(--bhub-muted-violet); margin: 0 0 20px; }
/* Section headings 44px desktop / 42px mobile — beat Avada's global h2 (24/28px). Covers the hub's
   own `.bhub-h2` (Choose Your Bank) and the reused `.afortis-awhy-head` (Why Clients Choose). */
.bhub .bhub-h2, .bhub .afortis-awhy-head { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 44px !important; line-height: 1.05; color: var(--bhub-ink); }
.bhub-h2 { margin: 0 0 30px; }
.bhub .afortis-awhy-head { margin: 0 0 40px; }
.bhub .afortis-awhy-left .afortis-eyebrow { margin-top: 20px; margin-bottom: 48px; }
.bhub-accent { color: var(--bhub-violet); }
.bhub-ic { flex: 0 0 auto; }

/* ---- buttons ---- */
.bhub-btn-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.bhub-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 15px 30px; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.bhub-btn span { display: inline-block; }
.bhub-btn-primary { background: var(--bhub-navy); color: #fff; }
.bhub-btn-primary:hover { background: var(--bhub-violet); color: #fff; }
.bhub-btn-outline { background: transparent; color: var(--bhub-ink); border-color: var(--bhub-violet); }
.bhub-btn-outline:hover { background: var(--bhub-violet); color: #fff; }
.bhub-btn:focus-visible { outline: 3px solid var(--bhub-muted-violet); outline-offset: 2px; }

/* ================= Hero ================= */
.bhub-hero { background: #fff; padding: 40px 0 60px; }
.bhub-hero-grid { display: grid; grid-template-columns: 520px 1fr; gap: 60px; align-items: center; }
.bhub-hero-media { align-self: stretch; min-height: 460px; background: linear-gradient(135deg, #d9d2e8, #b7a9d6); background-size: cover; background-position: center; }
.bhub-crumbs { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bhub-muted); margin: 0 0 22px; }
.bhub-crumbs a { color: var(--bhub-muted); text-decoration: none; }
.bhub-crumbs a:hover { color: var(--bhub-violet); }
.bhub-crumbs .bhub-ic { width: 12px; height: 12px; }
.bhub-hero-h1 { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.05; margin: 0 0 18px; color: var(--bhub-ink); }
.bhub-hero-intro { font-size: 16px; color: var(--bhub-sec); margin: 0 0 28px; max-width: 520px; }
.bhub-stats { display: flex; gap: 50px; margin: 0 0 28px; }
.bhub-stat { display: flex; flex-direction: column; gap: 4px; }
.bhub-stat-num { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--bhub-violet); }
.bhub-stat-label { font-size: 14px; color: var(--bhub-sec); }
.bhub-hero-body { font-size: 14px; color: var(--bhub-sec); margin: 0 0 28px; max-width: 540px; }

/* ============ Choose Your Bank (tabs + grid) ============ */
.bhub-choose { background: var(--bhub-page); padding: 60px 0; }

/* Region tabs — underline style with flag icons (Figma 2301:6800), not filled pills. */
.bhub-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; border-top: 1px solid var(--bhub-line); padding-top: 30px; }
.bhub-tab { font-family: inherit; font-size: 13px; line-height: 1.2; color: var(--bhub-sec); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .15s, border-color .15s; }
.bhub-flag { flex: 0 0 auto; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(38,27,62,.08); }
.bhub-tab:hover { color: var(--bhub-violet); }
.bhub-tab.is-active { color: var(--bhub-violet); border-bottom-color: var(--bhub-violet); }
.bhub-tab:focus-visible { outline: 3px solid var(--bhub-muted-violet); outline-offset: 2px; }

/* Secondary filters — Key services / Account types multi-select dropdowns. */
.bhub-filters { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 18px; }
.bhub-dd { position: relative; }
.bhub-dd-toggle { font-family: inherit; font-size: 13px; line-height: 1.2; color: var(--bhub-sec); background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bhub-dd-toggle:hover { color: var(--bhub-violet); }
.bhub-dd-toggle .bhub-ic { width: 16px; height: 16px; transition: transform .15s; }
.bhub-dd.is-open .bhub-dd-toggle { color: var(--bhub-violet); }
.bhub-dd.is-open .bhub-dd-toggle .bhub-ic { transform: rotate(180deg); }
.bhub-dd-toggle.has-sel { color: var(--bhub-violet); }
.bhub-dd-n { font-size: 11px; font-weight: 600; line-height: 1; background: var(--bhub-violet); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.bhub-dd-n[hidden] { display: none; }
.bhub-dd-toggle:focus-visible { outline: 3px solid var(--bhub-muted-violet); outline-offset: 2px; }
.bhub-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--bhub-line); padding: 6px; min-width: 230px; box-shadow: 0 18px 44px rgba(38,27,62,.18); }
.bhub-dd-panel[hidden] { display: none; }
.bhub-dd-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--bhub-ink); cursor: pointer; }
.bhub-dd-opt:hover { background: var(--bhub-page); }
.bhub-dd-opt input { width: 15px; height: 15px; accent-color: var(--bhub-violet); cursor: pointer; }
/* Region control: desktop uses the flag-tab row above; this single-select dropdown is the MOBILE region picker. */
.bhub-dd--region { display: none; }
.bhub-region-opt { font-family: inherit; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; font-size: 14px; color: var(--bhub-ink); background: none; border: 0; cursor: pointer; text-align: left; }
.bhub-region-opt:hover { background: var(--bhub-page); }
.bhub-region-opt.is-active { color: var(--bhub-violet); }

.bhub-filter-bar { border-top: 1px solid var(--bhub-line); margin-top: 18px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bhub-results { font-size: 14px; color: var(--bhub-sec); margin: 0; }
.bhub-results .bhub-summary { color: var(--bhub-ink); }
.bhub-clear { font-family: inherit; font-size: 13px; color: var(--bhub-violet); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.bhub-clear:hover { color: var(--bhub-navy); }
.bhub-clear[hidden] { display: none; }

/* ---- bank cards (2-col) ---- */
.bhub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.bhub-card { background: #fff; padding: 40px 30px; display: flex; flex-direction: column; gap: 30px; text-align: left; }
.bhub-card[hidden] { display: none; }
.bhub-card-top { display: flex; flex-direction: column; gap: 20px; border-bottom: 1px solid var(--bhub-line); padding-bottom: 20px; }
.bhub-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bhub-card-title { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--bhub-navy); margin: 0; }
.bhub-card-loc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--bhub-sec); white-space: nowrap; }
.bhub-card-loc .bhub-ic { width: 18px; height: 18px; color: var(--bhub-muted-violet); }
.bhub-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.bhub-chip { font-size: 11px; color: var(--bhub-violet); background: var(--bhub-page); padding: 4px 10px; }
.bhub-card-desc { font-size: 13px; color: var(--bhub-sec); margin: 0; }
.bhub-card-mid { display: flex; flex-direction: column; gap: 10px; }
.bhub-card-review { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--bhub-sec); margin: 0; }
.bhub-card-review .bhub-ic { width: 18px; height: 18px; color: var(--bhub-muted-violet); }
.bhub-accs { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.bhub-acc { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--bhub-sec); }
.bhub-acc .bhub-ic { width: 16px; height: 16px; color: var(--bhub-violet); }
.bhub-card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bhub-fees { display: flex; gap: 30px; }
.bhub-fee { display: flex; flex-direction: column; }
.bhub-fee-l { font-size: 13px; color: var(--bhub-sec); }
.bhub-fee-v { font-family: "Arsenal", Georgia, serif; font-size: 24px; line-height: 1.1; color: var(--bhub-violet); padding-top: 5px; }
.bhub-card-link { font-family: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--bhub-violet); padding: 5px 0; }
.bhub-card-link .bhub-ic { width: 17px; height: 17px; transition: transform .15s; }
.bhub-card-link:hover { color: var(--bhub-navy); text-decoration: underline; }
.bhub-card-link:hover .bhub-ic { transform: translateX(3px); }
.bhub-card-link:focus-visible { outline: 3px solid var(--bhub-muted-violet); outline-offset: 2px; }

.bhub-empty { text-align: center; background: #fff; padding: 60px 30px; margin-top: 20px; }
.bhub-empty-title { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 28px; color: var(--bhub-navy); margin: 0 0 12px; }
.bhub-empty-body { font-size: 15px; color: var(--bhub-sec); max-width: 460px; margin: 0 auto 24px; }
.bhub-empty .bhub-btn-row { justify-content: center; }

/* ================= Bank-detail modal ================= */
.bhub-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.bhub-modal[hidden] { display: none; }
.bhub-modal-backdrop { position: fixed; inset: 0; background: rgba(38, 27, 62, 0.55); }
.bhub-modal-panel { position: relative; background: #fff; width: 100%; max-width: 640px; margin: auto; padding: 40px; box-shadow: 0 30px 80px rgba(38, 27, 62, 0.35); }
.bhub-modal-close { position: absolute; top: 24px; right: 24px; background: none; border: 0; cursor: pointer; color: var(--bhub-muted); padding: 4px; line-height: 0; }
.bhub-modal-close .bhub-ic { width: 26px; height: 26px; }
.bhub-modal-close:hover { color: var(--bhub-navy); }
.bhub-modal-close:focus-visible { outline: 3px solid var(--bhub-muted-violet); outline-offset: 2px; }

.bhub-detail-head { padding-right: 40px; }
.bhub-detail-title { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--bhub-navy); margin: 0 0 10px; }
.bhub-detail-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bhub-sec); margin: 0; }
.bhub-detail-loc .bhub-ic { width: 18px; height: 18px; color: var(--bhub-muted-violet); }
.bhub-detail-desc { font-size: 14px; color: var(--bhub-sec); margin: 18px 0 0; }
.bhub-detail-sep { border-top: 1px solid var(--bhub-line); margin: 24px 0; }
.bhub-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.bhub-field { display: flex; flex-direction: column; gap: 4px; }
.bhub-field--wide { grid-column: auto; }
.bhub-field-l { font-size: 13px; color: var(--bhub-sec); }
.bhub-field-v { font-size: 15px; color: var(--bhub-ink); }
.bhub-field-v--price { font-family: "Arsenal", Georgia, serif; font-size: 24px; line-height: 1.1; color: var(--bhub-violet); }
.bhub-detail-grid .bhub-accs { margin-top: 2px; }
.bhub-detail-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.bhub-detail-web { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--bhub-violet); text-decoration: none; }
.bhub-detail-web .bhub-ic { width: 17px; height: 17px; }
.bhub-detail-web:hover { color: var(--bhub-navy); }

/* ============ Why Clients Choose — inner `.afortis-awhy` skeleton is styled globally.
   Only the section wrapper (band bg + padding) is hub-local; design uses a WHITE band. ============ */
.bhub-why { background: var(--bhub-white); padding: 60px 0; }

/* ================= Responsive ================= */
@media (max-width: 1024px) {
	.bhub { --bhub-pad: 32px; }
	.bhub-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.bhub-hero-media { min-height: 280px; order: 2; }
	.bhub-hero-h1 { font-size: 38px; }
}
@media (max-width: 760px) {
	.bhub { --bhub-pad: 20px; }
	.bhub .bhub-h2, .bhub .afortis-awhy-head { font-size: 42px !important; }
	.bhub .afortis-awhy-left .afortis-eyebrow { margin-top: 0; margin-bottom: 16px; }
	.bhub-hero-h1 { font-size: 32px; }
	.bhub-eyebrow { margin-bottom: 14px; }
	.bhub-hero, .bhub-choose, .bhub-why { padding: 40px 0; }
	.bhub-stats { gap: 32px; }
	.bhub-stat-num { font-size: 34px; }
	.bhub-grid { grid-template-columns: 1fr; }
	.bhub-modal-panel { padding: 30px 22px; }
	.bhub-detail-title { font-size: 32px; }
	.bhub-detail-grid { grid-template-columns: 1fr; gap: 18px; }

	/* ---- mobile filters (Figma 2377:5627): flag-tab row → single "Region" dropdown; the three
	   filters stack full-width with dividers and open INLINE (push content down, not overlay). ---- */
	.bhub-tabs { display: none; }
	.bhub-dd--region { display: block; }
	.bhub-filters { flex-direction: column; align-items: stretch; gap: 0; margin-top: 20px; border-top: 1px solid var(--bhub-line); }
	.bhub-dd { border-bottom: 1px solid var(--bhub-line); }
	/* the count badge sits right after its label; only the chevron is pushed to the far right (aligned across rows) */
	.bhub-dd-toggle { width: 100%; justify-content: flex-start; padding: 15px 0; font-size: 15px; }
	.bhub-dd-toggle .bhub-ic { width: 22px; height: 22px; margin-left: auto; }
	.bhub-dd-panel { position: static; width: 100%; box-shadow: none; margin: 0 0 14px; }
	/* the last dropdown's bottom border already divides the filters from the results — no extra line */
	.bhub-filter-bar { flex-direction: column; align-items: flex-start; gap: 10px; border-top: none; margin-top: 0; padding-top: 18px; }

	/* ---- mobile card: location under the title; "Learn more" becomes a full-width navy button ---- */
	.bhub-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.bhub-card-foot { flex-direction: column; align-items: stretch; gap: 18px; }
	.bhub-card-link { flex-direction: row-reverse; justify-content: center; width: 100%; background: var(--bhub-navy); color: #fff; padding: 15px; }
	.bhub-card-link:hover { background: var(--bhub-violet); color: #fff; }
}
@media (max-width: 400px) {
	.bhub-card-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.bhub-btn, .bhub-tab, .bhub-card-link .bhub-ic { transition: none; }
}

/* ---- Avada content-top band: hidden page-title-bar exposes #main's top padding as a ~61px
   strip above the hero. Zero it on the two hub pages. ---- */
.page-id-1599 #main, .page-id-4629 #main { padding-top: 0; }

/* ---- Constrain the embedded global chrome (CTA strip + Reach-Out form) to the 1280 site column
   (the 100-width template otherwise lets [fusion_global] stretch edge-to-edge). 1280 = the column
   the hub content uses AND the width apply_cta_css designed the CTA button around. ---- */
.page-id-1599 .afortis-cta .fusion-row, .page-id-4629 .afortis-cta .fusion-row,
.page-id-1599 .afortis-form-section .fusion-row, .page-id-4629 .afortis-form-section .fusion-row {
	max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important;
}
/* The CTA strip global puts the heading/body in a 2_3 column whose left padding apply_cta_css never
   zeroes (it only zeroes the 1_3 button column) — zero it too so heading + button line up. */
.page-id-1599 .afortis-cta .fusion_builder_column_2_3,
.page-id-4629 .afortis-cta .fusion_builder_column_2_3 {
	--awb-spacing-left-large: 0% !important; --awb-spacing-right-large: 0% !important;
	--awb-spacing-left-medium: 0% !important; --awb-spacing-right-medium: 0% !important;
	--awb-spacing-left-small: 0% !important; --awb-spacing-right-small: 0% !important;
	padding-left: 0 !important;
}
@media (max-width: 1024px) {
	.page-id-1599 .afortis-cta .fusion-row, .page-id-4629 .afortis-cta .fusion-row,
	.page-id-1599 .afortis-form-section .fusion-row, .page-id-4629 .afortis-form-section .fusion-row {
		padding-left: 32px; padding-right: 32px; box-sizing: border-box;
	}
}
@media (max-width: 760px) {
	.page-id-1599 .afortis-cta .fusion-row, .page-id-4629 .afortis-cta .fusion-row,
	.page-id-1599 .afortis-form-section .fusion-row, .page-id-4629 .afortis-form-section .fusion-row {
		padding-left: 20px; padding-right: 20px;
	}
}