/* ============================================================
   XPOPUP — Основные стили
   ============================================================
   Содержит:
   1. Блокировка прокрутки body/html
   2. Подложка (фон)
   3. Бокс и контейнеры
   4. Лоадеры (спиннеры)
   5. Кнопка закрытия
   6. Заголовок (header)
   7. Кнопка "Назад"
   8. Типы контента: iframe, image и галерея
   9. Zoom изображения
   10. Индикатор загрузки
   11. Отображение ошибок
   12. Clearfix, sticky-панель, ожидание CSS
   ============================================================ */

.b-xpopup {
  /* --- Переменные --- */
  /* Общие */
  --xpopup_border-radius: 16px;
  --xpopup_background: #fff;
  --xpopup_box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, 0.5);
  --xpopup_padding_base: 20px;

  --xpopup__bg_background: #000000aa;
  --xpopup__bg_blur: 6px;

  /* Бокс */
  --xpopup__box_padding: 10px;

  /* Шапка */
  --xpopup__header_height: 56px;
  --xpopup__header_background: #fafafa;
  --xpopup__header_color: #000;
  --xpopup__header_border-bottom: 1px solid transparent;
  --xpopup__header_font-size: 18px;
  --xpopup__header_font-weight: normal;

  /* Контент */
  --xpopup__content_padding: var(--xpopup_padding_base);
  --xpopup__content_color: #212529;

  /* Подвал */
  --xpopup__footer_background: #fafafa;
  --xpopup__footer_border-top: 1px solid #eee;
  --xpopup__footer_color: #212529;

  /* Кнопка закрытия */
  --xpopup__close_type_inside: #000;

  /* Иконки */
  --xpopup__ico_close_color: var(--xpopup__header_color);
  --xpopup__ico_close_color_outside: #fff;
  --xpopup__ico_back_color: var(--xpopup__header_color);
  --xpopup__ico_actions_color: var(--xpopup__header_color);
  --xpopup__ico_question_color: var(--xpopup__header_color);
  --xpopup__ico_arrow_left_color: var(--xpopup__header_color);
  --xpopup__ico_arrow_right_color: var(--xpopup__header_color);
}

/* ============================================================
   1. БЛОКИРОВКА ПРОКРУТКИ BODY/HTML
   ============================================================ */
html.b-html-xpopup,
body.b-body-xpopup {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

html.b-html-xpopup.b-html-xpopup_scrollable,
html.b-html-xpopup.b-html-xpopup_scrollable body.b-body-xpopup {
  overflow: auto;
}

/* ============================================================
   2. ПОДЛОЖКА (ФОН)
      Фон всегда существует, видимость управляется через opacity
      элемента .b-xpopup__bg-inner.
      Анимация фона — в xpopup-animations.css.
   ============================================================ */
.b-xpopup__bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--xpopup__bg_background, #00000075);

  z-index: 1040;
}
.b-xpopup__bg.b-xpopup__bg--blur_true {
  backdrop-filter: blur(var(--xpopup__bg_blur, 6px));
  -webkit-backdrop-filter: blur(var(--xpopup__bg_blur, 6px));
}

/* .b-xpopup__bg-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 11, 0.5);
  opacity: 0;
  pointer-events: none;
}

.b-xpopup__bg.b-xpopup_type_image .b-xpopup__bg-inner {
  background: rgba(0, 0, 0, 0.95);
} */

/* ============================================================
   3. БОКС И КОНТЕЙНЕРЫ
      $box           — полноэкранная обёртка со скроллом
      $container     — само окно (для не-image типов)
      $content       — область контента
   ============================================================ */
.b-xpopup__box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%; /* 100vh некорректно в iOS */
  outline: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  z-index: 1041;
  visibility: hidden;
}
/* .b-xpopup__box.b-xpopup_status_loading {
    opacity: .95 !important;
} */
.b-xpopup__box.b-xpopup_fullheight_true {
  --xpopup_border-radius: 0px !important;
}

