/* ========================================
   RTL Overrides for Arabic Language
   الأولى العالمية للاستشارات والتدريب
   ======================================== */

/* === ROOT DIRECTION === */
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'Cairo', sans-serif;
}

/* === FLEXBOX REVERSALS === */
.rtl .top-bar-content,
.rtl .top-bar-left,
.rtl .top-bar-right,
.rtl .header-content,
.rtl .main-nav ul,
.rtl .cta-buttons,
.rtl .lang-switcher,
.rtl .btn {
  flex-direction: row-reverse;
}

/* === POSITIONING === */
.rtl .whatsapp-menu {
  left: auto;
  right: 0;
}

.rtl .dropdown-menu {
  left: auto;
  right: 0;
}

/* === MARGINS & PADDINGS === */
.rtl .top-bar i,
.rtl .btn i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.rtl .service-list-item i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.rtl .compliance-box li i {
  margin-right: 0;
  margin-left: 0.75rem;
}

.rtl .why-section li i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.rtl .contact-item h4 i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.rtl .service-scope ul {
  margin-left: 0;
  margin-right: var(--spacing-md);
}

.rtl .dropdown-menu {
  padding-left: 0;
  padding-right: var(--spacing-sm);
}

/* === BORDERS === */
.rtl .service-card {
  border-top: 4px solid transparent;
  border-right: none;
}

.rtl .service-list-item {
  border-left: none;
  border-right: 4px solid var(--primary-green);
}

.rtl .service-list-item:hover {
  transform: translateX(-5px);
}

.rtl .compliance-box {
  border-left: none;
  border-right: 6px solid var(--primary-blue);
}

.rtl .service-item-detailed {
  border-left: none;
  border-right: 4px solid var(--primary-blue);
}

/* === TEXT ALIGNMENT === */
.rtl .hero,
.rtl .section-title,
.rtl .cta-section,
.rtl .service-detail-header,
.rtl .footer-bottom {
  text-align: center;
}

.rtl .trust-item,
.rtl .industry-item {
  text-align: center;
}

/* === ARROWS & ICONS === */
.rtl .whatsapp-btn i:last-child {
  transform: rotate(180deg);
}

/* === HOVER EFFECTS === */
.rtl .footer-section a:hover {
  padding-left: 0;
  padding-right: 5px;
}

/* === SERVICE NUMBERS === */
.rtl .service-item-detailed h3 {
  flex-direction: row-reverse;
}

/* === FORM === */
.rtl .required {
  margin-left: 0;
  margin-right: 0.25rem;
}

/* === RESPONSIVE RTL === */
@media (max-width: 968px) {
  .rtl .main-nav a {
    text-align: right;
  }
  
  .rtl .dropdown-menu {
    padding-left: 0;
    padding-right: var(--spacing-md);
  }
}

/* === FONT OPTIMIZATION FOR ARABIC === */
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 {
  font-family: 'Tajawal', 'Cairo', sans-serif;
  font-weight: 700;
}

.rtl body {
  font-weight: 400;
}

.rtl .btn,
.rtl .main-nav a,
.rtl .whatsapp-btn {
  font-weight: 600;
}

/* ── RTL Header / Logo / Navigation fixes ─────────────────── */

/* Header: logo on RIGHT, nav on LEFT (RTL reading order) */
.rtl .header-content {
  flex-direction: row-reverse;   /* logo-area right, nav left   */
  gap: 1rem;
}

/* Logo area: keep image + text in normal LTR order internally  */
.rtl .logo-area {
  flex-direction: row !important;   /* image then text, left→right */
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Company name: tighter, no overflow into nav */
.rtl .company-name {
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: normal;
  max-width: 140px;
  text-align: right;
}

/* Nav: allow flex wrap on medium screens, right-align items */
.rtl .main-nav ul {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem 0.75rem;
}

/* Mobile RTL nav: slide from right */
@media (max-width: 968px) {
  .rtl .main-nav {
    right: 0;
    left: auto;
  }
  .rtl .company-name {
    max-width: 160px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL FIX v9 – Correct RTL Double-Reversal Bug
   ─────────────────────────────────────────────────────────────
   Problem: html[dir="rtl"] makes flex-direction:row flow RTL.
            Adding flex-direction:row-reverse on top = LTR again.
            This block corrects all affected containers.
   ─────────────────────────────────────────────────────────────
   Solution: Force flex-direction:row on all layout containers
             so the natural RTL direction (from html dir="rtl")
             handles ordering correctly.
   ═══════════════════════════════════════════════════════════════ */

/* Header & top-bar layout */
html[dir="rtl"] .header-content,
html[dir="rtl"] .top-bar-content,
html[dir="rtl"] .top-bar-left,
html[dir="rtl"] .top-bar-right,
html[dir="rtl"] .cta-buttons,
html[dir="rtl"] .lang-switcher {
  flex-direction: row !important;
}

/* Navigation: right-to-left order using row in RTL */
html[dir="rtl"] .main-nav ul {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem 0.5rem;
}

/* Logo area: image + text inline */
html[dir="rtl"] .logo-area {
  flex-direction: row !important;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Company name: keep right-aligned text in RTL */
html[dir="rtl"] .company-name {
  text-align: right;
  max-width: 150px;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: normal;
}

/* Arabic font for ALL AR pages (via html[dir="rtl"] instead of body.rtl) */
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
  font-family: 'Tajawal', 'Cairo', sans-serif;
  font-weight: 700;
}

html[dir="rtl"] .btn,
html[dir="rtl"] .main-nav a,
html[dir="rtl"] .whatsapp-btn {
  font-weight: 600;
}

/* Mobile nav: slide from right in RTL */
@media (max-width: 968px) {
  html[dir="rtl"] .main-nav {
    right: 0;
    left: auto;
  }
  html[dir="rtl"] .main-nav a {
    text-align: right;
  }
  html[dir="rtl"] .dropdown-menu {
    padding-left: 0;
    padding-right: var(--spacing-md);
  }
}