/* ============================================================
   KazaUmri — Multilingual & RTL Styles
   Add to base.css or include as separate stylesheet
   ============================================================ */

/* ── Language switcher widget ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--gold-bdr);
  border-radius: 20px;
  padding: 3px 5px;
}
.lang-btn {
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text3);
  font-family: 'DM Sans', sans-serif;
  transition: all 0.2s;
  letter-spacing: 0.03em;
}
.lang-btn:hover { color: var(--cream2); }
.lang-btn.active {
  background: var(--gold-dim);
  color: var(--cream);
  font-weight: 500;
}

/* ── RTL layout adjustments ── */
[dir="rtl"] .nav {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .slabel::after {
  /* Keep decorative line but flip side */
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .honor-banner {
  flex-direction: row-reverse;
}
[dir="rtl"] .honor-banner .honor-icon {
  margin-left: 0;
}
[dir="rtl"] .feature-icon {
  margin-right: 0;
}
[dir="rtl"] .price-features li {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .price-features li::before {
  margin-left: 0;
  margin-right: 8px;
}
[dir="rtl"] .form-row label {
  text-align: right;
}
[dir="rtl"] .toggle-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .toggle::after {
  left: auto;
  right: 2px;
}
[dir="rtl"] .toggle.on::after {
  left: 2px;
  right: auto;
}
[dir="rtl"] .bar-labels {
  flex-direction: row-reverse;
}
[dir="rtl"] .sessions-pill {
  flex-direction: row-reverse;
}
[dir="rtl"] .footer-links {
  flex-direction: row-reverse;
}
[dir="rtl"] .steps::before {
  left: auto;
  right: 60px;
}
[dir="rtl"] .hero-inner {
  direction: rtl;
}
[dir="rtl"] .app-tabs {
  direction: rtl;
}

/* ── Arabic font (Noto Naskh is best for UI) ── */
.font-arabic {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', 'Arabic UI', 'Arial Unicode MS', 'DM Sans', sans-serif;
}
.font-arabic h1,
.font-arabic h2,
.font-arabic h3,
.font-arabic .app_title {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', serif;
  letter-spacing: 0;
}

/* ── Urdu font (Noto Nastaliq is most authentic) ── */
.font-urdu {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Arial Unicode MS', 'DM Sans', sans-serif;
  line-height: 2; /* Nastaliq needs more line height */
}
.font-urdu h1,
.font-urdu h2,
.font-urdu h3 {
  font-family: 'Noto Nastaliq Urdu', serif;
  letter-spacing: 0;
}

/* ── Number formatting for Arabic/Urdu ── */
.font-arabic .metric-value,
.font-arabic .streak-num,
.font-arabic .pc-rakats {
  font-family: 'DM Sans', sans-serif; /* Keep Latin numerals readable */
  direction: ltr;
  display: inline-block;
}

/* ── RTL prayer cards ── */
[dir="rtl"] .prayer-grid {
  direction: rtl;
}
[dir="rtl"] .prayer-card {
  direction: rtl;
}

/* ── RTL history table ── */
[dir="rtl"] table {
  direction: rtl;
}
[dir="rtl"] thead th {
  text-align: right;
}
[dir="rtl"] tbody td {
  text-align: right;
}