/*
  Unlock Digital — RTL overrides for the custom ud-* sections.

  Loaded only when the storefront renders in a right-to-left language
  (see layout/theme.liquid), so LTR visitors download nothing extra.

  The custom sections are styled with compiled Tailwind utilities that use
  physical sides (left/right, pl/pr, ml/mr, …). This file mirrors only the
  ones those sections actually use. Every rule starts with html[dir="rtl"]
  so it outranks the section-scoped compiled rules (.ud-xxx .class) without
  needing !important.
*/

/* ── Absolute positions: badges, icons, dropdowns, drawer ─────────────── */
html[dir="rtl"] .left-0 { left: auto; right: 0; }
html[dir="rtl"] .left-2 { left: auto; right: 0.5rem; }
html[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
html[dir="rtl"] .left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .right-0 { right: auto; left: 0; }
html[dir="rtl"] .right-0\.5 { right: auto; left: 0.125rem; }
html[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
html[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
html[dir="rtl"] .right-5 { right: auto; left: 1.25rem; }
html[dir="rtl"] .right-6 { right: auto; left: 1.5rem; }
@media (min-width: 48rem) {
  html[dir="rtl"] .md\:right-8 { right: auto; left: 2rem; }
}

/* ── Paddings: search inputs, locale select, rich-text lists ──────────── */
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; }
html[dir="rtl"] .pr-9 { padding-right: 0; padding-left: 2.25rem; }

/* ── Combined paddings to prevent pl-* and pr-* mutual cancellation ───── */
html[dir="rtl"] .pl-6.pr-5 { padding-right: 1.75rem !important; padding-left: 1.25rem !important; }
html[dir="rtl"] .pl-10.pr-9 { padding-right: 2.75rem !important; padding-left: 2.25rem !important; }
html[dir="rtl"] .pl-10.pr-3 { padding-right: 2.75rem !important; padding-left: 0.75rem !important; }

/* ── Header search inputs & locale selectors (prevents icon overlap) ──── */
html[dir="rtl"] .ud-header form[role="search"] input[type="search"],
html[dir="rtl"] .ud-header form.relative input[type="search"] {
  padding-right: 44px !important;
  padding-left: 36px !important;
  text-align: right !important;
}
html[dir="rtl"] .ud-header select[name="locale_code"] {
  padding-right: 28px !important;
  padding-left: 20px !important;
  text-align: right !important;
}
html[dir="rtl"] .ud-header [data-overlay="mobile-menu"] select[name="locale_code"] {
  padding-right: 44px !important;
  padding-left: 36px !important;
}
html[dir="rtl"] .ud-product .\[\&_ul\]\:pl-5 ul { padding-left: 0; padding-right: 1.25rem; }

/* ── Margins: header cluster push + menu-button nudge ─────────────────── */
html[dir="rtl"] .-ml-2 { margin-left: 0; margin-right: -0.5rem; }
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

/* ── Mobile menu drawer: pin to the right and slide from the right ────── */
html[dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; }

/* ── Cart count bubble (the section's inline rule wins over utilities) ── */
html[dir="rtl"] .ud-header #cart-icon-bubble [data-cart-count] { right: auto; left: 2px; }

/* ── Hero side cards: swap sides and mirror the tilt ──────────────────── */
html[dir="rtl"] .-rotate-\[8deg\] { rotate: 8deg; }
html[dir="rtl"] .rotate-\[8deg\] { rotate: -8deg; }
html[dir="rtl"] .hover\:-rotate-\[4deg\]:hover { rotate: 4deg; }
html[dir="rtl"] .hover\:rotate-\[4deg\]:hover { rotate: -4deg; }

/* ── WhatsApp float on the 404 page (custom class, not a utility) ─────── */
html[dir="rtl"] .ud-404__float { right: auto; left: 20px; }
@media screen and (min-width: 750px) {
  html[dir="rtl"] .ud-404__float { right: auto; left: 32px; }
}

/* ── Directional arrows: mirror with the layout ───────────────────────── */
/* (ud-home CTA arrows already flip via Tailwind's rtl:rotate-180) */
html[dir="rtl"] .ti-arrow-right:not(.rtl\:rotate-180),
html[dir="rtl"] .ti-arrow-up-right { transform: scaleX(-1); }
html[dir="rtl"] .group-hover\:translate-x-0\.5:is(:where(.group):hover *) { --tw-translate-x: -0.125rem; }
html[dir="rtl"] .ud-collections__card-cta svg { transform: scaleX(-1); }
html[dir="rtl"] .ud-collections__card:hover .ud-collections__card-cta svg { transform: scaleX(-1) translateX(2px); }

/* ── Arabic typography: letter-spacing breaks the connected script ────── */
html[dir="rtl"] .tracking-\[-0\.017em\],
html[dir="rtl"] .tracking-\[0\.14em\],
html[dir="rtl"] .tracking-wide,
html[dir="rtl"] .tracking-wider,
html[dir="rtl"] .ud-404__help-title,
html[dir="rtl"] .ud-404__card-title,
html[dir="rtl"] .ud-collections__title,
html[dir="rtl"] .ud-collections__card-title,
html[dir="rtl"] .ud-search__title,
html[dir="rtl"] .ud-search__noresults-title,
html[dir="rtl"] .ud-search__popular-title,
html[dir="rtl"] .ic-card h3 { letter-spacing: normal; }

/* ── Whole-store Arabic font ─────────────────────────────────────────────
   Dawn's base font vars point at the Latin theme font, which has no Arabic
   glyphs — Arabic text in Dawn sections (cart, collection grid, footer, …)
   then falls back to the OS font and looks inconsistent with the custom
   sections. Point both vars at IBM Plex Sans Arabic on RTL pages only. */
html[dir="rtl"] {
  --font-body-family: 'IBM Plex Sans Arabic', sans-serif;
  --font-heading-family: 'IBM Plex Sans Arabic', sans-serif;
}

/* Form controls (input/select/button/textarea) do NOT inherit font-family
   from their containers by browser default — they showed in the OS font
   (search box placeholder, language switcher, newsletter field). */
html[dir="rtl"] :is(input, select, textarea, button) { font-family: inherit; }