/* Arabic RTL layout overrides */
html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
}

/* Keep logo mark + wordmark LTR brand reading; do not mirror */
html[dir="rtl"] .logo-brand,
html[dir="rtl"] .logo-mark,
html[dir="rtl"] .logo-text {
  direction: ltr;
  unicode-bidi: isolate;
  transform: none !important;
}

/* Document dir=rtl already places logo at inline-start and flows links beside it.
   Do not row-reverse the nav — that pushed the whole menu to the far edge. */
html[dir="rtl"] .nav {
  flex-direction: row;
}

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

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

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-badges,
html[dir="rtl"] .hero-stats,
html[dir="rtl"] .cta-actions,
html[dir="rtl"] .trust-actions,
html[dir="rtl"] .product-ctas {
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .section-header,
html[dir="rtl"] .page-hero-content {
  text-align: right;
}

html[dir="rtl"] .hero-copy .hero-actions,
html[dir="rtl"] .hero-pillars-list {
  justify-content: flex-start;
}

html[dir="rtl"] .checklist li {
  padding-left: 0;
  padding-right: 1.4rem;
}

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

html[dir="rtl"] .section-header {
  margin-inline: 0 auto 0 0;
}

html[dir="rtl"] .service-card ul,
html[dir="rtl"] .feature-list,
html[dir="rtl"] .checklist {
  padding-right: 1.1rem;
  padding-left: 0;
}

html[dir="rtl"] .service-card ul li::before,
html[dir="rtl"] .checklist li::before {
  right: -1.1rem;
  left: auto;
}

html[dir="rtl"] .process-steps {
  direction: rtl;
}

html[dir="rtl"] .footer-grid,
html[dir="rtl"] .form-row,
html[dir="rtl"] .contact-layout,
html[dir="rtl"] .product-split,
html[dir="rtl"] .feature-row {
  direction: rtl;
}

/* Keep EN | AR order readable left-to-right */
html[dir="rtl"] .lang-switch {
  flex-direction: row;
  direction: ltr;
}

html[dir="rtl"] .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  text-align: right;
}

html[dir="rtl"] .device-phone {
  right: auto;
  left: 4%;
}

html[dir="rtl"] .preview-badge {
  left: auto;
  right: 10px;
}

html[dir="rtl"] .whatsapp-float {
  left: 24px;
  right: auto;
}

html[dir="rtl"] .form-select {
  background-position: left 14px center;
}

@media (max-width: 1024px) {
  html[dir="rtl"] .nav-links {
    flex-direction: column;
    align-items: stretch;
    text-align: right;
  }

  html[dir="rtl"] .nav-actions .lang-switch {
    align-self: stretch;
  }
}

@media (max-width: 900px) {
  html[dir="rtl"] .device-phone {
    left: auto;
    right: auto;
  }
}