@charset "UTF-8";
.bcfc-card-carousel {
  /* 8px top headroom (offset by margin-top:-8px in bcfc-swiper.css) so cards
       lifted on hover aren't clipped by the swiper's overflow:hidden box */
  padding: 8px 16px 46px;
  overflow: visible;
}

.bcfc-related-pages-section {
  padding: 30px 0;
  background: linear-gradient(180deg, rgba(245, 249, 255, 0) 0%, rgba(245, 249, 255, 0.92) 100%);
}

.bcfc-related-pages-section__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.bcfc-related-pages-section__copy {
  max-width: 720px;
}

.bcfc-related-pages-section__title {
  margin: 0;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  font: 800 clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem)/1.12 "Almarai", sans-serif;
  text-transform: capitalize;
}

.bcfc-related-pages-section__summary {
  margin: 14px 0 0;
  color: var(--bcfc-ink, #52606d);
  font: 500 1rem/1.72 "Almarai", sans-serif;
}

.bcfc-related-pages-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (width < 1024px) {
  .bcfc-related-pages-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width < 640px) {
  .bcfc-related-pages-section__grid {
    grid-template-columns: 1fr;
  }
}
.bcfc-related-pages-section__grid .bcfc-content-card {
  height: 100%;
}

.bcfc-related-pages-section__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bcfc-related-pages-section__nav-prev,
.bcfc-related-pages-section__nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bcfc-primary-dark);
  background: transparent;
  color: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark));
  cursor: pointer;
  transition: all 0.2s ease;
}

.bcfc-related-pages-section__nav-prev:hover,
.bcfc-related-pages-section__nav-next:hover {
  background: var(--bcfc-primary-dark);
  color: var(--bcfc-white);
}

.bcfc-related-pages-section__nav-prev svg,
.bcfc-related-pages-section__nav-next svg {
  width: 20px;
  height: 20px;
}

.bcfc-related-pages-section__carousel {
  overflow: hidden;
}

.bcfc-card-carousel .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  /* No flex `gap` here: Swiper already spaces slides via an inline
       margin-right derived from its own `spaceBetween` param. Adding a CSS
       gap on top double-counts the spacing per slide, so each autoplay
       step drifts the "active" slide further out of the clipped viewport
       than Swiper's own math (slidesGrid/translate) expects. */
}

.bcfc-card-carousel .swiper-slide {
  display: flex;
  flex-shrink: 0;
  height: auto;
  min-width: 0;
}

.bcfc-card-carousel .swiper-slide > * {
  flex: 1;
  min-width: 0;
}

.bcfc-card-carousel__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bcfc-card-carousel__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 2px;
  justify-content: center;
  flex: 1;
}

.bcfc-card-carousel__nav {
  display: flex;
  gap: 8px;
}

.bcfc-card-carousel__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 74, 152, 0.2);
  border-radius: 50%;
  background: var(--bcfc-surface-raised, var(--bcfc-white));
  color: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark));
  cursor: pointer;
  transition: all 0.2s ease;
}

.bcfc-card-carousel__nav-btn:hover {
  background: var(--bcfc-primary-dark);
  color: var(--bcfc-white);
  border-color: var(--bcfc-primary-dark);
}

/* Dark mode: the light-mode navy hairline vanishes on the navy surface. */
[data-bcfc-theme=dark] .bcfc-card-carousel__nav-btn {
  border-color: var(--bcfc-dark-ink-brand, var(--bcfc-line));
}

[data-bcfc-theme=dark] .bcfc-card-carousel__nav-btn:hover {
  border-color: var(--bcfc-primary-dark);
}

/* Islamic pages: the resting hairline is green, not the generic blue. */
html[data-islamic=true][data-bcfc-theme=dark] .bcfc-card-carousel__nav-btn:not(:hover) {
  border-color: var(--bcfc-dark-ink-green, var(--bcfc-line));
}

/* Shared with Islamic partials (e.g. IslamicServices) — hover fills green
   instead of blue on Islamic pages. */
body.is-islamic .bcfc-card-carousel__nav-btn:hover {
  background: var(--bcfc-color-secondary);
  border-color: var(--bcfc-color-secondary);
}

.bcfc-card-carousel__nav-btn svg {
  display: block;
}

.bcfc-card-carousel__nav-btn.swiper-nav-hidden {
  opacity: 0;
  pointer-events: none;
}

