/* Подключаем шрифт */
@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 для улучшения загрузки */
  }

/* Основной стиль для header */
.header {
    width: 94%; /* Ширина header */
    height: 55px; /* Высота header */
    min-height: 55px;
    max-height: 55px;
    border-radius: 30px; /* Скруглённые углы */
    border: 3px solid #ffffff; /* Белая рамка */
    cursor: pointer; /* Изменение курсора на указатель */
    background: #fbcb27; /* Жёлтый фон */
    position: fixed; /* Фиксированное позиционирование */
    top: 10px; /* Отступ сверху */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    display: flex; /* Flexbox для распределения элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: space-between; /* Распределяем элементы */
    padding: 0 2px; /* Отступы для настройки расстояний */
    box-shadow: 0 0 10px rgba(4, 75, 28, 0.979), 0 0 30px rgb(3, 73, 3); /* Тень вокруг header */
    overflow: hidden; /* Скрываем выходящие элементы */
    z-index: 1000; /* Высокий z-index */
    box-sizing: border-box; /* Учитываем отступы и рамку */
}

/* Иконка внутри header */
.header .header-icon {
    width: 45px; /* Ширина иконки */
    height: 45px; /* Высота иконки */
    margin-left: 2px; /* Расстояние от левого края */
    border: 2px solid #27744e; /* Зелёная рамка */
    border-radius: 50%; /* Круглая форма */
    box-sizing: border-box; /* Учитываем рамку в размерах */
    margin-right: 4px; /* Настраиваем расстояние между иконкой и текстом */
    flex-shrink: 0; /* Запрещаем сжатие */
}

/* Текст внутри header */
.header .header-text {
    font-size: 33px; /* Размер текста */
    font-family: 'SmoothRelief', sans-serif; /* Подключённый шрифт */
    font-weight: bold; /* Жирный текст */
    color: #27744e; /* Зелёный цвет текста */
    letter-spacing: 2px; /* Расстояние между символами */
    line-height: 55px; /* Высота текста совпадает с высотой header */
    text-align: center; /* Горизонтальное выравнивание текста */
    margin-right: 3px; /* Настраиваем расстояние между текстом и кнопкой */
    margin-left: 2px; /* Настраиваем расстояние между текстом и иконкой */
    margin: 0;
    padding: 0; /* Убираем дополнительные отступы */
    transform: translateY(3px); /* Сдвигаем текст вниз на 3 пикселя */
    display: inline-block; /* Позволяет использовать transform */
}

/* Контейнер для кнопки */
.buy-button-container {
    margin-right: 2px; /* Расстояние от правого края */
    display: flex; /* Flexbox для кнопки */
    align-items: center; /* Центрируем кнопку по вертикали */
}

/* Стили для кнопки Buy */
.buy-button {
    background-color: #faac1e; /* жёлтый фон */
    border: 2px solid #ffffff; /* белая рамка */
    color: #ffffff; /* Белый текст */
    letter-spacing: 1px; /* Расстояние между символами */
    border-radius: 25px; /* Скруглённые углы */
    padding: 0 6px; /* Горизонтальные отступы */
    font-size: 18px; /* Размер текста */
    font-family: 'SmoothRelief', sans-serif; /* Шрифт */
    text-align: center; /* Горизонтальное выравнивание текста */
    cursor: pointer; /* Указатель при наведении */
    z-index: 1; /* Высокий z-index */
    transition: background-color 0.2s, color 0.2s, transform 0.1s ease; /* Плавные переходы */
    box-shadow: 0 0 4px rgba(110, 94, 74, 0.39), 0 0 5px rgba(107, 98, 90, 0.466); /* Тень вокруг header */
    
    /* Центрирование текста через line-height */
    height: 38px; /* Высота кнопки */
    line-height: 38px; /* Совпадает с высотой кнопки для вертикального центрирования */
}

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

/* Эффект при нажатии на кнопку */
.buy-button:active {
    transform: scale(0.95); /* Уменьшение при нажатии */
    background-color: #e99930; /* Более тёмный зелёный */
    color: #ffffff; /* Белый текст */
}

/* Анимация рамки header */
.header svg {
    position: absolute; /* Абсолютное позиционирование */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    fill: none; /* Убираем заливку */
}

.header .hl-line {
    stroke: #fff; /* Цвет линии */
    stroke-width: 1.5; /* Толщина линии */
    stroke-dasharray: 150 480; /* Параметры штрихов */
    stroke-dashoffset: 150; /* Начальное смещение штрихов */
    transition: stroke-dashoffset 1s ease-in-out; /* Анимация */
}

.header:hover {
    background: #ffd971; /* Новый фон при наведении */
}

.header:hover .hl-line {
    stroke-dashoffset: -480; /* Анимация смещения */
}