/* ---------------------------------------------------------------------------
   i18n.css — language switcher button + Urdu (RTL) overrides.
   Loaded AFTER styles.css so these rules win where they overlap.
   --------------------------------------------------------------------------- */

/* ---- Language toggle button (lives in the nav) ---- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 12px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.lang-toggle:hover {
  border-color: #0284c7;
  color: #0284c7;
}
.lang-toggle svg { flex: none; }

/* Keep the toggle to the right of the links on desktop, before the hamburger. */
.nav__inner .lang-toggle { order: 3; }
.nav__inner .nav__toggle { order: 4; }

/* ---- Urdu typography (Nastaliq needs generous vertical space) ---- */
[lang="ur"] {
  font-family: "Noto Nastaliq Urdu", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}
[lang="ur"] body,
[lang="ur"] p,
[lang="ur"] li,
[lang="ur"] .lead,
[lang="ur"] .plan__desc,
[lang="ur"] .faq p,
[lang="ur"] summary {
  line-height: 2.15;
}
[lang="ur"] h1 { line-height: 1.9; }
[lang="ur"] h2,
[lang="ur"] h3,
[lang="ur"] h4 { line-height: 1.8; }
/* Nastaliq descenders can clip in tight pills/buttons — give them room. */
[lang="ur"] .btn,
[lang="ur"] .eyebrow,
[lang="ur"] .plan__badge,
[lang="ur"] .strip__tags span { line-height: 1.9; padding-block: 2px; }

/* ---- RTL layout tweaks ---- */
[dir="rtl"] .lang-toggle { margin-inline-start: 12px; }

/* Directional icons / arrows read naturally in RTL because the arrow glyph is
   baked into the translated string (← for Urdu). Nothing to flip here. */

/* The dashboard mock is decorative English content; keep it LTR even in Urdu
   so numbers and the chart render as designed. */
[dir="rtl"] .hero__visual,
[dir="rtl"] .mock { direction: ltr; }

/* Feature/step cards: keep the emoji icon and number badges upright & aligned
   to the reading side. */
[dir="rtl"] .card,
[dir="rtl"] .step,
[dir="rtl"] .plan,
[dir="rtl"] .section__head { text-align: right; }
[dir="rtl"] .cta__inner,
[dir="rtl"] .strip__inner { text-align: right; }

/* Numeric prices stay LTR so "Rs. 4,500" doesn't reorder. */
[dir="rtl"] .plan__price { direction: ltr; display: inline-flex; }
[dir="rtl"] .plan__price .plan__per { direction: rtl; }