.bcfc-card-carousel__pagination .swiper-pagination-bullet {
  background-color: rgba(0, 74, 152, 0.3);
  opacity: 1;
  height: 10px;
  width: 10px;
  margin: 0 !important;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bcfc-card-carousel__pagination .swiper-pagination-bullet:hover {
  background-color: rgba(0, 74, 152, 0.6);
}

.bcfc-card-carousel__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bcfc-primary-dark);
  transform: scale(1.2);
}

/* Homepage phones: the small round dots of the Elfsight-style pager (owner ticket 2026-10-13): 8px circles,
   navy at 25% resting, solid navy active, no scale pop. Dark mode lifts the navy so it does not vanish. */
@media (max-width: 768px) {
  .bcfc-card-carousel__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(14, 44, 92, 0.25);
    opacity: 1;
    margin: 0 4px !important;
  }
  .bcfc-card-carousel__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 8px;
    height: 8px;
    background-color: #0e2c5c;
    transform: none;
  }
  [data-bcfc-theme=dark] .bcfc-card-carousel__pagination .swiper-pagination-bullet {
    background-color: color-mix(in srgb, var(--bcfc-dark-ink-brand, #6ea8e0) 30%, transparent);
  }
  [data-bcfc-theme=dark] .bcfc-card-carousel__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--bcfc-dark-ink-brand, #6ea8e0);
  }
}
.bcfc-content-card {
  width: 100%;
  height: 100%;
}

/* ========================================
   Base card link — hover interactions
   ======================================== */
.bcfc-content-card__link {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bcfc-surface-raised, #ffffff) 0%, var(--bcfc-surface-raised, #f7faff) 100%);
  border: 1px solid rgba(0, 74, 152, 0.12);
  box-shadow: 0 18px 42px rgba(10, 33, 64, 0.08);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.4s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

/* Animated bottom accent bar — slides in from left.
   Scaled rather than grown: animating `width` relayouts the card on every frame of a 500ms hover.
   transform-origin is the physical left to match the `left: 0` anchor, which has no RTL override, so
   the direction of travel is unchanged. */
.bcfc-content-card__link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--bcfc-card-accent, #afc6ec);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
  /* Contain within card's rounded bottom corners */
  clip-path: inset(0 0 0 0 round 0 0 22px 22px);
}

/* Hover state */
.bcfc-content-card__link:hover {
  background: var(--bcfc-card-hover, #11295f);
}

.bcfc-content-card__link:hover::before {
  transform: scaleX(1);
}

/* Focus ring */
.bcfc-content-card:has(a:focus-visible) .bcfc-content-card__link {
  box-shadow: 0 0 0 3px rgba(0, 74, 152, 0.4);
}

.bcfc-content-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  /* Top corners nest inside the 22px card frame (minus 1px border) — a smaller
       radius leaves white wedges peeking at the card's rounded top corners */
  border-radius: 21px 21px 12px 12px;
  background: var(--bcfc-primary, #004a98);
}

.bcfc-content-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0) 0%, rgba(7, 27, 51, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 12px;
}

.bcfc-content-card__image,
.bcfc-content-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bcfc-content-card__link:hover .bcfc-content-card__image,
.bcfc-content-card__link:hover .bcfc-content-card__video {
  opacity: 0.9;
}

.bcfc-content-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dbe6f6 0%, #bed2ed 100%);
}

.bcfc-content-card__badge {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bcfc-surface-raised, rgba(255, 255, 255, 0.92));
  color: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark));
  font: 800 0.8025rem/1 "Almarai", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A COLUMN WITH THE ACTION PINNED TO THE BOTTOM, not a fixed four-row grid.
   This was `display: grid` with `grid-template-rows: auto minmax(3.3rem,auto) minmax(5rem,auto)
   auto` and `align-content: start`, which assumed all four children render — eyebrow/meta, title,
   description, action. The service cards on the home page emit only THREE (no eyebrow), so each
   child shifted up a row and the action landed in the DESCRIPTION's row: its position then moved
   with the length of the description, and a card whose text wrapped to two lines instead of three
   put its "Explore →" ~20px higher than the cards beside it. That is the misalignment marked on
   the home category carousel (owner, 2026-09-07).
   `margin-block-start: auto` on the action eats the slack instead, so the link sits on the card's
   bottom edge whatever renders above it and every card in a row agrees — the card is already
   `height: 100%` inside a `1fr` body row, so there is always slack to eat. */
.bcfc-content-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

.bcfc-content-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bcfc-content-card__eyebrow,
.bcfc-content-card__meta-text {
  font: 800 0.8225rem/1 "Almarai", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bcfc-content-card__eyebrow {
  color: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark));
}

