/* ═══════════════════════════════════════════════════
   RTL / LTR Directional Overrides
   Default markup is RTL (Persian). These rules correct
   directional decorations and flip them for LTR (English).
   Logical properties (inset-inline-*) handle most cases in
   style.css; this file covers the explicit exceptions.
   ═══════════════════════════════════════════════════ */

/* ───── Eyebrow line side ─────
   In RTL the line sits to the right of text (default flex order is fine
   because flex follows direction). In LTR it should sit to the left.
   With flex + gap this auto-flips, so no extra rule needed; kept here
   for clarity if order tweaks are required. */

/* ───── Steps connector gradient direction ─────
   RTL: numbers go right→left, so gradient flows right→left (default below).
   LTR: numbers go left→right, gradient should flow left→right. */
body:not(.en) .steps-line::before {
  background: linear-gradient(to left, var(--aurora), var(--sky));
}
body.en .steps-line::before {
  background: linear-gradient(to right, var(--sky), var(--aurora));
}

/* ───── Directional arrows (CTA / buttons / blog) ─────
   The arrow SVG points right. In RTL we mirror it so it points
   toward the reading direction (left). */
body:not(.en) .arrow-dir { transform: scaleX(-1); }
body.en .arrow-dir { transform: none; }

/* ───── Text alignment per direction ───── */
body:not(.en) { text-align: right; }
body.en { text-align: left; }

/* Form inputs follow direction */
body:not(.en) .cta-input,
body:not(.en) .cf-input,
body:not(.en) .cf-select,
body:not(.en) .cf-ta { text-align: right; }
body.en .cta-input,
body.en .cf-input,
body.en .cf-select,
body.en .cf-ta { text-align: left; }

/* Phone / email / latin values always LTR regardless of page dir */
.f-en[dir="ltr"], a[dir="ltr"] { direction: ltr; text-align: inherit; unicode-bidi: embed; }

/* ───── FAQ question text alignment ───── */
body:not(.en) .faq-q { text-align: right; }
body.en .faq-q { text-align: left; }

/* ───── Nav: in LTR, logo on left and links flow naturally;
   flex + direction handle this automatically. Mobile menu links
   align to start. ───── */
body:not(.en) .mob-menu a { text-align: right; }
body.en .mob-menu a { text-align: left; }

/* ───── Section headers ───── */
body:not(.en) .sh:not(.center) { text-align: right; }
body.en .sh:not(.center) { text-align: left; }

/* ───── Lightbox nav arrows keep physical positions (left=prev),
   independent of language for predictable UX. Already physical
   (left/right) in style.css. ───── */

/* ───── Floating buttons use logical inset props in style.css,
   so they swap sides automatically:
   - WhatsApp: inset-inline-end (right in RTL? No — end=left in RTL).
   To keep WhatsApp visually bottom-right ALWAYS, override to physical: */
#waBtn  { inset-inline-end: auto; inset-inline-start: auto; right: 28px; left: auto; }
#stbtn  { inset-inline-start: auto; inset-inline-end: auto; left: 28px; right: auto; }
/* In RTL these remain WhatsApp=right, scroll-top=left (conventional). */

/* ───── Gold badge / chips: gap-based, no flip needed ───── */

/* ───── Footer grid reflow: handled in responsive.css ───── */