/* RTL (Right-to-Left) Styles for Arabic */
/* Uses [lang="ar"] since pages use dir="ltr" for proper animation behavior */

/* Base Arabic styling - apply RTL text direction within LTR layout */
[lang="ar"] {
  text-align: right;
}

/* Arabic text containers should read RTL */
[lang="ar"] p,
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
[lang="ar"] span:not(.ltr-content),
[lang="ar"] li {
  direction: rtl;
}

/* Navigation */
[lang="ar"] .nav .app-container {
  flex-direction: row-reverse;
}

[lang="ar"] .nav .flex.items-center.gap-4,
[lang="ar"] .nav .flex.items-center.gap-16 {
  flex-direction: row-reverse;
}

/* Burger Menu */
[lang="ar"] .burger-btn {
  margin-left: 0;
  margin-right: 1rem;
}

/* Hero Text Sections - reverse for proper RTL layout */
[lang="ar"] .text .side-element {
  flex-direction: row-reverse;
}

[lang="ar"] .text .side-element .first {
  text-align: left;
  padding-left: 0;
  padding-right: 1.25rem; /* pr-5 */
}

[lang="ar"] .text .side-element .second {
  text-align: right;
  padding-right: 0;
  padding-left: 1.25rem; /* pl-5 */
}

@media (min-width: 640px) {
  [lang="ar"] .text .side-element .first {
    padding-right: 4rem; /* sm:pr-16 */
  }
  [lang="ar"] .text .side-element .second {
    padding-left: 4rem; /* sm:pl-16 */
  }
}

@media (min-width: 1024px) {
  [lang="ar"] .text .side-element .first {
    padding-right: 9rem; /* lg:pr-36 */
  }
  [lang="ar"] .text .side-element .second {
    padding-left: 9rem; /* lg:pl-36 */
  }
}

/* Brands Section */
[lang="ar"] .brands {
  direction: ltr; /* Keep brands flowing left to right */
}

/* Contact Card */
[lang="ar"] .contact-card {
  flex-direction: row-reverse;
}

/* Footer */
[lang="ar"] .footer .flex.justify-between {
  flex-direction: row-reverse;
}

[lang="ar"] .flex.gap-2.mt-6 {
  flex-direction: row-reverse;
}

[lang="ar"] .text-right {
  text-align: left;
}

/* Accordion */
[lang="ar"] .accordion .title {
  flex-direction: row-reverse;
}

/* Testimonials */
[lang="ar"] .testimonials .flex.items-center.gap-4,
[lang="ar"] .testimonials .flex.items-center.gap-9 {
  flex-direction: row-reverse;
}

/* Modal */
[lang="ar"] .modal-content .flex {
  flex-direction: row-reverse;
}

[lang="ar"] .form_contact_lg {
  flex-direction: row-reverse;
}

/* Social Icons */
[lang="ar"] .social-icon {
  direction: ltr; /* Keep icons in normal order */
}

/* Locations Scroll */
[lang="ar"] .locations {
  direction: ltr; /* Keep location names in English */
}

/* Industries */
[lang="ar"] .industries .details {
  text-align: right;
}

/* Founders Section */
[lang="ar"] .founders .flex.gap-12 {
  flex-direction: row-reverse;
}

/* Language Switcher */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 0.875rem;
}

.language-switcher a {
  padding: 0.25rem 0.5rem;
  border-radius: 15px;
  transition: all 0.3s;
}

.language-switcher a.active {
  background-color: #8BC34A;
  color: white;
}

.language-switcher a:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Arabic Font Support */
[lang="ar"] body {
  font-family: 'Noto Sans Arabic', 'Neue Montreal', sans-serif;
}

[lang="ar"] .font-playfair {
  font-family: 'Noto Naskh Arabic', 'Playfair Display', serif;
}

/* Force LTR for English content on Arabic pages */
[lang="ar"] .ltr-content,
[lang="ar"] a[href^="tel:"],
[lang="ar"] a[href^="mailto:"],
[lang="ar"] .email-text,
[lang="ar"] .phone-text,
[lang="ar"] .company-name {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
  display: inline-block;
}

/* Testimonial Cards Stack */
[lang="ar"] #testimonial-2 {
  left: auto;
  right: 1.5rem;
}

[lang="ar"] #testimonial-3 {
  left: auto;
  right: 3rem;
}

@media (max-width: 640px) {
  [lang="ar"] #testimonial-2 {
    right: 1.5rem;
  }
  [lang="ar"] #testimonial-3 {
    right: 3rem;
  }
}

/* Work Section */
[lang="ar"] .works .details > div {
  margin-right: 0;
  margin-left: auto;
}

[lang="ar"] .works .details > div:nth-child(2) {
  float: left;
}