/* Основной контейнер бегущей строки */
.tilda-marquee-container {
    width: 90%;                  /* Ширина относительно родителя */
    background: #000000;            /* Темный фон */
    padding: 0;                  /* Убираем вертикальные отступы - будем управлять высотой через min-height */
    overflow: hidden;            /* Скрытие выходящих за границы элементов */
    position: relative;          /* Относительное позиционирование */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Тень контейнера */
    border-top: 2px solid #ffffff00; /* Желтая верхняя граница */
    border-bottom: 2px solid #ffffff00; /* Желтая нижняя граница */
    margin: 0 auto;              /* Центрирование по горизонтали */
    
    /* НАСТРОЙКА ВЫСОТЫ КОНТЕЙНЕРА */
    min-height: 30px;           /* Минимальная высота контейнера */
    display: flex;               /* Используем flex для центрирования */
    align-items: center;         /* Вертикальное центрирование содержимого */
}

/* Трек для прокрутки элементов */
.tilda-marquee-track {
    display: flex;               /* Гибкий контейнер для элементов */
    white-space: nowrap;         /* Запрет переноса текста */
    will-change: transform;      /* Оптимизация анимации трансформации */
}

/* Стили для отдельного элемента текста */
.tilda-marquee-text {
    color: #fff;                 /* Белый текст */
    font-size: 24px;             /* Размер шрифта */
    font-weight: bold;           /* Жирное начертание */
    padding: 0 35px;             /* Горизонтальные отступы */
    position: relative;          /* Для позиционирования псевдоэлемента */
    display: flex;               /* Гибкая раскладка содержимого */
    align-items: center;         /* Вертикальное выравнивание по центру */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.3); /* Желтое свечение текста */
    white-space: nowrap;         /* Запрет переноса текста */
    line-height: 1.5;            /* Оптимальная высота строки (1.5x от размера шрифта) */
}

/* Разделитель между элементами (точка) */
.tilda-marquee-text:after {
    content: "•";                /* Символ точки */
    position: absolute;          /* Абсолютное позиционирование */
    right: 0;                    /* Прижимаем к правому краю */
    color: #ffffff;              /* Желтый цвет */
    font-size: 15px;             /* Размер точки */
}

/* Убираем разделитель у последнего элемента */
.tilda-marquee-text:last-child:after {
    display: none;               /* Скрываем псевдоэлемент */
}

/* Стили для иконок внутри текста */
.tilda-marquee-text i {
    color: #ffbb00;              /* Желтый цвет иконок */
    margin-right: 10px;          /* Отступ справа от иконки */
    font-size: 20px;             /* Размер иконок */
    line-height: inherit;        /* Наследование высоты строки */
}

/* Адаптив для планшетов */
@media (max-width: 768px) {
    .tilda-marquee-text {
        font-size: 18px;         /* Уменьшенный размер текста */
        padding: 0 25px;         /* Уменьшенные горизонтальные отступы */
        line-height: 1.4;        /* Чуть меньшая высота строки */
    }
    
    /* Настройка высоты контейнера для планшетов */
    .tilda-marquee-container {
        min-height: 85px;        /* Уменьшенная минимальная высота */
    }
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
    .tilda-marquee-text {
        font-size: 16px;         /* Еще меньше размер текста */
        padding: 0 15px;         /* Минимальные отступы */
        line-height: 1.3;        /* Компактная высота строки */
    }
    
    .tilda-marquee-text:after {
        font-size: 16px;         /* Уменьшенный размер точки-разделителя */
    }
    
    /* Настройка высоты контейнера для мобильных */
    .tilda-marquee-container {
        min-height: 70px;        /* Минимальная высота для мобильных */
    }
}