/* --- Стили для работы поп-апов --- */

/* Стили для первого поп-апа */
#rec2268945971 {
    display: none; /* Скрываем поп-ап по умолчанию */
    position: fixed; /* Фиксируем на экране */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; /* Убедимся, что он поверх всего */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный темный фон */
    justify-content: center; /* Центрируем контент по горизонтали */
    align-items: center; /* Центрируем контент по вертикали */
    overflow-y: auto; /* Добавляем прокрутку, если контент блока большой */
    opacity: 0; /* Для плавной анимации появления */
    visibility: hidden; /* Скрываем, пока не появится */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Класс, который будет добавляться для отображения первого поп-апа */
#rec2268945971.is-visible {
    display: flex; /* Или block, flex - зависит от того, как контент должен располагаться */
    opacity: 1;
    visibility: visible;
}

/* Стили для второго поп-апа */
#rec2269108951 {
    display: none; /* Скрываем поп-ап по умолчанию */
    position: fixed; /* Фиксируем на экране */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010; /* Немного выше, чтобы перекрывал первый, если они одновременно открыты (что не предполагается, но лучше иметь запас) */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный темный фон */
    justify-content: center; /* Центрируем контент по горизонтали */
    align-items: center; /* Центрируем контент по вертикали */
    overflow-y: auto; /* Добавляем прокрутку, если контент блока большой */
    opacity: 0; /* Для плавной анимации появления */
    visibility: hidden; /* Скрываем, пока не появится */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Класс, который будет добавляться для отображения второго поп-апа */
#rec2269108951.is-visible {
    display: flex; /* Или block, flex - зависит от того, как контент должен располагаться */
    opacity: 1;
    visibility: visible;
}


/* Стили для программно созданных кнопок закрытия */
.custom-close-button {
    position: absolute;
    top: 15px; /* Отступ сверху */
    right: 15px; /* Отступ справа */
    font-size: 30px; /* Размер шрифта (крестика) */
    color: #fff; /* Белый цвет */
    cursor: pointer; /* Показываем, что это кликабельный элемент */
    z-index: 1001; /* Убедимся, что кнопка поверх контента поп-апа */
    padding: 5px; /* Небольшой отступ вокруг крестика для удобства клика */
    transition: color 0.2s ease; /* Плавное изменение цвета при наведении */
}

.custom-close-button:hover {
    color: #ccc; /* Цвет при наведении (чуть темнее) */
}

/* --- Конец стилей для работы поп-апов --- */