/* ==========================================================================
   Kitabon Ki Duniya — Multi-Language & RTL Stylesheet (i18n.css)
   --------------------------------------------------------------------------
   Referenced by: index.php/html, book.php, categories.php/html,
                  category.php/html, design/*.html
   Provides:
     1. Website language selector (desktop pill + mobile globe + modal)
     2. Full RTL mirroring for Urdu & Arabic
     3. Script-aware typography (Nastaliq / Amiri / Devanagari)
   Reference: MASTER.md Section 1.4, Section 8
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Script-aware webfonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
  --i18n-gold: var(--color-gold, #cfa043);
  --i18n-gold-light: var(--color-gold-light, #e5be75);
  --i18n-forest: var(--color-primary-forest, #0c291e);
  --i18n-deep: var(--color-primary-deep, #103628);
  --i18n-surface: var(--color-card-bg, #ffffff);
  --i18n-bg: var(--color-cream-bg, #f5f2ea);
  --i18n-text: var(--color-text-main, #142a20);
  --i18n-muted: var(--color-text-muted, #5e7368);
  --i18n-border: var(--color-border-light, rgba(215, 201, 182, 0.7));

  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Amiri', serif;
  --font-arabic: 'Amiri', 'Noto Naskh Arabic', 'Scheherazade New', serif;
  --font-hindi: 'Noto Sans Devanagari', 'Mangal', sans-serif;
}

html[data-theme="dark"] {
  --i18n-surface: var(--color-card-bg, #092016);
  --i18n-bg: var(--color-cream-bg, #071c14);
  --i18n-text: var(--color-text-main, #eef4f0);
  --i18n-border: var(--color-border-dark, rgba(255, 255, 255, 0.14));
}

/* --------------------------------------------------------------------------
   1. Pre-paint guard — avoids a flash of untranslated text on non-default
      locales. Released by i18n.js (with a hard safety timeout).
   -------------------------------------------------------------------------- */
html.kkd-i18n-booting body { visibility: hidden !important; }

/* --------------------------------------------------------------------------
   2. Desktop language pill (injected into the header by i18n.js)
   -------------------------------------------------------------------------- */
.kkd-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1.5px solid var(--i18n-border);
  border-radius: 999px;
  background: var(--i18n-surface);
  color: var(--i18n-text);
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.kkd-lang-pill:hover,
.kkd-lang-pill:focus-visible {
  border-color: var(--i18n-gold);
  box-shadow: 0 3px 14px rgba(184, 134, 11, 0.20);
  outline: none;
}

.kkd-lang-pill .kkd-globe {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke: var(--i18n-gold);
  fill: none;
  stroke-width: 2;
}

.kkd-lang-pill .kkd-lang-name { letter-spacing: .1px; }

.kkd-lang-pill .kkd-chev {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  stroke: var(--i18n-muted);
  fill: none;
  stroke-width: 2.4;
  transition: transform .2s ease;
}
.kkd-lang-pill[aria-expanded="true"] .kkd-chev { transform: rotate(180deg); }

/* Compact variant when the header is tight */
.kkd-lang-pill.kkd-compact { height: 34px; padding: 0 10px; font-size: 12px; gap: 5px; }
.kkd-lang-pill.kkd-compact .kkd-chev { display: none; }

/* Mobile globe button that already exists in index.php markup */
.mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border: 1.4px solid var(--i18n-border);
  border-radius: 999px;
  background: var(--i18n-surface);
  color: var(--i18n-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-lang-btn .globe-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke: var(--i18n-gold);
  fill: none;
  stroke-width: 2;
}
.mobile-lang-btn:active { transform: scale(.96); }
.mobile-lang-code { line-height: 1; }

/* --------------------------------------------------------------------------
   3. Language modal
   -------------------------------------------------------------------------- */
.kkd-lang-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 28, 20, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.kkd-lang-backdrop.kkd-open { opacity: 1; visibility: visible; }

