@charset "UTF-8";
/* ============================================================
   /cards — IMTIAZ cards landing + select-to-compare.
   Visual language matched to the Loyalty Program & Offers pages
   (Material Icons, eyebrow+red-dash, 18px cards, canonical brand blue #004a98).
   Everything scoped under .cardx so nothing leaks sitewide.
   ============================================================ */
.cardx {
  --cx-blue: #004a98; /* canonical BCFC brand blue */
  --cx-blue-2: #005189; /* canonical accent — used for hover */
  --cx-red-link: var(--bcfc-blue, #004a98);
  --cx-red: var(--bcfc-navy, #071b33);
  --cx-heading: var(--bcfc-dark-ink-brand, #132a55);
  --cx-body: var(--bcfc-dark-ink-muted, #3a4657);
  --cx-muted: var(--bcfc-dark-ink-muted, #6c757d);
  --cx-bg: var(--bcfc-surface-raised, #f8fafd);
  --cx-panel: var(--bcfc-surface-raised, #ffffff);
  --cx-line: #e4ebf3;
  --cx-shadow: 0 4px 20px rgba(0, 74, 152, 0.08);
  --cx-shadow-lg: 0 18px 45px rgba(0, 74, 152, 0.14);
  --cx-wrap: 1200px;
  background: var(--bcfc-surface-raised, var(--cx-bg));
  color: var(--bcfc-ink, var(--cx-body));
  font-family: "Almarai", system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

.cardx *,
.cardx *::before,
.cardx *::after {
  box-sizing: border-box;
}

/* `color` sits at ELEMENT specificity on purpose — `:where()` contributes none — so it still
   overrides the global `a { color: #004a98 }` by source order, but never outranks a component's
   own ink. At `.cardx a` (0,1,1) it repainted every link-shaped button inside .cardx whose ink is
   declared at (0,1,0): the shared sticky-rail Apply CTA rendered navy #071b33 on its own #004a98
   fill (contrast 2.0), and corrected itself only on hover, where `…__cta:hover` reaches (0,2,0).
   `text-decoration` stays at (0,1,1) — it must keep beating Bootstrap's link underline. */
:where(.cardx) a {
  color: inherit;
}

.cardx a {
  text-decoration: none;
}

/* ---------- Buttons ----------
   LEGACY: .cardx-btn / --primary / --outline now serve ONLY Partials/Cards/_CardFinder.cshtml and
   css/components/card-finder.css (both held by another session on 2026-10-04). Everything else on
   /cards uses the shared component, `.bcfc-btn` (scss/components/_bcfc-button.scss). When
   _CardFinder moves to .bcfc-btn variants, delete this whole block. Do not add variants here. */
.cardx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  padding: 13px 24px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cardx-btn .material-icons-outlined {
  font-size: 1.125rem;
}

/* NB: the `.cardx` prefix keeps these at specificity (0,2,0) so they beat
   `.cardx a { color: inherit }` (0,1,1) — otherwise anchor-buttons lose their
   text colour and render dark-on-dark. */
.cardx .cardx-btn--primary {
  background: var(--cx-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 74, 152, 0.25);
}

/* Inverts to an outline (owner's call 2026-09-06): fill drops out, the border the base rule
   already reserves (`border: 2px solid transparent`) picks up the resting fill's own blue, and
   the label follows it. This selector stays at (0,3,0) — same as the fill-darkening version it
   replaces — so it still beats `.cardx a { color: inherit }

/* SUPERSEDED 2026-09-07 — the fill STAYS (deepened) and the label keeps its resting colour.
   Owner: "if background is not white the text cannot be black so it should be white", so a
   filled CTA no longer drops to a transparent face. The note below describes the 2026-09-06
   inversion this replaces; the reasoning for the amendment is in the :root block of
   shared/components/bcfc-button.css. */
/* This paragraph had lost its opening delimiter in an edit, so the prose was raw CSS and its
   trailing close-comment closed nothing — a syntax error browsers recover from by discarding
   whatever they were parsing. Re-opened, wording kept as found:
   `box-shadow` at (0,1,1) above; dropping the drop
   shadow rather than keeping one for a face that is now transparent. */
.cardx .cardx-btn--primary:hover {
  background: transparent;
  color: var(--cx-blue);
  border-color: var(--cx-blue);
  transform: translateY(-2px);
  box-shadow: none;
}

/* Outlined button for light surfaces — the design's secondary "Discover" button inside a card.
   (--ghost above is the white-on-photo variant and is unreadable on a white card.) */
.cardx .cardx-btn--outline {
  background: var(--bcfc-surface-raised, #fff);
  color: var(--bcfc-ink-link, var(--cx-blue));
  border-color: #cfd6db;
}

.cardx .cardx-btn--outline:hover {
  background: var(--bcfc-surface-raised, #fff);
  color: var(--bcfc-dark-ink-brand, var(--cx-blue-2));
  border-color: var(--cx-blue);
  transform: translateY(-2px);
}

.cardx-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Hero (image banner) ---------- */
/* Cards-only: drop the shared hero's dark scrim and background image/fallback gradient
   (kept everywhere else _PageHero is used) — the cards hero is a plain slim banner. */
.cardx .bcfc-hero__scrim,
.cardx .bcfc-hero__bg {
  display: none;
}

/* On the dark blue hero the eyebrow is white, not the gold this design shipped with —
   gold is not a BCFC brand colour (canonical palette: blue #004a98, red #f32735, gray
   #53575a, Islamic green #113e35). Same reason the leading dash is white here instead of
   inheriting the red used against light backgrounds elsewhere on the page. */
/* The breadcrumb trail renders INSIDE this hero (see the _BreadcrumbTrail call in
   CardsV17.cshtml), where its sitewide dark-blue-on-light colours read as almost invisible
   navy-on-navy. Mirrors what bcfc-page-hero.css already does for hero-embedded trails. */
.cardx .bcfc-breadcrumbs ol {
  color: rgba(255, 255, 255, 0.82);
}

.cardx .bcfc-breadcrumbs a:hover,
.cardx .bcfc-breadcrumbs a:focus-visible,
.cardx .bcfc-breadcrumbs [aria-current=page] {
  color: #fff;
}

.cardx .bcfc-breadcrumbs__separator {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* ---------- Stats strip (condensed footer highlights) ---------- */
/* The approved design's highlights band has four figures, not three; without this the fourth wraps
   onto a second row on its own and reads as a layout bug. Collapses to 2-up before the 1-up
   breakpoint below so the labels never get too narrow to read. */
/* ---------- Quick links row (the design's closing utility links) ---------- */
/* ---------- Card groups (the design's three stacked sections: Credit / Prepaid / Corporate) ----------
   Each group carries its own heading + blurb above its grid, and the filter tabs hide or show a
   whole group, so the "All" view matches the approved design's stacked layout. */
/* Deep-link target for the mega menu (see the scroll block in CardsV17.cshtml). Clears the sticky
   header the same way the IR pages do, plus the .cardx-cards panel's own 32px top padding so the
   group heading is not flush against the header. */
/* The design's short rule before the group title — red here (not blue) to match the eyebrow
   dashes used everywhere else on this page. */
/* ---------- Card grid ---------- */
.cardx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bcfc-surface-raised, var(--cx-panel));
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--cx-shadow);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.cardx-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cx-shadow-lg);
  border-color: color-mix(in srgb, var(--cx-blue) 35%, #fff);
}

.cardx-card.is-selected {
  border-color: var(--cx-blue);
  box-shadow: 0 0 0 2px var(--cx-blue), var(--cx-shadow-lg);
}

/* Fixed-height image panel per the design (a tinted panel with the card artwork contained inside),
   replacing the previous 3/4 aspect-ratio box that made the cards very tall. */
/* Lift + a hair of scale, no rotation. The tilt this replaced (rotate(-2deg)) was intentional but
   the rotated corner of a wide Mastercard artwork extends BELOW the unrotated bottom edge by
   sin(2deg) x half the image width, which beat the 4px lift and sat on the card title. A
   straight rise reads as the same "pick the card up" gesture without the overlap. */
/* Wordmark placeholder so a card with no artwork still fills the panel instead of collapsing. */
/* Top padding is larger than the other three sides on purpose: it is the clearance between the
   artwork panel and the card title, and 26px was tight enough that the title read as crowded by the
   card image even after the hover tilt stopped physically overlapping it. */
/* Labelled "Rewards" / "Highlights" block from the design, replacing the single-line green chip. */
/* ---------- Custom "Compare" checkbox chip ---------- */
/* ---------- Benefits ---------- */
/* ---------- Closing CTA ---------- */
/* ---------- Floating compare bar ---------- */
.cardx-comparebar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 160%);
  z-index: var(--bcfc-z-modal, 1050);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bcfc-surface-raised, var(--cx-panel));
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  box-shadow: 0 18px 45px rgba(0, 74, 152, 0.28);
  padding: 12px 12px 12px 24px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100vw - 32px);
}

.cardx-comparebar.is-visible {
  transform: translate(-50%, 0);
}

.cardx-comparebar__count {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--bcfc-ink, var(--cx-heading));
  white-space: nowrap;
}

.cardx-comparebar__count b {
  color: var(--bcfc-ink, var(--cx-blue));
}

.cardx-comparebar__clear {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bcfc-ink, var(--cx-muted));
}

.cardx-comparebar__clear:hover {
  color: var(--bcfc-dark-ink-brand, var(--cx-red-link));
}

/* ---------- Compare modal ---------- */
.cardx-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bcfc-z-modal, 1050);
  display: none;
}