.b-xpopup__content-container {
  position: relative;
  top: 0;
  text-align: left;
  z-index: 1045;
  width: auto;
  min-width: 200px;
  margin: 0 auto;
  transform: none;
  box-sizing: border-box;
  transition: none; /* управляется через JS для галереи */

  /* flex-растяжка контента на всю доступную высоту */
  display: flex;
  flex-direction: column;
}

.b-xpopup__content {
  overflow: hidden;
  border-bottom-left-radius: var(--xpopup_border-radius);
  border-bottom-right-radius: var(--xpopup_border-radius);
  flex: 1;
  min-height: 0; /* чтобы flex-элемент мог быть меньше своего содержимого */
}

/* === Тёмный режим для контента === */
.b-xpopup_dark-mode-true {
  /* Переменные для контента */
  --xpopup-content-bg: #1a1a2e;
  --xpopup-content-text: #eee;
  --xpopup-content-border: #333;
  --xpopup-input-bg: #2d2d44;
  --xpopup-input-text: #eee;
  --xpopup-input-border: #444;
}

/* Применяем стили к контенту */
.b-xpopup_dark-mode-true .b-xpopup__content,
.b-xpopup_dark-mode-true
  .b-xpopup__content
  *:not(.b-xpopup-*):not(.btn):not(.form-control) {
  color: var(--xpopup-content-text);
}

.b-xpopup_dark-mode-true .b-xpopup__content {
  background: var(--xpopup-content-bg);
}

/* Стили для базовых HTML элементов внутри контента */
.b-xpopup_dark-mode-true .b-xpopup__content h1,
.b-xpopup_dark-mode-true .b-xpopup__content h2,
.b-xpopup_dark-mode-true .b-xpopup__content h3,
.b-xpopup_dark-mode-true .b-xpopup__content h4,
.b-xpopup_dark-mode-true .b-xpopup__content h5,
.b-xpopup_dark-mode-true .b-xpopup__content h6 {
  color: #fff;
}

.b-xpopup_dark-mode-true .b-xpopup__content p,
.b-xpopup_dark-mode-true .b-xpopup__content li,
.b-xpopup_dark-mode-true .b-xpopup__content span:not(.badge):not(.btn-text) {
  color: var(--xpopup-content-text);
}

.b-xpopup_dark-mode-true .b-xpopup__content a:not(.btn) {
  color: #8ab4f8;
}

.b-xpopup_dark-mode-true .b-xpopup__content a:not(.btn):hover {
  color: #aec9ff;
}

/* Стили для форм и полей ввода */
.b-xpopup_dark-mode-true .b-xpopup__content label {
  color: #ccc;
}

.b-xpopup_dark-mode-true .b-xpopup__content input,
.b-xpopup_dark-mode-true .b-xpopup__content select,
.b-xpopup_dark-mode-true .b-xpopup__content textarea {
  background: var(--xpopup-input-bg);
  color: var(--xpopup-input-text);
  border-color: var(--xpopup-input-border);
}

.b-xpopup_dark-mode-true .b-xpopup__content input:focus,
.b-xpopup_dark-mode-true .b-xpopup__content select:focus,
.b-xpopup_dark-mode-true .b-xpopup__content textarea:focus {
  border-color: #8ab4f8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
}

/* Стили для таблиц */
.b-xpopup_dark-mode-true .b-xpopup__content table {
  color: var(--xpopup-content-text);
  border-color: var(--xpopup-content-border);
}

.b-xpopup_dark-mode-true .b-xpopup__content th,
.b-xpopup_dark-mode-true .b-xpopup__content td {
  border-color: var(--xpopup-content-border);
}

/* Стили для кнопок (не Bootstrap) */
.b-xpopup_dark-mode-true .b-xpopup__content button:not(.btn) {
  background: #2d2d44;
  color: #eee;
  border: 1px solid #444;
}

.b-xpopup_dark-mode-true .b-xpopup__content button:not(.btn):hover {
  background: #3d3d5c;
}

/* Стили для превью кода */
.b-xpopup_dark-mode-true .b-xpopup__content pre,
.b-xpopup_dark-mode-true .b-xpopup__content code {
  background: #2d2d44;
  color: #e06c75;
  border-color: #444;
}

