/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jun 25 2025 | 12:54:06 */
/* Основные стили страницы */
body {
    font-family: Arial, sans-serif; /* Устанавливаем шрифт Arial или sans-serif как запасной */
    background-color: transparent; /* Делаем фон прозрачным */
    margin: 0; /* Убираем внешние отступы у body */
    padding: 20px; /* Добавляем внутренний отступ 20px со всех сторон */
}

/* Контейнер для всей галереи */
.gallery-wrapper {
    position: relative; /* Позиционируем относительно для абсолютного позиционирования кнопок */
    max-width: 100%; /* Максимальная ширина равна ширине родителя */
    margin: 0 auto; /* Центрируем по горизонтали */
}

/* Контейнер с возможностью горизонтальной прокрутки */
.gallery-container {
    width: 100%; /* Занимает всю доступную ширину */
    overflow-x: hidden; /* Скрываем горизонтальную полосу прокрутки */
    scroll-behavior: smooth; /* Включаем плавную прокрутку */
}

/* Стили для контейнера с изображениями */
.gallery {
    display: flex; /* Используем flex-контейнер для горизонтального расположения */
    gap: 15px; /* Расстояние между элементами галереи */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    transition: transform 0.3s ease; /* Плавное изменение при трансформации */
}

/* Стили для каждого элемента галереи */
.gallery-item {
    cursor: pointer; /* Меняем курсор на указатель при наведении */
    transition: transform 0.3s; /* Плавное изменение масштаба */
    border: 3px solid #bba460; /* Золотистая рамка толщиной 3px */
    box-sizing: border-box; /* Учитываем рамку в общей ширине элемента */
    flex-shrink: 0; /* Запрещаем сжатие элементов */
}

/* Эффект при наведении на элемент галереи */
.gallery-item:hover {
    transform: scale(1.05); /* Увеличиваем элемент на 5% */
}

/* Стили для изображений в галерее */
.gallery-item img {
    width: 300px; /* Фиксированная ширина изображения */
    height: 200px; /* Фиксированная высота изображения */
    object-fit: cover; /* Обрезаем изображение, сохраняя пропорции */
    display: block; /* Убираем лишнее пространство под изображением */
}

/* Общие стили для кнопок прокрутки */
.scroll-btn {
    position: absolute; /* Абсолютное позиционирование относительно gallery-wrapper */
    top: 50%; /* Позиционируем по вертикали по центру */
    transform: translateY(-50%); /* Точное центрирование по вертикали */
    width: 40px; /* Ширина кнопки */
    height: 60px; /* Высота кнопки */
    background-color: rgba(187, 164, 96, 0.7); /* Золотистый фон с прозрачностью 70% */
    color: white; /* Белый цвет текста/стрелки */
    border: none; /* Убираем стандартную рамку */
    font-size: 24px; /* Размер стрелки */
    cursor: pointer; /* Курсор-указатель */
    z-index: 10; /* Располагаем выше других элементов */
    display: flex; /* Используем flex для центрирования */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    border-radius: 4px; /* Слегка скругляем углы */
}

/* Эффект при наведении на кнопку прокрутки */
.scroll-btn:hover {
    background-color: rgba(187, 164, 96, 0.9); /* Увеличиваем непрозрачность до 90% */
}

/* Позиционирование левой кнопки прокрутки */
.scroll-left {
    left: 10px; /* Отступ слева 10px */
}

/* Позиционирование правой кнопки прокрутки */
.scroll-right {
    right: 10px; /* Отступ справа 10px */
}

/* Стили для попапа (модального окна) */
.popup {
    display: none; /* По умолчанию скрыт */
    position: fixed; /* Фиксированное позиционирование */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Прижимаем к левому краю */
    width: 100%; /* На всю ширину экрана */
    height: 100%; /* На всю высоту экрана */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    z-index: 1000; /* Располагаем поверх всех элементов */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
}

/* Контейнер для содержимого попапа */
.popup-content {
    position: relative; /* Относительное позиционирование для абсолютных дочерних элементов */
    max-width: 90%; /* Максимальная ширина 90% от экрана */
    max-height: 90%; /* Максимальная высота 90% от экрана */
    display: flex; /* Используем flex */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
}

/* Стили для изображения в попапе */
.popup-img {
    border: 3px solid #bba460; /* Золотистая рамка */
    max-width: 100%; /* Максимальная ширина 100% от родителя */
    max-height: 90vh; /* Максимальная высота 90% от высоты экрана */
    display: block; /* Блочное отображение */
}

/* Стили для кнопки закрытия попапа */
.close-btn {
    position: absolute; /* Абсолютное позиционирование */
    top: -15px; /* Смещаем вверх от контейнера */
    right: -15px; /* Смещаем вправо от контейнера */
    width: 30px; /* Ширина кнопки */
    height: 30px; /* Высота кнопки */
    background-color: #bba460; /* Золотистый фон */
    color: white; /* Белый цвет текста */
    border-radius: 50%; /* Делаем круглой формы */
    display: flex; /* Используем flex */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    cursor: pointer; /* Курсор-указатель */
    font-size: 20px; /* Размер крестика */
    font-weight: bold; /* Жирный шрифт */
    z-index: 1001; /* Располагаем выше содержимого попапа */
}

/* Общие стили для кнопок навигации в попапе */
.popup-nav {
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Позиционируем по вертикали по центру */
    transform: translateY(-50%); /* Точное центрирование */
    width: 40px; /* Ширина кнопки */
    height: 60px; /* Высота кнопки */
    background-color: rgba(187, 164, 96, 0.7); /* Золотистый фон с прозрачностью */
    color: white; /* Белый цвет стрелок */
    border: none; /* Убираем рамку */
    font-size: 24px; /* Размер стрелок */
    cursor: pointer; /* Курсор-указатель */
    z-index: 1001; /* Располагаем выше содержимого попапа */
    display: flex; /* Используем flex */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    border-radius: 4px; /* Слегка скругляем углы */
}

/* Эффект при наведении на кнопку навигации */
.popup-nav:hover {
    background-color: rgba(187, 164, 96, 0.9); /* Увеличиваем непрозрачность */
}

/* Позиционирование кнопки "назад" */
.popup-prev {
    left: 20px; /* Отступ слева 20px */
}

/* Позиционирование кнопки "вперед" */
.popup-next {
    right: 20px; /* Отступ справа 20px */
}