/* ==========================================================================
   quran-wrapper.css — Основной layout модуля Коран
   Flex-контейнер: боковая панель (280px) + основной контент
   ========================================================================== */

/* --- Шрифты Корана --- */
@font-face {
  font-family: 'UthmanicHafs';
  src: url('/fonts/quran/uthmanic-hafs-v18.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IndoPak';
  src: url('/fonts/quran/indopak-nastaleeq-v4.2.1.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Корневые переменные модуля Коран --- */
.quran-page {
  --quran-bg: var(--page-bg, #f0f2f0);
  --quran-text: var(--dark-gray);
  --quran-arabic: #1a1a1a;
  --quran-border: var(--border-gray);
  --quran-tab-active: var(--emerald);
  --quran-highlight: color-mix(in srgb, var(--emerald, #059669) 8%, transparent);
  --quran-sidebar-width: 280px;
  --quran-header-height: 56px;
  --quran-player-height: 56px;
  --quran-font-uthmani: 'UthmanicHafs', 'Amiri', 'Scheherazade New', serif;
  --quran-font-indopak: 'IndoPak', 'Noto Nastaliq Urdu', serif;
}

/* --- Ночной режим — переопределение переменных ---
   ЕДИНАЯ тёплая ночь чтения на весь продукт: палитра синхронизирована
   с ночной темой ридера Мактабы (maktaba-themes.css, #1A1614/#C9B896).
   Раньше Коран был холодным сине-чёрным, Мактаба тёплой — два характера. */
.night-mode .quran-page {
  --quran-bg: #1A1614;
  --quran-text: #C9B896;
  --quran-arabic: #E8DCC0;
  --quran-border: #2E2825;
  --quran-tab-active: #54422A;
  --quran-highlight: rgba(184, 152, 112, 0.16);
}

/* --- Полноэкранная обёртка страницы --- */
.quran-page {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* запасной вариант для старых браузеров */
  height: 100dvh;  /* мобильные: высота учитывает динамические панели браузера,
                      иначе при скролле длинной суры вся страница ползёт и
                      верхняя панель с плеером уезжает за край экрана */
  background-color: var(--quran-bg);
  color: var(--quran-text);
  font-family: var(--font-primary);
  overflow: hidden;
}

/* Fixed/absolute элементы не должны влиять на flex расчёт */
.quran-page > .quran-word-popup,
.quran-page > .quran-share-popup,
.quran-page > .quran-footer {
  flex: 0 0 0px;
  height: 0;
  min-height: 0;
  overflow: visible;
}
/* Overlay — тоже не влияет на flex, но сохраняет полную высоту для кликов */
.quran-page > .quran-sidebar-overlay {
  flex: 0 0 0px;
  min-height: 0;
  overflow: visible;
}

/* --- Основной контейнер: сайдбар + контент --- */
.quran-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* позволяет flex-child скроллиться */
  overflow: hidden;
}

/* --- Область основного контента (прокручиваемая) --- */
.quran-main {
  flex: 1;
  min-width: 0;
  min-height: 0; /* критично: без этого flex-item раздувается под контент и overflow не скроллится */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 24px;
  scroll-behavior: smooth;
  transition: margin-left .25s ease;
}

/* --- Кастомный скроллбар --- */
.quran-main::-webkit-scrollbar {
  width: 6px;
}

.quran-main::-webkit-scrollbar-track {
  background: transparent;
}

.quran-main::-webkit-scrollbar-thumb {
  background-color: var(--quran-border);
  border-radius: 3px;
}

.quran-main::-webkit-scrollbar-thumb:hover {
  background-color: var(--medium-gray, #999);
}

/* --- Состояние скрытого сайдбара --- */
.quran-layout.sidebar-collapsed .quran-sidebar {
  transform: translateX(-100%);
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.quran-layout.sidebar-collapsed .quran-main {
  margin-inline-start: 0;
}

/* --- Оверлей для мобильного сайдбара --- */
.quran-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal-overlay) - 10);
  opacity: 0;
  transition: opacity var(--transition-normal) ease;
}

.quran-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* --- Заголовок суры (отображается над аятами) --- */
.quran-surah-header {
  text-align: center;
  padding: 32px 16px 24px;
  border-bottom: 1px solid var(--quran-border);
  margin-bottom: 24px;
}

.quran-surah-header__name-ar {
  font-family: var(--quran-font-uthmani);
  font-size: 2rem;
  color: var(--quran-arabic);
  direction: rtl;
  margin-bottom: 8px;
}

.quran-surah-header__name-ru {
  font-size: 1rem;
  color: var(--medium-gray);
  margin-bottom: 4px;
}

.quran-surah-header__meta {
  font-size: 0.8125rem;
  color: var(--medium-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* --- Бисмиллях --- */
.quran-bismillah {
  text-align: center;
  font-family: var(--quran-font-uthmani);
  font-size: 1.75rem;
  color: var(--quran-arabic);
  direction: rtl;
  padding: 20px 0 28px;
  user-select: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.quran-bismillah:hover {
  background: var(--quran-highlight, color-mix(in srgb, var(--emerald) 6%, transparent));
}

.quran-bismillah.playing {
  background: rgba(197, 160, 89, 0.08);
}

/* --- Разделитель суры (в режиме джуза) --- */
.quran-surah-separator {
  text-align: center;
  padding: 20px 0 8px;
  margin-top: 16px;
  border-top: 2px solid var(--emerald, #059669);
}

.quran-sep-name-ar {
  font-family: var(--quran-font-uthmani);
  font-size: 1.4rem;
  color: var(--emerald, #059669);
  display: block;
  margin-bottom: 2px;
}

.quran-sep-name-ru {
  font-size: 0.8rem;
  color: var(--medium-gray, #888);
}

/* --- Басмаля внутри джуза --- */
.quran-bismillah-inline {
  text-align: center;
  font-family: var(--quran-font-uthmani);
  font-size: 1.5rem;
  color: var(--quran-arabic);
  padding: 12px 0 20px;
  user-select: none;
}

/* --- Загрузка контента --- */
.quran-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  gap: 16px;
  color: var(--medium-gray);
}

.quran-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--quran-border);
  border-top-color: var(--emerald);
  border-radius: 50%;
  animation: quran-spin 0.8s linear infinite;
}

@keyframes quran-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Топбар (название суры + навигация)
   ========================================================================== */

.quran-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  background: var(--quran-bg, #fff);
  border-bottom: 1px solid var(--quran-border, #e5e7eb);
  flex-shrink: 0;
}

.quran-topbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.quran-surah-name-ar {
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 1.1rem;
  color: var(--quran-arabic, #1a1a1a);
  direction: rtl;
}

.quran-surah-name-ru {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--quran-text, #333);
}

.quran-surah-info {
  font-size: 0.75rem;
  color: var(--medium-gray, #888);
}

.quran-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--medium-gray, #888);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}

.quran-nav-btn:hover {
  background: var(--quran-highlight, color-mix(in srgb, var(--emerald) 8%, transparent));
  color: var(--emerald, #198754);
}

/* --- Кнопка «Наверх» --- */
.quran-scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--emerald, #059669);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--emerald) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.2s;
}

.quran-scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.quran-scroll-top-btn:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--emerald) 50%, transparent);
  background: #047857;
}

.quran-scroll-top-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* --- Ночной режим topbar --- */
.night-mode .quran-topbar {
  background: var(--quran-bg);
  border-bottom-color: var(--quran-border);
}