/* Bilingual support — loaded by pos.html, index.html and mobile.html after their main stylesheet.
   Layout direction comes from <html dir="rtl|ltr"> (set by js/shared/i18n.js); the stylesheets use logical
   properties (margin-inline-start, inset-inline-end, text-align: start …) so they mirror automatically. */

/* Arabic glyphs use IBM Plex Sans Arabic (css/arabic-font.css, Arabic code points only); English keeps the POS fonts. */
:root {
  --font-ui:    "TARA Arabic", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-brand: "TARA Arabic", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-mono:  "Cascadia Mono", "Consolas", "SF Mono", Menlo, "TARA Arabic", monospace;   /* receipts: Arabic labels get the Arabic font */
}
/* Letter-spacing breaks the joining of Arabic letters; upper-casing has no meaning in Arabic. */
html[dir=rtl] body, html[dir=rtl] body * { letter-spacing: normal !important; }
html[dir=rtl] body { line-height: 1.45; }

/* Codes, barcodes, SKUs, invoice numbers, phone numbers and amounts stay left-to-right inside Arabic text. */
.mono, .ltr, kbd, bdi.ltr { unicode-bidi: isolate; }
html[dir=rtl] .mono, html[dir=rtl] .ltr, html[dir=rtl] kbd { direction: ltr; }
html[dir=rtl] input.mono, html[dir=rtl] input.ltr, html[dir=rtl] input[inputmode=numeric], html[dir=rtl] input[inputmode=decimal],
html[dir=rtl] input[type=tel], html[dir=rtl] input[type=email], html[dir=rtl] input[type=url] { direction: ltr; text-align: right; }
html[dir=rtl] .inp.big { text-align: left; }   /* tendered / amount fields keep the POS look: digits grow from the right edge of the box */

/* Charts and barcodes are drawn left-to-right in both languages. */
svg.chart, svg.ean, .donut svg { direction: ltr; }

/* Directional glyphs (‹ › ← →) used as chevrons / back buttons point the other way in Arabic. */
html[dir=rtl] .dir-arrow, html[dir=rtl] .chev { display: inline-block; transform: scaleX(-1); }
html[dir=rtl] .m-back { transform: scaleX(-1); }   /* keeps its own display, so [hidden] still hides it */

/* Status steps (chevrons) point left in Arabic. */
html[dir=rtl] .steps-h span { clip-path: polygon(100% 0, 8px 0, 0 50%, 8px 100%, 100% 100%, calc(100% - 8px) 50%); }
html[dir=rtl] .steps-h span:first-child { clip-path: polygon(100% 0, 8px 0, 0 50%, 8px 100%, 100% 100%); }

/* Language switcher — always visible in the header: [ English | العربية ] */
.lang-sw { display: inline-flex; flex: none; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lang-sw button { border: 0; background: transparent; height: 34px; padding: 0 10px; font-weight: 700; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.lang-sw button + button { border-inline-start: 1px solid var(--border-strong); }
.lang-sw button[aria-pressed=true] { background: var(--tara-teal); color: #fff; }
.lang-sw button[lang=ar] { font-family: "TARA Arabic", var(--font-ui); font-size: 14px; }
.lang-sw.lg button { height: 40px; padding: 0 12px; font-size: 14px; }

/* Number columns: a minus sign stays in front of the number in Arabic ("-1", not "1-"). */
html[dir=rtl] :is(.dt, .tbl, .grid) :is(td, th).r, html[dir=rtl] .num { unicode-bidi: plaintext; }