@charset "UTF-8";
/* THE SITE'S CONTENT COLUMN, as a token — added 2026-09-03 so a page sheet can line its own
   bands up with the shared bands instead of guessing. It was a bare literal here, and the pages
   that needed to match it hardcoded their own: /en/loyalty-programme/ shipped 1120px in one sheet
   and 1200px in another, so its bands sat 64px narrower than the Related Pages band immediately
   below them. Declared on :root, not on the class, so a caller that is not inside a
   .bcfc-pattern-shell can still read it. */
:root {
  --bcfc-shell-max: 80rem;
}

.bcfc-pattern-shell {
  max-width: var(--bcfc-shell-max, 80rem);
  margin: 0 auto;
  padding-inline: 1rem;
}

/* ============================================================
   Back-to-listing link (Shared/_BackLink.cshtml). Promoted from the Loyalty V2 detail
   page's .lofd-crumb, which used page-scoped --lofd-blue/--lofd-red variables that only
   resolved on pages loading LoyaltyOfferDetailV2.css. This rule uses the site-wide tokens
   directly so the component works on any page, and lives in this file because it's part
   of the global bundle-main(.css|-rtl.css) — see Program.cs.
   ============================================================ */
.bcfc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--bcfc-ink-link, var(--bcfc-blue, #004a98));
  font-weight: 800;
  font-size: 0.90625rem;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
}

.bcfc-back-link:hover {
  gap: 12px;
  color: var(--bcfc-dark-ink-brand, var(--bcfc-blue, #004a98));
}

.bcfc-back-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

[dir=rtl] .bcfc-back-link svg {
  transform: scaleX(-1);
}

.bcfc-pattern-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-family: Almarai, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(7, 27, 51, 0.08);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcfc-pattern-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(7, 27, 51, 0.12);
}

.bcfc-pattern-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 74, 152, 0.18);
}

/* --bcfc-primary-darker IS DEFINED IN NO STYLESHEET IN THIS REPO, so the hover below was an
   invalid declaration the parser dropped and the primary pattern button had NO hover colour at
   all. That is the bug pages were locally patching — RealEstateHubV3.css restates this hover for
   its own scope and says so. Fixed here with the button tokens, so the patch can go and the
   hover recolours fill AND ink together instead of leaving the label behind. */
.bcfc-pattern-button--primary {
  background: var(--bcfc-btn-fill, var(--bcfc-color-primary));
  color: var(--bcfc-btn-ink, var(--bcfc-color-white));
}

/* FOLLOWS THE SHARED BUTTON, whatever it is doing — this rule reads the `--bcfc-btn-*-hover`
   tokens, so it tracked bcfc-button.css from a fill darkening (pre-2026-09-06) to the inversion
   (2026-09-06) and now back to a deepened fill with the label left alone (2026-09-07, owner: *"if
   background is not white the text cannot be black so it should be white"*). Nothing here needs to
   change again if the shared hover changes.
   The LITERAL FALLBACKS are what needed the edit: they are only reached if bcfc-button.css did not
   load, and they described the inversion — a transparent face with navy ink, i.e. the state the
   amendment rules out. They now mirror the token values. `.bcfc-pattern-button` reserves
   `1px solid transparent`, so the border colour moves with the fill and nothing reflows. */
