/* =========================================================
   ARABIC / RTL
   Keep the visual composition identical to English.
   Only Arabic content flows RTL.
========================================================= */

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

html[dir="rtl"] .hero-layout,
html[dir="rtl"] .intro-grid,
html[dir="rtl"] .ai-generation-layout,
html[dir="rtl"] .workspace-layout,
html[dir="rtl"] .preview-layout,
html[dir="rtl"] .learning-layout,
html[dir="rtl"] .features-grid,
html[dir="rtl"] .steps,
html[dir="rtl"] .tutor-grid {
  direction: ltr;
}

/* HERO */

html[dir="rtl"] .hero-content {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .hero-eyebrow {
  direction: rtl;
}

html[dir="rtl"] .hero-subtitle {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .hero-actions {
  direction: rtl;
}

html[dir="rtl"] .hero-visual,
html[dir="rtl"] .phones,
html[dir="rtl"] .phone-1,
html[dir="rtl"] .phone-2 {
  direction: ltr;
}

/* SECTION TEXT */

html[dir="rtl"] .section-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-description {
  direction: rtl;
  text-align: right;
}

/* INTRO */

html[dir="rtl"] .intro-copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .intro-points {
  direction: ltr;
}

html[dir="rtl"] .intro-point {
  direction: rtl;
  text-align: right;
}

/* FEATURES */

html[dir="rtl"] .feature-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .feature-link {
  direction: rtl;
}

/* AI GENERATION */

html[dir="rtl"] .ai-generation-copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .ai-generation-image {
  direction: ltr;
}

/* WORKSPACE */

html[dir="rtl"] .workspace-copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .workspace-image {
  direction: ltr;
}

/* STEPS */

html[dir="rtl"] .step {
  direction: rtl;
  text-align: right;
}

/* PREVIEW */

html[dir="rtl"] .preview-image {
  direction: ltr;
}

html[dir="rtl"] .preview-copy {
  direction: rtl;
  text-align: right;
}

/* LEARNING */

html[dir="rtl"] .learning-box {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .learning-image {
  direction: ltr;
}

/* TUTOR */

html[dir="rtl"] .tutor-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .tutor-list {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .tutor-list span::before {
  content: "←";
}

/* FAQ */

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

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

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

html[dir="rtl"] .faq-icon {
  direction: ltr;
}

/* CTA */

html[dir="rtl"] .cta-box {
  direction: rtl;
  text-align: center;
}

/* NAV */

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

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

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

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

/* FOOTER */

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

html[dir="rtl"] .footer-top {
  direction: ltr;
}

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

html[dir="rtl"] .footer-bottom {
  direction: ltr;
}

html[dir="rtl"] .footer-bottom span {
  direction: rtl;
}

/* BUTTONS */

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

/* MOBILE */

@media (max-width: 960px) {

  html[dir="rtl"] .hero-layout {
    direction: ltr;
  }

  html[dir="rtl"] .hero-content {
    direction: rtl;
    text-align: center;
  }

  html[dir="rtl"] .hero-eyebrow {
    direction: rtl;
    justify-content: center;
  }

  html[dir="rtl"] .hero-subtitle {
    direction: rtl;
    text-align: center;
  }

  html[dir="rtl"] .hero-actions {
    direction: rtl;
    justify-content: center;
  }

  html[dir="rtl"] .intro-grid,
  html[dir="rtl"] .ai-generation-layout,
  html[dir="rtl"] .workspace-layout,
  html[dir="rtl"] .preview-layout,
  html[dir="rtl"] .learning-layout {
    direction: ltr;
  }

  html[dir="rtl"] .intro-copy,
  html[dir="rtl"] .ai-generation-copy,
  html[dir="rtl"] .workspace-copy,
  html[dir="rtl"] .preview-copy,
  html[dir="rtl"] .learning-box {
    direction: rtl;
    text-align: right;
  }

  html[dir="rtl"] .intro-points,
  html[dir="rtl"] .ai-generation-image,
  html[dir="rtl"] .workspace-image,
  html[dir="rtl"] .preview-image,
  html[dir="rtl"] .learning-image {
    direction: ltr;
  }

}

@media (max-width: 600px) {

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

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

  html[dir="rtl"] .hero-actions {
    direction: rtl;
  }

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

}