/* ===========================================================
   AMNA — Arabic / RTL overrides
   Loaded AFTER hifi-styles.css on the Arabic page only.
   =========================================================== */

:root {
  --sans: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
}

body { font-family: var(--sans); }

/* Headings: Arabic font, neutral tracking, looser leading */
h1, h2, h3, h4 {
  font-family: var(--sans);
  letter-spacing: 0;
}
h1 { line-height: 1.18; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }

.lede { letter-spacing: 0; }

/* Keep mono labels + numerals in the mono face (looks intentional) */
.eyebrow,
.mono,
.mono-caps,
.stat-cell .label,
.foot-meta,
.form-sub,
.payouts-col-head,
.lang-link {
  font-family: "Geist Mono", var(--sans);
}

/* Section index chip stays latin */
.eyebrow .num { font-family: "Geist Mono", monospace; }

/* ---- Directional flips ---- */

/* The eyebrow leader line sits to the right in RTL automatically (flex gap),
   nothing needed. */

/* Comparison table cells were explicitly left-aligned — flip to right */
.cmp th,
.cmp td { text-align: right; }

/* CTA arrow glyph should point left (reading direction) */
.btn .arrow {
  display: inline-block;
  transform: scaleX(-1);
}
.btn:hover .arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Payouts divider: in RTL the "typical" column is on the right,
   so the dividing border moves to its left edge */
.payouts-col.typical {
  border-right: none;
  border-left: 1px solid var(--line);
}

/* Stats grid right-borders read fine; tidy the 3n rule for RTL */
.opp-stat { }

/* Latin brand names / emails inside Arabic flow stay LTR */
input[type="email"],
input[type="url"] {
  direction: ltr;
  text-align: right;
}

/* Phone checkout already has its own .psc-rtl handling — leave it */

/* Footer row: links + meta flip naturally via flex; ensure logo img not mirrored */
.logo-img { transform: none; }

/* Buyer/compliance/split list icons: spacing via flex gap, already symmetric */

/* Hero trust row + signup bullets: flex, auto-correct */

/* Mobile data-col labels already right-aligned by flex justify-between */

@media (max-width: 640px) {
  .payouts-col.typical { border-left: none; }
}