/* RTL MIRROR — loaded ONLY when the active language declares dir: rtl (today: Arabic alone).
 *
 * A MIRROR, NOT A REDESIGN. Same components, same colours, same type scale, same hierarchy: the
 * page a Dutch reader sees, reflected. Nothing here changes a size, a colour or a spacing value —
 * only which SIDE things sit on. If a rule in this file would alter how something looks rather than
 * where it sits, it does not belong here.
 *
 * It cannot leak: inc/enqueue.php enqueues this file only when amino_is_rtl_lang() is true, so for
 * the other twenty-seven languages the bytes are never served. That is the property the oracle
 * checks, rather than one we assert.
 *
 * WHAT MUST NOT MIRROR — and this is the part that goes wrong when a site is flipped carelessly:
 * numbers, prices, compound names, doses, IBANs, order numbers and tracking codes are LTR runs
 * inside RTL prose. Arabic readers read "BPC-157" and "€49,95" left-to-right; reversing them makes
 * them wrong, not localised. Those get explicit isolation at the bottom of this file.
 */

/* ── Flow ─────────────────────────────────────────────────────────────────────
 * Most of the layout is flex/grid, which mirrors on its own once dir=rtl is on <html>. These are
 * the places that pin a physical side and therefore do not. */

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

/*
 * THE ANNOUNCEMENT LOOP RUNS THE OTHER WAY. In a right-to-left track the first message sits at the
 * right edge and the rest overflow to the LEFT, so the loop has to travel rightwards (+one copy) to
 * bring the next message in from the left — the keyframe below is the LTR one mirrored. Same
 * duration, same distance, same seam; only the sign changes (round 2, task 6).
 */
