/* =====================================================================
   AL MABARRAH v9 — Site-wide overrides
   - Bound after every existing stylesheet
   - Scope: logo SVG sizing, smoother animations, mobile polish, new
            components (impact-by-effect chips, treatment cards, donor
            history, board, country drill-down, social tray)
   - Reduced-motion guards applied throughout
   - Keep all selectors flat; no @layer (legacy CSS compat)
   ===================================================================== */

/* ---------- 1. Brand logo (PNG -> SVG migration) ---------- */
/* Old PNG was 140w intrinsic; SVG has its own viewBox. Lock the displayed
   size so existing layouts don't shift. */
.site-header .brand-mark {
  width: auto;
  height: 52px;
  overflow: visible;
}
.brand-mark img,
.site-header .brand-mark img,
.brand-logo--colored,
.brand-logo--white {
  width: auto;
  height: 52px;
  max-width: 80px;
  display: block;
  object-fit: contain;
  position: static;
}
@media (max-width: 640px) {
  .site-header .brand-mark { height: 44px; }
  .brand-mark img,
  .brand-logo--colored,
  .brand-logo--white {
    height: 44px;
    max-width: 64px;
  }
}
/* Some pages render both copies (colored + white) for scroll-state swap.
   Without color inversion the SVG can render with the wrong contrast on
   dark headers. Use CSS filter to tint the white copy when the SVG itself
   doesn't ship a white variant. */
.brand-logo--white {
  filter: brightness(0) invert(1);
}

/* ---------- 2. Hotline strip + social tray ---------- */
.hotline-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 4px;
  font-size: 0.76rem;
  max-height: 32px;
  overflow: hidden;
}
.hotline-strip .social-tray {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hotline-strip .social-tray a {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}
.hotline-strip .social-tray a:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.hotline-strip .social-tray svg {
  width: 16px;
  height: 16px;
}
.hotline-strip .whatsapp-cta-wrap,
.hotline-strip .whatsapp-cta {
  display: none !important;
}
.hotline-strip .whatsapp-cta:hover { background: rgba(37, 211, 102, 0.32); }

/* ---------- 3. Floating WhatsApp action button ----------
 *
 * WAS: a permanent green pill reading «واتساب الخدمة», parked over the bottom
 * corner of every page. It sat on top of page content at all times to say a
 * thing the icon already says, and on the homepage it landed across the first
 * card of «أبواب العطاء».
 *
 * NOW: a 56px circle carrying the icon alone. The label is still in the DOM
 * and still styled — it is revealed on hover and on keyboard focus, so a
 * pointer user who pauses and a keyboard user who tabs to it both get the
 * words, while the resting state costs the page one icon.
 *
 * WHY HIDING THE LABEL IS SAFE HERE, AND WHEN IT WOULD NOT BE
 *
 * Hover-only is a real accessibility failure when the hidden thing is the only
 * way to know what a control does. It is not the case here: the anchor carries
 * aria-label="واتساب خدمة المتبرعين", which is what assistive technology
 * announces whether the span is visible or not. The visible label is a
 * convenience for sighted pointer users, not the control's name — so revealing
 * it on hover adds something and takes nothing away.
 *
 * HOW THE REVEAL IS ANIMATED
 *
 * grid-template-columns 0fr -> 1fr, not max-width. A max-width transition has
 * to guess a number larger than the text, so it runs fast then idles, and the
 * easing is visibly wrong. 0fr -> 1fr animates to the label's own width, so
 * the motion matches the content at any string length — which matters when the
 * association can translate this label. */
.whatsapp-floating {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* One size for every screen, from 48px on a 320px phone to 56px from about
     1100px up. 48 clears the 44px touch minimum and does not sit on a phone's
     content like a 56px disc does; the icon keeps the same share of it. */
  --wa-size: clamp(3rem, 2.6rem + 0.8vw, 3.5rem);
  inline-size: var(--wa-size);
  block-size: var(--wa-size);
  padding: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(11, 60, 35, 0.28);
  /* The width is what expands, so it is what is eased. The cubic-bezier is the
     one the cards and buttons on this site already use, so the button does not
     move to a rhythm of its own. */
  transition: inline-size 260ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 220ms ease,
              transform 220ms cubic-bezier(.22, .61, .36, 1),
              gap 260ms cubic-bezier(.22, .61, .36, 1);
}

.whatsapp-floating svg {
  inline-size: calc(var(--wa-size) * 0.46);
  block-size: calc(var(--wa-size) * 0.46);
  flex: 0 0 auto;
}

/* The label: present, measurable, and at zero width until asked for. */
.whatsapp-floating .lbl {
  display: grid;
  grid-template-columns: 0fr;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  transition: grid-template-columns 260ms cubic-bezier(.22, .61, .36, 1),
              opacity 180ms ease;
}
/* The inner span is the grid ITEM the 0fr track measures. min-inline-size:0
   on it is the part that makes the track actually collapse — without it the
   item keeps its min-content width and nothing moves. */
.whatsapp-floating .lbl > span {
  overflow: hidden;
  min-inline-size: 0;
}

/* Hover only where there is a pointer that hovers. On a touch screen the
   first tap fires :hover and it sticks, so the disc would open into a pill
   under the thumb and stay open after WhatsApp returns the visitor. */
.whatsapp-floating:focus-visible {
  inline-size: auto;
  gap: 10px;
  padding-inline: 18px;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11, 60, 35, 0.38);
}
.whatsapp-floating:focus-visible .lbl {
  grid-template-columns: 1fr;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .whatsapp-floating:hover {
    inline-size: auto;
    gap: 10px;
    padding-inline: 18px;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(11, 60, 35, 0.38);
  }
  .whatsapp-floating:hover .lbl {
    grid-template-columns: 1fr;
    opacity: 1;
  }
}

