/* =============================================
   Fattorty - RTL (Arabic) Overrides
   ============================================= */

[dir="rtl"] {
  /* Typography adjustments */
  font-family: var(--font-arabic), 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

/* --- Navigation ---
   In a dir="rtl" document, flex containers naturally flow right-to-left,
   so no flex-direction overrides are needed. Adding row-reverse here
   would flip it back to LTR. */

/* --- Hero --- */
[dir="rtl"] .hero-content {
  direction: rtl;
}

[dir="rtl"] .hero-text {
  align-items: flex-start;
}

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

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

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

[dir="rtl"] .float-badge-1 {
  right: auto;
  left: 2%;
}

[dir="rtl"] .float-badge-2 {
  left: auto;
  right: 2%;
}

[dir="rtl"] .float-badge-3 {
  right: auto;
  left: 2%;
}

/* --- Features --- */
[dir="rtl"] .feature-card {
  direction: rtl;
}

/* --- Steps --- */
[dir="rtl"] .steps-container {
  direction: rtl;
}

[dir="rtl"] .step-connector svg {
  transform: scaleX(-1);
}

/* --- Pricing --- */
[dir="rtl"] .plan-feature {
  flex-direction: row-reverse;
}

[dir="rtl"] .pricing-table th,
[dir="rtl"] .pricing-table td {
  text-align: end;
}

[dir="rtl"] .pricing-table th:not(:first-child),
[dir="rtl"] .pricing-table td:not(:first-child) {
  text-align: center;
}

/* --- Download --- */
[dir="rtl"] .download-content {
  direction: rtl;
}

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

[dir="rtl"] .web-app-link {
  flex-direction: row-reverse;
}

[dir="rtl"] .web-app-link svg {
  transform: scaleX(-1);
}

/* --- FAQ ---
   Natural RTL + justify-content: space-between already places the
   text at the start (right) and chevron at the end (left). No
   flex-direction override needed. */

/* --- Footer ---
   In dir="rtl" the grid, flex rows, and columns already flow right-to-left
   naturally. No flex-direction overrides or align-items flips needed —
   those would force the layout back to LTR. */

/* --- Legal Pages --- */
[dir="rtl"] .legal-content {
  direction: rtl;
}

[dir="rtl"] .legal-content ul {
  padding-left: 0;
  padding-right: var(--space-6);
}

/* --- Mobile menu --- */
[dir="rtl"] .mobile-menu {
  direction: rtl;
}

/* --- Section Header --- */
[dir="rtl"] .section-header {
  direction: rtl;
}

/* --- Buttons --- */
[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

/* Fix btn arrow in RTL */
[dir="rtl"] .btn svg:last-child {
  transform: scaleX(-1);
}

/* --- Headings letter-spacing fix for Arabic --- */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  letter-spacing: 0;
}

/* --- Arabic font size tweaks --- */
[dir="rtl"] .hero-text h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.3;
}

[dir="rtl"] .plan-price .price-amount {
  font-family: var(--font-primary);
}

[dir="rtl"] .hero-stat .value {
  font-family: var(--font-primary);
}

/* --- Nav links RTL --- */
[dir="rtl"] .nav-links a.active::after {
  left: var(--space-3);
  right: var(--space-3);
}

/* --- Step number badge --- */
[dir="rtl"] .step-num {
  right: auto;
  left: -6px;
}

/* --- Scroll Progress from right in RTL --- */
[dir="rtl"] .scroll-progress {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, var(--primary), var(--primary-light));
}

/* --- Download visual alignment --- */
@media (max-width: 1024px) {
  [dir="rtl"] .hero-text {
    align-items: center;
  }

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

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

  [dir="rtl"] .footer-brand {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  [dir="rtl"] .footer-bottom {
    flex-direction: column;
  }

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

  [dir="rtl"] .store-badges {
    align-items: center;
  }
}