/* * ============================================================= * RTL / Arabic Layout Overrides * * Uses TWO selectors for maximum reliability: * 1. [dir="rtl"] — set on element, always present * 2. .arabic-lang — set on element as fallback * * Only overrides what dir="rtl" does NOT handle automatically: * - Physical CSS (left/right/translateX positioning) * - Hardcoded text-align: left * - Third-party widgets (slick, owl) that ignore dir="rtl" * ============================================================= */ /* ─── 1. Owl: keep legacy carousel internals stable ─────────────── */ [dir="rtl"] .owl-wrapper, .arabic-lang .owl-wrapper { direction: ltr; } /* ─── 2. Cart Sidebar – slide from LEFT in RTL ──────────────── */ /* * Original (LTR): right:-1200px hidden → right:0 open * RTL: left:-1200px hidden → left:0 open */ [dir="rtl"] body .cart-sidebar, body.arabic-lang .cart-sidebar { right: unset !important; left: -1200px !important; transition: left 0.3s ease !important; border-left: none !important; border-right: 1px solid rgba(15, 118, 110, 0.12) !important; box-shadow: 8px 0 32px rgba(15, 23, 42, 0.10) !important; } [dir="rtl"] body.cart-open .cart-sidebar, body.arabic-lang.cart-open .cart-sidebar { left: 0 !important; right: unset !important; } /* ─── 3. Main Aside – slide from RIGHT in RTL ───────────────── */ /* * Original (LTR): left:0 + translateX(-300px) → slides from LEFT * RTL: right:0 + translateX(300px) → slides from RIGHT */ [dir="rtl"] .main-aside, .arabic-lang .main-aside { left: unset !important; right: 0 !important; transform: translateX(300px) !important; } [dir="rtl"] .main-aside.open, .arabic-lang .main-aside.open { transform: translateX(0) !important; } /* ─── 4. Mobile: aside top matches fixed header height ─────── */ @media (max-width: 991px) { [dir="rtl"] .main-aside, .arabic-lang .main-aside { left: unset !important; right: 0 !important; top: 70px !important; height: calc(100vh - 70px) !important; transform: translateX(300px) !important; } [dir="rtl"] .main-aside.open, .arabic-lang .main-aside.open { transform: translateX(0) !important; } } @media (max-width: 767px) { [dir="rtl"] .main-aside, .arabic-lang .main-aside { top: 64px !important; height: calc(100vh - 64px) !important; width: 260px !important; transform: translateX(280px) !important; } [dir="rtl"] .main-aside.open, .arabic-lang .main-aside.open { transform: translateX(0) !important; } } @media (max-width: 480px) { [dir="rtl"] .main-aside, .arabic-lang .main-aside { top: 58px !important; height: calc(100vh - 58px) !important; width: 240px !important; transform: translateX(260px) !important; } [dir="rtl"] .main-aside.open, .arabic-lang .main-aside.open { transform: translateX(0) !important; } } /* ─── 5. SlimScroll bars: flip to left ──────────────────────── */ [dir="rtl"] .main-aside .slimScrollBar, [dir="rtl"] .main-aside .slimScrollRail, .arabic-lang .main-aside .slimScrollBar, .arabic-lang .main-aside .slimScrollRail, [dir="rtl"] .cart-sidebar .slimScrollBar, [dir="rtl"] .cart-sidebar .slimScrollRail, .arabic-lang .cart-sidebar .slimScrollBar, .arabic-lang .cart-sidebar .slimScrollRail { left: 2px !important; right: unset !important; } /* ─── 6. Cart badge: top-left corner in RTL ─────────────────── */ [dir="rtl"] .cart-item-count, .arabic-lang .cart-item-count { right: unset !important; left: -4px !important; } /* ═══════════════════════════════════════════════════════════ HARDCODED text-align:left OVERRIDES These elements have physical CSS that dir="rtl" cannot fix. ═══════════════════════════════════════════════════════════ */ /* ─── 7. Banner title & subtitle ────────────────────────────── */ [dir="rtl"] .banner .title, [dir="rtl"] .banner .subtitle, .arabic-lang .banner .title, .arabic-lang .banner .subtitle { text-align: right !important; } /* ─── 8. Product card description ───────────────────────────── */ [dir="rtl"] .product .product-body .product-desc h4, [dir="rtl"] .product .product-body .product-desc, [dir="rtl"] .menu-v2 .product .product-body, .arabic-lang .product .product-body .product-desc h4, .arabic-lang .product .product-body .product-desc, .arabic-lang .menu-v2 .product .product-body { text-align: right !important; } /* ─── 9. Auth / Login page ──────────────────────────────────── */ [dir="rtl"] .auth-form label, [dir="rtl"] .auth-form .form-group, .arabic-lang .auth-form label, .arabic-lang .auth-form .form-group { text-align: right !important; } [dir="rtl"] .auth-description-inner h2, [dir="rtl"] .auth-description-inner p, .arabic-lang .auth-description-inner h2, .arabic-lang .auth-description-inner p { text-align: right !important; } /* Flip icon positions */ [dir="rtl"] .auth-form .icon-inside, .arabic-lang .auth-form .icon-inside { left: unset !important; right: 20px !important; } [dir="rtl"] .auth-form .eyeIcon-inside, .arabic-lang .auth-form .eyeIcon-inside { right: unset !important; left: 20px !important; } /* Flip input padding for icon */ [dir="rtl"] .auth-form .form-control, .arabic-lang .auth-form .form-control { padding: 10px 40px 10px 10px !important; text-align: right !important; } /* ─── 10. Order details table ───────────────────────────────── */ [dir="rtl"] .order_details_section .products th, [dir="rtl"] .order_details_section .products td, .arabic-lang .order_details_section .products th, .arabic-lang .order_details_section .products td { text-align: right !important; } /* ─── 11. Error text ────────────────────────────────────────── */ [dir="rtl"] .error_txt p, .arabic-lang .error_txt p { text-align: right !important; margin-left: 0 !important; margin-right: 3px !important; } /* ─── 12. Section title wrap ────────────────────────────────── */ [dir="rtl"] .section-title-wrap .title, [dir="rtl"] .section-title-wrap h5, [dir="rtl"] .section-title-wrap p, .arabic-lang .section-title-wrap .title, .arabic-lang .section-title-wrap h5, .arabic-lang .section-title-wrap p { text-align: right; } /* ─── 13. Submenu indent: flip for RTL ──────────────────────── */ [dir="rtl"] .main-aside ul .menu-item .submenu .submenu a, .arabic-lang .main-aside ul .menu-item .submenu .submenu a { padding-left: 0 !important; padding-right: 40px !important; } /* ─── 14. Online menu page: true Arabic RTL fixes ───────────── */ [dir="rtl"] body, body.arabic-lang { font-family: "Cairo", "Tahoma", "Arial", sans-serif !important; text-align: right; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, body.arabic-lang h1, body.arabic-lang h2, body.arabic-lang h3, body.arabic-lang h4, body.arabic-lang h5, body.arabic-lang h6 { font-family: "Cairo", "Tahoma", "Arial", sans-serif !important; } [dir="rtl"] .menu-category-slider.slick-slider, body.arabic-lang .menu-category-slider.slick-slider { direction: rtl !important; } [dir="rtl"] .customPrevBtn svg, [dir="rtl"] .customNextBtn svg, body.arabic-lang .customPrevBtn svg, body.arabic-lang .customNextBtn svg { transform: scaleX(-1); } [dir="rtl"] .product .product-body, body.arabic-lang .product .product-body { align-items: stretch !important; } [dir="rtl"] .product .product-desc, body.arabic-lang .product .product-desc { direction: rtl; text-align: right !important; } [dir="rtl"] .product-desc .rating-wrap, body.arabic-lang .product-desc .rating-wrap { justify-content: flex-start; direction: ltr; } [dir="rtl"] .product .product-price, body.arabic-lang .product .product-price { direction: ltr; text-align: right; } [dir="rtl"] .product-single .product-content, body.arabic-lang .product-single .product-content { direction: rtl; text-align: right; } [dir="rtl"] .product-single .price-wrapper, body.arabic-lang .product-single .price-wrapper { direction: ltr; text-align: right; }