/* =====================================================================
   ZYLLO DROPSHIP — RTL overrides (Arabic locale only)
   Loaded conditionally from layouts/app.blade.php and
   layouts/dashboard.blade.php when app()->getLocale() === 'ar'.
   Tailwind v3 CDN emits PHYSICAL utilities (left-/right-, ml-/mr-, pl-/pr-,
   text-left/right, space-x) which do not flip automatically, so this sheet
   mirrors the ones that break the storefront layout. Flex/grid ordering
   flips for free via `direction: rtl` on <html>.
   Sharp corners: no border-radius overrides anywhere in this file.
   ===================================================================== */

/* ---- Generic Tailwind physical-utility mirrors ---- */

/* Text alignment utilities */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* space-x-* gap utilities: flip the margin side Tailwind injects */
[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }

/* divide-x-* separators: flip the border side */
[dir="rtl"] [class*="divide-x"] > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; }

/* Auto margins used to push flex items to the inline-end side */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* ---- Header ---- */

/* Search submit button sits physical-right of the input; mirror it */
[dir="rtl"] [role="search"] button[type="submit"] { right: auto !important; left: 0.375rem; }

/* Input padding: text starts from the right, button clears on the left */
[dir="rtl"] [role="search"] input[type="text"] { padding-left: 3.5rem; padding-right: 1.5rem; }

/* Region dropdown + account dropdown: anchor to the left edge of the trigger */
[dir="rtl"] #region-menu { right: auto; left: 0; }
[dir="rtl"] header .group > div.absolute { right: auto; left: 0; }

/* Mega-menu drawer: slides in from the right edge in RTL */
[dir="rtl"] #mega-drawer { left: auto; right: 0; }
[dir="rtl"] #mega-drawer.-translate-x-full { transform: translateX(100%) !important; }

/* Nav-link underline sweep grows from the inline-start side */
[dir="rtl"] .nav-link::after { transform-origin: right; }

/* Drawer footer "Ships to" line: flag already inline; keep reading order */
[dir="rtl"] #mega-drawer .border-t { text-align: right; }

/* ---- Product cards (partials/product-card) ---- */

/* Badge: top-start corner */
[dir="rtl"] .absolute.top-2\.5.left-2\.5 { left: auto; right: 0.625rem; }

/* Round icon buttons column: top-end corner */
[dir="rtl"] .absolute.top-2\.5.right-2\.5 { right: auto; left: 0.625rem; }

/* ---- Product page (products/show) ---- */

/* Stock / out-of-stock badge: top-start corner */
[dir="rtl"] .absolute.top-3.left-3 { left: auto; right: 0.75rem; }

/* Wishlist + share icon column: top-end corner */
[dir="rtl"] .absolute.top-3.right-3 { right: auto; left: 0.75rem; }

/* Mini-cart count badge inside the sticky buy bar */
[dir="rtl"] .absolute.top-1.right-1 { right: auto; left: 0.25rem; }

/* ---- Quick-view slide-over panel: slides in from the left edge in RTL ---- */
[dir="rtl"] #qv-panel { right: auto; left: 0; }
[dir="rtl"] #qv-panel.translate-x-full { transform: translateX(-100%) !important; }

/* ---- Checkout ---- */

/* "Back" arrow points right in RTL */
[dir="rtl"] button[data-back] svg { transform: scaleX(-1); }

/* "Continue" arrows point left in RTL */
[dir="rtl"] button[data-next] svg { transform: scaleX(-1); }

/* ---- Footer / mobile nav ---- */

/* Mostly symmetric (grids + centered stacks); only nudge text alignment */
[dir="rtl"] footer { text-align: right; }
[dir="rtl"] footer .text-center { text-align: center; }

/* ---- Account area (dashboard layout) ---- */

/* Sidebar chips row scrolls naturally; keep card text start-aligned */
[dir="rtl"] .zyllo-sharp { text-align: inherit; }