/* ==========================================
   ПЕРЕМЕННЫЕ ЦВЕТОВ (Для быстрой кастомизации)
   ========================================== */
:root {
    --bg-color: #424242;       /* Основной серый фон сайта */
    --text-main: #ffffff;      /* Белый цвет текста */
    --accent-color: #3b82f6;   /* Синий цвет (акцент на кнопках и ползунке) */
    --track-color: #ffffff;    /* Цвет неактивной части ползунка */
}

/* ==========================================
   БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ
   ========================================== */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Центрирует плеер по горизонтали */
    align-items: center;     /* Центрирует плеер по вертикали */
    min-height: 100vh;       /* Растягивает экран на всю высоту устройства */
    user-select: none;       /* Запрещает выделение текста при кликах */
}

/* Главный контейнер всего плеера */
.player-container {
    width: 100%;
    max-width: 900px;
    padding: 40px 20px;
    box-sizing: border-box;
    position: relative; /* Нужно для абсолютного позиционирования стрелок */
    text-align: center;
}

/* ==========================================
   КНОПКИ НАВИГАЦИИ (Стрелки по бокам)
   ========================================== */
.nav-btn {
    position: absolute;
    top: 50%;                 /* Центрирует стрелки по вертикали */
    transform: translateY(-50%);
    background: none;         /* Прозрачный фон кнопок */
    border: none;
    color: var(--text-main);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s; /* Плавное подсвечивание при наведении */
    text-decoration: none;
}

.nav-btn:hover { 
    opacity: 1; /* Делает стрелку ярче при наведении */
}

.nav-prev { left: 20px; }  /* Отступ для левой стрелки */
.nav-next { right: 20px; } /* Отступ для правой стрелки */

/* ==========================================
   ЦЕНТРАЛЬНЫЙ КРУГЛЫЙ ЛОГОТИП
   ========================================== */
.logo-wrapper {
    width: 200px;
    height: 200px;
    background-color: #ffffff; /* Белый круг внутри */
    border: 6px solid #8e8e8e; /* Серая рамка вокруг круга */
    border-radius: 50%;        /* Превращает квадрат в идеальный круг */
    margin: 0 auto 30px auto;  /* Центрирует круг и делает отступ снизу */
    display: flex;
    justify-content: center;   /* Центрирует текст внутри круга по горизонтали */
    align-items: center;       /* Центрирует текст внутри круга по вертикали */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Легкая тень под кругом */
    overflow: hidden;
}

/* Шрифт бренда внутри круга (например: "lofi") */
.logo-text {
    color: #000000;
    font-size: 2.8rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: -2px; /* Сдвигает буквы ближе друг к другу */
}

/* Вторая часть слова в логотипе красится в синий цвет */
.logo-text span { 
    color: #3b82f6; 
}

/* ==========================================
   НАЗВАНИЕ СТАНЦИИ
   ========================================== */
.station-title {
    font-size: 1.6rem;
    margin-bottom: 30px;
    font-weight: 400;
    min-height: 38px; /* Фиксирует высоту, чтобы страница не дергалась при смене текста */
}

/* ==========================================
   ПОЛЗУНОК ГРОМКОСТИ
   ========================================== */
.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    gap: 15px; /* Зазор между иконкой звука, ползунком и процентами */
}

/* Кнопка включения/выключения звука (динамик) */
.mute-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.volume-slider-container {
    flex-grow: 1; /* Ползунок растягивается, занимая всё свободное место */
    position: relative;
    display: flex;
    align-items: center;
}

/* Внешний вид дорожки ползунка */
.volume-slider {
    -webkit-appearance: none; /* Отключает стандартный стиль браузера */
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3); /* Полупрозрачный белый цвет трека */
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

/* Круглый бегунок, за который мы тянем */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;       /* Синий бегунок */
    border: 2px solid #ffffff; /* Белая каемочка */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    transition: transform 0.1s;
}

/* Бегунок немного увеличивается, когда на него наводят мышь */
.volume-slider::-webkit-slider-thumb:hover { 
    transform: scale(1.3); 
}

/* Текст процентов громкости (например, "34%") */
.volume-percentage {
    font-size: 0.9rem;
    min-width: 35px;
    text-align: right;
    opacity: 0.9;
}

/* ==========================================
   НИЖНЯЯ ПАНЕЛЬ С КНОПКАМИ И PLAY
   ========================================== */
.bottom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Отступы между тремя нижними иконками */
}

/* Боковые иконки (эквалайзер и настройки) */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.icon-btn:hover { 
    opacity: 1; 
}

/* Главная большая кнопка запуска (белый круг) */
.play-trigger {
    width: 70px;
    height: 70px;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.play-trigger:hover { 
    transform: scale(1.05); /* Легкое увеличение при наведении */
}

/* Стилизация SVG картинок */
.icon-svg { 
    fill: #ffffff; /* Белый цвет для обычных иконок */
    width: 24px; 
    height: 24px; 
}

.play-svg { 
    fill: #222222; /* Темно-серый цвет для треугольника Play */
    width: 32px; 
    height: 32px; 
    margin-left: 4px; /* Сдвиг вправо для визуального выравнивания по центру */
}

.pause-svg { 
    fill: #222222; /* Темно-серый цвет для палочек Pause */
    width: 30px; 
    height: 30px; 
    display: none; /* По умолчанию скрыта */
}



/* ==========================================
   ВЫПАДАЮЩИЙ СПИСОК СТАНЦИЙ (В правом верхнем углу)
   ========================================== */

/* Контейнер для меню в углу экрана */
.dropdown-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Меню всегда будет поверх остальных элементов */
    font-family: inherit;
}

/* Кнопка «Выбрать станцию» */
.dropdown-trigger {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}

.dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--accent-color);
}

/* Маленькая стрелочка внутри кнопки (эффект раскрытия) */
.dropdown-trigger::after {
    content: "▼";
    font-size: 0.7rem;
    transition: transform 0.2s;
}

/* Поворачиваем стрелочку, когда меню открыто */
.dropdown-container.open .dropdown-trigger::after {
    transform: rotate(180deg);
}

/* Само выпадающее меню со списком */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* Отступ вниз от кнопки */
    right: 0;
    background-color: #2e2e2e; /* Темный фон меню */
    border: 1px solid #4f4f4f;
    border-radius: 8px;
    width: 280px;
    max-height: 150px; /* Если станций будет слишком много — появится прокрутка */
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    display: none; /* По умолчанию скрыто */
    padding: 6px 0;
}

/* Показываем меню, когда у контейнера есть класс .open */
.dropdown-container.open .dropdown-menu {
    display: block;
}

/* Элемент (строка) радиостанции в списке */
.dropdown-item {
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-main);
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s;
    white-space: nowrap;      /* Не дает тексту переноситься на новую строку */
    overflow: hidden;         /* Прячет длинный текст */
    text-overflow: ellipsis;  /* Ставит красивое троеточие в конце длинных названий */
}

.dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.2); /* Подсветка синим цветом при наведении */
}

/* Подсветка радиостанции, которая играет в данный момент */
.dropdown-item.active {
    color: var(--accent-color);
    font-weight: bold;
    background-color: rgba(59, 130, 246, 0.1);
}