/* Right-to-left support, applied only when an RTL market is served
   (html[dir="rtl"], set by conversion.js / legal-i18n.js). */

html[dir="rtl"] { direction: rtl; }

/* Arabic is cursive: any letter-spacing visually breaks the glyph joining.
   Webflow sets letter-spacing on dozens of element classes, so this has to be broad. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-feature-settings: normal;
}
html[dir="rtl"] .oobit-pay-badge *,
html[dir="rtl"] .oobit-networks * { letter-spacing: 0.02em !important; }

html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5 {
  letter-spacing: 0 !important;
}

/* The page font (Be Vietnam Pro) has no Arabic shaping tables, so Arabic
   renders as isolated letters. Force a real Arabic face everywhere, then put
   the brand wordmark back to the original face (it is Latin-only anyway). */
html[dir="rtl"],
html[dir="rtl"] * {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif !important;
}
html[dir="rtl"] .hero-h1-card,
html[dir="rtl"] .oobit-pay-badge,
html[dir="rtl"] .oobit-pay-badge *,
html[dir="rtl"] .oobit-networks,
html[dir="rtl"] .oobit-networks * {
  font-family: "Be Vietnam Pro", Inter, sans-serif !important;
}

html[dir="rtl"] body { text-align: right; line-height: 1.8; }

/* hero stays centred in every market */
html[dir="rtl"] .hero-h1-card,
html[dir="rtl"] .hero-sub-h1-card,
html[dir="rtl"] #oobit-cta-sub,
html[dir="rtl"] .oobit-band h3,
html[dir="rtl"] .oobit-secondary,
html[dir="rtl"] .oobit-manifesto { text-align: center; }

/* latin-only chrome must never flip */
html[dir="rtl"] .oobit-pay-badge,
html[dir="rtl"] .oobit-networks,
html[dir="rtl"] .hero-store-wrap,
html[dir="rtl"] .oobit-badges,
html[dir="rtl"] .oobit-qa {
  direction: ltr;
}

/* isolate latin brand names inside arabic runs so punctuation lands correctly */
html[dir="rtl"] a,
html[dir="rtl"] strong,
html[dir="rtl"] b,
html[dir="rtl"] span {
  unicode-bidi: isolate;
}
html[dir="rtl"] .oobit-cta span { unicode-bidi: plaintext; }

/* mirror the CTA icon */
html[dir="rtl"] .oobit-cta svg { transform: scaleX(-1); }

/* compliance footer + legal pages */
html[dir="rtl"] .oobit-legal .inner,
html[dir="rtl"] .oobit-legal .cols,
html[dir="rtl"] .oobit-legal p,
html[dir="rtl"] .oobit-legal h4 { text-align: right; }

html[dir="rtl"] .wrap,
html[dir="rtl"] .local-notice { text-align: right; }
html[dir="rtl"] .local-notice ul { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .updated,
html[dir="rtl"] .back { text-align: right; }

/* webflow content blocks that rely on left alignment */
html[dir="rtl"] .section-card-faq .w-dropdown,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .card-benefit,
html[dir="rtl"] .card-benefits-wrap,
html[dir="rtl"] .section-cards,
html[dir="rtl"] .footer-col { text-align: right; }

/* comparison table row labels */
html[dir="rtl"] .compare-row,
html[dir="rtl"] .compare-cell { text-align: right; }
html[dir="rtl"] td:first-child,
html[dir="rtl"] th:first-child { text-align: right; }

/* the marquee / logo slider is hidden in RTL markets, but if it is ever
   enabled keep the animation direction sane */
html[dir="rtl"] .section-slider { direction: ltr; }

/* nav dropdown panel */
html[dir="rtl"] .nav-drop-drawer { text-align: right; }
html[dir="rtl"] .nav-drop-link-lang[dir="rtl"] { direction: rtl; text-align: right; }