:root {
  --mobile-small-width: 390;
  --mobile-small-height: 551;
}

/* Модальное окно */
.image-viewer {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--background-viewer);
  z-index: 9999;
  animation: fadeIn 0.3s ease-in;
}

.image-viewer.active {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: auto;
  padding: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Контейнер контента */
.image-viewer-content {
  position: relative;
  width: auto;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Основная область с изображением */
.image-viewer-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.1s ease-out;
}

.image-viewer-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Общие стили для кнопок */
.image-viewer-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-viewer-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Кнопка полноэкрана */
.image-viewer-fullscreen {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  width: 40px;
  height: 40px;
}

.image-viewer-fullscreen:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

.image-viewer-close {
  width: 50px;
  height: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.7s ease-out, transform 0.2s ease;
}

.image-viewer-close:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

/* Кнопка закрытия в полноэкранном режиме */
.image-viewer-close-fullscreen {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  width: 50px;
  height: 50px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.image-viewer-close-fullscreen:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

/* Карточки лицензий */
.licenses-card-image img {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.licenses-card-image img:hover {
  transform: scale(1.05);
}

/* ============================================
   ПОЛНОЭКРАННЫЙ РЕЖИМ (базовые стили)
   ============================================ */
.image-viewer.fullscreen .image-viewer-close {
  opacity: 0;
  pointer-events: none;
}

.image-viewer.fullscreen .image-viewer-prev,
.image-viewer.fullscreen .image-viewer-next {
  display: none !important;
}

/* Обеспечиваем горизонтальный скролл в полноэкранном режиме */
.image-viewer.fullscreen {
  overflow-x: auto !important;
  overflow-y: auto !important;
  display: block !important; /* Меняем с flex на block для нормального скролла */
  padding: 0 !important;
  background-color: var(--background-viewer);
  align-items: flex-start;
  justify-content: center;
  /* Отключаем селект текста при перетаскивании */
  user-select: none;
  -webkit-user-select: none;
}

/* Контент в полноэкранном режиме занимает всю ширину */
.image-viewer.fullscreen .image-viewer-content {
  width: auto;
  height: auto;
  gap: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  animation: none;
}

.image-viewer.fullscreen .image-viewer-main {
  background: transparent;

  /* Центрируем блок с изображением по горизонтали */
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  width: fit-content; /* Ширина равна содержимому */
  height: auto;
  align-items: unset;
  justify-content: unset;
}

/* Оригинальный размер изображения без масштабирования */
.image-viewer.fullscreen .image-viewer-main img {
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  /* Позволяем изображению быть больше контейнера, если это необходимо */
  width: auto;
  height: auto;
  display: block;
  /* Стили для drag and drop изображения */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  cursor: grab;
  transition: cursor 0.2s ease;
}

.image-viewer.fullscreen .image-viewer-main img:active {
  cursor: grabbing;
}

/* ============================================
   ДЕСКТОП (>= 1440px) desktop
   ============================================ */
@media (min-width: 1440px) {
  .image-viewer.fullscreen .image-viewer-main {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}

/* ============================================
   ПЛАНШЕТЫ (1024px - 1439px) tablet-large
   ============================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
}

/* ============================================
   ПЛАНШЕТЫ (744px - 1023px) tablet
   ============================================ */
@media (min-width: 744px) and (max-width: 1023px) {
}

/* ============================================
   МОБИЛЬНЫЕ (430px - 743px) mobile
   ============================================ */
@media (max-width: 743px) {
}

/* ============================================
   МАЛЫЕ МОБИЛЬНЫЕ (до 429px) mobile-small
   ============================================ */
@media (max-width: 429px) {
  .image-viewer {
    padding: 0px;
    overflow: auto;
  }

  .image-viewer.active {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    justify-content: center;
    display: block;
  }

  .image-viewer-content {
    overflow: visible;
  }

  .image-viewer-main {
    width: var(--mobile-small-width) px;
    height: var(--mobile-small-height) px;
    overflow: visible;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .image-viewer-main img {
    width: var(--mobile-small-width) px;
    height: var(--mobile-small-height) px;
    object-fit: contain;
  }

  .image-viewer-fullscreen:hover,
  .image-viewer-close-fullscreen:hover {
    transform: none;
    opacity: 1;
  }

  .licenses-card-image img:hover {
    transform: none;
  }
}

/* ============================================
   ТАЧ-УСТРОЙСТВА
   ============================================ */
@media (hover: none) {
  .image-viewer-fullscreen:active,
  .image-viewer-close:active,
  .image-viewer-close-fullscreen:active {
    opacity: 0.5;
  }
}