.kkd-lang-modal {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--i18n-surface);
  color: var(--i18n-text);
  border: 1px solid var(--i18n-border);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
  transform: translateY(14px) scale(.98);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.kkd-lang-backdrop.kkd-open .kkd-lang-modal { transform: translateY(0) scale(1); }

.kkd-lang-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--i18n-border);
}
.kkd-lang-modal-title {
  margin: 0 0 3px;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--i18n-text);
}
.kkd-lang-modal-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--i18n-muted);
}
.kkd-lang-close {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--i18n-border);
  border-radius: 50%;
  background: transparent;
  color: var(--i18n-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.kkd-lang-close:hover { background: var(--i18n-gold); color: #071c14; }
.kkd-lang-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; }

.kkd-lang-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.kkd-lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--i18n-text);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.kkd-lang-option:hover { background: rgba(184, 134, 11, .09); }
.kkd-lang-option:focus-visible { outline: none; border-color: var(--i18n-gold); }
.kkd-lang-option.kkd-active {
  border-color: var(--i18n-gold);
  background: rgba(184, 134, 11, .13);
}

.kkd-lang-native {
  flex: 0 0 46px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--i18n-forest);
  color: var(--i18n-gold-light);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 2px;
  text-align: center;
  overflow: hidden;
}
.kkd-lang-native[data-script="urdu"]  { font-family: var(--font-urdu); font-size: 15px; line-height: 1.9; }
.kkd-lang-native[data-script="arabic"]{ font-family: var(--font-arabic); font-size: 16px; }
.kkd-lang-native[data-script="hindi"] { font-family: var(--font-hindi); font-size: 14px; }

.kkd-lang-meta { flex: 1 1 auto; min-width: 0; }
.kkd-lang-label { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.kkd-lang-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--i18n-muted);
}
.kkd-rtl-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--i18n-gold);
  color: #071c14;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  vertical-align: middle;
}
.kkd-lang-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  opacity: 0;
  stroke: var(--i18n-gold);
  fill: none;
  stroke-width: 3;
  transition: opacity .16s ease;
}
.kkd-lang-option.kkd-active .kkd-lang-check { opacity: 1; }

.kkd-lang-foot {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--i18n-border);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--i18n-muted);
}

/* ==========================================================================
   4. RTL — Urdu & Arabic
   ========================================================================== */
html[dir="rtl"],
body.is-rtl {
  direction: rtl !important;
  text-align: right !important;
}

body.is-rtl input,
body.is-rtl textarea,
body.is-rtl select {
  text-align: right;
  direction: rtl;
}

/* Keep Latin-only fields readable */
body.is-rtl input[type="email"],
body.is-rtl input[type="url"],
body.is-rtl input[type="tel"],
body.is-rtl input[type="number"] {
  direction: ltr;
  text-align: left;
}

/* 4.1 Mobile Viewport & Container Mirroring -------------------------------- */
html[dir="rtl"] .rub-mobile-view,
body.is-rtl .rub-mobile-view,
html[dir="rtl"] .device-shell,
body.is-rtl .device-shell,
html[dir="rtl"] .viewport-canvas,
body.is-rtl .viewport-canvas,
html[dir="rtl"] .app-body,
body.is-rtl .app-body {
  direction: rtl !important;
  text-align: right !important;
}

/* 4.2 Top Brand Navbar in RTL: Logo on Right, Action Buttons on Left ------- */
html[dir="rtl"] .top-navbar,
body.is-rtl .top-navbar {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}
html[dir="rtl"] .top-navbar .brand-logo-wrap,
body.is-rtl .top-navbar .brand-logo-wrap {
  order: 1 !important;
}
html[dir="rtl"] .top-navbar .header-actions,
body.is-rtl .top-navbar .header-actions {
  order: 2 !important;
  flex-direction: row !important;
}

