/* *****************************************************
    RTL Stylesheet — linked from header.tpl for Arabic,
    after $headoutput so it is the last word on layout.
***************************************************** */

body {
    direction: rtl;
    text-align: right;
    line-height: 1.7;
}

/* The legacy "Arabic RTL Support" hook that WHMCS injects into $headoutput
   forces `font-family: "Cairo" !important` on this exact list of selectors.
   This stylesheet is loaded after $headoutput, so mirroring the list with the
   same specificity hands typography back to the theme. Delete this block once
   that hook is removed from the WHMCS install — `body` alone is enough. */
body,
p, h1, h2, h3, h4, h5, h6,
a, span, div, li, td, th,
label, input, select, textarea, button,
.form-control, .btn, .card, .card-body, .card-title,
.nav-link, .dropdown-item, .breadcrumb-item,
.alert, .modal-body, .modal-header, .modal-title {
    font-family: var(--font-ui) !important;
}

/* Negative letter-spacing breaks Arabic letter joining */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .table thead th {
    letter-spacing: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.5;
}

/* ---- Flip Bootstrap utilities ---- */
.mr-auto { margin-right: 0 !important; margin-left: auto !important; }
.ml-auto { margin-left: 0 !important; margin-right: auto !important; }

.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

.text-left { text-align: right !important; }
.text-right { text-align: left !important; }

.float-left { float: right !important; }
.float-right { float: left !important; }
.pull-left { float: right !important; }
.pull-right { float: left !important; }

@media (min-width: 768px) {
    .text-md-left { text-align: right !important; }
    .text-md-right { text-align: left !important; }
    .float-md-left { float: right !important; }
    .float-md-right { float: left !important; }
}

/* ---- Lists ---- */
.primary-content ul:not([class]),
.primary-content ol:not([class]) {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* ---- Dropdowns ---- */
.dropdown-menu {
    text-align: right;
}

.dropdown-menu-right {
    right: auto;
    left: 0;
}

/* ---- Breadcrumb ---- */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left: 0.5rem;
}

/* ---- Tables ---- */
.table th,
.table td {
    text-align: right;
}

/* ---- Forms ---- */
/* Select arrow on the left side */
.custom-select {
    padding: 0.375rem 0.75rem 0.375rem 1.75rem;
    background-position: left 0.75rem center;
}

/* Plain checkboxes / radios */
.form-check {
    padding-left: 0;
    padding-right: 1.25rem;
}

.form-check-input {
    margin-left: 0;
    margin-right: -1.25rem;
}

/* Bootstrap custom controls */
.custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

/* Input groups.
   A flex container already mirrors itself in RTL, so the addons land on the
   right side on their own. The legacy "Arabic RTL Support" hook re-orders
   them on top of that (prepend: order 1, append: order -1), which flips them
   back to the left — the key icon ended up at the end of the field and the
   reveal-password button at the start. Reset the order and let direction do
   the work. */
.input-group > .input-group-prepend,
.input-group > .input-group-append {
    order: 0;
}

/* Keep rounded outer corners on the correct side */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-radius: var(--rounding-md) 0 0 var(--rounding-md);
}

/* A field between two addons is square on both sides */
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .custom-select:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-radius: var(--rounding-md) 0 0 var(--rounding-md);
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}

.input-group-text {
    border-radius: 0 var(--rounding-md) var(--rounding-md) 0;
}

/* ---- Modals ---- */
.modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

.modal-footer > :not(:first-child) {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ---- Alerts ---- */
.alert-dismissible {
    padding-right: 1.25rem;
    padding-left: 4rem;
}

.alert-dismissible .close {
    right: auto;
    left: 0;
}

/* ---- Header / navigation ---- */
header.header .navbar-nav {
    padding-right: 0;
}

header.header .toolbar .nav-link .badge {
    right: auto;
    left: -10px;
}

/* ---- Data tables ---- */
/* Corner rounding is defined for LTR (first-child = left);
   in RTL the first column is on the right — flip the corners */
body .dataTables_wrapper table.table-list thead th:first-child {
    border-radius: 0 var(--rounding-md) 0 0;
}

body .dataTables_wrapper table.table-list thead th:last-child {
    border-radius: var(--rounding-md) 0 0 0;
}

body .dataTables_wrapper table.table-list tr:last-child td:first-child {
    border-radius: 0 0 var(--rounding-md) 0;
}

body .dataTables_wrapper table.table-list tr:last-child td:last-child {
    border-radius: 0 0 0 var(--rounding-md);
}

.dataTables_wrapper .dataTables_filter {
    float: left;
}

.dataTables_wrapper .dataTables_paginate {
    float: left;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    float: right;
}

/* ---- Pagination ---- */
.pagination {
    padding-right: 0;
}

.page-item:first-child .page-link {
    border-radius: 0 var(--rounding-full) var(--rounding-full) 0;
}

.page-item:last-child .page-link {
    border-radius: var(--rounding-full) 0 0 var(--rounding-full);
}

/* ---- Phone country dropdown: anchor to the field in RTL ---- */
.intl-tel-input .country-list {
    right: 0;
    left: auto;
}

/* ---- Directional icons: mirror in RTL ---- */
/* e.g. the "Continue" button arrow should point left in Arabic.
   Catches every FontAwesome arrow/chevron/angle/caret variant. */
.btn [class*="fa-arrow"],
.btn [class*="fa-long-arrow"],
.btn [class*="fa-chevron"],
.btn [class*="fa-angle"],
.btn [class*="fa-caret"],
#checkout i,
.btn-checkout i {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---- Misc spacing fixes ---- */
/* Icons placed before text with margin-right in LTR markup */
.btn i.fas + span,
.btn i.far + span {
    margin-right: 0.35rem;
}

/* Home domain search TLD logos float */
.home-domain-search .tld-logos li {
    float: right;
    padding: 0 0 0 25px;
}

/* Sidebar active borders */
.list-group-item {
    text-align: right;
}

/* Return-to-admin floating tab: move to the left edge in RTL */
@media (min-width: 768px) {
    .btn-return-to-admin {
        right: auto;
        left: 0;
        transform: rotate(-90deg);
        transform-origin: top left;
        border-radius: 0 0 var(--rounding-sm) var(--rounding-sm) !important;
    }
}

/* ---- Header toolbar ---- */
/* Cart counter belongs on the outer corner of the button, which is the
   left one once the header is mirrored */
header.header .toolbar .nav-link .badge {
    right: auto;
    left: -6px;
}

/* ---- Domain fields ---- */
/* Domain names are always Latin, so an RTL paragraph direction reorders the
   neutral characters around them (the placeholder "مثال. example.com" renders
   with its dot on the wrong side). Keep the text LTR, aligned to the start
   edge of the field. */
.home-domain-search input[name="domain"],
#frmDomainChecker input[name="domain"],
input.domain-search-input {
    direction: ltr;
    text-align: right;
}