/* ==========================================================================
   RTL overrides for Arabic and other RTL languages
   Most styles use CSS logical properties, so overrides are minimal.
   ========================================================================== */

/* ---------- Hero phone stack: mirror the fan direction ---------- */
[dir="rtl"] .hero__phone--back {
  transform: rotate(8deg) translateX(60px);
}

[dir="rtl"] .hero__phone--front {
  transform: rotate(-8deg) translateX(-60px);
}

/* ---------- Mobile nav: slide from left instead of right ---------- */
[dir="rtl"] .mobile-nav {
  right: auto;
  left: -100%;
}

[dir="rtl"] header.nav-open .mobile-nav {
  left: 0;
  right: auto;
}

[dir="rtl"] .mobile-nav {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 960px) {
  [dir="rtl"] .mobile-nav {
    right: auto;
    left: -100%;
  }

  [dir="rtl"] header.nav-open .mobile-nav {
    left: 0;
    right: auto;
  }
}

/* ---------- Responsive: Mobile (<640px) ---------- */
@media (max-width: 639px) {
  [dir="rtl"] .hero__phone--back {
    transform: rotate(6deg) translateX(40px);
  }

  [dir="rtl"] .hero__phone--front {
    transform: rotate(-6deg) translateX(-40px);
  }
}

/* ---------- Desktop nav: restore static positioning ---------- */
@media (min-width: 960px) {
  [dir="rtl"] .mobile-nav {
    left: auto;
    right: auto;
    position: static;
  }
}