/* Arabic RTL overrides for the Daftar marketing page.
   Loaded AFTER styles.css on index-ar.html only. */

html { direction: rtl; }

/* Arabic typeface everywhere except latin brand bits */
body,
.hero h1,
.section-title,
.section-lede,
.eyebrow,
.btn,
.mode-card h3,
.mode-card .tag,
.mode-card .desc,
.feature h4,
.feature p,
.tier .pitch,
.tier .name,
.tier li,
.tier-cta,
.trust h2,
.trust-item .lbl,
.trust-item .desc,
.faq-q,
.faq-a,
.cta-banner h2,
.cta-banner p,
.hero-pill,
.hero-trust,
.nav-links,
.nav-cta,
.nav-lang,
.footer h5,
.footer-links a,
.footer .brand-block p,
.pricing-toggle button,
.logos-row .label {
  font-family: var(--pg-font-arabic), 'Tajawal', sans-serif;
}

/* Keep the wordmarks and shop URLs in latin type; prices use Tajawal so
   Arabic-Indic numerals render correctly */
.brand-lockup {
  direction: ltr;
}
.brand-lockup .word,
.brand-lockup .mark .d,
.brand-lockup .powered,
.logo-pill,
.shop-header .handle {
  font-family: var(--pg-font-sans), sans-serif !important;
}
.tier .price .v,
.price-yr,
.compare-tier .pr,
.shop-item .pr {
  font-family: var(--pg-font-arabic), 'Tajawal', sans-serif !important;
}

/* Arabic runs a touch larger / looser. Arabic display type needs real
   leading + zero tracking, otherwise the diacritics (kasra/shadda/dots)
   on big headings clip and collide on iOS Safari. */
.hero h1,
.cta-banner h2 { letter-spacing: 0; line-height: 1.3; padding-block: 0.06em; }
.section-title { letter-spacing: 0; line-height: 1.28; }
.mode-card h3 { letter-spacing: 0; line-height: 1.25; }
.tier .pitch { line-height: 1.4; }
.faq-q { line-height: 1.4; }

/* Flip the soft hero glow to the other corner */
.hero::before { right: auto; left: -120px; }
.trust::before { right: auto; left: -200px; }

/* Phone sits upright on both languages — no RTL tilt.
   Deco cards rules kept for any legacy callers, but the
   AR landing's hero block doesn't render them anymore. */
.hero-deco-card.invoice { left: auto; right: -20px; transform: rotate(5deg); }
.hero-deco-card.paid { right: auto; left: -10px; transform: rotate(-4deg); }

/* FAQ marker stays on the far edge naturally via flatbox; numbers LTR */
.tier .price { direction: ltr; justify-content: flex-end; }
.frame, .shop-grid { unicode-bidi: plaintext; }

/* Pricing toggle 'save' chip spacing in RTL */
.pricing-toggle .save { margin-left: 0; margin-right: 6px; }

/* Feature/checkmark icons: keep arrows pointing the right way */
.btn svg, .tier-cta svg { transform: scaleX(-1); }

/* Mobile: the Arabic hero h1 is 3 stacked lines (one <br> per word) with
   line-height 1.3 + the iOS-safe diacritic padding, which adds up to ~190px
   of headline alone and dominates the iPhone viewport. Tighten size and
   leading on small screens so the CTAs sit within reach.
   English uses line-height 0.96 + no diacritic padding, so it stays compact
   on its own. */
@media (max-width: 720px) {
  .hero h1 {
    font-size: 36px;
    line-height: 1.2;
    padding-block: 0.02em;
    margin-top: 8px;
  }
  .hero p.lede { font-size: 16px; line-height: 1.55; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }
}

/* Brand on the LEFT, nav on the RIGHT in Arabic (row-reverse flips just the
   visual order of the flex items; children keep their RTL text direction). */
.nav-inner,
.footer-brand-row {
  flex-direction: row-reverse !important;
}

/* Mirror only the square 'd' mark for the Arabic build so it faces the
   other way. The wordmark text is untouched (scoping the transform to
   .mark, not the whole lockup), so "daftar." still reads normally. */
.brand-lockup .mark {
  transform: scaleX(-1);
}