.bcfc-pattern-button--primary:hover,
.bcfc-pattern-button--primary:focus-visible {
  background: var(--bcfc-btn-fill-hover, color-mix(in srgb, var(--bcfc-color-primary) 86%, black));
  color: var(--bcfc-btn-ink-hover, var(--bcfc-color-white, #fff));
  border-color: var(--bcfc-btn-border-hover, transparent);
  box-shadow: none;
}

.bcfc-pattern-button--secondary {
  border: 1px solid #cbd5e1;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  color: var(--bcfc-text-dark);
  box-shadow: none;
}

.bcfc-pattern-button--secondary:hover {
  background: var(--bcfc-surface-raised, var(--bcfc-gray-50));
  border-color: #9fc2eb;
}

.bcfc-pattern-hero {
  padding: 2.5rem 0 3rem;
}

.bcfc-pattern-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, var(--bcfc-surface-sunken, #eef5ff) 0%, var(--bcfc-surface-raised, #f8fbff) 100%);
}

.bcfc-pattern-hero__title {
  margin: 0;
  color: var(--bcfc-text-dark);
  font-family: Almarai, sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
}

.bcfc-pattern-hero__subtitle {
  margin: 1rem 0 0;
  max-width: 44rem;
  color: var(--bcfc-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.bcfc-pattern-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bcfc-pattern-hero__media {
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--bcfc-surface-muted, var(--bcfc-gray-200));
  box-shadow: 0 20px 40px rgba(7, 27, 51, 0.12);
}

.bcfc-pattern-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.bcfc-pattern-section-intro {
  margin-bottom: 1.5rem;
}

.bcfc-pattern-section-intro--centered {
  text-align: center;
}

.bcfc-pattern-section-intro__title {
  margin: 0;
  color: var(--bcfc-text-dark);
  font-family: Almarai, sans-serif;
  font-size: clamp(1.75rem, 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: capitalize;
}

.bcfc-pattern-section-intro__summary {
  margin: 0.875rem 0 0;
  max-width: 52rem;
  color: var(--bcfc-text-secondary);
  line-height: 1.85;
}

.bcfc-pattern-section-intro--centered .bcfc-pattern-section-intro__summary {
  margin-inline: auto;
}

.bcfc-pattern-links-grid__items {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.bcfc-pattern-links-grid__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 100%;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--bcfc-border);
  border-radius: 1.25rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  color: var(--bcfc-text-dark);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(7, 27, 51, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bcfc-pattern-links-grid__item:hover {
  transform: translateY(-2px);
  border-color: #9fc2eb;
  box-shadow: 0 16px 30px rgba(7, 27, 51, 0.1);
}

.bcfc-pattern-links-grid__item h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
}

.bcfc-pattern-links-grid__item p {
  margin: 0.5rem 0 0;
  color: var(--bcfc-text-secondary);
  line-height: 1.7;
}

.bcfc-pattern-links-grid__item i {
  margin-top: 0.125rem;
  color: var(--bcfc-ink-link, var(--bcfc-color-primary));
  font-size: 1.25rem;
}

.bcfc-pattern-toolbar {
  margin-bottom: 1.5rem;
}

.bcfc-pattern-toolbar__row {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.bcfc-pattern-toolbar__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bcfc-pattern-toolbar__heading h2 {
  margin: 0;
  color: var(--bcfc-text-dark);
  font-family: Almarai, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
}

.bcfc-pattern-toolbar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  background: var(--bcfc-blue-light);
  color: var(--bcfc-ink, var(--bcfc-color-primary));
  font-size: 0.9375rem;
  font-weight: 700;
}

.bcfc-pattern-toolbar__sort {
  width: 100%;
  max-width: 22rem;
  justify-self: end;
}

.bcfc-pattern-toolbar__sort label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bcfc-dark-ink, var(--bcfc-gray-800));
}

.bcfc-pattern-toolbar__sort select {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bcfc-gray-300);
  border-radius: 0.875rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  color: var(--bcfc-dark-ink, var(--bcfc-gray-900));
}

.bcfc-pattern-support {
  margin-top: 2rem;
}

.bcfc-pattern-support__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.25rem;
  background: linear-gradient(120deg, var(--bcfc-surface-sunken, #eaf3ff) 0%, var(--bcfc-surface-raised, #dce9fb) 100%);
  border: 1px solid rgba(0, 74, 152, 0.14);
  overflow: hidden;
}

.bcfc-pattern-support__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.25rem 2rem;
}

.bcfc-pattern-support__media {
  order: -1;
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bcfc-surface-muted, var(--bcfc-gray-200, #e2e8f0));
}

.bcfc-pattern-support__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcfc-pattern-support__copy h2 {
  margin: 0;
  color: var(--bcfc-text-dark);
  font-family: Almarai, sans-serif;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.bcfc-pattern-support__copy p {
  margin: 0.875rem 0 0;
  max-width: 32rem;
  color: var(--bcfc-text-secondary);
  line-height: 1.8;
}

.bcfc-pattern-support__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bcfc-pattern-support__actions .bcfc-pattern-button {
  min-height: 2.875rem;
  padding: 0.75rem 1.375rem;
  font-size: 0.9625rem;
}

.bcfc-pattern-support__actions .bcfc-pattern-button:hover {
  transform: translateY(-2px);
}

.bcfc-pattern-support__actions .bcfc-pattern-button i {
  font-size: 1rem;
}

.bcfc-pattern-page-meta {
  /* Themeable accent — blue by default, Islamic green under body.is-islamic */
  --pm-accent: var(--bcfc-primary, #004a98);
  --pm-tint: var(--bcfc-surface-sunken, #eff6ff);
  margin-top: 2rem;
}

body.is-islamic .bcfc-pattern-page-meta {
  --pm-accent: var(--bcfc-green-dark, #113e35);
  --pm-tint: var(--bcfc-surface-sunken, #eef6f2);
}

.bcfc-footer-meta-section {
  padding: 0;
}

.bcfc-footer-meta-section .bcfc-pattern-page-meta {
  margin-top: 0;
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.bcfc-pattern-page-meta__divider {
  display: none;
}

.bcfc-pattern-page-meta__row {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.bcfc-pattern-page-meta__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.bcfc-pattern-page-meta__title {
  font-weight: 700;
  color: var(--bcfc-text-dark);
}

.bcfc-pattern-page-meta__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bcfc-pattern-page-meta__list a,
.bcfc-pattern-page-meta__list button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bcfc-gray-300);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --pm-accent FIRST, not as the fallback. This read used to be
       `var(--bcfc-ink-link, var(--pm-accent))`, which looks like "the accent, unless a surface
       overrides it" and behaves as the opposite: bcfc-surface-map.css declares --bcfc-ink-link on
       a long list of legacy wrappers - .bcfc-meta-utilitybar__card among them - so on any page
       inside one the fallback NEVER fired and the icons took brand blue. That is why they stayed
       blue on the Islamic pages while this band's own `body.is-islamic` rule below was correctly
       turning --pm-accent green: the intent was in the file, the token order defeated it. Same
       shape as the "fallback passed as an argument" trap in CLAUDE.md.
       Non-Islamic output is UNCHANGED - --pm-accent defaults to --bcfc-primary, the same #004a98
       the surface token was resolving to. */
  color: var(--bcfc-dark-ink-green, var(--pm-accent));
  text-decoration: none;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bcfc-pattern-page-meta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  line-height: 1;
}

.bcfc-pattern-page-meta__badge svg {
  width: 1rem;
  height: 1rem;
}

.bcfc-pattern-page-meta__list a:hover,
.bcfc-pattern-page-meta__list button:hover {
  background: var(--pm-accent);
  border-color: var(--pm-accent);
  color: var(--bcfc-color-white);
  transform: translateY(-2px);
}

.bcfc-pattern-page-meta__list button[data-copied=true] {
  background: var(--pm-tint);
  border-color: var(--pm-accent);
  color: var(--bcfc-ink-muted, var(--pm-accent));
}

/* ---------------------------------------------------------------------------
   DARK THEME: keep the ACCENT, lifted.                        (phase 5 exception)

   `color: var(--bcfc-ink-muted, var(--pm-accent))` reads as "the accent, unless a
   surface overrides it". In DARK mode bcfc-theme-dark.css defines the ink tokens at
   the root, so the ink always wins and the accent is never seen — the element goes
   generic ink and loses its identity. (Legible, just wrong; see section 3.8 of
   docs/design-system/08-surface-vocabulary.md, which lists this as one of four.)

   Fixed by overriding the DECLARATION under the theme attribute rather than by
   reordering the chain. Reordering is the house fix for this shape — see the long
   note on .bcfc-pattern-page-meta__list in bcfc-page-patterns.css — but it only
   works when the accent and the ink resolve to the same colour anyway, and --pm-accent
   is not brand blue.

   `color-mix` with `white`, NOT a hardcoded lift, because --pm-accent is CONTEXTUAL:
   it is brand blue by default, --bcfc-green-dark on the Islamic pages and
   --sahel-chrome-accent on Sahel. Mixing lifts whatever it resolves to in that
   scope. 65% was measured: at 55% the Sahel green lands at 4.13:1 on
   --bcfc-surface-inverse, below AA. At 65% every accent in the estate clears AA on
   every tier (worst 5.36:1).

   `white` rather than #ffffff on purpose — a raw hex here would raise this file's
   frozen count in gate 8 for no reason.

   Light mode cannot reach this rule: the attribute is absent, so the selector does
   not match. --------------------------------------------------------------------- */
:root[data-bcfc-theme=dark] .bcfc-pattern-page-meta__list button[data-copied=true] {
  color: color-mix(in srgb, white 65%, var(--pm-accent));
}

.bcfc-pattern-page-meta__list a:focus-visible,
.bcfc-pattern-page-meta__list button:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

.bcfc-pattern-page-meta__updated {
  display: flex;
  align-items: center;
}

.bcfc-pattern-page-meta__updated p {
  margin: 0;
  color: var(--bcfc-text-secondary);
}

.bcfc-pattern-page-meta__updated b {
  color: var(--bcfc-text-dark);
}

/* ========================================
   Combined utility bar
   Merges "Was this page helpful?" (_PageFeedback) and "Share this page"
   (_PageMeta) into ONE card so they read as a single unit above the footer.
   Both partials keep their own markup/classes/data-attrs (and JS) — these
   rules just flatten their individual card/shell chrome and lay them side by
   side. Scoped to .bcfc-meta-utilitybar so each partial is unchanged if it is
   ever rendered standalone elsewhere.
   ======================================== */
.bcfc-meta-utilitybar {
  padding: 1.75rem 0 2rem;
}

.bcfc-meta-utilitybar__card {
  --ub-surface: var(--bcfc-surface-sunken, #f5f9ff);
  --ub-border: rgba(0, 74, 152, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  max-width: 60rem;
  margin-inline: auto;
  padding: 1.15rem 1.6rem;
  border: 1px solid var(--ub-border);
  border-radius: 1.1rem;
  background: var(--ub-surface);
}

body.is-islamic .bcfc-meta-utilitybar__card {
  --ub-surface: var(--bcfc-surface-sunken, #f0f7f4);
  --ub-border: rgba(17, 62, 53, 0.16);
}

/* Strip each partial's own section spacing, nested shell, inner card and
   divider — the utility-bar card owns all of that now. */
.bcfc-meta-utilitybar .bcfc-pattern-page-feedback,
.bcfc-meta-utilitybar .bcfc-pattern-page-meta {
  padding: 0;
  margin: 0;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-feedback {
  flex: 1 1 260px;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-meta {
  position: relative;
  flex: 0 1 auto;
  border-top: none;
  padding-inline-start: 2rem;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-feedback .bcfc-pattern-shell,
.bcfc-meta-utilitybar .bcfc-pattern-page-meta .bcfc-pattern-shell {
  max-width: none;
  margin: 0;
  padding: 0;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-feedback__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-feedback__message {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-meta__row {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  justify-items: start;
}

.bcfc-meta-utilitybar .bcfc-pattern-page-meta__updated p {
  font-size: 0.8825rem;
  color: var(--bcfc-ink-muted, var(--bcfc-text-muted, #94a3b8));
}

.bcfc-meta-utilitybar .bcfc-pattern-page-meta__updated b {
  font-weight: 700;
  color: var(--bcfc-ink-muted, var(--bcfc-text-secondary, #4a5568));
}

/* Divider between the two zones — vertical on wide screens */
.bcfc-meta-utilitybar .bcfc-pattern-page-meta::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.25rem;
  background: var(--ub-border);
}

@media (max-width: 768px) {
  .bcfc-meta-utilitybar__card {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  /* The wide layout gives this zone "flex: 1 1 260px" to claim horizontal space. Once the
       card flips to a column, 260px becomes a flex-basis on the BLOCK axis — a 260px minimum
       height for ~95px of content, leaving a large dead gap above the divider. Size to
       content instead. */
  .bcfc-meta-utilitybar .bcfc-pattern-page-feedback {
    flex: 0 0 auto;
  }
  .bcfc-meta-utilitybar .bcfc-pattern-page-meta {
    padding-inline-start: 0;
    padding-top: 1rem;
  }
  /* Divider becomes a horizontal rule between the stacked zones */
  .bcfc-meta-utilitybar .bcfc-pattern-page-meta::before {
    inset-inline-start: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 1px;
  }
  .bcfc-meta-utilitybar .bcfc-pattern-page-feedback__inner,
  .bcfc-meta-utilitybar .bcfc-pattern-page-meta__share,
  .bcfc-meta-utilitybar .bcfc-pattern-page-meta__row {
    justify-content: center;
    justify-items: center;
  }
}
.bcfc-pattern-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bcfc-border);
  border-radius: 1.5rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.06);
  overflow: hidden;
}

.bcfc-pattern-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bcfc-pattern-card__image {
  overflow: hidden;
  background: var(--bcfc-surface-muted, var(--bcfc-gray-200));
}

.bcfc-pattern-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.bcfc-pattern-card__image--portrait img {
  aspect-ratio: 4/4.5;
}

.bcfc-pattern-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem;
}

/* Eyebrows are the .bcfc-eyebrow component (scss/components/_eyebrow.scss); placement only here. */
.bcfc-pattern-kicker {
  margin-block-end: 0.875rem;
  line-height: 1.5;
}

.bcfc-pattern-card__eyebrow {
  margin-block-end: 0.625rem;
  line-height: 1.5;
}

.bcfc-pattern-card__body h3 {
  margin: 0;
  color: var(--bcfc-text-dark);
  font-family: Almarai, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.45;
}

.bcfc-pattern-card__body p {
  margin: 0.75rem 0 0;
  color: var(--bcfc-text-secondary);
  line-height: 1.8;
}

.bcfc-pattern-card__cta,
.bcfc-pattern-card__foot {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--bcfc-ink-link, var(--bcfc-color-primary));
  font-weight: 700;
  text-decoration: none;
}

.bcfc-pattern-card__meta {
  color: var(--bcfc-ink-muted, #64748b);
  font-size: 0.95rem;
  font-weight: 600;
}

.bcfc-pattern-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bcfc-pattern-branch__row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.bcfc-pattern-branch__row i {
  margin-top: 0.2rem;
  color: var(--bcfc-ink, var(--bcfc-color-primary));
}

@media (min-width: 768px) {
  .bcfc-pattern-shell {
    padding-inline: 2rem;
  }
  .bcfc-pattern-toolbar__row,
  .bcfc-pattern-page-meta__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bcfc-pattern-support__card {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: stretch;
  }
  .bcfc-pattern-support__content,
  .bcfc-pattern-support__media {
    order: initial;
  }
  .bcfc-pattern-support__media {
    aspect-ratio: auto;
  }
  .bcfc-pattern-links-grid__items--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bcfc-pattern-links-grid__items--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bcfc-pattern-links-grid__items--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bcfc-pattern-page-meta__updated {
    justify-content: end;
  }
}
@media (min-width: 1024px) {
  .bcfc-pattern-shell {
    padding-inline: 4rem;
  }
  .bcfc-pattern-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
    padding: 2.5rem;
  }
}
/* ========================================
   Page Feedback (Thumbs Up/Down)
   ======================================== */
.bcfc-pattern-page-feedback {
  /* Themeable accent — blue on the conventional site, green on Islamic pages.
       Consumed by the buttons, Continue CTA, select focus and the card surface. */
  --fb-accent: var(--bcfc-primary, #004a98);
  --fb-accent-ink: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark, #00346a));
  --fb-surface: var(--bcfc-surface-sunken, #f5f9ff);
  --fb-border: rgba(0, 74, 152, 0.14);
  /* Yes = green, No = red (Bahaa, 2026-08-18), the two hexes he supplied. NOT theme colours:
       they are the ANSWER's meaning, so unlike --fb-accent they do not turn green on Islamic
       pages — a red "No" has to stay red everywhere or it stops reading as the negative choice.

       ON HOVER ONLY (Bahaa, 2026-08-18 — "only on hover make it"). The bar sits at the foot of
       every page, so both buttons rest in the neutral grey of .bcfc-pattern-page-feedback__btn and
       the colour is the response to the pointer, not decoration the reader has to look past. The
       recorded vote (.--active, written by page-feedback.ts) keeps the colour too — that class is
       the only visible trace of having voted, so it shares the hover declarations rather than
       reverting to grey.

       The hex is the BORDER and the TINT — what reads as "green" and "red". The LABEL is a darkened
       mix of the same colour, because the 14px bold text lands on the tint, not on white, and WCAG
       does not count 14px bold as large text: the raw green is 3.2:1 there. Mixed toward the brand
       navy the two labels measure 5.6:1 and 5.1:1 on the tint they actually sit on, and the label
       moves with the fill rather than the fill changing alone (house rule, docs/design-system).
       Where color-mix is unsupported the mixes drop and the labels fall back to the inherited body
       ink — the buttons lose their tint, never their legibility, and the raw border colour still
       carries the meaning. */
  --fb-yes: #3d9c71;
  --fb-yes-ink: color-mix(in srgb, var(--fb-yes) 58%, var(--bcfc-navy, #071b33));
  --fb-no: #c94435;
  --fb-no-ink: var(--bcfc-dark-ink-red, color-mix(in srgb, var(--fb-no) 80%, var(--bcfc-navy, #071b33)));
  padding: 1.5rem 0 2rem;
}

body.is-islamic .bcfc-pattern-page-feedback {
  --fb-accent: var(--bcfc-green-dark, #113e35);
  --fb-accent-ink: var(--bcfc-green-darker, #0c2d27);
  --fb-surface: var(--bcfc-surface-sunken, #f0f7f4);
  --fb-border: rgba(17, 62, 53, 0.16);
}

.bcfc-pattern-page-feedback__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.1rem 1.6rem;
  border-radius: 1.1rem;
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
}

.bcfc-pattern-page-feedback__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bcfc-ink, var(--bcfc-navy, #071b33));
}

.bcfc-pattern-page-feedback__buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.bcfc-pattern-page-feedback__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.95rem;
  border: 1.5px solid var(--bcfc-border-color, #e2e8f0);
  border-radius: 0.75rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white));
  color: var(--bcfc-ink-link, var(--bcfc-text-secondary, #4a5568));
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  transition: all 0.2s ease;
  line-height: 1;
}

.bcfc-pattern-page-feedback__btn:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 8%, var(--bcfc-surface-raised, white));
}

.bcfc-pattern-page-feedback__btn:focus-visible {
  outline: 2px solid var(--fb-accent);
  outline-offset: 2px;
}

.bcfc-pattern-page-feedback__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Hover, keyboard focus and the recorded vote — nothing at rest, by design (see the tokens above).
   These rules used to be keyed on __btn--like / __btn--dislike, but the partial has always emitted
   __btn--yes / __btn--no, so they matched NOTHING: both buttons went BLUE on hover from the generic
   rule above, on a bar whose whole point is a yes/no. Same class of bug as the undeclared-alias
   epidemic — the intent was in the file, the selector just never met the markup.

   Chained with the base class (two classes + a pseudo) so they outrank both the generic
   __btn:hover here and the Islamic page sheet's own 2-class resting rule, which would otherwise
   turn the hover on BOTH buttons the same green — see pages/Islamic.css. */
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--yes:hover,
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--yes:focus-visible,
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--yes.bcfc-pattern-page-feedback__btn--active {
  border-color: var(--fb-yes);
  color: var(--fb-yes-ink);
  background: color-mix(in srgb, var(--fb-yes) 17%, var(--bcfc-surface-raised, var(--bcfc-white, #fff)));
}

.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--no:hover,
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--no:focus-visible,
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--no.bcfc-pattern-page-feedback__btn--active {
  border-color: var(--fb-no);
  color: var(--bcfc-dark-ink-red, var(--fb-no-ink));
  background: color-mix(in srgb, var(--fb-no) 17%, var(--bcfc-surface-raised, var(--bcfc-white, #fff)));
}

/* The focus ring follows the button's own colour rather than --fb-accent, which would put a blue
   ring on the red button. currentColor resolves to the coloured ink here because :focus-visible is
   in the group above, so the ring is green on Yes and red on No — and nothing is coloured at rest,
   which is what was asked for. */
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--yes:focus-visible,
.bcfc-pattern-page-feedback__btn.bcfc-pattern-page-feedback__btn--no:focus-visible {
  outline-color: currentColor;
}

/* .bcfc-pattern-page-feedback__count is gone with the vote tally the partial no longer renders
   (2026-08-18). The pill's own rule went with it rather than being left as an orphan selector. */
.bcfc-pattern-page-feedback__message {
  max-width: 640px;
  margin: 0.5rem auto 0;
  font-size: 0.8625rem;
  text-align: center;
  /* Was --bcfc-text-muted (#94a3b8), which is ~2.8:1 on white and fails WCAG AA for
       body text. This copy confirms a submission, so it has to be readable. */
  color: var(--bcfc-dark-ink-muted, var(--bcfc-text-secondary, #4a5568));
  min-height: 1.2em;
}

/* "You already shared your feedback" notice — shown when a repeat vote is suppressed, so the
   click has a visible result. Uses the component's own --fb-* tokens, so it turns green inside
   body.is-islamic with no extra rule. [hidden] is set by the script; the attribute selector is
   NOT relied on for hiding, because `display: flex` here would otherwise beat it. */
.bcfc-fb-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 640px;
  margin: 0.5rem auto 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--fb-border, rgba(7, 27, 51, 0.14));
  border-radius: 999px;
  background: var(--bcfc-surface-sunken, var(--fb-surface, #f1f5fb));
  color: var(--bcfc-dark-ink-green, var(--fb-accent-ink, var(--bcfc-text-secondary, #4a5568)));
  font-size: 0.8825rem;
  text-align: center;
  /* Entry is opt-in via .is-in so a second click can replay it. */
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bcfc-fb-notice[hidden] {
  display: none;
}

.bcfc-fb-notice.is-in {
  opacity: 1;
  transform: none;
}

.bcfc-fb-notice__icon {
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--bcfc-dark-ink, var(--fb-accent, var(--bcfc-navy, #071b33)));
}

@media (prefers-reduced-motion: reduce) {
  .bcfc-fb-notice {
    transition: none;
    transform: none;
  }
}
/* While a vote POST is in flight the button stops accepting input, so spamming Yes/No
   can't fire concurrent requests. See the guard note in pages/page-feedback.ts. */
.bcfc-pattern-page-feedback__btn.is-busy {
  pointer-events: none;
  opacity: 0.72;
}

/* ============================================
   Feedback routing modal
   Native <dialog>, so it renders in the top layer: no z-index needed and nothing in the
   footer's overflow or stacking context can clip it. Lives inside the feedback section so
   --fb-accent cascades in — blue normally, green on Islamic pages, with no extra rules.
   ============================================ */
.bcfc-fb-modal {
  width: min(30rem, 100vw - 2rem);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  /* Keep the panel's shadow unclipped; the panel owns any scrolling. */
  overflow: visible;
}

.bcfc-fb-modal::backdrop {
  background: color-mix(in srgb, var(--bcfc-navy, #071b33) 55%, transparent);
  backdrop-filter: blur(3px);
}

.bcfc-fb-modal__panel {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-radius: 1.25rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white, #fff));
  box-shadow: 0 1.5rem 3.5rem rgba(7, 27, 51, 0.28);
  text-align: start;
}

/* The panel takes focus on open (see the partial) purely so the reading position starts at
   the title — it isn't an interactive control, so it shouldn't draw a ring. */
.bcfc-fb-modal__panel:focus,
.bcfc-fb-modal__panel:focus-visible {
  outline: none;
}

.bcfc-fb-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.bcfc-fb-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bcfc-ink-strong, var(--bcfc-navy, #071b33));
  text-wrap: balance;
}

.bcfc-fb-modal__sub {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--bcfc-ink, var(--bcfc-text-secondary, #4a5568));
}

.bcfc-fb-modal__close {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bcfc-border-color, #e2e8f0);
  border-radius: 0.625rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white, #fff));
  color: var(--bcfc-ink, var(--bcfc-text-secondary, #4a5568));
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

/* The visual button is 36px; this pushes the hit area to 48px without moving anything. */
.bcfc-fb-modal__close::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.bcfc-fb-modal__close:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 8%, var(--bcfc-surface-raised, var(--bcfc-color-white, #fff)));
}

.bcfc-fb-modal__close:focus-visible {
  outline: 2px solid var(--fb-accent);
  outline-offset: 2px;
}

.bcfc-fb-modal__options {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.bcfc-fb-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bcfc-border-color, #e2e8f0);
  border-radius: 1rem;
  background: var(--bcfc-surface-raised, var(--bcfc-color-white, #fff));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  --i: 0;
}

.bcfc-fb-option--1 {
  --i: 1;
}

.bcfc-fb-option--2 {
  --i: 2;
}

.bcfc-fb-option:hover {
  border-color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 6%, var(--bcfc-surface-raised, var(--bcfc-color-white, #fff)));
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--fb-accent) 12%, transparent);
}

.bcfc-fb-option:focus-visible {
  outline: 2px solid var(--fb-accent);
  outline-offset: 2px;
}

.bcfc-fb-option:active {
  background: color-mix(in srgb, var(--fb-accent) 11%, var(--bcfc-surface-raised, var(--bcfc-color-white, #fff)));
}

.bcfc-fb-option__emoji {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--fb-accent) 10%, var(--bcfc-surface-raised, var(--bcfc-color-white, #fff)));
  font-size: 1.375rem;
  line-height: 1;
  /* Pin an emoji stack so the glyphs render as colour emoji on every platform instead of
       falling back to the body font's monochrome outlines. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
}

.bcfc-fb-option__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.bcfc-fb-option__label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bcfc-ink, var(--bcfc-navy, #071b33));
}

.bcfc-fb-option__desc {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--bcfc-ink-muted, var(--bcfc-text-secondary, #4a5568));
}

.bcfc-fb-option__chev {
  flex-shrink: 0;
  color: var(--bcfc-ink, var(--bcfc-text-secondary, #4a5568));
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
}

.bcfc-fb-option:hover .bcfc-fb-option__chev {
  color: var(--fb-accent);
  transform: translateX(3px);
}

/* Mirror the chevron in Arabic, and send the hover nudge the other way. */
[dir=rtl] .bcfc-fb-option__chev {
  transform: scaleX(-1);
}

[dir=rtl] .bcfc-fb-option:hover .bcfc-fb-option__chev {
  transform: scaleX(-1) translateX(3px);
}

.bcfc-fb-modal__foot {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--bcfc-ink, var(--bcfc-text-secondary, #4a5568));
}

/* Entrance: backdrop fade + panel rise on ease-out-quint. No fill-mode, so a renderer that
   never runs animations still shows the panel fully visible rather than blank. */
@keyframes bcfc-fb-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bcfc-fb-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bcfc-fb-modal[open] .bcfc-fb-modal__panel {
  animation: bcfc-fb-panel-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bcfc-fb-modal[open]::backdrop {
  animation: bcfc-fb-backdrop-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Exit runs at ~75% of the entrance, per the usual enter/exit asymmetry. */
.bcfc-fb-modal.is-closing .bcfc-fb-modal__panel {
  animation: bcfc-fb-panel-in 200ms cubic-bezier(0.22, 1, 0.36, 1) reverse forwards;
}

.bcfc-fb-modal.is-closing::backdrop {
  animation: bcfc-fb-backdrop-in 200ms linear reverse forwards;
}

@media (max-width: 480px) {
  .bcfc-fb-option {
    min-height: 3.5rem;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
  }
  .bcfc-fb-option__emoji {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bcfc-fb-modal[open] .bcfc-fb-modal__panel,
  .bcfc-fb-modal[open]::backdrop,
  .bcfc-fb-modal.is-closing .bcfc-fb-modal__panel,
  .bcfc-fb-modal.is-closing::backdrop {
    animation: none;
  }
  .bcfc-fb-option,
  .bcfc-fb-option__chev,
  .bcfc-fb-modal__close {
    transition: none;
  }
  .bcfc-fb-option:hover .bcfc-fb-option__chev {
    transform: none;
  }
  [dir=rtl] .bcfc-fb-option:hover .bcfc-fb-option__chev {
    transform: scaleX(-1);
  }
}
/* Responsive */
@media (max-width: 480px) {
  .bcfc-pattern-page-feedback__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .bcfc-pattern-page-feedback__buttons {
    justify-content: center;
  }
}
.bcfc-footer-meta-section .bcfc-related-pages-section + .bcfc-pattern-page-meta {
  margin-top: 1.5rem;
}

/* The related banner is a full-bleed coloured band that already separates the
   share strip below it — drop the extra top margin AND the hairline border that
   would otherwise stack up into an oversized, seam-like gap right under it. */
.bcfc-footer-meta-section .bcfc-related-banner + .bcfc-pattern-page-meta {
  margin-top: 0;
  border-top: none;
  padding-top: 1.5rem;
}

.bcfc-footer-meta-section .bcfc-pattern-page-feedback {
  margin-top: 1.5rem;
}

/* ========================================
   No Records Alert
   ======================================== */
.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-icon svg {
  color: var(--bcfc-dark-ink-red, var(--color-warning, #d97706));
}

/* Popup modal styles now live entirely in bcfc-popup.css — this was a
   stale duplicate (older markup: header/footer bar, contain-fit image)
   that loaded after bcfc-popup.css in the bundle and was winning the
   cascade for shared property names, silently reverting the redesign. */
/* ==============================================================================================
   ISLAMIC: THE FEEDBACK BUTTONS MUST NOT REST IN BRAND BLUE.

   The token block above states the intent - "both buttons rest in the neutral grey of
   .bcfc-pattern-page-feedback__btn" - and colour is the response to the pointer only (Bahaa,
   2026-08-18: *"only on hover make it"*). But the base rule reads
   `var(--bcfc-ink-link, var(--bcfc-text-secondary, #4a5568))`, and bcfc-surface-map.css declares
   --bcfc-ink-link on .bcfc-meta-utilitybar__card, the band's own wrapper. So the first token
   always wins, the intended grey never applies, and the pair rests brand blue.

   Restated for Islamic pages, where blue is simply wrong. NEUTRAL, not green: resting green would
   break the same rule from the other side, and --fb-yes has to stay the only green in this band or
   "Yes" stops reading as the affirmative choice. The hover and recorded-vote colours are untouched
   - they are chained at (0,3,1) and keep winning.

   NOTE this is only the Islamic half of the defect: the grey is unreachable on every
   surface-mapped page, not just these. Left alone deliberately - restoring it site-wide is a
   visible change on ~400 pages and belongs in its own reviewed commit, not smuggled into a
   colour fix. */
/* :not(:hover):not(:focus-visible) so this touches the RESTING state only. Without it the rule
   is (0,2,1) and outranks the generic `.bcfc-pattern-page-feedback__btn:hover` at (0,2,0), which
   would silently kill the accent hover on any button in this band that is neither --yes nor --no.
   The two chained yes/no rules are (0,3,0) and win either way; this protects the others. */
body.is-islamic .bcfc-pattern-page-feedback__btn:not(:hover):not(:focus-visible) {
  color: var(--bcfc-dark-ink-muted, var(--bcfc-text-secondary, #4a5568));
}

/* UW-380: icons from the pack in wwwroot/icons, drawn by IconHelper.Svg(). The artwork strokes in
   currentColor, so colour is the parent's. Size is em-based on the element's own width/height
   attributes, so the A+/A- control scales it. --mirror is for directional glyphs only. */
.bcfc-icon {
  flex: none;
  vertical-align: -0.2em;
}

:where([dir=rtl]) .bcfc-icon--mirror {
  transform: scaleX(-1);
}