/* AKM Music — right-to-left layer.
 *
 * Loaded on every page, but every rule is scoped to [dir="rtl"], so it is inert
 * until i18n.js switches the document. That keeps the LTR site byte-for-byte
 * unchanged rather than "probably unchanged".
 *
 * Design tokens only, per the repo convention.
 */

/* ---------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------------
   ⚠️ The self-hosted webfonts are LATIN SUBSETS — inter-var-latin.woff2 and
   playfair-var-latin.woff2 carry no Arabic glyphs at all. Without this, every
   Arabic character falls through to whatever the browser happens to pick, which
   is why machine-translated sites so often render Arabic in a mismatched face at
   the wrong optical size.
   The stack below is deliberately all SYSTEM fonts: the Arabic UI faces shipped
   by iOS, macOS, Windows and Android are excellent and already on the device, so
   this costs no request — and the repo's rule against adding CDN dependencies
   rules a webfont out anyway.
   ------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  font-family: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic",
               "Segoe UI", Tahoma, "Traditional Arabic", "Arabic Typesetting",
               var(--font-family, system-ui), sans-serif;
}

/* Arabic script sits lower and needs more room between lines than Latin at the
   same size; the default leading looks cramped and clips descenders. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  line-height: 1.5;
  /* Arabic has no case and no small-caps; letter-spacing actively BREAKS it by
     pulling apart glyphs that must remain joined. */
  letter-spacing: normal;
  text-transform: none;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .fp-label,
[dir="rtl"] .sidebar-title { letter-spacing: normal; text-transform: none; }

/* ---------------------------------------------------------------------------
   Direction
   ------------------------------------------------------------------------- */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Inline icon gaps. These are written as physical margins across the CSS
   (margin-right on an icon that precedes its label), so they point the wrong
   way once the line runs the other direction and the icon collides with the
   text it labels. */
[dir="rtl"] .site-footer .footer-contact-col a i,
[dir="rtl"] .shop-trust i,
[dir="rtl"] .usp-strip i,
[dir="rtl"] .footer-pay .fp-label,
[dir="rtl"] .product-price .currency {
  margin-right: 0;
  margin-left: 5px;
}
[dir="rtl"] .card-stars-n { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .qa-cta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .shop-count { margin-left: 0; margin-right: auto; }

/* An arrow that means "onward" must point the way the reader is going. */
[dir="rtl"] .fa-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .fa-arrow-left  { transform: scaleX(-1); }
[dir="rtl"] .fa-location-arrow { transform: scaleX(-1); }

/* Sticky table columns pin to the physical left; in RTL the first column is on
   the right, so an unflipped rule pins the WRONG column and it scrolls away. */
[dir="rtl"] .compare-table th { text-align: right; left: auto; right: 0; }

/* The collection shelf's brass rule marks the start of the line, whichever side
   that is. The base rule already uses a logical property, so this is only here
   for the padding that pairs with it in older cached CSS. */
[dir="rtl"] .sidebar-collection { padding-inline-start: 9px; }
[dir="rtl"] .sidebar-all { text-align: right; }

/* Numbers, prices, phone numbers and Latin brand names stay LTR inside Arabic
   text — "+971 2 621 9929" reversed is not a phone number, and a price with the
   currency on the wrong side reads as a different amount. */
[dir="rtl"] .product-price,
[dir="rtl"] .price,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .pay-badge,
[dir="rtl"] .brand-title,
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ---------------------------------------------------------------------------
   The switcher itself
   ------------------------------------------------------------------------- */
.akm-lang {
  font-family: var(--font-family); font-size: 0.78rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-gray-300, #cbd5e1);
  background: transparent; color: inherit;
  line-height: 1.4; white-space: nowrap;
  /* The label swaps between "العربية" and "English", which are different
     widths — without a floor the header reflows on every toggle. */
  min-width: 62px; text-align: center;
}
.akm-lang:hover { border-color: var(--color-brass, #c9a227); color: var(--color-brass, #c9a227); }
.akm-lang:focus-visible { outline: 2px solid var(--color-brass, #c9a227); outline-offset: 2px; }
/* Shipped hidden and revealed by i18n.js: a control that cannot work without
   JavaScript should not be offered to a visitor who has none. */
.akm-lang[hidden] { display: none !important; }

@media (max-width: 520px) {
  .akm-lang { padding: 5px 9px; min-width: 54px; font-size: 0.72rem; }
}