/* ══════════════════════════════════════════════════════════════════
   R121-SA2 — Arabic (RTL) overrides — bangladeshexport.com
   ══════════════════════════════════════════════════════════════════
   Loaded ONLY on dir="rtl" pages via a conditional <link> in
   layouts/public.blade.php + layouts/supplier-profile.blade.php.
   LTR locales (en/es/zh/fr) never fetch this file — zero LTR impact.

   Deliberately UNLAYERED: an unlayered rule beats Tailwind v4's
   @layer utilities without an !important arms race.
   Every selector below was verified unique across the rendered
   public view surface (layouts + public/ + components/ + partials/
   + welcome.blade.php) on 2026-10-01.
   ══════════════════════════════════════════════════════════════════ */

/* ── Arabic typography ─────────────────────────────────────────────
   Letter-spacing breaks Arabic glyph joining; Arabic needs more
   line-height for diacritics. (Element-level leading utilities
   still win where set — only inherited body rhythm changes.) */
html[lang="ar"] body { line-height: 1.8; }
html[dir="rtl"] .tracking-tight,
html[dir="rtl"] .tracking-wide,
html[dir="rtl"] .tracking-wider { letter-spacing: 0; }

/* ── Generic mirrors: text alignment ────────────────────────────── */
html[dir="rtl"] .text-left  { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* ── Generic mirrors: spacing utilities ──────────────────────────
   Physical ml-/mr- become their mirrored side. Verified: no element
   in the public view surface carries both an ml-* and an mr-*. */
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: var(--spacing, 0.25rem); }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: var(--spacing, 0.25rem); }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: calc(var(--spacing, 0.25rem) * 2); }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: calc(var(--spacing, 0.25rem) * 2); }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: calc(var(--spacing, 0.25rem) * 3); }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: calc(var(--spacing, 0.25rem) * 3); }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: calc(var(--spacing, 0.25rem) * 4); }
html[dir="rtl"] .ml-6 { margin-left: 0; margin-right: calc(var(--spacing, 0.25rem) * 6); }
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
/* hamburger button edge pull (header, both layouts) */
html[dir="rtl"] .-ml-2 { margin-left: 0; margin-right: calc(var(--spacing, 0.25rem) * -2); }

/* ── Generic mirrors: left accent borders ─────────────────────────
   Two base cases exist in the views:
   a) no `border` shorthand (base width 0)  -> clean side swap
   b) with `border` shorthand (1px base)   -> restore 1px left */
html[dir="rtl"] .border-l-2:not(.border) { border-left-width: 0; border-right-width: 2px; }
html[dir="rtl"] .border-l-4:not(.border) { border-left-width: 0; border-right-width: 4px; }
html[dir="rtl"] .border.border-l-2 { border-left-width: 1px; border-right-width: 2px; }
html[dir="rtl"] .border.border-l-4 { border-left-width: 1px; border-right-width: 4px; }
/* side-scoped accent color (only border-l-red-500 exists — govt/regulations cards) */
html[dir="rtl"] .border-l-red-500 {
    border-right-color: #ef4444;
    border-left-color: var(--color-bd-border, #e2e8f0);
}
/* trade-shows detail lists: border-l-2 + pl-4 indentation */
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: calc(var(--spacing, 0.25rem) * 4); }

/* ── Header search field (layouts.public + layouts.supplier-profile) ─
   EN: icon at left, [Search] button at right. AR: mirrored. */
html[dir="rtl"] input.pl-12.pr-32 { padding-left: 8rem; padding-right: 3rem; }
html[dir="rtl"] input.pl-10.pr-4  { padding-left: 1rem; padding-right: 2.5rem; }
html[dir="rtl"] svg.absolute.left-4.top-3    { left: auto; right: 1rem; }
html[dir="rtl"] svg.absolute.left-3.top-3\.5 { left: auto; right: 0.75rem; }
html[dir="rtl"] button.absolute.right-1.top-1 { right: auto; left: 0.25rem; }