/* 4.3 Mobile Search Bar in RTL: Dropdown Right, Input Middle, Search Left --- */
html[dir="rtl"] .mobile-search-section,
body.is-rtl .mobile-search-section {
  direction: rtl !important;
}
html[dir="rtl"] .mobile-search-bar,
body.is-rtl .mobile-search-bar {
  direction: rtl !important;
  flex-direction: row !important;
  padding: 3px 10px 3px 6px !important;
}
html[dir="rtl"] .mobile-search-bar .custom-cat-dropdown,
body.is-rtl .mobile-search-bar .custom-cat-dropdown {
  order: 1 !important;
  margin-right: 0 !important;
  margin-left: 6px !important;
}
html[dir="rtl"] .mobile-search-bar .cat-drop-trigger,
body.is-rtl .mobile-search-bar .cat-drop-trigger,
html[dir="rtl"] .mobile-search-bar .custom-cat-trigger,
body.is-rtl .mobile-search-bar .custom-cat-trigger {
  border-right: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin-right: 0 !important;
  margin-left: 6px !important;
  padding: 6px 4px 6px 8px !important;
}
html[dir="rtl"] .mobile-search-bar .cat-drop-menu,
body.is-rtl .mobile-search-bar .cat-drop-menu,
html[dir="rtl"] .mobile-search-bar .custom-cat-menu,
body.is-rtl .mobile-search-bar .custom-cat-menu {
  right: 0 !important;
  left: auto !important;
}
html[dir="rtl"] .mobile-search-input,
body.is-rtl .mobile-search-input {
  order: 2 !important;
  text-align: right !important;
  direction: rtl !important;
}
html[dir="rtl"] .mobile-search-clear,
body.is-rtl .mobile-search-clear {
  order: 3 !important;
}
html[dir="rtl"] .mobile-search-btn,
body.is-rtl .mobile-search-btn {
  order: 4 !important;
}
html[dir="rtl"] .search-live-results,
body.is-rtl .search-live-results {
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] .search-results-header,
body.is-rtl .search-results-header {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

/* 4.4 Desktop Navbar & Search in RTL --------------------------------------- */
html[dir="rtl"] .desktop-navbar .navbar-inner,
body.is-rtl .desktop-navbar .navbar-inner {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}
html[dir="rtl"] .desktop-search-bar,
body.is-rtl .desktop-search-bar {
  direction: rtl !important;
  padding: 4px 12px 4px 6px !important;
}
html[dir="rtl"] .desktop-search-bar .custom-cat-dropdown,
body.is-rtl .desktop-search-bar .custom-cat-dropdown {
  margin-right: 0 !important;
  margin-left: 8px !important;
}
html[dir="rtl"] .desktop-search-bar .cat-drop-trigger,
body.is-rtl .desktop-search-bar .cat-drop-trigger,
html[dir="rtl"] .desktop-search-bar .custom-cat-trigger,
body.is-rtl .desktop-search-bar .custom-cat-trigger {
  border-right: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin-right: 0 !important;
  margin-left: 8px !important;
  padding: 6px 4px 6px 10px !important;
}
html[dir="rtl"] .desktop-search-bar .cat-drop-menu,
body.is-rtl .desktop-search-bar .cat-drop-menu,
html[dir="rtl"] .desktop-search-bar .custom-cat-menu,
body.is-rtl .desktop-search-bar .custom-cat-menu {
  right: 0 !important;
  left: auto !important;
}
html[dir="rtl"] .desktop-search-bar .search-input-field,
body.is-rtl .desktop-search-bar .search-input-field {
  text-align: right !important;
  direction: rtl !important;
}

/* 4.5 Hero Typography & Language Pills in RTL ------------------------------ */
html[dir="rtl"] .hero-header,
body.is-rtl .hero-header,
html[dir="rtl"] .hero-greeting,
body.is-rtl .hero-greeting,
html[dir="rtl"] .hero-title,
body.is-rtl .hero-title,
html[dir="rtl"] .hero-subtitle,
body.is-rtl .hero-subtitle {
  text-align: right !important;
}
html[dir="rtl"] .lang-prompt-header,
body.is-rtl .lang-prompt-header {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  text-align: right !important;
}
html[dir="rtl"] .lang-pills-row,
body.is-rtl .lang-pills-row,
html[dir="rtl"] #heroLangRow,
body.is-rtl #heroLangRow {
  direction: rtl !important;
  flex-direction: row !important;
}

