/* ============================================================
   TREZZON STORE — RTL OVERRIDES
   ------------------------------------------------------------
   Most components now use logical CSS properties
   (`margin-inline-*`, `padding-inline-*`, `inset-inline-*`,
   `text-align: start/end`, `border-inline-*`), so they flip
   automatically with `dir="rtl"`. This file is reserved for
   the cases where logical equivalents do not exist or where
   the design intentionally diverges in RTL.
   ============================================================ */

/* Switch to the Arabic font stack only when actually rendering
   in RTL — the LTR side keeps the Inter+system stack. */
html[dir="rtl"] body {
  font-family: var(--font-arabic);
}

/* Toast container — currently anchored via physical `right` for
   the LTR side. In RTL we mirror it to the left. (No `inset-inline`
   replacement here yet because the toast component still uses
   physical `right` positioning; revisit when migrating toasts.) */
[dir="rtl"] .toast-container {
  right: auto;
  left: var(--sp-6);
}
[dir="rtl"] .toast {
  animation: toastInRTL 0.3s ease;
}
@keyframes toastInRTL {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Modal close button — absolutely positioned via physical insets;
   flip the side here. */
[dir="rtl"] .modal__close { right: auto; left: var(--sp-4); }

/* User-menu dropdown — anchored to the trailing edge of its trigger
   via physical `right: 0`. In RTL the trailing edge is the left side. */
[dir="rtl"] .user-menu-dropdown { right: auto; left: 0; }

/* Horizontal app-card meta — flex justify cannot use a logical
   `flex-end` that flips, so we reverse the alignment in RTL. */
[dir="rtl"] .app-card--horizontal .app-card__meta { justify-content: flex-end; }

/* WordPress alignment helpers — `float` has no logical equivalent
   prior to `float: inline-start/end` (still poorly supported), so
   keep the physical flips here. */
[dir="rtl"] .alignleft  { float: right; margin: 0 0 16px 16px; }
[dir="rtl"] .alignright { float: left;  margin: 0 16px 16px 0; }