/* ============================================================================
   rtl.css — right-to-left and Arabic typography overrides   (version 5)
   Goes in: public_html/frontend/css/rtl.css

   Loaded ONLY on /ar/... pages, after every other stylesheet. English pages
   never see this file. After editing, bump UD_AR_CSS_VER in ar-layer.php.

   ----------------------------------------------------------------------------
   WHY VERSION 2 IS SMALLER THAN VERSION 1
   ----------------------------------------------------------------------------
   dir="rtl" on <html> already mirrors the page by itself. Flex rows, grid
   tracks, table columns, text flow and logical margins all reverse natively.

   Version 1 then added flex-direction: row-reverse to .row, .main-menu__right
   and others — which flipped those containers a SECOND time, putting them
   back into left-to-right order. That is why the header still read
   logo-left / button-right, and why the hero text drifted onto the photo
   while the absolutely-positioned photo stayed pinned to the right.

   Every one of those double-flips is gone. What remains are only the things
   the browser genuinely cannot work out on its own:

     · physical properties the theme hard-codes (float: left, margin-right,
       text-align: left, left: 0) which have no direction awareness
     · Arabic typography — font, line height, no uppercase tracking
     · runs of digits that must stay left-to-right inside right-to-left text
     · directional arrow glyphs
     · the two components whose layout is set in JavaScript, not CSS

   Nothing here guesses at a rule it has not been shown. Sections marked
   ADJUST are the ones most likely to need your eye.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. basics */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* The theme names its display font on headings and controls, so those need
   naming too. Cairo carries Arabic and Latin, so one family covers the page
   including the Latin brand name inside Arabic sentences. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .section-title__title,
html[dir="rtl"] .section-title__tagline,
html[dir="rtl"] .thm-btn,
html[dir="rtl"] .main-menu__list > li > a,
html[dir="rtl"] input, html[dir="rtl"] select,
html[dir="rtl"] textarea, html[dir="rtl"] button {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif !important;
}

/* Arabic letterforms hang below the baseline and need more leading than
   Latin at the same size, or the lines look cramped. */
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.95; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.55; }

/* LETTER-SPACING MUST NEVER APPLY TO ARABIC.
 *
 * Latin letters are separate shapes, so spacing them out just looks airy.
 * Arabic is cursive — letters join to their neighbours — so adding space
 * between them saws the words apart and makes text look like loose letters.
 *
 * The theme sets letter-spacing in several places (.section-title__tagline-box
 * uses 0.05em, .scroll-to-top__text uses 0.1em, and module stylesheets add
 * more). Listing them one by one guarantees missing some, and every one that
 * is missed damages the text. The property is wrong for Arabic everywhere on
 * the page, so it is switched off everywhere on the page. */
html[dir="rtl"] * { letter-spacing: normal !important; }

/* Arabic has no capital letters, so uppercase does nothing useful. */
html[dir="rtl"] .section-title__tagline,
html[dir="rtl"] .thm-btn,
html[dir="rtl"] .banner-one__sub-title,
html[dir="rtl"] [class*="__tagline"],
html[dir="rtl"] [class*="sub-title"] {
    text-transform: none;
}

/* The split-text heading animation is switched off for Arabic in ar-layer.php,
   by removing the .title-animation and .sec-title-animation class names before
   the page is sent — that script rebuilds a heading as one <span> per letter,
   which breaks Arabic joining. Because those classes are gone, any rule that
   hid a heading until its animation ran no longer matches it either. These
   two lines make certain the headings are visible regardless. */
