/* Arabic / RTL layer — loaded only by ar.html, on top of style.css.
   Scoped entirely under [dir="rtl"] so it cannot affect the English pages.

   Tajawal is applied to BOTH display and body text: the site's Latin display
   face is Fraunces, a serif with no Arabic, and pairing an Arabic sans with a
   Latin serif reads as a mistake rather than a choice. Latin characters inside
   Arabic text (WhatsApp, Pet Lovers, AED, phone numbers) fall through to
   DM Sans, because the Tajawal Arabic subsets carry no Latin glyphs. */

[dir="rtl"] {
  --font-display: "Tajawal", "DM Sans", sans-serif;
  --font-body: "Tajawal", "DM Sans", sans-serif;
}

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

/* Arabic has no small-caps tradition and letter-spacing breaks joined script. */
[dir="rtl"] .kicker {
  letter-spacing: normal;
  text-transform: none;
}

[dir="rtl"] .display,
[dir="rtl"] h2,
[dir="rtl"] h3 { font-style: normal; }

[dir="rtl"] .hl { font-style: normal; }

/* Section heads and hero are centred in both directions, so only the
   left-aligned components need mirroring. */
/* NOTE: flexbox already mirrors itself under dir="rtl" - the first child
   lands on the right automatically. Adding row-reverse here UN-mirrors it and
   puts the icon back on the left, which is the bug this comment exists to
   prevent someone re-introducing. Only absolutely-positioned things (which do
   not auto-mirror) need explicit flipping below. */

[dir="rtl"] .tick-list li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .tick-list li::before { left: auto; right: 0; }
[dir="rtl"] .tick-list li::after { left: auto; right: 6px; transform: rotate(-45deg); }

[dir="rtl"] .alert .sign-list li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .alert .sign-list li::before { left: auto; right: 0; }
[dir="rtl"] .alert .closing { text-align: right; }

[dir="rtl"] .pkg ul { padding-right: 0; }

[dir="rtl"] .footer-grid ul { padding-right: 0; }

/* The language switch sits opposite the logo in both directions. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.lang-switch:hover { background: var(--peach-100); }

/* Latin label inside an Arabic page keeps the Latin face. */
[dir="rtl"] .lang-switch { font-family: "DM Sans", sans-serif; }

.nav-links a.lang-switch::after { display: none !important; }