/* ========================================================================== MDSJ Process — Arabic (RTL) stylesheet Loaded ONLY when app locale === 'ar' (see frontend/layouts/main.blade.php). TR/EN never load this file, so they are completely unaffected. The attribute already mirrors flexbox, grid and text flow automatically. This file handles what the direction attribute does NOT flip: the Arabic web font, default text alignment, and the common physical-side Tailwind utilities (ml-/mr-/pl-/pr-/left-/right-/text-left) used in templates. ========================================================================== */ /* --- Arabic web font (Cairo): clean, modern, excellent for industrial B2B --- */ :root { --font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } [dir="rtl"], [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] label { font-family: var(--font-ar) !important; } /* --- Base direction & default text alignment --- */ [dir="rtl"] body { text-align: right; } [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; } /* --- Text alignment utilities: physical -> mirror under RTL --- */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* --- Horizontal auto margins (used to push items to a side) --- */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* --- Common single-side margins used next to icons/labels in nav & buttons --- */ [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } /* --- Single-side padding commonly used for inputs/cards --- */ [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; } /* --- Border sides (e.g. left-accent cards) --- */ [dir="rtl"] .border-l { border-left: 0 !important; border-right: 1px solid !important; } [dir="rtl"] .border-r { border-right: 0 !important; border-left: 1px solid !important; } /* --- Directional inline icons (arrows) should visually mirror --- */ [dir="rtl"] .rtl-flip { transform: scaleX(-1); } /* --- Keep numbers, latin product codes, phone numbers & emails LTR inside RTL --- */ [dir="rtl"] .ltr, [dir="rtl"] bdi.ltr, [dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: embed; display: inline-block; }