/**
 * RTL overrides — loaded ONLY on right-to-left languages (ar / he / fa).
 *
 * The theme is built on a precompiled Tailwind bundle full of physical
 * left/right utilities, so we can't rewrite it to logical properties. Instead
 * this sheet mirrors the elements that are actually edge-anchored, scoped to
 * [dir="rtl"] so the 45 LTR languages are untouched.
 *
 * Rules that use `left:50%` + `translate(-50%)` are CENTERING, not anchoring —
 * those are direction-agnostic and deliberately left alone.
 *
 * @package Mystic_Hands
 */

/* ---------- base ---------- */
[dir="rtl"] body { text-align: right; }

/* Flip the whole Tailwind flex/grid flow for rows that were laid out LTR.
   Tailwind's `flex-row` is direction-aware already, so we only fix the pieces
   that were pinned with physical offsets below. */

/* ---------- brand lockup ---------- */
/* The brand is `flex` [mark][wordmark]. Under RTL the browser reverses the row,
   putting the sigil AFTER the word — the lockup must keep its designed order. */
[dir="rtl"] .mh-brand { flex-direction: row-reverse; }

/* ---------- header ---------- */
/* burger sits at the physical left in LTR; mirror it */
[dir="rtl"] #mh-bar [data-mh="menu-open"].absolute.left-4 { left: auto; right: 1rem; }
/* the icon cluster is `absolute right-3` in LTR */
[dir="rtl"] #mh-bar .absolute.right-3 { right: auto; left: .75rem; }
@media (max-width: 639px) {
  [dir="rtl"] #mh-bar .absolute.right-3 { right: auto; left: .35rem; }
}
/* dropdown menus (account / language) hang off the right edge in LTR */
[dir="rtl"] .mh-acct-menu,
[dir="rtl"] .mh-lang-menu { right: auto; left: 0; }
[dir="rtl"] .mh-lang-link,
[dir="rtl"] .mh-acct-link { text-align: right; }

/* Mobile drawer direction now lives with .mh-drawer-panel in woocommerce.css
   (opens from the same side as the burger: left in LTR, right in RTL). */

/* ---------- hero carousel ---------- */
/* prev/next arrows must swap sides so "next" still points forward */
[dir="rtl"] .mh-hero-prev { left: auto; right: 14px; transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .mh-hero-next { right: auto; left: 14px; transform: translateY(-50%) scaleX(-1); }
/* the slide track is moved with translateX(-idx*100%) from JS; in RTL the flex
   row is already reversed by the browser, so the sign must flip. Handled by
   negating the direction on the track. */
[dir="rtl"] .mh-fx-slide .mh-hero-track { direction: ltr; }
[dir="rtl"] .mh-fx-slide .mh-hero-slide { direction: rtl; }

/* ---------- footer marquee ---------- */
/* The track is a `w-max` flex row driven by a translateX keyframe animation.
   Under RTL the flex row reverses AND the animation still translates negatively,
   so the strip starts ~1000px outside the container. `direction` alone can't fix
   this (it doesn't affect transforms), so the ticker keeps an LTR formatting
   context end-to-end and only its text runs RTL. */
[dir="rtl"] .marquee { direction: ltr; }
[dir="rtl"] .marquee-track { direction: ltr; }
[dir="rtl"] .marquee-track > * { direction: rtl; }

/* ---------- PDP ---------- */
[dir="rtl"] .woocommerce div.product .summary,
[dir="rtl"] .woocommerce div.product .entry-summary { padding-left: 0; padding-right: .25rem; }
[dir="rtl"] .woocommerce-Tabs-panel--description ul,
[dir="rtl"] .woocommerce-Tabs-panel--description ol { text-align: right; }
[dir="rtl"] .woocommerce-Tabs-panel--description ul li { padding-left: 0; padding-right: 1.85rem; }
[dir="rtl"] .woocommerce-Tabs-panel--description ul li::before { left: auto; right: .2rem; }
/* the faint sigil watermark sits bottom-right; mirror it */
[dir="rtl"] .woocommerce-tabs .panel.woocommerce-Tabs-panel--description::after {
  right: auto; left: -1.6rem;
}
/* sale badge on the gallery */
[dir="rtl"] .woocommerce div.product .onsale { right: auto; left: .8rem; }

/* ---------- shop / cards ---------- */
[dir="rtl"] .mh-badge,
[dir="rtl"] .mh-card-badge { left: auto; right: .6rem; }

/* ---------- account / forms ---------- */
[dir="rtl"] .mh-acct-hi,
[dir="rtl"] .mh-drawer-hi { text-align: right; }
[dir="rtl"] .woocommerce form .form-row label { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
/* email inputs read better LTR even in RTL copy */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

/* checkbox tick mark */
[dir="rtl"] .mh-check::after,
[dir="rtl"] .woocommerce form .form-row input[type="checkbox"] + span::after { left: auto; right: 5px; }

/* ---------- membership / wallet rows ---------- */
[dir="rtl"] .mh-thanks-wallet a,
[dir="rtl"] .mh-thanks-roll-cta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mh-drawer-bal { text-align: right; }

/* ---------- sticky add-to-cart ---------- */
[dir="rtl"] .mh-sticky-atc-price del { margin-right: 0; margin-left: .35rem; }

/* ---------- floating widgets ---------- */
/* chat FAB + back-to-top are pinned bottom-right in LTR */
[dir="rtl"] .mh-cs--br { right: auto; left: 20px; }
[dir="rtl"] .mh-cs--bl { left: auto; right: 20px; }
[dir="rtl"] .mh-cs--br .mh-cs-panel { right: auto; left: 0; transform-origin: bottom left; }
[dir="rtl"] .mh-cs--bl .mh-cs-panel { left: auto; right: 0; transform-origin: bottom right; }
[dir="rtl"] .mh-top { right: auto; left: 20px; }

/* ---------- misc ---------- */
[dir="rtl"] .mh-pdp-eyebrow .mh-pdp-dash { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .mh-news-msg { text-align: center; }
/* numbers, prices and codes stay LTR inside RTL text */
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .amount,
[dir="rtl"] .mh-wallet-amount,
[dir="rtl"] bdi { direction: ltr; unicode-bidi: embed; }

/* Drawer language/currency rows use the physical Tailwind `text-left` on the
   name span; make it direction-aware so the label/code align to the start in RTL. */
[dir="rtl"] .mh-lang-m .text-left,
[dir="rtl"] .mh-cur-m .text-left { text-align: right; }