.cardx-modal.is-open {
  display: block;
}

.cardx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 43, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cardx-modal.is-open .cardx-modal__backdrop {
  opacity: 1;
}

.cardx-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(1040px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--bcfc-surface-raised, var(--cx-panel));
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.cardx-modal.is-open .cardx-modal__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.cardx-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--cx-line);
}

.cardx-modal__head h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bcfc-ink-strong, var(--cx-heading));
  margin: 0;
}

.cardx-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cx-line);
  background: var(--bcfc-surface-raised, #fff);
  cursor: pointer;
  color: var(--bcfc-ink, var(--cx-heading));
  transition: background-color 0.2s, color 0.2s;
}

.cardx-modal__close:hover {
  background: var(--cx-red-link);
  color: #fff;
  border-color: var(--cx-red-link);
}

.cardx-modal__body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cardx-ctable {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.cardx-ctable th,
.cardx-ctable td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--cx-line);
  vertical-align: middle;
}

.cardx-ctable thead th {
  position: sticky;
  top: 0;
  background: var(--bcfc-surface-raised, var(--cx-panel));
  z-index: 2;
  border-bottom: 2px solid var(--cx-line);
}

.cardx-ctable__rowlabel {
  text-align: start;
  font-weight: 800;
  color: var(--bcfc-ink-link, var(--cx-heading));
  background: var(--bcfc-surface-raised, #fbfdff);
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  white-space: nowrap;
  font-size: 0.90625rem;
}

.cardx-ctable thead .cardx-ctable__rowlabel {
  z-index: 3;
}

.cardx-ctable__cardhead {
  min-width: 200px;
}

.cardx-ctable__cardhead img {
  height: 58px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 40, 90, 0.22));
}