/* Стили для карточек и панелей */
.b-xpopup_dark-mode-true .b-xpopup__content .card,
.b-xpopup_dark-mode-true .b-xpopup__content .panel,
.b-xpopup_dark-mode-true .b-xpopup__content .alert {
  background: #2d2d44;
  border-color: #444;
  color: var(--xpopup-content-text);
}

.b-xpopup_dark-mode-true .b-xpopup__content .alert-info {
  background: #1a3a4a;
  border-color: #2a5a6a;
  color: #8dd0ff;
}

/* ============================================================
   СТИЛИ ДЛЯ ФУТЕРА
   ============================================================ */

/* По умолчанию футер не имеет скруглений (они у контента) */
.b-xpopup__footer-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden; /* чтобы контент футера не вылезал за границы */
}

/* Когда футер присутствует, убираем скругления снизу у контента */
.b-xpopup_has-footer_true .b-xpopup__content {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Добавляем скругления снизу для футера, если он есть */
.b-xpopup_has-footer_true .b-xpopup__footer-container {
  border-bottom-left-radius: var(--xpopup_border-radius);
  border-bottom-right-radius: var(--xpopup_border-radius);
}

/* Для совместимости с шапкой: если есть и шапка и футер */
.b-xpopup_has-header_true.b-xpopup_has-footer_true .b-xpopup__content {
  border-radius: 0 !important; /* Нигде нет скруглений у контента */
}

/* Responsive: убираем скругления */
.b-xpopup.b-xpopup_responsive {
  --xpopup_border-radius: 0;
  --xpopup__box_padding: 0;
}

/* ============================================================
   ПОДВАЛ (FOOTER)
   ============================================================ */

/* Сам подвал — flex-контейнер с тремя зонами */
.b-xpopup__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between; /* раскидываем группы по краям */
  gap: 8px; /* промежуток между группами при переносе */
  padding: var(--xpopup_padding_base, 20px);
  background: var(--xpopup__footer_background, #fafafa);
}

/* Группа кнопок */
.b-xpopup__footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* промежуток между кнопками внутри группы */
}

/* Группа слева */
.b-xpopup__footer-group_left {
  justify-content: flex-start;
  margin-right: auto; /* прижимаем к левому краю */
}

/* Группа по центру */
.b-xpopup__footer-group_center {
  justify-content: center;
  /* центрируется автоматически из-за space-between на родителе */
}

/* Группа справа */
.b-xpopup__footer-group_right {
  justify-content: flex-end;
  margin-left: auto; /* прижимаем к правому краю */
}

/* Кнопка действия в подвале */
.b-xpopup__footer-action {
  margin: 0; /* убираем стандартные отступы, gap всё сделает */
  white-space: nowrap; /* предотвращаем перенос текста внутри кнопки */
}

/* Опции закрытия по клику */
.b-xpopup-option_close_on {
  cursor: pointer;
}
.b-xpopup-option_close_off {
  cursor: default;
}

/* ============================================================
   4. ЛОАДЕРЫ (СПИННЕРЫ)
      loader_out — при первом открытии (на весь экран)
      loader_in  — при загрузке внутри уже открытого окна

      Типы лоадеров задаются через CSS-класс на .b-xpopup-loader__spinner:
      - b-xpopup-loader-spinner_default  — стандартный (через background-image)
      - b-xpopup-loader-spinner_circle   — вращающийся круг
      - b-xpopup-loader-spinner_dots     — три прыгающие точки
      - b-xpopup-loader-spinner_line     — бегущая полоса
      - b-xpopup-loader-spinner_pulse    — пульсирующая точка
      - Любой другой класс               — кастомный лоадер пользователя
   ============================================================ */

.b-xpopup-loader {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.b-xpopup-loader_type_in {
  background: rgba(255, 255, 255, 0.75);
}

/* Лоадер показывается и при opening, и при opened */
.b-xpopup_box-status_opening.b-xpopup_status_loading .b-xpopup-loader_type_out,
.b-xpopup_box-status_opened.b-xpopup_status_loading .b-xpopup-loader_type_out {
  display: block;
}

.b-xpopup_box-status_opened.b-xpopup_status_loading .b-xpopup-loader_type_in {
  display: block;
}

/* Общие стили для контейнера спиннера */
.b-xpopup-loader__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* чтобы анимация не обрезалась */
}

