/* ──────────────────────────────────────────────────────────────────────────
   Right-to-left corrections, loaded only when <html dir="rtl"> (Arabic).

   Most of the mirroring is free: the app's stylesheet uses logical properties
   (margin-inline-start, inset-inline-end, text-align:start…), so the browser
   flips the layout by itself. What is left over is here:

     · the Arabic face — the Latin display fonts have no Arabic glyphs
     · transforms, which are geometric and never mirrored automatically
     · runs that must stay left-to-right inside Arabic text

   Every rule is scoped to [dir="rtl"], so the English, Hindi and Assamese
   pages are untouched even though every page loads the file.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The Arabic face ──────────────────────────────────────────────────────
   Bricolage Grotesque and Hanken Grotesk are Latin-only, so Arabic would fall
   back to whatever the device happens to have — a different look on every
   phone. IBM Plex Sans Arabic carries the same upright, slightly technical
   feel; Noto Sans Arabic is the fallback. !important is deliberate: the app
   sets font-family on hundreds of selectors, many of them more specific than
   anything that can be written here. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] div, [dir="rtl"] li, [dir="rtl"] label,
[dir="rtl"] strong, [dir="rtl"] em, [dir="rtl"] small, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] figcaption, [dir="rtl"] blockquote, [dir="rtl"] summary, [dir="rtl"] legend {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif !important;
}

/* Arabic letterforms are taller and their joins busier, so the tight tracking
   the Latin display face is set with reads as cramped. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.75; }

/* Room for the strokes. The display headings are set as low as .91, which works
   for Latin lowercase and collides in Arabic: the ink of a real headline in IBM
   Plex Sans Arabic runs to about 1.4 em once a hamza sits over a descender, so
   the line below lands on it. !important because several of these headings carry
   their line-height in a style attribute, which no stylesheet can otherwise
   outrank. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .sl-h1, [dir="rtl"] .sl-section-h, [dir="rtl"] .sl-why-h,
[dir="rtl"] .sl-bhero-h, [dir="rtl"] .ma-title, [dir="rtl"] .sl-calc-amt {
  line-height: 1.5 !important;
}
[dir="rtl"] .sl-card-name, [dir="rtl"] .sl-hcard-name, [dir="rtl"] .sl-witem-title,
[dir="rtl"] .sl-kind-name, [dir="rtl"] .qr-title, [dir="rtl"] .ma-sc-title { line-height: 1.55; }

/* Arabic has no capitals: uppercasing changes none of the letters, but the wide
   letter-spacing that goes with an ALL-CAPS label still pulls the words apart. */
[dir="rtl"] .sl-section-eyebrow, [dir="rtl"] .sl-feat-eyebrow, [dir="rtl"] .ma-eyebrow,
[dir="rtl"] .sl-card-tag, [dir="rtl"] .sl-witem-tag, [dir="rtl"] .sl-offer-tag,
[dir="rtl"] .sl-vcard-tag, [dir="rtl"] .ma-msg-new-tag, [dir="rtl"] .sl-stat-l {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Transforms ───────────────────────────────────────────────────────────
   A transform is geometry, not layout: translateX(3px) still moves right on a
   mirrored page, so every nudge that means "forward" is flipped by hand. */
[dir="rtl"] .sl-witem.active,
[dir="rtl"] .sl-witem.active .sl-witem-arrow { transform: translateX(-3px); }
[dir="rtl"] .sl-card:hover .sl-card-arrow,
[dir="rtl"] .sl-hcard:hover .sl-hcard-arrow { transform: translateX(-4px); }

/* The marquee is one long strip that slides to -50%. Mirrored, the strip starts
   at the right, so it has to slide the other way. */
[dir="rtl"] .sl-ticker-track { animation-direction: reverse !important; }

/* The reading-progress bar grows from the start edge, which is now the right. */
[dir="rtl"] .sl-progress { transform-origin: 100% 50%; }

/* The decorative blobs are lit from one side; mirroring keeps the light coming
   from the same place relative to the reader. */
[dir="rtl"] .sl-orb-1, [dir="rtl"] .sl-orb-2, [dir="rtl"] .sl-orb-3 { transform: scaleX(-1); }

/* ── Numbers, prices and codes ────────────────────────────────────────────
   A price, a counter, a referral code or an ID is a left-to-right run inside
   Arabic text. Bidi gets bare digits right on its own, but not the punctuation
   around them: "₹29 — ₹649" can come out with the currency mark and the dash on
   the wrong sides. */
[dir="rtl"] .price, [dir="rtl"] .sl-aud-price, [dir="rtl"] .bo-opt-price,
[dir="rtl"] .amount, [dir="rtl"] .ma-stat-n, [dir="rtl"] .sl-stat-n,
[dir="rtl"] .sl-how-num, [dir="rtl"] .sl-witem-num, [dir="rtl"] .ma-ref-code,
[dir="rtl"] .sl-chip-count, [dir="rtl"] .sl-browse-count, [dir="rtl"] .sl-vstage-counter,
[dir="rtl"] code, [dir="rtl"] time { direction: ltr; unicode-bidi: embed; }

/* ── English inside Arabic ────────────────────────────────────────────────
   A listing's own name, its address and whatever a business wrote about itself
   are never translated — they arrive in whatever language the owner typed.
   plaintext lets each run take the direction of its first strong character, so
   an English name keeps its trailing full stop and brackets on the right side
   and an Arabic one still reads right to left. */
[dir="rtl"] .sl-card-name, [dir="rtl"] .sl-hcard-name, [dir="rtl"] .sl-vcard-name,
[dir="rtl"] .sl-card-tagline, [dir="rtl"] .ma-name, [dir="rtl"] .ma-plan-name,
[dir="rtl"] .bo-opt-name, [dir="rtl"] .sl-map-addr, [dir="rtl"] .ma-msg-text,
[dir="rtl"] .ma-msg-name, [dir="rtl"] .ma-msg-contact,
[dir="rtl"] .sl-md-p, [dir="rtl"] .sl-md-li { unicode-bidi: plaintext; }