/* ============================================================
   Hilel Solutions — RTL Safety Helpers v1.0
   Use as opt-in classes for RTL-correct behavior.
   Usage: <link rel="stylesheet" href="../_shared/css/rtl-helpers.css">
   ============================================================ */

/* ----- 1. SVG arrows that auto-flip in RTL -----
   Apply class .icon-rtl-flip to arrow SVGs that point left in source.
   <svg class="icon-rtl-flip">...</svg> */
[dir="rtl"] .icon-rtl-flip,
html[dir="rtl"] .icon-rtl-flip {
  transform: scaleX(-1);
}

/* ----- 2. Logical-property gradients (auto-flip with text direction) -----
   Replace: linear-gradient(135deg, ...) with class .gradient-inline
   Define gradient via CSS vars: --grad-from, --grad-to */
.gradient-inline {
  background: linear-gradient(to right, var(--grad-from), var(--grad-to));
}
[dir="rtl"] .gradient-inline,
html[dir="rtl"] .gradient-inline {
  background: linear-gradient(to left, var(--grad-from), var(--grad-to));
}

/* Same for text gradients with -webkit-background-clip: text */
.gradient-text-inline {
  background: linear-gradient(to right, var(--grad-from), var(--grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[dir="rtl"] .gradient-text-inline,
html[dir="rtl"] .gradient-text-inline {
  background: linear-gradient(to left, var(--grad-from), var(--grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- 3. Fix flex order in navbars for RTL -----
   Apply .flex-rtl-reverse to fix LTR-source flex containers in RTL pages.
   Most browsers already handle this via dir="rtl" on parent, but some
   computed styles get stuck. Use as a safety net. */
[dir="rtl"] .flex-rtl-reverse,
html[dir="rtl"] .flex-rtl-reverse {
  flex-direction: row-reverse;
}

/* ----- 4. Inline padding/margin shortcuts (logical properties)
   Drop-in replacement for left/right that auto-flips RTL. */
.pis-2 { padding-inline-start: 8px; }
.pis-4 { padding-inline-start: 16px; }
.pis-6 { padding-inline-start: 24px; }
.pie-2 { padding-inline-end: 8px; }
.pie-4 { padding-inline-end: 16px; }
.pie-6 { padding-inline-end: 24px; }
.mis-2 { margin-inline-start: 8px; }
.mis-4 { margin-inline-start: 16px; }
.mie-2 { margin-inline-end: 8px; }
.mie-4 { margin-inline-end: 16px; }

/* ----- 5. LTR islands inside RTL pages -----
   For phone numbers, emails, code, URLs — keep them LTR. */
.ltr-island {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}