.bcfc-content-card__meta-text {
  color: var(--bcfc-ink-muted, #6b7784);
}

.bcfc-content-card__title {
  margin: 0;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  font: 800 1.18rem/1.38 "Almarai", sans-serif;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bcfc-content-card__description {
  margin: 0;
  color: var(--bcfc-ink-muted, #52606d);
  font: 500 0.96rem/1.72 "Almarai", sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bcfc-content-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* `start`, not the `end` this carried under the grid: in a column flexbox align-self is the
       INLINE axis, so `end` would push the link to the trailing edge of the card. `start` keeps it
       at the leading edge — left in LTR, right in RTL, with no `[dir]` arm. */
  align-self: start;
  /* Eats every pixel of leftover height, which is what lines the four cards up. Logical, so it
       is the same declaration in RTL. */
  margin-block-start: auto;
  padding-block-start: 6px;
  color: var(--bcfc-dark-ink-brand, var(--bcfc-primary-dark));
  font: 800 0.9825rem/1 "Almarai", sans-serif;
  white-space: nowrap;
}

.bcfc-content-card__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.bcfc-content-card--service .bcfc-content-card__media {
  aspect-ratio: 16/10;
}

.bcfc-content-card--service .bcfc-content-card__media::after {
  background: none;
}

.bcfc-content-card--service .bcfc-content-card__title {
  font-size: 1.28rem;
}

/* The service variant's own `grid-template-rows` override lived here and is gone with the grid —
   it was the rule that reserved 3.55rem/5.2rem for the title and description rows. It is not
   replaced: the title is line-clamped to 2 lines and the description to 3, so the copy block is
   already bounded, and the row of cards now agrees on where the ACTION sits rather than on where
   each paragraph starts. */
.bcfc-content-card--media .bcfc-content-card__badge {
  background: rgba(7, 27, 51, 0.88);
  color: var(--bcfc-white);
}

.bcfc-number-card {
  min-height: 220px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--bcfc-surface-raised, #ffffff) 0%, var(--bcfc-surface-sunken, #f5f9ff) 100%);
  border: 1px solid rgba(0, 74, 152, 0.1);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.bcfc-number-card__number {
  display: inline-flex;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bcfc-primary-dark);
  color: var(--bcfc-white);
  font: 800 0.96rem/1 "Almarai", sans-serif;
}

.bcfc-number-card__title {
  margin: 18px 0 0;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  font: 800 1.22rem/1.32 "Almarai", sans-serif;
  text-transform: capitalize;
}

.bcfc-number-card__description {
  margin: 12px 0 0;
  color: var(--bcfc-ink-muted, #5c6670);
  font: 500 0.98rem/1.68 "Almarai", sans-serif;
}

@media (max-width: 768px) {
  .bcfc-related-pages-section {
    padding-bottom: 56px;
  }
  .bcfc-related-pages-section__header {
    margin-bottom: 22px;
  }
  .bcfc-related-pages-section__summary {
    font-size: 0.94rem;
  }
  .bcfc-content-card__body {
    padding: 18px 18px 20px;
  }
  .bcfc-content-card__title {
    font-size: 1.06rem;
  }
  .bcfc-number-card {
    min-height: auto;
    padding: 20px 18px;
  }
}
/* ========================================
   Global button styles — used throughout
   ======================================== */
.bcfc-guideline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  border-radius: 6px;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.bcfc-guideline-button--primary {
  background: var(--bcfc-color-primary, #004a98);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 74, 152, 0.16);
}

/* AMENDED 2026-09-07 — the fill deepens and the label stays white (owner: *"if background is not
   white the text cannot be black so it should be white"*). The 2026-09-06 inversion put blue ink
   on a transparent face, and these buttons sit on guideline cards and tinted panels, not on white.
   The base reserves `1px solid transparent`, so nothing reflows. */
.bcfc-guideline-button--primary:hover {
  background: color-mix(in srgb, var(--bcfc-color-primary, #004a98) 86%, black);
  border-color: color-mix(in srgb, var(--bcfc-color-primary, #004a98) 86%, black);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 74, 152, 0.22);
}

.bcfc-guideline-button--secondary {
  background: var(--bcfc-surface-raised, #fff);
  color: var(--bcfc-ink, var(--bcfc-color-navy, #0c1f35));
  border-color: rgba(11, 53, 102, 0.09);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.bcfc-guideline-button--secondary:hover {
  background: var(--bcfc-surface-raised, #f8fafc);
  border-color: #b8c4d3;
}

/* ========================================
   Card text color inversion on hover
   ======================================== */
.bcfc-content-card__eyebrow,
.bcfc-content-card__meta-text,
.bcfc-content-card__title,
.bcfc-content-card__description,
.bcfc-content-card__action,
.bcfc-content-card__arrow {
  transition: color 0.4s ease;
}

.bcfc-content-card__link:hover .bcfc-content-card__eyebrow,
.bcfc-content-card__link:hover .bcfc-content-card__meta-text {
  color: rgba(255, 255, 255, 0.8);
}

.bcfc-content-card__link:hover .bcfc-content-card__title {
  color: #fff;
}

.bcfc-content-card__link:hover .bcfc-content-card__description {
  color: rgba(255, 255, 255, 0.85);
}

.bcfc-content-card__link:hover .bcfc-content-card__action {
  color: #fff;
}

.bcfc-content-card__link:hover .bcfc-content-card__action .bcfc-content-card__arrow {
  transform: translateX(4px);
}

/* Arrow icon transition */
.bcfc-content-card__arrow {
  display: inline-block;
  transition: transform 0.24s ease;
}

/* Accent color variants */
.bcfc-content-card--accent-teal::before {
  background-color: #00897b;
}

.bcfc-content-card--accent-red::before {
  background-color: var(--bcfc-navy, #071b33);
}

.bcfc-content-card--accent-green::before {
  background-color: #43a047;
}

.bcfc-content-card--accent-yellow::before {
  background-color: #fdd835;
}

.bcfc-content-card--accent-camel::before {
  background-color: #c69c6d;
}

.bcfc-content-card--accent-teal .bcfc-content-card__eyebrow {
  color: var(--bcfc-dark-ink-green, #00897b);
}

.bcfc-content-card--accent-red .bcfc-content-card__eyebrow {
  color: var(--bcfc-dark-ink, var(--bcfc-navy, #071b33));
}

.bcfc-content-card--accent-green .bcfc-content-card__eyebrow {
  color: #43a047;
}

.bcfc-content-card--accent-yellow .bcfc-content-card__eyebrow {
  color: #bfa500;
}

.bcfc-content-card--accent-camel .bcfc-content-card__eyebrow {
  color: #c69c6d;
}

/* ========================================
   Share buttons (social)
   ======================================== */
.bcfc-share {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.bcfc-share__label {
  font-size: 0.8625rem;
  font-weight: 700;
  color: var(--bcfc-ink, #6b7784);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bcfc-share__buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bcfc-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.2s ease;
  text-decoration: none;
}

.bcfc-share__btn svg {
  width: 16px;
  height: 16px;
}

.bcfc-share__btn--facebook {
  background: #1877f2;
  color: #fff;
}

.bcfc-share__btn--facebook:hover {
  background: #0e5fba;
}

.bcfc-share__btn--linkedin {
  background: #0a66c2;
  color: #fff;
}

.bcfc-share__btn--linkedin:hover {
  background: #004182;
}

.bcfc-share__btn--twitter {
  background: var(--bcfc-surface-inverse, #000);
  color: #fff;
}

.bcfc-share__btn--twitter:hover {
  background: var(--bcfc-surface-inverse, #333);
}

.bcfc-share__btn--whatsapp {
  background: #25d366;
  color: #fff;
}

.bcfc-share__btn--whatsapp:hover {
  background: #128c7e;
}

.bcfc-share__btn:hover {
  transform: scale(1.1);
}

/* ========================================
   Year filter multi-select
   ======================================== */
/* ========================================
   Filter bar
   ======================================== */
.bcfc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.bcfc-filter-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 74, 152, 0.15);
  border-radius: 8px;
  background: var(--bcfc-surface-raised, var(--bcfc-white));
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  transition: border-color 0.2s ease;
}

.bcfc-filter-bar__search:focus-within {
  border-color: var(--bcfc-primary, #004a98);
}

.bcfc-filter-bar__search svg {
  flex-shrink: 0;
  color: var(--bcfc-ink, #6b7784);
}

.bcfc-filter-bar__search input {
  flex: 1;
  border: none;
  background: transparent;
  font: 500 0.9625rem/1 "Almarai", sans-serif;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  outline: none;
  min-width: 0;
}

.bcfc-filter-bar__search input::placeholder {
  color: #9fb3c8;
}

.bcfc-filter-bar__select {
  appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 74, 152, 0.15);
  border-radius: 8px;
  background: var(--bcfc-surface-raised, var(--bcfc-white));
  font: 500 0.9625rem/1 "Almarai", sans-serif;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.bcfc-filter-bar__select:focus {
  border-color: var(--bcfc-primary, #004a98);
}

.bcfc-filter-bar__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  font: 700 0.9375rem/1 "Almarai", sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.bcfc-filter-bar__btn--primary {
  background: var(--bcfc-primary, #004a98);
  color: #fff;
  border: 1px solid var(--bcfc-primary, #004a98);
}

.bcfc-filter-bar__btn--primary:hover {
  background: #003d7a;
  border-color: #003d7a;
}

.bcfc-filter-bar__btn--secondary {
  background: var(--bcfc-surface-raised, var(--bcfc-white));
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  border: 1px solid rgba(0, 74, 152, 0.2);
}

.bcfc-filter-bar__btn--secondary:hover {
  background: var(--bcfc-surface-sunken, #f0f4f8);
  border-color: rgba(0, 74, 152, 0.35);
}

.bcfc-filter-bar__btn:focus-visible {
  outline: 3px solid rgba(0, 74, 152, 0.3);
  outline-offset: 2px;
}

@media (width < 640px) {
  .bcfc-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .bcfc-filter-bar__search {
    min-width: unset;
  }
}
/* The selector on this block was lost in an edit — it read as a bare
   `{position:relative;min-width:140px}` with nothing in front of it, which made the `}` a
   syntax error and dropped both declarations. Restored as `.bcfc-year-select` on the evidence
   below it: `.bcfc-year-select::after` (line ~790) is `position:absolute; right:12px; top:50%`,
   i.e. the dropdown chevron, and an absolutely-positioned ::after with no positioned parent
   anchors to the nearest ancestor that does have one — so the chevron was landing somewhere
   else on the page entirely, not on the select. Caught by stylelint (CssSyntaxError), not by
   looking at the file. */
.bcfc-year-select {
  position: relative;
  min-width: 140px;
}

.bcfc-year-select select {
  appearance: none;
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 74, 152, 0.1);
  border-radius: 8px;
  background: var(--bcfc-surface-raised, #fff);
  font-size: 0.9375rem;
  color: var(--bcfc-ink, #0c1f35);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.bcfc-year-select select:focus {
  border-color: var(--bcfc-primary, #004a98);
}

.bcfc-year-select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #6b7784;
  pointer-events: none;
}

/* Pagination moved to its own component file: /css/shared/components/bcfc-pagination.css.
   It is a site-wide control and did not belong in a page-specific stylesheet - keeping it here is
   why new listings kept writing their own look-alike pagination instead of reusing this one. */
/* ========================================
   Empty state
   ======================================== */
.bcfc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}

.bcfc-empty-state__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: #9fb3c8;
}

.bcfc-empty-state__icon svg {
  width: 100%;
  height: 100%;
}

.bcfc-empty-state__title {
  margin: 0 0 8px;
  color: var(--bcfc-dark-ink, var(--bcfc-navy));
  font: 800 1.1rem/1.3 "Almarai", sans-serif;
  text-transform: capitalize;
}

.bcfc-empty-state__message {
  margin: 0;
  color: var(--bcfc-ink, #6b7784);
  font: 500 0.95rem/1.6 "Almarai", sans-serif;
}

/* ========================================
   Related pages — full-width link banner
   Replaces the old related-pages card carousel: a single brand-blue band
   with the "continue browsing" copy on one side and the related links as
   inline pill buttons on the other. Sits full-bleed above the footer.
   ======================================== */
.bcfc-related-banner {
  /* Themeable palette — brand blue by default, Islamic green under body.is-islamic */
  --rb-grad-start: var(--bcfc-primary-dark, #00346a);
  --rb-grad-mid: var(--bcfc-primary, #004a98);
  --rb-grad-end: #0a5bb5;
  --rb-glow: rgba(243, 179, 53, 0.16);
  --rb-ink: var(--bcfc-primary-dark, #00346a);
  position: relative;
  padding: 40px 0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(115deg, var(--rb-grad-start) 0%, var(--rb-grad-mid) 62%, var(--rb-grad-end) 100%);
  overflow: hidden;
}

body.is-islamic .bcfc-related-banner {
  --rb-grad-start: var(--bcfc-green-darker, #0c2d27);
  --rb-grad-mid: var(--bcfc-green-dark, #113e35);
  --rb-grad-end: #1c5a4c;
  --rb-glow: rgba(165, 209, 197, 0.2);
  --rb-ink: var(--bcfc-green-dark, #113e35);
}

/* Soft brand-tint glow anchored to the trailing edge for depth */
.bcfc-related-banner::after {
  content: "";
  position: absolute;
  inset-inline-end: -8%;
  top: -60%;
  width: 46%;
  height: 220%;
  background: radial-gradient(circle at center, var(--rb-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bcfc-related-banner__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.bcfc-related-banner__copy {
  flex: 1 1 220px;
  min-width: 0;
}

/* placement + the softer white this kicker always had; the look is .bcfc-eyebrow */
.bcfc-related-banner__kicker {
  --eyebrow-ink: rgb(255 255 255 / 0.72);
  margin-block-end: 0.5rem;
}

.bcfc-related-banner__title {
  margin: 0;
  color: var(--bcfc-white);
  font: 800 clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem)/1.14 "Almarai", sans-serif;
  text-transform: capitalize;
}

.bcfc-related-banner__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.bcfc-related-banner__item {
  display: flex;
}

.bcfc-related-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Tight on the leading (thumb) edge, roomy on the trailing (arrow) edge.
       Logical props keep the balance correct in RTL. */
  padding-block: 7px;
  padding-inline: 7px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--bcfc-white);
  font: 700 0.95rem/1 "Almarai", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(2px);
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.bcfc-related-banner__pill:hover {
  background: var(--bcfc-surface-raised, var(--bcfc-white));
  border-color: var(--bcfc-white);
  color: var(--bcfc-dark-ink-brand, var(--rb-ink));
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(4, 20, 44, 0.28);
}

.bcfc-related-banner__pill:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.bcfc-related-banner__pill-thumb {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.bcfc-related-banner__pill-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bcfc-related-banner__pill:hover .bcfc-related-banner__pill-thumb {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rb-ink) 20%, transparent);
}

.bcfc-related-banner__pill-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.bcfc-related-banner__pill:hover .bcfc-related-banner__pill-arrow {
  transform: translateX(3px);
}

/* RTL: chevron points the reading direction, and travels the correct way */
.bcfc-related-banner[dir=rtl] .bcfc-related-banner__pill-arrow {
  transform: scaleX(-1);
}

.bcfc-related-banner[dir=rtl] .bcfc-related-banner__pill:hover .bcfc-related-banner__pill-arrow {
  transform: scaleX(-1) translateX(3px);
}

@media (max-width: 860px) {
  .bcfc-related-banner {
    padding: 32px 0;
  }
  .bcfc-related-banner__shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .bcfc-related-banner__links {
    justify-content: flex-start;
  }
}
/* ========================================
   Related pages — icon cards (_RelatedPagesList.cshtml)
   A 2-column grid of link cards: tinted icon tile + category tag + title +
   arrow, with a left accent bar that fills on hover. Icon + tag come from the
   RelatedPageIconLibrary auto-map (or the editor's relatedIcon/relatedTag
   override). Theme-aware: brand blue by default, Islamic green under
   body.is-islamic.
   ======================================== */ /* ── Related pages ("Continue browsing") ──────────────────────────────────────
Rendered by Views/Partials/PagePatterns/_RelatedPagesList.cshtml, which the site
footer and four page templates use. Laid out as a THREE column grid on desktop:
at two columns each card was ~790px wide holding ~40 characters, leaving a wide
void between the label and the chevron, and eight tall rows stacked into a very
long block above the footer. */
.bcfc-related-cards {
  /* Tokens, not hand-mixed hex (2026-08-31). Every value below was a literal that happened to
       sit near a ramp entry; they now ARE the ramp entry, so a palette change reaches this band.
       --rc-tile is the house icon-tile wash (--bcfc-blue-tint), --rc-line the blue-tinted hairline
       (a neutral grey rule reads as foreign here), --rc-panel the ONLY approved alternating band
       fill, --rc-tag the secondary-text step. */
  --rc-accent: var(--bcfc-primary, #004a98);
  --rc-tile: var(--bcfc-blue-tint, rgba(0, 74, 152, 0.07));
  --rc-line: var(--bcfc-border, #d9e4ef);
  --rc-tag: var(--bcfc-dark-ink-muted, var(--bcfc-gray-500, #667085));
  --rc-panel: var(--bcfc-surface-raised, var(--bcfc-gray-50, #f9fafb));
  --rc-ring: color-mix(in srgb, var(--rc-accent) 16%, transparent);
  /* Was 2.5rem/2.75rem — roughly half the house band rhythm, which is why the band read as
       cramped between the last content section and the footer. --comp-band-y is the one value that
       drives every other band on the site; matched here so this one stops being the exception.
       Fallback repeats the clamp because this sheet also renders outside .bcfc-comp. */
  padding-block: var(--comp-band-y, clamp(60px, 7vw, 92px));
  background: var(--bcfc-surface-raised, var(--rc-panel));
  border-top: 1px solid var(--rc-line);
}

body.is-islamic .bcfc-related-cards {
  --rc-accent: var(--bcfc-green-dark, #113e35);
  /* The Islamic window tints the same three roles off --bcfc-green-dark rather than off four more
       literals, so retheming the window is one token. */
  --rc-tile: color-mix(in srgb, var(--rc-accent) 9%, var(--bcfc-white, #fff));
  --rc-line: color-mix(in srgb, var(--rc-accent) 14%, var(--bcfc-white, #fff));
  --rc-tag: color-mix(in srgb, var(--rc-accent) 62%, var(--bcfc-gray-500, #667085));
  --rc-panel: color-mix(in srgb, var(--rc-accent) 5%, var(--bcfc-white, #fff));
}

.bcfc-related-cards__head {
  margin-bottom: 1.15rem;
}

/* The eyebrow itself is the .bcfc-eyebrow component; this only feeds it the band accent. */
.bcfc-related-cards__eyebrow {
  --eyebrow-ink: var(--bcfc-ink-strong, var(--rc-accent));
  --eyebrow-rule: var(--rc-accent);
  line-height: 1;
}

/* Sized to sit ABOVE the cards without dwarfing them - the old clamp topped out at
   2.1rem against 1rem card labels, so the heading read as the only real content. */
.bcfc-related-cards__title {
  margin: 0.55rem 0 0;
  color: var(--bcfc-ink-strong, var(--bcfc-navy, #0f1f4b));
  font: 800 clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem)/1.15 "Almarai", sans-serif;
  letter-spacing: -0.02em;
  /* NO `capitalize`. This heading is editor copy — _RelatedPagesList takes Model.Title and only
       falls back to the "Related Pages" literal — so capitalize title-cased whatever was typed,
       e.g. "More from our IR centre" -> "More From Our IR Centre". Same bug pages/CardsV18.css:132
       and bcfc-inline-partials.css:3450 already record for headings. */
  text-transform: none;
}

.bcfc-related-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* House grid gap. At 12px the six cards read as one crowded slab; the wrap is 1200px so the
       cards only lose ~8px each. */
  gap: 24px;
}

.bcfc-related-cards__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--rc-line);
  /* 14px was off the radius scale (sm 8 / md 12 / lg 16 / xl 20); cards and panels sit at lg. */
  border-radius: var(--bcfc-radius-lg, 16px);
  background: var(--bcfc-surface-raised, var(--bcfc-white, #fff));
  color: inherit;
  text-decoration: none;
  /* The house lift easing, the same curve .btn:hover uses, instead of a plain `ease`. */
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.bcfc-related-cards__card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rc-accent) 32%, var(--rc-line));
  /* Blue-tinted, like every other shadow on the site — the old one was a hand-mixed navy black.
       Hover ink may go brand blue here because the fill under it is WHITE (the house hover rule). */
  box-shadow: var(--bcfc-shadow-md, 0 8px 24px rgba(0, 74, 152, 0.12));
}

.bcfc-related-cards__card:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
}

.bcfc-related-cards__tile {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--bcfc-radius-md, 12px);
  display: grid;
  place-items: center;
  background: var(--rc-tile);
  box-shadow: inset 0 0 0 1px var(--rc-ring);
  color: var(--bcfc-dark-ink-brand, var(--rc-accent));
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bcfc-related-cards__tile svg {
  width: 22px;
  height: 22px;
}

.bcfc-related-cards__card:hover .bcfc-related-cards__tile {
  background: var(--rc-accent);
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--bcfc-white, #fff);
}

.bcfc-related-cards__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The category tag was 0.62rem (9.9px) - illegible on every page and worse in Arabic, whose
   glyphs run smaller at the same size. 0.75rem is the site's eyebrow size (12px at the default
   root), the floor for any text here; rem so the A+/A- control scales it. */
.bcfc-related-cards__tag {
  color: var(--bcfc-ink-muted, var(--rc-tag));
  font: 800 0.75rem/1.2 "Almarai", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bcfc-related-cards__name {
  color: var(--bcfc-ink-strong, var(--bcfc-navy, #0f1f4b));
  transition: color 0.18s ease;
  font: 700 0.95rem/1.35 "Almarai", sans-serif;
  /* Wrap to a second line instead of ellipsis-truncating: single-line clipping cut real page
       titles mid-phrase, which is what made the cards look broken rather than tidy. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A bare chevron floating in whitespace read as an artefact; as a disc that tints on
   hover it reads as the card's affordance. */
.bcfc-related-cards__arrow {
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bcfc-ink-muted, var(--rc-tag));
  background: transparent;
  transition: background-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.bcfc-related-cards__arrow svg {
  width: 16px;
  height: 16px;
}

.bcfc-related-cards__card:hover .bcfc-related-cards__arrow {
  background: var(--rc-tile);
  color: var(--bcfc-dark-ink-brand, var(--rc-accent));
  transform: translateX(2px);
}

.bcfc-related-cards__card:hover .bcfc-related-cards__name {
  color: var(--bcfc-dark-ink-brand, var(--rc-accent));
}

/* Arabic letterforms are cursive and DISCONNECT when tracked, so the two tracked styles in this
   band (the tag at .09em; the eyebrow resets inside its component) reset to normal in RTL. House rule, stated in
   bcfc-comp.css; logical properties cover everything else here, this is one of the two cases they
   do not. */
.bcfc-related-cards[dir=rtl] .bcfc-related-cards__tag {
  letter-spacing: normal;
}

/* RTL: chevron points/travels the reading direction */
.bcfc-related-cards[dir=rtl] .bcfc-related-cards__arrow {
  transform: scaleX(-1);
}

/* RTL: directional icons (plane, megaphone, transfer) still point toward the LTR-forward
   direction unless mirrored — flipping the whole tile matches the arrow above and is a
   no-op for the symmetric icons in the set (trophy, tag, store, etc.). */
.bcfc-related-cards[dir=rtl] .bcfc-related-cards__tile svg {
  transform: scaleX(-1);
}

.bcfc-related-cards[dir=rtl] .bcfc-related-cards__card:hover .bcfc-related-cards__arrow {
  transform: scaleX(-1) translateX(2px);
}

@media (max-width: 1024px) {
  .bcfc-related-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .bcfc-related-cards {
    /* Under 640px the house clamp already bottoms out near 60px; trimmed a touch further
           because the band is the last thing before the footer on a phone. */
    padding-block: clamp(40px, 9vw, 60px);
  }
  /* A single stacked column of up to 8 cards ran the band to several screens tall on a phone —
       the single most complained-about length on this page. Swapped for a horizontal, snap-scroll
       strip: same cards, one row, swipeable. The 82% card width intentionally leaves the next card
       peeking in so the strip reads as scrollable without a hint label. */
  .bcfc-related-cards__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bcfc-space-gutter, 16px);
    -webkit-overflow-scrolling: touch;
    /* Let the hover lift (translateY) and focus ring render without being clipped by the
           scroller, and give the last card room to breathe past the edge. */
    padding-block: 4px;
    padding-inline-end: 8px;
    margin-inline: calc(var(--bcfc-space-gutter, 16px) * -1);
    padding-inline-start: var(--bcfc-space-gutter, 16px);
    scrollbar-width: none;
  }
  .bcfc-related-cards__grid::-webkit-scrollbar {
    display: none;
  }
  .bcfc-related-cards__card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* One line here, not two — a snap card is narrow and fixed-width, so a wrapped second line
       made cards in the same strip different heights and the snap points visibly misaligned. */
  .bcfc-related-cards__name {
    -webkit-line-clamp: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bcfc-related-cards__card,
  .bcfc-related-cards__arrow,
  .bcfc-related-cards__tile,
  .bcfc-related-cards__name {
    transition: none;
  }
}
/* PHONE TEXT FLOOR (mobile audit 2026-10-14): the tag's 11px phone override is gone - the
   base size above (0.75rem) is now legible at every width, so the phone needs no special case. */
/* PHONE: ONE ROW OF DOTS (mobile audit 2026-10-14). A carousel with a dozen slides (IMTIAZ Offers
   on the homepage: 12) needed ~520px of 30px dashes and wrapped onto a second row under a 311px
   pager, which read as a rendering fault. The row no longer wraps, and the dots shrink to share it
   instead - flex-shrink works whatever width another sheet sets, including the !important ones,
   so this does not have to win that fight. The active dot keeps its full length. */
@media (max-width: 640px) {
  .bcfc-card-carousel__pagination {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .bcfc-card-carousel__pagination .swiper-pagination-bullet {
    flex: 0 1 auto;
    min-width: 6px;
    /* The phone rule above spaces dots with a 4px !important margin each side; with a dozen dots
       that alone is 96px. The 4px row gap does the spacing here instead. */
    margin: 0 !important;
  }
  .bcfc-card-carousel__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    flex-shrink: 0;
  }
}