/**
 * RTL/LTR CSS Variables and Utilities
 * Add this to your main stylesheet
 */

:root {
  /* RTL/LTR Spacing Utilities */
  --space-inset-start: 0;
  --space-inset-end: 0;
  --margin-start: 0;
  --margin-end: 0;
  --padding-start: 0;
  --padding-end: 0;
}

/* LTR Direction (Default) */
body:not(.rtl) {
  --space-inset-start: left;
  --space-inset-end: right;
}

/* RTL Direction */
body.rtl {
  --space-inset-start: right;
  --space-inset-end: left;
  direction: rtl;
}

/* RTL Responsive Grid */
@supports (gap: 1rem) {
  body.rtl .grid-2,
  body.rtl .grid-3,
  body.rtl .row2 {
    direction: rtl;
  }
}

/* RTL Flexbox */
body.rtl .flex,
body.rtl [style*="display: flex"] {
  direction: rtl;
}

/* RTL Text Alignment */
body.rtl .text-start {
  text-align: right;
}

body.rtl .text-end {
  text-align: left;
}

/* RTL Borders */
body.rtl .border-start {
  border-right: var(--border-width) solid var(--border);
  border-left: none;
}

body.rtl .border-end {
  border-left: var(--border-width) solid var(--border);
  border-right: none;
}

/* RTL Transforms */
body.rtl .flip-h {
  transform: scaleX(-1);
}

/* RTL Spacing */
body.rtl .ps-1 { padding-right: 0.25rem; padding-left: 0; }
body.rtl .ps-2 { padding-right: 0.5rem; padding-left: 0; }
body.rtl .ps-3 { padding-right: 1rem; padding-left: 0; }
body.rtl .pe-1 { padding-left: 0.25rem; padding-right: 0; }
body.rtl .pe-2 { padding-left: 0.5rem; padding-right: 0; }
body.rtl .pe-3 { padding-left: 1rem; padding-right: 0; }

body.rtl .ms-1 { margin-right: 0.25rem; margin-left: auto; }
body.rtl .ms-2 { margin-right: 0.5rem; margin-left: auto; }
body.rtl .ms-3 { margin-right: 1rem; margin-left: auto; }
body.rtl .me-1 { margin-left: 0.25rem; margin-right: auto; }
body.rtl .me-2 { margin-left: 0.5rem; margin-right: auto; }
body.rtl .me-3 { margin-left: 1rem; margin-right: auto; }

/* RTL Float */
body.rtl .float-start {
  float: right;
}

body.rtl .float-end {
  float: left;
}