/* ══════════════════════════════════════════════════════════════
   RTL OVERRIDES — loaded only when is_rtl() (Arabic pages)
   Mirrors layout for right-to-left reading. Most flexbox/grid
   layouts in main.css auto-mirror under dir="rtl" — this file
   only overrides things that don't flip automatically: fixed-
   position widgets, explicit left/right values, and inline
   text-align/margin declarations baked into the templates.
   ══════════════════════════════════════════════════════════════ */

body[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Inter', sans-serif;
}
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3,
body[dir="rtl"] h4, body[dir="rtl"] h5, body[dir="rtl"] h6 {
  font-family: 'Cairo', sans-serif;
}

/* Nav divider between logo and tagline sits on the wrong side once mirrored */
body[dir="rtl"] .nav-logo-tagline {
  padding-left: 0;
  border-left: none;
  padding-right: 12px;
  border-right: 1px solid var(--border2);
}

/* Fixed floating widgets — swap sides so they don't collide */
body[dir="rtl"] .wa-btn { right: auto; left: 28px; }
body[dir="rtl"] .wa-popup { right: auto; left: 28px; }
body[dir="rtl"] .wa-popup-close { right: auto; left: 14px; }
body[dir="rtl"] .chatbot-wrap { left: auto; right: 28px; }
body[dir="rtl"] .chatbot-badge { right: auto; left: -3px; }
@media (max-width: 768px) {
  body[dir="rtl"] .wa-btn { left: 16px; }
  body[dir="rtl"] .wa-popup { left: 16px; }
  body[dir="rtl"] .chatbot-wrap { right: 16px; }
}

/* Generic safety net: this theme sets alignment/spacing via inline
   style="" attributes throughout the templates. Flip the common ones
   so RTL pages aren't left visually broken on inline-styled sections. */
body[dir="rtl"] [style*="text-align:left"]   { text-align: right !important; }
body[dir="rtl"] [style*="text-align: left"]  { text-align: right !important; }
body[dir="rtl"] [style*="text-align:right"]  { text-align: left !important; }
body[dir="rtl"] [style*="text-align: right"] { text-align: left !important; }

/* Form fields and chat input should also read right-to-left */
body[dir="rtl"] input,
body[dir="rtl"] textarea,
body[dir="rtl"] select {
  text-align: right;
}

/* FAQ question text is hard-coded text-align:left in main.css (doesn't
   auto-flip like flex ordering does) */
body[dir="rtl"] .faq-q { text-align: right; }

/* Phone numbers must stay LTR even inside RTL text — otherwise the "+"
   prefix and digit grouping can render in the wrong order/position */
body[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Multi-step contact form: the connector line between step circles is
   built with physical left/right offsets in main.css, which don't
   auto-mirror under RTL — it needs to extend toward the PREVIOUS step
   visually (now on the right) instead of the next one. */
body[dir="rtl"] .mform-step-wrap:not(:last-child)::after {
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
}
@media (max-width: 768px) {
  body[dir="rtl"] .mform-step-wrap:not(:last-child)::after {
    left: calc(-50% + 15px);
    right: calc(50% + 15px);
  }
}