/* RTL OVERRIDES (PHASE 6) — LOADED ONLY ON ARABIC PAGES (dir=rtl), AFTER app.css.
   THE DESIGN SYSTEM WAS BUILT LTR; THESE RULES MIRROR THE PHYSICAL PROPERTIES THAT DO NOT
   FLIP AUTOMATICALLY: TEXT ALIGNMENT DEFAULTS, THE RED-BAR SECTION HEADERS, THE TICKER,
   ROW THUMBNAILS AND PRICE/ARROW GLYPHS. EVERYTHING ELSE FOLLOWS FROM dir=rtl + FLEX/GRID. */

[dir="rtl"] body { text-align: right; }
[dir="rtl"] .wx-region-label { left: auto; right: 12px; text-align: right; }

/* BREAKING TICKER: LABEL SITS ON THE INLINE-START SIDE; THE TRACK FLOWS RIGHT-TO-LEFT. */
[dir="rtl"] .ticker-track { direction: rtl; }

/* ARTICLE ROWS / WIRE ROWS: THUMBNAIL TRAILS THE TEXT IN RTL. */
[dir="rtl"] .wr-row, [dir="rtl"] .cp-item { direction: rtl; }

/* RED-BAR TITLES: THE BAR BELONGS AT THE START OF THE LINE. */
[dir="rtl"] .sec-title, [dir="rtl"] .catpage-title { border-left: 0; }

/* MARKETS: NUMBERS STAY LTR INSIDE THEIR CELLS. */
[dir="rtl"] .mkt-num, [dir="rtl"] .wx-feat-temp { direction: ltr; unicode-bidi: embed; }

/* SEARCH FORM + PORTAL/ADMIN CHROME INHERIT dir FROM <html>; FORM LABELS ALIGN TO START. */
[dir="rtl"] .sf-field span { text-align: right; }

/* ARTICLE DROP CAP: THE DESIGN FLOATS THE LEDE'S FIRST LETTER LEFT FOR LTR. IN RTL IT MUST
   ANCHOR TO THE RIGHT (THE START OF THE LINE) OR IT DETACHES FROM ITS WORD AND STRANDS AT
   THE FAR SIDE OF THE PARAGRAPH (SPOTTED ON THE LIVE ARABIC ARTICLE, 2026-10-23). */
[dir="rtl"] .art-body p.lede::first-letter { float: right; padding: 4px 0 0 10px; }

/* r61 HERO — RTL MIRRORING. THE DESIGN WAS BUILT LTR AND THESE PHYSICAL
   PROPERTIES DO NOT FLIP WITH dir=rtl: (1) THE SHADE GRADIENT IS DARK ON
   THE LEFT IN LTR, BUT ARABIC TEXT SITS ON THE RIGHT, SO IT MUST BE DARK
   ON THE RIGHT IN RTL. (2) .hero-side'S border-left LANDS ON THE OUTER
   LEFT EDGE IN RTL (THE SIDE IS ON THE LEFT), SO IT BECOMES border-right,
   BETWEEN HERO AND SIDE. (3) DOTS (left:32px) AND COUNT (right:28px) SWAP
   SIDES, AS DO THE PREV/NEXT ARROWS (prev left:16px, next right:16px);
   THE ARROW GLYPHS ARE FLIPPED WITH THE BUTTONS (scaleX(-1), keeping the
   translateY(-50%) CENTRING) SO PREV STILL POINTS TOWARD THE PREVIOUS
   SLIDE AND NEXT TOWARD THE NEXT ONE IN RTL READING ORDER. (4) THE
   TOP-STORIES HOVER NUDGE (padding-left) IS MIRRORED TO padding-right. */
[dir="rtl"] .hero-shade { background: linear-gradient(to left, rgba(0,0,0,.88) 0%, rgba(0,0,0,.68) 55%, rgba(0,0,0,.35) 100%); }
[dir="rtl"] .hero-side { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .hero-dots { left: auto; right: 32px; }
[dir="rtl"] .hero-count { right: auto; left: 28px; }
[dir="rtl"] .hero-prev { left: auto; right: 16px; }
[dir="rtl"] .hero-next { right: auto; left: 16px; }
[dir="rtl"] .hero-arrow { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .feed-item:hover { padding-left: 20px; padding-right: 26px; }

/* r62 — HERO COUNTER (UI AUDIT F3): THE "1 / 4" STRING RENDERS BACKWARDS
   ("4 / 1") UNDER RTL BIDI. LOCK ITS DIRECTION TO LTR (POSITIONING STAYS
   IN THE r61 RULE ABOVE); DIGITS ARE NOT RENUMBERED TO ARABIC-INDIC. */
[dir="rtl"] .hero-count { direction: ltr; unicode-bidi: embed; }