/* ============================================================
   direction.css — shared direction + bidi layer for WebPortalFWT.

   Loaded LAST (after style.css, style1.css, rtl.css and rtl-visual-parity.css)
   so the corrections below win without editing the vendor template files.

   This file owns direction and bidi behaviour ONLY: direction, unicode-bidi,
   flex-direction, and the logical-margin corrections that follow from them.
   It deliberately sets no colour, font or size. rtl-visual-parity.css remains
   the colour layer and is untouched.

   Every block records the defect it fixes.
   ============================================================ */


/* ------------------------------------------------------------
   1. Stop the double flip that cancelled RTL mirroring.

   rtl.css sets `.rtl .row, .rtl .d-flex { flex-direction: row-reverse; }`.
   That rule was written for a build where the container did NOT carry
   direction:rtl. This app sets dir="rtl" on <html>, <body> and .page-wrapper,
   and `direction: rtl` ALREADY reverses a row flex container's main axis.
   Applying row-reverse on top flipped it a second time, so Arabic laid out in
   left-to-right order: the header logo sat at the left edge and the language
   button at the right, exactly as in English.

   Letting `direction` do the mirroring is the correct mechanism, so the main
   axis is pinned back to `row` and the container's direction decides the order.
   rtl.css's own per-section exceptions (.contact-one .row, the header-top flex)
   already said `row` and are unaffected.
   ------------------------------------------------------------ */
.rtl .row,
.rtl .d-flex,
[dir="rtl"] .row,
[dir="rtl"] .d-flex {
    flex-direction: row;
}


/* ------------------------------------------------------------
   2. Repair mixed Arabic/English text.

   style1.css:3102 applies `unicode-bidi: bidi-override` to .rtl p / li /
   .service-detail_text / .service-detail_list li, and style1.css:4011 repeats
   it with !important for the last contact-info block on the Contact page.

   bidi-override forces EVERY character into the element's direction and
   disables the Unicode Bidirectional Algorithm, so an English word, email or
   URL inside an Arabic paragraph renders with its characters in reverse order -
   "info@x.com" reads "moc.x@ofni". This is the direct cause of the reported
   "mixed Arabic/English content breaks layout".

   Both rules apply at every width. An earlier version of this override was
   scoped to @media (max-width: 991.98px) because the first rule sits just after
   such a block in the source; a computed-style check at a 1280px viewport
   showed <li> still resolving to bidi-override, so the override is
   unconditional. The second rule needs !important to outrank its origin.

   `isolate` keeps the block itself RTL, as intended, while restoring the
   standard algorithm inside it so embedded LTR runs read correctly.
   ------------------------------------------------------------ */
.rtl p,
.rtl li,
.rtl .service-detail_text,
.rtl .service-detail_list li,
.rtl .service-detail_list-two li {
    unicode-bidi: isolate;
}

html[lang="ar"] .contact-info_block:last-child p,
html[lang="ar"] .contact-info_block:last-child p a {
    unicode-bidi: isolate !important;
}


/* ------------------------------------------------------------
   3. Reusable bidi utilities.

   These are the shared hooks the render helpers and views use instead of
   one-off dir="ltr" attributes.

     .ltr-text   a value that is always left-to-right regardless of the
                 surrounding language: phone, email, URL, code, IBAN, version.
                 `isolate` stops the value from reordering neighbouring
                 punctuation in the Arabic sentence around it - without it a
                 phone like "+962 6 4014290" renders as "962 6 4014290+".

     .rtl-text   the mirror case: an Arabic value inside an LTR page.

     .bidi-auto  content whose language is not known ahead of time - CMS rich
                 text, a visitor's comment, an admin-entered address. Each
                 block picks its own direction from its first strong character,
                 which is what `plaintext` is for.

   style1.css already defines `.rtl .ltr` with the same intent. That name keeps
   working because existing markup uses it, but it is a poor name: MainMaster.js
   also puts a bare `ltr` class on <body> and .page-wrapper for the English case.
   New markup should use .ltr-text.
   ------------------------------------------------------------ */
.ltr-text {
    direction: ltr;
    unicode-bidi: isolate;
}

.rtl-text {
    direction: rtl;
    unicode-bidi: isolate;
}

.bidi-auto {
    unicode-bidi: plaintext;
}

/* Inline-block form for values sitting inside a sentence, so the isolated run
   cannot be split across a line break mid-number. */