html[dir="rtl"] .section-title__title,
html[dir="rtl"] .section-title,
html[dir="rtl"] [class*="__title"] {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------- 2. runs that must stay LTR */

/* A phone number inside right-to-left text gets reordered by the browser's
   bidirectional algorithm: +971504499335 renders as 971504499335+. Digits
   and Latin identifiers are pinned back to left-to-right. This is the most
   visible RTL bug there is, so it comes before anything cosmetic. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .main-menu__call-number,
html[dir="rtl"] .odometer,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] code, html[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: embed;
}
/* inline-block only where the element is not already a flex child, or it
   would break out of the layout it sits in */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { display: inline-block; }

/* ------------------------------------------------ 3. hard-coded alignment */

/* These classes name a physical side, so the browser cannot flip them. */
html[dir="rtl"] .text-left,     html[dir="rtl"] .text-lg-left,
html[dir="rtl"] .text-md-left,  html[dir="rtl"] .text-sm-left  { text-align: right !important; }
html[dir="rtl"] .text-right,    html[dir="rtl"] .text-lg-right,
html[dir="rtl"] .text-md-right, html[dir="rtl"] .text-sm-right { text-align: left  !important; }
html[dir="rtl"] .text-center { text-align: center !important; }

html[dir="rtl"] .float-left,  html[dir="rtl"] .pull-left  { float: right !important; }
html[dir="rtl"] .float-right, html[dir="rtl"] .pull-right { float: left  !important; }

html[dir="rtl"] .ml-auto, html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto, html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

html[dir="rtl"] .ml-1,html[dir="rtl"] .ms-1{margin-left:0!important;margin-right:.25rem!important}
html[dir="rtl"] .ml-2,html[dir="rtl"] .ms-2{margin-left:0!important;margin-right:.5rem!important}
html[dir="rtl"] .ml-3,html[dir="rtl"] .ms-3{margin-left:0!important;margin-right:1rem!important}
html[dir="rtl"] .ml-4,html[dir="rtl"] .ms-4{margin-left:0!important;margin-right:1.5rem!important}
html[dir="rtl"] .mr-1,html[dir="rtl"] .me-1{margin-right:0!important;margin-left:.25rem!important}
html[dir="rtl"] .mr-2,html[dir="rtl"] .me-2{margin-right:0!important;margin-left:.5rem!important}
html[dir="rtl"] .mr-3,html[dir="rtl"] .me-3{margin-right:0!important;margin-left:1rem!important}
html[dir="rtl"] .mr-4,html[dir="rtl"] .me-4{margin-right:0!important;margin-left:1.5rem!important}

/* Bootstrap column offsets are a left margin, so they push the wrong way. */
html[dir="rtl"] [class*="offset-"] { margin-left: 0 !important; }
html[dir="rtl"] .offset-1 ,html[dir="rtl"] .offset-md-1 ,html[dir="rtl"] .offset-lg-1 { margin-right: 8.3333% !important; }
html[dir="rtl"] .offset-2 ,html[dir="rtl"] .offset-md-2 ,html[dir="rtl"] .offset-lg-2 { margin-right: 16.6667% !important; }
html[dir="rtl"] .offset-3 ,html[dir="rtl"] .offset-md-3 ,html[dir="rtl"] .offset-lg-3 { margin-right: 25% !important; }
html[dir="rtl"] .offset-4 ,html[dir="rtl"] .offset-md-4 ,html[dir="rtl"] .offset-lg-4 { margin-right: 33.3333% !important; }

/* ----------------------------------------------------------- 4. arrow icons */

/* A right-pointing chevron reads as "forward" in English and "back" in
   Arabic, so directional glyphs are mirrored. Non-directional icons — phone,
   envelope, check, social marks — are deliberately left alone. */
html[dir="rtl"] .fa-angle-right,   html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-arrow-right,   html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left,
html[dir="rtl"] .icon-right-arrow, html[dir="rtl"] .icon-left-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* ------------------------------------------------------------- 5. THE HERO */

/* The theme's own rules, from frontend/css/module-css/banner.css:
 *
 *   .banner-one            { position: relative; overflow: hidden; }
 *   .banner-one__img       { position: absolute; bottom: 0; right: 0; }   700px wide
 *   .banner-one__content-box { display: block; width: 585px; }
 *
 * The overlap has one cause. A block-level box with a FIXED width sits
 * against its parent's inline-start edge — the left under LTR, the right
 * under RTL. So the 585px text box swings across to the right, where the
 * 700px photo is already pinned, and the two land on top of each other.
 *
 * The photo is pinned in physical pixels, so it cannot follow. Moving it is
 * therefore the whole fix: send the photo to the left, and the text box
 * arrives on the right by itself. That is a true mirror of the English
 * composition rather than a workaround, and it needs exactly one property.
 *
 * Only the photo's POSITION is mirrored, never the photo itself — flipping
 * the image would reverse the van, the uniform and any lettering in it. */

/* !important because the theme's own rule and this one have equal weight on
   some breakpoints, and whichever stylesheet loads last would otherwise win. */
html[dir="rtl"] .banner-one__img { right: auto !important; left: 0 !important; }

/* The text box needs no repositioning — RTL already moved it. It only needs
   its contents aligned to the right edge, which is where Arabic starts. */
html[dir="rtl"] .banner-one__content-box { text-align: right; }

/* ---------------------------------------------- 5b. THE COURIER PANEL
 * Used by Retails, Fashion, E-commerce and Healthcare.
 *
 *   .cta-one__img     { position: absolute; right: 100px; bottom: 0; }
 *   .cta-one__content { padding: 67px 95px 80px; }
 *
 * Same shape of problem as the hero, one section further down. The dark panel
 * spans the container and the courier is pinned 100px from its right edge.
 * English text is left-aligned, so it never reaches him. Arabic text is
 * right-aligned, so it runs straight into him.
 *
 * Mirroring the pin is the whole fix: 100px from the right becomes 100px from
 * the left. The courier moves to the left of the panel, the Arabic text keeps
 * the right, and the spacing stays identical to the English version. */
html[dir="rtl"] .cta-one__img { right: auto !important; left: 100px !important; }

/* Below 767px the theme centres this text and drops the photo out of the way;
   keep that behaviour rather than forcing right alignment on a narrow screen. */
@media (max-width: 767px) {
    html[dir="rtl"] .banner-one__content-box { text-align: center; }
}

/* ------------------------------------------------- 6. forms and inputs */

html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}
html[dir="rtl"] label { text-align: right; }

