/* ============================================================================
   ASAS POS — RTL
   The layout is written with logical properties, so `dir="rtl"` already flips
   the grid, the padding and the text. This file only holds the handful of
   things logical properties cannot express: physical gradients, physical
   transform origins, masks, and glyphs that must not mirror.
   ========================================================================== */

[dir="rtl"] .marquee {
  -webkit-mask-image: linear-gradient(to left, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to left, transparent, black 6%, black 94%, transparent);
}

/* transform-origin has no logical keyword pair in current browsers */
[dir="rtl"] .rule,
[dir="rtl"] .ledger-line__rule,
[dir="rtl"] .boot__tape span,
[dir="rtl"] .reconcile__bar i,
[dir="rtl"] .steps__progress i,
[dir="rtl"] .step__n::after,
[dir="rtl"] .nav__link::after { transform-origin: right center; }

[dir="rtl"] .hero__scrim {
  background:
    radial-gradient(120% 90% at 88% 88%, color-mix(in srgb, var(--brand-ink) 96%, transparent) 0%, transparent 62%),
    linear-gradient(to top, var(--brand-ink) 2%, color-mix(in srgb, var(--brand-ink) 68%, transparent) 42%, color-mix(in srgb, var(--brand-ink) 88%, transparent) 100%);
}

[dir="rtl"] .hero__glow { inset-inline-end: auto; inset-inline-start: -12%; }

/* The Latin brand mark, credentials and money keep their LTR reading order.

   .pos__ui-total is here because it is a FLEX ROW of three children —
   `AED`, the counted figure, `.00`. Flex lays its items along the container's
   own direction, so under dir="rtl" the terminal's headline total came out
   reversed on screen as `.00 570 AED`, with the decimals detached from the
   integer they belong to. unicode-bidi on the children cannot fix that: it
   protects a run internally, but the ORDER of flex items is decided by the
   container. direction:ltr on the container is what restores it. */
[dir="rtl"] .brand__mark,
[dir="rtl"] .cred__val,
[dir="rtl"] .receipt__amt,
[dir="rtl"] .receipt__total-value,
[dir="rtl"] .reconcile__value,
[dir="rtl"] .pos__ui-total,
[dir="rtl"] .marquee__num,
[dir="rtl"] .mock-total b {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The one piece of Arabic on the terminal's screen with hand-written tracking
   rather than a token — "الإجمالي" was being prised apart letter by letter. */
[lang="ar"] .pos__ui-foot em { letter-spacing: 0; text-transform: none; }

/* Arrow glyphs point the way the reader travels. */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* Mono labels read left-to-right even in an Arabic page — they are codes. */
[dir="rtl"] .ledger-line__idx,
[dir="rtl"] .step__n span:first-child { direction: ltr; unicode-bidi: isolate; }

/* The appearance glyph is a disc with one half filled, and the filled half
   belongs on the side the reader starts from. SVG has no logical axis, so the
   mirror is here rather than in the component. */
[dir="rtl"] .appearance svg { transform: scaleX(-1); }

/* Arabic sits on a slightly larger optical size at small mono sizes. */
[dir="rtl"] .ledger-line__label,
[dir="rtl"] .reconcile__label,
[dir="rtl"] .marquee__label,
[dir="rtl"] .perm__state,
[dir="rtl"] .meeting__cell em,
[dir="rtl"] .footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}