/*
 * Arabic (RTL) adjustments.
 *
 * Loaded only when the active locale is Arabic. `dir="rtl"` on <html> already
 * handles text flow, list markers, form fields and logical properties; what is
 * left are the *physical* Tailwind utilities used in the storefront markup,
 * which keep pointing at the left/right edge regardless of direction.
 *
 * Deliberately narrow: only the utilities that actually appear in the front
 * views are flipped, and absolutely-positioned elements (the cart drawer, the
 * announcement bar) are left alone because their transforms are physical and
 * flipping them mid-animation breaks the slide-in.
 */

/* ── text alignment ─────────────────────────────────────────── */
/* These read text-left/text-right as "start"/"end", which is what the
   LTR-authored markup means by them. Do NOT add text-right to markup that
   is already inside dir="rtl" expecting the right edge: these rules are
   more specific than the Tailwind utility and will flip it to the left.
   dir="rtl" aligns to the right on its own — no class is needed. */
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

@media (min-width: 768px) {
    [dir="rtl"] .md\:text-left  { text-align: right; }
    [dir="rtl"] .md\:text-right { text-align: left; }
}

/* ── inline margins ─────────────────────────────────────────── */
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }

/* ── inline padding ─────────────────────────────────────────── */
[dir="rtl"] .pl-0 { padding-left: 0; padding-right: 0; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }

/* ── borders / corners ──────────────────────────────────────── */
[dir="rtl"] .border-l {
    border-left-width: 0;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: inherit;
}
[dir="rtl"] .rounded-l {
    border-radius: 0 0.25rem 0.25rem 0;
}
[dir="rtl"] .rounded-r {
    border-radius: 0.25rem 0 0 0.25rem;
}

/* ── flex gaps created with space-x-* ───────────────────────── */
/* space-x-* sets margin-left on every child but the first, which lands on the
   wrong side once the row is reversed. */
[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.5rem; }

/* ── checkout: the required-field asterisk sits after the label ── */
[dir="rtl"] .co-lbl .req { margin-left: 0; margin-right: 0.1rem; }

/* ── keep prices, phone numbers and order ids reading LTR ───── */
/* Arabic text is RTL but a figure like "249.00 SAR" or "+966 5x xxx xxxx"
   must not have its sign or symbol pulled to the wrong end. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] .bag-price,
[dir="rtl"] .recap-price,
[dir="rtl"] .totals-block .total-row span:last-child {
    direction: ltr;
    text-align: right;
}
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
    text-align: right;
}