/* =============================================================
   SoundTrack module for DLE - стили блока саундтреков
   ============================================================= */

.soundtrack-panel {
	position: relative;
	display: none;
	overflow-y: auto;
	background: linear-gradient(135deg, #1c2440 0%, #0b101f 100%);
	padding: 20px;
}
.soundtrack-panel.is-active { display: block; }
/* Предсказуемые размеры внутри блока (табы с рамками и т.д.) */
.soundtrack-panel .st-layout,
.soundtrack-panel .st-layout * { box-sizing: border-box; }
.st-layout { display: flex; gap: 20px; }
/* Фиксированная ширина колонки постера: длинная лента табов альбомов
   не должна растягивать её и сжимать блок с треклистом */
.st-poster-wrap { flex-shrink: 0; width: 180px; }
.st-poster {
	width: 180px; height: 180px; border-radius: 10px; object-fit: cover;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5); display: block;
}
.st-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.st-album-name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.st-release { font-size: 12px; color: #8790ad; margin-bottom: 12px; }
.st-links { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.st-link-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
	background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.05);
	color: #e2e6f3; transition: all 0.3s; cursor: pointer; text-decoration: none;
}
.st-link-btn:hover { background-color: #2c3c73; color: #fff; border-color: #2c3c73; }
.st-link-btn.apple { border-color: #fa57c1; color: #fa57c1; }
.st-link-btn.apple:hover { background-color: #fa57c1; color: #fff; }
.st-link-btn.apple.is-hidden { display: none; }
.st-link-btn.yandex { border-color: #ffcc00; color: #ffcc00; }
.st-link-btn.yandex:hover { background-color: #ffcc00; color: #000; }
.st-link-btn.yandex.is-active { background-color: #ffcc00; color: #000; }
.st-link-btn.spotify { border-color: #1db954; color: #1db954; }
.st-link-btn.spotify:hover { background-color: #1db954; color: #fff; }
.st-link-btn.spotify.is-active { background-color: #1db954; color: #fff; }

.st-tracklist { flex-grow: 1; overflow-y: auto; max-height: 260px; }
.st-tracklist.is-hidden { display: none; }
.st-track {
	display: flex; align-items: center; gap: 10px; padding: 8px 10px;
	border-radius: 6px; transition: background-color 0.2s; cursor: pointer;
}
.st-track:hover { background-color: rgba(255,255,255,0.05); }
.st-track-num { width: 22px; font-size: 12px; color: #8790ad; text-align: center; flex-shrink: 0; }
.st-track-info { flex-grow: 1; min-width: 0; }
.st-track-name {
	font-size: 13px; font-weight: 600; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-track-artist {
	font-size: 11px; color: #8790ad;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-track-play {
	width: 28px; height: 28px; border-radius: 50%; background-color: #2c3c73;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 10px; flex-shrink: 0; transition: all 0.2s; opacity: 0;
}
.st-track:hover .st-track-play { opacity: 1; }
.st-track-play:hover { background-color: #3a4f96; transform: scale(1.1); }
.st-track.is-playing { background-color: rgba(44,60,115,0.4); }

.st-iframe-wrap { flex-grow: 1; border-radius: 8px; overflow: hidden; display: none; min-height: 0; }
.st-iframe-wrap.is-visible { display: block; }
.st-iframe-wrap iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; border-radius: 8px; }

/* Табы переключения альбомов (сериалы с несколькими OST).
   max-width = ширина постера: табы переносятся сеткой под обложкой,
   а не растягивают колонку в одну длинную ленту */
.st-album-tabs {
	display: flex; gap: 8px; margin-top: 10px;
	flex-wrap: wrap; align-content: flex-start; max-width: 180px;
}
.st-album-tab {
	width: 46px; height: 46px; border-radius: 8px; object-fit: cover;
	cursor: pointer; opacity: 0.45; transition: all 0.2s;
	border: 2px solid transparent; display: block;
}
.st-album-tab:hover { opacity: 0.85; }
.st-album-tab.is-active {
	opacity: 1; border-color: #ffcc00;
	box-shadow: 0 0 10px rgba(255,204,0,0.35);
}

/* Адаптив */
@media (max-width: 575px) {
	.soundtrack-panel { padding: 14px; }
	.st-layout { flex-direction: column; }
	.st-poster-wrap { display: flex; flex-direction: column; align-items: center; align-self: center; }
	.st-album-tabs { justify-content: center; }
	.st-tracklist { max-height: 200px; }
}

/* Саундтрек: высота плеера определяется содержимым */
.player-box:has(.soundtrack-panel.is-active) {
    aspect-ratio: auto;
    min-height: 0;
}

.player-box:has(.soundtrack-panel.is-active) .soundtrack-panel.is-active {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: visible;
}

/* Встроенный плеер саундтрека не должен наследовать
   абсолютное позиционирование обычного iframe плеера */
.soundtrack-panel .st-iframe-wrap iframe {
    position: static;
    inset: auto;
    height: 320px;
}

@media (max-width: 575px) {
    .player-tabs {
        padding: 8px;
        gap: 4px;
    }

    .player-tabs .tab {
        padding: 9px 10px;
        font-size: 12px;
    }

    .tabs-stars {
        width: 100%;
        margin-left: 0;
        padding: 5px 2px;
    }

    .soundtrack-panel {
        padding: 16px;
    }

    .st-layout {
        flex-direction: column;
        gap: 16px;
    }

    .st-poster-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .st-poster {
        width: min(180px, 55vw);
        height: auto;
        aspect-ratio: 1;
    }

    .st-album-tabs {
        justify-content: center;
        margin-top: 0;
    }

    .st-info {
        width: 100%;
        overflow: visible;
    }

    .st-album-name,
    .st-release {
        text-align: center;
    }

    .st-links {
        justify-content: center;
    }

    .st-tracklist {
        max-height: 240px;
    }

    .soundtrack-panel .st-iframe-wrap iframe {
        height: 280px;
    }
}