/**
 * VideoBalancer player — оформление.
 *
 * Всё в этом файле начинается с .vb-player (единственное исключение —
 * .player.vb-player-host, см. ниже), поэтому стили не могут протечь в остальную
 * вёрстку Kinogo. Никаких правил на голые теги, :root, body, iframe, button.
 *
 * Палитра снята с шаблона Kinogo: секции #2b2b2b, рамки #404040, блок плеера
 * чёрный, акцент #dd4b39 (он же в .catmenu a:hover), текст #c9c9c9.
 */

/* --- Нейтрализация обёртки шаблона --------------------------------------
 * fullstory.tpl оборачивает поле player в <div class="player">, а styles.css
 * делает из него жёсткий блок 16:9: height:0 + padding-bottom:56.25% +
 * overflow:hidden. Панель озвучек и селекты сезонов внутри такой обёртки были
 * бы обрезаны, поэтому пропорции держит наш собственный .vb-player__frame, а
 * обёртка становится обычным потоковым блоком.
 *
 * Класс vb-player-host навешивает player.js. Правило с :has() — то же самое для
 * браузеров, где скрипт ещё не отработал; оно вынесено в ОТДЕЛЬНЫЙ блок
 * намеренно: браузер без поддержки :has() выбросил бы весь список селекторов,
 * если бы они стояли через запятую. */
.player.vb-player-host {
	position: static;
	height: auto;
	padding-bottom: 0;
	overflow: visible;
	background: transparent;
}

.player:has(> .vb-player) {
	position: static;
	height: auto;
	padding-bottom: 0;
	overflow: visible;
	background: transparent;
}

/* --- Контейнер ---------------------------------------------------------- */
.vb-player {
	position: relative;
	margin: 0;
	color: #c9c9c9;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.vb-player * {
	box-sizing: border-box;
}

/* --- Экран -------------------------------------------------------------- */
.vb-player__frame {
	position: relative;
	width: 100%;
	background: #000;
	overflow: hidden;
	/* Запасной вариант пропорций для старых браузеров без aspect-ratio. */
	padding-top: 56.25%;
}

@supports (aspect-ratio: 16 / 9) {
	.vb-player__frame {
		padding-top: 0;
		aspect-ratio: 16 / 9;
	}
}

/* Высокий телефон: 16:9 оставляет слишком маленькую картинку. */
@media (max-width: 480px) {
	.vb-player__frame {
		padding-top: 62%;
	}

	@supports (aspect-ratio: 16 / 9) {
		.vb-player__frame {
			padding-top: 0;
			aspect-ratio: 16 / 10;
		}
	}
}

/* Правило .player iframe из styles.css уже задаёт !important-раскладку, но наш
 * фрейм может стоять и без обёртки .player — дублируем явно. */
.vb-player__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

/* --- Статус / загрузка / ошибка ----------------------------------------- */
.vb-player__state {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	text-align: center;
	color: #8f8f8f;
	background: #000;
	z-index: 2;
}

.vb-player__state[hidden] {
	display: none;
}

.vb-player__state--error {
	color: #d9a9a2;
}

.vb-player__state-text {
	max-width: 90%;
}

.vb-player__spinner {
	width: 26px;
	height: 26px;
	border: 2px solid #3a3a3a;
	border-top-color: #dd4b39;
	border-radius: 50%;
	animation: vb-player-spin 0.8s linear infinite;
}

.vb-player__spinner[hidden] {
	display: none;
}

@keyframes vb-player-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vb-player__spinner {
		animation: none;
		border-top-color: #6a6a6a;
	}
}

.vb-player__retry {
	padding: 6px 16px;
	color: #f0f0f0;
	font: inherit;
	background: #333;
	border: 1px solid #4c4c4c;
	border-radius: 3px;
	cursor: pointer;
}

.vb-player__retry:hover {
	background: #dd4b39;
	border-color: #dd4b39;
	color: #fff;
}

.vb-player__retry[hidden] {
	display: none;
}

/* --- Панель управления --------------------------------------------------- */
.vb-player__controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background: #1a1a1a;
	border-top: 1px solid #333;
}

.vb-player__controls[hidden] {
	display: none;
}

.vb-player__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vb-player__nav[hidden] {
	display: none;
}

.vb-player__field {
	display: flex;
	flex: 1 1 180px;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

.vb-player__field[hidden] {
	display: none;
}

.vb-player__field-label {
	flex: 0 0 auto;
	color: #8f8f8f;
	white-space: nowrap;
}

.vb-player__select {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 5px 8px;
	color: #e6e6e6;
	font: inherit;
	background: #2b2b2b;
	border: 1px solid #454545;
	border-radius: 3px;
	cursor: pointer;
}

.vb-player__select:focus {
	outline: none;
	border-color: #dd4b39;
}

.vb-player__translations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vb-player__translations[hidden] {
	display: none;
}

.vb-player__tab {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	padding: 5px 11px;
	color: #cfcfcf;
	font: inherit;
	text-align: left;
	background: #2b2b2b;
	border: 1px solid #454545;
	border-radius: 3px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.vb-player__tab:hover {
	background: #383838;
	color: #fff;
}

.vb-player__tab.is-active {
	background: #dd4b39;
	border-color: #dd4b39;
	color: #fff;
	cursor: default;
}

.vb-player__tab-quality {
	flex: 0 0 auto;
	padding: 0 4px;
	font-size: 11px;
	color: #9a9a9a;
	border: 1px solid #4c4c4c;
	border-radius: 2px;
}

.vb-player__tab.is-active .vb-player__tab-quality {
	color: #ffe3df;
	border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 480px) {
	.vb-player__controls {
		padding: 8px;
	}

	.vb-player__field {
		flex: 1 1 100%;
	}

	.vb-player__tab {
		font-size: 12px;
		padding: 5px 9px;
	}
}