/**
 * Video.js skin — BaziClub brand styling for game trailers.
 */

.bc-video-embed {
	position: relative;
	margin-top: 1.25rem;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 0.75rem;
	background: #0f172a;
	box-shadow:
		0 4px 24px rgba(15, 23, 42, 0.18),
		inset 0 0 0 1px rgba(51, 141, 255, 0.12);
}

.bc-video-embed .video-js.bc-video-player {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	padding-top: 0 !important;
	font-family: inherit;
	border-radius: 0.75rem;
	color: #fff;
}

.bc-video-embed .video-js.vjs-fluid,
.bc-video-embed .video-js.vjs-fill {
	padding-top: 0 !important;
	height: 100% !important;
}

.bc-video-embed .video-js .vjs-tech {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.75rem;
}

.bc-video-embed .video-js:not(.vjs-has-started) .vjs-tech {
	opacity: 0;
}

.bc-video-embed .video-js .vjs-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
	background-size: cover !important;
	background-position: center center;
	background-repeat: no-repeat;
}

.bc-video-embed .video-js .vjs-poster img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center center;
}

.bc-video-embed .video-js .vjs-subs-caps-button,
.bc-video-embed .video-js .vjs-captions-button,
.bc-video-embed .video-js .vjs-subtitles-button,
.bc-video-embed .video-js .vjs-text-track-display,
.bc-video-embed .video-js .vjs-text-track-settings,
.bc-video-embed .video-js .vjs-modal-dialog.vjs-text-track-settings {
	display: none !important;
	visibility: hidden !important;
}

/* Big play button */
.bc-video-embed .video-js .vjs-big-play-button {
	top: 50%;
	left: 50%;
	width: 4rem;
	height: 4rem;
	margin: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(51, 141, 255, 0.92);
	box-shadow: 0 8px 28px rgba(51, 141, 255, 0.45);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.bc-video-embed .video-js:hover .vjs-big-play-button,
.bc-video-embed .video-js .vjs-big-play-button:focus {
	background: rgb(51, 141, 255);
	box-shadow: 0 10px 32px rgba(51, 141, 255, 0.55);
	transform: translate(-50%, -50%) scale(1.06);
}

.bc-video-embed .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
	font-size: 2rem;
	line-height: 4rem;
}

/* Control bar */
.bc-video-embed .video-js .vjs-control-bar {
	height: 3rem;
	border-radius: 0 0 0.75rem 0.75rem;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.82) 100%);
	backdrop-filter: blur(8px);
	direction: ltr;
}

.bc-video-embed .video-js .vjs-button > .vjs-icon-placeholder::before {
	font-size: 1.35rem;
	line-height: 1.8;
}

.bc-video-embed .video-js .vjs-time-control {
	min-width: 0;
	padding-inline: 0.35rem;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.bc-video-embed .video-js .vjs-progress-control {
	min-width: 4rem;
}

.bc-video-embed .video-js .vjs-play-progress,
.bc-video-embed .video-js .vjs-volume-level {
	background-color: rgb(51, 141, 255);
}

.bc-video-embed .video-js .vjs-slider {
	background: rgba(255, 255, 255, 0.22);
}

.bc-video-embed .video-js .vjs-load-progress {
	background: rgba(255, 255, 255, 0.28);
}

.bc-video-embed .video-js .vjs-load-progress div {
	background: rgba(255, 255, 255, 0.18);
}

.bc-video-embed .video-js .vjs-play-progress::before,
.bc-video-embed .video-js .vjs-volume-level::before {
	background: #fff;
	box-shadow: 0 0 0 2px rgba(51, 141, 255, 0.45);
}

.bc-video-embed .video-js.vjs-user-inactive.vjs-playing .vjs-control-bar {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bc-video-embed .video-js.vjs-user-active.vjs-playing .vjs-control-bar,
.bc-video-embed .video-js.vjs-paused .vjs-control-bar {
	opacity: 1;
}

/* Loading spinner */
.bc-video-embed .video-js .vjs-loading-spinner {
	border-color: rgba(51, 141, 255, 0.25);
}

.bc-video-embed .video-js .vjs-loading-spinner::before,
.bc-video-embed .video-js .vjs-loading-spinner::after {
	border-top-color: rgb(51, 141, 255);
}

/* Dark mode — slightly deeper chrome */
.dark .bc-video-embed {
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(51, 141, 255, 0.18);
}

.dark .bc-video-embed .video-js .vjs-control-bar {
	background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.92) 100%);
}