/* --- Стили для модального окна --- */
.modal-overlay {
    display: none; /* Изначально скрыто */
    position: fixed; /* Фиксированное положение относительно viewport */
    z-index: 100; /* Поверх всех остальных элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Добавляем прокрутку, если контент не помещается */
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон */
    backdrop-filter: blur(5px); /* Эффект размытия фона */
    display: flex; /* Используем flexbox для центрирования */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Изначально прозрачное для анимации появления */
    visibility: hidden; /* Изначально невидимое для анимации появления */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-overlay.active {
    opacity: 1; /* Полная видимость при активном состоянии */
    visibility: visible;
}

.modal-content {
    background: linear-gradient(45deg, #3a0d5e, #5a0d7e); /* Градиентный фон для модального окна */
    margin: auto; /* Центрирование */
    padding: 30px;
    border: 2px solid #00ffff; /* Неоновая рамка */
    border-radius: 15px; /* Закругленные углы */
    width: 80%; /* Ширина модального окна */
    max-width: 500px; /* Максимальная ширина */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7), 0 0 30px rgba(160, 32, 240, 0.7); /* Неоновое свечение */
    position: relative;
    color: #ffffff;
    text-align: center;
    transform: translateY(-50px); /* Смещение для анимации появления */
    opacity: 0; /* Прозрачность для анимации появления */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal-overlay.active .modal-content {
    transform: translateY(0); /* Возвращаем в исходное положение */
    opacity: 1; /* Полная видимость */
}

.close-button {
    color: #00ffff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #a020f0; /* Фиолетовый при наведении */
    text-decoration: none;
    cursor: pointer;
}

.modal-content h2 {
    color: #00ffff;
    font-size: 2em;
    margin-bottom: 15px;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.modal-content p {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 20px;
}

.modal-button {
    background: linear-gradient(45deg, #00ffff, #a020f0);
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    transition: all 0.3s ease;
    font-size: 1.1em;
}

.modal-button:hover {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 25px rgba(160, 32, 240, 0.8);
    transform: translateY(-2px);
}


/* --- Стили для подарочка --- */
.gift-box {
    position: fixed; /* Абсолютное позиционирование, чтобы можно было разместить в углу */
    bottom: 40px;
     right: 40px; /* Отступ справа */
    z-index: 110; /* Поверх всех остальных элементов */
    cursor: pointer;
    transition: transform 0.1s ease-in-out; /* Плавность для анимации "тряски" */
    animation: shake-gift 2s infinite ease-in-out; /* Анимация тряски */
    width: 90px; /* Ширина подарка */
    height: 90px; /* Высота подарка */
    display: flex;
    align-items: center;
    justify-content: center;
  
}

.gift-box:hover {
    transform: scale(1.1); /* Увеличение при наведении */
}

.gift-icon {
    width: 80px; /* Размер иконки подарочка */
    height: auto;
    /*filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)); /* Неоновое свечение для подарочка */
}

/* Анимация "тряски" подарочка */
@keyframes shake-gift {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-3deg); }
    20%, 40%, 60%, 80% { transform: rotate(3deg); }
}