/* * RTL (Right-to-Left) Stylesheet * Applies only when [dir="rtl"] is set on (see pages/_document.js). * Languages: Arabic (ar), Hebrew (he), Persian (fa), Urdu (ur). * * Strategy: minimal inversions. Flip text direction, floats, * margins, paddings, and arrow icons. Leave the grid/flex system alone — * modern CSS logical properties handle most layouts correctly in RTL. */ [dir="rtl"] { text-align: right; } [dir="rtl"] body { direction: rtl; text-align: right; } /* Core: flip text alignment for all text-holding elements */ [dir="rtl"] p, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] span, [dir="rtl"] label, [dir="rtl"] li { text-align: right; } [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .text-center { text-align: center !important; } /* Floats */ [dir="rtl"] .float-left, [dir="rtl"] .fl-left { float: right !important; } [dir="rtl"] .float-right, [dir="rtl"] .fl-right { float: left !important; } /* Flex reversal for horizontal lists/navs */ [dir="rtl"] .d-flex, [dir="rtl"] .flex-row { flex-direction: row-reverse; } [dir="rtl"] .flex-row-reverse { flex-direction: row; } /* Margin utilities — swap left/right */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .ml-5 { margin-left: 0; margin-right: 3rem; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .mr-5 { margin-right: 0; margin-left: 3rem; } /* Padding utilities */ [dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pl-3 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .pl-5 { padding-left: 0; padding-right: 3rem; } [dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .pr-5 { padding-right: 0; padding-left: 3rem; } /* Navigation — main header menu */ [dir="rtl"] .main-menu, [dir="rtl"] .main-menu > li, [dir="rtl"] .menu-primary { direction: rtl; } [dir="rtl"] .main-menu > li { margin-left: 0; margin-right: 24px; } [dir="rtl"] .main-menu > li:first-child { margin-right: 0; } /* Dropdown menus — mirror */ [dir="rtl"] .sub-menu { left: auto; right: 0; } /* Header: logo and buttons */ [dir="rtl"] .header .logo { margin-right: 0; margin-left: auto; } [dir="rtl"] .header-inner, [dir="rtl"] .header .tf-container { direction: rtl; } /* Buttons with icons — flip icon position */ [dir="rtl"] .tf-button i, [dir="rtl"] .btn i { margin-left: 0; margin-right: 8px; } /* Arrow icons — flip horizontal direction */ [dir="rtl"] .icon-arrow-right::before, [dir="rtl"] .fa-arrow-right::before, [dir="rtl"] .fa-chevron-right::before { content: "\f053"; /* left chevron */ } [dir="rtl"] .icon-arrow-left::before, [dir="rtl"] .fa-arrow-left::before, [dir="rtl"] .fa-chevron-left::before { content: "\f054"; /* right chevron */ } /* Breadcrumb — reverse item separator */ [dir="rtl"] .breadcrumbs li, [dir="rtl"] .breadcrumb li { direction: rtl; } /* Forms — inputs, labels */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="search"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] .form-group label { text-align: right; } /* Cart / product grid — ensure RTL-friendly layout */ [dir="rtl"] .tf-card-box, [dir="rtl"] .product-card { direction: rtl; } [dir="rtl"] .tf-card-box .meta-info { direction: rtl; text-align: right; } /* Footer columns — keep left-to-right grid, but flip text inside */ [dir="rtl"] .footer .tf-container { direction: rtl; } [dir="rtl"] .footer-widget .widget-title { text-align: right; } [dir="rtl"] .footer-widget ul li a { text-align: right; } /* Locale switcher dropdown — mirror on RTL */ [dir="rtl"] .locale-switcher-menu { left: 0; right: auto; } /* Sidebar filters — flip checkbox alignment */ [dir="rtl"] .widget-filter label { padding-left: 0; padding-right: 28px; } [dir="rtl"] .widget-filter input[type="checkbox"] { left: auto; right: 0; } /* Tabs — reverse order */ [dir="rtl"] .nav-tabs, [dir="rtl"] .tf-tab-menu { flex-direction: row-reverse; } /* Modal close button — keep visually top-right of content */ [dir="rtl"] .modal .close, [dir="rtl"] .modal-header .close { left: 16px; right: auto; } /* Number inputs — keep LTR even in RTL context (prices, IDs) */ [dir="rtl"] .price, [dir="rtl"] .number, [dir="rtl"] .amount, [dir="rtl"] code, [dir="rtl"] pre { direction: ltr; unicode-bidi: embed; }