/*!
* rtl.css — Arabic (RTL) support for Protein Fitness Meals
* ---------------------------------------------------------------------------
* Upload to: dashboard.proteinkwd.com/public/site/assets/css/rtl.css
*
* This file is loaded ONLY when app()->getLocale() === 'ar'.
* It can never affect the English site.
*
* Most of the mirroring is done by the browser once dir="rtl" is set on the
* tag — the template already uses flexbox and text-align:start in most
* places, so those flip automatically. This file only patches the handful of
* things the browser cannot flip on its own.
*
* Verified on all 7 public pages: home, services, our-menu, new-plans,
* my-goal, faq, contact-us.
* ---------------------------------------------------------------------------
*/
/* ===========================================================================
1. Bootstrap 5 directional utilities
---------------------------------------------------------------------------
Bootstrap ships a separate 227 KB bootstrap.rtl.css build, but this site
only uses 8 directional utility classes in total, so we flip those directly
instead of loading a second copy of Bootstrap.
If a new page ever starts using another directional utility
(ms-3, pe-4, text-sm-end, float-start, offset-lg-1 …) add it here.
=========================================================================== */
.ms-auto { margin-left: 0 !important; margin-right: auto !important; }
.me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.text-end { text-align: left !important; }
@media (min-width: 768px) { .text-md-end { text-align: left !important; } }
@media (min-width: 992px) { .text-lg-end { text-align: left !important; } }
.offset-md-1 { margin-left: 0; margin-right: 8.33333333%; }
.offset-lg-2 { margin-left: 0; margin-right: 16.66666667%; }
.offset-xl-3 { margin-left: 0; margin-right: 25%; }
/* ===========================================================================
2. Keep Latin/numeric runs in their correct order
---------------------------------------------------------------------------
In an RTL paragraph the browser reorders neutral characters (+ , . @ : -)
around a Latin or numeric run. Without this, "+965 220 90 100" renders as
"100 90 220 965+" and the odometer counters render as "+ 000,55".
direction:ltr + unicode-bidi:embed gives each of these its own bidi context
so the digits stay in the order a human reads them.
=========================================================================== */
a[href^="tel:"],
a[href^="mailto:"],
.contact-text,
.counter-num,
.odometer,
.odometer *,
.ss-cell .cv,
.ss-cell .cs,
.store-name,
.customer-count,
.ltr {
direction: ltr;
unicode-bidi: embed;
}
/* Utility for any other Latin string dropped into Arabic copy
(handles, SKUs, URLs). Use as @proteinkw
or, preferably, the native @proteinkw. */
bdi,
.bidi-auto {
unicode-bidi: plaintext;
}
/* ===========================================================================
3. Owl Carousel
---------------------------------------------------------------------------
The carousels themselves are handled in JS (see website.blade.php — the
Defaults.rtl flag). This only mirrors the chevron glyphs, because the icon
classes are hardcoded in main.js and would otherwise point the wrong way.
=========================================================================== */
.owl-nav button i {
display: inline-block;
transform: scaleX(-1);
}
/* ===========================================================================
4. Optional polish
---------------------------------------------------------------------------
Uncomment if you see these after deploying. Left off by default because
they were not needed on the 7 pages tested.
=========================================================================== */
/* Accordion plus/minus icon overlapping the card edge on the FAQ page:
.accordion-item .accordion-header .accordion-button span { margin-left: 0; margin-right: -18px; }
*/
/* Decorative watermark headings sitting too far off-canvas:
.bg-word, .bg-text { left: auto; right: 0; }
*/