/* =====================================================================
   Hostoniq — Arabic / RTL layer
   ---------------------------------------------------------------------
   header.tpl loads this file only when the locale is RTL. It was
   referenced but never existed (404 on every Arabic page), so Arabic had
   no RTL corrections at all beyond dir="rtl".

   Principles:
   - Logical properties (inline-start/end) so one rule serves both
     directions instead of maintaining a mirrored copy of the whole sheet.
   - Only genuinely direction-dependent things are flipped here.
   - Logos, payment marks, brand names and universal icons are NOT
     mirrored.
   ===================================================================== */

/* ── 1. Arabic typography ─────────────────────────────────────────────
   Cairo is already loaded by header.tpl for Arabic. Latin-tuned letter
   spacing breaks Arabic joining, so it is reset to normal. Arabic glyphs
   also need a little more line-height than Latin to stay legible. */
.body-rtl,
.body-rtl body,
.body-rtl .hq-home,
.body-rtl .navbar,
.body-rtl .footer {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
.body-rtl,
.body-rtl p,
.body-rtl li,
.body-rtl td,
.body-rtl label {
    letter-spacing: normal !important;   /* never letter-space Arabic */
    line-height: 1.75;
}
.body-rtl h1, .body-rtl h2, .body-rtl h3,
.body-rtl h4, .body-rtl h5, .body-rtl h6 {
    letter-spacing: normal !important;
    line-height: 1.45;
}
/* Latin/technical runs keep their own font + direction */
.body-rtl [dir="ltr"],
.body-rtl bdi[dir="ltr"] {
    font-family: 'Montserrat', system-ui, sans-serif;
    unicode-bidi: isolate;
}

/* ── 2. Bidirectional safety ──────────────────────────────────────────
   Prices, domains, emails, IPs, invoice/ticket numbers must never be
   reordered by the RTL paragraph direction. */
.body-rtl .hq-tld,
.body-rtl .hq-chip b,
.body-rtl .hq-util-count,
.body-rtl .domain-name,
.body-rtl .price,
.body-rtl code,
.body-rtl kbd,
.body-rtl samp,
.body-rtl a[href^="mailto:"],
.body-rtl a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}
/* keep currency/number cells readable in tables */
.body-rtl td.price,
.body-rtl .invoice-total,
.body-rtl .cart-total {
    direction: ltr;
    text-align: end;
    unicode-bidi: isolate;
}

/* ── 3. Text alignment: use logical values ────────────────────────── */
.body-rtl .text-left  { text-align: start !important; }
.body-rtl .text-right { text-align: end   !important; }

/* ── 4. Directional icons ─────────────────────────────────────────────
   Arrows/chevrons that mean "forward/back" must mirror. Icons that are
   not directional (search, cart, user, lock, play) must NOT. */
.body-rtl .fa-arrow-right,
.body-rtl .fa-arrow-left,
.body-rtl .fa-angle-right,
.body-rtl .fa-angle-left,
.body-rtl .fa-chevron-right,
.body-rtl .fa-chevron-left,
.body-rtl .fa-long-arrow-right,
.body-rtl .fa-long-arrow-left {
    transform: scaleX(-1);
}
/* never mirror these */
.body-rtl .logo-img,
.body-rtl .hq-foot-logo img,
.body-rtl .hq-pay-logo,
.body-rtl .fa-play,
.body-rtl .fa-search,
.body-rtl .fa-shopping-cart,
.body-rtl .fa-chevron-down,
.body-rtl .hq-caret {
    transform: none !important;
}

/* ── 5. Breadcrumbs ─────────────────────────────────────────────────── */
.body-rtl .breadcrumb { padding-inline-start: 0; }
.body-rtl .breadcrumb-item + .breadcrumb-item {
    padding-inline-start: .5rem;
    padding-right: 0;
}
.body-rtl .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-inline-end: .5rem;
    padding-left: 0;
}

/* ── 6. Forms: icon placement + input direction ──────────────────────── */
.body-rtl .input-group-prepend { margin-inline-end: -1px; margin-right: 0; }
.body-rtl .input-group-append  { margin-inline-start: -1px; margin-left: 0; }
.body-rtl .form-check,
.body-rtl .form-check-label { padding-inline-start: 1.25rem; padding-left: 0; }
.body-rtl .form-check-input { margin-inline-start: -1.25rem; margin-left: 0; }
.body-rtl select.form-control { background-position: left .75rem center; }
/* credentials stay LTR even inside an RTL form */
.body-rtl input[type="email"],
.body-rtl input[type="password"],
.body-rtl input[type="url"],
.body-rtl input[type="tel"],
.body-rtl input[name="domain"],
.body-rtl input[name="hqd"] {
    direction: ltr;
    text-align: start;
}

/* ── 7. Tables ──────────────────────────────────────────────────────── */
.body-rtl table th,
.body-rtl table td { text-align: start; }

/* ── 8. Utility bar / header ────────────────────────────────────────── */
.body-rtl .hq-utilbar > .container { flex-direction: row; }
.body-rtl .hq-login-pop { text-align: start; }
.body-rtl .hq-acct-item i,
.body-rtl .hq-mega-col a i { margin-inline-end: 0; }

/* ── 9. Alerts / modals / pagination ────────────────────────────────── */
.body-rtl .alert-dismissible { padding-inline-end: 4rem; padding-right: 1.25rem; }
.body-rtl .alert-dismissible .close { inset-inline-end: 0; right: auto; }
.body-rtl .modal-header .close { margin-inline-start: auto; margin-left: 0; }
.body-rtl .modal-footer > :not(:first-child) { margin-inline-start: .25rem; margin-left: 0; }
.body-rtl .pagination { padding-inline-start: 0; }

/* ── 10. Footer ─────────────────────────────────────────────────────── */
.body-rtl .hq-foot-col ul { padding-inline-start: 0; }
.body-rtl .hq-foot-contact li { text-align: start; }

/* ── 11. Motion preference ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .body-rtl * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}