/* ============================================================
   4.1. DEFAULT — стандартный спиннер (через SVG-фон)
   ============================================================ */
.b-xpopup-loader-spinner_default {
  width: 64px;
  height: 64px;
  background: url(images/loader-out.svg) center center no-repeat;
  background-size: contain;
}

/* Для внутреннего лоадера — другой цвет */
.b-xpopup-loader_type_in .b-xpopup-loader-spinner_default {
  background-image: url(images/loader-in.svg);
}

/* ============================================================
   4.2. CIRCLE — вращающийся круг (CSS-анимация)
   ============================================================ */
.b-xpopup-loader-spinner_circle {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: xpopup-loader-circle 0.8s linear infinite;
}

.b-xpopup-loader_type_out .b-xpopup-loader-spinner_circle {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

@keyframes xpopup-loader-circle {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ============================================================
   4.4. LINE — бегущая полоса
   ============================================================ */
.b-xpopup-loader-spinner_line {
  width: 120px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.b-xpopup-loader-spinner_line::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  animation: xpopup-loader-line 1.2s ease-in-out infinite;
}

@keyframes xpopup-loader-line {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* ============================================================
   4.5. PULSE — пульсирующая точка
   ============================================================ */
.b-xpopup-loader-spinner_pulse {
  width: 16px;
  height: 16px;
  background: currentColor;
  border-radius: 50%;
  animation: xpopup-loader-pulse 1.2s ease-in-out infinite;
}

.b-xpopup-loader_type_out .b-xpopup-loader-spinner_pulse {
  width: 24px;
  height: 24px;
}

@keyframes xpopup-loader-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
  }
}

/* ============================================================
   4.6. LOADER-OUT: скрываем на мобильных и делаем фон темнее
   ============================================================ */
.b-xpopup-loader_type_out {
  /* background: rgba(0, 0, 0, 0.3);
    overflow: visible;   */
}

.b-xpopup-loader_type_out .b-xpopup-loader__spinner {
  color: #fff; /* для circle/dots/pulse — белый цвет */
}

/* ============================================================
   4.7. PLACEHOLDER — заглушка вместо лоадера
   ============================================================ */
.b-xpopup-loader-placeholder {
  /* Не скрываем — видимостью управляет родительский лоадер */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-xpopup_box-status_opening.b-xpopup_status_loading
  .b-xpopup-loader-placeholder,
.b-xpopup_box-status_opened.b-xpopup_status_loading
  .b-xpopup-loader-placeholder {
  display: flex;
}

/* ============================================================
   5. КНОПКА ЗАКРЫТИЯ
      Три режима позиционирования:
      - inside  — внутри контейнера (в header или content)
      - outside — снаружи контейнера, рядом с верхним правым углом
      - screen  — фиксированно в углу экрана (для image/screen)
   ============================================================ */

/* Базовые стили кнопки закрытия (общие для всех режимов) */
.b-xpopup__close {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow: none;
  text-decoration: none;
  padding: 0;
}
.b-xpopup_status_closing .b-xpopup__close.b-xpopup__close_type_outside {
  display: none !important;
}
.b-xpopup__close:hover,
.b-xpopup__close:focus {
  opacity: 1;
}
.b-xpopup_status_loading .b-xpopup__close {
  display: none;
}

/* ============================================================
   5.1 INSIDE — внутри контейнера
   Позиционируется абсолютно в правом верхнем углу
   шапки (если есть) или контента
   ============================================================ */
.b-xpopup__close_type_inside {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--xpopup__header_height, 56px);
  height: var(--xpopup__header_height, 56px);
  z-index: 2000;
  opacity: 0.7;
  color: currentColor;
}
.b-xpopup__close_type_inside .b-xpopup-ico {
  font-size: 20px;
}
.b-xpopup__close_type_inside:active {
  top: 1px;
}

/* ============================================================
   5.2 OUTSIDE — адаптивная кнопка закрытия
   Позиционируется рядом с верхним правым углом контейнера.
   Алгоритм выбора позиции (в JS):
     1) Места хватает сверху и справа → обе координаты снаружи (белый)
     2) Места хватает сверху, нет справа → X внутри, Y снаружи
     3) Места нет сверху, хватает справа → X снаружи, Y внутри
     4) Места нет ни сверху, ни справа → обе внутри
   Внутренние позиции используют цвет текста шапки.
   ============================================================ */
.b-xpopup__close_type_outside {
  position: absolute;
  /* Координаты задаются через CSS-переменные из JS */
  top: var(--xpopup__close_outside_top, 0px);
  left: var(--xpopup__close_outside_left, 0px);
  width: 30px;
  height: 30px;
  z-index: 1047;
  opacity: 0.85;
  /* По умолчанию — белый цвет для внешних позиций */
  color: #fff;
}
.b-xpopup__close_type_outside .b-xpopup-ico {
  font-size: 22px;
}
.b-xpopup__close_type_outside .b-xpopup-ico_close {
  background-color: currentColor;
}
.b-xpopup__close_type_outside:hover {
  opacity: 1;
}

/* Когда кнопка (частично) внутри — цвет как у текста шапки */
.b-xpopup__close_type_outside._inside-corner {
  color: var(--xpopup__ico_close_color, #000);
}
.b-xpopup__close_type_outside._inside-corner .b-xpopup-ico_close {
  background-color: var(--xpopup__ico_close_color, currentColor);
}

/* ============================================================
   5.3 SCREEN — фиксированная в углу экрана
   Используется для image-типа и полноэкранных режимов.
   Полупрозрачный тёмный фон, белая иконка.
   НЕ зависит от CSS-переменных outside-позиционирования.
   ============================================================ */
.b-xpopup__close_type_screen {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: none;
  /* border-radius: 6px; */
  z-index: 1051;
  opacity: 0.75;
  color: #fff; /* белая иконка */
  /* Сбрасываем outside-переменные */
  --xpopup__close_outside_top: auto;
  --xpopup__close_outside_left: auto;
}
.b-xpopup__close_type_screen .b-xpopup-ico {
  font-size: 24px;
}
.b-xpopup__close_type_screen .b-xpopup-ico_close {
  background-color: #fff; /* всегда белый */
}
.b-xpopup__close_type_screen:hover {
  opacity: 1;
  /* background: rgba(0, 0, 0, 0.7); */
}
/* Убираем _inside-corner для screen (если случайно добавился) */
.b-xpopup__close_type_screen._inside-corner {
  color: #fff;
}
.b-xpopup__close_type_screen._inside-corner .b-xpopup-ico_close {
  background-color: #fff;
}

/* ============================================================
   6. ЗАГОЛОВОК (HEADER)
      Шапка окна с заголовком, иконкой, кнопкой "назад"
      и выпадающим меню действий.
   ============================================================ */
.b-xpopup__header-container {
  position: relative;
}

/* Меню действий в шапке */
.b-xpopup__header-actions {
  position: absolute;
  height: var(--xpopup__header_height, 56px);
  line-height: var(--xpopup__header_height, 56px);
  right: 60px;
  top: 0;
  z-index: 10;
  user-select: none;
  white-space: nowrap;
}

.b-xpopup__header-actions-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--xpopup__header_height, 56px);
  cursor: pointer;
  outline: none;
  opacity: 0.7;
  /* vertical-align: middle; */
  position: relative;
}

