/* ==========================================================================
   EliteMartLabs — Arabic (RTL) layer
   Loaded ONLY on /ar/ pages, AFTER css/style.css. Never referenced by the
   English site. Overrides typography for Arabic and flips the few physical
   (non-logical) rules the base sheet uses. The bulk of the layout is flexbox/
   grid and mirrors automatically under <html dir="rtl">.
   ========================================================================== */

:root{
  /* Premium Arabic face that pairs with the site's IBM Plex Sans body.
     Loaded via <link> to Google Fonts in the Arabic <head>; the stack falls
     back to high-quality system Arabic faces when offline. */
  --ar-font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', sans-serif;
}

/* ---------- Arabic typography ---------- */
html[lang="ar"] body{ font-family: var(--ar-font); }

/* Headings, eyebrows, buttons and nav used Space Grotesk (Latin-only glyphs).
   Give every display surface the Arabic face so nothing falls back mid-word. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .headline-xl, html[lang="ar"] .headline-lg, html[lang="ar"] .headline-md,
html[lang="ar"] .eyebrow, html[lang="ar"] .btn,
html[lang="ar"] .nav-links, html[lang="ar"] .nav-links a,
html[lang="ar"] .mobile-nav-links, html[lang="ar"] .mobile-nav-links a,
html[lang="ar"] .plan-name, html[lang="ar"] .plan-amount,
html[lang="ar"] .hero-preview-title, html[lang="ar"] .brand-story-copy h2,
html[lang="ar"] .cta-band h2{
  font-family: var(--ar-font);
}

/* Connected Arabic script must never carry Latin-style positive tracking. */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .headline-xl, html[lang="ar"] .headline-lg, html[lang="ar"] .headline-md,
html[lang="ar"] .eyebrow, html[lang="ar"] .btn, html[lang="ar"] .nav-links a,
html[lang="ar"] .plan-save, html[lang="ar"] .process-chip, html[lang="ar"] .hero-preview-tag,
html[lang="ar"] .plan-cur, html[lang="ar"] .brand-story-kicker,
html[lang="ar"] .page-banner h1, html[lang="ar"] .plan-name, html[lang="ar"] .subhead,
html[lang="ar"] .breadcrumb, html[lang="ar"] .plan-tagline, html[lang="ar"] .plan-note,
html[lang="ar"] .website-pricing-note, html[lang="ar"] .aftercare-terms,
html[lang="ar"] .cosmos-status, html[lang="ar"] .form-note, html[lang="ar"] .field label,
html[lang="ar"] .hero-trust, html[lang="ar"] .hero-interaction-hint{
  letter-spacing: normal;
}

html[lang="ar"] .solution-title,
html[lang="ar"] .solution-feature h3,
html[lang="ar"] .solution-flow-grid h3,
html[lang="ar"] .solution-use-grid h3,
html[lang="ar"] .solution-final-card h2,
html[lang="ar"] .solutions-nav,
html[lang="ar"] .solutions-group{
  font-family: var(--ar-font);
  letter-spacing: normal;
}
html[lang="ar"] .solution-title{ line-height:1.28; }

/* Arabic reads more comfortably with a touch more leading. */
html[lang="ar"] .subhead, html[lang="ar"] p{ line-height: 1.9; }
html[lang="ar"] .headline-xl{ line-height: 1.3; }
html[lang="ar"] .headline-lg{ line-height: 1.4; }
html[lang="ar"] .headline-md{ line-height: 1.5; }
html[lang="ar"] .plan-features .feature-item span,
html[lang="ar"] .feature-item span{ line-height: 1.7; }

/* ---------- RTL structural flips (physical → mirrored) ---------- */

/* skip link anchors to the inline-start (right in RTL) */
[dir="rtl"] .skip-link{ left: auto; right: 12px; }

/* hero caption was explicitly text-align:left */
[dir="rtl"] .hero-caption{ text-align: right; }

/* floating "designed outcome" card: mirror bottom-right → bottom-left */
[dir="rtl"] .hero-outcome{ right: auto; left: 3px; transform: translateX(-10px); }
@media (max-width: 980px){
  [dir="rtl"] .hero-outcome{ left: -2px; right: auto; }
}

/* left-aligned text blocks on pricing */
[dir="rtl"] .plan-quote{ text-align: right; }
[dir="rtl"] .aftercare-terms{ text-align: right; }
[dir="rtl"] .website-pricing-note{ text-align: right; }

/* Directional arrows point toward the reading direction (leftwards) in RTL.
   Only glyphs explicitly tagged .i-arrow flip — never check marks, mail,
   globe, social or other non-directional icons. */
[dir="rtl"] .i-arrow{ transform: scaleX(-1); }

/* Latin URL text stays LTR inside the mock browser bar. */
[dir="rtl"] .win-url{ direction: ltr; }

/* Device mockups are illustrative product UIs — keep them LTR so their
   internal layout stays accurate (per localization guidance: do not mirror
   product interfaces where mirroring would misrepresent them). Arabic strings
   inside still shape correctly via Unicode bidi. */
[dir="rtl"] .hero-panel-inner,
[dir="rtl"] .service-ui,
[dir="rtl"] .laptop,
[dir="rtl"] .phone,
[dir="rtl"] .solution-product{ direction: ltr; }

/* The surrounding landing-page content follows RTL while illustrative product
   interfaces keep their familiar device/dashboard geometry. */
[dir="rtl"] .solution-hero-copy,
[dir="rtl"] .solution-section-intro,
[dir="rtl"] .solution-faq-copy,
[dir="rtl"] .solution-feature,
[dir="rtl"] .solution-use-grid article{ text-align:right; }
[dir="rtl"] .solution-flow-grid li:first-child{ border-radius:0 16px 16px 0; }
[dir="rtl"] .solution-flow-grid li:last-child{ border-radius:16px 0 0 16px; }
[dir="rtl"] .solution-hero-glow{ right:auto; left:-240px; }
[dir="rtl"] .solution-browser{ margin-left:0; margin-right:auto; transform:rotateY(5deg) rotateX(2deg); }
[dir="rtl"] .solutions-featured em{ flex-direction:row-reverse; justify-content:flex-end; }

/* Alternating (zig-zag) service rows on the Services page. Default: copy on the
   inline-start (right), visual on the inline-end (left). .svc-alt swaps them. */
[dir="rtl"] .svc-grid .svc-copy{ order: 1; }
[dir="rtl"] .svc-grid .svc-visual{ order: 2; }
[dir="rtl"] .svc-grid.svc-alt .svc-copy{ order: 2; }
[dir="rtl"] .svc-grid.svc-alt .svc-visual{ order: 1; }

/* Keep numeric prices rendered as clean Western digits regardless of locale. */
html[lang="ar"] .plan-price, html[lang="ar"] .plan-billing,
html[lang="ar"] .plan-meta-item{ font-variant-numeric: normal; }

/* ---------- Arabic mobile spacing (Arabic copy needs more vertical room) ---------- */
/* Trim only the Arabic draft's oversized dark gap between a subpage banner and
   its first content block on phones — ~15–20% less, English layout untouched. */
@media (max-width: 700px){
  html[lang="ar"] .page-banner{ padding-bottom: 34px; }        /* was 42px */
  html[lang="ar"] .section-pad-sm{ padding-top: 40px; padding-bottom: 40px; } /* was 56px */
  /* keep long Arabic headlines from clipping descenders on small screens */
  html[lang="ar"] .headline-xl{ line-height: 1.28; }
  html[lang="ar"] .page-banner h1{ line-height: 1.3; }
  /* segmented hero tabs: allow Arabic label to sit comfortably */
  html[lang="ar"] .hero-tab{ letter-spacing: normal; }
  html[lang="ar"] .solution-title{ line-height:1.25; font-size:clamp(36px,11.5vw,50px); }
  [dir="rtl"] .solution-browser{ transform:none; }
}

@media (max-width:900px){
  [dir="rtl"] .solution-flow-grid li:first-child,
  [dir="rtl"] .solution-flow-grid li:last-child{ border-radius:14px; }
}

/* Local-only review switcher (draft chrome — removed for production). */
.ar-review-bar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; text-align:center;
  background: repeating-linear-gradient(45deg, rgba(198,164,109,0.14) 0 12px, rgba(198,164,109,0.06) 12px 24px);
  border-bottom:1px solid var(--line-soft-2);
  padding:8px 16px; font-size:12.5px; color:var(--cream);
}
.ar-review-bar strong{ color: var(--champagne); font-weight:700; }
.ar-review-bar a{
  color:#f7eedf; font-weight:700; border:1px solid var(--line-soft-2);
  border-radius:999px; padding:4px 12px; transition:background .2s ease;
}
.ar-review-bar a:hover{ background: rgba(241,231,210,0.08); }