/* Extracted shared partial styles */

/* BCFC brand utility classes — used in Razor partials and templates */
.bg--brand {
    background-color: #113E35;
}

.bg--brand-light {
    background-color: #65C3A0;
}

.text--brand {
    color: var(--bcfc-dark-ink-green, #113E35);
}

/* Theme variants — used by hero/section partials to set text colour
   when the section background is dark (theme--dark) or light (theme--light).
   Without these the text inherits the body colour (dark) and is invisible
   on a dark hero background. */
.theme--dark {
    color: var(--bcfc-color-white);
}

.theme--dark a,
.theme--dark .bcfc-home__eyebrow,
.theme--dark .bcfc-home__highlight,
.theme--dark .bcfc-home__subtitle,
.theme--dark .bcfc-home-hero-slider__title {
    color: var(--bcfc-color-white);
}

.theme--light {
    color: var(--bcfc-text-dark);
}

/* Visually-hidden utility — hides content from sighted users but keeps it
   accessible to screen readers. Used by the home hero H1 (and any other
   accessibility-first heading). The class must be defined globally
   because the .visually-hidden definition that ships in index.css only
   loads when a popup is present. */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.timeline-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.timeline-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-poster-wrapper .play-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-poster-wrapper .play-button {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-poster-wrapper:hover .play-button {
    transform: scale(1.1);
    box-shadow: 0 20px 60px rgba(0, 74, 152, 0.4);
}

.video-lightbox {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-lightbox:not(.hidden) {
    opacity: 1;
}

.video-lightbox .video-lightbox-container iframe,
.video-lightbox .video-lightbox-container video {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.bcfc-faq-section {
    position: relative;
}

.bcfc-faq-section [data-faq-question] {
    position: relative;
}

.bcfc-faq-section [data-faq-question]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bcfc-color-primary);
}

.bcfc-faq-section [data-faq-answer] {
    will-change: max-height, opacity;
}

.faq-category-btn {
    transition: all 0.2s ease;
}

.faq-category-btn:hover {
    transform: translateY(-1px);
}

.faq-category-btn[aria-selected="true"] {
    transform: translateY(0);
}

.bcfc-faq-section [data-faq-item] {
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bcfc-faq-section [data-faq-item][style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

.bcfc-faq-section [data-faq-item][style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

.bcfc-stats-section .stat-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bcfc-stats-section .stat-item:hover {
    transform: translateY(-4px);
}

.bcfc-stats-section .stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.bcfc-stats-section .stat-progress-bar {
    transform-origin: left;
    width: 0%;
}

.bcfc-stats-section .stat-item.bg-bcfc-blue {
    box-shadow: 0 10px 40px rgba(0, 59, 114, 0.3);
}

.bcfc-stats-section .stat-item.bg-bcfc-blue:hover {
    box-shadow: 0 20px 60px rgba(0, 59, 114, 0.4);
}

@media (max-width: 768px) {
    .bcfc-stats-section .stat-value {
        font-size: 2.5rem !important;
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bcfc-stats-section .stat-value-wrapper {
    animation: countUp 0.6s ease-out forwards;
}

.bcfc-stats-section .stat-progress-bar {
    position: relative;
    overflow: hidden;
}

.bcfc-stats-section .stat-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* The header tokens (--bcfc-header-height, --bcfc-header-*, --bcfc-color-*) are defined in
   scss/_root.scss, which reaches first paint as bcfc-tokens.css at the head of this bundle (UW-328). */

/* Figma "Mega Menu / Web" (node 660-199): the nav is a floating white card */
.bcfc-header {
    position: fixed;
    top: var(--bcfc-masthead-height);
    inset-inline: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 0;
    height: var(--bcfc-header-height);
    padding: 0 16px;
    transition: transform 0.28s ease;
}

/* Sitewide: the navbar is always the square, edge-to-edge bar — it no
   longer morphs into a floating rounded pill on scroll (was previously
   gated to hero pages only via body.bcfc-hero-page:not(.bcfc-hero-scrolled);
   now applies everywhere, including non-hero pages like HtmlLanding). */
.bcfc-header {
    padding: 0;
}

/* Hidden while scrolling down; JS reveals it again on scroll up */
.bcfc-header--hidden {
    transform: translateY(-110%);
    pointer-events: none;
}

body {
    padding-top: var(--bcfc-total-header-height);
}

/* Hero pages reserve the header's height so the hero starts after the nav;
   once scrolled past the hero, the header floats over the following
   content the same way it does on every other page. The :not() here also
   raises specificity above body.bcfc-page-has-breadcrumb below, so hero
   pages that happen to also carry that class still get the reserved space. */
body.bcfc-hero-page:not(.bcfc-hero-scrolled) {
    padding-top: var(--bcfc-total-header-height);
}

body.bcfc-hero-page.bcfc-hero-scrolled {
    padding-top: 0;
}

body.bcfc-page-has-breadcrumb {
    padding-top: 0;
}

/* Hero pages use the same white card navbar as everywhere else (Figma 660-199) */

/* Fix: main element was intercepting pointer events on hero page, blocking header hover */
body.bcfc-hero-page:not(.bcfc-hero-scrolled) #bcfc-main {
    pointer-events: none;
}

body.bcfc-hero-page:not(.bcfc-hero-scrolled) #bcfc-main a,
body.bcfc-hero-page:not(.bcfc-hero-scrolled) #bcfc-main button,
body.bcfc-hero-page:not(.bcfc-hero-scrolled) #bcfc-main [tabindex="0"] {
    pointer-events: auto;
}

/* Ensure header nav items are always clickable/hoverable on hero page */
body.bcfc-hero-page:not(.bcfc-hero-scrolled) .bcfc-header__nav-item,
body.bcfc-hero-page:not(.bcfc-hero-scrolled) .bcfc-header__nav-item *,
body.bcfc-hero-page:not(.bcfc-hero-scrolled) .bcfc-header__nav-link,
body.bcfc-hero-page:not(.bcfc-hero-scrolled) .bcfc-header__mega {
    pointer-events: auto;
}

.bcfc-header__container {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    height: calc(100% - 8px);
    gap: 12px;
    background: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.6));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(15, 41, 66, 0.06);
}

/* Sitewide square, edge-to-edge state (see .bcfc-header override above) —
   no gutter, no rounding, no shadow, on every page. */
.bcfc-header__container {
    max-width: none;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

.bcfc-header__container > * {
    min-width: 0;
}

/* Logo size has ONE knob: --bcfc-logo-height. The width is deliberately not set — it follows
   the image's own intrinsic ratio.
   Why not a fixed width/height box: the two logos have different aspect ratios (conventional
   bcfc-logo-3 is 2000x530 = 3.774, Islamic bcfc-islamic-logo-01-c is 2000x490 = 4.082). With a
   fixed box plus object-fit:contain, whichever axis binds first caps the painted size and the
   other axis is just dead space — which is why raising the height alone used to do nothing
   below 1440px, and why the mobile logo painted 40px tall inside a 44px box.
   Ceiling: the header is 104px tall with 14px block padding, so ~76px is the practical maximum
   before --bcfc-header-height also has to grow. Mobile header is 72px, so ~56px there. */
.bcfc-header__logo {
    --bcfc-logo-height: 68px;
    flex-shrink: 0;
    height: var(--bcfc-logo-height);
    /* Reserves horizontal space before the image loads, so swapping to intrinsic width
       doesn't introduce layout shift in the header. */
    min-width: 150px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.bcfc-header__logo img {
    height: 100%;
    width: auto;
    /* Safety valve: keeps an unexpectedly wide logo from crowding the nav. */
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* DARK-MODE LOGO SWAP. BCFCNavigation renders the light wordmark (siteLogoLight) as a second
   img next to the dark one, only when the editor uploaded it. The header goes navy under
   :root[data-bcfc-theme="dark"], where the dark wordmark is invisible, so the pair swaps there.
   Container-qualified so (0,2,0) beats `.bcfc-header__logo img`'s display:block at (0,1,1). */
.bcfc-header__logo .bcfc-logo--on-dark,
.bcfc-header__mobile-logo .bcfc-logo--on-dark {
    display: none;
}

:root[data-bcfc-theme="dark"] .bcfc-header__logo .bcfc-logo--on-dark,
:root[data-bcfc-theme="dark"] .bcfc-header__mobile-logo .bcfc-logo--on-dark {
    display: block;
}

:root[data-bcfc-theme="dark"] .bcfc-header__logo .bcfc-logo--on-light,
:root[data-bcfc-theme="dark"] .bcfc-header__mobile-logo .bcfc-logo--on-light {
    display: none;
}

.bcfc-header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: 12px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.bcfc-header__nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

.bcfc-header__nav-item--mega {
    position: static;
}

.bcfc-header__nav-link {
    text-decoration: none;
    /* Was #545759 — a desaturated warm grey that read as murky dark green against the frosted
       navbar. #1f3b57 is the ink the MOBILE nav links already use (.bcfc-header__mobile-link), so
       both halves of the same navigation now agree instead of drifting two shades apart. */
    color: var(--bcfc-dark-ink, #1f3b57);
    font-family: 'Almarai', sans-serif;
    font-size: 0.96875rem;
    font-weight: 600;
    line-height: 1;
    height: 40px;
    min-width: auto;
    max-width: none;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    transition: color 0.24s ease, background-color 0.24s ease, transform 0.24s ease;
    white-space: nowrap;
}

.bcfc-header__nav-link:hover,
.bcfc-header__nav-link--active,
.bcfc-header__nav-item--open > .bcfc-header__nav-link {
    background: transparent;
    color: var(--bcfc-ink-link-hover, #005189);
}

/* Islamic section: nav links, search icon, and login button switch from blue
   to the Islamic dark green (--bcfc-color-secondary) instead of the primary
   brand blue. The islamic-toggle button is intentionally excluded — it's
   already blue-on-Islamic-pages by design (see comment above
   .bcfc-header__islamic-toggle--active). */
body.is-islamic .bcfc-header__nav-link:hover,
body.is-islamic .bcfc-header__nav-link--active,
body.is-islamic .bcfc-header__nav-item--open > .bcfc-header__nav-link {
    background: transparent;
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
}

body.is-islamic {
    --bcfc-header-action-blue: var(--bcfc-color-secondary);
    /* The CTA is Sahel green sitewide; on Islamic pages it follows the Islamic
       green like the rest of the actions row, rather than sitting a shade off it. */
    --bcfc-header-cta-bg: var(--bcfc-color-secondary);
}

/* Mega/dropdown menu titles and link-hover states also default to blue
   (--bcfc-color-primary or hardcoded #005189) — switch them to Islamic
   dark green too. --bcfc-color-primary itself is left untouched since it's
   used sitewide well beyond the nav (footer, buttons, cards, etc.). */
body.is-islamic .bcfc-header__mega-panel .mega-dropdown__group-title,
body.is-islamic .bcfc-header__mega-panel .mega-dropdown__promo-title {
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
}

body.is-islamic .bcfc-header__mega-panel .mega-dropdown__link:hover {
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
    border-left-color: var(--bcfc-color-secondary);
}

/* Floating quick-links FAB, the quick-links strip above the footer, and the
   scroll-to-top button all default to --bcfc-color-primary (blue) — switch
   them to Islamic dark green too. #113e35 (the same dark green already used
   for the Islamic breadcrumb banner) stands in for the missing/undefined
   --bcfc-primary-dark/--bcfc-primary-darker hover shades. */
body.is-islamic .bcfc-quick-links__item,
body.is-islamic .bcfc-quick-links-strip__link {
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
}

body.is-islamic .bcfc-quick-links__toggle,
body.is-islamic .bcfc-scroll-to-top {
    background: var(--bcfc-color-secondary);
}

body.is-islamic .bcfc-quick-links__toggle:hover,
body.is-islamic .bcfc-scroll-to-top:hover {
    background: #113e35;
}

.bcfc-header__nav-link--has-children {
    padding-inline-end: 12px;
}

/* Sahel pill button */
.bcfc-header__nav-link--sahel {
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 600;
    font-family: 'Almarai', system-ui, sans-serif;
    border: 1.5px solid #00529B;
    color: var(--bcfc-ink-link, #00529B);
    transition: all 0.2s ease;
}

.bcfc-header__nav-link--sahel:hover {
    background: #00529B;
    color: #fff;
}

.bcfc-header__nav-link--sahel.is-active,
.bcfc-header__nav-link--sahel[aria-expanded="true"] {
    background: #00529B;
    color: #fff;
}

/* .bcfc-header__nav-arrow (the flipping disclosure chevron beside each top-level nav item) is
   gone — Navigation/_DesktopNavigationItem.cshtml no longer emits the <svg>, so the rules that
   styled and rotated it are removed with it rather than left behind matching nothing.
   The single-column .bcfc-header__dropdown component (and its arrow) is gone the same way:
   every item with children now opens through the mega panel instead — see
   .bcfc-header__mega-panel--fluid for the compact case that replaced it. */

/* Shared mega container — full viewport width, fixed below header */
.bcfc-header__mega {
    position: fixed;
    top: var(--bcfc-header-height);
    inset-inline: 0;
    z-index: 1100;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

/* Prevent the HTML [hidden] attribute from collapsing the container so the
   opacity/visibility transitions can animate on both open and close */
.bcfc-header__mega[hidden] {
    display: block !important;
}

.bcfc-header__mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.bcfc-header__mega-panel {
    display: none;
    width: fit-content;
    /* Compact menus (e.g. a single 3-link column) shrink to their content, but
       never below this floor — otherwise the panel reads as disconnected from
       the nav tab above it.
       This was 64rem (1024px), which is not a floor so much as a fixed width:
       almost no menu here has enough columns to reach it, so 1- and 2-column
       menus ("Corporate Finance", "BCFC Group") rendered a narrow link list
       followed by several hundred px of empty glass. The floor's only real job
       is to stop a 2-link panel reading as detached from the tab above it, and
       280px does that — every group is `min-width: max-content`, so genuine
       multi-column menus size themselves past this anyway. */
    min-width: 280px;
    max-width: min(1800px, calc(100vw - 24px));
    margin: 0 auto;
    /* 14px gap between the navbar card and the panel (Figma 700-199) */
    padding: 14px 12px 32px;
    background: transparent !important;
}

.bcfc-header__mega-panel.is-active {
    display: block;
    background: transparent !important;
}

/* A simple children-only item (no groups, no promo — what used to be the single-column
   dropdown) has no reason to sit in a 1024px-wide box. Floor stays just high enough that
   a 1-2 link menu still reads as connected to the nav tab above it. */
.bcfc-header__mega-panel--fluid {
    min-width: 280px;
}

/* Same reasoning for a menu that has groups but only renders ONE column: a lone
   group with no promo beside it has nothing to line up against, so the 64rem floor
   just padded empty glass out to the right of a single link list. Matched in CSS
   rather than with another Razor flag so it stays true to what actually rendered —
   :only-child is false as soon as a promo or a 2nd group appears, and the
   :not(:has(--links-row)) guard keeps the floor for a group whose links split into
   two sub-columns (>7 links), which is two columns wide. */
.bcfc-header__mega-panel:has(.mega-dropdown__panel > .mega-dropdown__group:only-child:not(:has(.mega-dropdown__links-row))) {
    min-width: 0;
}

/* Pill mega dropdown content (shared mega version) */
.bcfc-header__mega-panel .mega-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent !important;
}

.bcfc-header__mega-panel .mega-dropdown__backdrop {
    display: none;
}

.bcfc-header__mega-panel .mega-dropdown__panel {
    max-width: min(1800px, calc(100vw - 24px));
    margin: 0 auto;
    padding: 22px 32px 24px;
    /* Height cap so the panel drops DOWN to a bounded card and scrolls inside, instead of
       growing with every group an editor adds (the groups Block List has no max). Two
       hardenings over the original `calc(100vh - var(--bcfc-header-height) - 40px)`:
         * a fallback in the var(). If --bcfc-header-height ever stops resolving in this
           scope the whole calc() becomes invalid, and an invalid max-height means NO cap
           at all — the failure mode is silent and looks like the cap was never written.
         * dvh, declared after the vh line so engines that lack it keep the vh value. On
           mobile Safari 100vh is the URL-bar-less height, so a vh-only cap lets the panel
           run under the browser chrome. */
    max-height: calc(100vh - var(--bcfc-header-height, 88px) - 40px);
    max-height: calc(100dvh - var(--bcfc-header-height, 88px) - 40px);
    overflow-y: auto;
    /* Keep a wheel/trackpad gesture inside the panel — without this, hitting the end of the
       list scroll-chains to the page behind and slides the whole site under an open menu. */
    overscroll-behavior: contain;
    /* Reserve the scrollbar track so gaining/losing it doesn't reflow the columns. */
    scrollbar-gutter: stable;
    /* Frosted glass. The bleed-through this panel used to have (the insurance hero's
       "Life happens." headline reading straight through the link columns) is a BLUR RADIUS
       problem, not an opacity one: blur(24px) only softens 100px display type, it doesn't
       dissolve it. Raising the alpha to 0.92 hid it, but that also flattened the panel into a
       plain white card — no glass left. blur(64px) dissolves headlines and photography into a
       wash at any scroll position, which buys back real translucency at 0.68.
       brightness(1.08) lifts dark backdrops (the navy hero) so the #1f2a33 links keep ~6.5:1
       contrast even over black; saturate(160%) restores the tint the material is supposed to
       pick up from the page. */
    background-color: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.68));
    backdrop-filter: blur(64px) saturate(160%) brightness(1.08);
    -webkit-backdrop-filter: blur(64px) saturate(160%) brightness(1.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(15, 41, 66, 0.05), 0 24px 60px -20px rgba(15, 41, 66, 0.24);
    display: flex;
    /* Wrap is what actually bounds the WIDTH. Each group is `flex: 1 1 max-content` with
       `min-width: max-content`, so it refuses to shrink below its longest label; in a
       single nowrap row, N groups therefore summed past max-width and the panel scrolled
       sideways — that is the "gets increasingly large" behaviour, and it was horizontal,
       not vertical (the height cap above has always been here).
       With wrap, group 5+ starts a new row inside the capped height and the panel scrolls
       vertically like a normal drop-down. Menus that already fit on one row are unchanged:
       wrapping only engages once the row genuinely overflows. */
    flex-wrap: wrap;
    /* row-gap / column-gap. The column gap is what separates one group from the
       next; 20px on top of the group titles' own left padding read as a wide
       trough between columns, so it comes down to 12px. Row gap stays larger
       because it separates whole wrapped rows of groups, not neighbours. */
    gap: 18px 12px;
    align-items: flex-start;
    border-radius: 18px;
}

/* No backdrop-filter (very old Firefox/Edge, or a GPU-blocklisted machine) means the 0.68 tint
   is all there is, and the page would read straight through the links. Fall back to an opaque
   card for those clients only — every engine that can blur keeps the glass above. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bcfc-header__mega-panel .mega-dropdown__panel {
        background-color: var(--bcfc-surface-raised, #fff);
    }
}

.bcfc-header__mega-panel .mega-dropdown__group {
    padding: 0;
    /* min-width: max-content (not 0) so the column never shrinks narrower
       than its longest single-line label — that's what was forcing labels
       like "Complaints and Suggestions" onto two lines. */
    flex: 1 1 max-content;
    min-width: max-content;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0;
}

/* Groups whose links wrap into 2 sub-columns (e.g. IMTIAZ) need ~double the
   width so their labels don't overflow into the neighbouring column. */
.bcfc-header__mega-panel .mega-dropdown__group:has(.mega-dropdown__links-row) {
    flex-grow: 2.1;
}

.bcfc-header__mega-panel .mega-dropdown__group-title {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bcfc-ink-strong, #005189);
    margin-bottom: 6px;
    padding: 0 0 8px 10px;
    border-bottom: 1px solid rgba(15, 41, 66, 0.08);
}

.bcfc-header__mega-panel .mega-dropdown__links {
    display: flex;
    flex-direction: column;
    /* The vertical rhythm between links is BOTH this gap and .mega-dropdown__link's own
       vertical padding (below), so the two move together — changing one alone barely reads.
       Opened back up on request (Bahaa, 2026-08-18): the pair had been cut to gap 0 + 3px of
       padding, a ~24px pitch on a 17.5px line, which left the labels touching each other's
       hover area and reading as one block of text rather than a list. Now 4px + 6px, a ~34px
       pitch. The panel is height-capped and scrolls (see --panel above), so a longer menu costs
       scroll, never overflow. */
    gap: 4px;
    min-width: max-content;
}

.bcfc-header__mega-panel .mega-dropdown__links-row {
    display: flex;
    gap: 10px;
    min-width: max-content;
}

.bcfc-header__mega-panel .mega-dropdown__links-row .mega-dropdown__links {
    flex: 1 1 max-content;
}

/* Plain children with no group title (e.g. Islamic "Financing") — same link styling as a
   grouped column, just without the .mega-dropdown__group title/border-bottom above it. */
.bcfc-header__mega-panel .mega-dropdown__links-cols {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.bcfc-header__mega-panel .mega-dropdown__links-col {
    display: flex;
    flex-direction: column;
    /* Same value as .mega-dropdown__links above, deliberately: these are the same links in the
       same panel, just without a group title over them, and a menu that changed its rhythm
       depending on whether the editor had titled the group would read as a bug. */
    gap: 4px;
    min-width: max-content;
}

.bcfc-header__mega-panel .mega-dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    /* Vertical 6px, not 3px — half of the row rhythm; see the note on .mega-dropdown__links.
       The 10px start inset is unrelated: it clears the 3px hover border-left below so the label
       does not shift when the indicator appears. */
    padding: 6px 8px 6px 10px;
    /* Square corners so the hover indicator renders as a straight vertical line,
       not a rounded "[" bracket */
    border-radius: 0;
    font-size: 0.90625rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--bcfc-ink-link, #1f2a33);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    border-left: 3px solid transparent;
    margin-bottom: 0;
    white-space: nowrap;
}

.bcfc-header__mega-panel .mega-dropdown__link:hover {
    background: transparent;
    /* Hover changes the text colour to blue only — no link slide, no red
       left-border indicator, and no arrow motion (see below). */
    color: var(--bcfc-dark-ink-brand, #005189);
}

/* .mega-dropdown__link-arrow is gone for real now. It had been hidden with display:none while
   Navigation/_MegaMenuPill.cshtml still emitted the <svg> — 60 invisible chevrons in the markup
   of every page. The partial no longer emits them, so the rule that hid them goes too. */

.bcfc-header__mega-panel .mega-dropdown__promo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    padding: 14px;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    background: transparent !important;
    border: 1px solid rgba(15, 41, 66, 0.12);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bcfc-header__mega-panel .mega-dropdown__promo:hover {
    background: transparent !important;
    border-color: rgba(15, 41, 66, 0.22);
}

.bcfc-header__mega-panel .mega-dropdown__promo-media {
    position: relative;
    width: 100%;
    height: 164px;
    overflow: hidden;
    border-radius: 10px;
}

.bcfc-header__mega-panel .mega-dropdown__promo-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 12px;
}

.bcfc-header__mega-panel .mega-dropdown__promo:hover .mega-dropdown__promo-media img {
    transform: scale(1.04);
}

.bcfc-header__mega-panel .mega-dropdown__promo-body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.bcfc-header__mega-panel .mega-dropdown__promo-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.32px;
    color: var(--bcfc-dark-ink, var(--bcfc-navy, #071b33));
}

.bcfc-header__mega-panel .mega-dropdown__promo-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--bcfc-ink-strong, #005189);
    line-height: 1.25;
}

.bcfc-header__mega-panel .mega-dropdown__promo-desc {
    font-size: 0.8825rem;
    color: var(--bcfc-ink-muted, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* Promo CTA look = .bcfc-btn--primary --sm (markup). Only the Islamic re-tint stays here. */
body.is-islamic .bcfc-header__mega-panel .mega-dropdown__promo-cta,
.bcfc-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bcfc-header__islamic-toggle {
    width: auto;
    height: 48px;
    border: 0;
    background: var(--bcfc-color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
}

.bcfc-header__islamic-toggle:hover {
    background: transparent;
    border: 1.5px solid var(--bcfc-color-secondary);
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
}

/* The Islamic icon paths stroke/fill with currentColor, so they follow the `color`
   set on the toggle above and on each state below — no per-state recolor needed.
   There were four rules here matching path[fill="white"] / path[stroke="white"],
   which silently stopped applying the moment anyone edited a literal colour out of
   the inline SVG. */

/* On Islamic pages the toggle switches back to Conventional — it should read
   as the primary (blue) brand action, not the Islamic (green) one. */
.bcfc-header__islamic-toggle--active {
    background: #005189;
}

.bcfc-header__islamic-toggle--active:hover {
    background: transparent;
    border: 1.5px solid #005189;
    color: var(--bcfc-ink-link-hover, #005189);
}

.bcfc-header__islamic-toggle svg,
.bcfc-header__islamic-toggle .bcfc-islamic-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.bcfc-header__islamic-toggle .bcfc-islamic-icon svg {
    width: 100%;
    height: 100%;
}

.bcfc-header__islamic-toggle .bcfc-islamic-icon__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
    /* The BCFC mark is full-color (red/blue) — force it to a flat white
       silhouette so it reads as an icon, matching the Islamic icon's white
       strokes, instead of clashing with the dark green toggle background. */
    filter: brightness(0) invert(1);
}

/* Hover drops the toggle to a transparent background (white card behind it),
   so the logo needs to flip dark to stay visible — mirrors the stroke/fill
   recolor rules above for the inline SVG icon. */
.bcfc-header__islamic-toggle:hover .bcfc-islamic-icon__logo {
    filter: brightness(0);
}

.bcfc-header__islamic-toggle .bcfc-islamic-text {
    font-family: 'Almarai', sans-serif;
    font-size: 0.84375rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    white-space: nowrap;
}

.bcfc-header__lang-wrapper {
    position: relative;
}

.bcfc-header__arabic-btn {
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    color: var(--bcfc-ink-link, var(--bcfc-header-action-blue));
    /* IDENTICAL TREATMENT TO .bcfc-header__search-btn — flat transparent fill, the same
       1.5px #dfe4e9 hairline, no shadow. The two controls sit side by side in
       .bcfc-header__actions, so they read as one set; a filled-and-shadowed chip next to an
       outlined square looked like two different components.

       This replaces a four-layer "glass" recipe (a 180deg white->#d9e4ef gradient, a
       translucent border, an inset top highlight and a drop shadow). That recipe existed
       because a real backdrop-filter cannot work here: the chip is a descendant of
       .bcfc-header__container, which carries its own backdrop-filter and therefore
       establishes a BACKDROP ROOT, so the chip could only ever sample the container's flat
       rgba(255,255,255,.6) fill — blurring a uniform colour is a no-op. That constraint is
       still true and is why nothing here asks for a blur; the answer is now simply not to
       fill the chip at all. Keep the two blocks in step: restyling one and not the other is
       what this change undid. */
    background: transparent;
    border: 1.5px solid #dfe4e9;
    border-radius: var(--bcfc-header-control-radius);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}

/* THE GLOBE IS DESKTOP-HIDDEN, THE LABEL IS PHONE-HIDDEN — the swap itself is in the 768px tier
   below. Both live in the markup at all widths so nothing depends on JS or on a second element
   being injected; only which one is painted changes. Above 768px the chip is the CMS language
   name exactly as before, so this is not a visual change on desktop. */
.bcfc-header__lang-icon {
    display: none;
    flex: none;
}

/* The @supports fallback that used to live here is gone on purpose. It swapped in an opaque
   white chip for clients with no backdrop-filter, because the .42 tint alone was not enough
   cover for the label — but the chip no longer asks for a blur at all, so every browser gets
   the same treatment. Keeping the fallback would have made GPU-blocklisted machines the only
   ones still seeing a filled white box. */

/* Hover matches .bcfc-header__search-btn:hover exactly — the fill stays transparent and only
   the hairline and the ink darken. It used to be a solid #005189 fill with white text, which
   was correct while the chip had a fill of its own to cover, but against the search button's
   border-only hover it made the pair diverge on interaction as well as at rest.
   No fill change means no fill/text contrast pairing to keep in step here. */
.bcfc-header__arabic-btn:hover {
    background: transparent;
    border-color: rgba(15, 41, 66, 0.25);
    color: var(--bcfc-ink-link-hover, var(--bcfc-header-action-blue));
}

.bcfc-header__lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: var(--bcfc-lang-control-width);
    background: var(--bcfc-surface-raised, var(--bcfc-color-white));
    border: 1px solid var(--bcfc-color-border);
    border-radius: var(--bcfc-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
}

.bcfc-header__lang-menu.bcfc-header__lang-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bcfc-header__lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--bcfc-ink, var(--bcfc-color-primary));
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    transition: background 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.bcfc-header__lang-option:hover,
.bcfc-header__lang-option--active {
    background: var(--bcfc-surface-sunken, #f4f8fc);
}

.bcfc-header__search-btn {
    /* 48px, in step with the 104px header — the action row is one visual set with the language
       chip and the Islamic toggle, so all three grew together rather than leaving a 44px square
       looking undersized next to the taller logo. */
    width: 48px;
    height: 48px;
    border: 1.5px solid #dfe4e9;
    background: transparent;
    color: var(--bcfc-ink-link, var(--bcfc-header-action-blue));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bcfc-header-control-radius);
    transition: all 0.3s ease;
    text-decoration: none;
}

.bcfc-header__search-btn:hover {
    background: transparent;
    border-color: rgba(15, 41, 66, 0.25);
    color: var(--bcfc-ink-link-hover, var(--bcfc-header-action-blue));
}

.bcfc-header__search-btn svg {
    width: 27px;
    height: 27px;
}

/* Inline Search Bar — always visible, below header bar */
.bcfc-header__search-bar {
    background: var(--bcfc-surface-raised, var(--bcfc-color-white));
    border-bottom: 1px solid var(--bcfc-color-primary);
}

.bcfc-header__search-form {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 680px;
    margin: 0 auto;
}

.bcfc-header__search-input {
    flex: 1;
    height: 52px;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    color: var(--bcfc-text-dark);
    background: transparent;
    outline: none;
    box-shadow: none;
}

.bcfc-header__search-input::placeholder {
    color: var(--bcfc-text-light);
    opacity: 0.7;
}

.bcfc-header__search-input:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bcfc-color-primary);
}

.bcfc-header__search-submit {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--bcfc-ink-muted, var(--bcfc-color-primary));
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.bcfc-header__search-submit:hover {
    color: var(--bcfc-color-primary-dark);
}

.bcfc-header__login-btn {
    min-width: 82px;
    height: 44px;
    /* Tightened from 22px (2026-08-23). Note this alone moves NOTHING: the pill is a fixed
       width with justify-content:center, and the content is narrower than the content box,
       so centring — not padding — is what sets the visible side gap. What this does buy is
       headroom for the label, whose reveal is capped at calc(100% - 26px) of the CONTENT
       box; at the narrow-desktop size that cap had only ~3px of slack over the rendered
       label. The visible gap comes down via --bcfc-header-cta-w below. */
    padding: 0 12px;
    background: var(--bcfc-header-cta-bg);
    color: var(--bcfc-color-white);
    border: 1.5px solid transparent;
    /* Matches --bcfc-header-control-radius (search button, language chip) so the three
       header controls read as one set. bcfc-button.css's generic [class*="btn"] rule
       excludes login-btn/search-btn/arabic-btn by name, so this value is not fought by
       that !important pill rule (measured 2026-09-27 — it was, before that exclusion). */
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gap, not a margin on the mark: logical spacing flips with dir="rtl" on the header
       for free, and the Sahel mark stays leading in both directions. */
    gap: 8px;
    text-decoration: none;
}

/* Fill AND text recolour together — never a green fill left under green text.
   The mark is currentColor, so it inverts with the label. */
.bcfc-header__login-btn:hover {
    background: transparent;
    border-color: var(--bcfc-header-cta-bg);
    color: var(--bcfc-header-cta-bg);
}

/* Square box so the four-lobe monogram is not squashed; flex:none stops it
   shrinking when the button hits its min-width at narrow desktop widths. */
.bcfc-header__login-mark {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ==========================================================================
   THE ANIMATED SAHEL LOGIN BUTTON
   Marketing's sahel-login-button.html (2026-08-23), ported onto the existing
   component. Four parts: a hover shine sweep, a slowly rotating monogram, a
   label that collapses and re-reveals on a cycle, and a per-character arrival.

   WIDTH IS FIXED, and that is the design's own decision, kept deliberately:
   the label collapses to zero, so an auto-width button would resize the whole
   header actions row every 7 seconds and shove the language switcher and
   hamburger sideways. The design used a flat 230px; here it is a token so the
   two existing narrow-desktop breakpoints can shrink it, and the label's
   max-width is derived from it with calc(100% - 26px) — 18px mark + 8px gap —
   rather than a second hardcoded number that could drift out of step.

   The RTL half is not in the design file (it had no Arabic): the shine sweeps
   from the inline start, so its translate has to invert, and the Arabic label
   is longer than the English one so the pill needs more room.
   ========================================================================== */
.bcfc-header__login-btn {
    /* Overridden per breakpoint below. 178px -> 158px (2026-08-23) to cut the dead space either
       side of the label; at 15px the content measures ~121px, so 158 - 24px padding = 134px of
       content box keeps 13px of slack. Do not go below ~150px without re-measuring: the label
       clips silently, because .bcfc-header__login-label is overflow:hidden. */
    width: var(--bcfc-header-cta-w, 158px);
    /* Both required by the shine: it is absolutely positioned against the
       button and must be clipped to the rounded rectangle. */
    position: relative;
    overflow: hidden;
}

[dir="rtl"] .bcfc-header__login-btn { --bcfc-header-cta-w: 208px; }

.bcfc-header__login-btn:active { transform: scale(.97); }
.bcfc-header__login-btn:hover { transform: translateY(-2px); }

/* :focus-visible, not :focus — a mouse click must not leave a ring. The mint is
   the Sahel accent from the design file; offset so it clears the rounded edge. */
.bcfc-header__login-btn:focus-visible {
    outline: 3px solid var(--bcfc-green-light, #a9dbc8);
    outline-offset: 3px;
}

/* THE SHINE. Parked outside the inline-start edge and swept across on hover
   only. The return trip is deliberately instant and delayed (`transition:
   transform 0s linear .2s`) so the highlight does not slide backwards when the
   pointer leaves — the design's own trick, kept exactly. */
.bcfc-header__login-shine {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 55%;
    background: linear-gradient(100deg,
        rgb(255 255 255 / 0) 0%,
        rgb(255 255 255 / .2) 48%,
        rgb(255 255 255 / 0) 100%);
    transform: translateX(-120%) skewX(-14deg);
    transition: transform 0s linear .2s;
    pointer-events: none;
}
.bcfc-header__login-btn:hover .bcfc-header__login-shine {
    transform: translateX(240%) skewX(-14deg);
    transition: transform 1.05s cubic-bezier(.3, 0, .2, 1);
}
/* Mirrored: inline-start is the right edge, so the sweep runs the other way. */
[dir="rtl"] .bcfc-header__login-shine { transform: translateX(120%) skewX(14deg); }
[dir="rtl"] .bcfc-header__login-btn:hover .bcfc-header__login-shine { transform: translateX(-240%) skewX(14deg); }

/* Above the shine. Absolutely-positioned boxes paint over static siblings, so
   without these the highlight would wash over the mark and the label. */
.bcfc-header__login-mark,
.bcfc-header__login-label { position: relative; }

/* 16s for a full turn — slow enough to read as "alive" rather than as a
   spinner. transform-box: fill-box makes the origin the glyph's own bounding
   box; without it an SVG rotates about the viewport origin and swings offscreen. */
.bcfc-header__login-mark {
    animation: bcfc-sahel-spin 16s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes bcfc-sahel-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* THE COLLAPSE. max-width, not width: it animates from 0 without the label
   having to know its own measured size, and the content is never re-wrapped. */
.bcfc-header__login-label {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    transition: max-width .82s cubic-bezier(.22, 1, .36, 1) .12s;
}
.bcfc-header__login-btn.is-open .bcfc-header__login-label {
    /* 26px = the 18px mark + the 8px flex gap, the only other things inside the
       button's content box. */
    max-width: calc(100% - 26px);
    transition-delay: 0s;
}

.bcfc-header__login-text {
    display: flex;
    padding-inline-start: 8px;
    /* pre so the generated U+00A0 between words cannot collapse. */
    white-space: pre;
}

/* PER-CHARACTER ARRIVAL. --i staggers the reveal left-to-right; --r staggers
   the retreat from the far end, so the label unwinds the way it arrived
   instead of vanishing all at once. Arabic renders as ONE span (see
   BCFCNavigation.cshtml) and simply uses --i:0, so it fades as a unit. */
.bcfc-header__login-text span {
    display: inline-block;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(7px) scale(.94);
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1),
                filter .5s cubic-bezier(.22, 1, .36, 1),
                transform .62s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--r, 0) * 22ms);
}
.bcfc-header__login-btn.is-open .bcfc-header__login-text span {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: calc(90ms + var(--i, 0) * 34ms);
}

/* Reduced motion: the button keeps its label permanently and loses every
   moving part. The .is-open cycle still toggles the class — harmless, because
   the label's max-width no longer depends on it. */
@media (prefers-reduced-motion: reduce) {
    .bcfc-header__login-btn:hover,
    .bcfc-header__login-btn:active { transform: none; }
    .bcfc-header__login-mark { animation: none; }
    .bcfc-header__login-label {
        max-width: none;
        transition: none;
    }
    .bcfc-header__login-text span {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
    .bcfc-header__login-btn:hover .bcfc-header__login-shine {
        transition: none;
        transform: translateX(-120%) skewX(-14deg);
    }
}

.bcfc-header__dropdown-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    /* The hamburger SVG strokes with currentColor — it used to carry a literal
       stroke="#004A98" in the markup, which is this token. */
    color: var(--bcfc-dark-ink-brand, var(--bcfc-color-primary));
    /* Hidden wherever the full horizontal nav is shown; revealed at the same
       breakpoint the nav collapses (<=899.98px since 2026-08-23, was <=1240px)
       so exactly one of the two is ever visible. */
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.bcfc-header__dropdown-btn:hover {
    background: var(--bcfc-surface-sunken, #f4f4f4);
    border-radius: 4px;
}

.bcfc-header__dropdown-btn svg {
    width: 20px;
    height: 20px;
}

.bcfc-header__mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, calc(100vw - 20px));
    height: 100dvh;
    background: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: -18px 0 40px rgba(7, 27, 51, 0.14);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: var(--bcfc-z-dropdown);
    display: block;
    overflow: hidden;
}

.bcfc-header__mobile-menu.bcfc-header__mobile-menu--open {
    transform: translateX(0);
}

.bcfc-header__mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--bcfc-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bcfc-header__mobile-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bcfc-header__mobile-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bcfc-header__mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--bcfc-color-border);
}

/* Same single-knob treatment as the header logo — the old 180x46 fixed box letterboxed the
   logo for the same reason (two logos, two different aspect ratios). */
.bcfc-header__mobile-logo {
    --bcfc-logo-height: 52px;
    display: inline-flex;
    align-items: center;
    height: var(--bcfc-logo-height);
    min-width: 140px;
    text-decoration: none;
}

.bcfc-header__mobile-logo img {
    height: 100%;
    width: auto;
    max-width: 230px;
    object-fit: contain;
    display: block;
}

.bcfc-header__mobile-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--bcfc-color-border);
    border-radius: 8px;
    background: var(--bcfc-surface-raised, #fff);
    color: var(--bcfc-ink, #1f3b57);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bcfc-header__mobile-close:hover {
    background: var(--bcfc-surface-sunken, #f4f8fc);
    border-color: #c8d9eb;
    color: var(--bcfc-dark-ink-brand, var(--bcfc-color-primary));
}

.bcfc-header__mobile-nav {
    padding: 8px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
}

.bcfc-header__mobile-link {
    padding: 14px 0;
    text-decoration: none;
    color: var(--bcfc-ink-link, #1f3b57);
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0;
    transition: color 0.2s ease;
}

.bcfc-header__mobile-link:hover,
.bcfc-header__mobile-link--active {
    background: transparent;
    color: var(--bcfc-ink-link-hover, var(--bcfc-color-primary));
}

.bcfc-header__mobile-link--child {
    padding: 7px 0;
    padding-left: 0;
    font-size: 0.9375rem;
    color: var(--bcfc-ink-link, #5f7b99);
    font-weight: 600;
}

.bcfc-header__mobile-group-title {
    padding: 10px 0 2px;
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
    font-family: 'Almarai', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* A group title that links to its overview page (see _MobileNavigationChildren). Keeps the divider look. */
a.bcfc-header__mobile-group-title--link {
    display: block;
    text-decoration: none;
}
a.bcfc-header__mobile-group-title--link:hover,
a.bcfc-header__mobile-group-title--link:focus-visible {
    text-decoration: underline;
}

.bcfc-header__mobile-group-title:first-child {
    padding-top: 2px;
}

/* Mobile Menu Accordion */
.bcfc-header__mobile-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #e8eef5;
}

.bcfc-header__mobile-item > .bcfc-header__mobile-link {
    flex: 1;
    min-width: 0;
}

.bcfc-header__mobile-item .bcfc-header__mobile-link {
    flex: 1;
    min-width: 0;
    cursor: default;
}

.bcfc-header__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--bcfc-ink, #58728e);
    transition: background 0.2s ease;
}

.bcfc-header__mobile-toggle:hover {
    background: var(--bcfc-surface-sunken, #f4f8fc);
}

.bcfc-header__mobile-chevron {
    transition: transform 0.3s ease;
}

.bcfc-header__mobile-toggle[aria-expanded="true"] .bcfc-header__mobile-chevron {
    transform: rotate(180deg);
}

.bcfc-header__mobile-link-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.bcfc-header__mobile-link-wrapper > .bcfc-header__mobile-link {
    flex: 1;
    min-width: 0;
    cursor: default;
}

.bcfc-header__mobile-children {
    width: 100%;
    display: none;
    flex-direction: column;
    padding: 2px 0 12px 14px;
    margin: 0 0 2px 2px;
    border-left: 2px solid #e8eef5;
}

.bcfc-header__mobile-item.expanded > .bcfc-header__mobile-children {
    display: flex;
}

/* Mobile submenu promo card — mirrors the desktop mega-menu promo
   (.bcfc-header__mega-panel .mega-dropdown__promo) so the burger menu shows the
   same image + CTA button, not just links. */
.bcfc-header__mobile-promo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 6px;
    padding: 12px;
    border-radius: 14px;
    background: var(--bcfc-surface-raised, var(--bcfc-gray-50, #f7f9fb));
    border: 1px solid #e8eef5;
    text-decoration: none;
    transition: background 0.2s ease;
}

.bcfc-header__mobile-promo-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}

.bcfc-header__mobile-promo-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.bcfc-header__mobile-promo-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bcfc-header__mobile-promo-kicker {
    font-family: 'Almarai', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.32px;
    color: var(--bcfc-dark-ink, var(--bcfc-navy, #071b33));
}

.bcfc-header__mobile-promo-title {
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bcfc-ink-strong, #005189);
    line-height: 1.25;
    text-transform: capitalize;
}

.bcfc-header__mobile-promo-desc {
    margin: 0;
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bcfc-ink-muted, var(--bcfc-gray-500, #64748b));
}

body.is-islamic .bcfc-header__mobile-promo-cta {
    background: var(--bcfc-color-secondary);
}

.bcfc-header__mobile-footer {
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--bcfc-color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bcfc-header__mobile-action {
    padding: 12px 16px;
    text-decoration: none;
    color: var(--bcfc-ink, var(--bcfc-color-primary));
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    border: 1px solid var(--bcfc-color-border);
    border-radius: var(--bcfc-radius-md);
    text-align: center;
    transition: all 0.2s ease;
}

.bcfc-header__mobile-action:hover {
    border-color: var(--bcfc-color-primary);
    background: var(--bcfc-surface-sunken, #f4f8fc);
}

.bcfc-header__mobile-lang {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.bcfc-header__mobile-lang-link {
    width: var(--bcfc-lang-control-width);
    /* 44px, not 36: this is a standalone control in the mobile menu, so WCAG 2.5.8's minimum
       applies. Measured 116x37 at 390px before this. */
    min-height: 44px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    border-radius: 20px;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.bcfc-header__mobile-lang-link:hover,
.bcfc-header__mobile-lang-link--active {
    background: var(--bcfc-surface-sunken, #f4f8fc);
}

@media (max-width: 1500px) {
    .bcfc-header__container {
        padding-inline: 20px;
        gap: 12px;
    }

    /* Ladder is monotonic on purpose: 68 → 66 → 64 → 52. The old values went
       183 → 210 → 188, i.e. the logo grew as the viewport narrowed. */
    .bcfc-header__logo {
        --bcfc-logo-height: 66px;
    }

    .bcfc-header__nav-link {
        padding: 0 11px;
        font-size: 0.875rem;
    }

    .bcfc-header__actions {
        gap: 8px;
    }
}

@media (max-width: 1440px) {
    .bcfc-header__container {
        padding-inline: 16px;
        gap: 10px;
    }

    .bcfc-header__logo {
        --bcfc-logo-height: 64px;
    }

    .bcfc-header__nav {
        margin-inline: 8px;
        gap: 0;
    }

    .bcfc-header__nav-link {
        height: 40px;
        padding: 0 9px;
        font-size: 0.8125rem;
        gap: 4px;
    }

    .bcfc-header__actions {
        gap: 6px;
    }

    .bcfc-header__login-btn {
        min-width: 74px;
        font-size: 0.875rem;
        /* The label's max-width is calc(100% - 26px) off this, so shrinking the
           pill shrinks the reveal with it — one number, not two.
           156px -> 138px (2026-08-23): at 13px the content measures 109px (22px mark + 8px
           gap + 79px label), so 138 - 24px padding = 114px of content box, 5px of slack. */
        --bcfc-header-cta-w: 138px;
    }

    /* Restated for RTL: the [dir="rtl"] rule that bumps this token to 208px is
       (0,2,0) and a media query adds NO specificity, so the single-class rule
       above cannot override it and Arabic would keep the wide pill here. */
    [dir="rtl"] .bcfc-header__login-btn { --bcfc-header-cta-w: 182px; }
}

/* ==========================================================================
   NARROW-DESKTOP / TABLET LADDER (rewritten 2026-08-23, Bahaa)

   The horizontal nav used to collapse to the burger at <=1240px, which put a
   hamburger on every landscape tablet and on most laptops — and it HID the
   Sahel login pill entirely, so the primary CTA simply vanished below that
   width. Both are fixed here:

     * The desktop nav now survives to 900px, by shrinking the logo and the
       link padding in two steps instead of giving up.
     * The Sahel pill is never hidden. Below 1240px it collapses to an
       ICON-ONLY circle, exactly the way .bcfc-header__islamic-toggle already
       collapses on mobile, and it keeps its aria-label so the icon is still
       announced.

   MEASURED, not guessed, in Chromium against the live header (6 CMS nav items,
   the count today): natural nav width 592px at 12px/7px and 525px at 11px/5px,
   so the nav fits with 40px of slack at 1024px and 31px at 900px, and first
   overflows just under 860px. THE THRESHOLD IS TIED TO THAT ITEM COUNT — a 7th
   top-level item adds ~90px and needs the collapse moved back up to ~990px.
   Re-measure with nav.scrollWidth vs nav.clientWidth before adding one.
   ========================================================================== */

@media (max-width: 1240px) {
    /* Compact desktop: the nav STAYS. */
    .bcfc-header__logo {
        --bcfc-logo-height: 56px;
    }

    .bcfc-header__nav-link {
        padding: 0 7px;
        font-size: 0.8125rem;
    }

    /* THE SAHEL PILL, ICON ONLY. The label already collapses to max-width 0
       unless .is-open (see THE COLLAPSE above), so this only has to pin it shut
       and turn the pill into a circle. The .is-open rule is (0,2,0), so the
       override has to be too — a media query adds no specificity. */
    .bcfc-header__login-btn {
        /* 44px, matching .bcfc-header__search-btn and .bcfc-header__dropdown-btn
           either side of it — three equal squares read as a set, and 44 is the
           tap-target floor. flex:none because at 375px it otherwise shrinks to
           43 and sits a pixel narrower than its neighbours. */
        --bcfc-header-cta-w: 44px;
        width: 44px;
        flex: none;
        /* min-width, not just width: the 1440px tier above sets min-width:74px and
           min-width beats width whatever the source order, so without this the
           "icon only" pill stays 74px wide with 26px of empty space in it. */
        min-width: 0;
        padding-inline: 0;
        justify-content: center;
        gap: 0;
    }

    /* Restated for RTL for the same reason as the 1440px tier: the
       [dir="rtl"] token rule is (0,2,0) and would otherwise keep the wide pill. */
    [dir="rtl"] .bcfc-header__login-btn {
        --bcfc-header-cta-w: 44px;
    }

    .bcfc-header__login-btn.is-open .bcfc-header__login-label {
        max-width: 0;
    }
}

@media (max-width: 980px) {
    /* Tighter still, so the nav reaches 900px rather than 1024px. */
    .bcfc-header__logo {
        --bcfc-logo-height: 48px;
    }

    .bcfc-header__nav-link {
        padding: 0 5px;
        font-size: 0.75rem;
    }

    .bcfc-header__container {
        padding-inline: 12px;
        gap: 6px;
    }

    .bcfc-header__actions {
        gap: 4px;
    }
}

/* 899.98px, not 900px: at exactly 900 the nav still fits (31px slack) and the
   two rules must never both apply, or the header shows a burger AND a nav. */
@media (width < 900px) {
    .bcfc-header__nav {
        display: none;
    }

    /* Reveal the hamburger exactly when the horizontal nav collapses */
    .bcfc-header__dropdown-btn {
        display: flex;
    }
}

/* "Hide site header" on the page (_Layout.cshtml): no fixed header, so nothing to clear. Set on
   body, not :root, so it beats the :root value at every breakpoint for everything inside the page. */
body.bcfc-no-site-header {
    --bcfc-header-height: 0px;
    /* --bcfc-total-header-height was resolved on :root, so zeroing the header alone leaves it at 104px
       for everything inside the page (body padding, hero trail). Re-resolve it here. */
    --bcfc-total-header-height: calc(var(--bcfc-masthead-height, 0px) + var(--bcfc-header-height, 0px));
}

@media (max-width: 768px) {

    /* Full-bleed header on mobile: no side gap, no rounded card, flush to edges */
    .bcfc-header {
        padding: 0;
    }

    .bcfc-header__container {
        height: 100%;
        padding: 8px 14px;
        /* 12px, up from 8 (Bahaa, 2026-09-21: "look how congested it looks / make gap space").
           Affordable only because the search chip above is gone: measured at 390px the action row
           went 260px -> 156px, so there is ~104px of slack to spend and this spends 4 of it. */
        gap: 12px;
        border-radius: 0;
        box-shadow: 0 1px 3px rgba(15, 41, 66, 0.08);
    }

    /* Mobile header is 72px with 8px block padding, so 56px is about the ceiling here.
       This is a real gain, not just a number change: the old 150x42 box painted the logo at
       only 40px tall because the width bound first. */
    .bcfc-header__logo {
        --bcfc-logo-height: 52px;
        min-width: 120px;
    }

    .bcfc-header__actions {
        /* 10px, up from 6 — see the note on .bcfc-header__container's gap above. The chips read
           as a crowded strip at 6px once they are all icon squares of the same size: with no
           text chip left to break the rhythm, the gap is the only thing separating them. */
        gap: 10px;
    }

    /* ── MOBILE ACTION ROW, 2026-09-21 (Bahaa) ──────────────────────────────
       "in the mobile never show the search icon and the language switcher
       make it icon only on mobile".

       WHY IT MATTERS BEYOND TASTE: at 390px the row was logo + 48px language
       chip (which the word "العربية" pushed to ~104px) + 48px search + 48px
       Islamic toggle + 44px burger + four gaps ≈ 260px of actions, leaving the
       logo ~110px in a 370px content box. That is what squeezed the wordmark in
       the screenshot. Dropping search and collapsing the chip to a square hands
       ~110px back to the logo.

       SEARCH IS NOT LOST. The mobile drawer renders its own search action from
       the SAME viewModel.ShowSearch / SearchLabel pair (see BCFCNavigation),
       so the entry point moves into the burger rather than disappearing. This
       hides the chip only; it does NOT touch the flag, because ticking
       showSearchInNav off must still remove search from BOTH places. */
    .bcfc-header__search-btn {
        display: none;
    }

    /* Icon-only language chip: a 48px square matching the Islamic toggle below,
       so the two remaining controls read as a pair. */
    .bcfc-header__arabic-btn {
        width: 48px;
        /* min-width, not width alone — the base rule sets min-width: 48px and
           min-width beats width whatever the source order; the padding is what
           was actually making it wide, and 0 here is what squares it. */
        min-width: 48px;
        padding: 0;
    }

    .bcfc-header__lang-icon {
        display: block;
    }

    /* VISUALLY hidden, not display:none. The chip's accessible name is its
       aria-label, so removing the span would not break the name — but keeping
       the text in the a11y tree means the control still matches a find-in-page
       for the language name, and it is one property to revert. */
    .bcfc-header__lang-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Islamic toggle collapses to an icon-only square button on mobile */
    .bcfc-header__islamic-toggle {
        width: 48px;
        padding: 0;
        gap: 0;
    }

    .bcfc-header__islamic-toggle .bcfc-islamic-text {
        display: none;
    }

    /* Mobile drawer spans the full screen width, squared, flush to edges */
    .bcfc-header__mobile-menu {
        width: 100vw;
        max-width: 100%;
        border-left: none;
        border-radius: 0;
        box-shadow: none;
    }

    .bcfc-header__mobile-top {
        padding: 14px 16px;
    }

    .bcfc-header__mobile-logo {
        width: 152px;
        height: 40px;
    }

    .bcfc-header__mobile-nav {
        padding: 8px 16px 20px;
    }
}

/* SMALL PHONES. Keeping the Sahel pill visible adds a THIRD 44px square to
   .bcfc-header__actions, and measured at 320px the row then wanted 362px in a
   320px container — the old hidden-pill header fit in exactly 320. Body carries
   overflow-x: clip, so the overflow would not scroll: it would just push the
   hamburger off the edge. This buys the 42px back from the logo and the gaps
   rather than from the buttons, all three of which are at the 44px tap-target
   floor already.

   THE GAPS ARE NO LONGER THE LAST RESORT THEY WERE WHEN THIS WAS WRITTEN. The
   search chip that made this tier necessary is hidden below 768px as of
   2026-09-21 and the language chip is a 48px square instead of a ~104px text
   pill, which is ~104px of measured slack at 390px — so the 2px gap that note
   describes as the only place left to take room from is now simply too tight to
   look deliberate. Raised to 6px, which is still 4px tighter than the 768px
   tier and spends 12px of the 104. Leaving the note above intact rather than
   deleting it: if search ever comes back to the mobile row, its arithmetic is
   the reason these numbers have to go back down. */
@media (max-width: 400px) {
    .bcfc-header__container {
        padding: 8px 10px;
        gap: 8px;
    }

    .bcfc-header__logo {
        --bcfc-logo-height: 44px;
    }

    .bcfc-header__actions {
        gap: 6px;
    }
}

body.bcfc-mobile-menu-open {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.cards-section .card-item {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(7, 27, 51, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cards-section .card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 36px rgba(7, 27, 51, 0.1);
}

.cards-section .card-item img {
    transition: transform 0.5s ease;
}

.cards-section .card-item:hover img {
    transform: scale(1.05);
}

.cards-section .card-btn-apply:hover {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .cards-section .card-item:hover {
        transform: none;
    }
}

.icon-list-section {
    position: relative;
}

.icon-item {
    position: relative;
    overflow: hidden;
}

.icon-item::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.icon-item:hover::before {
    opacity: 1;
}

.icon-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.icon-item:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.icon-item:focus:not(:focus-visible) {
    outline: none;
}

.icon-item:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

.icon-item,
.icon-item i,
.icon-item h3 {
    transition-property: color, background-color, border-color, transform, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.icon-item:hover i {
    animation: iconPulse 0.5s ease-in-out;
}

.icon-list-section .icon-item[layout="list"] {
    display: flex;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .icon-item,
    .icon-item i,
    .icon-item h3 {
        transition: none;
    }

    .icon-item:hover {
        transform: none;
    }

    .icon-item:hover i {
        animation: none;
    }
}

@media print {
    .icon-list-section {
        page-break-inside: avoid;
    }

    .icon-item {
        break-inside: avoid;
        box-shadow: none !important;
    }
}

.bcfc-breadcrumb-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    margin-top: var(--bcfc-total-header-height, var(--bcfc-header-height));
    margin-bottom: 0;
    /* Tighter bottom gap to the content below (breadcrumb pages zero the content's
       own header-height margin, so this padding is the only gap). Not zeroed —
       a small breathing space reads better than flush. */
    padding: 20px 0 10px;
}

/* Prevent a double header-height offset (the "big gap under the header").
   The breadcrumb's margin-top only belongs on pages where body padding-top has
   been zeroed by .bcfc-page-has-breadcrumb. When the body still reserves the
   header height — hero pages (kept via higher specificity) and root-level pages
   that render a breadcrumb but never get the .bcfc-page-has-breadcrumb class —
   the breadcrumb must NOT add its own margin or the two stack into a full
   header-height empty gap. */
body:not(.bcfc-page-has-breadcrumb) .bcfc-breadcrumb-banner,
body.bcfc-hero-page .bcfc-breadcrumb-banner {
    margin-top: 0;
}

body.bcfc-error-page .bcfc-breadcrumb-banner,
body.bcfc-error-page .bcfc-header {
    margin-top: 0;
}

/* The old .bcfc-error-shell / -code / -title / -cta / -notice-* / -reference-id rules
   lived here and were replaced by /css/pages/ErrorPage.css, which all four error pages
   now share via Views/Partials/Errors/_ErrorPage.cshtml. They were removed rather than
   left in place because this file is in the CRITICAL bundle (see Program.cs), so every
   page on the site was downloading error-page CSS it could never use. The
   body.bcfc-error-page rules just above stay — that class is still set. */

/* Material symbol utility classes */
.material-symbols-filled {
    font-variation-settings: 'FILL' 1;
}
.material-symbols--sm {
    font-size: 1rem;
}
.material-symbols--md {
    font-size: 1.25rem;
}

.bcfc-breadcrumb-banner__overlay {
    display: none;
}

.bcfc-breadcrumb-banner__inner {
    position: relative;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0;
}

.bcfc-breadcrumb-banner__title {
    display: none;
}

.bcfc-breadcrumbs {
    /* ---- THEME SURFACE ----
       The trail now lives INSIDE each page's hero rather than in its own banner, and heroes are
       not all light. Before these existed, every dark hero shipped its own copy of the same
       recolour block — .cardx, .loans-hero__inner and .pfs-hero__crumbs each repeat
       rgba(255,255,255,.82) / #fff / rgba(255,255,255,.6) in three different page stylesheets.
       Set these three (or just add .bcfc-breadcrumbs--on-dark) instead of writing a fourth copy. */
    --bcfc-crumb-ink: var(--bcfc-primary, #004a98);
    --bcfc-crumb-ink-strong: var(--bcfc-navy, #002a5c);
    --bcfc-crumb-sep: var(--bcfc-crumb-ink);

    /* ---- THE ICON SLOT ----
       The home crumb is the only one with a GLYPH in front of its label: a 16px house plus the
       6px gap the label sits behind it. Those two numbers are read by three rules below (the svg
       size, the gap between glyph and label) and by the HANGING INDENT that follows, so they are
       declared once here and derived from, not restated as literals in three places.
       --bcfc-crumb-icon-slot is what the indent actually moves by: a page that re-lays the trail
       (the Imtiaz card pages scroll the trail sideways on a phone instead of wrapping it) sets it
       to 0 and the whole indent disappears with it. */
    --bcfc-crumb-icon: 16px;
    --bcfc-crumb-icon-gap: 6px;
    --bcfc-crumb-icon-slot: calc(var(--bcfc-crumb-icon) + var(--bcfc-crumb-icon-gap));

    margin-top: 12px;
}

/* A trail rendered INSIDE a hero (Shared/_HeroChrome.cshtml) needs breathing room above it. The
   standalone .bcfc-breadcrumb-banner has its own band padding; inside a hero the trail is the first
   thing under a position:fixed header, and its own 12px margin-top left it 8px clear of the header
   edge on both the blue .bcfc-page-hero and the Sahel green — tight enough to read as a clipping
   bug. One rule here covers every hero that adopts _HeroChrome, so no hero needs its own. */
.bcfc-hero-chrome__trail {
    padding-block-start: clamp(16px, 2.2vw, 28px);
}

/* ...but NOT inside the shared hero, where .bcfc-hero__inner already provides the top space through
   --hero-pad-start. The rule above predates the unified hero: it was written for bands where the
   trail WAS the first thing under the top edge, and once both applied the breadcrumb sat ~70px below
   the header instead of just under it. Zeroed here rather than removed above, because the bespoke
   heroes that still call _HeroChrome need it. */
.bcfc-hero .bcfc-hero-chrome__trail {
    padding-block-start: 0;

    /* ...but the trail still owes the COPY a gap underneath it. Zeroing the padding above fixed the
       trail's own position and left nothing between it and whatever the copy column opens with, so
       the first element landed flush against the breadcrumb. Measured at 1440px, trail bottom to
       the first copy child: the logo plate on /en/real-estate/ at 2px (its only clearance was the
       plate's own `margin-block: 2px`) and the eyebrow rule on /en/commercial-sme/ at 0px (it has
       no top margin at all). A bare <h1> hero was the only case that looked deliberate, because
       --hero-title-mt already gives it 20px.

       ON THE TRAIL, NOT ON EACH FIRST CHILD. .bcfc-hero__copy has no padding or border, so this
       bottom margin COLLAPSES with the top margin of whichever element actually comes first and
       the result is max(), never a sum — so the gap is the same whichever slots a page fills, and
       every existing per-element margin keeps working untouched. Measured after, same method:
       logo plate 2 -> 26, eyebrow 0 -> 26, and the bare-<h1> /ar/commercial-sme/ 20 -> 26, i.e.
       the h1's own 20px was absorbed rather than added.

       Adjacent-sibling collapse is also why this does not stack with the tab strip's own
       `clamp(14px, 2vw, 22px)` top margin (bcfc-page-tabs.css) when _HeroChrome emits the strip
       between the trail and the copy: /en/finance/ went 22 -> 26, not 48. And .bcfc-hero__inner
       has padding-block, so nothing escapes the band either.

       Sized just above the tab strip's top margin: the plate and the accent rule are heavier
       objects than the trough and want slightly more air. */
    margin-block-end: var(--hero-chrome-gap, clamp(18px, 2vw, 26px));
}
/* EXCEPT IN SPLIT, where .bcfc-hero__inner is a GRID and its `gap: clamp(24px, 4vw, 64px)` already
   separates the chrome row (grid-column: 1 / -1) from the copy. Grid gap does not collapse with
   margins, so leaving the rule on would have added 18-26px on top of an already generous 24-64px.
   /en/sahel-islamic/ is the split hero WITH a tab strip and is unchanged either way: 57.6px. */
.bcfc-hero--split .bcfc-hero-chrome__trail {
    margin-block-end: 0;
}

/* Ready-made light-on-dark treatment, for a trail sitting on a dark or image hero. Values match
   what the three page stylesheets above had each arrived at independently. */
.bcfc-breadcrumbs--on-dark {
    --bcfc-crumb-ink: rgba(255, 255, 255, .82);
    --bcfc-crumb-ink-strong: #fff;
    --bcfc-crumb-sep: rgba(255, 255, 255, .6);
    /* AND THE TWO TOKENS THE RULES BELOW ACTUALLY READ FIRST. Without these the whole modifier
       was INERT wherever the trail's surface ancestor is light, which is most image heroes.

       The consuming declarations are `color: var(--bcfc-ink-link, var(--bcfc-crumb-ink))` — the
       crumb token is only the FALLBACK, so it is reached only when --bcfc-ink-link is unset. And
       it is almost never unset: bcfc-surface.css sets it per SURFACE, deliberately (see its own
       note at line 46), so any trail inside a light-surface wrapper gets the light-surface link
       blue no matter what this modifier says.

       Measured on beta 2026-09-22, /en/bcfc-group/insurance/: the trail carried
       .bcfc-breadcrumbs--on-dark, --bcfc-crumb-ink resolved correctly to rgba(255,255,255,.82),
       and every item still computed rgb(0,74,152). The trail sits over a dark photo but its
       surface ancestor is `.ins-hub`, whose own background is rgb(248,250,253) — light. So the
       class was applied, the token was right, and nothing consumed it.

       Pointed at the crumb tokens rather than re-stating white: no new hex literal (the per-file
       hex ceiling for this sheet is a frozen gate), and the trail keeps ONE source of truth — set
       --bcfc-crumb-ink and the links follow. */
    --bcfc-ink-link: var(--bcfc-crumb-ink);
    --bcfc-ink-link-hover: var(--bcfc-crumb-ink-strong);
}

.bcfc-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--bcfc-ink-link, var(--bcfc-crumb-ink));
    font: 700 0.9425rem/1.35 "Almarai", sans-serif;
}

/* A WRAPPED TRAIL HANGS; IT DOES NOT OUTDENT. Reported by the owner on
   /en/commercial-sme/corporate-credit-cards/imtiaz-corporate-world-mastercard/ (2026-10-26),
   where the trail runs out of the hero's copy column and breaks onto a second line.

   WHY IT LOOKED WRONG. The trail is a flex list that WRAPS, and every flex line starts at the
   container's content edge. The first line starts with the HOME GLYPH, so the second line began
   under the glyph — 22px to the LEFT of the first line's TEXT. Measured on that page at 1440px:
   the current-page item rendered at x=138.3 while "Home" rendered at x=160.3 (glyph 16px +
   gap 6px). The wrapped title therefore read as OUTDENTED, not as a continuation of the trail,
   and the box around it looked mis-padded.

   THE HANGING INDENT. The list's content edge moves to where the first line's TEXT starts, and
   the first crumb is pulled back over that edge by the same amount. The glyph keeps hanging in
   the margin and the wrapped line lands under "Home". The first line is pixel-identical: the
   negative margin is cancelled by the padding, so the item's own box does not move — only the
   CONTENT EDGE of every WRAPPED line does.

   `> ol` AND `> li:first-child`, never the bare `ol` / `li` the rules above use, because the
   phone DROPDOWN's own list (.bcfc-breadcrumbs__panel) is an <ol> inside this same <nav> and
   must not be indented by the trail's own hanging indent.

   LOGICAL PROPERTIES ONLY. The trail carries its own dir attribute, so /ar mirrors itself: the
   glyph hangs in the RIGHT margin and a wrapped Arabic line aligns under its own first line. */
.bcfc-breadcrumbs > ol {
    padding-inline-start: var(--bcfc-crumb-icon-slot);
}

.bcfc-breadcrumbs > ol > li:first-child {
    margin-inline-start: calc(0px - var(--bcfc-crumb-icon-slot));
}

.bcfc-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bcfc-breadcrumbs a,
.bcfc-breadcrumbs span {
    display: inline-flex;
    align-items: center;
    gap: var(--bcfc-crumb-icon-gap);
    color: inherit;
    text-decoration: none;
    /* A long crumb WRAPS between words onto another row; it is never clipped. This used to be
       nowrap + max-width + overflow:hidden + ellipsis, but an ellipsis does not render on an
       inline-flex box, so the cap was a hard clip mid-word — on /ar at 375px
       «التسهيلات للخدمات العقارية» showed as «…العذ» (RULE 5). The anonymous flex item's
       min-width is its longest word, so a word can never be split either. */
    white-space: normal;
}

.bcfc-breadcrumbs a {
    transition: color .2s ease, opacity .2s ease;
    /* TAP TARGET (2026-10-14): 10px of block padding lifts a crumb to 40px (Home measured 79x23);
       the equal negative margin hands it straight back, so the trail does not move. */
    padding-block: 0.625rem;
    margin-block: -0.625rem;
}

.bcfc-breadcrumbs a:hover,
.bcfc-breadcrumbs a:focus-visible {
    color: var(--bcfc-ink-link-hover, var(--bcfc-crumb-ink-strong));
    opacity: 1;
}

.bcfc-breadcrumbs [aria-current="page"] {
    color: var(--bcfc-ink-link, var(--bcfc-crumb-ink-strong));
    font-weight: 800;
    display: inline;
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.bcfc-breadcrumbs svg {
    flex: 0 0 auto;
    width: var(--bcfc-crumb-icon);
    height: var(--bcfc-crumb-icon);
    color: currentColor;
}

.bcfc-breadcrumbs__separator {
    color: var(--bcfc-ink-link, var(--bcfc-crumb-sep));
    opacity: .55;
}

/* The breadcrumb bar's visible color comes from this text/icon color (its
   background is transparent — --bcfc-breadcrumb-banner-bg is currently
   unused), so this is what actually needs to switch to green on Islamic
   pages, e.g. the "Home" link/icon.
   The :not(--on-dark) guard is load-bearing. This rule paints `color` DIRECTLY, while
   .bcfc-breadcrumbs--on-dark only re-points --bcfc-crumb-ink; a direct paint at (0,2,2) beats a
   token re-point every time, so without the guard an Islamic breadcrumb sitting on the dark green
   hero band rendered #163529 on #0b2b24 = 1.08:1. Excluded, it falls through to the base rule
   (--bcfc-ink-link, which the dark hero already sets to #fff) and light Islamic pages keep green. */
body.is-islamic .bcfc-breadcrumbs:not(.bcfc-breadcrumbs--on-dark) ol,
body.is-islamic .bcfc-breadcrumbs:not(.bcfc-breadcrumbs--on-dark) .bcfc-breadcrumbs__separator {
    color: var(--bcfc-dark-ink-green, var(--bcfc-color-secondary));
}

/* [aria-current="page"] (the non-clickable current-page item) is intentionally
   excluded — it stays its usual dark navy/black regardless of section. */
body.is-islamic .bcfc-breadcrumbs:not(.bcfc-breadcrumbs--on-dark) a:hover,
body.is-islamic .bcfc-breadcrumbs:not(.bcfc-breadcrumbs--on-dark) a:focus-visible {
    color: var(--bcfc-green-darker, #113e35);
}

@media (max-width: 480px) {
    .bcfc-breadcrumb-banner__inner {
        width: min(100% - 32px, 1320px);
        padding: 0;
    }

    .bcfc-breadcrumbs ol {
        gap: 6px;
        font-size: 0.8755rem;
    }
}

/* Phone: collapse the trail to the current page title as a dropdown (markup in
   Navigation/_BreadcrumbTrail.cshtml). Words wrap whole, never split (RULE 5). */
.bcfc-breadcrumbs__compact {
    display: none;
}

@media (max-width: 600px) {
    .bcfc-breadcrumbs:has(> .bcfc-breadcrumbs__compact) > ol {
        display: none;
    }

    .bcfc-breadcrumbs__compact {
        display: block;
        position: relative;
    }

    .bcfc-breadcrumbs__compact > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        list-style: none;
        color: var(--bcfc-ink-link, var(--bcfc-crumb-ink-strong));
        font: 800 0.8755rem/1.35 "Almarai", sans-serif;
        padding-block: 0.625rem;
        margin-block: -0.625rem;
    }

    .bcfc-breadcrumbs__compact > summary::-webkit-details-marker {
        display: none;
    }

    .bcfc-breadcrumbs__compact > summary::after {
        content: "";
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: translateY(-0.125rem) rotate(45deg);
        transition: transform .2s ease;
    }

    .bcfc-breadcrumbs__compact[open] > summary::after {
        transform: translateY(0.125rem) rotate(-135deg);
    }

    .bcfc-breadcrumbs__panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 8px 0 0;
        padding: 4px 0;
        list-style: none;
        background: var(--bcfc-surface-base);
        color: var(--bcfc-ink);
        border: 1px solid var(--bcfc-border);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgb(0 0 0 / .16);
        position: relative;
        z-index: 5;
    }

    .bcfc-breadcrumbs__panel li {
        display: block;
    }

    .bcfc-breadcrumbs__panel a,
    .bcfc-breadcrumbs__panel span {
        display: block;
        padding: 0.625rem 1rem;
        margin: 0;
        color: var(--bcfc-ink);
        font: 700 0.8755rem/1.35 "Almarai", sans-serif;
    }

    .bcfc-breadcrumbs__panel [aria-current="page"] {
        color: var(--bcfc-ink-strong);
        font-weight: 800;
    }
}

.bcfc-seo-breadcrumbs a,
.bcfc-seo-breadcrumbs span {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .bcfc-seo-breadcrumbs ol {
        font-size: 0.8755rem;
    }

    .bcfc-seo-breadcrumbs ol li:nth-child(2),
    .bcfc-seo-breadcrumbs ol li:nth-child(3) {
        max-width: 80px;
    }

    .bcfc-seo-breadcrumbs ol li:nth-child(2) a,
    .bcfc-seo-breadcrumbs ol li:nth-child(3) a {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

.social-share-fixed {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* translateX ONLY. The rail carries Tailwind's `top-1/2 -translate-y-1/2`, which now owns
   the -50% vertical centring on the standalone `translate` property — so repeating -50% in
   this `transform` would stack with it and the rail would drift UP as it slid out. (The rule
   is currently unreachable: nothing in any view or script adds `.scroll-hidden`.) */
.social-share-fixed.scroll-hidden {
    transform: translateX(-100%);
    opacity: 0;
}

@media (max-width: 1024px) {
    .social-share-fixed {
        display: none;
    }
}

.perspective-1000 {
    perspective: 1000px;
}

.logo-carousel-wrapper {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.logo-carousel-track {
    animation: scroll-logos var(--carousel-duration, 30s) linear infinite;
}

.logo-carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

@keyframes scroll-logos-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(33.333%);
    }
}

.rtl-aware {
    direction: rtl;
    text-align: right;
}

.rtl-aware .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

.rtl-aware .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

.rtl-aware .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

.rtl-aware .pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}

.rtl-aware .ml-4 {
    margin-left: 0;
    margin-right: 1rem;
}

.rtl-aware .mr-4 {
    margin-right: 0;
    margin-left: 1rem;
}

.rtl-aware .fa-chevron-right::before {
    content: "\f054";
}

.rtl-aware .fa-chevron-left::before {
    content: "\f053";
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(7, 27, 51, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(7, 27, 51, 0.8);
    }
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.chat-message {
    display: flex;
}

.chat-message.user-message {
    justify-content: flex-end;
}

.chat-message.bot-message {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.9375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.message-bubble.user-bubble {
    background-color: var(--bcfc-navy, #071b33);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message-bubble.bot-bubble {
    background-color: var(--bcfc-surface-raised, white);
    color: var(--bcfc-ink, #1f2937);
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 0.25rem;
}

.message-time {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
}

.message-time.user-time {
    color: rgba(255, 255, 255, 0.8);
}

.message-time.bot-time {
    color: #9ca3af;
}

#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: var(--bcfc-surface-raised, #f9fafb);
}

#chat-messages::-webkit-scrollbar-thumb {
    background: var(--bcfc-surface-muted, #d1d5db);
    border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.team-card.hidden,
.team-modal.hidden {
    display: none;
}

.team-modal:not(.hidden) {
    display: block;
}

.team-modal:not(.hidden) .modal-panel {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bcfc-footer {
    position: relative;
    width: 100%;
    background: var(--bcfc-footer-bg, #003b72);
    color: var(--bcfc-footer-text);
    border-radius: 0;
    overflow: hidden;
}

.bcfc-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 28px;
}

.bcfc-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr));
    gap: 28px;
    align-items: start;
}

.bcfc-footer__brand,
.bcfc-footer__links-column,
.bcfc-footer__contact {
    display: grid;
}

.bcfc-footer__brand {
    gap: 18px;
}

.bcfc-footer__links-column,
.bcfc-footer__contact {
    gap: 14px;
}

.bcfc-footer__brand-logo {
    display: inline-flex;
    width: 140px;
    align-items: center;
    justify-content: center;
}

.bcfc-footer__brand-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: var(--bcfc-footer-logo-filter, none);
}

.bcfc-footer__section-title {
    margin: 0;
    color: var(--bcfc-footer-text, #fff);
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Footer Widget Expand/Collapse */
.bcfc-footer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    /* TAP TARGET (2026-10-14): 8px of block padding lifts the head to 40px (measured 174x24); the
       equal negative margin keeps the column where it was. The phone accordion rules below set
       their own bottom padding/margin, which is still additive to this top half. */
    padding-block: 0.5rem;
    margin-block: -0.5rem;
    /* Not `cursor: pointer` here — this toggle only actually does anything below the 560px
       accordion breakpoint (see FOOTER_ACCORDION_MAX_WIDTH in bcfc-chrome.ts), and a pointer
       cursor above that width makes a plain section heading read as a dead link. The
       `@media (max-width: 560px)` block below sets it back to pointer where it's real. */
    cursor: default;
    text-align: left;
}

.bcfc-footer__chevron {
    display: none;
    flex-shrink: 0;
    color: var(--bcfc-footer-text, #fff);
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.bcfc-footer__head.active .bcfc-footer__chevron {
    transform: rotate(180deg);
}

.bcfc-footer__body {
    /* Desktop: always visible */
}

/* Mobile: hide body by default, show chevron */
@media (width < 768px) {
    .bcfc-footer__links-column > .bcfc-footer__head,
    .bcfc-footer__contact > .bcfc-footer__head {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 12px;
    }

    .bcfc-footer__links-column > .bcfc-footer__head .bcfc-footer__chevron,
    .bcfc-footer__contact > .bcfc-footer__head .bcfc-footer__chevron {
        display: block;
    }

    .bcfc-footer__links-column > .bcfc-footer__links,
    .bcfc-footer__contact > .bcfc-footer__body {
        display: none;
    }

    .bcfc-footer__links-column > .bcfc-footer__head.active + .bcfc-footer__links,
    .bcfc-footer__contact > .bcfc-footer__head.active + .bcfc-footer__body {
        display: grid;
    }
}

.bcfc-footer__brand-description,
.bcfc-footer__contact-text,
.bcfc-footer__updated {
    margin: 0;
    color: var(--bcfc-footer-muted-text, rgba(255, 255, 255, 0.82));
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* Newsletter styles moved to BCFCFooter.cshtml inline styles for outline design */

/* THE FOOTER ROOT IS IN THIS SELECTOR ON PURPOSE, and so is the one on .bcfc-footer__links
   below. Both of these lists are <ul>s, and rtl-ar.css carries a bare-element mirror of
   Bootstrap's reboot indent — `[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 2rem;
   padding-left: 0 }` — which is (0,1,1) and therefore beats a one-class `padding: 0`.
   Measured on the home page at 1440px, start edge of each link against its own column heading:
       /en   0px, 0px, 0px      (flush, as designed)
       /ar  32px, 32px, 32px    (every link in all three columns indented off its heading)
   It is invisible on /en because Bootstrap's own `ul { padding-left: 2rem }` is only (0,0,1)
   and loses to one class, so this was an Arabic-only defect in an otherwise correct stylesheet.
   Adding .bcfc-footer takes these to (0,2,0) so the reset is outranked in both directions, and
   the longhands are logical so rtl-ar.css still has nothing to mirror here. No @media block sets
   padding on either list, so nothing downstream had to move with them. */
.bcfc-footer .bcfc-footer__links,
.bcfc-footer .bcfc-footer__contact-list {
    margin: 0;
    padding-block: 0;
    padding-inline: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.bcfc-footer__link,
.bcfc-footer__contact-link {
    color: var(--bcfc-footer-text, #fff);
    text-decoration: none;
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.bcfc-footer__link:hover,
.bcfc-footer__contact-link:hover {
    text-decoration: underline;
}

.bcfc-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bcfc-footer__contact-icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    filter: var(--bcfc-footer-contact-icon-filter, brightness(0) invert(1));
}

.bcfc-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.bcfc-footer__social-link {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bcfc-footer-social-bg, rgba(255, 255, 255, 0.12));
    color: var(--bcfc-footer-text, #fff);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bcfc-footer__social-link:hover,
.bcfc-footer__social-link:focus-visible {
    background: var(--bcfc-accent, #f3db6e);
    color: var(--bcfc-footer-bg, #004a98);
    transform: translateY(-2px);
}

.bcfc-footer__partners {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--bcfc-footer-newsletter-border, rgba(255, 255, 255, 0.18));
    display: grid;
    gap: 16px;
}

.bcfc-footer__partners-title {
    margin: 0;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.72));
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}

.bcfc-footer__partners-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
}

.bcfc-footer__partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bcfc-footer__partner-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.bcfc-footer__partner-image {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: var(--bcfc-footer-contact-icon-filter, brightness(0) invert(1));
}

.bcfc-footer__bottom {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--bcfc-footer-newsletter-border, rgba(255, 255, 255, 0.18));
}

.bcfc-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.bcfc-footer__copyright {
    margin: 0;
    color: var(--bcfc-footer-text, #fff);
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.bcfc-footer__updated {
    margin: 0;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
}

.bcfc-footer__legal {
    margin-top: 16px;
}

.bcfc-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcfc-footer__legal-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bcfc-footer__legal-item:not(:last-child)::after {
    content: "|";
    color: var(--bcfc-footer-separator, rgba(255, 255, 255, 0.4));
    font-size: 0.8125rem;
}

.bcfc-footer__legal-link {
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcfc-footer__legal-link:hover {
    color: var(--bcfc-footer-text, #fff);
}

/* Stacks in the same column as .bcfc-quick-links (shared --bcfc-fab-right),
   anchored at the very bottom with the quick-links toggle FAB stacked
   above it (see --bcfc-fab-right below). Deliberately the bottom-most of
   the pair: .bcfc-quick-links still occupies its full collapsed-item
   height (just invisible) even when closed, so if this button sat inside
   that region its clicks would be swallowed by the taller widget on top —
   putting it below that region instead of above avoids the overlap. */
.bcfc-scroll-to-top {
    position: fixed;
    /* LOGICAL, so the whole column mirrors to the left on /ar. Owner's call 2026-09-22.
       This was `right` + `left: auto` until then, and the reason recorded for that has expired:
       the column was pinned physically because bottom-left held the reCAPTCHA badge, and that
       badge is no longer drawn at all (it was removed rather than positioned). Verified on live
       /ar the same day - no .grecaptcha-badge, no .bcfc-suhail, nothing fixed in the bottom-left
       quadrant but the off-canvas mobile menu parked at left:-633. */
    inset-inline-end: var(--bcfc-fab-right);
    /* SLOT N=1, not N=0 any more - .bcfc-a11y moved to N=0 (owner, 2026-09-23: "make the
       accessibility the last button at the bottom not the top"), so every other member of
       the column shifted up one slot to make room underneath it. */
    bottom: calc(20px + var(--bcfc-fab-lift, 0px) + var(--bcfc-fab-toggle-size) + var(--bcfc-fab-gap) + var(--bcfc-a11y-rail-extra, 0px) + env(safe-area-inset-bottom, 0px));
    /* Same fallback as the other two members of the column. The token is declared in
       scss/_variables.scss and reaches the page via the compiled /css/style.css, which is in
       bundle-main — i.e. a LATER bundle than this file. Without the fallback this one button
       would drop to `z-index: auto` if style.css ever left the bundle, while .bcfc-quick-links
       and .bcfc-ai kept 1035. */
    z-index: var(--bcfc-z-fab-raised, 1035);
    display: inline-flex;
    /* Same size as .bcfc-quick-links__toggle so the two circles line up
       exactly (both right-aligned AND same diameter, not just sharing an
       edge) — mismatched sizes read as "off" even when edges line up. */
    width: var(--bcfc-fab-toggle-size);
    height: var(--bcfc-fab-toggle-size);
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 59, 114, 0.18);
    border-radius: 999px;
    background: var(--bcfc-color-primary);
    color: var(--bcfc-color-white);
    box-shadow: var(--bcfc-fab-ring), 0 14px 34px rgba(7, 27, 51, 0.24);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.bcfc-scroll-to-top:hover {
    background: var(--bcfc-primary-dark);
}

.bcfc-scroll-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Scroll-progress ring. bcfc-chrome.js writes --bcfc-scroll-progress (0-100) on the button.
   A conic gradient starting at 12 o'clock runs clockwise, masked down to a 3px ring; the
   track is the unfilled remainder. A full ring means the bottom of the page. Pure CSS on
   purpose - a second inline <svg> here trips the inline-svg ceiling. */
.bcfc-scroll-to-top__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    /* The fill's leading edge is feathered over 0.6% so it is not a hard aliased line, and the
       ring's inner and outer edges are 1px ramps rather than a hard stop - that is what makes
       the curve read as smooth instead of stair-stepped. */
    background: conic-gradient(
        var(--bcfc-color-white) calc(var(--bcfc-scroll-progress, 0) * 1% - 0.3%),
        rgba(255, 255, 255, 0.28) calc(var(--bcfc-scroll-progress, 0) * 1% + 0.3%)
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 3px), black calc(100% - 1px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 3px), black calc(100% - 1px), transparent 100%);
}

@media (max-width: 1100px) {
    .bcfc-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .bcfc-footer__inner {
        padding: 40px 0;
    }

    .bcfc-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bcfc-footer__brand-logo {
        width: 92px;
        height: 92px;
    }

    .bcfc-footer__legal-list {
        gap: 6px 12px;
    }

    .bcfc-footer__legal-link {
        font-size: 0.8125rem;
    }
}

/* ========================================
   FLOATING QUICK LINKS
   One FAB design at every breakpoint: a dedicated round toggle anchored
   bottom-right, with the real links collapsed by default and expanding
   upward above it. `--bcfc-fab-right`/`--bcfc-fab-gap` are shared with
   .bcfc-scroll-to-top below so the two widgets always stack in the same
   column instead of drifting to opposite corners.
   ======================================== */
/* The column tokens (--bcfc-fab-right / -toggle-size / -gap / -lift / -ring) are defined in
   scss/_root.scss (UW-328); the phone values below are set on <body>. */

/* ── reCAPTCHA v3 badge: NOT DRAWN AT ALL ─────────────────────────────────
   Google injects .grecaptcha-badge with INLINE styles — position:fixed; bottom:14px;
   right:-186px; width:256px; z-index:2000000000 — i.e. a ~70px tab peeking in at the
   bottom-RIGHT that slides out to the full panel on hover. Two things were wrong with
   letting it show here, and the second is why this is now a plain hide:

   1. IT LANDS ON THE FAB COLUMN. Measured at 1440x1200: 46 x 54px of overlap with
      .bcfc-scroll-to-top, and at that z-index the badge is what receives the click, so
      the button underneath is dead. Hovering expands it to 256px and it swallows the
      quick-links toggle too.
   2. EVERY ATTEMPT TO REPOSITION IT WAS A GUESS ABOUT GOOGLE'S INTERNAL LAYOUT, AND THE
      GUESS WAS WRONG ON /ar. The previous fix mirrored the badge to the bottom-LEFT and
      clipped it to `inset(0 186px 0 0)` — keeping the leading 70px, which in the ENGLISH
      panel is the logo cell. Reported twice on /ar/finance/ as looking broken, and
      measured on beta 2026-09-21: with hl=ar the panel's content is not in the same place,
      so that 70px window shows a cut logo or an empty sliver instead — a white box with a
      fragment in it, which reads as a rendering fault. The panel is a cross-origin iframe,
      so what is inside it cannot be measured, only guessed at, and it can change whenever
      Google changes it. A mechanism that depends on an unobservable layout is not fixable;
      it is only re-guessable.

   HIDING IS EXPLICITLY PERMITTED, PROVIDED THE ATTRIBUTION IS SHOWN INSTEAD — the
   "protected by reCAPTCHA / Privacy / Terms" wording, which is what
   Shared/_FormCaptchaNotice.cshtml renders inside every form that loads the script. That
   partial is the other half of this rule: **do not add a captcha form without it**, or the
   page carries reCAPTCHA with no attribution anywhere, which is a licence breach rather
   than a layout choice. tools/field-model has no gate for that, so it is on review.

   visibility, NOT display: reCAPTCHA measures its own anchor and `display: none` on the
   badge has historically broken execution. Hidden visibility also stops it hit-testing, so
   it can no longer swallow a click meant for the FAB column — which is item 1 above, fixed
   as a side effect. Verified on beta: grecaptcha.execute intact, and the point the badge
   used to occupy now hit-tests to the content behind it. */
.grecaptcha-badge {
    visibility: hidden !important;
}

.bcfc-quick-links {
    position: fixed;
    /* LOGICAL - mirrors with the rest of the column on /ar. See .bcfc-scroll-to-top above for
       why the old physical pin is gone. */
    inset-inline-end: var(--bcfc-fab-right);
    /* SLOT N=2. Stacked above .bcfc-scroll-to-top (N=1) with a fixed gap; see that rule for
       why the whole column shifted up one slot on 2026-09-23. */
    bottom: calc(20px + var(--bcfc-fab-lift, 0px) + 2 * (var(--bcfc-fab-toggle-size) + var(--bcfc-fab-gap)) + var(--bcfc-a11y-rail-extra, 0px) + env(safe-area-inset-bottom, 0px));
    /* Whole FAB column shares --bcfc-z-fab-raised. This used to be --bcfc-z-modal (1050),
       which is ABOVE --bcfc-z-modal-backdrop — so the toggle floated over the dimmed page
       while a modal was open, and sat 900 layers above .bcfc-scroll-to-top in the same column. */
    z-index: var(--bcfc-z-fab-raised, 1035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: var(--bcfc-fab-toggle-size);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.bcfc-quick-links--visible {
    opacity: 1;
    transform: translateY(0);
}

/* The container itself stays pointer-events:none even once visible — it's
   taller than its own toggle button (collapsed items still occupy layout
   space, just invisible), and it sits above .bcfc-scroll-to-top in the
   same column. Making the whole container clickable would swallow clicks
   meant for whatever is stacked below it. Only the actual buttons/links
   opt back in. */
.bcfc-quick-links--visible .bcfc-quick-links__toggle {
    pointer-events: auto;
}

.bcfc-quick-links__item {
    width: 52px;
    height: 52px;
    min-height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bcfc-surface-raised, #fff);
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 59, 114, 0.18), 0 1px 2px rgba(0, 0, 0, 0.06);
    position: relative;
    opacity: 0;
    transform: scale(0.4) translateY(20px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bcfc-quick-links__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.bcfc-quick-links__item:hover {
    background: var(--bcfc-surface-sunken, #f0f4f8);
    box-shadow: 0 4px 10px rgba(0, 59, 114, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: scale(1.08);
}

.bcfc-quick-links__item:active {
    background: rgba(0, 59, 114, 0.08);
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(0, 59, 114, 0.12);
}

/* Tooltip on hover/focus (desktop pointer input mainly — harmless on touch) */
.bcfc-quick-links__item::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: var(--bcfc-surface-inverse, #1a1a1a);
    color: #fff;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.bcfc-quick-links__item:hover::after,
.bcfc-quick-links__item:focus::after {
    opacity: 1;
    visibility: visible;
}

/* NO TOOLTIP WITHOUT A LABEL. The bubble is `content: attr(title)`, so an empty title
   still paints the padded pill — a small blank slab next to the button, with nothing in
   it. Reported on the accessibility controls, whose labels are Dictionary items: on an
   environment where those keys have not been seeded the title is legitimately "" (RULE 1
   allows no literal tier), and the tooltip must then not render at all rather than render
   empty. Covers a missing attribute too. */
.bcfc-quick-links__item[title=""]::after,
.bcfc-quick-links__item:not([title])::after {
    content: none;
    display: none;
}

/* Expand items when the FAB has a data-expanded attribute — controlled by JS */
.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Stagger the reveal so items nearest the toggle animate in first */
.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item:nth-last-child(1) { transition-delay: 0.02s; }
.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item:nth-last-child(2) { transition-delay: 0.06s; }
.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item:nth-last-child(3) { transition-delay: 0.1s; }
.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item:nth-last-child(4) { transition-delay: 0.14s; }

/* Dedicated toggle FAB — always visible, distinct from the link icons.
   Rendered last in the DOM so column-flex + justify-content:flex-end
   anchors it at the bottom, with the links expanding upward above it. */
.bcfc-quick-links__toggle {
    display: flex;
    width: var(--bcfc-fab-toggle-size);
    height: var(--bcfc-fab-toggle-size);
    min-height: var(--bcfc-fab-toggle-size);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--bcfc-color-primary);
    color: var(--bcfc-color-white);
    box-shadow: var(--bcfc-fab-ring), 0 3px 8px rgba(0, 59, 114, 0.28), 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bcfc-quick-links__toggle:hover {
    background: #002d56;
    box-shadow: var(--bcfc-fab-ring), 0 4px 10px rgba(0, 59, 114, 0.32), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bcfc-quick-links__toggle:active {
    transform: scale(0.95);
}

.bcfc-quick-links__toggle svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__toggle svg {
    /* A "+" rotated 45° reads as an "×" — no separate close icon needed */
    transform: rotate(45deg);
}

/* PHONE (2026-10-14): four 56px buttons 20px off the edge stood ~300px tall over the page gutter
   and covered form fields and the submit button (reported on /ar/commercial-sme/business-finance/).
   44px is still the minimum touch target. Set on BODY, not :root: every slot in the column
   (.bcfc-ai's --ai-column-* included) is computed on the widget itself from these inherited tokens,
   so overriding them on an ancestor is enough, and it adds no :root write to this file. */
@media (max-width: 640px) {
    body {
        --bcfc-fab-toggle-size: 44px;
        --bcfc-fab-gap: 8px;
        --bcfc-fab-right: 12px;
    }
    /* While someone types in a field the column steps aside, so it never sits on the field, its
       label or the on-screen keyboard. It returns on blur. The assistant's own chat box is
       excluded, or typing to Suhaila would hide Suhaila. !important because the scroll-to-top
       button's own visible state in bcfc-animations.css is keyed on its ID, which no class
       selector can outrank, and "hidden while typing" must beat every visible state. */
    body:has(:is(input, select, textarea):focus:not(.bcfc-ai *)) :is(.bcfc-ai, .bcfc-quick-links, .bcfc-scroll-to-top, .bcfc-a11y) {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ========================================
   TEXT-SIZE PRESETS (quick-links rail)
   ======================================== */

/* The control group is a sibling of the links' role="list" and copies that list's
   inline flex column, so the two stacks read as one rail. The stagger and the
   expand/collapse rules above are DESCENDANT selectors on .bcfc-quick-links__item,
   so these buttons inherit them without being in the same parent. */
.bcfc-quick-links__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* .bcfc-quick-links__item is authored for <a>; a <button> needs the UA
   border/background/font reset that an anchor does not. */
.bcfc-quick-links__item--control {
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* At either end of the scale the step is a no-op — say so rather than leaving a button
   that looks live and does nothing.

   NO `opacity` OUTSIDE THE EXPANDED STATE, and that is the whole point of splitting these
   two rules. This selector is (0,2,0); the collapsed rule that hides every item is
   `.bcfc-quick-links__item` at (0,1,0). So an unscoped `opacity: .45` here OUTRANKS the
   hide and the button stays faintly visible with the rail shut — reported as "a random
   floating A-", and it only appeared once a visitor had actually stepped to the end of the
   scale, because that is when aria-disabled goes true. The dimming belongs only where the
   rail is open. */
.bcfc-quick-links__item--control[aria-disabled="true"] {
    cursor: default;
}

.bcfc-quick-links[data-expanded="true"] .bcfc-quick-links__item--control[aria-disabled="true"] {
    /* The expand rule sets opacity:1 on every item; dim it back down here, and ONLY here. */
    opacity: 0.45;
}

/* Theme toggle: moon at rest (press me for dark), sun once dark is on (press me for
   light). One button, two icons, swapped on [aria-pressed] so the accessible name and
   the glyph can never disagree. */
.bcfc-quick-links__item--control .bcfc-quick-links__icon-sun,
.bcfc-quick-links__item--control[aria-pressed="true"] .bcfc-quick-links__icon-moon {
    display: none;
}

.bcfc-quick-links__item--control[aria-pressed="true"] .bcfc-quick-links__icon-sun {
    display: block;
}

/* ========================================
   ACCESSIBILITY FAB — ITS OWN BUTTON IN THE SAME COLUMN
   Owner, 2026-09-22: the text-size and theme controls must not hang off the "+" rail.
   Markup: Views/Partials/Footer/_FloatingQuickLinks.cshtml.

   Deliberately borrows every VISUAL from the rail — .bcfc-quick-links__item(--control) on
   the buttons, .bcfc-quick-links__toggle on the toggle — because both are
   container-independent classes. So this block sets position and reveal ONLY: no colour, no
   shadow, no radius, and no :root declaration, which is what keeps gate 8's per-file hex
   ceiling and its "no :root token write outside the token files" check satisfied here (this
   file is already the worst offender at 30 and must not grow).

   NOT SCROLL-GATED, unlike .bcfc-quick-links (which waits for pageYOffset > 320). An
   accessibility control that only exists after the visitor scrolls is not an accessibility
   control, and someone who needs larger text needs it on first paint.
   ======================================== */
.bcfc-a11y {
    position: fixed;
    /* LOGICAL - mirrors with the rest of the column on /ar. See .bcfc-scroll-to-top above. */
    inset-inline-end: var(--bcfc-fab-right);
    /* SLOT N=0, THE BOTTOM OF THE COLUMN. Counting from the bottom: 0 this, 1
       .bcfc-scroll-to-top, 2 .bcfc-quick-links, 3 .bcfc-ai, 4 .lcalc-jump (cards only).

       Owner, 2026-09-23: "make the accessibility the last button at the bottom not the top".
       It previously sat on the free top slot (N=4, or N=3 depending on whether .lcalc-jump was
       on the page - see git history on this rule for that collision and the empty-slot gap it
       caused). Moving it to N=0 instead of the next free top slot means:
         - every OTHER member of the column shifted up by exactly one slot (see
           .bcfc-scroll-to-top, .bcfc-quick-links, .bcfc-ai's --ai-column-closed, and
           .lcalc-jump's own file for the matching +1 multiplier bump);
         - this FAB no longer needs to rise when the quick-links rail expands (that rail grows
           UPWARD, away from N=0, not toward it) or to dodge .lcalc-jump (which is now above it,
           not sharing its slot) - both of those rules are gone, not just renumbered. */
    bottom: calc(
        20px
        + var(--bcfc-fab-lift, 0px)
        + env(safe-area-inset-bottom, 0px)
    );
    z-index: var(--bcfc-z-fab-raised, 1035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* 12px, the same pitch as the controls stack inside it, so the rail is one even rhythm
       from the toggle up. Must stay in step with --bcfc-a11y-rail-extra below. */
    gap: 12px;
    width: var(--bcfc-fab-toggle-size);
    /* Container stays click-through for the same reason .bcfc-quick-links does: it is taller
       than its own toggle, because the collapsed control buttons still occupy layout. Only
       the toggle and the revealed buttons opt back in. */
    pointer-events: none;
}

.bcfc-a11y__toggle {
    pointer-events: auto;
}

/* The controls stack borrows .bcfc-quick-links__controls, whose margin-bottom:12px is
   spacing for the + rail. Here the container's own gap already separates it from the toggle,
   so the margin would double it - and it was the uncounted 12px that pushed "A-" up under
   .bcfc-scroll-to-top (rail measured 200px against 180px reserved). */
.bcfc-a11y .bcfc-quick-links__controls {
    margin-bottom: 0;
}

/* --bcfc-a11y-rail-extra: extra clearance for EVERY OTHER member of the column while the
   accessibility rail (.bcfc-a11y, at slot N=0 - see that rule) is open. Its revealed controls
   stack UPWARD from N=0, so opening it paints directly over whatever sits in slots 1+ unless
   they get out of the way. Each rendered button costs exactly 52px item + 12px gap: N items
   have N-1 gaps between them plus the 12px .bcfc-a11y gap under the stack, so the rail is
   N * (52 + 12). It was a flat 3 * (52 + 8) = 180 while the real three-button stack measured
   200 (12px inner gaps + a 12px margin-bottom + the 8px container gap), so "A-" sat 6px UNDER
   .bcfc-scroll-to-top - reported 2026-09-23 "gap needs adjusting the A-". Change the gap on
   either element and the 64px step must move with it.

   N FOLLOWS THE BUTTONS THAT ACTUALLY RENDERED, not the worst case. The TextSize and DarkMode
   feature flags each remove buttons in _FloatingQuickLinks.cshtml, and a flat 3 left an empty
   button-sized hole above "A-" whenever dark mode was off. Counted with :nth-child on the
   controls stack; each rule below out-specifies the one before it (the extra pseudo-class), so
   the highest count present wins. Consumed by .bcfc-scroll-to-top and .bcfc-quick-links here, and by
   .bcfc-ai (bcfc-ai-assistant.css) and .lcalc-jump (components/limit-calc.css). Reported live,
   2026-09-23: "the 4th one is overlapping the suhaila button".

   DELIBERATELY NOT DECLARED ON :root - a closed rail is the absence of this rule, and every one
   of the four consumers reads it as `var(--bcfc-a11y-rail-extra, 0px)`, so the var() fallback IS
   the default. A `0px` on :root would be a 31st global token write in this sheet and gate 8
   (audit-css-estate.py) refuses it; scoping the declaration to the open state is the fix the
   gate is asking for, not a workaround. Keep the fallback on every new reference. */
body:has(.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item) {
    --bcfc-a11y-rail-extra: calc(1 * (52px + 12px));
}

body:has(.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item:nth-child(2)) {
    --bcfc-a11y-rail-extra: calc(2 * (52px + 12px));
}

body:has(.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item:nth-child(3)) {
    --bcfc-a11y-rail-extra: calc(3 * (52px + 12px));
}

/* Read-aloud made it FOUR buttons (A-, A+, theme, speak). Capped at 3 this left one slot
   unreserved, so "A-" sat directly under .bcfc-scroll-to-top and read as missing. */
body:has(.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item:nth-child(4)) {
    --bcfc-a11y-rail-extra: calc(4 * (52px + 12px));
}

/* Reveal, mirroring the rail's own rule. Needed as its own selector because the rail's is
   a descendant of .bcfc-quick-links[data-expanded="true"] and these buttons are not in it. */
.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Same split as the rail's: the dimming lives ONLY inside the expanded state, never on the
   bare [aria-disabled] selector — an unscoped opacity there out-specifies the collapsed
   hide and leaves a stray half-visible "A-" floating on the page with the panel shut. */
.bcfc-a11y[data-expanded="true"] .bcfc-quick-links__item--control[aria-disabled="true"] {
    opacity: 0.45;
}

/* THE SCALE ITSELF.
   `font-size` on :root, not `zoom`. `zoom` reflows the whole px-and-rem estate
   correctly (see the removed comment this replaced, 2026-09-21), but it is a
   legacy, non-standard property, and Chromium computes `position: fixed`
   geometry against a viewport that goes stale once ANY block on the page carries
   a non-1 zoom — not just its own descendants. That is what was leaking a sliver
   of .bcfc-header__mobile-menu (position:fixed; right:0; translateX(100%) to sit
   off-canvas) onto the right edge of the viewport the moment a visitor pressed
   the text-size control, on EVERY page, reported first on /en/cards/ 2026-09-22.

   `font-size` on :root has no such fixed-position side effect, at the cost of
   only moving the rem quarter of the page (measured 2026-09-21: 3287 px
   declarations against 1169 rem) — the px majority does not resize yet. Tracked
   as follow-up CSS-estate work to convert more of those declarations to rem;
   until then this control under-delivers on px-sized copy rather than corrupting
   the fixed header on every page. */
:root {
    font-size: calc(var(--bcfc-font-scale, 1) * 100%);
}

/* ========================================
   QUICK LINKS STRIP (Above Footer)
   ======================================== */
.bcfc-quick-links-strip {
    background: var(--bcfc-surface-sunken, #f8f9fa);
    border-bottom: 1px solid #e9ecef;
}

.bcfc-quick-links-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bcfc-quick-links-strip__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 40px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.bcfc-quick-links-strip__link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    text-decoration: none;
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.bcfc-quick-links-strip__link:hover {
    opacity: 0.7;
}

.bcfc-quick-links-strip__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .bcfc-quick-links-strip__links {
        gap: 12px 24px;
        padding: 10px 0;
    }

    .bcfc-quick-links-strip__link {
        font-size: 0.875rem;
    }
}

/* ========================================
   NEW FOOTER (FIGMA DESIGN)
   ======================================== */
.bcfc-footer {
    background: var(--bcfc-footer-bg, #004a98);
    color: var(--bcfc-footer-text, #fff);
    position: relative;
    /* Separates the footer from the preceding page section so it doesn't sit flush against it.
       Only needed when nothing else already does that — see the override below. */
    margin-top: 64px;
    opacity: 0;
    animation: bcfc-footer-reveal 0.6s ease 0.4s forwards;
}

/* BCFCFooter.cshtml renders .bcfc-footer-meta-section (the page-feedback / related-pages strip)
   immediately above the footer, but only when there is something to put in it. That strip already
   carries a border-top and its own padding, so on those pages the 64px above stacked on top of it and
   read as a large unexplained gap.
   General sibling (~) not adjacent (+): the floating quick-links partial sits between the two in the
   DOM even though it is positioned out of flow. */
.bcfc-footer-meta-section ~ .bcfc-footer {
    margin-top: 0;
}

@keyframes bcfc-footer-reveal {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcfc-footer {
        opacity: 1;
        animation: none;
    }
}

.bcfc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 10px;
}

.bcfc-footer__grid {
    display: grid;
    /* Trimming the inline gap from 72px to 32px widens the three link columns
       (~117px -> ~170px), giving labels like "Complaints and Suggestions"
       enough room to sit on one line without wrapping.
       Narrow brand column (220px) so the description wraps into a balanced two
       lines instead of orphaning the year; the Sahel column (auto) then has room
       to lay the store badges out in a single row. */
    grid-template-columns: 220px repeat(3, 1.75fr) auto;
    /* 32px -> 24px between columns. Safe in the direction the comment above cares
       about: a smaller gap gives the 1.75fr link columns MORE width, so
       "Complaints and Suggestions" keeps its single line. */
    gap: 16px;
    align-items: start;
}

/* Brand Column */
.bcfc-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bcfc-footer__brand-logo {
    display: block;
    width: 120px;
    height: 108px;
}

.bcfc-footer__brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bcfc-footer__brand-description {
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    /* NO max-width. This was 220px, from when the brand block was a narrow grid COLUMN. The
       brand is a full-bleed BAND now (see .bcfc-footer__brand further down), so the cap only
       broke the tagline onto two lines with 800px of empty band beside it. The band's own
       `auto auto` grid already sizes the lockup to its content. */
}

/* Links Column */
.bcfc-footer__links-column {
    display: flex;
    flex-direction: column;
    /* Space between the column heading and its first link. 24px was wider than
       the gap between the columns themselves. */
    gap: 16px;
}

.bcfc-footer__links-column--links .bcfc-footer__section-title,
.bcfc-footer__links-column--contact .bcfc-footer__section-title {
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
    color: #fff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0;
}

/* Scoped for the same reason as the shared rule above — see the note there. This block largely
   duplicates that one for .bcfc-footer__links and wins on source order, so leaving it at one class
   while the other moved to two would have left the winner able to lose the inline axis again. */
.bcfc-footer .bcfc-footer__links {
    list-style: none;
    margin: 0;
    padding-block: 0;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    /* Link-to-link vertical spacing: 16px -> 10px. Unlike the mega menu's links
       these carry no vertical padding of their own, so the gap IS the whole
       rhythm. 10px also matches .bcfc-footer__contact-list, which never got the
       16px bump and so sat visibly tighter than the link columns beside it. */
    gap: 10px;
}

.bcfc-footer__link {
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.bcfc-footer__link:hover {
    color: #fff;
}

/* Sahel App Column */
.bcfc-footer__sahel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.bcfc-footer__sahel-logo {
    background: #113e35;
    border-radius: 17px;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bcfc-footer--islamic .bcfc-footer__sahel-logo {
    background: #EEE06B;
}

.bcfc-footer__sahel-logo img {
    width: 57px;
    height: 57px;
    object-fit: contain;
}

/* NO `text-transform: capitalize`. The copy is sentence case at source
   ("Download the Sahel by BCFC app", SiteChromeViewModelFactory) and the design renders it that
   way; capitalize title-cased it in the browser to "Download The Sahel By BCFC App", which is the
   same class of bug CardsV18.css documents. `white-space: nowrap` is the design's own
   (marketing's bcfc-footer.html sets it on this line) and stays. */
.bcfc-footer__sahel-title {
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: normal;
    color: var(--bcfc-footer-text, #fff);
    text-align: center;
    white-space: nowrap;
    text-transform: none;
}

.bcfc-footer__store-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bcfc-footer__store-badge {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* Footer badges are deliberately smaller than the promotional-page badges. */
.bcfc-footer__store-badge > img {
    display: block;
    width: 80px;
    height: auto;
    object-fit: contain;
}

.bcfc-footer__store-badge:hover {
    opacity: 0.85;
}

.bcfc-footer__store-badge-icon {
    display: block;
}

.bcfc-footer__store-badge-icon img {
    height: 60px;
    width: auto;
    display: block;
}

/* Footer Bottom Bar */
.bcfc-footer__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0;
}

.bcfc-footer__bottom {
    padding: 26px 0 30px;
}

.bcfc-footer__bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.bcfc-footer__bottom-text {
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.2px;
    flex: 1;
}

/* Footer Bar (Copyright + Legal) */
.bcfc-footer__bar {
    border-top: 0;
    background: var(--bcfc-footer-bar-bg, transparent);
    padding: 10px 0;
}

.bcfc-footer__bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bcfc-footer__bar-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bcfc-footer__copyright {
    margin: 0;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
}

/* Editor-authored rich text (footerDisclaimerEn/Ar). Every rule here has to survive whatever
   TinyMCE emits, so it styles the CONTAINER and then resets the descendants it can receive —
   <p>, <strong>, <em>, <a>, <br> — rather than assuming one shape. */
.bcfc-footer__disclaimer {
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
}

/* The RTE wraps each line in its own <p>, which arrives with a UA margin that would space the
   three legal lines apart like body copy. They read as one stacked block. */
.bcfc-footer__disclaimer p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.bcfc-footer__disclaimer strong,
.bcfc-footer__disclaimer b {
    font-weight: 700;
    color: var(--bcfc-footer-text, rgba(255, 255, 255, 0.95));
}

/* Styles any link the editor inserts, not just the CBB one — that is the whole point of the
   field being rich text. Underlined deliberately: /css/index.css IS Bootstrap and loads after
   these bundles, so it underlines links anyway; matching it here keeps the two in agreement
   instead of fighting over specificity. */
.bcfc-footer__disclaimer a {
    color: var(--bcfc-footer-text, rgba(255, 255, 255, 0.95));
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.bcfc-footer__disclaimer a:hover,
.bcfc-footer__disclaimer a:focus-visible {
    color: var(--bcfc-footer-link-hover, #ffffff);
}

.bcfc-footer__updated {
    margin: 0;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
}

.bcfc-footer__separator {
    color: var(--bcfc-footer-separator, rgba(255, 255, 255, 0.3));
}

.bcfc-footer__legal {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    margin: 0;
}

.bcfc-footer__legal-link {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcfc-footer__legal-link:hover {
    color: var(--bcfc-footer-text, rgba(255, 255, 255, 0.95));
}

.bcfc-footer__legal-separator {
    color: var(--bcfc-footer-separator, rgba(255, 255, 255, 0.3));
    font-size: 0.75rem;
}

.bcfc-footer__license {
    margin: 0;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--bcfc-footer-subtle-text, rgba(255, 255, 255, 0.85));
    text-align: end;
}

.bcfc-footer__license-link {
    color: var(--bcfc-footer-text, rgba(255, 255, 255, 0.95));
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.bcfc-footer__license-link:hover {
    color: var(--bcfc-footer-link-hover, #ffffff);
}

@media (max-width: 1200px) {
    .bcfc-footer__grid {
        grid-template-columns: 1.75fr 1.75fr 1.75fr auto;
        /* was 32px 48px — the 48px column gap was the widest trough in the
           footer at exactly the width where space is tightest */
        gap: 24px 32px;
    }

    .bcfc-footer__brand {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    .bcfc-footer__brand-logo {
        width: 120px;
        height: auto;
    }

    .bcfc-footer__sahel {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .bcfc-footer__inner {
        padding: 48px 10px 32px;
    }

    .bcfc-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 24px;
    }

    .bcfc-footer__brand {
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 20px;
    }

    .bcfc-footer__sahel {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
    }

    .bcfc-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bcfc-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bcfc-footer__bar-left {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .bcfc-footer__inner {
        padding: 40px 8px 24px;
    }

    .bcfc-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Single narrow column on phones — let long labels ("Complaints and
       Suggestions") wrap again here rather than overflow the viewport. */
    .bcfc-footer__link {
        white-space: normal;
    }

    .bcfc-footer__brand {
        flex-direction: column;
        gap: 20px;
    }

    .bcfc-footer__brand-logo {
        width: 140px;
        height: auto;
    }

    .bcfc-footer__brand-description {
        font-size: 0.9375rem;
    }

    .bcfc-footer__sahel {
        flex-direction: column;
        align-items: flex-start;
    }

    .bcfc-footer__store-badges {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bcfc-footer__bottom {
        padding: 24px 0;
    }

    .bcfc-footer__bar {
        padding: 12px 0;
    }

    .bcfc-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bcfc-footer__bar-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bcfc-footer__separator {
        display: none;
    }

    .bcfc-footer__legal {
        flex-wrap: nowrap;
        gap: 8px;
    }
}

.bcfc-suhail {
    position: fixed;
    right: 20px;
    bottom: calc(92px + var(--bcfc-fab-lift, 0px));
    z-index: var(--bcfc-z-fab-raised);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.bcfc-suhail__panel,
.bcfc-suhail__fab {
    pointer-events: auto;
}

.bcfc-suhail__panel {
    position: relative;
    width: min(390px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 28px;
    border: 1px solid rgba(255, 212, 84, 0.34);
    background:
        radial-gradient(circle at top right, rgba(255, 210, 92, 0.26), transparent 34%),
        linear-gradient(180deg, rgba(8, 22, 28, 0.96), rgba(7, 18, 25, 0.92));
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(18px);
    color: #ecfffb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s ease;
    overflow: hidden;
}

.bcfc-suhail--open .bcfc-suhail__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.bcfc-suhail__panel-glow {
    position: absolute;
    inset: -40% auto auto 58%;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 212, 84, 0.34), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}

.bcfc-suhail__header,
.bcfc-suhail__brand,
.bcfc-suhail__composer,
.bcfc-suhail__fab {
    display: flex;
    align-items: center;
}

.bcfc-suhail__header {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.bcfc-suhail__brand {
    gap: 12px;
}

.bcfc-suhail__avatar,
.bcfc-suhail__fab-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.bcfc-suhail__avatar {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(255, 223, 122, 0.26), rgba(78, 52, 12, 0.9));
    box-shadow: 0 0 0 1px rgba(255, 222, 136, 0.16) inset;
}

.bcfc-suhail__avatar img,
.bcfc-suhail__fab-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.bcfc-suhail__brand-copy {
    display: grid;
    gap: 3px;
}

.bcfc-suhail__title,
.bcfc-suhail__fab-copy strong {
    font-family: 'Almarai', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.bcfc-suhail__subtitle,
.bcfc-suhail__fab-copy span {
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgba(255, 242, 204, 0.8);
}

.bcfc-suhail__close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #ecfffb;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bcfc-suhail__close:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(90deg);
}

.bcfc-suhail__body {
    position: relative;
    display: grid;
    gap: 14px;
}

.bcfc-suhail__orb {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(118, 255, 219, 0.18), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.bcfc-suhail__message {
    position: relative;
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 18px;
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
}

.bcfc-suhail__message p {
    margin: 0;
}

.bcfc-suhail__message--agent {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 218, 110, 0.16);
    color: #f1fffc;
}

.bcfc-suhail__message--user {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(255, 214, 92, 0.22), rgba(255, 173, 66, 0.16));
    border: 1px solid rgba(255, 221, 129, 0.18);
}

.bcfc-suhail__message-name {
    display: inline-block;
    margin-bottom: 6px;
    font-family: 'Almarai', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 225, 130, 0.84);
}

.bcfc-suhail__chips,
.bcfc-suhail__thread {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bcfc-suhail__thread {
    max-height: 220px;
    overflow: auto;
    padding-right: 4px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.bcfc-suhail__thread::-webkit-scrollbar {
    width: 6px;
}

.bcfc-suhail__thread::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 215, 98, 0.24);
}

.bcfc-suhail__visuals {
    display: grid;
    gap: 10px;
    margin-top: 2px;
}

.bcfc-suhail__visual {
    position: relative;
    min-height: 212px;
    padding: 14px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(160, 255, 231, 0.12);
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(160deg, rgba(15, 34, 42, 0.98), rgba(8, 18, 26, 0.96));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.bcfc-suhail__visual::before,
.bcfc-suhail__visual::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.bcfc-suhail__visual::before {
    inset: auto -16px -26px auto;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
    filter: blur(8px);
}

.bcfc-suhail__visual::after {
    inset: 18px 18px auto auto;
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.bcfc-suhail__visual--aqua {
    background:
        radial-gradient(circle at 85% 18%, rgba(143, 255, 232, 0.24), transparent 28%),
        linear-gradient(160deg, rgba(5, 43, 49, 0.98), rgba(8, 19, 28, 0.96));
}

.bcfc-suhail__visual--violet {
    background:
        radial-gradient(circle at 85% 18%, rgba(132, 158, 255, 0.24), transparent 28%),
        linear-gradient(160deg, rgba(24, 24, 62, 0.98), rgba(11, 17, 33, 0.96));
}

.bcfc-suhail__visual--emerald {
    background:
        radial-gradient(circle at 85% 18%, rgba(146, 255, 182, 0.22), transparent 28%),
        linear-gradient(160deg, rgba(10, 49, 37, 0.98), rgba(8, 21, 24, 0.96));
}

.bcfc-suhail__visual--amber {
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 204, 110, 0.24), transparent 28%),
        linear-gradient(160deg, rgba(62, 35, 12, 0.98), rgba(24, 17, 16, 0.96));
}

.bcfc-suhail__visual-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(232, 255, 250, 0.82);
    font-family: 'Almarai', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bcfc-suhail__visual-title {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    color: #f5fffd;
}

.bcfc-suhail__visual-summary {
    position: relative;
    z-index: 1;
    margin: 8px 0 12px;
    max-width: 100%;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(245, 255, 253, 0.8);
}

.bcfc-suhail__visual-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.bcfc-suhail__visual-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: 'Almarai', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bcfc-suhail__visual-link:hover {
    transform: translateY(-1px);
}

.bcfc-suhail__visual-link--primary {
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    color: var(--bcfc-dark-ink, #332300);
}

.bcfc-suhail__visual-link--secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f5fffd;
}

.bcfc-suhail__visual-art {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    margin-top: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    object-fit: contain;
    object-position: center;
    background: rgba(255, 255, 255, 0.08);
}

.bcfc-suhail__chip {
    padding: 9px 12px;
    border: 1px solid rgba(255, 218, 110, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #ebfffb;
    font-family: 'Almarai', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.bcfc-suhail__chip:hover {
    transform: translateY(-1px);
    background: rgba(255, 214, 92, 0.12);
    border-color: rgba(255, 218, 110, 0.34);
}

.bcfc-suhail__composer {
    gap: 10px;
    margin-top: 14px;
}

.bcfc-suhail__input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 218, 110, 0.16);
    border-radius: 16px;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #f0fffb;
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    outline: none;
}

.bcfc-suhail__input::placeholder {
    color: rgba(222, 255, 247, 0.48);
}

.bcfc-suhail__input:focus {
    border-color: rgba(255, 218, 110, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 210, 92, 0.1);
}

.bcfc-suhail__send {
    border: 0;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    padding: 0;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    color: var(--bcfc-dark-ink, #332300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 14px 26px rgba(255, 179, 0, 0.26);
}

.bcfc-suhail__send svg {
    width: 18px;
    height: 18px;
}

.bcfc-suhail__send:hover,
.bcfc-suhail__fab:hover {
    transform: translateY(-2px);
}

.bcfc-suhail__fab {
    position: relative;
    gap: 0;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border: 1px solid rgba(255, 214, 92, 0.24);
    border-radius: 999px;
    padding: 8px;
    background:
        linear-gradient(135deg, rgba(6, 26, 31, 0.94), rgba(7, 38, 46, 0.88)),
        linear-gradient(135deg, rgba(255, 214, 92, 0.14), rgba(255, 173, 66, 0.12));
    color: #f2fffb;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.bcfc-suhail__fab:hover {
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.34),
        0 0 30px rgba(255, 210, 92, 0.18);
}

.bcfc-suhail__fab-ring {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 214, 92, 0.2);
    opacity: 0.9;
}

.bcfc-suhail__fab-logo--fallback {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.bcfc-suhail__fab-logo--fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bcfc-suhail__fab-logo {
    width: 100%;
    height: 100%;
    padding: 6px;
    background: radial-gradient(circle at top, rgba(255, 223, 122, 0.28), rgba(78, 52, 12, 0.9));
    box-shadow: 0 0 0 1px rgba(255, 222, 136, 0.16) inset;
}

.bcfc-suhail__fab-copy {
    display: none;
}

.bcfc-suhail--open .bcfc-suhail__fab {
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(255, 210, 92, 0.2);
}

/* ========================================
   GUIDELINE SEARCH CARD (Photos/Videos) — Gov Style
   ======================================== */
.bcfc-guideline-search-card {
    background: linear-gradient(135deg, var(--bcfc-surface-raised, #f7fbff) 0%, var(--bcfc-surface-sunken, #edf4fb) 100%);
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: clamp(24px, 3vw, 40px);
    box-shadow: 0 8px 32px rgba(7, 27, 51, 0.08);
}

.bcfc-guideline-search-card__title {
    margin: 0 0 20px;
    font-family: 'Almarai', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 800;
    color: var(--bcfc-ink-strong, #071b33);
    letter-spacing: -0.01em;
    text-transform: capitalize;
}

/* Card head: input + buttons in one horizontal row */
.bcfc-guideline-search-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Form control base (floating label) */
.bcfc-guideline-form-control {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.bcfc-guideline-form-control__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--bcfc-ink, #6d84a0);
    font-size: 1.125rem;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

.bcfc-guideline-form-control--icon-left .bcfc-guideline-input {
    padding-left: 46px;
}

.bcfc-guideline-form-control--icon-left .bcfc-guideline-input:focus ~ .bcfc-guideline-form-control__icon,
.bcfc-guideline-form-control--icon-left .bcfc-guideline-input:not(:placeholder-shown) ~ .bcfc-guideline-form-control__icon {
    color: var(--bcfc-ink-link-hover, var(--bcfc-color-primary));
}

.bcfc-guideline-form-control__label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    color: var(--bcfc-ink, #6d84a0);
    pointer-events: none;
    transition: all 0.2s ease;
    background: var(--bcfc-surface-raised, #ffffff);
    padding: 0 4px;
}

.bcfc-guideline-form-control--icon-left .bcfc-guideline-input:focus ~ .bcfc-guideline-form-control__label,
.bcfc-guideline-form-control--icon-left .bcfc-guideline-input:not(:placeholder-shown) ~ .bcfc-guideline-form-control__label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--bcfc-ink-link-hover, var(--bcfc-color-primary));
}

/* Guideline inputs */
.bcfc-guideline-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #c8d9eb;
    border-radius: 12px;
    background: var(--bcfc-surface-raised, #ffffff);
    color: var(--bcfc-ink, #1f3b57);
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.bcfc-guideline-input:focus {
    border-color: var(--bcfc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 59, 114, 0.12);
}

.bcfc-guideline-input::placeholder {
    color: var(--bcfc-ink, #475569);
}

.bcfc-guideline-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Guideline select */
.bcfc-guideline-form-control--select .bcfc-guideline-select {
    padding: 20px 40px 6px 16px;
}

.bcfc-guideline-form-control--select .bcfc-guideline-form-control__label {
    top: 50%;
    font-size: 0.9375rem;
    background: transparent;
    padding: 0;
}

.bcfc-guideline-form-control--select:focus-within .bcfc-guideline-form-control__label,
.bcfc-guideline-form-control--select .bcfc-guideline-select:not([value=""]) ~ .bcfc-guideline-form-control__label {
    top: 6px;
    font-size: 0.75rem;
    color: var(--bcfc-ink-link-hover, var(--bcfc-color-primary));
}

.bcfc-guideline-select {
    width: 100%;
    padding: 14px 40px 14px 16px;
    border: 1px solid #c8d9eb;
    border-radius: 12px;
    background: var(--bcfc-surface-raised, #ffffff);
    color: var(--bcfc-ink, #1f3b57);
    font-family: 'Almarai', sans-serif;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d84a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcfc-guideline-select:focus {
    border-color: var(--bcfc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 59, 114, 0.12);
}

/* Guideline buttons */
.bcfc-guideline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 12px;
    font-family: 'Almarai', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.bcfc-guideline-btn--primary {
    background: var(--bcfc-color-primary);
    color: var(--bcfc-color-white);
    border: none;
}

.bcfc-guideline-btn--primary:hover {
    background: var(--bcfc-primary-darker);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 59, 114, 0.22);
}

.bcfc-guideline-btn--primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.bcfc-guideline-btn--primary i,
.bcfc-guideline-btn--primary svg {
    transition: transform 0.2s ease;
}

.bcfc-guideline-btn--primary:hover i,
.bcfc-guideline-btn--primary:hover svg {
    transform: translateX(3px);
}

.bcfc-guideline-btn--outline {
    background: var(--bcfc-surface-raised, var(--bcfc-color-white));
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    border: 1px solid #c8d9eb;
    min-height: 46px;
}

.bcfc-guideline-btn--outline:hover {
    border-color: var(--bcfc-color-primary);
    background: var(--bcfc-surface-sunken, #f4f8fc);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 59, 114, 0.08);
}

.bcfc-guideline-btn--outline:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Suggested topic links */
.bcfc-guideline-topics {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.bcfc-guideline-topics__label {
    margin: 0 0 8px;
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    color: var(--bcfc-ink, #58728e);
}

.bcfc-guideline-topics__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.bcfc-guideline-topic-link {
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.bcfc-guideline-topic-link:hover {
    color: var(--bcfc-primary-darker);
    text-decoration: underline;
}

/* Advanced search section */
.bcfc-guideline-advanced {
    margin-top: 12px;
}

.bcfc-guideline-advanced__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--bcfc-ink, var(--bcfc-color-primary));
    font-family: 'Almarai', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bcfc-guideline-advanced__toggle:hover {
    color: var(--bcfc-primary-darker);
    text-decoration: underline;
}

.bcfc-guideline-advanced__toggle i {
    transition: transform 0.25s ease;
    font-size: 0.9375rem;
}

.bcfc-guideline-advanced__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.bcfc-guideline-advanced__body {
    margin-top: 12px;
    padding: 16px;
    background: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.6));
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.bcfc-guideline-advanced__body--collapsed { display: none; }

.bcfc-guideline-advanced__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bcfc-guideline-advanced__row .bcfc-guideline-form-control {
    min-width: 160px;
    flex: 0 1 200px;
}

@media (max-width: 576px) {
    .bcfc-guideline-search-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .bcfc-guideline-search-card__head .bcfc-guideline-form-control {
        min-width: 100%;
    }

    .bcfc-guideline-search-card__head .bcfc-guideline-btn {
        width: 100%;
        justify-content: center;
    }

    .bcfc-guideline-advanced__row {
        flex-direction: column;
        align-items: stretch;
    }

    .bcfc-guideline-advanced__row .bcfc-guideline-form-control {
        flex: none;
        width: 100%;
    }

    .bcfc-guideline-advanced__row .bcfc-guideline-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .bcfc-suhail {
        right: 16px;
        bottom: 88px;
    }

}

@media (max-width: 576px) {
    .bcfc-suhail {
        inset-inline: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }

    .bcfc-suhail__panel {
        width: 100%;
        border-radius: 24px;
    }

    .bcfc-suhail__fab {
        align-self: flex-end;
    }
}

/* Blockquote pull-quote styling */
.govbh-blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--bcfc-surface-sunken, #f8f9fa);
    border-top: 3px solid var(--primary-color, #003b72);
}

.govbh-blockquote__icon {
    margin-bottom: 0.75rem;
    color: var(--bcfc-ink, var(--primary-color, #003b72));
    font-size: 1.5rem;
}
.govbh-blockquote__content {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.govbh-blockquote__title {
    font-weight: 700;
    color: var(--bcfc-text-dark);
}
.govbh-blockquote__designation {
    font-size: 0.9375rem;
    color: var(--bcfc-ink, #666);
}

/* Generic blockquote from rich text editor */
.prose blockquote,
.news-details-content-block blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--bcfc-surface-sunken, #f8f9fa);
    border-top: 3px solid var(--primary-color, #003b72);
    font-style: italic;
    line-height: 1.7;
}

.prose blockquote p,
.news-details-content-block blockquote p {
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* Related articles card */
.news-details-card__image img {
    transition: transform 0.3s ease;
}
.news-details-card:hover .news-details-card__image img {
    transform: scale(1.05);
}
.news-details-section--alt {
    background: var(--bcfc-surface-sunken, #f8f9fa);
}

/* Dynamic Feed Block */
.dynamic-feed {
    padding: 3rem 0;
}
.dynamic-feed__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.dynamic-feed__header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.dynamic-feed__title {
    font-family: 'Almarai', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--bcfc-text-dark);
    margin: 0;
    text-transform: capitalize;
}
.dynamic-feed__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}
.dynamic-feed--compact .dynamic-feed__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.dynamic-feed--list .dynamic-feed__grid {
    grid-template-columns: 1fr;
}
.dynamic-feed__card {
    background: var(--bcfc-surface-raised, white);
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dynamic-feed__card:hover {
    box-shadow: 0 12px 24px rgba(0, 59, 114, 0.12);
    transform: translateY(-2px);
}
.dynamic-feed__card-media {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bcfc-surface-sunken, #eef3f9) 0%, var(--bcfc-surface-muted, #dde7f4) 100%);
}
.dynamic-feed__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.3s ease;
}
.dynamic-feed__card:hover .dynamic-feed__card-media img {
    transform: scale(1.04);
}
.dynamic-feed__card-body {
    padding: 1.25rem;
}
.dynamic-feed__card-role {
    margin: 0 0 0.25rem;
    color: var(--bcfc-ink, var(--bcfc-color-primary));
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dynamic-feed__card-name {
    margin: 0 0 0.5rem;
    color: var(--bcfc-ink, #0f172a);
    font-family: 'Almarai', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
}
.dynamic-feed__card-summary {
    margin: 0 0 1rem;
    color: var(--bcfc-ink, #526173);
    font-size: 0.9625rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dynamic-feed__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bcfc-ink-link, var(--bcfc-color-primary));
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.dynamic-feed__card-link:hover {
    gap: 0.7rem;
    text-decoration: underline;
}

.bcfc-footer__body .bcfc-footer__links {
    margin-top: 0;
}

.bcfc-footer__custom-text {
    color: var(--bcfc-footer-muted-text, rgba(255, 255, 255, 0.72));
    font-size: 0.95rem;
    line-height: 1.65;
}

.bcfc-footer__custom-text p {
    margin: 0 0 0.75rem;
}

.bcfc-footer__custom-text p:last-child {
    margin-bottom: 0;
}

.bcfc-footer__custom-text a,
.bcfc-footer__custom-cta {
    color: var(--bcfc-footer-link, inherit);
    font-weight: 600;
    text-decoration: none;
}

.bcfc-footer__custom-cta {
    display: inline-flex;
    margin-top: 1rem;
}

.bcfc-footer__link--icon {
    gap: 0.5rem;
}

.bcfc-footer__link-icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.bcfc-footer__link-icon svg {
    width: 100%;
    height: 100%;
}

/* NO .rotate-180 / .group-open:rotate-180 RULES HERE — ON PURPOSE.
   tailwind.generated.css (in both critical bundles, so on every page) already ships
   `.rotate-180{rotate:180deg}` and a correctly gated
   `.group-open\:rotate-180:is(:where(.group):is([open],...) *){rotate:180deg}`.
   `rotate` is an INDEPENDENT transform property: it COMPOSES with `transform`
   instead of overriding it, so the `transform: rotate(180deg)` copies that used to
   live here turned the element a full 360deg and the flip disappeared. That is why
   the Arabic breadcrumb chevron still pointed right on /ar (measured on beta
   2026-09-15), and the unconditional `.group-open\:rotate-180` copy also rotated the
   FAQ caret while the details element was CLOSED. Do not re-add either. */

details[open] summary svg {
    transform: rotate(180deg);
}

[dir="rtl"] details[open] summary svg {
    transform: rotate(-180deg);
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Insurance hover utilities — moved from Insurance.cshtml inline <style> */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ==========================================================================================
   FOOTER — 2026-08-23 DESIGN REFRESH
   Source: marketing's bcfc-footer.html ("BCFC FOOTER (4a)"), a hand-built standalone with all
   layout in inline styles. Ported onto the real CMS-fed markup rather than pasted in, because
   pasting the standalone would have thrown away the dynamic columns, the theme presets, the
   disclaimer RTE and every localised label.

   APPENDED AT THE END OF THE FILE ON PURPOSE. The footer's own rules are spread across three
   blocks (about line 2485, about 3290, and breakpoints to about 3600), several of which are LATER
   in the file than the ones they refine. At equal specificity the last declaration wins, so this
   is the only position from which the refresh reliably overrides all of them without inflating
   selectors or reaching for !important the way the standalone had to.

   NOT HER LITERALS. The design hardcodes #004A98 and #004083; this reads --bcfc-footer-bg and
   derives the band a shade darker with color-mix, because BCFCFooter.cshtml sets that token per
   theme preset (islamic / sahel) via viewModel.ThemeStyle. Hardcoding the blue would have
   painted the Islamic and Sahel footers blue.
   ========================================================================================== */

.bcfc-footer {
    /* The band is 12% black over the footer colour. #004A98 resolves to about #00417f, which is
       the design's #004083 to within a point, and it follows the theme instead of fighting it. */
    --bcfc-footer-band-bg: color-mix(in srgb, var(--bcfc-footer-bg, #003b72) 88%, #000);
    --bcfc-footer-band-line: rgb(255 255 255 / .08);
    --bcfc-footer-rule: rgb(255 255 255 / .14);
    --bcfc-footer-head-ink: rgb(255 255 255 / .45);
    /* --bcfc-footer-ink-filter REMOVED 2026-09-01. Its only consumer was the app-store badge
       hover, where it destroyed the artwork — it opens with brightness(0), so any OPAQUE image is
       flattened to one silhouette before the tint is applied. Deleted rather than left unused,
       because a token named "ink filter" invites exactly that reuse. A filter chain of this shape
       is only safe on a monochrome glyph with a transparent ground. */
}

/* The band is the FIRST thing in the footer, flush to its top edge. .bcfc-footer__inner carries
   30px of block padding, which left a strip of the base footer colour above the darker band and
   made it read as a floating stripe rather than as the footer's own header. The bottom padding
   stays — the legal bar still needs it. */
.bcfc-footer__inner {
    padding-block-start: 0;
    /* The design's wrap gutter. A later rule in this file had this at 10px, so at every width
       below about 1220px the columns and the legal line sat hard against the viewport edge. 40px
       here, 24px at 820px below — the design's own two values. */
    padding-inline: 40px;
}

/* ---- the brand band --------------------------------------------------------------------- */
/* Full-bleed via the design own trick: a large symmetrical negative margin paired with equal
   padding, so the darker strip runs to the viewport edges while its content stays on the 1200px
   measure. .bcfc-footer already has overflow:hidden, which is what stops that becoming a
   horizontal scrollbar. */
/* A two-track GRID, not a wrapping flex row. The design's flex + flex-wrap kept breaking onto two
   lines here — measured 173px tall at 1440px, the lockup on one row and the socials on the next —
   because the band's real content box is narrower than the 3200px box the negative margins give it
   and the wrap point is unpredictable. `auto auto` with space-between cannot wrap, so the lockup is
   pinned to the leading edge and the socials to the trailing one at every width above 560px, which
   is what the design draws. The stacked, re-ordered form is restored deliberately at 560px below. */
.bcfc-footer__brand {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-inline: -1000px;
    padding: 22px 1000px;
    border-block-end: 1px solid var(--bcfc-footer-band-line);
    background-color: var(--bcfc-footer-band-bg);
}

.bcfc-footer__brand-id {
    display: flex;
    align-items: center;
    gap: 22px;
}

.bcfc-footer__brand-logo {
    display: block;
    width: 78px;
    height: auto;
}

.bcfc-footer__brand-divider {
    width: 1px;
    height: 34px;
    flex: none;
    background: rgb(255 255 255 / .18);
}

.bcfc-footer__brand-description {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(255 255 255 / .72);
}

/* ---- socials: an inverting pill --------------------------------------------------------- */
/* The design filters an img to brand blue on hover. Ours are INLINE SVGs painting with
   currentColor (Social/_SocialIcon.cshtml), so `color` does the same job exactly, with no filter
   and no rasterisation, and it stays correct if the footer is rethemed. Fill and ink move
   together, which is the button-contrast rule. */
.bcfc-footer__socials {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* Belt and braces with the band's space-between: an auto inline-start margin pins the
       socials to the trailing edge in both a grid and a flex band, and flips for Arabic on its
       own because it is a logical property. */
    margin: 0;
    margin-inline-start: auto;
}

.bcfc-footer__social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    color: rgb(255 255 255 / .72);
    transition: background-color .2s ease, color .2s ease;
}

.bcfc-footer__social-link:hover,
.bcfc-footer__social-link:focus-visible {
    background: var(--bcfc-surface-raised, var(--bcfc-white, #fff));
    color: var(--bcfc-dark-ink-brand, var(--bcfc-footer-bg, #003b72));
    /* The old rule lifted these 2px. The design does not, and a 40px chip hopping inside a
       22px-padded band clipped against the strip edge. */
    transform: none;
}

/* ---- the link columns ------------------------------------------------------------------- */
/* max-content columns pushed apart, not fractional ones: the design sizes each column to its
   longest label so the four blocks read as a set rather than as four equal boxes with ragged
   right edges. white-space: nowrap on the links is what makes max-content meaningful, and the
   1240px breakpoint below is where it has to be released. */
.bcfc-footer__grid {
    grid-template-columns: repeat(3, max-content) max-content;
    /* The live footer is exactly three CMS link columns plus the app card, which is the four
       tracks above. grid-auto-columns is the safety net: if an editor adds a fourth column, the
       extra item gets an implicit max-content track and sits beside the others instead of
       overflowing the row. */
    grid-auto-columns: max-content;
    justify-content: space-between;
    align-items: start;
    gap: 40px 48px;
    padding-block: 35px;
}

.bcfc-footer__links-column,
.bcfc-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bcfc-footer__section-title,
.bcfc-footer__head {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bcfc-footer-head-ink);
}

.bcfc-footer__links,
.bcfc-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bcfc-footer__link,
.bcfc-footer__contact-link {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    /* FULL white, not the muted token. A later rule in this file was resolving these to
       --bcfc-footer-muted-text (measured rgba(255,255,255,.82)); the design's links are #fff and
       only the column HEADINGS are dimmed. Restated here so the two are actually distinguishable. */
    color: var(--bcfc-footer-text, #fff);
    transition: color .2s ease;
}

/* The design hover: the label goes brand yellow and nothing else moves. Legitimate under the
   both-or-neither rule, because the band is unchanged, so this is the "neither" case. It
   replaces the underline-only hover that was there before. */
.bcfc-footer__link:hover,
.bcfc-footer__link:focus-visible,
.bcfc-footer__contact-link:hover,
.bcfc-footer__contact-link:focus-visible {
    color: var(--bcfc-accent, #f3db6e);
    text-decoration: none;
}

/* ---- the Sahel app card ----------------------------------------------------------------- */
/* A bordered card in the fourth column, not a bare stack. justify-self: end keeps it on the
   trailing edge when the three link columns are narrow. */
.bcfc-footer__sahel {
    gap: 20px;
    /* border-box, explicitly: with content-box the 24px padding and 1px border are ADDED to
       width:100%, and the card overflowed its own grid row by 50px once it went full width at
       1240px — the right border ran off the page. */
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 12px;
    background: rgb(255 255 255 / .03);
    width: 100%;
    max-width: 300px;
    justify-self: end;
}

.bcfc-footer__sahel-logo {
    width: 50px;
    height: 50px;
    border-radius: 14px;
}

.bcfc-footer__sahel-logo img {
    width: 40px;
    height: 40px;
}

.bcfc-footer__sahel-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    /* The earlier rule at ~3828 pins this to nowrap. The card is a fixed 300px, so once the A+
       control scales the root size the title outgrew it and ran out of both edges. Wrap at word
       boundaries only (no overflow-wrap) so an Arabic word is never split. */
    white-space: normal;
    max-width: 100%;
}

.bcfc-footer__store-badges {
    gap: 8px;
}

.bcfc-footer__store-badge {
    /* The hover ring follows THIS radius, and the badge's own corners do not: they are baked into
       the SVG paths at 10.08/181.38 of the artwork width (~5.56% — App Store 10.08, Google Play
       10.19, Huawei ~10.8/173.328), so they SCALE with the rendered width while a px value here
       does not. A hardcoded `border-radius: 8px` was therefore drawing a nearly-pill ring around a
       ~18px-tall box whose artwork is rounded ~3.6px; most visible on the Huawei badge, where the
       white read as sitting well outside the corner. Derive both from one variable and the two can
       never disagree again — including at the 80px width the earlier duplicate block below sets,
       which would put the artwork at 4.45px.
       NOT `border-radius: 5.56%`: a percentage resolves horizontally against the width and
       vertically against the height, so on a 64x18 box that is a 3.6px x 1px ellipse — a squashed
       corner, not a scaled one. */
    --bcfc-store-badge-w: 64px;
    border-radius: calc(var(--bcfc-store-badge-w) * 0.0556);
    /* An OUTLINE, not a border: a border joins the box model and would widen each badge by 4px
       on hover, shoving the other two sideways. An outline is painted outside the box and takes
       no layout space. Transparent at rest so only its colour animates. */
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color .2s ease;
}

.bcfc-footer__store-badge > img {
    width: var(--bcfc-store-badge-w);
}

/* NEVER RECOLOUR A STORE BADGE.
   This rule used to paint the <a> white and put --bcfc-footer-ink-filter on the img, copying the
   social pills. That works for the socials because they are monochrome glyphs on a transparent
   ground. These are Apple's, Google's and Huawei's own artwork: an OPAQUE rounded rectangle with
   a white wordmark and, on two of the three, a full-colour logo. The filter chain opens with
   brightness(0), which multiplies every channel by zero, so the whole badge collapsed to a single
   silhouette and the tint that follows repainted that silhouette navy.
   Measured on UAT 2026-09-01 with a real pointer move (CSS.forcePseudoState is a no-op on this
   app): all three badges became solid #004A98-ish rectangles and disappeared into the footer.
   It also breaks all three stores' badge guidelines, which forbid altering the artwork.
   A white ring hugging the badge is the same "goes white" gesture as the social pills, and leaves
   the artwork exactly as shipped. outline-offset stays 0 so the ring cannot collide with the 8px
   strip gap, and there is no lift — the footer design does not move its chips (see the socials'
   transform: none, added for the same reason). */
.bcfc-footer__store-badge:hover,
.bcfc-footer__store-badge:focus-visible {
    background-color: transparent;
    outline-color: var(--bcfc-white, #fff);
    /* An earlier duplicate block in this file hovers these to opacity .85, which on a dark band
       read as the badge fading out. Restated rather than deleted, because that block is what
       styles the badges until this section's overrides land. */
    opacity: 1;
}

.bcfc-footer__store-badge:hover > img,
.bcfc-footer__store-badge:focus-visible > img {
    filter: none;
}

/* ---- the bottom bar --------------------------------------------------------------------- */
.bcfc-footer__bar {
    border-block-start: 1px solid var(--bcfc-footer-rule);
}

/* Same gutter as .bcfc-footer__inner. The bar has its OWN centred wrapper at 10px, so without
   this the legal line and the cookie link sat 30px further out than the columns above them. */
.bcfc-footer__bar-inner {
    padding-inline: 40px;
}

.bcfc-footer__legal-link,
.bcfc-cookie-preferences-link {
    transition: color .2s ease, border-color .2s ease;
}

.bcfc-footer__legal-link:hover,
.bcfc-footer__legal-link:focus-visible,
.bcfc-cookie-preferences-link:hover,
.bcfc-cookie-preferences-link:focus-visible {
    color: var(--bcfc-accent, #f3db6e);
    border-color: var(--bcfc-accent, #f3db6e);
}

/* Above the 1240px step (written as "not max-width", so no new breakpoint value) the four max-content tracks cannot shrink, so when the A+ control grows
   the root size the nowrap link columns plus the 300px card outgrow the row and run past the
   right edge (measured at scale 1.5 on a 1500px viewport: grid 1278px in a 1120px box). Letting
   the same four blocks wrap keeps the design at normal size and drops the app card onto its own
   row when the text is too big for one. */
@media not all and (max-width: 1240px) {
    .bcfc-footer__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .bcfc-footer__sahel {
        flex: 0 1 300px;
    }
}

/* ---- breakpoints ------------------------------------------------------------------------ */
/* The design own three steps. They replace the 1100/992/768 set above, which is why each one
   restates grid-template-columns rather than trusting the earlier rule. */
@media (max-width: 1240px) {
    .bcfc-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    /* The card spans the full width once the columns stop being max-content, otherwise it is a
       300px island next to two stretched link columns. */
    .bcfc-footer__sahel {
        grid-column: 1 / -1;
        max-width: none;
        /* width: auto, not 100%: justify-self: stretch already fills the row, and letting the
           grid size it avoids depending on box-sizing for the border to stay on screen. */
        width: auto;
        justify-self: stretch;
        margin: 0;
        align-items: center;
        text-align: center;
    }

    /* nowrap only bought us max-content sizing; in fractional columns it forces overflow. */
    .bcfc-footer__grid .bcfc-footer__link,
    .bcfc-footer__grid .bcfc-footer__contact-link {
        white-space: normal;
    }
}

@media (max-width: 1024px) {
    /* The licence line is one long sentence; nowrap is only safe on a wide viewport. */
    .bcfc-footer__disclaimer,
    .bcfc-footer__copyright {
        white-space: normal;
    }
}

@media (max-width: 820px) {
    .bcfc-footer__inner,
    .bcfc-footer__bar-inner {
        padding-inline: 24px;
    }

    .bcfc-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-block: 28px;
    }
}

/* Between 560px and 768px the older accordion block would still be collapsing the columns. Force
   them open there so the two-column tablet layout actually shows its links. */
@media (width > 560px) and (width < 768px) {
    .bcfc-footer__links-column > .bcfc-footer__head .bcfc-footer__chevron,
    .bcfc-footer__contact > .bcfc-footer__head .bcfc-footer__chevron {
        display: none;
    }

    .bcfc-footer__links-column > .bcfc-footer__body,
    .bcfc-footer__contact > .bcfc-footer__body {
        display: block;
    }

    /* And no accordion RULE either. The max-width:767.98px block gives every column heading a
       bottom border and 12px of padding, which is the tap-target chrome of a collapsed panel --
       on a tablet, where the columns are open and side by side, it reads as three stray hairlines
       through the middle of the footer. The design only draws them at 560px and below. */
    .bcfc-footer__links-column > .bcfc-footer__head,
    .bcfc-footer__contact > .bcfc-footer__head {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
        cursor: default;
    }
}

/* ---- the legal bar clears the floating action column ------------------------------------ */
/* The bottom-right FAB column (.bcfc-quick-links + .bcfc-scroll-top + .bcfc-ai) is
   position: fixed at `--bcfc-fab-right` and is therefore ALWAYS over the legal bar once the
   visitor reaches the end of the page -- which, the footer being last, is the only time the bar is
   read. Measured at 375px: the disclaimer ran to x=351 and the column occupies 299-355, so the "+"
   toggle sat on top of the last line of the CBB licence sentence.

   The gutter is reserved from the tokens the column itself reads, not from a magic number, so it
   stays correct if the toggle size or offset changes. It is logical (inline-end), so Arabic gets
   it on the correct side -- the column is `inset-inline-end` too. Wide viewports need none of
   this: the bar is a single centred row there and its text ends far short of the column. */
@media (width < 768px) {
    .bcfc-footer__bar-inner {
        padding-inline-end: calc(
            var(--bcfc-fab-right, 20px)
            + var(--bcfc-fab-toggle-size, 56px)
            + 12px
        );
    }
}

/* ---- the brand band stacks at 680px, not 560px ------------------------------------------ */
/* THE STACK POINT IS THE LOCKUP'S OWN MEASURE, not the column breakpoint. On one row the band
   needs logo 78 + 2x22 gap + divider + tagline 297 + 40 band gap + socials 132 + 2x24 wrap
   gutter -- about 672px. Below that the `auto auto` grid squeezed the tagline instead of
   stacking, and "The name Bahrain has trusted since 1983" broke onto two lines with the socials
   still beside it. These rules used to live in the 560px block below; they are hoisted to 680px
   so the tagline keeps its single line all the way down. The ACCORDION deliberately stays at
   560px -- see that block -- so this is intentionally a separate query, not a merge. */
@media (max-width: 680px) {
    .bcfc-footer__brand {
        /* Back to flex here: `order` and `flex-basis: 100%` below need a flex formatting
           context, and display:contents on the lockup only flattens usefully in flex. */
        display: flex;
        flex-wrap: wrap;
        gap: 16px 12px;
        align-items: center;
    }

    /* display: contents dissolves the lockup so the four pieces become band items and can be
       reordered independently, which is the design own device. The tagline then takes a full row
       under the logo and socials instead of being squeezed beside them. */
    .bcfc-footer__brand-id {
        display: contents;
    }

    .bcfc-footer__brand-divider { display: none; }
    .bcfc-footer__brand-logo { order: 1; }
    .bcfc-footer__socials { order: 2; }

    .bcfc-footer__brand-description {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        margin-block-start: 2px;
        font-size: 1rem;
    }
}

/* EXPLICIT `row`, at EVERY width the band is flex -- including phones. Two stale
   `flex-direction: column` declarations above (the max-width:992px and max-width:576px blocks,
   both written when the brand was a grid COLUMN rather than a band) are inert while the band is a
   grid, but bite the moment the 680px block turns it back into flex: the logo centres itself on a
   row of its own and the socials take another, which is the "footer looks wrong on mobile" report
   of 2026-08-26 (measured at 375px: logo at x=149, socials at x=207 on the next row).

   This used to be scoped to `(min-width: 561px)` on the theory that the centred phone stack was
   deliberate. It is not -- marketing's bcfc-footer.html keeps `.bf-band` as
   `display:flex; justify-content:space-between; flex-wrap:wrap` at every width and only reorders
   the pieces at 560px, so logo leading / socials trailing / tagline on its own full-width row is
   the design on a phone too. `order` + `flex-basis: 100%` in the 680px block do the rest. */
@media (max-width: 680px) {
    .bcfc-footer__brand {
        flex-direction: row;
    }
}

@media (max-width: 560px) {
    .bcfc-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bcfc-footer__sahel {
        align-items: center;
        text-align: center;
    }

    /* THE ACCORDION ENGAGES AT 560px, not 767.98px. On a tablet the columns used to collapse to
       tap-to-open while there was still room for two of them side by side. The existing
       .bcfc-footer__head.active mechanism and its script are unchanged; only the width at which
       it engages moves, via the min-width block above. */
    .bcfc-footer__links-column > .bcfc-footer__head,
    .bcfc-footer__contact > .bcfc-footer__head {
        cursor: pointer;
        padding-block-end: 14px;
        border-block-end: 1px solid rgb(255 255 255 / .12);
    }

    .bcfc-footer__links-column,
    .bcfc-footer__contact {
        gap: 0;
    }

    .bcfc-footer__links-column > .bcfc-footer__body,
    .bcfc-footer__contact > .bcfc-footer__body {
        padding-block-start: 16px;
    }

    /* AND THE ACCORDION NEVER WORKED ON THE LINK COLUMNS. The existing collapse rules target
       `.bcfc-footer__links-column > .bcfc-footer__links`, but _DynamicColumn.cshtml nests the list
       one level deeper — `__links-column > __body > __links` — so that selector matched NOTHING and
       only the contact column (which really does hold `__body` directly) ever collapsed. Every CMS
       link column showed a chevron that did nothing. Corrected to `> .bcfc-footer__body`, which is
       the element both column types actually have. */
    .bcfc-footer__links-column > .bcfc-footer__body {
        display: none;
    }

    .bcfc-footer__links-column > .bcfc-footer__head.active + .bcfc-footer__body {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcfc-footer *,
    .bcfc-footer *::before,
    .bcfc-footer *::after {
        transition: none;
    }
}

/* THE DECORATIVE CHEVRON WATERMARK — 4% opacity, bleeding off the bottom-trailing corner.
   The design shipped it as an 85 KB base64 PNG inlined in the markup. It is now an UMBRACO MEDIA
   ITEM ("BCFC Footer Watermark", 1397ac37-9200-4861-b4c9-06ede9ba636e, WebP 560x459, 9.7 KB),
   uploaded through the Management API, so the asset is CMS-managed and an editor can replace it by
   re-uploading over that item — no file in the repo and no redeploy to change it.

   IT IS ON .bcfc-footer__inner, NOT .bcfc-footer. The first attempt used .bcfc-footer::after and
   rendered full-size, fully opaque and pinned to the TOP-LEFT, adding a ~370px empty band above
   the footer. .bcfc-footer__inner is position: relative and z-index: 1 in its own right, which
   gives the pseudo-element a containing block that definitely exists, and it is a box nothing else
   decorates.

   z-index: -1 keeps it behind the footer's own content; the inner's stacking context stops that
   from dropping it behind the footer background. */
.bcfc-footer__inner::after {
    content: "";
    position: absolute;
    inset-inline-end: -40px;
    inset-block-end: -120px;
    z-index: -1;
    width: 420px;
    aspect-ratio: 560 / 459;
    background-image: url("/media/1397ac3792004861b4c906ede9ba636e/b646ca8fe4694fc2a48ad4dc1aa64a53/file.webp");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .04;
    pointer-events: none;
}

/* ==========================================================================================
   APP STORE BADGES — the shared partial finally owns its own layout.
   Shared/_AppStoreBadges.cshtml emits .bcfc-app-badges on ~8 pages, and there was NO base rule
   for it anywhere: every page sheet re-declared `display: flex` itself, and
   IslamicProductDetail.css declared only `justify-content: center` — so on that page the three
   anchors were never flex items. In a wide centred strip that looked fine by accident; the moment
   the strip moved inside the Sahel band's copy column the badges STACKED vertically. Observed at
   657px on /en/islamic-finance/islamic-services/murabaha-financing/.

   Layout only, and at (0,1,0)/(0,1,1) — every page sheet's own (0,2,0) rules for alignment and
   badge height still win, so no page that was already correct moves.
   ========================================================================================== */
.bcfc-app-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bcfc-app-badges a {
    flex: 0 0 auto;
    display: inline-flex;
    border-radius: 8px;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color .2s ease;
}

.bcfc-app-badges img {
    display: block;
    width: auto;
}

/* The same hover ring the footer badges use, and for the same reason: a store badge is Apple's,
   Google's or Huawei's own artwork on an OPAQUE ground, so it must never be recoloured, tinted or
   faded — see the note on .bcfc-footer__store-badge. An outline costs no layout, so a row of
   badges cannot shift on hover. Before this there was no hover here at all.

   NAVY, not the footer's white: measured 2026-09-01, this strip sits on rgb(246, 250, 248) on
   /en/tasheelat-islamic/.../murabaha-financing/, where a white ring is invisible. Note that
   --bcfc-ink-link-hover is NOT the answer — none of the badge strips sit inside a data-surface
   container, so it resolves to #00346a everywhere including the dark bands, which is why the home
   promo's copy of this rule hard-codes white in Home.css instead of reading the token. */
.bcfc-app-badges a:hover,
.bcfc-app-badges a:focus-visible,
.sahel-app-badges__btn:hover,
.sahel-app-badges__btn:focus-visible {
    outline: 2px solid var(--bcfc-navy, #071b33);
    outline-offset: 0;
}

/* .sahel-app-badges__btn has no other rule in any stylesheet — Sahel/SahelAppBadges.cshtml is
   entirely unstyled, and it rendered on none of the pages checked (its HubDetail call site is in
   the isCustomerServiceOperations block, which sits inside a branch no live node reaches). The
   ring is declared anyway so it is correct if that partial is ever wired up; its known call sites
   are all light support pages, hence the same navy. */
.sahel-app-badges__btn {
    border-radius: 8px;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color .2s ease;
}

/* ==============================================================================================
   THE BUTTON — .bcfc-btn
   ==============================================================================================
   ONE button component, and the answer to "why do we have many types of buttons?".

   The count, measured across every stylesheet in wwwroot/css: 513 button-ish classes, of which 154
   DRAW their own button (own padding + radius + fill). 243 of the 513 have no :hover rule at all
   and 18 recolour only the ink. The cause is structural, not carelessness — each page template was
   converted from its own standalone comp and every comp brought its own button, so nothing was ever
   extracted. Adding a 155th is only worth it if it is the one the others can move ONTO.

   THE TREATMENT IS .svc-btn's (InsuranceHubV2.css:293), signed off 2026-08-23 as the reference:
   filled at rest, and on hover it INVERTS — the fill goes to the ink colour and the ink goes to the
   fill colour, with the border holding so nothing moves. Both halves change together, which is the
   both-or-neither rule; and the 2px border is reserved AT REST with the padding reduced to match, so
   the hover can never reflow a row of buttons.

   ADOPTING IT: put .bcfc-btn on the element and set two tokens on it or any ancestor.

       <a class="bcfc-btn" href="…">Discover <span class="material-icons-outlined">arrow_forward</span></a>

       .my-page { --btn-fill: var(--my-green); --btn-ink: #fff; }

   --btn-fill and --btn-ink are the ONLY two knobs. The hover is derived from them, so a page cannot
   end up with a one-sided hover by accident — which is how 18 components got one.

   --btn-ink must never be var(--bcfc-ink-link, …) or any other AMBIENT surface token. Those resolve
   to #fff inside a dark band, and a control that paints its own fill reading the ambient ink is the
   white-on-white bug this codebase has now hit in at least six places. A control with its own fill
   owns its own ink.
   ============================================================================================== */
.bcfc-btn {
    --btn-fill: var(--bcfc-primary, #004a98);
    --btn-ink: var(--bcfc-white, #fff);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 11px 24px;
    border: 2px solid var(--btn-fill);
    border-radius: 10px;
    background: var(--btn-fill);
    color: var(--btn-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease,
                border-color .25s ease, color .25s ease;
}

.bcfc-btn .material-icons-outlined,
.bcfc-btn .material-symbols-outlined { font-size: 1.125rem; }

/* NOT mirrored here any more (2026-10-07). This used to be `[dir="rtl"] .bcfc-btn
   .material-icons-outlined { transform: scaleX(-1) }`, which assumed every button icon is an
   arrow and so mirrored the plain handset, map pin and gallery glyphs too. Directional icons
   (arrows, chevrons, phone_callback…) are tagged `.bcfc-dir-flip` by bcfc-rtl-arrows.js and
   mirrored in rtl-ar.css; objects stay as drawn. */

.bcfc-btn:hover,
.bcfc-btn:focus-visible {
    transform: translateY(-2px);
    background: var(--btn-ink);
    border-color: var(--btn-fill);
    color: var(--bcfc-dark-ink-brand, var(--btn-fill));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--btn-fill) 22%, transparent);
}

.bcfc-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--btn-fill) 45%, transparent);
    outline-offset: 3px;
}

.bcfc-btn:active { transform: translateY(0) scale(.98); }

/* GHOST — starts transparent with the brand ink, so it inverts INTO the filled state. The mirror of
   the default, and the pair reads as one system rather than two unrelated buttons. */
.bcfc-btn--ghost {
    background: transparent;
    color: var(--bcfc-dark-ink-brand, var(--btn-fill));
}
.bcfc-btn--ghost:hover,
.bcfc-btn--ghost:focus-visible {
    background: var(--btn-fill);
    color: var(--btn-ink);
}

/* ON A DARK BAND the two tokens swap round, so a caller does not have to restate the whole
   component to put a button on a photograph or a navy panel. */
.bcfc-btn--on-dark {
    --btn-fill: var(--bcfc-white, #fff);
    --btn-ink: var(--bcfc-primary, #004a98);
}

.bcfc-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .bcfc-btn,
    .bcfc-btn:hover,
    .bcfc-btn:focus-visible,
    .bcfc-btn:active { transform: none; transition: none; }
}

/* ==============================================================================================
   THE ONE HOVER — retrofitted components
   ==============================================================================================
   Every component listed below declares --btn-fill / --btn-ink at rest in its own sheet, exactly
   as .bcfc-btn does, and the inversion is written HERE, once. That is the whole point: the
   treatment is a variable pair plus a single rule, so changing how BCFC buttons hover is one edit
   instead of one per component — which is how the site ended up with 154 button implementations,
   243 with no hover at all and 18 that recoloured only the ink.

   Two treatments, because two rest shapes exist:

     INVERSION  — a solid face. The fill and the ink SWAP. This is .svc-btn's behaviour, the
                  reference signed off 2026-08-23.

                  --btn-fill IS THE REST FILL and --btn-ink IS THE REST INK. Get the two round the
                  wrong way and the "inversion" swaps a control back into its own rest state, i.e.
                  a hover that measurably does nothing — which is how four of these first shipped.
                  A white-filled pill with brand ink declares --btn-fill: white.
     WASH       — a low-alpha tint face. The tint DEEPENS and the ink holds. Swapping a tint makes
                  the ink transparent; the first attempt at this generated an 8%-alpha label on two
                  IR pills, which is why the two shapes are separate.

   Neither reads an ambient --bcfc-ink* token. A control that paints its own fill owns its own ink;
   those tokens resolve to #fff inside a dark band and are the white-on-white trap.

   To retrofit another component: declare the two tokens on it and add it to the list. No new hover.

   CASCADE NOTE — the doubled :hover:hover is deliberate, not a typo.
   Component sheets (ir-collection.css, LoyaltyProgram.css, …) load AFTER this bundle, and their
   rest rules are (0,2,0). A single `:is(...):hover` is also (0,2,0), so at equal weight the later
   REST rule won and the hover changed nothing but the border — measured on
   /en/investor-relations/annual-reports/. Repeating the pseudo-class makes this (0,3,0): above any
   two-class rest rule wherever it loads, and still below anything a page aims at the control
   deliberately. It is the same reason bcfc-page-tabs.css doubles its own selectors.
   ============================================================================================== */
:is(.bcfc-card-detail__apply-ok-btn,
    .bcfc-coll__pgbtn,
    .bcfc-ir-su__cover-pill,
    .bcfc-loyalty-landing__pill,
    .lcalc-cta,
    .lp-pill):hover:hover,
:is(.bcfc-card-detail__apply-ok-btn,
    .bcfc-coll__pgbtn,
    .bcfc-ir-su__cover-pill,
    .bcfc-loyalty-landing__pill,
    .lcalc-cta,
    .lp-pill):focus-visible:focus-visible {
    background: var(--btn-ink);
    border-color: var(--btn-fill);
    color: var(--bcfc-dark-ink-brand, var(--btn-fill));
}

/* The SELECTED pill gets the same rule so the generic hover can never recolour its label while its
   fill holds — the third cause bcfc-page-tabs.css documents, and a measured 1.43:1 on 12 pages. */
:is(.lp-pill, .bcfc-coll__pgbtn)[aria-current="page"]:hover:hover,
:is(.lp-pill, .bcfc-coll__pgbtn).active:hover:hover {
    background: var(--btn-ink);
    color: var(--bcfc-dark-ink-brand, var(--btn-fill));
}

:is(.bcfc-frd__pill,
    .bcfc-ir-fin__year-pill,
    .blm-pill,
    .year-pill):hover:hover,
:is(.bcfc-frd__pill,
    .bcfc-ir-fin__year-pill,
    .blm-pill,
    .year-pill):focus-visible:focus-visible {
    background: color-mix(in srgb, var(--btn-wash-ink) 18%, transparent);
}

/* ==============================================================================================
   .bcfc-btn-shape — THE SHARED BUTTON GEOMETRY
   ==============================================================================================
   Measured 2026-08-23: 215 button-drawing rules across 108 stylesheets, 175 distinct component
   names — and 37 of those components declare geometry that is BYTE-IDENTICAL to another's. The
   biggest cluster was these twelve, in thirteen files, all writing the same seven declarations:

       display:inline-flex; align-items:center; gap:9px;
       padding:.95rem 1.7rem; border-radius:999px; font-weight:800; font-size:15.5px

   Those twelve blocks now keep only their own COLOURS; the shape comes from here. That is the
   simplification, and it is risk-free precisely because what was deleted was character-for-
   character what this rule provides — not a redesign, a de-duplication.

   Why a selector LIST and not a class on the markup: the class names are emitted by ~13 Razor
   views, and swapping them all is a markup change on a deadline. Listing them costs one rule and
   deletes twelve. When a view is next touched, give it .bcfc-btn (above) and drop its name here.

   `.btn` is deliberately NOT in the list: it is Bootstrap's, it appears in 18 sheets, and merging
   it would reach far beyond buttons anyone has looked at.
   ============================================================================================== */
.bcfc-about__hero-btn,
.bcfc-about__cta .bcfc-about__cta-btn,
.bcfc-aboutus-channels__btn,
.ct-btn,
.bcfc-commercial-sme__btn,
.band .btn-sahel,
.bcfc-ir-csr__btn,
.btn-sahel,
.bcfc-ir-landing__btn,
.bcfc-ir-sh__btn,
.bcfc-media-btn{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.96875rem;
}

/* PHONES: the desktop geometry above (15.5px bold, .95rem x 1.7rem) is a ~50px-tall slab in a narrow
   column (owner, 2026-10-18: "the button is bigger than my forehead"). rem units, so the A+/A-
   control still scales it. Same 12 classes, so they stay identical to each other. */
@media (max-width: 640px) {
    .bcfc-about__hero-btn,
    .bcfc-about__cta .bcfc-about__cta-btn,
    .bcfc-aboutus-channels__btn,
    .ct-btn,
    .bcfc-commercial-sme__btn,
    .band .btn-sahel,
    .bcfc-ir-csr__btn,
    .btn-sahel,
    .bcfc-ir-landing__btn,
    .bcfc-ir-sh__btn,
    .bcfc-media-btn{
        gap: 6px;
        padding: .6rem 1.1rem;
        font-size: 0.8125rem;
    }
}

/* ---- Line breaking: no single word may sit alone on a row (owner, 2026-10-08/09) -----------
   SITE-WIDE. `text-wrap` is an inherited property, so one declaration on body reaches every text
   node on every page, whatever its element or class name: `pretty` rebalances the last lines so the
   final row is never one orphaned word. Short, label-like things (headings, titles, eyebrows, chips,
   badges, pills, tags, buttons, tabs, table heads) take `balance` instead, which spreads their words
   evenly. :where() keeps specificity at zero so a page sheet can still opt out of either.
   Words are never split (RULE 5, Arabic): this only moves whole words between rows. */
body {
    text-wrap: pretty;
}

/* Re-asserted on the prose elements themselves: `balance` below is inherited, so a wrapper whose
   class merely contains "title" or "chip" must not turn the paragraphs inside it into balanced text
   (balance only works up to six lines and then silently stops protecting the last row). */
:where(p, li, dd, dt, td, blockquote, figcaption) {
    text-wrap: pretty;
}

:where(h1, h2, h3, h4, h5, h6, th, summary, legend, button, [role="button"], [role="tab"],
       [class*="__title"], [class*="-title"], [class*="__heading"], [class*="__head"], [class*="__name"],
       [class*="eyebrow"], [class*="kicker"], [class*="__label"], [class*="chip"], [class*="badge"],
       [class*="pill"], [class*="__tag"], [class*="-tag"], [class*="btn"], [class*="__tab"], [class$="-tab"]) {
    text-wrap: balance;
}

/* Flip cards carry no corner "+" anywhere (owner, 2026-10-12). The views no longer emit it; this
   also covers card markup pasted into rawHtml pages. */
:is(.ef-plus, .sig__plus, .bcfc-card-detail__sig-plus, .flip-plus) {
    display: none;
}

/* Flip cards turn on HOVER where there is a mouse, and on TAP where there is not (owner,
   2026-10-12). The click handlers in insurance-reveal.js and imtiaz-card-detail.js stand down on
   hover devices, otherwise a click while hovering would flip the card back. Keyboard still
   toggles the .flipped class. The hint icon is the nudge: it spins on hover, and on touch it
   turns every few seconds so the card reads as turnable before anyone tries it. */
@media (hover: hover) and (pointer: fine) {
    :is(.ins-v2 .ef-card, .bcfc-card-detail__sig-card, .we2 .sig__card):hover
        :is(.ef-flip, .bcfc-card-detail__sig-flip, .sig__flip) {
        transform: rotateY(180deg);
    }

    :is(.ins-v2 .ef-card, .bcfc-card-detail__sig-card, .we2 .sig__card):hover
        :is(.ef-hint, .bcfc-card-detail__sig-hint, .sig__hint) .material-icons-outlined {
        transform: rotate(180deg);
    }
}

@media (hover: none) and (prefers-reduced-motion: no-preference) {
    :is(.ins-v2 .ef-card, .bcfc-card-detail__sig-card, .we2 .sig__card):not(.flipped, .is-flipped)
        :is(.ef-hint, .bcfc-card-detail__sig-hint, .sig__hint) .material-icons-outlined {
        animation: bcfc-flip-nudge 4s ease-in-out 1.5s infinite;
    }
}

@keyframes bcfc-flip-nudge {
    0%, 70%, 100% { transform: rotate(0); }
    85% { transform: rotate(180deg); }
}

/* A flip card's two faces share ONE implicit auto grid track, and an auto track will not shrink
   below the widest face's min-content. On the World Elite row the first card's back face needs
   275px in a 253px cell, so the track grew to 325px and card 1 spilled over card 2. The track is
   pinned to the cell and the faces may shrink to it (owner, 2026-10-12). */
:is(.ef-flip, .bcfc-card-detail__sig-flip, .sig__flip) {
    grid-template-columns: minmax(0, 1fr);
}

:is(.ef-face, .bcfc-card-detail__sig-face, .sig__face) {
    min-inline-size: 0;
}

/* The back-face footer label ("PRIMARY CARDHOLDER") ran past the card's edge: it is an
   inline-flex box that sizes to its text, and the face's 3rem side padding left it ~180px, less
   than the label needs once uppercased and tracked. Owner rules: text never overflows, a word is
   never split, and a wrapped line never holds a lone word. So: less side padding, a smaller
   label that fits on one line, and where it cannot (a long footer) `pretty` wrapping, which
   keeps the last line from being a single word. */
.we2 .sig__card .sig__back {
    padding-inline: 1.25rem;
}

.we2 .sig__card .sig__back .sig__text,
.we2 .sig__card .sig__back .sig__foot {
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
}

.we2 .sig__card .sig__back .sig__foot {
    max-inline-size: 100%;
    min-inline-size: 0;
    white-space: normal;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

/* The front face of a card carried 3rem of side padding (48px a side) inside a ~190px card, leaving
   ~100px of text column: "A concierge / in / your pocket." Titles there could never keep two words
   on a row. 1.25rem a side (the same as the back face above) gives the text ~150px. */
.we2 .sig__card .sig__face {
    padding-inline: 1.25rem;
}

/* DARK MODE LOGIN PILL (owner, 2026-10-13): yellow fill, dark-green label and mark. The mark is
   currentColor, so setting color is enough for the icon. Hover keeps the fill-and-text-together
   rule above: a transparent pill with the yellow as both ring and ink. */
[data-bcfc-theme="dark"] .bcfc-header__login-btn {
    background: #ece07c;
    color: #1e3d35;
}
[data-bcfc-theme="dark"] .bcfc-header__login-btn:hover {
    background: transparent;
    border-color: #ece07c;
    color: #ece07c;
}
/* The surface map marks this pill as a dark surface, which would lift descendant ink back to
   light; the label, its spans and the mark must follow the pill's own colour. */
[data-bcfc-theme="dark"] .bcfc-header__login-btn :is(.bcfc-header__login-label, .bcfc-header__login-text, .bcfc-header__login-text span, .bcfc-header__login-mark) {
    color: inherit;
}