/* Right-to-left for the app shells (tp layouts: dashboard, account, billing, helpdesk, drive, open), 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 it; every rule is also scoped to html[dir="rtl"].

   tp/style.css pins html and body to ltr, so Arabic pages kept the English shell (sidebar docked left,
   top bar and footer in English order) around content that each page mirrored by hand. The document now
   runs right to left and the sidebar docks on the right; this file moves the shell's physical offsets
   to the other side. Page-specific fixes live in each page's own <style>. */

html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
}
/* Bootstrap's reboot sets body { text-align: left }, which every block would inherit. */
html[dir="rtl"] body {
    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;
}

/* ---- sidebar: docked on the right ---- */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}
@media (max-width: 1150px) {
    html[dir="rtl"] .sidebar.collapsed {
        left: auto;
        right: -76px;
    }
}
html[dir="rtl"] body.layout-light.zshell-compact aside.sidebar.zside {
    border-right: 0;
    border-left: 1px solid #e7eaf3;
}

/* ---- content and footer columns: the sidebar's offset moves to the right edge ---- */
html[dir="rtl"] .contents {
    padding-left: 15px;
    padding-right: 295px;
}
html[dir="rtl"] .contents.expanded {
    padding-left: 15px;
    padding-right: 93px;
}
@media (max-width: 1150px) {
    html[dir="rtl"] .contents,
    html[dir="rtl"] .contents.expanded {
        padding-left: 15px;
        padding-right: 16px;
    }
}
@media only screen and (max-width: 767px) {
    html[dir="rtl"] .contents,
    html[dir="rtl"] .contents.expanded {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (min-width: 1151px) {
    html[dir="rtl"] body.zshell-compact .contents {
        padding-left: 15px;
        padding-right: 263px;
    }
    html[dir="rtl"] body.zshell-compact .contents.expanded,
    html[dir="rtl"] body.zshell-compact:has(aside.sidebar.zside.collapsed) .contents {
        padding-left: 15px;
        padding-right: 79px;
    }
}
html[dir="rtl"] .zft-in {
    padding-left: 15px;
    padding-right: 263px;
}
html[dir="rtl"] body.zshell-compact:has(aside.sidebar.zside.collapsed) .zft-in {
    padding-left: 15px;
    padding-right: 79px;
}
@media (max-width: 1150.98px) {
    html[dir="rtl"] .zft-in,
    html[dir="rtl"] body.zshell-compact:has(aside.sidebar.zside.collapsed) .zft-in {
        padding-right: 15px;
    }
}

/* ---- top bar: toggle and logo over the sidebar (now right), tools and account at the far left ---- */
html[dir="rtl"] body.zshell-compact header.header-top .navbar {
    padding: 0 12px 0 15px;
}
html[dir="rtl"] body.zshell-compact header.header-top .navbar-left .navbar-brand {
    margin-right: 0;
    margin-left: 83px;
}
@media (max-width: 1150.98px) {
    html[dir="rtl"] body.zshell-compact header.header-top .navbar-left .navbar-brand {
        margin-left: 24px;
    }
}
html[dir="rtl"] body.zshell-compact header.header-top .navbar-left .ztb-toggle {
    margin: 0 0 0 12px;
}
/* The toggle draws a panel on the left; mirrored it shows the panel on the right, where the sidebar is. */
html[dir="rtl"] .ztb-toggle .ztb-i {
    scale: -1 1;
}
html[dir="rtl"] .ztb {
    margin-left: 0;
    margin-right: auto;
}
html[dir="rtl"] .ztb-tools {
    margin-right: 0;
    margin-left: 12px;
}
html[dir="rtl"] .ztb-acct,
html[dir="rtl"] .ztb-menu {
    text-align: right;
}
html[dir="rtl"] .ztb-menu {
    right: auto;
    left: 0;
}
@media (prefers-reduced-motion: no-preference) {
    html[dir="rtl"] .ztb-menu {
        transform-origin: top left;
    }
}
html[dir="rtl"] .ztb-line .ztb-tick {
    margin-left: 0;
    margin-right: auto;
}
@media (max-width: 767.98px) {
    html[dir="rtl"] body.zshell-compact header.header-top .navbar {
        padding: 0 12px;
    }
    html[dir="rtl"] body.zshell-compact header.header-top .navbar-left .ztb-toggle {
        margin: 0 0 0 8px;
    }
    html[dir="rtl"] .ztb-tools {
        margin-left: 6px;
    }
    html[dir="rtl"] .ztb-menu,
    html[dir="rtl"] .ztb-menu--bell {
        left: 8px;
        right: 8px;
    }
}

/* Directional glyphs: "go / next" and "back" arrows point along the reading direction. Inline arrows
   are recognised by their arrowhead strokes, symbol arrows by their id (same rule as rtl-site.css).
   `scale` composes with any hover transform. The :not() list skips English (dir="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"] *,
    .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;
}
html[dir="rtl"] .la-arrow-right:not([dir="ltr"] *),
html[dir="rtl"] .la-arrow-left:not([dir="ltr"] *),
html[dir="rtl"] .la-angle-right:not([dir="ltr"] *),
html[dir="rtl"] .la-angle-left:not([dir="ltr"] *),
html[dir="rtl"] .la-long-arrow-right:not([dir="ltr"] *),
html[dir="rtl"] .la-long-arrow-left:not([dir="ltr"] *),
html[dir="rtl"] .fa-arrow-right:not([dir="ltr"] *),
html[dir="rtl"] .fa-arrow-left:not([dir="ltr"] *),
html[dir="rtl"] .fa-angle-right:not([dir="ltr"] *),
html[dir="rtl"] .fa-angle-left:not([dir="ltr"] *),
html[dir="rtl"] .fa-chevron-right:not([dir="ltr"] *),
html[dir="rtl"] .fa-chevron-left:not([dir="ltr"] *),
html[dir="rtl"] .fa-long-arrow-alt-right:not([dir="ltr"] *),
html[dir="rtl"] .fa-long-arrow-alt-left:not([dir="ltr"] *),
html[dir="rtl"] .fa-arrow-circle-right:not([dir="ltr"] *),
html[dir="rtl"] .fa-arrow-circle-left:not([dir="ltr"] *) {
    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"] .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"] .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"] .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; }

/* Bootstrap custom checkboxes / radios draw their box at the physical left of the label. */
html[dir="rtl"] .custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}
html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

/* Native selects: the theme's arrow and padding sit on the right. */
html[dir="rtl"] select.form-control {
    background-position: left .75rem center;
}

/* Machine-formatted values (dates and times from toLocaleString) read left to right inside Arabic text. */
html[dir="rtl"] .zenind__ticket_create_time,
html[dir="rtl"] .zenind__message_time {
    direction: ltr;
    unicode-bidi: isolate;
}

/* The theme's custom checkbox draws its box (:after) and tick (:before) at the label's physical left. */
html[dir="rtl"] .custom-checkbox input[type="checkbox"] + label {
    padding-left: 0;
    padding-right: 28px;
}
html[dir="rtl"] .custom-checkbox input[type="checkbox"] + label:after {
    left: auto;
    right: 0;
}
html[dir="rtl"] .custom-checkbox input[type="checkbox"] + label:before {
    left: auto;
    right: 3px;
}

/* The company selector's dropdown hangs from the control's right edge (switch-business.js), so it grows from there. */
@media (min-width: 576px) {
    html[dir="rtl"] .zbs.zbs--anchored .zbs-dialog {
        transform-origin: calc(100% - 32px) 0;
    }
}

/* tp gives every icon and label inside a .btn a trailing margin-right: 8px. Mirrored at the theme's own
   specificity (0,1,1), so a component that styles its button icons itself still wins. */
html[dir="rtl"] :where(.btn) :where(svg, span, i) {
    margin-right: 0;
    margin-left: 8px;
}
/* style.css zeroes the label span's trailing margin (button.btn span.zenind-btn-text { margin-right: 0 }); mirrored. */
html[dir="rtl"] button.btn span.zenind-btn-text {
    margin-left: 0;
}
/* …and its custom radio: ring (:after) and dot (:before). */
html[dir="rtl"] .custom-radio input[type="radio"] + label {
    padding-left: 0;
    padding-right: 28px;
}
html[dir="rtl"] .custom-radio input[type="radio"] + label:after {
    left: auto;
    right: 0;
}
html[dir="rtl"] .custom-radio input[type="radio"] + label:before {
    left: auto;
    right: 5px;
}

/* US mailing addresses are English data: they read left to right, set flush with the Arabic column. */
html[dir="rtl"] .zenind_mail_item_list__item_receive_time,
html[dir="rtl"] .zenind__field_mail_item_forward_address,
html[dir="rtl"] input[name="radio-address-select"] + label .radio-text {
    direction: ltr;
    text-align: right;
}
/* The ticket row's "·" separator was drawn before the (now left-to-right) time: it moves to the time's
   right end so it still sits between the request number and the time. */
html[dir="rtl"] .zhd-row__meta .zenind__ticket_create_time:not(:empty)::before {
    content: none;
}
html[dir="rtl"] .zhd-row__meta .zenind__ticket_create_time:not(:empty)::after {
    content: "·" / "";
    margin-inline-start: 10px;
    color: #bfc4cf;
}

/* The consultation's scheduled time is an English date range ("11/15/2023, 2:00:00 PM - …"). */
html[dir="rtl"] #existing_consultation_scheduled_time {
    direction: ltr;
    text-align: right;
}
html[dir="rtl"] [class*="zenind____consultation_time_window_preview_"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Text fields: what people type (street addresses, phone numbers, names, company names) is mostly English.
   Each field follows its own text, so "1209 Orange Street" and "+1 302 555 0186" keep their order instead of
   "Orange Street 1209" and "0186 555 302 1+", and stays flush right. Zero specificity: a component's own
   alignment (centred code boxes) 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;
}