/* ===== CSS VARIABLES ===== */
:root {
  /* Высота контейнеров */
  --gallery-height: 220px;
  --gallery-height-md: 180px;
  --gallery-height-sm: 150px;

  /* Цвета модального окна */
  --modal-bg: rgba(0, 0, 0, 0.95);
  --modal-content-bg: rgba(17, 24, 28, 0.95);
  --modal-border: rgba(255, 255, 255, 0.2);

  /* Цвета кнопок */
  --button-bg: rgba(255, 107, 53, 0.9);
  --button-hover: rgba(255, 140, 0, 0.9);
  --button-disabled: rgba(255, 107, 53, 0.3);

  /* Размеры кнопок */
  --close-btn-size: 45px;
  --close-btn-size-md: 40px;
  --close-btn-size-sm: 35px;

  --arrow-btn-size: 50px;
  --arrow-btn-size-md: 40px;
  --arrow-btn-size-sm: 35px;

  /* Градиенты */
  --hover-gradient: linear-gradient(135deg,
    rgba(0, 0, 0, 0.7),
    rgba(255, 107, 53, 0.3)) !important;
}

/* ===== ГАЛЕРЕЯ СКРИНШОТОВ ===== */

/* Базовые контейнеры */
.screenshot-container,
.screenshot-container-fixed {
  height: var(--gallery-height);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent !important;
  margin-bottom: 1rem;
}

/* Для фиксированных контейнеров */
.screenshot-container-fixed {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Карточки скриншотов */
.screenshot-card,
.screenshot-card-fixed {
  background: transparent !important;
  border: none !important;
  height: 100%;
  transition: all 0.3s ease;
}

.screenshot-card-fixed {
  height: 100%;
}

/* Изображения скриншотов */
.screenshot-image,
.screenshot-image-fixed {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  object-fit: cover !important;
  cursor: pointer !important;
  width: 100%;
  height: 100%;
  display: block;
}

.screenshot-image-fixed {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* Hover эффект ТОЛЬКО изменение курсора */
.screenshot-image:hover,
.screenshot-image-fixed:hover {
  cursor: pointer !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hover оверлей для карточек */
.hover-overlay {
  background: var(--hover-gradient);
  pointer-events: none;
  transition: opacity 0.3s ease !important;
  opacity: 0;
}

.screenshot-container:hover .hover-overlay,
.screenshot-container-fixed:hover .hover-overlay {
  opacity: 1;
}

/* ===== МОДАЛЬНОЕ ОКНО ГАЛЕРЕИ ===== */

/* Основное модальное окно */
#screenshotModal.modal {
  background: var(--modal-bg) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 9999 !important;
}

#screenshotModal .modal-dialog {
  max-width: 95vw !important;
  max-height: 95vh !important;
  margin: 2rem auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#screenshotModal .modal-content {
  background: var(--modal-content-bg) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--modal-border) !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Тело модального окна */
#screenshotModal .modal-body {
    padding: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 85vh !important;  /* Увеличено с 70vh до 85vh */
    position: relative !important;
    overflow: hidden !important;
}

/* Изображение в модальном окне */
#screenshotModal .screenshot-full {
    max-width: 90vw !important;
    max-height: 80vh !important;  /* Увеличено с 70vh до 80vh */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    transition: transform 0.3s ease !important;
}

/* ===== КНОПКИ МОДАЛЬНОГО ОКНА ===== */

/* Кнопка закрытия - правый верхний угол */
#screenshotModal .screenshot-close {
  position: absolute !important;
  top: 5px !important;
  right: 100px !important;
  z-index: 100002 !important;  /* УВЕЛИЧИВАЕМ с 100001 до 100002 */
  background: var(--button-bg) !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  color: white !important;
  font-size: 1.2rem !important;
  width: var(--close-btn-size) !important;
  height: var(--close-btn-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#screenshotModal .screenshot-close:hover {
  background: var(--button-hover) !important;
  transform: scale(1.1) !important;
}

/* Стрелки - боковые кнопки */
#screenshotModal .nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100000 !important;
    background: rgba(255, 107, 53, 0.9) !important;  /* Более заметный фон */
    border: 3px solid white !important;  /* Более толстая рамка */
    border-radius: 50% !important;
    color: white !important;
    width: var(--arrow-btn-size) !important;
    height: var(--arrow-btn-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;  /* Увеличены стрелки */
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);  /* Тень для контраста */
}

/* Счетчик - нижний центр */
#screenshotModal .screenshot-counter {
    position: absolute !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100000 !important;
    background: rgba(40, 40, 40, 0.7) !important;  /* Полупрозрачный серый фон */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important;
    padding: 12px 25px !important;
    color: white !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    backdrop-filter: blur(5px) !important;
    min-width: 120px;
    text-align: center;
}

/* Левая стрелка */
#screenshotModal .prev-arrow {
  left: 90px !important;
}

/* Правая стрелка */
#screenshotModal .next-arrow {
  right: 90px !important;
}

#screenshotModal .nav-arrow:hover:not(:disabled) {
  background: var(--button-hover) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

#screenshotModal .nav-arrow:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: var(--button-disabled) !important;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width: 768px) {
  /* Контейнеры */
  .screenshot-container-fixed,
  .screenshot-container {
    height: var(--gallery-height-md) !important;
  }

  /* Стрелки */
  #screenshotModal .nav-arrow {
    width: var(--arrow-btn-size-md) !important;
    height: var(--arrow-btn-size-md) !important;
    font-size: 1.2rem !important;
  }

  #screenshotModal .prev-arrow {
    left: 10px !important;
  }

  #screenshotModal .next-arrow {
    right: 10px !important;
  }

  /* Счетчик */
  #screenshotModal .screenshot-counter {
    bottom: 15px !important;
    padding: 8px 16px !important;
    font-size: 1rem !important;
  }

  /* Изображение в модальном */
  #screenshotModal .screenshot-full {
    max-width: 95vw !important;
    max-height: 60vh !important;
  }
}

@media (max-width: 576px) {
  /* Контейнеры */
  .screenshot-container-fixed,
  .screenshot-container {
    height: var(--gallery-height-sm) !important;
  }

  /* Счетчик */
  #screenshotModal .screenshot-counter {
    bottom: 10px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    min-width: 80px;
  }

  /* Изображение в модальном */
  #screenshotModal .screenshot-full {
    max-height: 50vh !important;
  }
}