/* =========================================================================
Manual RTL fixups
-------------------------------------------------------------------------
Hand-written corrections for things automatic mirroring (postcss-rtlcss)
cannot infer: typography, directional icons that are images/SVGs, and
content that must stay left-to-right even in an RTL layout.
Loaded directly from index.html (NOT through webpack/PostCSS), so nothing
here is re-flipped. Everything is scoped under [dir="rtl"] and therefore
inert in the English (LTR) site.
========================================================================= */
/* --- Arabic typography -------------------------------------------------- */
/* Use the SAME font family as the rest of the app in Arabic too — "Montserrat",
sans-serif. Montserrat has no Arabic glyphs, so the browser automatically
falls back to a system Arabic face for Arabic characters while keeping
Montserrat everywhere it can. (No separate Arabic web font.) */
[dir="rtl"],
[dir="rtl"] body {
font-family: "Montserrat", sans-serif !important;
}
/* --- Directional icons -------------------------------------------------- */
/* Icons that literally point somewhere (chevrons, back/forward arrows,
carousel controls) are often ![]()
or background-images that mirroring
cannot flip. Add the `.rtl-flip` class to any such icon and it will be
horizontally mirrored in RTL. */
[dir="rtl"] .rtl-flip {
transform: scaleX(-1);
}
/* Common directional glyph classes already in the codebase — flip in RTL.
Extend this list as directional icons are found during QA. */
[dir="rtl"] .back-button svg,
[dir="rtl"] .breadcrumb-arrow,
[dir="rtl"] .slider-arrow,
[dir="rtl"] .carousel-arrow,
[dir="rtl"] .chevron-right,
[dir="rtl"] .chevron-left {
transform: scaleX(-1);
}
/* --- Content that must stay LTR ---------------------------------------- */
/* Phone numbers, emails, URLs, prices, times, and code read left-to-right
even inside RTL text. Add `.ltr-content` (or use ) to isolate them. */
[dir="rtl"] .ltr-content,
[dir="rtl"] .phone-number,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .vue-tel-input input {
direction: ltr;
unicode-bidi: isolate;
text-align: left;
}
/* Keep the phone-input country dropdown on the correct side. */
[dir="rtl"] .vue-tel-input {
direction: ltr;
}
/* --- Cohesive graphics that must NOT mirror --------------------------- */
/* The QR code modal's viewfinder frame (QRCodeModal.vue) is built from four
separate PNGs, each pre-drawn as ONE specific corner's bracket shape
(left-corner-union.png, right-corner-union.png, bottom-left-…, bottom-
right-…) and positioned with Tailwind's float-left/float-right. Automatic
mirroring flips float-left↔float-right, which swaps the two images'
POSITIONS without swapping which bracket shape is drawn in each — so the
top-left-shaped bracket lands top-right and vice versa, scrambling the
frame into the mismatched corners seen in QA. These are fixed decorative
art, not layout to reflow, so pin every corner back to its original side
regardless of direction. */
[dir="rtl"] #qr_code_modal .float-left {
float: left !important;
}
[dir="rtl"] #qr_code_modal .float-right {
float: right !important;
}
/* The streak avatar is a ring image with a fixed notch at the bottom-RIGHT
plus an absolutely-positioned badge that sits inside that notch. Automatic
mirroring flips the badge away from the (un-mirrored) notch. Pin the badge
+ inner circle back to their LTR position so the badge stays inside the
notch in RTL. social-information-user.vue (#community) and
share-profile-modal.vue (#profile_sharing_modal) both use these class
names but with DIFFERENT scoped pixel values for their own layouts, so
each needs its own scoped pin — a single shared rule for both mispositions
whichever one it wasn't tuned for. Scoped styles → !important needed to
win. */
[dir="rtl"] #community .communtiy-profile-badge {
right: 0 !important;
left: auto !important;
}
[dir="rtl"] #community .inner-circle {
margin-left: -2px !important;
margin-right: 0 !important;
}
/* share-profile-modal.vue's version of the same badge is positioned with
left/margin-left instead (top:85px; left:84px; mobile: left:60px), so its
pin mirrors the opposite property back. */
[dir="rtl"] #profile_sharing_modal .communtiy-profile-badge {
left: 84px !important;
right: auto !important;
}
[dir="rtl"] #profile_sharing_modal .inner-circle {
margin-left: 11px !important;
margin-right: 0 !important;
}
@media screen and (max-width: 767px) {
[dir="rtl"] #profile_sharing_modal .communtiy-profile-badge {
left: 60px !important;
}
}
/* The notification bell's unread-count badge is pinned to the bell's top-RIGHT
corner (top:-1px; right:-1px in Notification.vue). Automatic mirroring flips
it to top-left, where it detaches from the bell and overlaps the neighbouring
icon on mobile. Keep it on the same corner in RTL. Also let a two-digit count
(e.g. "10") grow the pill instead of overflowing the fixed 14px circle.
Scoped style → !important needed to win. */
[dir="rtl"] .account-controls-counter {
right: -1px !important;
left: auto !important;
width: auto !important;
min-width: 14px;
padding: 0 3px;
box-sizing: border-box;
}
/* --- Home hero banner: keep the text column on the LEFT in RTL ---------- */
/* The hero (BannerComponent.vue, #banner) is a full-bleed background photo
(herobanner.png) whose subject is fixed on the RIGHT, with the text box
overlaid on the empty LEFT half. Automatic mirroring flips the flex layout
and text to the right, dropping the Arabic copy on top of the photo subject.
The photo can't mirror, so keep this banner laid out LTR with left-aligned
text in Arabic too. Scoped styles → !important needed to win. */
[dir="rtl"] #banner .custom-container {
direction: ltr !important;
}
[dir="rtl"] #banner .hero-content-box {
margin-left: 0 !important;
margin-right: auto !important;
}
[dir="rtl"] #banner .hero-badge,
[dir="rtl"] #banner .hero-title,
[dir="rtl"] #banner .hero-desc,
[dir="rtl"] #banner .hero-tagline,
[dir="rtl"] #banner .hero-btn,
[dir="rtl"] #banner .hero-btn-box,
[dir="rtl"] #banner .hero-trust-row {
text-align: left !important;
}
/* --- Weekly/monthly calendar pill toggle -------------------------------- */
/* The two-segment pill (UserActivityCalendarHeader.vue, rendered inside the
#calendar section of activity-diary-calendar/diary-calendar.vue and
similar calendar views) rounds each half with a physical border-radius
shorthand — weekly gets the left corners, monthly the right corners — so
together they form one seamless pill. Automatic mirroring runs on that
rule through a scoped ::v-deep Vue style block and does not reliably
reach it, leaving both halves with their LTR corners in RTL: the flex
order flips (weekly ends up on the right, monthly on the left) but the
rounding doesn't follow, breaking the pill into a mismatched, gapped
shape. Pin the mirrored corners explicitly. Scoped styles → !important
needed to win. */
[dir="rtl"] #calendar .calendar-type-box .calendar-type-weekly {
border-radius: 0 30px 30px 0 !important;
}
[dir="rtl"] #calendar .calendar-type-box .calendar-type-monthly {
border-radius: 30px 0 0 30px !important;
}
/* --- Calendar header: gap between month name and year ------------------- */
/* .selected-month carries a physical margin-right (with no margin-left set)
to space it from the year span that follows it. Same scoped ::v-deep
block as above, same mirroring gap: in RTL the month becomes the
rightmost span and the year sits to its left, so the gap belongs on
margin-left instead — without it the month and year run together with
no space. Pin it explicitly for both the base size and the <374px
breakpoint (diary-calendar.vue's own media query). Scoped styles →
!important needed to win. */
[dir="rtl"] #calendar .calendar-info-box .selected-date .selected-month {
margin-right: 0 !important;
margin-left: 12px !important;
}
@media screen and (max-width: 374px) {
[dir="rtl"] #calendar .calendar-info-box .selected-date .selected-month {
margin-left: 4px !important;
}
}