@charset "utf-8";

/* ==============================
   Просмотрщик PDF-каталога (single-catalogs.php)
   Подключается только на странице каталога.
   ============================== */

@font-face {
  font-family: 'Circe-Regular';
  src: url('/fonts/Circe-Regular.woff2') format('woff2'),
       url('/fonts/Circe-Regular.woff') format('woff');
  font-display: swap;}

@font-face {
  font-family: 'Circe-Bold';
  src: url('/fonts/Circe-Bold.woff2') format('woff2'),
       url('/fonts/Circe-Bold.woff') format('woff');
  font-display: swap;}

:root {
  --cv-bg: #ececec;
  --cv-panel: #ffffff;
  --cv-line: #e2e2e2;
  --cv-text: #000000;
  --cv-muted: #8a8a8a;
  --cv-hover: #f2f2f2;
  --cv-bar-h: 64px;
  --cv-footer-h: 92px;
  --cv-thumb-h: 56px;
}

*, *:before, *:after {box-sizing: border-box;}

html, body {margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--cv-bg); color: var(--cv-text);
  font-family: 'Circe-Regular', Helvetica, Tahoma, Arial, sans-serif;
  /* Без этого горизонтальный свайп тачпадом в Chrome/Safari уводит «Назад» по истории */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}

button {font: inherit; color: inherit;}
[hidden] {display: none !important;}

.cv {position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;}


/* ---------- Верхняя панель ---------- */

.cv_bar {position: relative; z-index: 3; -webkit-flex: 0 0 var(--cv-bar-h); flex: 0 0 var(--cv-bar-h); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); background: var(--cv-panel); border-bottom: 1px solid var(--cv-line);}

.cv_logo {-webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; line-height: 0;}
.cv_logo img {display: block; height: 46px; width: auto;}

.cv_title {-webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin: 0 24px; font-family: 'Circe-Regular', Helvetica, Tahoma, Arial, sans-serif; font-weight: normal; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.cv_actions {-webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 4px;}

.cv_btn {display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; min-width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--cv-text); text-decoration: none; cursor: pointer; -webkit-transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;}
.cv_btn:hover {background: var(--cv-hover);}
.cv_btn:disabled {opacity: 0.3; cursor: default; background: transparent;}
.cv_btn svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.cv_zoom_value {min-width: 56px; padding: 0 6px; font-size: 13px; letter-spacing: 0.5px;}

.cv_btn:focus-visible, .cv_nav:focus-visible, .cv_thumb:focus-visible, .cv_message_btn:focus-visible {outline: 2px solid var(--cv-text); outline-offset: 2px;}

/* Крестик «Закрыть» — только на телефоне (вертикально и в режиме чтения) */
.cv_close {display: none;}
.cv.is_compact .cv_close {display: -webkit-inline-flex; display: inline-flex;}

#cvFullscreen .cv_fs_off {display: none;}
.cv.is_fullscreen #cvFullscreen .cv_fs_on {display: none;}
.cv.is_fullscreen #cvFullscreen .cv_fs_off {display: block;}


/* ---------- Сцена со страницей ---------- */

.cv_stage {position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden; outline: none;}

.cv_scroller {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-overflow-scrolling: touch;}
.cv.is_zoomed .cv_scroller {overflow: auto; touch-action: pan-x pan-y; cursor: -webkit-grab; cursor: grab;}
.cv.is_zoomed .cv_scroller.is_dragging {cursor: -webkit-grabbing; cursor: grabbing;}

/* Лист с текущей страницей: размер задаёт скрипт, по центру сцены */
.cv_sheet {position: relative; margin: 0 auto;}

.cv_page {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12);}
.cv_page canvas {display: block; width: 100%; height: 100%;}

