/* ==========================================================================
   rtl.css — the small set of things logical properties cannot mirror.

   The rest of the stylesheet uses logical properties (inline-start/end,
   margin-inline, border-inline, text-align: start), so RTL is structural
   rather than a bolted-on override. What remains here is:

     1. transforms   — translateX() has a fixed sign, so off-canvas panels
                       must be flipped by hand.
     2. box-shadows  — inset offsets are physical.
     3. glyph arrows — chevrons/arrows point the wrong way when mirrored.
     4. bidi         — phone numbers, prices and code stay LTR inside RTL text.
   ========================================================================== */

/* ------------------------------------------------- 1. off-canvas panels -- */

/* Mobile nav drawer: anchored to inline-end, so it leaves toward the left
   in RTL and toward the right in LTR. */
:root[dir="rtl"] .drawer { transform: translateX(-101%); }
:root[dir="rtl"] .drawer.is-open { transform: none; }

/* Catalog filter panel and admin sidebar are anchored to inline-start. */
@media (max-width: 1000px) {
  :root[dir="rtl"] .filters { transform: translateX(101%); }
  :root[dir="rtl"] .filters.is-open { transform: none; }
}
@media (max-width: 1040px) {
  :root[dir="rtl"] .side { transform: translateX(101%); }
  :root[dir="rtl"] .side.is-open { transform: none; }
}

/* ------------------------------------------------------- 2. box-shadows -- */

:root[dir="rtl"] .drawer__link.is-active { box-shadow: inset -3px 0 0 var(--gold); }

/* ---------------------------------------------------------- 3. glyphery -- */

/* Any icon marked .icon-flip mirrors horizontally in RTL: chevrons, arrows,
   "back" carets. Icons that must never flip (play, plus, trash) omit it. */
:root[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* The gallery's prev/next buttons keep their vertical centring transform,
   so their flip has to be composed with it explicitly. */
:root[dir="rtl"] .gallery__nav .icon-flip { transform: scaleX(-1); }

/* Hamburger bars are symmetric; the X rotation reads the same either way. */

/* ------------------------------------------------------- 4. bidi safety -- */

/* Latin-numeral runs inside Arabic copy (prices, weights, phone numbers,
   dates, IDs) must not be reordered by the bidi algorithm. */
:root[dir="rtl"] .num,
:root[dir="rtl"] .contact-card__value,
:root[dir="rtl"] .cell-product__id,
:root[dir="rtl"] .code-block,
:root[dir="rtl"] .count-cell__num,
:root[dir="rtl"] .countdown {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Inputs holding numbers or URLs stay LTR so the caret behaves. */
:root[dir="rtl"] input[type="number"],
:root[dir="rtl"] input[type="url"],
:root[dir="rtl"] input[type="tel"],
:root[dir="rtl"] input[type="datetime-local"],
:root[dir="rtl"] input[type="password"] {
  direction: ltr;
  text-align: right;
}

/* Native datetime pickers render their own internal LTR layout; giving the
   control an explicit LTR direction avoids a doubly-mirrored field. */
:root[dir="rtl"] input[type="datetime-local"]::-webkit-datetime-edit { direction: ltr; }

/* -------------------------------------------------------- 5. fine tuning - */

/* Arabic sits lower on the line than Latin; nudge tightly-packed pill text. */
:root[lang="ar"] .badge,
:root[lang="ar"] .chip,
:root[lang="ar"] .lang-switch__btn { padding-block: 5px; }

/* Cormorant's italic has no Arabic equivalent — Amiri handles emphasis with
   weight instead, already set in tokens.css. Keep quotes upright. */
:root[lang="ar"] em, :root[lang="ar"] i { font-style: normal; font-weight: 700; }