/*
* Base RTL overrides, loaded only when the visitor's selected language is
* Arabic (see _CommonMasterLayout.cshtml: added when Lang.IsRtl).
*
* `dir="rtl"` on already flips most native browser behaviour
* (text alignment, form controls, table column order). The rules below
* cover the custom components in this app whose direction is controlled
* by hardcoded left/right CSS rather than logical properties, plus a
* generic mirror for "back/forward" chevron icons.
*
* This is a pragmatic pass, not a pixel-perfect mirror of the bundled
* Sneat/Bootstrap "core.css" vendor theme (that bundle isn't part of this
* project export — it's generated by the Gulp/Webpack build — so if you
* have the official Sneat RTL build assets, swapping them in for the
* admin/back-office screens will give a more polished result there).
*/
[dir="rtl"] {
text-align: right;
}
/* Generic chevron/arrow icon mirroring (Remix icon font + inline SVG arrows) */
[dir="rtl"] .ri-arrow-left-line,
[dir="rtl"] .ri-arrow-right-line,
[dir="rtl"] .ri-arrow-left-s-line,
[dir="rtl"] .ri-arrow-right-s-line {
display: inline-block;
transform: scaleX(-1);
}
/* Bootstrap margin/padding utility classes that are physical (ms-/me-) are
already logical in Bootstrap 5 (start/end follow direction automatically),
so no override is needed there. The rules below target this app's own
custom components that use literal left/right. */
/* Navbar (custom "rtn-nav" component):
The navbar is intentionally kept LTR in every language (logo on the left,
actions on the right) via dir="ltr" on the in _Navbar.cshtml — the
brand + language switcher stay put and the dropdowns (which use logical
inset-inline-end) open inward without overflowing. So NO direction overrides
are applied to the navbar here. */
/* Quiz "Choose" cards */
[dir="rtl"] .choose-eyebrow,
[dir="rtl"] .choose-back {
flex-direction: row-reverse;
}
[dir="rtl"] .quiz-badge {
right: auto;
left: 10px;
}
/* Quiz question/answer cards */
[dir="rtl"] .answer-item,
[dir="rtl"] .answer-label {
flex-direction: row-reverse;
}
/* Login page two-panel layout: mirror the panel side */
[dir="rtl"] .login-page {
direction: rtl;
}
/* Report "donut" metric cards */
[dir="rtl"] .rpt-donut__inner {
text-align: center; /* keep centered content centered regardless of direction */
}
/* Tables: header alignment follows direction automatically via `text-align: right`
above; explicit numeric/score columns can opt back into left-alignment with
the .ltr-num helper class if ever needed. */
.ltr-num {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
}
/* =========================================================================
* Home page (Views/Home/Index.cshtml) — direction-sensitive bits
*
* Most of the home's custom CSS is already direction-neutral: flexbox rows
* auto-flip in RTL, padding/margin shorthands are symmetric, and absolutely
* everything wider than a chip uses `gap` rather than per-side margins. The
* rules below cover the few places that hardcoded `left:` / `right:` literals.
* ========================================================================= */
/* The big decorative quotation mark sits absolutely positioned at the
leading edge of each .quote-card. In LTR that's the left edge; in RTL
it must move to the right edge so it sits at the start of the quote. */
[dir="rtl"] .quote-mark {
left: auto;
right: 16px;
}
/* The home's "hp-hero" uses display: grid which is direction-aware on its own,
so the hero copy / quiz card columns will already swap sides in RTL — but the
inline h1 italic em often reads more naturally on its own line in Arabic; the
existing tags keep that line break either way, so no override needed. */
/* Bottom sticky CTA is centered (left:0; right:0; justify-content:center)
in both directions, so nothing to do there. The arrow/✦ glyph inside the
button is plain text and follows the paragraph direction automatically. */
/* "Privacy strip" links — explicitly `text-align: center` in the source for
readability on narrow widths. In RTL we want the same centered look (links
are short pills), so we explicitly re-assert center here in case the
global `[dir="rtl"] { text-align: right }` rule above tries to override
their inline-flex centering on some browsers. */
[dir="rtl"] .privacy-link {
text-align: center;
}
/* Card CTAs and hints are also centered by design — re-assert. */
[dir="rtl"] .card-cta,
[dir="rtl"] .card-hint,
[dir="rtl"] .bottom-btn {
text-align: center;
}
/* The hero card header's small "NEW / IN PROGRESS" badge is a tiny pill on
the trailing edge of the indigo banner; flex justify-content: space-between
handles its position automatically. The badge's own padding is symmetric. */