/**
 * RTL layout overrides (Arabic, Hebrew, Persian, Urdu, Yiddish).
 * Loaded only when html[dir="rtl"] / body.is-rtl.
 */

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

html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", var(--font-body);
  text-align: right;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .device-label,
html[dir="rtl"] .section-label {
  font-family: "Noto Sans Arabic", var(--font-display);
}

html[dir="rtl"] .nav-inner {
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-cta {
  flex-direction: row-reverse;
}

html[dir="rtl"] .brand {
  flex-direction: row-reverse;
}

@media (min-width: 900px) {
  html[dir="rtl"] .hero-grid {
    text-align: right;
  }
}

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .store-buttons,
html[dir="rtl"] .use-cases,
html[dir="rtl"] .mobile-nav {
  direction: rtl;
}

html[dir="rtl"] .section-head {
  text-align: center;
}

html[dir="rtl"] .compare-table th,
html[dir="rtl"] .compare-table td {
  text-align: right;
}

html[dir="rtl"] .compare-wrap {
  direction: rtl;
}

html[dir="rtl"] .premium-list li {
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .premium-list li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .faq-item summary {
  text-align: right;
}

html[dir="rtl"] .faq-item .answer {
  text-align: right;
}

@media (min-width: 900px) {
  html[dir="rtl"] .premium-box {
    direction: rtl;
  }

  html[dir="rtl"] .premium-cta-wrap {
    align-items: flex-start;
  }
}

html[dir="rtl"] .benefit-card,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .step-card,
html[dir="rtl"] .wa-post-card {
  text-align: right;
}

html[dir="rtl"] .screenshot-scroll {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .footer-grid,
html[dir="rtl"] .footer-links {
  text-align: right;
}

html[dir="rtl"] .mobile-cta-bar .container {
  flex-direction: row-reverse;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}