/* =========================================================== Lazolingo — RTL refinements for Arabic & Farsi Active only when contexts.jsx sets . Most of the layout mirrors automatically because the source uses logical properties (margin-inline, text-align:start, fl/grid inline axis). These rules handle the remaining physically-positioned and decorative pieces. =========================================================== */ /* hero floating badges */ [dir="rtl"] .hero-float.a { left: auto; right: -22px; } [dir="rtl"] .hero-float.b { right: auto; left: -18px; } @media (max-width: 900px) { [dir="rtl"] .hero-float.a { left: auto; right: 8px; } [dir="rtl"] .hero-float.b { right: auto; left: 8px; } } /* how-it-works connector line */ [dir="rtl"] .step-line { left: -50%; right: 50%; } /* floating chat widgets move to the bottom-left corner */ [dir="rtl"] .chat-fab { right: auto; left: 22px; } [dir="rtl"] .chat-teaser { right: auto; left: 22px; } [dir="rtl"] .chat-panel { right: auto; left: 22px; } @media (max-width: 440px) { [dir="rtl"] .chat-teaser { right: auto; left: 8px; } [dir="rtl"] .chat-panel { left: 8px; right: 8px; } } /* speech-bubble corners mirror */ [dir="rtl"] .chat-msg.bot { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; } [dir="rtl"] .chat-msg.me { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; } [dir="rtl"] .chat-teaser { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; } /* native form-select caret flips to the left side */ [dir="rtl"] .select { background-position: left 12px center; }