.cardx-ctable__cardhead .name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bcfc-ink-link, var(--cx-heading));
  line-height: 1.25;
}

.cardx-ctable tbody tr:hover td {
  background: rgba(0, 74, 152, 0.03);
}

.cardx-ctable .val {
  font-size: 0.96875rem;
  font-weight: 700;
  color: var(--bcfc-ink-link, var(--cx-heading));
}

.cardx-ctable .val--muted {
  color: var(--bcfc-ink-link, var(--cx-muted));
  font-weight: 500;
}

.cardx-ctable__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}

.cardx-ctable__benefits li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--bcfc-ink-link, var(--cx-body));
  line-height: 1.45;
}

.cardx-ctable__benefits .material-icons-outlined {
  font-size: 1.125rem;
  color: var(--bcfc-dark-ink-green, #0c7a4b);
  flex-shrink: 0;
  margin-top: 1px;
}

.cardx-ctable__apply td {
  padding: 20px 18px;
}

/* ---------- Card grid category filter tabs ---------- */
/* ---------- Partner logos marquee (reuses the global .logo-carousel-* motion) ---------- */
/* Second row scrolls the opposite way. Higher specificity + longhand so it beats the
   global `.logo-carousel-track { animation: … }` shorthand's default direction. */
/* Partner logos stay FULL COLOUR at rest. They used to sit at grayscale(1)/opacity .72 and only
   come to life on hover, which meant a partner's brand was desaturated by default — hovering is the
   exception, not the resting state. Hover now only pauses the marquee (below); there is no
   filter/opacity change left, so the transition on those properties goes with it. Pause-on-hover is
   NOT repeated here: the shared `.logo-carousel-track:hover` rule in bcfc-inline-partials.css already
   provides it for every carousel that uses the component. */
/* ---------- Redeem calculator (Shared/_RedeemCalculator.cshtml) ----------
   Ported from the marketing-approved static design (loyality-programme.html
   .calc section) — same layout/values, cardx tokens, bilingual labels, and
   rates rendered server-side onto each card instead of a hardcoded JS array. */
.cardx .redeem-calc {
  margin: 32px 0 10px;
}

.cardx .redeem-calc__panel {
  background: var(--bcfc-surface-raised, var(--cx-panel));
  border: 1px solid var(--cx-line);
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: var(--cx-shadow);
}

.cardx .redeem-calc__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.cardx .redeem-calc__top .material-icons-outlined {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 74, 152, 0.08);
  color: var(--bcfc-ink, var(--cx-blue));
  font-size: 1.5rem;
}