/* Keep the tracking box readable: the number itself stays left-to-right even
   though its placeholder is Arabic. */
html[dir="rtl"] .tracking_form input[name="track_code"] { direction: ltr; text-align: right; }

/* -------------------------------------- 7. layout set in JavaScript (ADJUST) */

/* Owl Carousel measures slide widths and writes transform values itself.
   Forcing direction on the moving track fights that arithmetic and makes
   slides stutter or land half-way, so the track stays left-to-right and only
   the content inside each slide is flipped. Making a carousel genuinely run
   right-to-left is an Owl option (rtl: true), not a CSS change. */
html[dir="rtl"] .owl-stage, html[dir="rtl"] .owl-stage-outer { direction: ltr; }
html[dir="rtl"] .owl-item > * { direction: rtl; text-align: right; }
html[dir="rtl"] .owl-nav .owl-prev, html[dir="rtl"] .owl-nav .owl-next { transform: scaleX(-1); }

/* The typed-effect span in the h1 writes characters one at a time; without an
   explicit direction the caret can jump to the wrong end mid-word. */
html[dir="rtl"] .typed-effect { direction: rtl; unicode-bidi: plaintext; }

/* ---------------------------------------------- 8. absolute positions (ADJUST) */

/* Only elements confirmed in the markup are listed. Each names one physical
   side, so RTL cannot flip it. Add to this list as you find more — and add
   the specific class, never a [class*="…"] wildcard, which is what moved
   things onto the photo in version 1. */

html[dir="rtl"] .mobile-nav__close { right: auto; left: 20px; }
html[dir="rtl"] .main-menu__list li ul { right: 0; left: auto; text-align: right; }
html[dir="rtl"] .main-menu__list li ul li ul { right: 100%; left: auto; }

/* =========================================================================
   9. PAGE-BY-PAGE FIXES
   Anything you spot goes here, one line per fix with the page in a comment,
   so the sections above stay readable.
   ====================================================================== */

/* example — Retails, the years-of-experience badge sat over the photo:
html[dir="rtl"] .about-three__experience-box { right: auto; left: 20px; }
*/