/*
 * RTL overrides for dynamic onboarding + home-override pages.
 *
 * The page templates and the server-rendered broker markup are authored with
 * physical Tailwind utilities (ml-/mr-, pl-/pr-, left-/right-, text-left, etc.)
 * baked into a precompiled main.css we don't rebuild. This sheet is injected by
 * the render pipeline ONLY for right-to-left cultures (ar, fa) and mirrors the
 * finite set of directional utilities those pages use. dir="rtl" on <html>
 * already flips text + flexbox/grid order; these rules flip the remaining
 * physical box-model + positioning utilities.
 *
 * Scope every rule under [dir="rtl"] so it is inert unless RTL is active.
 */

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

/* --- Margins (auto-scale: x rem values used in markup) ------------------- */
[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: 0.125rem; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: 0.375rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .md\:ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .xl\:ml-2 { margin-left: 0; margin-right: 0.5rem; }

/* --- Padding ------------------------------------------------------------- */
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-9 { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
[dir="rtl"] .md\:pl-0 { padding-right: 0; }
[dir="rtl"] .xl\:pl-4 { padding-left: 0; padding-right: 1rem; }

/* --- Absolute positioning (mirror left/right) ---------------------------- */
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
[dir="rtl"] .left-1\/2 { left: auto; right: 50%; }
[dir="rtl"] .left-1\/3 { left: auto; right: 33.333333%; }
[dir="rtl"] .left-\[20\%\] { left: auto; right: 20%; }
[dir="rtl"] .left-\[-10\%\] { left: auto; right: -10%; }
[dir="rtl"] .right-\[-10\%\] { right: auto; left: -10%; }
[dir="rtl"] .right-\[-15\%\] { right: auto; left: -15%; }
[dir="rtl"] .-left-2 { left: auto; right: -0.5rem; }
[dir="rtl"] .-left-6 { left: auto; right: -1.5rem; }
[dir="rtl"] .-left-16 { left: auto; right: -4rem; }
[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; }
[dir="rtl"] .-right-6 { right: auto; left: -1.5rem; }
[dir="rtl"] .-right-16 { right: auto; left: -4rem; }

/* When left/right are mirrored the centring translate must flip too. */
[dir="rtl"] .left-1\/2.-translate-x-1\/2 { transform: translateX(50%); }

/* --- Side borders (width + accent colour) -------------------------------- */
[dir="rtl"] .border-l,
[dir="rtl"] .border-l-\[3px\] { border-left-width: 0; }
[dir="rtl"] .border-l { border-right-width: 1px; }
[dir="rtl"] .border-l-\[3px\] { border-right-width: 3px; }
[dir="rtl"] .border-l-primary\/70 { border-right-color: rgba(0, 230, 210, 0.7); }
[dir="rtl"] .border-l-bright\/60 { border-right-color: rgba(255, 255, 255, 0.6); }
[dir="rtl"] .border-l-cyan-400\/50 { border-right-color: rgba(34, 211, 238, 0.5); }
[dir="rtl"] .border-l-cyan-400\/70 { border-right-color: rgba(34, 211, 238, 0.7); }

/* --- Chevron / arrow hover nudges (point the correct way) ---------------- */
[dir="rtl"] .group:hover .group-hover\:translate-x-0\.5 { transform: translateX(-0.125rem); }
[dir="rtl"] .group:hover .group-hover\:translate-x-1 { transform: translateX(-0.25rem); }
[dir="rtl"] .lucide-chevron-right,
[dir="rtl"] .lucide-arrow-right { transform: scaleX(-1); }

/* --- Broker ticker carousel ---------------------------------------------
 * Only the scrolling viewport/track stay LTR: the carousel measures slide
 * positions with offsetLeft and drives scrollLeft, which break under dir="rtl".
 * Pinning just the viewport keeps the marquee working (drifting left) while the
 * section header (title, subtitle, controls) still mirrors RTL. The two nav
 * arrows are flipped so prev/next point the culturally correct way. */
[dir="rtl"] [data-broker-viewport] { direction: ltr; }
[dir="rtl"] [data-broker-prev] .lucide-chevron-left,
[dir="rtl"] [data-broker-next] .lucide-chevron-right { transform: scaleX(-1); }
/* Drift right-to-left: mirror the viewport, then un-mirror each card so logos
   and text read normally. Mirroring the viewport (not the track) keeps the
   offsetLeft/scrollLeft maths and scroll range intact. */
[dir="rtl"] [data-broker-viewport] { transform: scaleX(-1); }
[dir="rtl"] [data-broker-track] > * { transform: scaleX(-1); direction: rtl; }





/* --- Divider columns ----------------------------------------------------- */
[dir="rtl"] .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 1;
}

/* --- Server-rendered broker markup (text-right values, dropdown, tooltip) - */
[dir="rtl"] [data-broker-cashback] { text-align: left; }
/* The "more info" dropdown + rate tooltips use inline left:0 / text-align:left;
   inline styles win on specificity, so flip them explicitly with !important. */
[dir="rtl"] [role="tooltip"] { left: auto !important; right: 0 !important; text-align: right !important; }