/* --- RTL Stylesheet --- */ /* Applied globally when dir="rtl" is set on the tag */ html[dir="rtl"] { text-align: right; direction: rtl; } /* 1. Nice-Select Overrides */ html[dir="rtl"] .nice-select { padding-left: 0 !important; padding-right: 0.5rem !important; text-align: right !important; } html[dir="rtl"] .nice-select:after { right: auto; left: 1rem; } html[dir="rtl"] .nice-select .option { text-align: right; padding-right: 1.5rem; padding-left: 1rem; } /* 2. Abstract Glowing Blobs & Gradients */ /* Ensure background positions flip contextually if necessary */ html[dir="rtl"] .workspace-mesh { background-image: radial-gradient(at 90% 20%, rgba(249, 115, 22, 0.08) 0px, transparent 50%), radial-gradient(at 20% 80%, rgba(6, 182, 212, 0.08) 0px, transparent 50%); } /* 3. Mobile Menu Fixes */ html[dir="rtl"] .mobile-menu { right: auto; left: 0; border-left: none; border-right: 1px solid #e5e7eb; transform: translateX(-100%); box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1); } html[dir="rtl"] .mobile-menu.active { transform: translateX(0); } /* 4. Swiper Carousel Direction */ html[dir="rtl"] .swiper { direction: ltr; /* Keeps gesture swiping consistent */ } html[dir="rtl"] .swiper-wrapper { direction: rtl; /* Slides ordered RTL */ } /* 5. Custom UI Component Flips */ html[dir="rtl"] .feature-item.active-feature { transform: translateX(-10px); border-right-color: var(--borderBase); border-left-color: transparent; } html[dir="rtl"] .gsap-nav { /* If there are floating navs with precise positioning */ } /* 6. Tailwind Margin / Padding Manual Reversals (Fallback) */ /* Since Tailwind CDN uses ml- and mr-, we force them to reverse in RTL */ html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } html[dir="rtl"] .ml-5 { margin-left: 0; margin-right: 1.25rem; } html[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; } html[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; } html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } html[dir="rtl"] .mr-5 { margin-right: 0; margin-left: 1.25rem; } html[dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; } html[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; } html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* Padding reversals */ html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; } html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; } html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; } html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; } html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; } html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; } html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; } html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; } html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; } /* Position reversals for basic utility spans */ html[dir="rtl"] .left-0 { left: auto; right: 0; } html[dir="rtl"] .right-0 { right: auto; left: 0; } html[dir="rtl"] .-left-12 { left: auto; right: -3rem; } html[dir="rtl"] .-right-8 { right: auto; left: -2rem; } html[dir="rtl"] .right-4 { right: auto; left: 1rem; } html[dir="rtl"] .left-4 { left: auto; right: 1rem; } html[dir="rtl"] .right-8 { right: auto; left: 2rem; } html[dir="rtl"] .left-8 { left: auto; right: 2rem; } /* Translate X Reversals */ html[dir="rtl"] .translate-x-full { transform: translateX(-100%); } html[dir="rtl"] .-translate-x-full { transform: translateX(100%); } html[dir="rtl"] .translate-x-1\/2 { transform: translateX(-50%); } html[dir="rtl"] .-translate-x-1\/2 { transform: translateX(50%); } /* Text Alignment */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Border Radius Fixes (assuming uniform custom classes logic) */ html[dir="rtl"] .rounded-r-xl { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } html[dir="rtl"] .rounded-l-xl { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }