/* =========================================================
   Salma.ai — Arabic (RTL) locale overrides
   Loaded AFTER styles.css + enhance.css. Only affects /ar.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

html { direction: rtl; }
body,
.nav-links a, .nav-cta, .btn, .mono-tag, .chip, .guarantee,
h1, h2, h3, h4, h5, p, li, span, a, label, input, select, textarea, button, div {
  font-family: 'Cairo', 'Poppins', system-ui, sans-serif;
}

/* Arabic reads a touch larger; nudge line-height for legibility */
body { line-height: 1.75; }
.lede { line-height: 1.9; }

/* ---- Directional metric / label swaps ---- */
.nav-brand small { margin-left: 0; margin-right: 6px; }
.hero-strip .cell { text-align: right; }
.mock-chat .status { margin-left: 0; margin-right: auto; }
.sent-legend .dot { margin-right: 0; margin-left: 6px; }

/* Pseudo-element accents that were pinned to a physical side */
.tl-card::before { left: auto; right: 24px; }
.ladder-item::after { left: auto; right: 0; }
.ladder-item:hover { padding-left: 0; padding-right: 16px; }
.partner-row:hover { padding-left: 0; padding-right: 12px; }
.value-card::before,
.story::before { right: auto; left: -60px; }

/* Drop cap (if present) flips side */
.ceo-drop { float: right; margin-right: 0; margin-left: 12px; }

/* ---- Arrows point with the RTL reading flow (leftward) ---- */
.btn:hover .arrow { transform: translateX(-4px); }
.nav-cta:hover .arr { transform: translateX(-3px); }
.ladder-item:hover .arr { transform: translateX(-6px); }
.partner-row:hover .arr { transform: translateX(-4px); }
.svc-card:hover .go .arr,
.svc2:hover .svc2-go .arr { transform: translateX(-4px); }

/* Bullet ‹›› markers in lists point inward correctly by default in RTL;
   the diamond ◆ list items just need the marker on the right */
.svc-detail ul li[style*="padding-left"] { padding-left: 0 !important; padding-right: 24px !important; }
.svc-detail ul li span[style*="left: 0"] { left: auto !important; right: 0 !important; }

/* Onboarding numbered cards: number sits on the right in RTL grid — fine.
   Ensure body text within stays right-aligned */
.section-head, .svc-detail, .row-2col { text-align: right; }

/* Footer badge divider keeps its hairline; order mirrors automatically */
footer.site .mawdoo3-row { justify-content: flex-start; }

/* Marquee keeps its motion; Arabic glyphs render fine inside */
.marquee-track { direction: rtl; }

/* Keep the animated bridge illustration LTR internally so its
   left=chaos / right=clarity narrative stays intact */
.hero-illustration svg { direction: ltr; }