/* ============================================
   Zikr Reminder — i18n: fonts + RTL (Urdu/Arabic)
   ============================================ */

/* Arabic-script UI font for Urdu + Arabic. Quranic ayahs keep 'Amiri'
   via their own classes (.bt-ayah-ar, .pp-dua-arabic, .quote-text, etc.). */
html[data-lang="ur"],
html[data-lang="ar"] {
  font-family: 'Noto Naskh Arabic', 'Inter', system-ui, -apple-system, sans-serif;
}
html[data-lang="ur"] body,
html[data-lang="ar"] body {
  font-family: inherit;
}

/* Urdu reads more comfortably with a touch more line-height */
html[data-lang="ur"] { line-height: 1.85; }

/* ---- RTL baseline ----
   The dir="rtl" attribute mirrors inline text + flexbox automatically.
   These rules fix the few spots that use physical alignment or directional
   glyphs so the layout reads correctly right-to-left. */
html[dir="rtl"] { text-align: right; }

html[dir="rtl"] .header-title,
html[dir="rtl"] .header-sub,
html[dir="rtl"] .section-head h2,
html[dir="rtl"] .pp-prophet-story,
html[dir="rtl"] .bt-story,
html[dir="rtl"] .bt-headline,
html[dir="rtl"] .bt-tagline { text-align: right; }

/* Directional chevrons / arrows flip horizontally */
html[dir="rtl"] #header-back svg,
html[dir="rtl"] .hajj-pill-arrow,
html[dir="rtl"] .prophets-pill-arrow { display: inline-block; transform: scaleX(-1); }

/* Trailing "→" inside pill subtitles points the other way in RTL */
html[dir="rtl"] .hajj-pill-text em,
html[dir="rtl"] .prophets-pill-text em,
html[dir="rtl"] .bt-toc-link { unicode-bidi: plaintext; }

/* Quick-action labels + tiles stay centered (they already are) */
html[dir="rtl"] .prayer-name,
html[dir="rtl"] .nav-item span,
html[dir="rtl"] .desktop-nav-item span { text-align: center; }

/* Toasts / island pills: keep their internal flex but align text to start */
html[dir="rtl"] .toast-text,
html[dir="rtl"] .island-text { text-align: right; }

/* Inputs and selects read from the right */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }

/* Language selector chips (Profile) */
.lang-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.lang-chip {
  flex: 1 1 auto;
  min-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.6rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md, 14px);
  background: var(--c-bg-soft);
  color: var(--c-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}
.lang-chip .lang-native { font-size: 1.05rem; font-weight: 700; }
.lang-chip .lang-name { font-size: 0.72rem; color: var(--c-text-muted); }
.lang-chip:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.lang-chip.active {
  border-color: var(--c-primary);
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}