/* ============================================================================
   ORVX — Arabic (RTL) overrides for the marketing landing page.

   Loaded ONLY by /ar, and every rule is additionally scoped to [dir="rtl"],
   so this file can never affect the approved English page at /landing.
   It layers on top of landing.css — it does not replace it.
   ==========================================================================*/

/* ---- 1. TYPOGRAPHY ------------------------------------------------------ */
/* IBM Plex Sans Arabic pairs cleanly with Inter and carries the same
   modern-SaaS weight range. Latin fallback keeps numerals identical. */
[dir="rtl"] {
  --font: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[dir="rtl"] body { font-family: var(--font); }

/* Arabic glyphs sit taller: relax the tight Latin tracking and give lines room */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0;
  line-height: 1.32;
}
[dir="rtl"] .hero h1 { line-height: 1.28; letter-spacing: 0; }
[dir="rtl"] .sec-head h2 { line-height: 1.3; letter-spacing: 0; }
[dir="rtl"] .final h2 { line-height: 1.28; letter-spacing: 0; }
[dir="rtl"] .eyebrow { letter-spacing: .04em; }
[dir="rtl"] p, [dir="rtl"] .lead { line-height: 1.85; }
[dir="rtl"] .btn { letter-spacing: 0; font-weight: 600; }

/* ---- 2. NUMBER / CURRENCY ISOLATION ------------------------------------- */
/* Financial values stay LTR and bidi-isolated so "$116,020", "3.89x",
   "−$3,150" and "43%" never get reordered by the surrounding Arabic. */
[dir="rtl"] .num,
[dir="rtl"] .mock-kpi .val,
[dir="rtl"] .eq-row .amt,
[dir="rtl"] .prow b,
[dir="rtl"] .plan-price,
[dir="rtl"] .health-val .n,
[dir="rtl"] .hfact i,
[dir="rtl"] .ads-table td.r,
[dir="rtl"] .alloc-amt {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Mini product-UI blocks: RTL flow, but each Latin/numeric run stays intact */
[dir="rtl"] .step-mini { text-align: right; }
[dir="rtl"] .step-mini .g { unicode-bidi: isolate; }

/* ---- 3. NAVBAR ---------------------------------------------------------- */
/* Flex/grid already mirror under dir=rtl; only physical auto-margins need help */
[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .mock-tag  { margin-left: 0; margin-right: auto; }

/* ---- 4. ACCENT RAILS ---------------------------------------------------- */
/* Left-edge accent bars move to the right edge in RTL */
[dir="rtl"] .rec-card-accent { inset: 0 0 0 auto; }
[dir="rtl"] .ai-rec::before  { inset: 0 0 0 auto; }
[dir="rtl"] .rec-card {
  padding: var(--s5, 20px) calc(20px + 3px) var(--s5, 20px) 20px;
}

/* ---- 5. DIRECTIONAL ICONOGRAPHY ----------------------------------------- */
/* Arrows must point the way the eye travels in Arabic */
[dir="rtl"] .btn svg,
[dir="rtl"] .flow-arrow,
[dir="rtl"] .price-note a svg { transform: scaleX(-1); }
/* …but never mirror check marks, the AI orb, or the menu icon */
[dir="rtl"] .cta-note svg,
[dir="rtl"] .plan-feats svg,
[dir="rtl"] .ba-list svg,
[dir="rtl"] .mock-ai-orb svg,
[dir="rtl"] .nav-toggle svg,
[dir="rtl"] .faq-ico svg { transform: none; }

/* ---- 6. TABLES ---------------------------------------------------------- */
[dir="rtl"] .ads-table th { text-align: right; }
[dir="rtl"] .ads-table th.r,
[dir="rtl"] .ads-table td.r { text-align: left !important; }

/* ---- 7. DATA VISUALISATION — deliberately NOT mirrored ------------------ */
/* Time series read left→right in every locale, and this mirrors the real
   product dashboard (which is LTR). Only the surrounding chrome flips. */
[dir="rtl"] .mock-chart svg,
[dir="rtl"] .health-ring svg { direction: ltr; }

/* ---- 8. LAYOUT NUDGES --------------------------------------------------- */
/* Hero glow follows the text column, which is now on the right */
[dir="rtl"] .hero::before {
  background:
    radial-gradient(ellipse 60% 48% at 78% 0%, rgba(99,102,241,.17), transparent 62%),
    radial-gradient(ellipse 50% 42% at 18% 6%, rgba(139,92,246,.13), transparent 60%);
}
[dir="rtl"] .sec-head { margin-right: 0; }
[dir="rtl"] .eq-caption,
[dir="rtl"] .plan-sub,
[dir="rtl"] .pcard-note,
[dir="rtl"] .os-help { text-align: right; }
[dir="rtl"] .sec-head.center,
[dir="rtl"] .final,
[dir="rtl"] .proof-slot,
[dir="rtl"] .price-note { text-align: center; }

/* Plan price line: keep "$10 /شهرياً" reading naturally */
[dir="rtl"] .plan-price { justify-content: flex-start; }

/* Step numbers stay LTR ("01", "02") */
[dir="rtl"] .step-n { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Footer + brand blocks */
[dir="rtl"] .footer-brand p { max-width: 300px; }

/* ---- 9. MOBILE RTL ------------------------------------------------------ */
@media (max-width: 860px) {
  [dir="rtl"] .nav-mobile a { text-align: right; }
}
@media (max-width: 620px) {
  /* Long Arabic headlines need a touch more breathing room than English */
  [dir="rtl"] .hero h1 { font-size: clamp(27px, 7.4vw, 38px); line-height: 1.34; }
  [dir="rtl"] .sec-head h2 { font-size: clamp(23px, 6.4vw, 32px); }
  [dir="rtl"] .final h2 { font-size: clamp(24px, 6.6vw, 34px); }
  [dir="rtl"] .lead, [dir="rtl"] .sec-head p { font-size: 15.5px; }
  [dir="rtl"] .eq-row .lbl { font-size: 13.5px; }
  [dir="rtl"] .hfact { font-size: 13px; }
}