.cardx .redeem-calc__top h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 800;
  color: var(--bcfc-ink-strong, var(--cx-heading));
  margin: 0;
  letter-spacing: -0.01em;
}

.cardx .redeem-calc__sub {
  color: var(--bcfc-ink, var(--cx-muted));
  font-size: 0.9375rem;
  margin: 0 0 22px;
}

.cardx .redeem-calc__input {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--bcfc-surface-sunken, #eaf2fb), var(--bcfc-surface-sunken, #f6f9fd));
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  padding: 18px 22px;
}

.cardx .redeem-calc__input label {
  font-weight: 800;
  color: var(--bcfc-ink-muted, var(--cx-heading));
  font-size: 0.9375rem;
  white-space: nowrap;
}

.cardx .redeem-calc__num {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bcfc-surface-raised, #fff);
  border: 1.5px solid var(--cx-line);
  border-radius: 12px;
  padding: 10px 16px;
}

.cardx .redeem-calc__num input {
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--bcfc-ink, var(--cx-blue));
  width: 100%;
  background: transparent;
}

.cardx .redeem-calc__num span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bcfc-ink, var(--cx-muted));
  white-space: nowrap;
}

.cardx .redeem-calc__range {
  width: 100%;
  margin-top: 16px;
  accent-color: var(--cx-blue);
  height: 4px;
}

.cardx .redeem-calc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.cardx .redeem-calc__card {
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  padding: 20px 20px 18px;
  background: var(--bcfc-surface-raised, #fff);
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
}

.cardx .redeem-calc__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cx-shadow);
}

.cardx .redeem-calc__card.is-dim {
  opacity: 0.45;
}

.cardx .redeem-calc__cardtop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cardx .redeem-calc__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bcfc-surface-raised, #fff);
  border: 1px solid var(--cx-line);
  flex-shrink: 0;
  overflow: hidden;
}

.cardx .redeem-calc__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cardx .redeem-calc__logo .material-icons-outlined {
  color: var(--bcfc-ink, var(--cx-blue));
  font-size: 1.25rem;
}

/* Fallback icon start-state, unscoped so it applies whichever card-face wrapper (.cardx / .cx18)
   is active. The onerror handler on the logo <img> flips this back to `display:grid` inline,
   which still wins over this class rule (inline specificity). */
.redeem-calc__logo-fallback {
  display: none;
}

.cardx .redeem-calc__name {
  font-weight: 800;
  font-size: 0.90625rem;
  color: var(--bcfc-ink, var(--cx-heading));
  line-height: 1.25;
}

.cardx .redeem-calc__val {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--bcfc-ink, var(--cx-blue));
  letter-spacing: -0.01em;
  line-height: 1;
}

.cardx .redeem-calc__unit {
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--bcfc-ink, var(--cx-muted));
  margin-top: 4px;
}

.cardx .redeem-calc__note {
  font-size: 0.75rem;
  color: var(--bcfc-dark-ink, var(--cx-red));
  margin-top: 8px;
  font-weight: 700;
  min-height: 14px;
}

