/* ============================================================
   system118 — custom-style.css
   Overlay-стили: подключаются ПОСЛЕ system117/css/style.css.
   Здесь живут все переопределения визуального слоя.

   Принцип: ничего не переопределяем без необходимости.
   Каждое правило — осознанная замена грейскина.
   ============================================================ */

/* ------------------------------------------------------------
   Тон-лифт панорам (исходники тусклые).
   Правка на движке — БЕЗ перезаливки плиток: CSS-фильтр на <canvas>
   krpano поднимает контраст/яркость/насыщенность всей панорамы.
   Панели и карточки (лежат на document.body, вне #pano) не затрагивает.
   Значения подобрать под вкус: contrast 1.05–1.12, brightness 1.02–1.06.
   ------------------------------------------------------------ */
#pano canvas {
  /* url(#s118-sharpen) — мягкое повышение резкости (unsharp-свёртка, SVG-фильтр
     объявлен в index.php). CSS-примитива sharpen нет, поэтому через SVG.
     ВНИМАНИЕ: свёртка на полноэкранном canvas тяжёлая для GPU — если на слабых
     ПК/мобиле появится лаг при повороте, убрать url(#s118-sharpen) из строки. */
  filter: url(#s118-sharpen) contrast(1.08) brightness(1.04) saturate(1.06);
}

/* ------------------------------------------------------------
   @font-face — self-host шрифты из system118/fonts/
   PT Sans — для UI/текста (ParaType, бесплатный, SIL OFL)
   EB Garamond — для заголовков (бесплатный, Apache 2.0)
   unicode-range разделяет кириллицу/латиницу — браузер грузит
   только нужный диапазон под актуальный контент.
   ------------------------------------------------------------ */

/* --- PT Sans Regular (400) --- */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- PT Sans Bold (700) --- */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pt-sans-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pt-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- EB Garamond Regular (400) --- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- EB Garamond Bold (700) --- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/eb-garamond-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------
   CSS-переменные (тема)
   ------------------------------------------------------------ */
