/* RTL / Arabic overrides for MenuOS. Linked unconditionally by all screens — inert until something sets dir="rtl" on , which happens statically for the 6 owner-app *-ar.html twins and reactively (from brand.language) for menu-viewer.html. The base direction already flips text alignment and flex/grid flow; this file only patches rules that hard-code a physical side (left/right) or a transform tied to one, and keeps numeric/price runs left-to-right so digits don't get reordered inside RTL flow. */ /* Instrument Serif / DM Sans / DM Mono have no Arabic glyphs — swap in Arabic-capable fallbacks for the brief font-display:swap window and for any glyph the primary faces can't cover. */ [dir="rtl"] body { font-family: 'Cairo', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; } /* Keep numeric/price runs LTR-readable inside RTL flow. */ [dir="rtl"] .stat-value, [dir="rtl"] .item-price, [dir="rtl"] .item-price-original, [dir="rtl"] .viewer-item-price, [dir="rtl"] .viewer-item-price-original, [dir="rtl"] .viewer-item-cal, [dir="rtl"] .sheet-price, [dir="rtl"] .sheet-price-original, [dir="rtl"] .sheet-cal, [dir="rtl"] .cart-fab-total, [dir="rtl"] .cart-line-unit, [dir="rtl"] .cart-line-total, [dir="rtl"] .cart-summary-total, [dir="rtl"] .waiter-amount, [dir="rtl"] .waiter-total-val, [dir="rtl"] .preview-cart-total { unicode-bidi: plaintext; } /* --- Dashboard / shared owner-app chrome (main.css) --- */ [dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border); } [dir="rtl"] .sidebar-badge { margin-left: 0; margin-right: auto; } [dir="rtl"] .panel { border-right: none; border-left: 1px solid var(--border); } /* Toggle knob slides to the "on" side — mirror the direction for RTL. */ [dir="rtl"] .toggle.on::after { transform: translateX(-16px); } /* Drawer slides in from the physical right in LTR (the inline-end edge); mirror it to the left so it still opens from the reading-end edge under RTL. */ [dir="rtl"] .drawer { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border); } [dir="rtl"] .drawer { animation-name: rtl-slide-in-left; } @keyframes rtl-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } [dir="rtl"] .link-box-copy { border-left: none; border-right: 1px solid var(--border-strong); } /* Mobile sidebar drawer: slides from the physical left in LTR; mirror to the right so it opens from the reading-start edge under RTL. */ @media (max-width: 768px) { [dir="rtl"] .sidebar { left: auto !important; right: 0 !important; transform: translateX(100%); } [dir="rtl"] .app.sidebar-open .sidebar { transform: translateX(0); } } /* --- Guest viewer (MenuViewer.svelte) --- */ /* Chat-bubble tails point toward the edge each message is aligned to (justify-content: flex-end/flex-start already mirror correctly under RTL via flexbox's logical start/end, but the border-radius corners are physical and need a matching mirror). */ [dir="rtl"] .cb-msg--user .cb-bubble { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; } [dir="rtl"] .cb-msg--assistant .cb-bubble { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }