/* player.css — Радиоплеер (BEM)
 *
 * Структура перенесена с workshop.brutal-cat.com (styles/Radio.css),
 * цвета — палитра BCW:
 *   #5ab9ea — акцент
 *   #d5dfea — основной светлый текст
 *   #96afc0 — приглушённый
 *   #A4B3BA — совсем тусклый
 *   #fe666f — ошибка
 * Рамки и подложки — rgba(85,178,253,…), как в остальном шаблоне.
 */

/* Скрытые блоки (передача, альбом, прогресс, «Далее») прячутся
 * атрибутом hidden. Своё правило нужно потому, что авторский
 * display: flex у .player__next перебивает [hidden]{display:none}
 * из стилей браузера, и блок показывался бы всегда. */
.player__container [hidden] {
    display: none !important;
}

.player__container {
    background: hsla(240, 7%, 12%, 0.88);
    padding: 25px 10px;
    box-shadow: 0px -1px 4px rgb(200 196 196 / 8%), 0px 4px 4px rgb(200 196 196 / 25%);
    border-bottom: 5px solid rgba(85, 122, 149, 0.2);
    border-radius: 7px;
    display: block;
    margin-bottom: 45px;
    width: 100%;
}

/* === Шапка: название слева, статус справа === */

/* Название и статус — в столбик и по центру.
 * Раньше здесь было space-between, и статус («В эфире», «Готов
 * к воспроизведению») занимал место справа, сдвигая «Радио» к левому
 * краю блока. Теперь статус стоит ПОД названием и его не двигает. */
.player__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #5ab9ea;
    border-bottom: 1px solid rgba(90, 185, 234, 0.2);
    padding: 5px 0 15px;
}

.player__title {
    white-space: nowrap;
}

/* === inline style="color:orange" на <i class="fas fa-music"> === */
.player__header .fa-music {
    color: orange;
}

.player__status {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #A4B3BA;
    text-align: center;
}

.player__status--playing {
    color: #62c462;
}

.player__status--loading {
    color: #fbb450;
}

.player__status--error {
    color: #fe666f;
}

.player__content {
    margin-top: 10px;
}

/* === Передача === */

.player__show {
    font-size: 12px;
    color: #5ab9ea;
    text-align: center;
    margin: 10px 0 0;
    font-weight: 500;
}

/* === Сейчас играет === */

.player__now {
    margin: 15px 0;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(85, 178, 253, 0.20);
    border-radius: 8px;
    text-align: center;
}

.player__track {
    font-size: 13px;
    font-weight: 600;
    color: #d5dfea;
    line-height: 1.4;
    word-break: break-word;
}

.player__track--empty {
    font-weight: 400;
    color: #96afc0;
}

.player__meta {
    margin-top: 5px;
    font-size: 11px;
    color: #96afc0;
}

/* === Прогресс === */

.player__progress {
    margin-top: 12px;
}

.player__progress-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(85, 178, 253, 0.20);
    overflow: hidden;
}

.player__progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #5ab9ea;
    transition: width 0.9s linear;
}

.player__progress-time {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 11px;
    color: #A4B3BA;
    font-variant-numeric: tabular-nums;
}

/* === Кнопка воспроизведения === */

.player__play {
    display: block;
    width: 100%;
    padding: 11px 15px;
    border: 1px solid rgba(85, 178, 253, 0.35);
    border-radius: 8px;
    background: rgba(85, 178, 253, 0.12);
    color: #d5dfea;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.player__play:hover {
    background: rgba(85, 178, 253, 0.25);
    border-color: rgba(85, 178, 253, 0.65);
    color: #fff;
}

.player__play:active {
    transform: translateY(1px);
}

.player__play--on {
    background: rgba(254, 102, 111, 0.20);
    border-color: rgba(254, 102, 111, 0.30);
    color: #fff;
}

.player__play--on:hover {
    background: rgba(254, 102, 111, 0.30);
    border-color: rgba(254, 102, 111, 0.60);
}

/* === Громкость === */

.player__volume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
}

.player__volume-icon {
    color: #5ab9ea;
    font-size: 13px;
    flex-shrink: 0;
}

.player__volume-slider {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(85, 178, 253, 0.20);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.player__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5ab9ea;
    cursor: pointer;
    border: none;
}

.player__volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5ab9ea;
    cursor: pointer;
    border: none;
}

.player__volume-slider:focus-visible {
    outline: 2px solid rgba(85, 178, 253, 0.60);
    outline-offset: 3px;
}

.player__volume-value {
    font-size: 11px;
    color: #A4B3BA;
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* === Качество === */

.player__quality {
    display: flex;
    gap: 6px;
    margin: 15px 0;
}

.player__quality-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid rgba(85, 178, 253, 0.22);
    border-radius: 8px;
    background: rgba(85, 178, 253, 0.08);
    color: #96afc0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.player__quality-btn:hover {
    background: rgba(85, 178, 253, 0.22);
    border-color: rgba(85, 178, 253, 0.65);
    color: #fff;
}

.player__quality-btn--on {
    background: rgba(85, 178, 253, 0.28);
    border-color: rgba(85, 178, 253, 0.80);
    color: #fff;
}

.player__quality-rate {
    font-size: 10px;
    color: #A4B3BA;
    font-variant-numeric: tabular-nums;
}

.player__quality-btn--on .player__quality-rate {
    color: rgba(255, 255, 255, 0.75);
}

/* === Далее === */

.player__next {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 15px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(90, 185, 234, 0.12);
    font-size: 11px;
}

.player__next-label {
    color: #5ab9ea;
    font-weight: 600;
    flex-shrink: 0;
}

.player__next-track {
    color: #96afc0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Прямые ссылки === */

.player__links {
    display: flex;
    gap: 6px;
    margin-top: 15px;
}

.player__links a {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid rgba(85, 178, 253, 0.20);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #96afc0;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.player__links a:hover {
    background: rgba(85, 178, 253, 0.22);
    border-color: rgba(85, 178, 253, 0.65);
    color: #fff;
}