/* =============================================================
   EMERTAT — RTL Overrides
   Scope: [dir="rtl"] on <html> — set in header.tpl.
   Phase 1: Foundation (direction, font, Bootstrap 4 utilities)
   Phases 2-5 will be appended below their own section headers.
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   PHASE 1 — FOUNDATION
   ══════════════════════════════════════════════════════════════ */

/* ── 1.1  Root direction ────────────────────────────────────── */
[dir="rtl"] {
    direction: rtl;
}

/* ── 1.2  Body & form elements — font + direction ───────────── */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
    font-family: var(--font-fa) !important;
    direction: rtl;
}
/* Bootstrap sets body { text-align: left } which cascades everywhere.
   Override it globally — this is the correct base for a full RTL site. */
[dir="rtl"] body {
    text-align: right;
}

/* ── 1.3  Bidi — make inline content embed correctly ────────── */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] label,
[dir="rtl"] .alert,
[dir="rtl"] .form-control {
    direction: rtl;
    unicode-bidi: embed;
}

/* ── 1.4  Form controls & labels text alignment ─────────────── */
[dir="rtl"] .form-control,
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"],
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

/* Bootstrap body { text-align: left } cascades through labels and helper text */
[dir="rtl"] label,
[dir="rtl"] .form-label,
[dir="rtl"] .col-form-label,
[dir="rtl"] .form-text,
[dir="rtl"] .invalid-feedback,
[dir="rtl"] .valid-feedback,
[dir="rtl"] .input-group-text {
    text-align: right;
}

/* Search input — icon is on the left (prepend), keep it clean */
[dir="rtl"] input[type="search"] {
    text-align: right;
}

/* ── 1.5  Bootstrap 4 text-align utilities ──────────────────── */
[dir="rtl"] .text-left  { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left  !important; }

/* ── 1.6  Bootstrap 4 float utilities ──────────────────────── */
[dir="rtl"] .float-left  { float: right !important; }
[dir="rtl"] .float-right { float: left  !important; }

/* Legacy Bootstrap pull-* (used in Nexus partials) */
[dir="rtl"] .pull-left  { float: right !important; }
[dir="rtl"] .pull-right { float: left  !important; }

/* ── 1.7  Bootstrap 4 margin (ml-* / mr-*) utilities ───────── */
[dir="rtl"] .ml-auto { margin-inline-start: auto   !important; margin-inline-end: unset !important; }
[dir="rtl"] .mr-auto { margin-inline-end:   auto   !important; margin-inline-start: unset !important; }

[dir="rtl"] .ml-0 { margin-inline-start: 0      !important; margin-left:  unset !important; }
[dir="rtl"] .mr-0 { margin-inline-end:   0      !important; margin-right: unset !important; }

[dir="rtl"] .ml-1 { margin-inline-start: .25rem !important; margin-left:  unset !important; }
[dir="rtl"] .mr-1 { margin-inline-end:   .25rem !important; margin-right: unset !important; }

[dir="rtl"] .ml-2 { margin-inline-start: .5rem  !important; margin-left:  unset !important; }
[dir="rtl"] .mr-2 { margin-inline-end:   .5rem  !important; margin-right: unset !important; }

[dir="rtl"] .ml-3 { margin-inline-start: 1rem   !important; margin-left:  unset !important; }
[dir="rtl"] .mr-3 { margin-inline-end:   1rem   !important; margin-right: unset !important; }

[dir="rtl"] .ml-4 { margin-inline-start: 1.5rem !important; margin-left:  unset !important; }
[dir="rtl"] .mr-4 { margin-inline-end:   1.5rem !important; margin-right: unset !important; }

[dir="rtl"] .ml-5 { margin-inline-start: 3rem   !important; margin-left:  unset !important; }
[dir="rtl"] .mr-5 { margin-inline-end:   3rem   !important; margin-right: unset !important; }

/* ── 1.8  Bootstrap 4 padding (pl-* / pr-*) utilities ──────── */
[dir="rtl"] .pl-0 { padding-inline-start: 0      !important; padding-left:  unset !important; }
[dir="rtl"] .pr-0 { padding-inline-end:   0      !important; padding-right: unset !important; }

[dir="rtl"] .pl-1 { padding-inline-start: .25rem !important; padding-left:  unset !important; }
[dir="rtl"] .pr-1 { padding-inline-end:   .25rem !important; padding-right: unset !important; }

[dir="rtl"] .pl-2 { padding-inline-start: .5rem  !important; padding-left:  unset !important; }
[dir="rtl"] .pr-2 { padding-inline-end:   .5rem  !important; padding-right: unset !important; }

[dir="rtl"] .pl-3 { padding-inline-start: 1rem   !important; padding-left:  unset !important; }
[dir="rtl"] .pr-3 { padding-inline-end:   1rem   !important; padding-right: unset !important; }

[dir="rtl"] .pl-4 { padding-inline-start: 1.5rem !important; padding-left:  unset !important; }
[dir="rtl"] .pr-4 { padding-inline-end:   1.5rem !important; padding-right: unset !important; }

[dir="rtl"] .pl-5 { padding-inline-start: 3rem   !important; padding-left:  unset !important; }
[dir="rtl"] .pr-5 { padding-inline-end:   3rem   !important; padding-right: unset !important; }

