/* ─────────────────────────────────────────────────────────────────────────
   RTL overrides — loaded only when the current UI culture is Arabic (see
   _Layout.cshtml). Bootstrap 5's own utility classes (me-*, ms-*, text-start,
   text-end, etc.) already flip automatically once <html dir="rtl"> is set,
   since they're built on CSS logical properties — this file only overrides
   MEPSOUQ's own custom .msq-* classes that hardcoded physical left/right
   instead of a logical property, plus a couple of layout mirrors.
   ───────────────────────────────────────────────────────────────────────── */

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

/* Admin approval-status accent border: left edge -> right edge */
[dir="rtl"] .msq-approval-card {
  border-left: none;
  border-right: 4px solid var(--mep-border);
}
[dir="rtl"] .msq-approval-card.status-pending { border-left-color: unset; border-right-color: var(--mep-warning); }
[dir="rtl"] .msq-approval-card.status-approved { border-left-color: unset; border-right-color: var(--mep-success); }
[dir="rtl"] .msq-approval-card.status-rejected { border-left-color: unset; border-right-color: var(--mep-danger); }

/* Comparison table headers */
[dir="rtl"] .msq-comparison-table th {
  text-align: right;
}

/* Side drawer: slides in from the left in RTL instead of the right */
[dir="rtl"] .msq-drawer {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--mep-border);
  transform: translateX(-100%);
}
[dir="rtl"] .msq-drawer.show {
  transform: translateX(0);
}

/* Icon-before-text spacing (built with margin-right assuming LTR reading order) */
[dir="rtl"] .msq-status-dot {
  margin-right: 0;
  margin-left: .35rem;
}

/* Sticky mobile CTA bar spans full width either way — no change needed, listed
   here only to document it was checked, not silently skipped. */

/* Hero search form and category cards use flexbox without any hardcoded
   left/right — Bootstrap's flex-direction and gap already read correctly
   under dir="rtl" with no override needed. */