.ltr-text-inline {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Anchors carrying an LTR value (mailto:, tel:) are isolated wherever they
   appear, so a missed class on one instance is not a visible bug. */
.rtl a[href^="mailto:"],
.rtl a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Fields whose value is left-to-right by definition. In an RTL form the caret
   starts on the right and an address typed into them reads back wrong, so the
   input itself is pinned to LTR while `text-align: start` keeps it aligned to
   the form's own edge. Covers the Contact form's email and phone fields and the
   footer newsletter input. */
.rtl input[type="email"],
.rtl input[type="tel"],
.rtl input[type="url"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: start;
}


/* ------------------------------------------------------------
   4. Header top bar - deliberately left as the template has it.

   rtl.css pins the whole bar to `direction: ltr`, so in Arabic it does not
   mirror: the info list stays left and the socials right, as in English.

   Mirroring it was tried and reverted. Overriding it to `direction: rtl` does
   swap the two halves correctly, but it also grows the document scroll width
   from 1270 to 1294 at a 1280 viewport - a horizontal scrollbar on every
   Arabic page. Every visible child still measures inside the container
   (15..1255), so the extra width comes from somewhere in the template's own
   markup that would need restructuring to find, and restructuring the header
   is redesign rather than a direction fix.

   Nothing is lost in bidi terms: the values inside the bar (email, map link,
   address) are isolated by section 3 and by the rule below, so they read
   correctly whichever way the bar itself flows. Left as a known item to raise
   with the owner rather than shipping a visible regression for a cosmetic gain.
   ------------------------------------------------------------ */

/* Address text is admin-supplied and may be Arabic or English. */
.rtl .site-header-address,
.rtl .site-footer-address,
.rtl .site-contact-address,
.rtl .site-sidebar-address {
    unicode-bidi: plaintext;
}


/* ------------------------------------------------------------
   5. Physical margins that only made sense left-to-right.

   Spacing the template hardcodes on the left. Once the header mirrors, the gap
   lands on the wrong side. Only offsets that are a direct consequence of
   mirroring are corrected here.
   ------------------------------------------------------------ */
.rtl .main-header_button {
    margin-left: 0;
    margin-right: 15px;
}


/* ------------------------------------------------------------
   6. Dynamic sections added after the template shipped.

   The comment list and its form are rendered by ClsComments.js into pages that
   may be Arabic or English, and a single thread can hold comments in both. Each
   comment therefore picks its own direction, while the meta row follows the page.
   ------------------------------------------------------------ */
.comments-area .comment-box .text,
.comments-area .comment-box strong {
    unicode-bidi: plaintext;
}

.rtl .comment-form .form-group input,
.rtl .comment-form .form-group textarea {
    direction: rtl;
    text-align: right;
}

/* The comment author line is a flex row; keep it on the page's axis. */
.rtl .comments-area .comment-info {
    flex-direction: row;
}


/* ------------------------------------------------------------
   7. CMS rich text.

   HtmlContent fields are authored in CKEditor and routinely mix an Arabic body
   with English product names, URLs and code. Auto-direction per block is the
   only treatment correct for all of them.
   ------------------------------------------------------------ */
.rtl .blog-detail_text,
.rtl .service-detail_inner,
.rtl .cms-html-content,
.rtl .inner-page_content {
    unicode-bidi: plaintext;
}


/* ------------------------------------------------------------
   8. Award badge (home slider, .step-award_box).

   The count is markup of the shape `<span class="odometer">50</span>+`, so the
   "+" is a neutral character sitting at the end of the line. In an RTL block the
   bidi algorithm resolves a trailing neutral against the paragraph direction,
   which moved the sign to the other side and rendered the figure as "+50".

   Isolating the whole count as one LTR run fixes the sign and, as a side effect,
   restores its left alignment - which is what the box needs: the award vector in
   .step-award_box:before is pinned at `right:25px` and is NOT mirrored for RTL,
   so a right-aligned count would sit underneath the icon.

   This styles the container, never the .odometer span itself, so the digit
   ribbons odometer.js builds inside it are untouched and still animate.
   ------------------------------------------------------------ */
.rtl .step-award_count,
[dir="rtl"] .step-award_count {
    direction: ltr;
    unicode-bidi: isolate;
}

/* The subtitle stays on the page axis, but must clear the same award icon. */
.rtl .step-award_subtitle,
[dir="rtl"] .step-award_subtitle {
    display: block;
/*    padding-inline-end: 80px;*/
}

/* ------------------------------------------------------------
   Contact and Team section titles: dots + title + dots.

   style1.css sets `[dir="rtl"] .sec-title_title .sec-title_dots { order: 1 }`.
   That rule was written for headings carrying a SINGLE dots group, where moving
   it after the text is correct in RTL. The Contact and Team headings flank the
   title with TWO dots groups, so the shared rule gave both the same order value
   and pushed them to the same side: the heading rendered as title + dots + dots
   instead of dots + title + dots. `.rtl .sec-title_title { flex-direction:
   row-reverse }` only decided which side they collected on.

   Scoped to the sec-title_title--flank modifier, which only Contact.cshtml and
   Team.cshtml carry, so every other .sec-title_title keeps the shared behaviour.
   Symmetric in both directions, so one rule set covers Arabic and English.
   ------------------------------------------------------------ */
.sec-title_title.sec-title_title--flank,
.rtl .sec-title_title.sec-title_title--flank,
[dir="rtl"] .sec-title_title.sec-title_title--flank {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

/* Both groups keep DOM order, so the title stays flanked at every width. */
.sec-title_title.sec-title_title--flank .sec-title_dots,
.rtl .sec-title_title.sec-title_title--flank .sec-title_dots,
[dir="rtl"] .sec-title_title.sec-title_title--flank .sec-title_dots {
    order: 0;
    margin-inline: 0;
}


/* ------------------------------------------------------------
   9. Home slider options panel (.slider-one_options).

   Two defects, both direct consequences of direction.

   (a) The count renders "+10". The markup is `10+ <br><span>الخدمات</span>`.
       "10" is Latin digits and "+" is bidi-neutral, so inside an RTL paragraph
       the plus resolves to the end of the run and paints to the LEFT of the
       digits. Pinning the block to LTR restores "10+"; the Arabic label beneath
       it is strong RTL text and is handed its own direction back, so it still
       reads correctly. text-align keeps the block on the side it already sat on
       in Arabic - only the digit order changes.

   (b) The 40px of breathing room ends up on the wrong item. style.css sets
       `.slider-one_authors ul { margin-left: 40px }`, the gap between the
       panel's white inner edge and the first item of the row.

       The panel itself is deliberately NOT mirrored - it stays anchored bottom
       right in both languages, because .button's 40px top-left radius and the
       white top/left borders are cut for that corner and its outer edges sit
       flush to the viewport. The flex row inside it does reverse, though, so in
       Arabic the count becomes the first visual item and has to take that 40px
       over. Without this the count sits flush against the white edge while a
       40px hole opens beside the outer spacer.

       Scoped to >= 576px because below that style1.css re-lays the panel out
       full width with justify-content:space-between, where the row is already
       balanced and an extra 40px would only crowd it.

   The brand-glyph size difference that accompanies this is NOT fixed here: it
   is a font-size, which this file does not set. See the matching note in
   style1.css beside `.rtl .slider-one_reviews span`.
   ------------------------------------------------------------ */
.rtl .slider-one_reviews {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

.rtl .slider-one_reviews span {
    direction: rtl;
    unicode-bidi: isolate;
}

/* (c) The icon row reads ragged. Each <li> is a fixed 54px cell and the glyph
       inside it is inline, so it follows the cell's direction: flush left in
       English, flush right in Arabic. The six brand glyphs have different advance
       widths (33-43px), so right-flushing offsets each circle by a different
       amount (measured 11-19px) and the even 34px cadence English shows becomes
       30/42/26/39/35. The cells themselves are already correctly mirrored - their
       steps are +34 in English and -34 in Arabic - so only the glyph inside needs
       pinning to the same physical edge English uses. This restores offset 0 and a
       flat 34px gap, identical to English. */
.rtl .slider-one_authors ul li {
    text-align: left;
}

/* (d) The button never mirrored at all. style1.css:4599 carries

           .service-btn { direction: ltr; }

       with no language condition, so the anchor stayed left-to-right in Arabic:
       measured, the label began 30px from the LEFT edge and left 188px of dead
       space on the right, and the flex row never reversed, so the arrow kept its
       English position after the text. That one declaration is the whole of
       reported faults 1 and 2.

       The English rule is left alone - it is a no-op there, English being ltr
       already - and overridden here instead, where direction belongs.
       `.service-btn` appears exactly once in served markup,
       Views/Home/Index.cshtml:20, so this override cannot reach anything else.
       With direction restored the label starts 30px in from the right, the same
       inset English uses from its own start edge, and the arrow moves to the
       leading edge on its own. */
.rtl .slider-one_options .button a.service-btn {
    direction: rtl;
}

/* fa-arrow-right is a directional glyph. Once the button mirrors it sits at the
   leading (left) edge but still points right - back into the text it is supposed
   to be leading away from. Mirroring the glyph is the standard RTL treatment and
   needs no extra markup or a second icon class. */
.rtl .slider-one_options .button a.service-btn i {
    transform: scaleX(-1);
}

@media (min-width: 576px) {
    /* The first cell of the icon row carries margin-left:-20px - the overhang that
       stacks the circles. In English that overhang points away from the count, so
       it costs nothing. In Arabic the row is mirrored and it lands on the edge
       FACING the count, swallowing the container's entire 20px flex gap: measured
       ink to ink, the label touched the nearest circle at exactly 0px. 35px is
       what English measures between those same two inks. */
    .rtl .slider-one_authors ul {
        margin-left: 35px;
    }

    .rtl .slider-one_reviews {
        margin-left: 40px;
    }
}

/* (e) The panel's own footprint is not the same width in both languages, which
       opens or closes the gap between it and the image behind it - reported as
       "the image does not cover that area in English the way it does in
       Arabic". .slider-one_options has no width or min-width anywhere in the
       codebase (confirmed by exhaustive search of style.css/style1.css/
       responsive.css/rtl.css/this file); its box is entirely content-sized, and
       two things size that content differently per language with no shared
       basis between them:

         - style1.css:193 sets `html[dir="rtl"], .rtl { font-size: 0.9em; }`
           globally, with no LTR counterpart. Measured live at a 1500px
           viewport, .slider-one_options's OWN computed font-size comes out to
           11.664px in Arabic against a 14.4px html base (0.9 compounded
           twice - html's own 0.9em, then this element's again) versus 17px in
           English against a 16px html base. Nothing here scales the two
           languages from the same starting point.
         - Text length and the brand-icon row differ by content, which is
           normal and not itself a bug.

       Measured result at that same viewport: the panel renders 359.09px wide
       in English and 387.95px in Arabic - both flush with the image's own
       right/bottom edges (`right:0;bottom:0`, confirmed 0px gap to
       .slider-one's own right edge in both languages), so the drift is
       entirely in how far LEFT the panel's own edge reaches, not in its
       right/bottom anchor. Arabic's wider panel is the one already reported
       correct, so English - the narrower one - is what leaves a strip of the
       image exposed that the panel is meant to sit over.

       FIX: an explicit, UNCONDITIONAL min-width (no `.rtl`/`[dir="rtl"]`
       scoping - the same value applies to both languages, so this closes the
       gap by giving English the room Arabic already has, rather than adding
       another per-direction rule). 390px comfortably covers Arabic's measured
       387.95px with headroom for a longer Arabic slide title elsewhere in the
       set, while leaving English to grow from its narrower 359px into the
       same slot the image's frame is built for. The existing mobile rule
       (style1.css ~4577, `width:100% !important`) still wins below its
       breakpoint - `!important` beats this plain min-width regardless of
       source order, so phone layouts are unaffected. */
.slider-one_options {
    min-width: 390px;
}

/* testimonial-two header row (Index.cshtml's ".sec-title" for this section carries a hardcoded
   dir="ltr" attribute). Two unscoped rules elsewhere force this row to break regardless of language:
     - style1.css ~1270: ".sec-title .d-flex..." -> display:block, and ".sec-title .left-box/.right-box"
       -> width:100% !important - stacks the heading row above the CTA row at every viewport width,
       instead of the side-by-side layout "d-flex justify-content-between" asks for.
     - The dir="ltr" attribute keeps this subtree bidi-LTR even while the rest of the page is RTL.
   In English the stacked heading (reads fine on its own line) sitting above a stacked CTA row is not
   obviously broken. In Arabic, the same stacking PLUS the forced LTR direction makes both rows'
   content gravitate to the same left-hand side and crowd together instead of sitting at opposite
   ends of one row - the reported crowding. Restoring the row (flex, RTL-ordered) fixes both symptoms
   together, scoped to this section only so English and every other ".sec-title" are untouched. */
.rtl .testimonial-two .sec-title {
    direction: rtl;
}

.rtl .testimonial-two .sec-title .d-flex.justify-content-between.align-items-center.flex-wrap {
    display: flex !important;
}

.rtl .testimonial-two .sec-title .left-box,
.rtl .testimonial-two .sec-title .right-box {
    width: auto !important;
    flex: 1 1 420px !important;
}

.rtl .testimonial-two .sec-title .right-box {
    text-align: right !important;
}

@media (max-width: 767px) {
    .rtl .testimonial-two .sec-title .left-box,
    .rtl .testimonial-two .sec-title .right-box {
        flex: 1 1 100% !important;
    }
}

/* Avatar stack + "Our Clients" label beside the 5.0 rating figure: style.css gives both a physical
   margin-left (correct for the LTR order they were designed in - label, then the avatar stack
   further to that same side). Mirrored to margin-right so the same stacking direction reads
   correctly once this panel is RTL, the same treatment already applied to .slider-one_authors/
   .slider-one_reviews above for the identical pattern. */
.rtl .testimonial-two_authors ul {
    margin-left: 0;
    margin-right: 20px;
}

.rtl .testimonial-two_authors ul li {
    margin-left: 0;
    margin-right: -19px;
}