/* ── 1.9  Bootstrap 4 border utilities ─────────────────────── */
[dir="rtl"] .border-left  {
    border-left:  none !important;
    border-right: 1px solid var(--border, #dee2e6) !important;
}
[dir="rtl"] .border-right {
    border-right: none !important;
    border-left:  1px solid var(--border, #dee2e6) !important;
}
[dir="rtl"] .rounded-left  { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
[dir="rtl"] .rounded-right { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }

/* ── 1.10  Flexbox — d-flex row inherits direction from html  */
/*  Most flex gaps just work with dir="rtl"; override only when
    Bootstrap adds an explicit margin-left/right on flex children */
[dir="rtl"] .flex-row         { flex-direction: row-reverse; }
[dir="rtl"] .justify-content-start { justify-content: flex-end   !important; }
[dir="rtl"] .justify-content-end   { justify-content: flex-start !important; }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — BOOTSTRAP 4 COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ── 2.1  Dropdowns ─────────────────────────────────────────── */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
    float: right;
}
/* .dropdown-menu-right in LTR = pinned to right edge → in RTL = left edge */
[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}
[dir="rtl"] .dropdown-menu-left {
    left: auto;
    right: 0;
}
[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* ── 2.2  Btn-group ─────────────────────────────────────────── */
/* BS4 btn-group uses inline-flex; direction:rtl reverses visual order.
   DOM :first-child = visually RIGHTMOST, DOM :last-child = visually LEFTMOST.
   We target each position explicitly to avoid cascade conflicts on middle items. */

/* Border collapse: flip margin-left → margin-right */
[dir="rtl"] .btn-group > .btn:not(:first-child),
[dir="rtl"] .btn-group > .btn-group:not(:first-child) {
    margin-left:  0;
    margin-right: -1px;
}
/* Nested btn-group (e.g. a dropdown at group end) must not shrink below content */
[dir="rtl"] .btn-group > .btn-group {
    flex-shrink: 0;
}
/* DOM :first-child = visual RIGHT → round RIGHT corners, flat LEFT */
[dir="rtl"] .btn-group > .btn:first-child:not(.dropdown-toggle),
[dir="rtl"] .btn-group > .btn-group:first-child > .btn {
    border-top-right-radius:    0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
}
/* DOM :last-child = visual LEFT → round LEFT corners, flat RIGHT */
[dir="rtl"] .btn-group > .btn:last-child,
[dir="rtl"] .btn-group > .btn-group:last-child > .btn {
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}
/* Middle buttons (neither first nor last) → no rounding on any corner */
[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* ── 2.3  Input-group ───────────────────────────────────────── */
/* Explicit direction so the flex row reverses regardless of inheritance chain */
[dir="rtl"] .input-group {
    direction: rtl;
}
/* Bootstrap's sibling overlap: .form-control + .form-control { margin-left: -1px } */
[dir="rtl"] .input-group > .form-control + .form-control,
[dir="rtl"] .input-group > .form-control + .custom-select,
[dir="rtl"] .input-group > .custom-select + .form-control,
[dir="rtl"] .input-group > .custom-select + .custom-select {
    margin-left:  0;
    margin-right: -1px;
}
/* Prepend is visually on the RIGHT in RTL — its overlap margin flips */
[dir="rtl"] .input-group-prepend {
    margin-right: 0;
    margin-left:  -1px;
}
[dir="rtl"] .input-group-append {
    margin-left:  0;
    margin-right: -1px;
}
/* Border-radius: prepend (DOM first = visual right in RTL) keeps RIGHT corners */
[dir="rtl"] .input-group > .input-group-prepend > .btn,
[dir="rtl"] .input-group > .input-group-prepend > .input-group-text {
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
    border-top-right-radius:    0.25rem;
    border-bottom-right-radius: 0.25rem;
}
/* Append (DOM last = visual left in RTL) keeps LEFT corners */
[dir="rtl"] .input-group > .input-group-append > .btn,
[dir="rtl"] .input-group > .input-group-append > .input-group-text,
[dir="rtl"] .input-group > .input-group-btn > .btn {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
}
/* When multiple buttons are stacked inside append/input-group-btn,
   only the DOM :last-child is the visual-leftmost — zero the left radius on others */
[dir="rtl"] .input-group > .input-group-append > .btn:not(:last-child),
[dir="rtl"] .input-group > .input-group-btn > .btn:not(:last-child) {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
}
/* Bootstrap 3 .input-group-btn standalone (without .input-group-append class) */
[dir="rtl"] .input-group > .input-group-btn {
    margin-left:  0;
    margin-right: -1px;
}
/* Form-control inside input-group: not(:last-child) = visual right in RTL */
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-top-right-radius:    0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
}
[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .custom-select:not(:first-child) {
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}

/* ── 2.3b Form-group ────────────────────────────────────────── */
[dir="rtl"] .form-group,
[dir="rtl"] .form-inline .form-group {
    direction: rtl;
}

/* ── 2.4  Pagination ────────────────────────────────────────── */
[dir="rtl"] .page-link {
    margin-left:  0;
    margin-right: -1px;
}
[dir="rtl"] .page-item:first-child .page-link {
    margin-right:               0;
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
    border-top-right-radius:    0.25rem;
    border-bottom-right-radius: 0.25rem;
}
[dir="rtl"] .page-item:last-child .page-link {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
}

/* ── 2.5  Breadcrumb ────────────────────────────────────────── */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-left:  0;
    padding-right: 0.5rem;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left:  0.5rem;
}

/* ── 2.6  Form-check (native checkbox/radio) ────────────────── */
[dir="rtl"] .form-check {
    padding-left:  0;
    padding-right: 1.25rem;
}
[dir="rtl"] .form-check-input {
    margin-left:  0;
    margin-right: -1.25rem;
}

/* ── 2.7  Custom-control (custom checkbox/radio/switch) ─────── */
[dir="rtl"] .custom-control {
    padding-left:  0;
    padding-right: 1.5rem;
}
[dir="rtl"] .custom-control-input {
    left:  auto;
    right: 0;
}
[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after {
    left:  auto;
    right: -1.5rem;
}

/* ── 2.8  Custom-select (native select with arrow) ──────────── */
/* Background arrow is hardcoded to right 0.75rem — flip to left  */
[dir="rtl"] .custom-select {
    padding-left:  1.75rem;
    padding-right: 0.75rem;
    background-position: left 0.75rem center;
}

/* ── 2.9  List-group border-radius ──────────────────────────── */
/* BS4 inherits radius from parent — no explicit swap needed here.
   Add if visual glitch appears in specific pages. */

/* ── 2.10  Modal ────────────────────────────────────────────── */
[dir="rtl"] .modal-header {
    text-align: right;
}
/* Close button: LTR auto-margin pushes it right; RTL pushes it left */
[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}
[dir="rtl"] .modal-body {
    text-align: right;
}
/* Footer buttons: LTR = flex-end (right); RTL = flex-start (right side) */
[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}

/* ── 2.11  Close (×) button ─────────────────────────────────── */
[dir="rtl"] .close {
    float: left;
}

/* ── 2.12  Navbar brand ──────────────────────────────────────── */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left:  1rem;
}

/* ── 2.13  Alerts ────────────────────────────────────────────── */
[dir="rtl"] .alert {
    text-align: right;
}
[dir="rtl"] .alert-dismissible {
    padding-right: 1.25rem;
    padding-left:  4rem;
}
[dir="rtl"] .alert-dismissible .close {
    right: auto;
    left:  0;
}

/* ── 2.14  Cards ─────────────────────────────────────────────── */
[dir="rtl"] .card-header,
[dir="rtl"] .card-body,
[dir="rtl"] .card-footer {
    text-align: right;
}

/* ── 2.15  Badge ─────────────────────────────────────────────── */
/* Badge-pill has explicit padding-left/right — swap them */
[dir="rtl"] .badge-pill {
    padding-right: 0.6em;
    padding-left:  0.6em;
}

/* ── 2.16  Media object ──────────────────────────────────────── */
/* flex-start in RTL = right side, which is correct for RTL media */
[dir="rtl"] .media {
    flex-direction: row-reverse;
}
[dir="rtl"] .media-body {
    text-align: right;
}

/* ── 2.17  Tooltip & Popover ─────────────────────────────────── */
[dir="rtl"] .tooltip-inner {
    font-family: var(--font-fa);
    text-align:  right;
}
[dir="rtl"] .popover-header,
[dir="rtl"] .popover-body {
    font-family: var(--font-fa);
    text-align:  right;
}

/* ── 2.18  Sidebar clear ─────────────────────────────────────── */
[dir="rtl"] .sidebar-secondary {
    clear: right;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — LAYOUT: NAV / HEADER / SIDEBAR / FOOTER
   ══════════════════════════════════════════════════════════════ */

/* ── 3.1  Responsive float utilities ────────────────────────── */
/* Bootstrap 4 emits float-{sm,md,lg,xl}-left/right as physical
   properties. These are not covered by Phase 1's float-left/right
   because they are inside @media blocks.                          */
@media (min-width: 576px) {
    [dir="rtl"] .float-sm-left  { float: right !important; }
    [dir="rtl"] .float-sm-right { float: left  !important; }
}
@media (min-width: 768px) {
    [dir="rtl"] .float-md-left  { float: right !important; }
    [dir="rtl"] .float-md-right { float: left  !important; }
}
@media (min-width: 992px) {
    [dir="rtl"] .float-lg-left  { float: right !important; }
    [dir="rtl"] .float-lg-right { float: left  !important; }
}
@media (min-width: 1200px) {
    [dir="rtl"] .float-xl-left  { float: right !important; }
    [dir="rtl"] .float-xl-right { float: left  !important; }
}

/* ── 3.2  Header — cart badge pin ───────────────────────────── */
/* theme.css pins the badge to right:-10px of the cart icon.
   In RTL the icon is mirrored so the badge must pin to left.     */
[dir="rtl"] header.header .toolbar .nav-link .badge {
    right: auto;
    left: -10px;
}

/* ── 3.3  Header — search input-group direction ─────────────── */
/* The search box uses input-group-prepend (magnifier button).
   Phase 2 already flips prepend to the right in RTL.
   Placeholder text and input value should align right.           */
[dir="rtl"] header.header .search input[type="text"],
[dir="rtl"] header.header .search input[type="search"] {
    text-align: right;
}

/* ── 3.4  Navbar — dropdown alignment ───────────────────────── */
/* The secondary navbar renders dropdowns with .dropdown-menu-right
   (pinned to right edge in LTR). In RTL that becomes left edge.
   Phase 2 already handles the class swap; add the navbar context. */
[dir="rtl"] header.header .navbar-nav .dropdown-menu {
    right: 0;
    left:  auto;
}
/* Secondary nav (rightDrop=true in navbar.tpl) uses dropdown-menu-right,
   which in RTL should pin to the LEFT edge.                      */
[dir="rtl"] header.header .navbar-nav .dropdown-menu.dropdown-menu-right {
    right: auto;
    left:  0;
}

/* ── 3.5  Sidebar — flex item spacing ───────────────────────── */
/* sidebar-menu-item-wrapper is display:flex; in RTL the icon
   (first child) renders on the RIGHT, label next, badge at end.
   We flip the margin that spaces icon from label, and the badge
   auto-margin so it collapses to the logical end (LEFT).         */
[dir="rtl"] .sidebar .sidebar-menu-item-wrapper {
    direction: rtl;
}
[dir="rtl"] .sidebar .sidebar-menu-item-label {
    text-align: right;
}
[dir="rtl"] .sidebar .sidebar-menu-item-icon-wrapper {
    margin-right: 0;
    margin-left:  0.3rem;
}
[dir="rtl"] .sidebar .sidebar-menu-item-badge {
    margin-left:  0;
    margin-right: auto;
}

/* ── 3.6  Sidebar — card header icons (float-right) ─────────── */
/* sidebar.tpl uses .badge.float-right and .card-minimise.float-right.
   Phase 1 already flips .float-right → float:left globally.
   No extra rule needed here; documented for clarity.             */

/* ── 3.7  Footer — social/language block ───────────────────────*/
/* footer.tpl: <ul class="list-inline text-center float-lg-right">
   Phase 3.1 flips .float-lg-right → float:left at lg+.
   The copyright and nav are text-center / justify-content-center
   so they remain centred — correct for both LTR and RTL.        */
[dir="rtl"] footer.footer .nav {
    direction: rtl;
}

/* ── 3.8  Master breadcrumb ─────────────────────────────────── */
/* Phase 2 already handles .breadcrumb-item padding/::before.
   Ensure the breadcrumb nav container aligns right.              */
[dir="rtl"] .master-breadcrumb .breadcrumb {
    justify-content: flex-start; /* flex-start = RIGHT in RTL */
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — WHMCS CLIENT AREA PAGES
   ══════════════════════════════════════════════════════════════ */

/* ── 4.1  Responsive text-align utilities ───────────────────── */
/* Phase 1 flips .text-left/.text-right (no breakpoint).
   Bootstrap also emits breakpoint variants inside @media blocks. */
@media (min-width: 576px) {
    [dir="rtl"] .text-sm-left  { text-align: right !important; }
    [dir="rtl"] .text-sm-right { text-align: left  !important; }
}
@media (min-width: 768px) {
    [dir="rtl"] .text-md-left  { text-align: right !important; }
    [dir="rtl"] .text-md-right { text-align: left  !important; }
}
@media (min-width: 992px) {
    [dir="rtl"] .text-lg-left  { text-align: right !important; }
    [dir="rtl"] .text-lg-right { text-align: left  !important; }
}
@media (min-width: 1200px) {
    [dir="rtl"] .text-xl-left  { text-align: right !important; }
    [dir="rtl"] .text-xl-right { text-align: left  !important; }
}

/* ── 4.2  Bootstrap 4 grid offsets ──────────────────────────── */
/* All .offset-* classes use margin-left. For RTL grids (flex RTL)
   the offset must push from the RIGHT instead.                   */
[dir="rtl"] .offset-1  { margin-right: 8.3333333333%;  margin-left: 0; }
[dir="rtl"] .offset-2  { margin-right: 16.6666666667%; margin-left: 0; }
[dir="rtl"] .offset-3  { margin-right: 25%;            margin-left: 0; }
[dir="rtl"] .offset-4  { margin-right: 33.3333333333%; margin-left: 0; }
[dir="rtl"] .offset-5  { margin-right: 41.6666666667%; margin-left: 0; }
[dir="rtl"] .offset-6  { margin-right: 50%;            margin-left: 0; }
[dir="rtl"] .offset-7  { margin-right: 58.3333333333%; margin-left: 0; }
[dir="rtl"] .offset-8  { margin-right: 66.6666666667%; margin-left: 0; }
[dir="rtl"] .offset-9  { margin-right: 75%;            margin-left: 0; }
[dir="rtl"] .offset-10 { margin-right: 83.3333333333%; margin-left: 0; }
[dir="rtl"] .offset-11 { margin-right: 91.6666666667%; margin-left: 0; }

@media (min-width: 576px) {
    [dir="rtl"] .offset-sm-0  { margin-right: 0;             margin-left: 0; }
    [dir="rtl"] .offset-sm-1  { margin-right: 8.3333333333%;  margin-left: 0; }
    [dir="rtl"] .offset-sm-2  { margin-right: 16.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-sm-3  { margin-right: 25%;            margin-left: 0; }
    [dir="rtl"] .offset-sm-4  { margin-right: 33.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-sm-5  { margin-right: 41.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-sm-6  { margin-right: 50%;            margin-left: 0; }
    [dir="rtl"] .offset-sm-7  { margin-right: 58.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-sm-8  { margin-right: 66.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-sm-9  { margin-right: 75%;            margin-left: 0; }
    [dir="rtl"] .offset-sm-10 { margin-right: 83.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-sm-11 { margin-right: 91.6666666667%; margin-left: 0; }
}
@media (min-width: 768px) {
    [dir="rtl"] .offset-md-0  { margin-right: 0;             margin-left: 0; }
    [dir="rtl"] .offset-md-1  { margin-right: 8.3333333333%;  margin-left: 0; }
    [dir="rtl"] .offset-md-2  { margin-right: 16.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-md-3  { margin-right: 25%;            margin-left: 0; }
    [dir="rtl"] .offset-md-4  { margin-right: 33.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-md-5  { margin-right: 41.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-md-6  { margin-right: 50%;            margin-left: 0; }
    [dir="rtl"] .offset-md-7  { margin-right: 58.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-md-8  { margin-right: 66.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-md-9  { margin-right: 75%;            margin-left: 0; }
    [dir="rtl"] .offset-md-10 { margin-right: 83.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-md-11 { margin-right: 91.6666666667%; margin-left: 0; }
}
@media (min-width: 992px) {
    [dir="rtl"] .offset-lg-0  { margin-right: 0;             margin-left: 0; }
    [dir="rtl"] .offset-lg-1  { margin-right: 8.3333333333%;  margin-left: 0; }
    [dir="rtl"] .offset-lg-2  { margin-right: 16.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-lg-3  { margin-right: 25%;            margin-left: 0; }
    [dir="rtl"] .offset-lg-4  { margin-right: 33.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-lg-5  { margin-right: 41.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-lg-6  { margin-right: 50%;            margin-left: 0; }
    [dir="rtl"] .offset-lg-7  { margin-right: 58.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-lg-8  { margin-right: 66.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-lg-9  { margin-right: 75%;            margin-left: 0; }
    [dir="rtl"] .offset-lg-10 { margin-right: 83.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-lg-11 { margin-right: 91.6666666667%; margin-left: 0; }
}
@media (min-width: 1200px) {
    [dir="rtl"] .offset-xl-0  { margin-right: 0;             margin-left: 0; }
    [dir="rtl"] .offset-xl-1  { margin-right: 8.3333333333%;  margin-left: 0; }
    [dir="rtl"] .offset-xl-2  { margin-right: 16.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-xl-3  { margin-right: 25%;            margin-left: 0; }
    [dir="rtl"] .offset-xl-4  { margin-right: 33.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-xl-5  { margin-right: 41.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-xl-6  { margin-right: 50%;            margin-left: 0; }
    [dir="rtl"] .offset-xl-7  { margin-right: 58.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-xl-8  { margin-right: 66.6666666667%; margin-left: 0; }
    [dir="rtl"] .offset-xl-9  { margin-right: 75%;            margin-left: 0; }
    [dir="rtl"] .offset-xl-10 { margin-right: 83.3333333333%; margin-left: 0; }
    [dir="rtl"] .offset-xl-11 { margin-right: 91.6666666667%; margin-left: 0; }
}

/* ── 4.3  Bootstrap 4 flex order utilities ───────────────────── */
/* .order-first/-last are semantic: in RTL "first" = rightmost.
   Swap them so page sections order correctly (used in viewinvoice). */
[dir="rtl"] .order-first { order: 13 !important; }
[dir="rtl"] .order-last  { order: -1 !important; }
@media (min-width: 576px) {
    [dir="rtl"] .order-sm-first { order: 13 !important; }
    [dir="rtl"] .order-sm-last  { order: -1 !important; }
}
@media (min-width: 768px) {
    [dir="rtl"] .order-md-first { order: 13 !important; }
    [dir="rtl"] .order-md-last  { order: -1 !important; }
}
@media (min-width: 992px) {
    [dir="rtl"] .order-lg-first { order: 13 !important; }
    [dir="rtl"] .order-lg-last  { order: -1 !important; }
}

/* ── 4.4  Alert with pulled icon (.pull-left icon + text offset) */
/* theme.css: .alert .fas.pull-left { margin: -3px 0 0 -3px }
              .alert .alert-text    { margin-left: 56px }       */
[dir="rtl"] .alert .fas.pull-left {
    float:  right;
    margin: -3px -3px 0 0;
}
[dir="rtl"] .alert .alert-text {
    margin-left:  0;
    margin-right: 56px;
}

/* ── 4.5  Support ticket list — border accent ─────────────────── */
/* .table-list a.border-left is the visual left-edge accent line.
   In RTL the reading start is the right, so accent moves there.  */
[dir="rtl"] .table-list > tbody > tr > td a.border-left {
    border-left:   none;
    border-right:  1px solid #eee;
    padding-left:  0;
    padding-right: 20px;
}

/* ── 4.6  Support ticket view — badge + actions ───────────────── */
/* .ticket-actions.float-sm-right → float-sm-left (Phase 3).
   .requestor-badge.float-md-right → float-md-left (Phase 3).
   Additional alignment for the posted-by meta line.             */
[dir="rtl"] .view-ticket .posted-by {
    text-align: right;
    direction:  rtl;
}
[dir="rtl"] .view-ticket .requestor-badge {
    float: left;
}
/* Star rating: stars are HTML spans flowing left→right;
   reverse so highest rating appears on the right in RTL.        */
[dir="rtl"] .ticket-reply .rating,
[dir="rtl"] .ticket-reply .rating-done {
    direction: rtl;
}

/* ── 4.7  Order form domain input — LTR visual order ────────── */
/* Domain names are inherently LTR: keep columns in www. → input → com order.
   Set direction:ltr on the row so Bootstrap flex doesn't reverse the columns,
   then restore direction:rtl on individual inputs for Persian text.           */
[dir="rtl"] #order-standard_cart .domains-row {
    direction: ltr;
    flex-wrap: nowrap;
}
/* Override global [dir="rtl"] .input-group { direction:rtl } for this row */
[dir="rtl"] #order-standard_cart .domains-row .input-group {
    direction: ltr;
}
/* www. prepend: restore LTR border-radius (left rounded, right flat) */
[dir="rtl"] #order-standard_cart .domains-row .input-group > .input-group-prepend > .input-group-text,
[dir="rtl"] #order-standard_cart .domains-row .input-group > .input-group-addon > .input-group-text {
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}
/* Restore LTR prepend margin (-1px on right to collapse border) */
[dir="rtl"] #order-standard_cart .domains-row .input-group-prepend {
    margin-right: -1px;
    margin-left:  0;
}
/* Inputs accept Persian text */
[dir="rtl"] #order-standard_cart .domains-row .form-control {
    direction:  rtl;
    text-align: right;
}
/* Remove column gap so the two sections sit flush */
[dir="rtl"] #order-standard_cart .domains-row .col-xs-9,
[dir="rtl"] #order-standard_cart .domains-row .col-9 {
    padding-right: 2px;
    padding-left:  0;
}
[dir="rtl"] #order-standard_cart .domains-row .col-xs-3,
[dir="rtl"] #order-standard_cart .domains-row .col-3 {
    padding-left:  2px;
    padding-right: 0;
}
/* Main form-control right side connects to TLD: flat right corners */
[dir="rtl"] #order-standard_cart .domains-row .col-xs-9 .form-control,
[dir="rtl"] #order-standard_cart .domains-row .col-9 .form-control {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius:     0 !important;
    border-bottom-left-radius:  0 !important;
}
/* TLD input (visual RIGHT in LTR): flat left, rounded right, no left border */
[dir="rtl"] #order-standard_cart .domains-row .col-xs-3 .form-control,
[dir="rtl"] #order-standard_cart .domains-row .col-3 .form-control {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
    border-left:               0;
    border-top-right-radius:   0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* ── 4.8  Domain search — TLD pricing list & link ────────────── */
/* .home-domain-search .tld-logos li { float: left; padding: 0 25px 0 0 } */
[dir="rtl"] .home-domain-search .tld-logos li {
    float:   right;
    padding: 0 0 0 25px;
}

/* ── 4.8  Password inputs — always LTR ───────────────────────── */
/* Passwords are typed LTR regardless of page direction.
   Override the global direction:rtl set on all inputs in 1.2.    */
[dir="rtl"] input[type="password"] {
    direction:  ltr;
    text-align: left;
}

/* Non-password text-like inputs keep RTL text-align */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="text"] {
    text-align: right;
}

/* ── 4.9  Tables — general RTL alignment ────────────────────── */
[dir="rtl"] table {
    direction: rtl;
}
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}
/* Preserve explicit center-alignment (amounts, status icons) */
[dir="rtl"] table th.text-center,
[dir="rtl"] table td.text-center {
    text-align: center !important;
}

/* ── 4.10  LTR isolation — data that must stay LTR ──────────── */
/* Domain names, emails, IPs, prices, invoice IDs in WHMCS output.
   Use base.css .ltr class or <bdi> where TPL overrides are done.
   Below are CSS-targetable patterns without TPL changes.         */

/* Domain name cells in services/domains table — make them LTR */
[dir="rtl"] .services-domain-cell,
[dir="rtl"] .domain-name,
[dir="rtl"] td.domain {
    unicode-bidi: isolate;
    direction:    ltr;
    text-align:   left;
}

/* Currency amounts stay numeric LTR */
[dir="rtl"] .currency-amount,
[dir="rtl"] .invoice-amount,
[dir="rtl"] .service-price {
    unicode-bidi: isolate;
    direction:    ltr;
    text-align:   right; /* right-align number in RTL context */
}

/* ── 4.11  Invoice standalone page (viewinvoice.tpl) ─────────── */
/* viewinvoice.tpl has its own <html> — the dir="rtl" attr is
   added via our viewinvoice.tpl TPL override (see below).
   These rules apply once dir="rtl" is on that page's <html>.    */

/* Company address block — right-aligned in RTL */
[dir="rtl"] .invoice-col address {
    text-align: right;
}

/* Invoice print/download buttons — move to left in RTL */
[dir="rtl"] .invoice-container .float-right {
    float: left !important;
}

/* Payment method span: was float-sm-right → Phase 3 flips it.
   Ensure text inside address column flows right-to-left.        */
[dir="rtl"] .invoice-col.right address,
[dir="rtl"] .invoice-col.right span {
    text-align: right;
}

/* Transaction ledger table — amounts column center-aligned, keep it */
[dir="rtl"] .transactions-container table td.text-center {
    text-align: center !important;
}

/* ── 4.12b DataTables  ────────────────────────────────────────
   WHMCS Nexus uses dom: '<"listtable"fit>pl'
   Inside .listtable:  f (filter, float:right) · i (info, no float) · t (table)
   Outside .listtable: p (paginate, float:right) · l (length, no float)

   In RTL we flip the floats so info/length appear on the RIGHT
   and filter appears on the LEFT, mirroring standard RTL data-table layout.
   ──────────────────────────────────────────────────────────────── */

/* Filter: flip float:right → float:left; !important beats all.css (0,2,2) */
[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    float:      left  !important;
    text-align: left  !important;
}
[dir="rtl"] .dataTables_wrapper .dataTables_filter label {
    direction:  ltr;
    text-align: left  !important;
}
[dir="rtl"] .dataTables_wrapper .dataTables_filter input {
    direction:    rtl;
    text-align:   right;
    margin-left:  0;
    margin-right: 0.5em;
}

/* Info: right-align text so it appears on the right side of the full-width block */
[dir="rtl"] .dataTables_wrapper .dataTables_info {
    text-align: right !important;
    direction:  rtl;
}

/* Length: float LEFT — mirrors LTR layout (length always on the left) */
[dir="rtl"] .dataTables_wrapper .dataTables_length {
    float:      left  !important;
    text-align: right !important;
}
[dir="rtl"] .dataTables_wrapper .dataTables_length label {
    direction:  rtl;
    text-align: right !important;
}

/* Paginate: stays float:right; force direction:rtl */
[dir="rtl"] .dataTables_wrapper .dataTables_paginate,
[dir="rtl"] .dataTables_paginate.paging_simple_numbers {
    direction: rtl;
}
[dir="rtl"] .dataTables_wrapper .dataTables_paginate .pagination {
    direction:       rtl;
    justify-content: flex-start;
}

/* ── Pagination corner fix ──────────────────────────────────────
   Nexus overrides with `body .pagination .page-item:first-child`
   at specificity (0,4,1). Our plain [dir="rtl"] .page-item rule
   is (0,4,0) and loses. Add `body` to match and beat it.
   In RTL flex: DOM first = visual RIGHT → right corners rounded.
                DOM last  = visual LEFT  → left corners rounded.   */
[dir="rtl"] body .pagination .page-item:first-child .page-link {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}
[dir="rtl"] body .pagination .page-item:last-child .page-link {
    border-radius: var(--rounding-md) 0 0 var(--rounding-md);
}

/* ── 4.13  prepend-icon fields (register + order form) ──────────── */
/* .field-icon is position:absolute with no left/right set.
   In RTL browsers naturally shift its static position to the right.
   Pin it to left:0. The existing padding-left:36px on .field / .form-control
   already reserves the space — no padding change needed.               */
[dir="rtl"] #order-standard_cart .prepend-icon .field-icon,
[dir="rtl"] #registration .prepend-icon .field-icon {
    right: auto;
    left:  0;
}

/* ── 4.13b  input-group-merge (login + password-reset) ─────────── */
/* These inputs use prepend icon as a visual decorator inside the field.
   Keep direction:ltr so the icon (prepend/DOM-first) stays on the LEFT.
   Override our global [dir="rtl"] .input-group rules for this context.  */
[dir="rtl"] .input-group.input-group-merge {
    direction: ltr;
}
/* Restore LTR prepend/append margins */
[dir="rtl"] .input-group.input-group-merge .input-group-prepend {
    margin-right: -1px;
    margin-left:  0;
}
[dir="rtl"] .input-group.input-group-merge .input-group-append {
    margin-left:  -1px;
    margin-right: 0;
}
/* Restore LTR border-radius: prepend → left rounded, right flat */
[dir="rtl"] .input-group.input-group-merge > .input-group-prepend > .input-group-text,
[dir="rtl"] .input-group.input-group-merge > .input-group-prepend > .btn {
    border-top-left-radius:     0.25rem;
    border-bottom-left-radius:  0.25rem;
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}
/* Restore LTR border-radius: append → right rounded, left flat */
[dir="rtl"] .input-group.input-group-merge > .input-group-append > .input-group-text,
[dir="rtl"] .input-group.input-group-merge > .input-group-append > .btn {
    border-top-right-radius:    0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
}
/* form-control: LTR corners — left flat (next to prepend), right rounded or flat */
[dir="rtl"] .input-group.input-group-merge > .form-control:not(:first-child) {
    border-top-left-radius:     0 !important;
    border-bottom-left-radius:  0 !important;
    border-top-right-radius:    0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}
[dir="rtl"] .input-group.input-group-merge > .form-control:not(:last-child) {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Input text still accepts RTL/Persian characters */
[dir="rtl"] .input-group.input-group-merge .form-control {
    direction:  rtl;
    text-align: right;
}
/* Email and password are inherently LTR — override both the merge rule
   and the global input[type=*] { text-align:right } rule above         */
[dir="rtl"] .input-group.input-group-merge input[type="email"],
[dir="rtl"] .input-group.input-group-merge input[type="password"] {
    direction:  ltr;
    text-align: left;
}
/* Login/password-reset card title — explicit RTL alignment */
[dir="rtl"] .login-form .mb-4,
[dir="rtl"] .mw-540 .mb-4 {
    direction:  rtl;
    text-align: right;
}

/* ── 4.14  Order form — domain selection (configureproductdomain) ─ */
/* iCheck custom radio/checkbox: in LTR margin-right separates icon from text.
   In RTL the icon is on the RIGHT, text to its left — gap must be margin-left. */
[dir="rtl"] #order-standard_cart label .iradio_square-blue,
[dir="rtl"] #order-standard_cart label .icheckbox_square-blue {
    margin-right: 0;
    margin-left:  4px;
}
[dir="rtl"] #order-standard_cart .domain-selection-options .option .iradio_square-blue {
    margin-right: 0;
    margin-left:  10px;
}
/* Option row: right-align + RTL flow so radio appears on right of text */
[dir="rtl"] #order-standard_cart .domain-selection-options .option {
    text-align: right;
    direction:  rtl;
}
[dir="rtl"] #order-standard_cart .domain-selection-options .option > label {
    direction:  rtl;
    text-align: right;
    width: 100%;
    display: block;
}
/* domain-input-group: direction so Bootstrap flex row reverses column order */
[dir="rtl"] .domain-input-group {
    direction: rtl;
}

/* ── 4.14  Homepage stat tiles ───────────────────────────────── */
/* Nexus: .tiles .tile i { position: absolute; top: 10px; right: 20px }
   In RTL the icon should appear on the LEFT side of the tile. */
[dir="rtl"] .tiles .tile i {
    right: auto;
    left:  20px;
}
/* Tile separator: Nexus uses border-right between tiles.
   In RTL, flip to border-left so the separator appears on the correct side.
   Also fix the no-border rule: in RTL flex the FIRST-child is visual-rightmost
   (the "last" displayed tile) so remove its border-left instead. */
[dir="rtl"] .tiles .tile {
    border-right: 0;
    border-left:  1px solid #ccc;
}
[dir="rtl"] .tiles .row > div:first-child .tile {
    border-left: 0;
}
[dir="rtl"] .tiles .row > div:last-child .tile {
    border-left: 1px solid #ccc;
}

/* ── 4.15  Hide sub-accounts / contacts panel on home page ───── */
[menuItemName="Contacts"] {
    display: none !important;
}

/* ── 4.12  Client area home — card action button ─────────────── */
/* clientareahome.tpl: <div class="float-right"> in card headers.
   Phase 1 already flips .float-right → float:left. Add context. */
[dir="rtl"] .primary-content .card-header .float-right,
[dir="rtl"] .primary-content .card-header .float-left {
    /* normalise: always use margin-inline for spacing */
    margin-inline-start: auto;
    float: left !important; /* float to logical end = left in RTL */
}

/* ── 4.16  Advanced domain search controls — RTL adjustments ─── */
/* Toggle link: align to right in RTL */
[dir="rtl"] .emertat-search-toggle {
    direction: rtl;
}
[dir="rtl"] .emertat-search-toggle .toggle-icon {
    order: 1; /* chevron after text in LTR → before in RTL */
}
/* Controls row items in RTL */
[dir="rtl"] #order-standard_cart #domainregister.domain-checker-advanced .domains-row {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
[dir="rtl"] #order-standard_cart .domain-checker-advanced .domains-row > label {
    direction: rtl;
}
/* Multiselect dropdown text */
[dir="rtl"] #order-standard_cart .domain-checker-advanced .multiselect.btn {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] #order-standard_cart .domain-checker-advanced .multiselect-container {
    direction: rtl;
    text-align: right;
}

/* ── 4.17  Domain list bulk-action btn-group ──────────────────── */
/*
 * theme.css hardcodes LTR corner rounding at specificity 1,4,2:
 *   body .primary-content #domainForm > .btn-group button:first-child  → LEFT corners
 *   body .primary-content #domainForm > .btn-group .dropdown-toggle     → RIGHT corners
 * Adding [dir="rtl"] raises our specificity to 1,5,2 so we win.
 * In RTL: DOM first-child = visual RIGHT → right corners; dropdown = visual LEFT → left corners.
 */
[dir="rtl"] body .primary-content #domainForm > .btn-group button:first-child:not(.dropdown-toggle) {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}
[dir="rtl"] body .primary-content #domainForm > .btn-group .dropdown-toggle {
    border-radius: var(--rounding-md) 0 0 var(--rounding-md);
}