/* Right-to-left for the marketing site (tp_home layouts), Oct 2026.

   Linked only when the page direction is rtl (ar-SA is the only RTL locale), after
   zenind/css/style.css, so no other language loads a byte of it. Every rule is still
   scoped to html[dir="rtl"] in case the file is ever linked unconditionally.

   tp_home pins body to ltr, so until now an Arabic page was an English layout with its
   text pushed right (zenindrtljs in zenind.js). The page now runs right to left for real:
   flex/grid rows, inline order and logical properties mirror on their own; this file only
   carries the shared fixes. Component-specific fixes live in each component's own <style>. */

html[dir="rtl"] body {
    direction: rtl;
    text-align: start;
}

/* style.css fakes RTL inside an LTR page by reversing Bootstrap rows; in a real RTL page that
   reversal would turn them back to left-to-right. */
html[dir="rtl"] div.row:not(.ltr),
html[dir="rtl"] .zenind-flex-direction {
    flex-direction: row;
}

/* English-only blocks (legal pages, careers, disclaimers, quotes kept in English) are marked
   with the opt-out class .ltr or dir="ltr"; they read left to right in an Arabic page too. */
html[dir="rtl"] .ltr {
    direction: ltr;
    text-align: left;
}

/* Directional glyphs: "go / next" and "back" arrows point along the reading direction. Inline arrows
   are recognised by their arrowhead strokes (right heads "…l6 6-6 6" / "…7 7-7 7" / "…4 4-4 4",
   left heads "…-7-7 7-7" etc., chevrons "6-6-6-6"), symbol arrows by their id. `scale` composes with
   any transform a component animates on hover, so a hover nudge written for LTR moves the mirrored
   arrow forward too. The :not() list skips English (dir="ltr" / .ltr) blocks and the components that already mirror their own arrow under html[dir="rtl"]; add a component there when it flips its own. */
html[dir="rtl"] svg:is(
    :has(> use[href*="arrow"]),
    :has(path[d*="6 6-6 6"]), :has(path[d*="7 7-7 7"]), :has(path[d*="4 4-4 4"]), :has(path[d*="4 3.5-4 3.5"]),
    :has(path[d*="-6-6 6-6"]), :has(path[d*="-7-7 7-7"]), :has(path[d*="-4-4 4-4"]),
    :has(path[d*="-6 6 6 6"]), :has(path[d*="-7 7 7 7"]), :has(path[d*="-4 4 4 4"]),
    :has(path[d*="6-6-6-6"])
):not(
    [dir="ltr"] *, .ltr *,
    .zfb-send__arrow, .zfs-arrow, .zmf-ext, .zlp3-btn-arrow, .zhp-cta-arrow, .zpa-arrow, .zhp-aff-arrow, .zhh-btn-arrow,
    .zau-back svg, .zacc__go svg, .zov-link svg, .zov-chev, .zwbc__btn svg, .zhd-btn--back svg, .zhd-row__go svg, .zhd-send svg
) {
    scale: -1 1;
}

/* The same for icon-font arrows (Line Awesome / Font Awesome); both fonts set inline-block. */
html[dir="rtl"] .la-arrow-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .la-arrow-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .la-angle-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .la-angle-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .la-long-arrow-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .la-long-arrow-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-arrow-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-arrow-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-angle-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-angle-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-chevron-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-chevron-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-long-arrow-alt-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-long-arrow-alt-left:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-arrow-circle-right:not([dir="ltr"] *, .ltr *),
html[dir="rtl"] .fa-arrow-circle-left:not([dir="ltr"] *, .ltr *) {
    scale: -1 1;
}

/* The theme's select wrapper draws its chevron at the physical right. */
html[dir="rtl"] .select-basic:before {
    right: auto;
    left: 1rem;
}

/* A price set in bold inside Arabic copy ("… ابتداء من <b>$0<sup>*</sup></b>"): after Arabic letters the
   bidi algorithm reads the digits as Arabic numbers and moves the "$" to their right ("0$"). */
html[dir="rtl"] p > b:has(> sup) {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Post cards space their meta items (date, author) with a trailing margin-right. */
html[dir="rtl"] .post--card .card-body .post-meta li {
    margin-right: 0;
    margin-left: 1rem;
}
html[dir="rtl"] .post--card .card-body .post-meta li:last-child {
    margin-left: 0;
}

/* Breadcrumb separators are an icon-font chevron in ::before. */
html[dir="rtl"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    scale: -1 1;
}

/* Bootstrap 4 spacing / alignment utilities are physical. In an RTL page they mean the other side. */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* Text fields follow their own text (an English address or "+1 302 555 0186" keeps its order), flush right.
   Zero specificity, so a component's own alignment still wins. */
:where(html[dir="rtl"]) :where(input:not([type]), input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea) {
    unicode-bidi: plaintext;
    text-align: right;
}