/* Подключаем шрифт */
@font-face {
    font-family: 'SmoothRelief';
    src: url('../assets/fonts/SmoothRelief-Regular.woff2') format('woff2'),
         url('../assets/fonts/SmoothRelief-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Используем swap для улучшения загрузки */
  }

/* Стиль claim-кнопки */
.claim-button {
    background-color: #1b7f1f; /* Исходный зелёный фон */
    border: 2px solid #f8a436; /* Оранжевая рамка */
    border-radius: 25px; /* Скруглённые углы для красоты */
    font-size: 18px; /* Крупный размер текста */
    font-family: 'SmoothRelief', sans-serif; /* Используем подключенный шрифт */
    color: #ffffff; /* Белый текст */
    cursor: pointer; /* Указатель при наведении */
    text-align: center; /* Центрируем текст */
    display: flex; /* Flexbox для выравнивания текста */
    align-items: center; /* Центрируем текст по вертикали */
    justify-content: center; /* Центрируем текст по горизонтали */
    position: absolute; /* Абсолютное позиционирование относительно родителя */
    left: 74px; /* Центрируем кнопку по горизонтали */
    bottom: calc(var(--adjusted-claim-position) + 15px); /* Отодвигаем кнопку вверх от нижнего края */
    width: 100px; /* Фиксированная ширина кнопки */
    height: 32px; /* Фиксированная высота кнопки */
    margin: 0 auto; /* Центральное выравнивание по горизонтали */
    box-shadow: 0 0 5px rgba(4, 75, 28, 0.979), 0 0 15px rgb(3, 73, 3); /* Лёгкая тень */
    z-index: 2; /* Высокий z-index */
    opacity: 0.6; /* Прозрачность */
    transition: background-color 0.2s, color 0.2s, transform 0.1s ease; /* Плавные эффекты */
}

/* Текст внутри кнопки Claim */
.claim-text {
    position: relative; /* Позволяет сдвиг текста */
    top: 2px; /* Сдвиг текста вниз */
    color: inherit; /* Наследуем цвет текста от кнопки */
    font-size: inherit; /* Наследуем размер текста от кнопки */
    font-family: inherit; /* Наследуем шрифт от кнопки */
}

/* Эффект при наведении */
.claim-button:hover {
    background-color: #f8a436; /* Ярко-оранжевый фон */
    color: #1b7f1f; /* Зелёный текст */
}

/* Эффект при нажатии */
.claim-button:active {
    transform: scale(0.95); /* Уменьшение размера кнопки */
    background-color: #0b500d; /* Тёмно-зелёный фон */
    color: #1b7f1f; /* Зелёный текст */
}

/* Стили для модального окна */
.modal2 {
    position: fixed; /* Закрепляем модальное окно */
    top: 0;
    left: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    backdrop-filter: blur(5px); /* Размытие фона */
    z-index: 1000; /* Высокий z-index */
    display: flex; /* Flexbox для центровки */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    visibility: hidden; /* По умолчанию скрыто */
    opacity: 0; /* Прозрачность */
    transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавный переход */
}

/* Стили для контента модального окна */
.modal-content2 {
    background-color: #ffe389c9; /* Бежевый фон */
    border: 3px solid rgb(255, 255, 255); /* Белая рамка */
    border-radius: 20px; /* Скруглённые углы */
    box-shadow: 0 4px 8px 0 rgba(75, 40, 0, 0.3); /* Тень */
    text-align: center; /* Центрирование текста */
    font-family: 'SmoothRelief', sans-serif; /* Подключённый шрифт */
    font-size: 16px; /* Размер текста */
    color: #5c3400; /* Цвет текста */
    padding-top: 15px; /* Верхний отступ */
    padding-right: 10px; /* Отступ справа */
    padding-bottom: 12px; /* Нижний отступ */
    padding-left: 10px; /* Отступ слева */
    width: 180px; /* Устанавливаем ширину окна */
    transform: scale(0.9); /* Начальная трансформация */
    transition: transform 0.4s ease; /* Плавное масштабирование */
}

/* Плавное открытие */
.modal2.open {
    visibility: visible; /* Показываем окно */
    opacity: 1; /* Прозрачность */
}

.modal-content2.open {
    transform: scale(1); /* Масштаб до нормального размера */
}

/* Плавное закрытие */
.modal2.close {
    visibility: hidden; /* Скрываем окно */
    opacity: 0; /* Прозрачность */
}

.modal-content2.close {
    transform: scale(0.9); /* Уменьшение масштаба */
}

/* Заголовок модального окна */
.modal-content2 h2 {
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #165e00; /* Зелёный цвет */
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Текст модального окна */
.modal-content2 p {
    font-size: 16px; /* Размер текста */
    color: #8d4001; /* Цвет текста */
    margin: 20px 0;
}

/* Кнопка "Close" */
.close-text2 {
    font-size: 14px; /* Размер текста */
    color: #b36500; /* Коричневый цвет */
    margin-top: 15px;
    margin-right: 8px; /* Добавляем отступ справа для сдвига текста левее */
    cursor: pointer; /* Указатель при наведении */
    text-align: right;
}

/* Общие отступы между элементами внутри модального окна */
.modal-content2 > *:not(:last-child) {
    margin-bottom: 10px; /* Отступ между элементами */
}