/* * Right-to-left corrections for the Persian site. * * The shared stylesheets are written left-to-right. `dir="rtl"` on * flips the text and block flow on its own; what remains are the places where * a direction was hard-coded — one-sided margins and padding, text-align, and * icons that point somewhere. */ /* --------------------------------------------------------------- Typography */ body, input, textarea, select, button { font-family: Vazirmatn, "IRANSans", Tahoma, system-ui, -apple-system, sans-serif; } /* Persian reads better with a little more line height. */ body { line-height: 1.9; } /* Latin fragments (domains, plan codes, prices) must not be reordered by the bidi algorithm when they sit inside Persian text. */ .ltr, code, kbd, samp, .price, .domain-name { direction: ltr; unicode-bidi: embed; display: inline-block; } /* --------------------------------------------------------------- Alignment */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .text-lg-left { text-align: right !important; } /* ----------------------------------------------------- Directional spacing */ /* Bootstrap-style one-sided utilities are mirrored rather than overridden individually, so new markup picks the correction up automatically. */ [dir="rtl"] .ml-auto { margin-left: unset !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: unset !important; margin-left: auto !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: 1rem !important; } [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: 1rem !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } /* Lists indent from the correct side. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 20px; padding-left: 0; } /* --------------------------------------------------------------- Components */ /* Form fields and their inline icons. */ [dir="rtl"] .form-input, [dir="rtl"] .form-textarea { text-align: right; } [dir="rtl"] .input-icon { left: auto; right: 12px; } [dir="rtl"] .search-form .form-input { padding-right: 48px; padding-left: 12px; } /* Dropdowns open toward the inside of the page. */ [dir="rtl"] .dropdown-menu, [dir="rtl"] .sub-menu { left: auto; right: 0; text-align: right; } /* Arrows and chevrons point the other way. */ [dir="rtl"] .arrow-icon, [dir="rtl"] .next-icon, [dir="rtl"] .prev-icon, [dir="rtl"] .slick-prev, [dir="rtl"] .slick-next { transform: scaleX(-1); } /* The slick carousel tracks LTR internally; keep its items in source order. */ [dir="rtl"] .slick-slider .slick-track, [dir="rtl"] .slick-slider .slick-list { direction: ltr; } [dir="rtl"] .slick-slide { direction: rtl; } /* Tables. */ [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } /* Accordions and their toggles. */ [dir="rtl"] .accordion-title, [dir="rtl"] .accordion-para { text-align: right; } /* Notifications slide in from the correct edge. */ [dir="rtl"] .notifications { left: 20px; right: auto; } /* The captcha widget and its label. */ [dir="rtl"] .cap-captcha-field { direction: rtl; } /* Numerals: keep prices and specs in Latin digits, which is what the pricing tables were laid out for. */ [dir="rtl"] .price, [dir="rtl"] .plan-price, [dir="rtl"] .specs { font-variant-numeric: lining-nums; }