/* ============================================================
   Trixo Market — RTL overrides
   Most layout uses CSS logical properties, so it mirrors
   automatically. This file handles the few cases that need
   explicit flipping, plus directional icons.
   ============================================================ */

html[dir="rtl"] { text-align: right; }

/* Icons / arrows that imply direction should mirror.
   Opt out with .no-flip (charts, logos, brand mark, screenshots). */
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* Chevrons in "read more" links already handled in components via dir checks. */
html[dir="rtl"] .card__link svg,
html[dir="rtl"] .btn .arrow,
html[dir="rtl"] .breadcrumbs .sep { transform: scaleX(-1); }

/* Never mirror media / brand / data-viz */
html[dir="rtl"] .no-flip,
html[dir="rtl"] .brand__mark,
html[dir="rtl"] img,
html[dir="rtl"] .device-browser,
html[dir="rtl"] .device-phone,
html[dir="rtl"] canvas,
html[dir="rtl"] svg.chart { transform: none; }

/* Numbers stay LTR even inside RTL text for legibility */
html[dir="rtl"] .num,
html[dir="rtl"] .ticker__price,
html[dir="rtl"] .ticker__chg,
html[dir="rtl"] .tier__price,
html[dir="rtl"] table.data td.num { direction: ltr; unicode-bidi: embed; }

/* Mega menu opens aligned to the inline-start edge already (logical props). */

/* Slightly looser line-height for Arabic script */
html[lang="ar"] p, html[lang="ar"] li { line-height: 1.9; }
html[lang="ar"] .btn { font-weight: var(--fw-semibold); }