/* SportSyncAI — Arabic-primary (RTL) layer. Loaded by every page that loads i18n.js.
   Only active when <html dir="rtl"> (set by i18n.js). English (LTR) is untouched. */

/* language toggle — top-centre so it never collides with the hamburger (one
   corner) or the account button (the other corner), at any width */
#ss-lang-toggle {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 102;
  background: rgba(255,255,255,0.85); color: #1d1d1f; border: 1px solid #d2d2d7; border-radius: 100px;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  padding: 8px 16px; font: 700 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  cursor: pointer; transition: border-color .15s, background .15s;
}
#ss-lang-toggle:hover { border-color: #6e6e73; background: #ffffff; }
/* phones: top row is full (logo, nav links, CTA) — park the toggle bottom-left */
@media (max-width: 600px) {
  #ss-lang-toggle { top: auto; bottom: 14px; left: 14px; transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
}

/* Arabic typography: joined letters must never be letter-spaced or upper-cased */
html[lang="ar"] body,
html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .sidebar-brand, html[lang="ar"] .btn-primary, html[lang="ar"] .home-account-btn {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
html[lang="ar"] * { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.3; }

/* ---------- RTL mirroring (shared sidebar / account chrome) ---------- */
html[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border, #2D2D4A); }
html[dir="rtl"] .sidebar-nav a { border-left: 0; border-right: 2px solid transparent; }
html[dir="rtl"] .sidebar-nav a.active { border-right-color: var(--purple-light, #F1F5F9); }
html[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hamburger { left: auto; right: 14px; }
html[dir="rtl"] .home-account-btn { right: auto; left: 14px; }
@media (max-width: 900px) {
  html[dir="rtl"] .sidebar { left: auto; right: -280px; transition: right .25s ease; }
  html[dir="rtl"] .sidebar.open { right: 0; }
}

/* ---------- homepage (index.html) ---------- */
html[dir="rtl"] .hero-photo-strip figcaption { left: auto; right: 10px; }
html[dir="rtl"] .step:not(:last-child)::after { right: auto; left: -8px; content: '←'; }
html[dir="rtl"] .compare-table th:first-child,
html[dir="rtl"] .compare-table td:first-child { text-align: right; padding-left: 16px; padding-right: 22px; }
html[dir="rtl"] thead th { text-align: right; }
html[dir="rtl"] .layer-item { border-left: 0; border-right: 2px solid transparent; }
html[dir="rtl"] .layer-item:hover { border-right-color: var(--purple, #fff); }
html[dir="rtl"] .layer-stack-card:nth-child(n) { margin-left: 0; }
html[dir="rtl"] .layer-stack-card:nth-child(2) { margin-right: 12px; }
html[dir="rtl"] .layer-stack-card:nth-child(3) { margin-right: 24px; }
html[dir="rtl"] .layer-stack-card:nth-child(4) { margin-right: 36px; }
html[dir="rtl"] .layer-stack-card:nth-child(5) { margin-right: 48px; }
html[dir="rtl"] .problem-card { text-align: right !important; }
html[dir="rtl"] .scroll-cta-bar { padding: 10px 20px 10px 10px; }

/* ---------- about.html / how-it-works.html (top nav pages) ---------- */
html[dir="rtl"] .nav-link { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav > a[href="/partners"] { margin-left: 0 !important; margin-right: auto; }
html[dir="rtl"] .compare-table th:first-child,
html[dir="rtl"] .compare-table td:first-child { text-align: right; }
html[dir="rtl"] .stat-card, html[dir="rtl"] .step-card, html[dir="rtl"] .problem-card,
html[dir="rtl"] .chart-card, html[dir="rtl"] .coverage { text-align: right; }
html[dir="rtl"] figure.diagram svg { direction: ltr; }
html[dir="rtl"] ul.axes { padding-left: 0; padding-right: 1.2em; }

/* ---------- contact.html ---------- */
html[dir="rtl"] .contact-card, html[dir="rtl"] .form-group { text-align: right; }
html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* ---------- partners.html / partner-onboarding.html ---------- */
html[dir="rtl"] .exchange-col li { padding: 8px 22px 8px 0; }
html[dir="rtl"] .exchange-col li::before { left: auto; right: 0; }
html[dir="rtl"] .asset-card, html[dir="rtl"] .step-card, html[dir="rtl"] .qa-card,
html[dir="rtl"] .exchange-col, html[dir="rtl"] .tier { text-align: right; }
html[dir="rtl"] .nav-cta { margin-right: 8px; }
html[dir="rtl"] .field input[type=email], html[dir="rtl"] .field input[type=url],
html[dir="rtl"] #estimated_users { direction: ltr; text-align: right; }
html[dir="rtl"] .field input::placeholder, html[dir="rtl"] .field textarea::placeholder { text-align: right; }
html[dir="rtl"] .check-opt, html[dir="rtl"] .attest { text-align: right; }