[dir="rtl"] .announce-track { animation-name: announce-scroll-rtl; }
@keyframes announce-scroll-rtl {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(33.3333%, 0, 0); }
}
/* The trust strip runs against the top bar here too: the RTL loop, reversed (round 6, task 1). */
[dir="rtl"] .announce-track.announce-track--reverse { animation-name: announce-scroll-reverse-rtl; }
@keyframes announce-scroll-reverse-rtl {
  from { transform: translate3d(33.3333%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Navigation and header actions swap ends; the logo leads from the right. */
[dir="rtl"] .nav-inner,
[dir="rtl"] .hdr-inner,
[dir="rtl"] .ft-top { flex-direction: row-reverse; }

/*
 * THE CART DRAWER — and the bug that made it impossible to close in Arabic.
 *
 * The drawer is anchored to the reading edge: `right: 0` in LTR, `left: 0` here. Its RESTING state
 * is off-screen, expressed as a transform: `translateX(100%)` pushes a right-anchored drawer out to
 * the right. Mirroring re-anchored it to the left but left that base transform alone, and only
 * overrode the `.closing` and `[hidden]` states.
 *
 * So in Arabic the drawer was anchored left and still translated +100%, which does not park it
 * off-screen — it parks it one full width to the RIGHT of the left edge, sitting in the middle of
 * the viewport. Closing worked for the length of the animation (`.closing` was mirrored correctly),
 * then the class came off and the drawer snapped back into view. It read as "the close button does
 * nothing", which is why it was reported as a broken control rather than a broken transform.
 *
 * The base transform has to mirror too. Every state below is now stated explicitly rather than
 * inherited from the LTR rule, because inheriting half of a mirrored pair is what caused this.
 */
/* The anchor is logical now (`inset-inline-end` in cart.css) and needs no override here. The
   transform and the shadow have no logical form, so they are the only two things restated. */
[dir="rtl"] .cart-drawer {
  transform: translateX(-100%);
  box-shadow: 20px 0 60px rgba(13, 15, 26, .12);
}
[dir="rtl"] .cart-drawer.on { transform: translateX(0); }
[dir="rtl"] .cart-drawer.closing,
[dir="rtl"] .cart-drawer[hidden] { transform: translateX(-100%); }

/* Dropdowns and menus anchor to the opposite edge.
 *
 * The language switcher has TWO mounts and they mirror in opposite directions, so both are stated
 * explicitly rather than inheriting half of a pair — the mistake that left the Arabic cart drawer
 * parked in the middle of the viewport for a day. Desktop anchors right in LTR because the actions
 * cluster is at the right edge, so in RTL it anchors left; mobile anchors left in LTR because it
 * sits beside the burger, so in RTL it anchors right. */
[dir="rtl"] .hdr-lang-d .hdr-lang-menu { right: auto; left: 0; }
[dir="rtl"] .hdr-lang-m .hdr-lang-menu { left: auto; right: 0; }
[dir="rtl"] .acct-menu,
[dir="rtl"] .nav-drop { right: auto; left: 0; }

/* Lists, quotes and anything indented from a physical side. */
[dir="rtl"] .legal-list,
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .legal-contact { text-align: right; }

/* Form controls: the select chevron and any icon-inset input swap sides. */
[dir="rtl"] select { background-position: left 12px center; padding-left: 34px; padding-right: 14px; }
[dir="rtl"] .co-field input,
[dir="rtl"] .co-field select,
[dir="rtl"] .co-field textarea { text-align: right; }

/* Checkout step rail and progress read from the right. */
[dir="rtl"] .co-steps,
[dir="rtl"] .co-line { flex-direction: row-reverse; }
/* The payment option rows are NOT reversed: a plain flex row already mirrors under dir=rtl (radio on
 * the right, then the name, then the marks) and reversing it put the radio back on the left. Removed
 * 14 Sep 2026 with the compact rows; the row uses logical properties, so this is the whole rule. */

/* ── Direction-meaning icons ──────────────────────────────────────────────────
 * An arrow means "forward"; forward is leftward here. Chevrons, back links and carousel controls
 * flip. A checkmark, a lock, a spinner and a logo do NOT — they carry no direction, and flipping
 * them is the classic tell of a mechanically mirrored site. */
[dir="rtl"] .icon-arrow,
[dir="rtl"] .co-back svg,
[dir="rtl"] .btn-back svg,
[dir="rtl"] .rail-prev svg,
[dir="rtl"] .rail-next svg,
[dir="rtl"] .acc-chev { transform: scaleX(-1); }

/* ── Bidi isolation — the rules that keep data readable ───────────────────────
 * `unicode-bidi: isolate` with `direction: ltr` renders these runs left-to-right and stops the
 * surrounding Arabic from reordering their neighbouring punctuation. Without it "BPC-157" beside a
 * price can render as "157-BPC" with the currency on the wrong end. */
/* THE SELECTOR LIST IS THE WHOLE POINT, and the first version of it was wrong.
 *
 * It targeted .price / .amount / .woocommerce-Price-amount — sensible-looking names that this theme
 * does not use. Every price on a product page carries pd-priceline, pd-dose-price, pd-kit-price or
 * sticky-buy-price, so the isolation applied to nothing at all and the rule LOOKED right in the
 * stylesheet while doing nothing on the page. The RTL journey test caught it by reading the computed
 * style off a real price rather than trusting the CSS to have matched.
 *
 * These are the classes the theme actually renders money, doses, lots and tracking numbers in. */
[dir="rtl"] .pd-priceline,
[dir="rtl"] .pd-price-was,
[dir="rtl"] .pd-dose-price,
[dir="rtl"] .pd-dose-permg,
[dir="rtl"] .pd-dose-amt,
[dir="rtl"] .pd-kit-price,
[dir="rtl"] .pd-kit-sum-total,
[dir="rtl"] .pd-add-total,
[dir="rtl"] .pd-related-price,
[dir="rtl"] .sticky-buy-price,
[dir="rtl"] .card-price,
[dir="rtl"] .bundle-price,
[dir="rtl"] .cart-price,
[dir="rtl"] .cart-upsell-price,
[dir="rtl"] .cart-sub,
[dir="rtl"] .co-sum-price,
[dir="rtl"] .co-deliv-price,
[dir="rtl"] .co-total,
[dir="rtl"] .co-line,
[dir="rtl"] .acct-order-total,
[dir="rtl"] .acct-order-item-price,
[dir="rtl"] .od-track-num,
[dir="rtl"] .amino-ship-tracking,
[dir="rtl"] .oc-id,
[dir="rtl"] .pb-mono,
[dir="rtl"] .pb-order,
[dir="rtl"] .pd-dose-badge,
[dir="rtl"] .pd-dose-tag,
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .price,
[dir="rtl"] .amount,
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* An email address or a URL inside Arabic prose is one LTR run. */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="http"] { unicode-bidi: isolate; }

/* The product page's mark strip on a narrow phone scrolls sideways and fades at its END edge
 * (polish.css). A mask has no logical direction, so the fade is turned round here: the end edge
 * is the left one. */
/* (the product-page mark strip no longer scrolls or fades; the row wraps with logical properties and needs no RTL rule) */