/* ------------------------------------------------------------------ * * RTL overrides — loaded by base.ejs ONLY when the site is right-to-left * (config.site.language === "ar" or config.site.dir === "rtl"). It is never * linked for LTR quizzes, so it cannot affect six / shatha rendering. * * The attribute already flips the bulk of the layout * natively: default text-align becomes right, flex rows reverse, list * padding mirrors. These rules only patch the handful of places that use * PHYSICAL (left/right) properties or an explicit `text-align: left`, * which the browser cannot mirror on its own. * ------------------------------------------------------------------ */ /* Explicit left-aligned blocks in the quiz flow → align to the right. */ [dir="rtl"] .email-gate h1, [dir="rtl"] .card--scale { text-align: right; } /* Scale cards: number + label sit in a flex row. `flex-direction: row` already reverses under RTL (number moves to the right, label to its left), so only the text alignment needed fixing above. */ /* Single-action rows (e.g. the first quiz page, email gate) push the primary button to the logical end. In LTR that is margin-left:auto; mirror it so the button lands on the left in RTL. */ [dir="rtl"] .form-actions .btn-primary { margin-left: 0; margin-right: auto; } /* Uppercase field labels carry a tiny physical left indent + the required asterisk sits to the right of the label text. Mirror both. */ [dir="rtl"] .email-form .field-label { margin: 0 0.1rem 0.45rem 0; } [dir="rtl"] .email-form .field-label .req { margin-left: 0; margin-right: 0.15rem; } /* Native