/* ============================================================================
   ProChild Hub — Arabic (RTL) layer
   Most of the layout mirrors automatically because site.css/components.css use CSS
   logical properties. This file holds the few things that can't flip on their own:
   Arabic typography, transform-based animations, and directional decorations.
   ============================================================================ */

/* ---------- Arabic typography ---------- */
html[lang="ar"] {
  --font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Cairo', 'Segoe UI', system-ui, sans-serif;
}

/* Cairo runs slightly smaller/tighter than Fredoka+Nunito — nudge for optical parity. */
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { line-height: 1.35; }

/* Arabic has no uppercase; the Latin-style tracking/uppercasing looks wrong. */
html[lang="ar"] .nav__link,
html[lang="ar"] .brand__tag,
html[lang="ar"] .eyebrow,
html[lang="ar"] .theme-group__label,
html[lang="ar"] table.data thead th {
  text-transform: none;
  letter-spacing: 0;
}
html[lang="ar"] .nav__link { font-size: .95rem; }
html[lang="ar"] .brand__tag { font-size: .68rem; letter-spacing: 0; }

/* Keep Western digits + Latin brand tokens LTR inside Arabic text. */
html[lang="ar"] .price,
html[lang="ar"] .stat-tile .value,
html[lang="ar"] .order-ref,
html[lang="ar"] code {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ---------- Mobile drawer: slides in from the correct edge ---------- */
[dir="rtl"] .nav__drawer {
  inset: 0 auto 0 0;          /* anchor to the left edge in RTL */
  transform: translateX(-100%);
}
[dir="rtl"] .nav__drawer.open { transform: none; }

/* ---------- Sticker peel corner: mirror the gradient + shadow ---------- */
[dir="rtl"] .sticker::after {
  background: linear-gradient(225deg, transparent 46%, rgba(0,0,0,.08) 50%, rgba(255,255,255,.9) 54%);
  box-shadow: 3px -3px 8px rgba(0,0,0,.06);
}

/* ---------- Hero decorations ----------
   The floating stickers and orbit rings are positioned with logical insets
   (inset-inline-start/end) in the markup, so the composition mirrors on its own.
   We must NOT transform .hero__layer here — the parallax engine writes an inline
   transform on those elements and would overwrite (or be overwritten by) it. */

/* ---------- Directional icons ---------- */
/* Arrows / chevrons / next-back point the other way in RTL. Non-directional icons
   (cart, user, mail, globe, star…) must NOT be flipped. */
[dir="rtl"] .icon-directional svg,
[dir="rtl"] svg.icon-directional {
  transform: scaleX(-1);
}

/* ---------- Admin ---------- */
[dir="rtl"] .admin-sidebar { border-inline-end: none; }

/* ---------- Footer ---------- */
[dir="rtl"] .footer__contact li,
[dir="rtl"] .founder__quals li { text-align: start; }

/* ---------- Forms ---------- */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: start; }
/* Phone / card / numeric inputs stay LTR so digits and +country codes read correctly. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[inputmode="tel"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] #card-number-input {
  direction: ltr;
  text-align: start;
}

/* ---------- Longer Arabic strings: prevent clipping in tight spots ---------- */
html[lang="ar"] .btn { white-space: normal; }
html[lang="ar"] .badge-status { white-space: nowrap; }
html[lang="ar"] .gender-pill { font-size: .95rem; }

/* ---------- Gender toggle: Boy on the RIGHT in both languages ----------
   The client asked for Boy on the right in the English view, so the markup lists Girl first.
   .gender-choice is an ordinary flex row, and a flex row in RTL runs right-to-left on its own —
   which would put the FIRST item (Girl) on the right and undo the swap for Arabic. Reversing the
   direction here cancels that, so the pair sits the same way round in both languages.

   This is a DELIBERATE break from mirroring. Everything else on the site flips with the script;
   this one control does not, because the client's instruction was about where Boy physically sits,
   not about reading order. Note the consequence: in Arabic, Boy is the second control a
   right-to-left reader reaches, and keyboard/tab order still follows the markup (Girl, then Boy)
   in both languages. */
html[lang="ar"] .gender-choice { flex-direction: row-reverse; }