/* ============================================================ RTL overrides — applied when (Arabic). The shell is flexbox and mirrors automatically under dir="rtl"; these rules fix the few physical-direction properties that don't flip on their own. ============================================================ */ /* The navigation rail sits on the right; its divider flips with it. */ [dir="rtl"] .rail { border-right: none; border-left: 1px solid var(--border); } /* Bottom-bar state: the rail spans the full width, so no side border. */ @media (max-width: 767px) { [dir="rtl"] .rail { border-left: none; border-top: 1px solid var(--border); } } /* Table headers align to the (now right-hand) start. */ [dir="rtl"] .data-table th { text-align: right; } /* Search field: icon and its text padding swap sides. */ [dir="rtl"] .scan-field .ic { left: auto; right: var(--s3); } [dir="rtl"] .scan-field input { padding-left: 0; padding-right: var(--s8); } /* Product cards read right-to-left. */ [dir="rtl"] .prod-card { text-align: right; } /* The delete button hugs the opposite end of the qty controls. */ [dir="rtl"] .qty-controls .del { margin-left: 0; margin-right: auto; } /* Native select dropdown arrow moves to the left. */ [dir="rtl"] select { background-position: left var(--s3) center; padding-right: var(--s3); padding-left: var(--s7); } /* Receipt follows the document direction when printed in RTL. */ [dir="rtl"] .receipt { direction: rtl; }