/** * Arabic (and other RTL) layout — mirrors LTR utilities used across the site. * Loaded when . */ html[dir="rtl"] { direction: rtl; text-align: right; } html[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Tahoma', 'Segoe UI', 'Hanken Grotesk', system-ui, sans-serif; } /* Logical text alignment helpers */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Common margin / padding mirrors (Tailwind scale) */ html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; } html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; } html[dir="rtl"] .pl-6 { padding-left: 0 !important; padding-right: 1.5rem !important; } html[dir="rtl"] .pr-6 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* space-x reverse */ html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } /* Positioning */ html[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; } html[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; } html[dir="rtl"] .left-4 { left: auto !important; right: 1rem !important; } html[dir="rtl"] .right-4 { right: auto !important; left: 1rem !important; } /* Directional icons / chevrons */ html[dir="rtl"] .hero-callback-form button[type="submit"] svg, html[dir="rtl"] a svg[viewBox="0 0 24 24"], html[dir="rtl"] .rtl-flip { transform: scaleX(-1); } /* Brands carousel scrolls the other way in RTL (JS also adjusts) */ html[dir="rtl"] .brands-track { flex-direction: row; } /* Forms: keep inputs readable for Arabic */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: plaintext; } /* Hero badge / channel pills */ html[dir="rtl"] #hero .inline-flex { flex-direction: row-reverse; } /* Sticky support FAB usually bottom-right → bottom-left in RTL */ html[dir="rtl"] .us-support-agent { right: auto !important; left: 1rem !important; align-items: flex-start !important; } @media (max-width: 640px) { html[dir="rtl"] .us-support-agent { left: 0.75rem !important; } }