/* Смена страницы: лёгкий сдвиг + проявление */
.cv_page.is_enter_next {-webkit-animation: cv_in_next 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation: cv_in_next 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
.cv_page.is_enter_prev {-webkit-animation: cv_in_prev 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation: cv_in_prev 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
.cv_page.is_leave {z-index: -1; -webkit-animation: cv_out 0.22s ease-out both; animation: cv_out 0.22s ease-out both;}

@-webkit-keyframes cv_in_next {from {opacity: 0; -webkit-transform: translate3d(28px, 0, 0);} to {opacity: 1; -webkit-transform: none;}}
@keyframes cv_in_next {from {opacity: 0; transform: translate3d(28px, 0, 0);} to {opacity: 1; transform: none;}}
@-webkit-keyframes cv_in_prev {from {opacity: 0; -webkit-transform: translate3d(-28px, 0, 0);} to {opacity: 1; -webkit-transform: none;}}
@keyframes cv_in_prev {from {opacity: 0; transform: translate3d(-28px, 0, 0);} to {opacity: 1; transform: none;}}
@-webkit-keyframes cv_out {from {opacity: 1;} to {opacity: 0;}}
@keyframes cv_out {from {opacity: 1;} to {opacity: 0;}}

@media (prefers-reduced-motion: reduce) {
  .cv_page.is_enter_next, .cv_page.is_enter_prev, .cv_page.is_leave {-webkit-animation: none; animation: none;}
}

/* Стрелки по краям сцены */
.cv_nav {position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; padding: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 50%; color: var(--cv-text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); cursor: pointer; -webkit-transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out, transform 0.2s ease-in-out;}
.cv_nav:hover {background: #FFF; -webkit-transform: scale(1.06); transform: scale(1.06);}
.cv_nav:disabled {opacity: 0; pointer-events: none;}
.cv_nav svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.cv_prev {left: 20px;}
.cv_next {right: 20px;}
.cv:not(.is_ready) .cv_nav {opacity: 0; pointer-events: none;}

/* Подсказка про увеличение: только на сенсорных экранах, один раз, на несколько секунд */
.cv_hint {position: absolute; left: 50%; bottom: 84px; z-index: 2; max-width: calc(100% - 32px); width: max-content; padding: 10px 16px; -webkit-transform: translate(-50%, 8px); transform: translate(-50%, 8px); background: rgba(0, 0, 0, 0.72); color: #FFF; border-radius: 20px; font-size: 12px; line-height: 1.4; letter-spacing: 0.3px; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.4s ease, visibility 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;}
.cv_hint svg {display: inline-block; vertical-align: -6px; width: 20px; height: 20px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.cv.is_hint_visible .cv_hint {opacity: 1; visibility: visible; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}

/* Счётчик-«бейдж» поверх страницы — виден в режиме чтения, когда панели скрыты */
.cv_badge {display: none; position: absolute; right: 12px; top: 10px; z-index: 2; padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 12px; font-size: 12px; letter-spacing: 0.5px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); pointer-events: none; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease;}

/* Полоса загрузки */
.cv_progress {position: absolute; left: 0; top: 0; right: 0; height: 2px; z-index: 2; background: transparent; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease;}
.cv_progress span {display: block; width: 0; height: 100%; background: var(--cv-text); -webkit-transition: width 0.2s ease; transition: width 0.2s ease;}
.cv_progress.is_indeterminate span {width: 30%; -webkit-animation: cv_indeterminate 1.1s ease-in-out infinite; animation: cv_indeterminate 1.1s ease-in-out infinite;}
.cv.is_ready .cv_progress {opacity: 0;}
@-webkit-keyframes cv_indeterminate {from {-webkit-transform: translateX(-100%);} to {-webkit-transform: translateX(340%);}}
@keyframes cv_indeterminate {from {transform: translateX(-100%);} to {transform: translateX(340%);}}

/* Сообщение об ошибке / пустом каталоге */
.cv_message {position: absolute; left: 50%; top: 50%; z-index: 3; width: 90%; max-width: 420px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 32px 28px; background: #FFF; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);}
.cv_message_text {margin: 0 0 22px; font-size: 16px; line-height: 1.5;}
.cv_message_btn {display: inline-block; margin: 4px; height: 44px; line-height: 42px; padding: 0 24px 2px; background: transparent; border: 1px solid #000; color: #000; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out;}
.cv_message_btn:hover {background: #000; color: #FFF;}


/* ---------- Нижняя панель: счётчик + миниатюры ---------- */

.cv_footer {position: relative; z-index: 3; -webkit-flex: 0 0 var(--cv-footer-h); flex: 0 0 var(--cv-footer-h); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 16px; padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); background: var(--cv-panel); border-top: 1px solid var(--cv-line); -webkit-transition: flex-basis 0.25s ease; transition: flex-basis 0.25s ease;}

.cv_counter {-webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 72px; font-size: 14px; letter-spacing: 1px; white-space: nowrap; font-variant-numeric: tabular-nums;}
.cv_counter_sep {margin: 0 6px; color: var(--cv-muted);}
#cvTotal {color: var(--cv-muted);}

.cv_thumbs {-webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 10px; height: 100%; padding: 0 4px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #cfcfcf transparent; overscroll-behavior-x: contain;}
.cv_thumbs::-webkit-scrollbar {height: 4px;}
.cv_thumbs::-webkit-scrollbar-thumb {background: #cfcfcf;}
.cv_thumbs:before, .cv_thumbs:after {content: ""; -webkit-flex: 1 0 0; flex: 1 0 0;} /* центрирование, когда миниатюр мало */

.cv_thumb {position: relative; -webkit-flex: 0 0 auto; flex: 0 0 auto; height: var(--cv-thumb-h); padding: 0; background: var(--cv-bg); border: 0; outline-offset: 2px; cursor: pointer; opacity: 0.55; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;}
.cv_thumb:hover {opacity: 0.9;}
.cv_thumb.is_active {opacity: 1;}
.cv_thumb:after {content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: transparent; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;}
.cv_thumb.is_active:after {background: var(--cv-text);}
.cv_thumb canvas {display: block; width: 100%; height: 100%;}
.cv_thumb_num {position: absolute; right: 3px; bottom: 2px; padding: 1px 4px; font-size: 10px; line-height: 1.3; background: rgba(255, 255, 255, 0.85); color: #000;}

.cv_thumbs_toggle {-webkit-flex: 0 0 auto; flex: 0 0 auto;}

/* Миниатюры скрыты */
.cv.is_thumbs_hidden .cv_footer {-webkit-flex-basis: 56px; flex-basis: 56px;}
.cv.is_thumbs_hidden .cv_thumbs {visibility: hidden;}
.cv.is_thumbs_hidden .cv_thumbs_toggle {background: var(--cv-hover);}


/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
  .cv_nav {width: 44px; height: 44px; margin-top: -22px;}
  .cv_prev {left: 12px;}
  .cv_next {right: 12px;}
}

@media (max-width: 760px) {
  :root {--cv-bar-h: 56px; --cv-footer-h: 72px; --cv-thumb-h: 42px;}
  .cv_bar {padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));}
  .cv_logo img {height: 38px;}
  .cv_title {margin: 0 12px; font-size: 12px; letter-spacing: 1px;}
  .cv_only_desktop {display: none !important;}
  .cv_close {display: -webkit-inline-flex; display: inline-flex; margin-right: -8px;}
  .cv_close svg {width: 24px; height: 24px; stroke-width: 1.6;}
  .cv_footer {gap: 10px; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom);}
  .cv_counter {min-width: 56px; font-size: 13px;}
  .cv_thumbs {gap: 8px;}
  .cv_thumb_num {display: none;}
  /* На телефоне стрелки внизу по центру — не закрывают страницу */
  .cv_nav {top: auto; bottom: 20px; width: 48px; height: 48px; margin-top: 0;}
  .cv_prev {left: calc(50% - 60px);}
  .cv_next {right: calc(50% - 60px);}
  .cv.is_thumbs_hidden .cv_footer {-webkit-flex-basis: 52px; flex-basis: 52px;}
}

/* ---------- Режим чтения: телефон горизонтально ----------
   Высоты экрана мало, поэтому панели прячутся и страница занимает весь экран.
   Тап по странице показывает/скрывает панели. Класс is_compact ставит скрипт
   (сенсорный экран и высота до 500px). */

.cv.is_compact .cv_bar,
.cv.is_compact .cv_footer {position: absolute; left: 0; right: 0; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);}
.cv.is_compact .cv_bar {top: 0; height: var(--cv-bar-h);}
.cv.is_compact .cv_footer {bottom: 0; height: var(--cv-footer-h);}
.cv.is_compact:not(.is_ui_visible) .cv_bar {-webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; pointer-events: none;}
.cv.is_compact:not(.is_ui_visible) .cv_footer {-webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; pointer-events: none;}
.cv.is_compact.is_thumbs_hidden .cv_footer {height: 52px;}
.cv.is_compact.is_ready:not(.is_ui_visible) .cv_badge {display: block;}
.cv.is_compact .cv_hint {bottom: 16px;}
.cv.is_compact.is_ui_visible .cv_hint {bottom: calc(var(--cv-footer-h) + 12px);}
.cv.is_compact .cv_nav {background: rgba(255, 255, 255, 0.8);}

/* Невысокий экран (телефон горизонтально): панели компактнее — больше места каталогу */
@media (max-height: 500px) {
  :root {--cv-bar-h: 48px; --cv-footer-h: 60px; --cv-thumb-h: 36px;}
  .cv_logo img {height: 32px;}
  .cv_thumb_num {display: none;}
}