/* Dedicated RTL alignment layer for Arabic mode */

html[dir="rtl"] body {
  font-family: "Tajawal", "Montserrat", sans-serif;
}

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

html[dir="rtl"] .main-nav {
  margin-left: 9rem;
}

html[dir="rtl"] .main-nav a {
  text-align: right;
}

html[dir="rtl"] .main-nav a::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

html[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .timeline-card h3,
html[dir="rtl"] .timeline-card p {
  text-align: right;
}

/* Keep timeline geometry identical to English so center line and dots stay synchronized */
html[dir="rtl"] .timeline {
  direction: ltr;
}

html[dir="rtl"] .timeline-card {
  direction: rtl;
}

/* Match Next.js: previous button on right, next button on left in RTL */
html[dir="rtl"] .carousel-prev {
  left: auto;
  right: 10px;
}

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

/* Flip arrow icons to face the correct direction in RTL */
html[dir="rtl"] .carousel-prev svg,
html[dir="rtl"] .carousel-next svg {
  transform: scaleX(-1);
}

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

html[dir="rtl"] .company-meta {
  direction: rtl;
}

html[dir="rtl"] .child-product-link::after {
  content: "<";
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  margin-left: 0;
  margin-right: 8px;
  line-height: 1;
}

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

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

html[dir="rtl"] .footer-brand p {
  margin-left: 0;
}

html[dir="rtl"] .footer-links a {
  flex-direction: row;
  justify-content: flex-end;
}

html[dir="rtl"] .social-row {
  justify-content: flex-end;
}

html[dir="rtl"] .back-to-top {
  right: auto;
  left: 24px;
}

@media (max-width: 992px) {
  html[dir="rtl"] .main-nav {
    margin-left: 0;
  }

  html[dir="rtl"] .mobile-nav {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }

  html[dir="rtl"] .mobile-nav-head {
    justify-content: flex-start;
  }

  html[dir="rtl"] .mobile-nav a {
    text-align: right;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .footer-brand,
  html[dir="rtl"] .footer-links,
  html[dir="rtl"] .footer-social {
    justify-self: stretch;
  }

  html[dir="rtl"] .back-to-top {
    right: auto;
    left: 16px;
  }
}