:root {
  /* Цветовая палитра */
  --bg-primary:     #1a1816;       /* тёплый галерейный тёмный (вместо чистого #000) */
  --bg-surface:     #2a2724;       /* поверхности (карточки, панели) */
  --bg-overlay:     rgba(26, 24, 22, 0.85);   /* полупрозрачный фон */

  --text-primary:   #f5f1ea;       /* основной светлый текст */
  --text-secondary: #b8b0a3;       /* приглушённый */
  --text-muted:     #7a7268;       /* совсем тихий */

  --accent:         #2d2d59;       /* фирменный тёмно-синий Русского музея */
  --accent-hover:   #404080;
  --accent-muted:   rgba(45, 45, 89, 0.2);

  --border:         rgba(245, 241, 234, 0.12);

  /* Типографика — выбор из брендбука Русского музея */
  --font-ui:        'PT Sans', system-ui, -apple-system, Arial, sans-serif;
  --font-display:   'EB Garamond', Garamond, Georgia, serif;

  /* Размеры шрифтов (шкала 1.25) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;

  /* Отступы (шкала 4px) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Анимации */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ------------------------------------------------------------
   Базовые переопределения
   ------------------------------------------------------------ */
body {
  font-family: var(--font-ui) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Заголовки — EB Garamond с засечками */
h1, h2, h3,
.titl h1,
.item_desc .titl h1,
.main_content .left_panel .item_desc .titl h1 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* ============================================================
   Подсказка названия зала (krpano layer pnl_top_lb_hall)
   В HTML5 viewer krpano рендерит layer как div с id-атрибутом.
   Применяем стили через атрибутный селектор — отлавливает
   и div[id*="pnl_top_lb_hall"], и контейнер.
   ============================================================ */
div[id*="pnl_top_lb_hall"],
div[id*="lb_hall"],
.krpano-layer-pnl_top_lb_hall {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important;
  font-size: 32px !important;
  color: #2d2d59 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Внутренние элементы (krpano часто оборачивает текст в span) */
div[id*="pnl_top_lb_hall"] *,
div[id*="lb_hall"] *,
.krpano-layer-pnl_top_lb_hall * {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important;
  font-size: 32px !important;
  color: #2d2d59 !important;
  font-weight: 700 !important;
}

/* ============================================================
   Выпадающее меню комбобоксов krpano
   - cb_levels_ru — список этажей
   - cb_areas_ru — список залов
   id-формат: _krpcbx_<rand>_<cbname>_item<N>
   ============================================================ */

/* Пункт списка — общие стили */
div[id*="cb_levels_ru_item"],
div[id*="cb_areas_ru_item"] {
  font-family: 'PT Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #2d2d59 !important;          /* фирменный синий вместо royal blue */
  padding: 12px 18px !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(45, 45, 89, 0.08) !important;
  background-color: #ffffff !important;
  text-shadow: none !important;       /* было: 0 0 1px rgba(68,137,246,0.7) */
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, padding-left 120ms ease !important;
}

/* Последний пункт — без разделителя */
div[id*="cb_levels_ru_item"]:last-child,
div[id*="cb_areas_ru_item"]:last-child {
  border-bottom: none !important;
}

/* Hover — только подсветка (без сдвига, иначе текст обрезается) */
div[id*="cb_levels_ru_item"]:hover,
div[id*="cb_areas_ru_item"]:hover {
  background-color: rgba(45, 45, 89, 0.08) !important;
}

/* Залы — чуть крупнее, как «главный» список */
div[id*="cb_areas_ru_item"] {
  font-size: 15px !important;
  padding: 14px 20px !important;
}

/* Контейнер списка — добавляем прокрутку для длинных списков.
   :has() — современный CSS, работает во всех актуальных браузерах с 2023 */
div:has(> div[id*="cb_areas_ru_item"]),
div:has(> div[id*="cb_levels_ru_item"]) {
  max-height: 65vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(45, 45, 89, 0.3) transparent !important;
}

/* Стилизация скроллбара (WebKit / Chromium) */
div:has(> div[id*="cb_areas_ru_item"])::-webkit-scrollbar,
div:has(> div[id*="cb_levels_ru_item"])::-webkit-scrollbar {
  width: 6px;
}
div:has(> div[id*="cb_areas_ru_item"])::-webkit-scrollbar-track,
div:has(> div[id*="cb_levels_ru_item"])::-webkit-scrollbar-track {
  background: transparent;
}
div:has(> div[id*="cb_areas_ru_item"])::-webkit-scrollbar-thumb,
div:has(> div[id*="cb_levels_ru_item"])::-webkit-scrollbar-thumb {
  background: rgba(45, 45, 89, 0.3);
  border-radius: 3px;
}
div:has(> div[id*="cb_areas_ru_item"])::-webkit-scrollbar-thumb:hover,
div:has(> div[id*="cb_levels_ru_item"])::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 45, 89, 0.5);
}

/* ============================================================
   Кастомные HTML-селекты (custom-select.js).
   Накладываются поверх скрытого canvas-комбобокса krpano.
   ============================================================ */

/* Контейнер krpano уже position:absolute — оставляем как есть.
   overflow:visible нужен, чтобы наша кнопка не обрезалась границами layer'а. */
[data-s118-cs] {
  overflow: visible !important;
}

.cs-button {
  /* Position absolute — занимаем всё место контейнера */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  font-family: 'PT Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2d2d59;
  text-align: left;

  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(45, 45, 89, 0.2);
  border-radius: 6px;
  padding: 0 14px;
  margin: 0;

  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  z-index: 9999;
}

.cs-button:hover {
  border-color: rgba(45, 45, 89, 0.4);
  background-color: #ffffff;
}

.cs-button:focus-visible,
.cs-button[aria-expanded="true"] {
  border-color: #2d2d59;
  box-shadow: 0 0 0 3px rgba(45, 45, 89, 0.15);
}

.cs-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-chevron {
  display: flex;
  align-items: center;
  color: #2d2d59;
  transition: transform 200ms ease;
}

.cs-button[aria-expanded="true"] .cs-chevron {
  transform: rotate(180deg);
}

/* Dropdown — рендерится в body через JS, position:fixed.
   Координаты вычисляются в JS при открытии. */
.cs-dropdown {
  position: fixed;
  width: max-content;
  max-width: 480px;       /* для длинных названий залов */
  z-index: 999999;        /* поверх всего */

  margin: 0;
  padding: 4px 0;
  list-style: none;

  background-color: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(45, 45, 89, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* Высота: до 60vh, но если пунктов мало — по содержимому */
  max-height: 60vh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: rgba(45, 45, 89, 0.3) transparent;
}

.cs-dropdown::-webkit-scrollbar {
  width: 6px;
}
.cs-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.cs-dropdown::-webkit-scrollbar-thumb {
  background: rgba(45, 45, 89, 0.3);
  border-radius: 3px;
}

.cs-option {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2d2d59;
  padding: 8px 14px;        /* было 10×16 — чуть компактнее */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  transition: background-color 100ms ease;
}

.cs-option:hover {
  background-color: rgba(45, 45, 89, 0.08);
}

/* Карточки экспонатов — переопределяем грязный «Verdana» из style_item.css */
.main_content .left_panel .item_desc,
.main_content .content .itpnl_btns .itpnl_tabs .itpnl_tab span,
.item_desc .text p,
.item_desc .attr p {
  font-family: var(--font-ui) !important;
}

/* ------------------------------------------------------------
   Подсказка для слабовидящих:
   уважаем системную настройку «уменьшить движение»
   (WCAG 2.3.3 Animation from Interactions)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   Панель «Поделиться» (system118/js/share.js)
   Переопределяет старую .panel_share (белый бокс grayskin).
   ------------------------------------------------------------ */
.panel_share {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  width: 280px !important;
  height: auto !important;
  padding: var(--space-4) !important;
}
/* убрать «хвостик»-треугольник от старого скина, если мешает */
.panel_share:after { border-top-color: var(--bg-surface) !important; }

.panel_share #share_h4 {
  font-family: var(--font-ui) !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 0 0 var(--space-3) 0 !important;
  margin: 0 !important;
}

.s118-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.s118-share-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 calc(50% - var(--space-2));
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: rgba(245, 241, 234, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.s118-share-btn:hover {
  background-color: var(--accent-muted);
  border-color: var(--accent);
}
.s118-share-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.s118-share-icon {
  display: flex;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.s118-share-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s118-share-btn--ok {
  background-color: rgba(80, 160, 90, 0.18);
  border-color: rgba(80, 160, 90, 0.5);
}
.s118-share-btn--ok .s118-share-icon { color: #5aa05a; }

/* ------------------------------------------------------------
   Мобильные экраны — компактная адаптация меню и панелей.
   Только ужимаем/вписываем существующие элементы, без новой раскладки.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Список залов: не шире экрана, чтобы длинные названия
     («Зал 8. Верные друзья детства…») не уезжали за правый край. */
  .cs-dropdown { max-width: 92vw; }
  /* длинное название переносим, а не режем многоточием */
  .cs-option { white-space: normal; }
  /* кнопки селектов чуть плотнее на узком экране */
  .cs-button { font-size: 13px; padding: 0 10px; gap: 6px; }
  /* панель «Поделиться» вписываем в ширину экрана, кнопки — в один столбец */
  .panel_share { width: min(280px, 92vw) !important; }
  .s118-share-btn { flex: 1 1 100%; }
  /* мелкий заголовок «Виртуальный тур…» в шапке панели навигации дублирует
     большой титул «ЖИЗНЬ ЗАМЕЧАТЕЛЬНЫХ СОБАК» ниже — на телефоне прячем,
     чтобы не переполнял шапку (стамп ставит init.js). */
  [data-s118="tour-title"] { display: none !important; }
  /* Кнопка VR (картонный VR) на телефоне не нужна. Скрытие через krpano
     ненадёжно (тайминг), поэтому прячем по стампу, который ставит init.js. */
  [data-s118="vr-btn"] { display: none !important; }
}

/* ------------------------------------------------------------
   ДЕВ-инструмент разметки координат (coord-picker.js, ?pick=1)
   ------------------------------------------------------------ */
#cp-panel {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000000;
  width: 340px;
  padding: 12px;
  background: rgba(20, 18, 16, 0.95);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #f5f1ea;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#cp-panel .cp-title { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
#cp-panel .cp-dev { color: #ff6; font-size: 10px; border: 1px solid #ff6; padding: 0 4px; border-radius: 3px; }
#cp-panel .cp-hint { color: #b8b0a3; font-size: 11px; margin-bottom: 8px; line-height: 1.3; }
#cp-panel .cp-current { background: rgba(255,255,255,0.07); padding: 6px; border-radius: 5px; min-height: 32px; word-break: break-all; margin-bottom: 8px; }
#cp-panel .cp-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
#cp-panel button {
  font-family: inherit; font-size: 11px; padding: 6px 8px; cursor: pointer;
  background: rgba(255,255,255,0.1); color: #f5f1ea;
  border: 1px solid var(--border); border-radius: 5px;
}
#cp-panel button:hover { background: var(--accent-muted); border-color: var(--accent); }
#cp-panel button.cp-primary { background: var(--accent); border-color: var(--accent); }
#cp-panel button.cp-on { background: #2d7a3a; border-color: #3a9a4a; color: #fff; }
#cp-panel #cp-out { width: 100%; height: 120px; margin-top: 4px; box-sizing: border-box;
  background: rgba(0,0,0,0.4); color: #9fe0a0; border: 1px solid var(--border);
  border-radius: 5px; font-family: inherit; font-size: 11px; padding: 6px; resize: vertical; }
#cp-panel .cp-flash { color: #9fe0a0; font-size: 11px; }