.b-xpopup__header-actions-toggler .b-xpopup-ico {
  font-size: 20px;
}

.b-xpopup__header-actions-toggler:hover {
  opacity: 1;
}

/* Скрываем только текст, но не иконку */
.b-xpopup__header-actions-toggler-text {
  display: none;
}

/* Выпадающий список действий */
.b-xpopup__header-actions-items {
  border: 0;
  background: #fff;
  display: none;
  /* margin: 42px 0 0 0; */
  padding: 8px 0;
  list-style: none;
  border-radius: 3px;
  position: absolute;
  top: 45px;
  right: 2px;
  box-shadow: 0 0 2px #bcbcbc;
  font-size: 14px;
}

/* Стрелка выпадающего меню */
.b-xpopup__header-actions-items:after,
.b-xpopup__header-actions-items:before {
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  bottom: 100%;
  right: 10.5px;
}
.b-xpopup__header-actions-items:before {
  border-width: 6px;
  margin: 0;
  border-bottom-color: #e6e6e6;
}
.b-xpopup__header-actions-items:after {
  border-width: 5px;
  margin: 0 1px;
  border-bottom-color: #fff;
}

.b-xpopup__header-action {
  padding: 0;
}

/* Ссылка действия */
.b-xpopup__header-action-link {
  border-top: #fff solid 1px;
  border-bottom: #fff solid 1px;
  display: block;
  padding: 6px 12px;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  font-weight: normal;
  line-height: 1.5;
  color: #555 !important;
}
.b-xpopup__header-action-link:hover {
  background: #f9f9f9;
  color: #000;
}
.b-xpopup__header-action-link i {
  font-style: normal;
}
.b-xpopup__header-action-link .b-ico {
  margin-right: 15px;
  opacity: 0.7;
}

