/* ============================================================
   SpyHuman RTL overrides — loaded ONLY on /ar/ pages (Arabic).
   Scoped under [dir="rtl"] so it is inert if ever loaded elsewhere.
   The theme is Bootstrap 5 (logical utilities ms-/me-/ps-/pe-/text-start/
   text-end auto-flip). These rules fix the global flow + the custom,
   non-logical pieces (explicit left/right, floats, the .sh- design system,
   header/footer, breadcrumb, check-lists, language switcher, mobile CTA).
   Tuned blind — visual-QA on deploy and refine as needed.
   ============================================================ */

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

/* Generic flow: let inline content follow RTL, keep media/icons sane */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .lead,
[dir="rtl"] blockquote { text-align: right; }

/* Lists: bullets/numbers on the right */
[dir="rtl"] ul,
[dir="rtl"] ol { padding-right: 1.2rem; padding-left: 0; }

/* Keep latin brand tokens / emails / code LTR inside RTL text */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] code,
[dir="rtl"] .box-link { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Header / main menu ---------- */
[dir="rtl"] .main-menu ul { padding-right: 0; }
[dir="rtl"] .main-menu ul li { float: right; }
[dir="rtl"] .header-button { margin-right: auto; margin-left: 0; }
[dir="rtl"] .ot-btn i,
[dir="rtl"] .ot-btn .far { transform: scaleX(-1); } /* arrows point the RTL way */

/* ---------- Mobile menu ---------- */
[dir="rtl"] .ot-mobile-menu ul { padding-right: 0; }
[dir="rtl"] .ot-mobile-menu ul li { text-align: right; }

/* ---------- Breadcrumb ---------- */
[dir="rtl"] .breadcumb-menu { padding-right: 0; }
[dir="rtl"] .breadcumb-menu li { float: right; }
[dir="rtl"] .breadcumb-menu li::after { margin: 0 8px 0 10px; } /* separator spacing */

/* ---------- Check-lists (icon sits before the text) ---------- */
[dir="rtl"] .check-list ul { padding-right: 0; }
[dir="rtl"] .check-list ul li { padding-right: 30px; padding-left: 0; }
[dir="rtl"] .check-list ul li i,
[dir="rtl"] .check-list ul li .fas { right: 0; left: auto; }

/* ---------- Design-system (.sh-) components ---------- */
[dir="rtl"] .sh-hero,
[dir="rtl"] .sh-cards,
[dir="rtl"] .sh-related__grid { direction: rtl; }
[dir="rtl"] .sh-card,
[dir="rtl"] .sh-hero__copy,
[dir="rtl"] .sh-related__card,
[dir="rtl"] .sh-trigger,
[dir="rtl"] .wt-cta-bar,
[dir="rtl"] .wt-android-note,
[dir="rtl"] .wt-guarantee { text-align: right; }
[dir="rtl"] .wt-android-note { border-left: none; border-right: 3px solid #e6a23c; border-radius: 8px 0 0 8px; }
[dir="rtl"] .sh-cta i,
[dir="rtl"] .wt-dl-btn i,
[dir="rtl"] .wt-reg-btn i { margin-left: 6px; margin-right: 0; }

/* ---------- Sidebar widgets ---------- */
[dir="rtl"] .widget_categories ul,
[dir="rtl"] .widget_nav_menu ul.menu { padding-right: 0; }

/* ---------- Language switcher (sh-langnav) ---------- */
[dir="rtl"] .sh-langnav__menu { right: auto; left: 0; text-align: right; }
[dir="rtl"] .sh-langnav__btn .sh-langnav__caret { margin-right: 4px; margin-left: 0; }

/* ---------- Footer ---------- */
[dir="rtl"] .footer-widget,
[dir="rtl"] .ot-widget-about,
[dir="rtl"] .ot-widget-contact,
[dir="rtl"] .copyright-text,
[dir="rtl"] .footer-links { text-align: right; }
[dir="rtl"] .footer-links ul { padding-right: 0; }
[dir="rtl"] .footer-links li { display: inline-block; }
[dir="rtl"] .ot-widget-contact .info-box { flex-direction: row-reverse; }
[dir="rtl"] .ot-widget-contact .box-icon { margin-left: 12px; margin-right: 0; }

/* ---------- Mobile sticky CTA ---------- */
[dir="rtl"] .sh-mobicta { direction: rtl; }

/* ---------- Tables (compare grids) ---------- */
[dir="rtl"] .wt-compare th,
[dir="rtl"] .wt-compare td { text-align: right; }

/* ---------- Scroll-to-top stays on the left in RTL ---------- */
[dir="rtl"] .scroll-top { right: auto; left: 30px; }