.cardx .redeem-calc__foot {
  font-size: 0.78125rem;
  color: var(--bcfc-ink, var(--cx-muted));
  margin: 18px 0 0;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .cardx .redeem-calc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .cardx .redeem-calc__grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Responsive ---------- */
/* The design drops the card grid to two columns at 1080px, before the other sections reflow. */
@media (max-width: 640px) {
  .cardx-comparebar {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
    padding: 14px 18px;
  }
}
/* ===========================================================================
   COMPARE MODAL ON PHONES
   It had no mobile rules at all: a centred 100vh-capped dialog with a 40px
   close button and an uncontained scroller.

   - dvh AFTER the vh line, the pattern already documented in
     bcfc-inline-partials.css: mobile Safari's 100vh excludes the URL bar, so a
     vh-only cap lets the panel run past the bottom of the screen.
   - Full-bleed sheet under 640px. `left/top: 50%` + translate has to be undone
     on BOTH the base rule and `.is-open`, which re-applies the transform.
   - overscroll-behavior: contain, or reaching the end of the comparison table
     scrolls the page behind the dialog.
   - The table keeps its sticky row labels — sideways scrolling is the right
     pattern for a comparison table with three or more cards on a phone — but
     the sheet itself must never overflow the viewport.

   THE TWO-CARD CASE MUST NOT SCROLL SIDEWAYS AT ALL — 2026-09-23

   Measured on the running app at 375x812 with two cards selected: the table
   came out **604px wide in a 375px sheet**, so one of the two cards was always
   clipped and the sheet opened already needing a horizontal drag. Two cards is
   the common case (the compare bar appears on the second tick), and a
   comparison you cannot see both sides of is not a comparison.

   Three numbers caused it, and all three are desktop numbers left unqualified:

     1. `min-width: 520px` on the table — a floor written for a roomy dialog,
        which at 375px is itself the overflow.
     2. `white-space: nowrap` + an 18px inline pad on `__rowlabel`, which let
        "Profit / interest rate" size its own column to **204px — 54% of the
        viewport** — spent on a label, not on either card.
     3. `min-width: 200px` on `__cardhead`, i.e. 400px of card columns before
        the label column is counted.

   Under 640px the label column is capped instead (104px, wrapping) and each card
   column floored at 132px, so two cards land at 88 + 264 = **352px inside 375**
   and the sheet opens flat. A third card overflows on purpose and scrolls, with
   the label column staying stuck to the edge — which is the one case where
   sideways scrolling is the correct answer rather than a symptom.
   =========================================================================== */
.cardx-modal__panel {
  max-height: calc(100dvh - 48px);
}

@media (max-width: 640px) {
  .cardx-modal__panel,
  .cardx-modal.is-open .cardx-modal__panel {
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .cardx-modal__head {
    padding: 16px;
  }
  .cardx-modal__head h2 {
    font-size: 1.0625rem;
  }
  .cardx-modal__body {
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The 520px floor IS the overflow at this width — see the note above. */
  .cardx-ctable {
    min-width: 0;
  }
  /* Capped and wrapping, so no single long label can size the column. The
     border is the scroll edge; `border-inline-end` rather than a shadow so it
     lands on the correct side on /ar. */
  .cardx-ctable__rowlabel {
    width: 104px;
    min-width: 88px;
    max-width: 104px;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: manual;
    font-size: 0.75rem;
    line-height: 1.3;
    padding-inline: 12px 8px;
    border-inline-end: 1px solid var(--cx-line);
  }
  /* 120px x 2 + the 104px label column = 344px, inside a 375px sheet. */
  .cardx-ctable__cardhead {
    min-width: 120px;
  }
  .cardx-ctable__cardhead img {
    height: 40px;
    margin-bottom: 8px;
  }
  .cardx-ctable__cardhead .name {
    font-size: 0.8125rem;
  }
  /* hyphens, so a long value breaks with a hyphen rather than mid-word: at 120px a cell
     holds about 14 characters. */
  .cardx-ctable .val {
    font-size: 0.875rem;
    hyphens: manual;
  }
  /* WORDS STAY WHOLE. The site inherits `word-break: break-word` (measured on the cells), which
     in a 120px column breaks mid-syllable — "Compliment / ary travel insurance" on /en and
     "عرو / ض / الحيا / ة" on /ar. `normal` restores word-boundary wrapping; `overflow-wrap`
     stays as the safety valve for the rare word genuinely wider than the column, so nothing
     can overflow the cell. Stated on the cells, not the table, because `word-break` on a table
     does not reach a cell that inherits it from an ancestor of the table. */
  .cardx-ctable th,
  .cardx-ctable td {
    padding: 12px 10px;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .cardx-ctable__benefits {
    gap: 6px;
  }
  .cardx-ctable__benefits li {
    font-size: 0.8125rem;
    line-height: 1.35;
    gap: 6px;
  }
  .cardx-ctable__benefits .material-icons-outlined {
    font-size: 1rem;
  }
  /* Full-width 44px tap target: the cell is now only 120px wide, so an
     intrinsically sized pill would be a thin sliver of it. */
  .cardx-ctable__apply td {
    padding: 14px 10px;
  }
  .cardx-ctable__apply .bcfc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 0.8125rem;
    text-align: center;
    line-height: 1.2;
  }
}
/* ===========================================================================
   COMPARE TABLE ON PHONES, PART 2 — 2026-10-15 ("compare is not mobile friendly")

   The block above keeps the DESKTOP shape — a sticky label column beside the
   card columns — and only shrinks it. At 360px that leaves each card ~120px,
   card names wrap to three lines, and with the engine's MAX of 4 cards the
   table is 104 + 4 x 120 = 584px and scrolls sideways.

   So under 640px each row's label becomes a CAPTION ROW spanning the full
   width, and the values sit side by side beneath it: two cards get ~164px
   each instead of 120px. Each <tr> is a grid of `--cx-cols` columns — set by
   the compare engine in CardsV18.cshtml from the number of selected cards,
   through the CSSOM (style.setProperty), so no inline style attribute is
   emitted for the CSP to refuse. 8.5rem is the column floor: three or four
   cards that cannot fit still scroll, and only then.

   The empty corner cell (thead) and the empty label on the Apply row have no
   job in this shape and are dropped with :empty.
   =========================================================================== */
@media (max-width: 640px) {
  .cardx-ctable,
  .cardx-ctable thead,
  .cardx-ctable tbody {
    display: block;
  }
  .cardx-ctable {
    min-width: calc(var(--cx-cols, 2) * 8.5rem);
  }
  .cardx-ctable tr {
    display: grid;
    grid-template-columns: repeat(var(--cx-cols, 2), minmax(8.5rem, 1fr));
    border-bottom: 1px solid var(--cx-line);
  }
  /* border: 0, not just the bottom: index.css frames every `table td` in 1px, which boxed
     each cell; the row border above and the column hairline below are the only rules. */
  .cardx-ctable th,
  .cardx-ctable td {
    border: 0;
  }
  /* The whole head row sticks now, not each <th>: a sticky cell inside a grid
     row can only travel within that row. */
  .cardx-ctable thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bcfc-surface-raised, var(--cx-panel));
  }
  .cardx-ctable thead tr {
    border-bottom-width: 2px;
  }
  .cardx-ctable thead th {
    position: static;
  }
  .cardx-ctable__rowlabel:empty {
    display: none;
  }
  .cardx-ctable__rowlabel {
    grid-column: 1/-1;
    /* Pinned to the visible width, so with 3-4 cards the caption stays centred over what is
       on screen while the values scroll under it. The sheet is full-bleed here, so 100vw IS
       the visible width. */
    position: sticky;
    inset-inline-start: 0;
    justify-self: start;
    width: min(100%, 100vw);
    min-width: 0;
    max-width: none;
    border-inline-end: 0;
    padding: 12px 14px 0;
    font-size: 0.8125rem;
  }
  .cardx-ctable tbody td:not(.cardx-ctable__rowlabel) {
    padding-top: 8px;
  }
  /* A hairline between the card columns, on the logical side so /ar matches. */
  .cardx-ctable tr > :not(.cardx-ctable__rowlabel) + :not(.cardx-ctable__rowlabel) {
    border-inline-start: 1px solid var(--cx-line);
  }
  .cardx-ctable__cardhead {
    min-width: 0;
  }
  .cardx-ctable__cardhead .name {
    font-size: 0.875rem;
  }
  .cardx-ctable .val {
    font-size: 0.9375rem;
  }
}
/* 44px minimum touch target (it was 40) wherever the pointer is a finger. */
@media (pointer: coarse) {
  .cardx-modal__close {
    width: 44px;
    height: 44px;
  }
}