/* ── Language switcher dropdown (top bar) ─────────────────────────
   OWNER BUG: under RTL the switcher sits at the far RIGHT of the
   top bar; `left-0` anchoring pushed the w-48 dropdown off-screen
   (horizontal scrollbar, links unreachable). Anchor to the right. */
html[dir="rtl"] ul[role="listbox"].left-0 { left: auto; right: 0; }

/* ── Desktop category mega-menu flyouts (layouts.public sidebar) ──
   OWNER BUG ("menu not work"): the sidebar renders on the RIGHT
   under RTL; `left-full` flyouts opened fully off-screen. Open to
   the LEFT (over the content column) instead. */
html[dir="rtl"] div.absolute.left-full {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ── Mobile drawer: slide in from the RIGHT ───────────────────────
   (public.blade.php category drawer + supplier-profile menu drawer) */
html[dir="rtl"] aside.absolute.left-0.top-0 { left: auto; right: 0; }

/* ── Directional icons (chevrons) ─────────────────────────────────
   scaleX(-1) mirrors right-pointing glyphs. Composes with Tailwind
   v4's `rotate:` property, so Alpine's rotate-90 accordion toggle
   still works. Verified all matches are chevron paths. */
/* desktop sidebar category chevrons */
html[dir="rtl"] aside svg.w-3.h-3.text-bd-gray { transform: scaleX(-1); }
/* breadcrumb separators (partials/breadcrumbs + news/show) */
html[dir="rtl"] svg.w-3.h-3.text-bd-gray-300 { transform: scaleX(-1); }
/* mobile accordion chevrons + supplier FAQ down-arrows (mirror-safe) */
html[dir="rtl"] svg.w-4.h-4.text-bd-gray.transition-transform { transform: scaleX(-1); }

/* ── Supplier company timeline (public/suppliers/show) ─────────── */
html[dir="rtl"] .relative.pl-8 { padding-left: 0; padding-right: 2rem; }
html[dir="rtl"] .absolute.left-3.top-0.bottom-0 { left: auto; right: 0.75rem; }
html[dir="rtl"] .-left-6 { left: auto; right: -1.5rem; }

/* ── Live-data ticker separators ─────────────────────────────────── */
html[dir="rtl"] .bd-ticker-item {
    border-right: 0;
    border-left: 1px solid rgba(134, 239, 172, 0.15);
}
html[dir="rtl"] .bd-ticker-item:last-child { border-left: 0; }

/* ── Helper for future RTL-aware blades ─────────────────────────── */
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ══════════════════════════════════════════════════════════════════
   R121-SA2b — second pass (2026-10-01) — verified-live additions.
   Full dir-class audit of rendered /ar/ home+suppliers+news+category
   pages found these two remaining physical-anchor bugs.
   ══════════════════════════════════════════════════════════════════ */

/* ── Card badges over images (home + category cards, e.g. Verified /
   Hot badges on supplier/product cover images): `top-2 left-2` keeps
   them on the visual top-LEFT corner under RTL; mirror to top-right.
   Verified: all matches are <span> badges layered over <img> covers. */
html[dir="rtl"] span.absolute.top-2.left-2 { left: auto; right: 0.5rem; }

/* ── Supplier preview slide-over (public/suppliers listing): wrapper
   is `fixed inset-0 flex justify-end` + panel animates in via
   translate-x-full (from the physical RIGHT). Under RTL, justify-end
   resolves to main-end = LEFT edge, so the panel landed on the LEFT
   while still sliding from the right = flew in from screen center.
   Anchor it back to the right edge (flex-start under RTL) so the
   translate-x-full enter animation stays coherent. Selector verified
   unique (only the preview overlay wrapper matches). */
html[dir="rtl"] div.fixed.inset-0.flex.justify-end { justify-content: flex-start; }