/* Действие с иконками */
.b-xpopup__header-action-link._has-icons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  position: relative;
}
.b-xpopup__header-action-link._has-icons .b-ico {
  color: var(--global-text-muted, #777);
  font-size: var(--global-font-size-small, small);
}
.b-xpopup__header-action-link._has-icons .__icon {
  width: 15px;
}
.b-xpopup__header-action-link._has-icons .__hint-icon {
  width: 15px;
  margin-left: auto;
}

/* Разделитель и заголовок в меню */
.b-xpopup__header-actions-divider {
  height: 1px;
  margin: 9.5px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.b-xpopup__header-actions-header {
  display: block;
  padding: 6px 12px;
  font-size: small;
  color: #999;
  white-space: nowrap;
}

/* ============================================================
   7. КНОПКА "НАЗАД"
   ============================================================ */
.b-xpopup-action {
  cursor: pointer;
}

/* Кнопка "Назад" */
.b-xpopup-action_type_back {
  height: var(--xpopup__header_height, 56px);
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -5px;
  opacity: 0.5;
  cursor: pointer;
  float: left;
}

.b-xpopup-action_type_back .b-xpopup-ico {
  font-size: 18px;
}

.b-xpopup-action_type_back:hover {
  opacity: 1;
}

/* ============================================================
   8. ТИПЫ КОНТЕНТА
   ============================================================ */

/* ---- 8.1 IFRAME ---- */
.b-xpopup_type_iframe .b-xpopup__content {
  line-height: 0;
}
.b-xpopup_type_iframe .b-xpopup__close_type_inside {
  top: 0 !important;
}

/* ---- 8.2 IMAGE И ГАЛЕРЕЯ ---- */
.b-xpopup_type_image .b-xpopup__content {
  text-align: center;
}

/*
   Структура изображения:
   .b-xpopup-image               — контейнер на весь экран (relative)
   .b-xpopup-image__anim-layer   — слой для box-анимаций (flex, центрирует)
   .b-xpopup-image__img          — само изображение
*/

/* Контейнер — на весь экран */
.b-xpopup-image {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Слой анимации — цель для box-анимаций, центрирует содержимое */
.b-xpopup-image__anim-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-xpopup__size-holder {
  /* Делаем size-holder прозрачным для кликов - иначе может не работать click on bg для image */
  pointer-events: none;
}

/* Само изображение */
.b-xpopup-image__img {
  display: inline-block;
  max-width: 100vw;
  max-height: 100vh;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  /* Но само изображение должно оставаться кликабельным для zoom */
  pointer-events: auto;
}

/* Заголовок изображения (внизу) */
.b-xpopup__image-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(180deg, #00000000, #0000009e);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}

/* Счётчик галереи — внизу слева, статичный */
.b-xpopup__gallery-counter {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.9rem;
  z-index: 1050;
  pointer-events: none;
  border-top-right-radius: 4px;
}

/* Действия изображения — вверху справа, статичные */
.b-xpopup__image-actions {
  position: fixed;
  top: 7px;
  right: 47px;
  z-index: 1051;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.b-xpopup__image-action {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  background: transparent center center no-repeat;
  background-size: 18px 18px;
  border-radius: 4px;
  text-decoration: none;
}
.b-xpopup__image-action:hover {
  opacity: 1;
  /* background-color: rgba(0, 0, 0, 0.6); */
}

/* Иконки действий */
.b-xpopup__image-action_download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
  top: 1px;
}
.b-xpopup__image-action_share {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}

/* Стрелки навигации (влево/вправо) */
.b-xpopup__arrow {
  position: fixed;
  top: var(
    --xpopup__header_height,
    60
  ); /* чтобы не перекрывать иконку "Закрыть" */
  bottom: var(--xpopup__header_height, 60);
  display: flex;
  /* border-radius: 50%; */
  width: 64px;
  /* height: 100%; */
  cursor: pointer;
  opacity: 0.4;
  /* background-color: rgba(0, 0, 0, 0.1); */
  z-index: 1050;
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease;
  align-items: center;
  justify-content: center;
}
.b-xpopup__arrow .b-xpopup-ico {
  font-size: 2rem;
}

.b-xpopup__arrow_left {
  left: 0;
}
.b-xpopup__arrow_right {
  right: 0;
}
.b-xpopup__arrow:hover {
  opacity: 1;
  /* background-color: rgba(0, 0, 0, 0.1); */
}
.b-xpopup__arrow:active {
  transition: none;
}
/* .b-xpopup__arrow.b-xpopup__arrow_active {
    opacity: 1 !important;
} */

/* Touch-свайпы в галерее */
.b-xpopup_type_image .b-xpopup__content-container {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.b-xpopup_type_image .b-xpopup__content {
  touch-action: pan-y pinch-zoom;
}

/* Классы направления листания (обратная совместимость) */
.b-xpopup_type_image.b-clicked-arrow_left .b-xpopup__content-container,
.b-xpopup_type_image.b-clicked-arrow_right .b-xpopup__content-container {
  /* управляется через JS */
}

/* ============================================================
   9. ZOOM ИЗОБРАЖЕНИЯ (двойной клик)
      Включается классом b-xpopup-option_zoomed_true.
      Изображение показывается в полном размере с прокруткой.
   ============================================================ */
.b-xpopup-option_zoomed_true.b-xpopup__box {
  overflow: auto !important;
}
.b-xpopup-option_zoomed_true .b-xpopup__content {
  /* overflow: visible !important; */
}
.b-xpopup-option_zoomed_true .b-xpopup__content-container {
  overflow: visible !important;
  max-width: none !important;
  touch-action: auto !important;
}
.b-xpopup-option_zoomed_true .b-xpopup__content-inner {
  max-height: none;
}

/* Слой анимации — убираем центрирование, разрешаем скролл */
.b-xpopup-option_zoomed_true .b-xpopup-image__anim-layer {
  /* position: absolute; */
  /* display: block; */
  /* width: 100%;
    height: 100%; */
}

/* Изображение — без ограничений, минимальная высота для маленьких картинок */
.b-xpopup-option_zoomed_true .b-xpopup-image__img {
  height: 100vh;
  transform: scale(1.1);
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

/* ============================================================
   10. ИНДИКАТОР ЗАГРУЗКИ В ГАЛЕРЕЕ
   ============================================================ */
.b-xpopup__image-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: xpopup-spin 1s linear infinite;
  z-index: 10;
  display: none;
}
.b-xpopup_status_loading .b-xpopup__image-loading-indicator {
  display: block;
}

@keyframes xpopup-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================================
   11. ОТОБРАЖЕНИЕ ОШИБОК
   ============================================================ */
.b-xpopup-error {
  padding: 40px 20px;
  text-align: center;
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: var(--xpopup_border-radius, 5px);
  margin: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.b-xpopup-error a {
  color: #721c24;
  font-weight: bold;
  text-decoration: underline;
}
.b-xpopup-error a:hover {
  color: #491217;
}

/* ============================================================
   12. ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ
   ============================================================ */
/* Clearfix */
.b-xpopup-clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.b-xpopup-clearfix {
  display: inline-block;
}
* html .b-xpopup-clearfix {
  height: 1%;
}
.b-xpopup-clearfix {
  display: block;
}

/* Залипающая шапка */
.b-xpopup-stick-top.b-xpopup__header-container {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1000;
  top: calc(0px - var(--xpopup__box_padding));
}

.b-xpopup_has-sticked .b-xpopup__content-container {
  overflow: visible !important;
}

.b-xpopup_has-sticked .b-xpopup__content-container, 
.b-xpopup_has-sticked .b-xpopup__header-container,
.b-xpopup_has-sticked .b-xpopup__header
{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Ожидание загрузки CSS для контента внутри popup */
.b-xpopup .b-element-waiting-for-css {
  opacity: 0;
  transition: 0.1s;
}

/* ============================================================
   СИСТЕМА ИКОНОК XPOPUP (через CSS mask + CSS-переменные для цвета)
   Цвет управляется CSS-переменными, которые переопределяются в скинах
   ============================================================ */
.b-xpopup-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;

  /* Маска */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  /* Цвет через CSS-переменную, с fallback на currentColor */
  background-color: currentColor;
}

/* Иконка закрытия (крестик) */
.b-xpopup-ico_close {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_close_color, currentColor);
}

/* Иконка закрытия outside — через переменную */
.b-xpopup__close_type_outside .b-xpopup-ico_close {
  background-color: var(--xpopup__ico_close_color_outside, #fff);
}

/* Иконка назад (стрелка влево) */
.b-xpopup-ico_back {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 4l-6 6 6 6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 4l-6 6 6 6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_back_color, currentColor);
}

/* Иконка меню действий (три точки) */
.b-xpopup-ico_actions {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4' r='1.5' fill='white'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3Ccircle cx='10' cy='16' r='1.5' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4' r='1.5' fill='white'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3Ccircle cx='10' cy='16' r='1.5' fill='white'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_actions_color, currentColor);
}

/* Иконка вопроса (подсказка) */
.b-xpopup-ico_question {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' stroke='white' stroke-width='2' fill='none'/%3E%3Cpath d='M8 8a2 2 0 114 0c0 2-2 3-2 3v1' stroke='white' stroke-width='2' fill='none'/%3E%3Ccircle cx='10' cy='14' r='0.5' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' stroke='white' stroke-width='2' fill='none'/%3E%3Cpath d='M8 8a2 2 0 114 0c0 2-2 3-2 3v1' stroke='white' stroke-width='2' fill='none'/%3E%3Ccircle cx='10' cy='14' r='0.5' fill='white'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_question_color, currentColor);
}

/* ============================================================
   ИКОНКИ ГАЛЕРЕИ (стрелки влево/вправо)
   ============================================================ */

/* Стрелка влево (контур) */
.b-xpopup-ico_arrow-left {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 4L6 10L12 16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 4L6 10L12 16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_arrow_left_color, currentColor);
  position: relative;
  right: 3px;
}

/* Стрелка вправо (контур) */
.b-xpopup-ico_arrow-right {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 4L14 10L8 16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 4L14 10L8 16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_arrow_right_color, currentColor);
  position: relative;
  left: 3px;
}

/* Стрелка влево (закрашенная) - опционально */
.b-xpopup-ico_arrow-left-filled {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13 3L5 10L13 17V3Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13 3L5 10L13 17V3Z' fill='white'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_arrow_left_color, currentColor);
  position: relative;
  right: 3px;
}

/* Стрелка вправо (закрашенная) - опционально */
.b-xpopup-ico_arrow-right-filled {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 3L15 10L7 17V3Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 3L15 10L7 17V3Z' fill='white'/%3E%3C/svg%3E");
  background-color: var(--xpopup__ico_arrow_right_color, currentColor);
  position: relative;
  left: 3px;
}