/* Focus ring: the site's own, not one written here.
 *
 * A 3px gold outline was declared at this spot and measured as dead code —
 * aegov-dls.css loads after this sheet and its global
 * `body:not(.no-dls) :is(a, button, …):focus-visible` rule is more specific,
 * so the teal 1.6px ring won every time. Rather than escalate a fight this
 * button has no reason to win, the global ring stands: it is the focus
 * treatment on every other control on the site, and teal #12525C on WhatsApp
 * green #25D366 measures 4.37:1 — above the 3:1 WCAG 2.2 asks of a non-text
 * indicator. Only the offset is set, so the ring clears the circle. */
.whatsapp-floating:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-floating,
  .whatsapp-floating .lbl { transition: none !important; }
  .whatsapp-floating:hover,
  .whatsapp-floating:focus-visible { transform: none; }
}

/* ---------- 4. Nav grouping (DOCX: simplify) ---------- */
.site-menu { gap: 6px 10px; }
.site-menu a[data-nav-group]::before {
  content: attr(data-nav-group);
  display: none;
}
@media (min-width: 980px) {
  .site-menu {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 18px;
  }
}

/* ---------- 5. Reveal animations: smoother defaults ---------- */
.reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal.in,
[data-reveal].is-visible,
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion guard — neutralize all reveals + GPU layers */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6. Hero ripple / carousel: GPU-friendly ---------- */
.ripple-field span,
.hero-slide,
.hero-shade {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-slide {
  transition: opacity 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 7. Smoothed scrolling section reveals ---------- */
.section-block { content-visibility: auto; contain-intrinsic-size: 800px; }

/* ---------- 8. Impact-by-effect chips (DOCX: تبرع حسب الأثر) ---------- */
.impact-effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-block-start: 24px;
}
.impact-effect-card {
  position: relative;
  padding: 22px 20px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(15, 60, 78, 0.06), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(15, 60, 78, 0.12);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.impact-effect-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 16px 36px rgba(8, 32, 44, 0.10);
}
.impact-effect-card .iec-emoji { font-size: 1.6rem; }
.impact-effect-card .iec-title { font-weight: 700; font-size: 1.05rem; }
.impact-effect-card .iec-desc { font-size: 0.92rem; opacity: 0.78; }
.impact-effect-card .iec-cta {
  margin-block-start: 8px;
  font-weight: 600;
  color: #8a6516;
  font-size: 0.88rem;
}

/* ---------- 9. Treatment-cases page ---------- */
.tcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-block-start: 28px;
}
.tcase-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 60, 78, 0.10);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px rgba(8, 32, 44, 0.06);
}
.tcase-card .tcase-media {
  aspect-ratio: 16 / 10;
  background: #e9eef2 center/cover no-repeat;
  position: relative;
}
.tcase-card .tcase-media::after {
  content: attr(data-anon-label);
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 10px;
  background: rgba(8, 32, 44, 0.72);
  color: #fff;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 999px;
}
.tcase-card .tcase-body { padding: 16px 18px 18px; display: grid; gap: 8px; }
.tcase-card .tcase-cond { font-size: 0.86rem; color: #5c6b75; }
.tcase-card .tcase-title { font-weight: 700; font-size: 1.04rem; }
.tcase-card .tcase-hospital { font-size: 0.84rem; color: #4a5d6b; }
.tcase-card .tcase-progress {
  margin-block-start: 8px;
  height: 8px;
  background: rgba(15, 60, 78, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.tcase-card .tcase-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9C7B1B, #C9A227);
  transition: width 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tcase-card .tcase-amounts {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  font-weight: 600;
  color: #324049;
}
.tcase-card .tcase-amounts .raised { color: #12525C; }
.tcase-card .tcase-amounts .remain { color: #9C7B1B; }
.tcase-card .tcase-cta {
  margin-block-start: 10px;
  display: inline-flex;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0a2a3d;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.tcase-card .tcase-cta:hover { background: #103a52; }

/* ---------- 10. Country drill-down (charity guide) ---------- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.country-card {
  border-radius: 16px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid rgba(15, 60, 78, 0.10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.country-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 12px 28px rgba(8, 32, 44, 0.08);
}
.country-card .flag { font-size: 1.6rem; }
.country-card .name { font-weight: 700; }
.country-card .pcount { font-size: 0.84rem; color: #5c6b75; }
.country-projects {
  display: none;
  margin-block-start: 18px;
  padding: 20px;
  border-radius: 18px;
  background: #f5f8fa;
}
.country-projects.open { display: block; }

/* ---------- 11. Board members ---------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-block-start: 22px;
}
.board-card {
  border-radius: 18px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid rgba(15, 60, 78, 0.10);
  text-align: center;
}
.board-card .b-avatar {
  width: 88px;
  height: 88px;
  margin-inline: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A227, #9C7B1B);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.4rem;
}
.board-card .b-name { margin-block: 12px 4px; font-weight: 700; }
.board-card .b-role { font-size: 0.88rem; color: #5c6b75; }
.board-card .b-bio { margin-block-start: 8px; font-size: 0.86rem; line-height: 1.6; color: #324049; }

/* ---------- 12. Strategic goals ---------- */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-block-start: 22px;
}
.goal-card {
  position: relative;
  padding: 22px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 60, 78, 0.10);
}
.goal-card .g-num {
  font-size: 2.2rem;
  font-weight: 800;
  /* 3.15:1 on the card's white. Was rgba(212,175,55,.32), which resolves to
     #e8cf83 and measures 1.53:1 — invisible. These are real text nodes, «1»
     to «5», at 38px and weight 900, so 1.4.3 asks 3:1 for large text and this
     is the DLS's aegold-500, the first step on the ramp that reaches it. */
  color: #b68a35;
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 14px;
}
.goal-card .g-title { font-weight: 700; font-size: 1.08rem; margin-block-end: 8px; }
.goal-card .g-body  { font-size: 0.94rem; line-height: 1.7; color: #324049; }

/* ---------- 13. Donor history (my-impact) ---------- */
.donor-history-table {
  width: 100%;
  margin-block-start: 20px;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.donor-history-table th {
  text-align: start;
  font-size: 0.84rem;
  color: #5c6b75;
  padding-block-end: 8px;
}
.donor-history-table td {
  background: #fff;
  padding: 14px 16px;
  border-top: 1px solid rgba(15, 60, 78, 0.06);
  border-bottom: 1px solid rgba(15, 60, 78, 0.06);
}
.donor-history-table tr td:first-child { border-inline-start: 1px solid rgba(15, 60, 78, 0.06); border-start-start-radius: 12px; border-end-start-radius: 12px; }
.donor-history-table tr td:last-child  { border-inline-end:   1px solid rgba(15, 60, 78, 0.06); border-start-end-radius: 12px;   border-end-end-radius: 12px; }
.donor-history-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; }
.donor-history-status.completed { color: #12525C; }
.donor-history-status.progress  { color: #9C7B1B; }
.donor-history-status.open      { color: #1e6fb8; }

/* ---------- 14. Generic page hero ---------- */
.page-hero {
  padding: 88px 24px 56px;
  background: linear-gradient(140deg, #0a2a3d 0%, #103a52 100%);
  color: #fff;
  text-align: center;
}
.page-hero h1 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-block-end: 12px; }
.page-hero p  { max-width: 720px; margin-inline: auto; opacity: 0.9; line-height: 1.8; }
.page-hero .crumb { font-size: 0.86rem; opacity: 0.7; margin-block-end: 14px; }

/* ---------- 15. Section utility helpers ---------- */
.v9-section { padding: 64px 24px; max-width: 1180px; margin-inline: auto; }
.v9-section h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-block-end: 8px; }
.v9-section .lede { color: #324049; line-height: 1.8; max-width: 720px; }
.v9-eyebrow { display: inline-block; font-size: 0.82rem; letter-spacing: 0.06em; color: #8a6516; font-weight: 700; margin-block-end: 8px; text-transform: none; }

/* ---------- 16. Monthly donation prominence ---------- */
.monthly-banner {
  margin-block: 28px;
  padding: 24px 24px;
  border-radius: 22px;
  background: linear-gradient(115deg, #103a52 0%, #0a2a3d 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.monthly-banner h3 { font-size: 1.2rem; margin-block-end: 6px; }
.monthly-banner p  { opacity: 0.86; max-width: 540px; }
.monthly-banner .mb-cta {
  background: #C9A227;
  color: #1a1a1a;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
@media (max-width: 640px) {
  .monthly-banner { grid-template-columns: 1fr; }
}

/* ---------- 17. Quran verse callout (zakat) ---------- */
.verse-callout {
  margin-block: 30px;
  padding: 26px 30px;
  border-radius: 22px;
  background: linear-gradient(140deg, rgba(212, 175, 55, 0.10), rgba(15, 60, 78, 0.06));
  border-inline-start: 4px solid #C9A227;
  font-family: "Amiri", "Noto Naskh Arabic", serif;
  font-size: 1.12rem;
  line-height: 2.1;
  color: #1f2d36;
}
.verse-callout .verse-source {
  margin-block-start: 10px;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-size: 0.84rem;
  color: #5c6b75;
}

/* ---------- 18. Crypto-zakat tab (zakat) ---------- */
.crypto-zakat {
  margin-block-start: 30px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 60, 78, 0.10);
}
.crypto-zakat h3 { margin-block-end: 8px; }
.crypto-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 12px;
}
.crypto-coin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 60, 78, 0.06);
  font-weight: 600;
  font-size: 0.9rem;
}
.crypto-zakat .pending-note {
  margin-block-start: 14px;
  padding: 10px 14px;
  background: rgba(212, 175, 55, 0.10);
  border-radius: 12px;
  font-size: 0.86rem;
  color: #5c4a14;
}

/* ---------- 19. UAE Pass button ---------- */
.uaepass-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #000;
}
.uaepass-button:hover { background: #1a1a1a; }
.uaepass-button .uaepass-mark {
  background: #fff;
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.78rem;
}

/* ---------- 19b. UAE Pass authenticated bar ---------- */
.uaepass-user-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ds-teal-50, #e8f4f8);
  border: 1px solid var(--ds-teal-200, #a4d4e4);
  font-size: 0.92rem;
}
.uaepass-user-bar .uaepass-mark {
  background: #000;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.72rem;
}
.uaepass-user-name { font-weight: 700; }
.uaepass-logout {
  background: none;
  border: none;
  color: var(--ds-teal-700, #1a5f7a);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}

/* ---------- 20. Bag/sticky CTAs: smoother ---------- */
.primary-button,
.ghost-button,
.text-button {
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.primary-button:hover { transform: translateY(-1px); }

/* ---------- 21. Footer socials lift ---------- */
.site-footer .social-tray a { background: rgba(255, 255, 255, 0.10); }

/* The footer's colours live in theme.css now: brand gold on the navy, 6.1:1.
   The #36c574 green below fixed a contrast failure of the older #12525C, but
   green is not in the identity and the gold passes as well. The two rules
   are kept as history and neutralised — theme.css loads later at the same
   specificity, so they no longer paint anything. */
.mabarrah-footer .mb-footer-license b { color: var(--brand-gold, #C9A227); }
/* a11y: the rest of the footer green, finishing a fix that was started and
   left half done directly above.
   The line above already moved .mb-footer-license b off --mb-emerald for
   exactly this reason. motion-v2.css sets --mb-emerald to #12525C and applies
   it to THREE footer selectors — the license bold, the tagline, and the
   column headings — and only the first was corrected. The other two kept
   4.42:1 on the footer's #0A2A3D, where 1.4.3 asks 4.5 for text under
   18.66px bold.
   Measured, all against #0A2A3D:
     #12525C  4.42  fails
     #36c574  6.66  passes — the value the license line already uses
   Same green as its sibling rather than a new one: two corrections of one
   colour should not introduce two colours. */
.mabarrah-footer .mb-footer-tagline,
.mabarrah-footer .mb-footer-tagline strong,
.mabarrah-footer .mb-footer-col h3 { color: var(--brand-gold, #C9A227); }


/* -------------------------------------------------- UAE Pass, hidden --- */
/* The hidden attribute already means display:none, but .monthly-banner and
   .v9-section in this file carry !important declarations and the reveal
   animation touches the same elements. A panel that stayed visible because a
   class outranked the attribute has happened in this project before, so the
   attribute is made to win outright. */
[data-uaepass][hidden] { display: none !important; }

/* صورة بطاقة الحالة العلاجية: <img> بدل خلفية CSS.
   السبب: لا يوجد تحميل مؤجَّل أصلي لخلفية CSS — الخاصية loading تعمل على <img>
   وحده — فكانت الصور الست تُحمَّل كلها فور فتح الصفحة مهما كان موضعها.
   موضوعة مطلقة تحت ::before و ::after فتشغل الموضع نفسه الذي كانت تشغله
   الخلفية، بلا تغيير في أي قاعدة قائمة. و aspect-ratio: 16/10 على الحاوية
   يحجز المساحة سلفاً فلا إزاحة تخطيط عند وصول الصورة. */
.tcase-card .tcase-media__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* الطبقتان الزخرفيتان تبقيان فوق الصورة كما كانتا فوق الخلفية. */
.tcase-card .tcase-media::before,
.tcase-card .tcase-media::after { z-index: 1; }