/* Langula — RTL overrides, loaded only for right-to-left UI languages (sy / Syrian Arabic). Scoped to [dir=rtl] so it never affects LTR pages. dir="rtl" on already flips flex rows, default text-align and list/inline order; this sheet fixes the parts that use physical left/right (absolute positioning, explicit text-align:left, icon margins). */ /* Explicit left-aligned components → right-aligned in RTL */ [dir=rtl] .pick, [dir=rtl] .lesson, [dir=rtl] .lang-pick, [dir=rtl] .path-lesson, [dir=rtl] .pr-said { text-align: right; } /* Language dropdown (was pinned to the right edge) → pin to the left edge */ [dir=rtl] .lang-menu-pop { right: auto; left: 0; } /* Mobile drawer: slides in from the left, shadow + animation mirrored */ [dir=rtl] .drawer { right: auto; left: 0; } [dir=rtl] .drawer.open { box-shadow: 20px 0 60px rgba(45,40,35,.18); animation: drawerInRtl .28s cubic-bezier(.4,0,.2,1); } @keyframes drawerInRtl { from { transform: translateX(-100%); } to { transform: none; } } /* FAQ accordion "+" marker (was at the right) → move to the left */ [dir=rtl] .faq-acc > summary::after { right: auto; left: 0; } /* Language-picker check circle (top-right) → top-left */ [dir=rtl] .lang-pick .lp-check { right: auto; left: 14px; } /* Icon spacing: margin-left used to nudge glyphs → mirror to margin-right */ [dir=rtl] .ic .sh-tri, [dir=rtl] .lesson .lock, [dir=rtl] .speak-btn::after, [dir=rtl] .pr-play::after { margin-left: 0; margin-right: 3px; } /* "Go / start" submit arrow in the pair picker points in the reading direction (leftwards) */ [dir=rtl] .pair-picker .go::after { transform: scaleX(-1); margin-left: 0; margin-right: 3px; } /* Latin-only inputs (email, password, URLs) read left-to-right even inside an RTL form */ [dir=rtl] input[type=email], [dir=rtl] input[type=password], [dir=rtl] input[type=url] { direction: ltr; text-align: right; } /* Phonetic (Latin transliteration) stays left-to-right so slashes/letters read correctly */ [dir=rtl] .phon, [dir=rtl] .fc-phon, [dir=rtl] .pr-phon { direction: ltr; }