/* ═══════════════════════════════════════════════════
   SGS PRO — RTL (Arabic) Stylesheet
   Applied when dir="rtl" (lang=ar)
   ═══════════════════════════════════════════════════ */

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

/* ── Topbar ── */
[dir="rtl"] .topbar-left  { flex-direction: row-reverse }
[dir="rtl"] .topbar-right { flex-direction: row-reverse }

/* ── Header nav: direction:rtl naturally orders items right-to-left
   HTML order: logo → langDropMob → nav-menu → nav-cta → toggle
   RTL visual order (right→left): logo | langSwitch | menu | CTA | toggle ── */
[dir="rtl"] .nav-inner {
  flex-direction: row;
  direction: rtl;
}
[dir="rtl"] .nav-logo   { order: unset }
[dir="rtl"] #langDropMob{ order: unset }
[dir="rtl"] .nav-menu   { flex-direction: row-reverse; direction: rtl; order: unset }
[dir="rtl"] .nav-cta    { order: unset }
[dir="rtl"] .nav-toggle { order: unset }

/* ── lang-drop menu position fix in RTL ── */
[dir="rtl"] .lang-drop-menu { right: auto; left: 0 }
[dir="rtl"] #langMenuMob    { right: 0; left: auto }

/* ── Footer ── */
[dir="rtl"] .footer-links a:hover { padding-left: 0; padding-right: 4px }
[dir="rtl"] .footer-grid   { direction: rtl }
[dir="rtl"] .footer-links  { direction: rtl }

/* ── Section labels ── */
[dir="rtl"] .sec-label    { flex-direction: row-reverse }
[dir="rtl"] .gold-bar     { margin-right: 0 }
[dir="rtl"] .sec-center .sec-label { justify-content: center }

/* ── Hero ── */
[dir="rtl"] .hero-content  { text-align: right }
[dir="rtl"] .hero-btns     { flex-direction: row-reverse }
[dir="rtl"] .hero-features { flex-direction: row-reverse }

/* ── About ── */
[dir="rtl"] .about-grid  { direction: rtl }
[dir="rtl"] .about-ctas  { flex-direction: row-reverse }

/* ── Services ── */
[dir="rtl"] .svc-card-badge { left: auto; right: 16px }
[dir="rtl"] .svc-feat i     { margin-left: 0; margin-right: 0 }

/* ── Why choose us ── */
[dir="rtl"] .why-grid { direction: rtl }

/* ── Contact ── */
[dir="rtl"] .contact-grid        { direction: rtl }
[dir="rtl"] .form-group label    { text-align: right }

/* ── FAQ ── */
[dir="rtl"] .faq-grid { direction: rtl }
[dir="rtl"] .faq-q    { flex-direction: row-reverse }

/* ── Process ── */
[dir="rtl"] .proc-step    { flex-direction: row-reverse; text-align: right }
[dir="rtl"] .process-grid { direction: rtl }

/* ── Values ── */
[dir="rtl"] .values-grid { direction: rtl }

/* ── Testimonials ── */
/* Force the slider track/viewport to lay out items LTR so the JS
   translateX(-current*step) math (written for left-to-right item order)
   lines up with the actual card positions — otherwise dir="rtl" makes
   the browser flex-order cards right-to-left and the slider only ever
   shows card 1, with the rest sliding off-screen into blank space. */
[dir="rtl"] .testi-slider-viewport,
[dir="rtl"] .testi-slider-track { direction: ltr }
[dir="rtl"] .testi-card         { direction: rtl; text-align: right }
[dir="rtl"] .testi-author { flex-direction: row-reverse }
[dir="rtl"] .testi-stars  { direction: rtl }

/* ── WhatsApp float ── */
[dir="rtl"] .wa-float { right: auto; left: 28px }

/* ── Phone/email keep LTR ── */
a[href^="tel"],
a[href^="mailto"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Mobile RTL ── */
@media (max-width: 900px) {
  [dir="rtl"] .nav-inner {
    flex-direction: row;
    direction: rtl;
  }
  [dir="rtl"] .nav-menu {
    flex-direction: column;
    align-items: stretch;
    direction: rtl;
  }
  [dir="rtl"] .nav-menu li a {
    width: 100%;
    display: block;
  }
  [dir="rtl"] #langMenuMob { right: 0; left: auto }
}