/* 4.6 Section Header Rows: Title on Right, Link on Left with Inverted Arrow - */
html[dir="rtl"] .section-header-row,
body.is-rtl .section-header-row {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html[dir="rtl"] .section-header-row > div:first-child,
body.is-rtl .section-header-row > div:first-child {
  direction: rtl !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
}
html[dir="rtl"] .section-title,
body.is-rtl .section-title {
  text-align: right !important;
}
html[dir="rtl"] .section-see-all,
body.is-rtl .section-see-all,
html[dir="rtl"] .section-action-link,
body.is-rtl .section-action-link {
  direction: rtl !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[dir="rtl"] .section-see-all svg,
body.is-rtl .section-see-all svg,
html[dir="rtl"] .section-action-link svg,
body.is-rtl .section-action-link svg,
html[dir="rtl"] .svg-arrow,
body.is-rtl .svg-arrow {
  transform: scaleX(-1) !important;
}

/* 4.7 Horizontal Scrollers in RTL ------------------------------------------ */
html[dir="rtl"] .categories-scroll,
body.is-rtl .categories-scroll,
html[dir="rtl"] .books-carousel,
body.is-rtl .books-carousel,
html[dir="rtl"] .shelf-scroll,
body.is-rtl .shelf-scroll,
html[dir="rtl"] .popular-books-carousel,
body.is-rtl .popular-books-carousel,
html[dir="rtl"] .cat-carousel,
body.is-rtl .cat-carousel,
html[dir="rtl"] .shelf-lang-filter-bar,
body.is-rtl .shelf-lang-filter-bar,
html[dir="rtl"] #popularFilterTabs,
body.is-rtl #popularFilterTabs,
html[dir="rtl"] .filter-tabs,
body.is-rtl .filter-tabs {
  direction: rtl !important;
  flex-direction: row !important;
}

/* 4.8 Mobile Bottom Dock in RTL: Home on Right, Profile on Left ------------ */
html[dir="rtl"] .bottom-navbar-dock,
body.is-rtl .bottom-navbar-dock,
html[dir="rtl"] .bottom-nav-items,
body.is-rtl .bottom-nav-items,
html[dir="rtl"] .mobile-nav-dock,
body.is-rtl .mobile-nav-dock {
  direction: rtl !important;
  flex-direction: row !important;
}

/* 4.9 Guided Paths & Info Cards in RTL ------------------------------------- */
html[dir="rtl"] .guided-path-card,
body.is-rtl .guided-path-card,
html[dir="rtl"] .kyun-card,
body.is-rtl .kyun-card {
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] .guided-path-card .arrow,
body.is-rtl .guided-path-card .arrow,
html[dir="rtl"] .kyun-card svg,
body.is-rtl .kyun-card svg {
  transform: scaleX(-1) !important;
}

/* 4.10 Ribbons, Badges & Floating WhatsApp in RTL --------------------------- */
html[dir="rtl"] .popular-book-ribbon,
body.is-rtl .popular-book-ribbon,
html[dir="rtl"] .shelf-book-ribbon,
body.is-rtl .shelf-book-ribbon,
html[dir="rtl"] .book-ribbon-tag,
body.is-rtl .book-ribbon-tag {
  right: auto !important;
  left: 7px !important;
}
html[dir="rtl"] .popular-book-format,
body.is-rtl .popular-book-format {
  left: auto !important;
  right: 6px !important;
}
html[dir="rtl"] .rub-whatsapp-float,
body.is-rtl .rub-whatsapp-float {
  right: auto !important;
  left: 14px !important;
}

/* 4.11 Mirror Directional Glyphs ------------------------------------------- */
body.is-rtl .lang-scroll-cue-arrow,
body.is-rtl .cat-switch-arrow,
body.is-rtl .breadcrumb-sep,
body.is-rtl .btn-primary-cta svg,
body.is-rtl .btn-book-read svg,
body.is-rtl .top-bar-back-link svg,
body.is-rtl .carousel-arrow svg {
  transform: scaleX(-1) !important;
}

/* 4.7 Directional spacing → logical properties --------------------------- */
body.is-rtl .kkd-lang-option { text-align: right; }
body.is-rtl .kkd-lang-modal-head { text-align: right; }
body.is-rtl .mode-toggle-pill,
body.is-rtl .kkd-lang-pill { direction: ltr; }

/* 4.8 Lists & quotes ----------------------------------------------------- */
body.is-rtl ul,
body.is-rtl ol { padding-right: 1.3em; padding-left: 0; }
body.is-rtl blockquote { border-right: 3px solid var(--i18n-gold); border-left: none; padding-right: 14px; padding-left: 0; }

/* ==========================================================================
   5. Script-aware typography
   ========================================================================== */
html[lang="ur"] body,
body.kkd-script-urdu {
  font-family: var(--font-urdu);
  line-height: 2.15;              /* Nastaliq needs generous leading */
  letter-spacing: 0;
}
html[lang="ar"] body,
body.kkd-script-arabic {
  font-family: var(--font-arabic);
  line-height: 1.95;
  letter-spacing: 0;
}
html[lang="hi"] body,
body.kkd-script-hindi {
  font-family: var(--font-hindi);
  line-height: 1.75;
}

/* Headings inherit the script font but stay weighty */
body.kkd-script-urdu h1, body.kkd-script-urdu h2, body.kkd-script-urdu h3,
body.kkd-script-urdu h4, body.kkd-script-urdu .hero-title, body.kkd-script-urdu .hero-h1,
body.kkd-script-urdu .section-title, body.kkd-script-urdu .book-card-title {
  font-family: var(--font-urdu);
  line-height: 2.0;
}
body.kkd-script-arabic h1, body.kkd-script-arabic h2, body.kkd-script-arabic h3,
body.kkd-script-arabic h4, body.kkd-script-arabic .hero-title, body.kkd-script-arabic .hero-h1,
body.kkd-script-arabic .section-title, body.kkd-script-arabic .book-card-title {
  font-family: var(--font-arabic);
  line-height: 1.75;
}
body.kkd-script-hindi h1, body.kkd-script-hindi h2, body.kkd-script-hindi h3,
body.kkd-script-hindi h4, body.kkd-script-hindi .hero-title, body.kkd-script-hindi .hero-h1,
body.kkd-script-hindi .section-title, body.kkd-script-hindi .book-card-title {
  font-family: var(--font-hindi);
}

/* Nastaliq clips descenders in tight pills — give them room */
body.kkd-script-urdu .lang-pill,
body.kkd-script-urdu .edition-badge,
body.kkd-script-urdu .book-ribbon,
body.kkd-script-urdu .meta-pill,
body.kkd-script-urdu .badge-item,
body.kkd-script-urdu .btn-book-read,
body.kkd-script-urdu .btn-primary-cta,
body.kkd-script-urdu .desktop-nav-link { line-height: 2.3; padding-top: 4px; padding-bottom: 6px; }

/* Sacred Arabic (Qur'an / hadith matn) always renders in Arabic script,
   never in the active UI font. Marked with data-i18n-skip by i18n.js. */
[data-i18n-skip="sacred"],
.ayah, .hadith-arabic, .arabic-verse {
  font-family: var(--font-arabic) !important;
  direction: rtl !important;
  text-align: center;
  line-height: 2.1;
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 767px) {
  .kkd-lang-modal { max-width: 100%; border-radius: 16px; }
  .kkd-lang-backdrop { padding: 14px; align-items: flex-end; }
  .kkd-lang-modal { max-height: 82vh; }
  .kkd-lang-pill .kkd-lang-name { display: none; }
  .kkd-lang-pill { padding: 0 10px; }
}

@media (min-width: 768px) {
  /* The pre-existing mobile globe button is hidden on desktop; the injected
     desktop pill takes over. */
  .mobile-lang-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kkd-lang-backdrop,
  .kkd-lang-modal,
  .kkd-lang-pill,
  .kkd-lang-check { transition: none !important; }
}