/* =========================================================
   MTV VOD Player — front-end styles
   ========================================================= */

/* ----------------------------------------------------------
   Wrapper
   ---------------------------------------------------------- */
.mtv-vod-wrapper {
	position: relative;
	width: 100%;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	--mtv-accent: #e31c2a;
	--mtv-accent-rgb: 227, 28, 42;
}

/* ----------------------------------------------------------
   Video.js skin tweaks
   ---------------------------------------------------------- */
.mtv-vod-wrapper .video-js {
	width: 100%;
	border-radius: 10px;
	font-family: inherit;
}

.mtv-vod-wrapper .vjs-control-bar {
	border-radius: 0 0 10px 10px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75) 60%);
	height: 42px;
}

.mtv-vod-wrapper .video-js .vjs-play-progress,
.mtv-vod-wrapper .video-js .vjs-volume-level {
	background: var(--mtv-accent);
}

.mtv-vod-wrapper .video-js .vjs-play-progress::before {
	color: var(--mtv-accent);
}

/* Big play button */
.mtv-vod-wrapper .video-js .vjs-big-play-button {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	width: 88px;
	height: 88px;
	top: 50%;
	left: 50%;
	margin-top: -44px;
	margin-left: -44px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mtv-vod-wrapper .video-js:hover .vjs-big-play-button,
.mtv-vod-wrapper .video-js .vjs-big-play-button:hover,
.mtv-vod-wrapper .video-js .vjs-big-play-button:focus {
	background: transparent;
	box-shadow: none;
	transform: scale(1.15);
	opacity: 0.9;
}

.mtv-vod-wrapper .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
	font-size: 88px;
	line-height: 88px;
	color: #fff;
	text-shadow:
		-2px -2px 0 rgba(0, 0, 0, 0.8),
		 2px -2px 0 rgba(0, 0, 0, 0.8),
		-2px  2px 0 rgba(0, 0, 0, 0.8),
		 2px  2px 0 rgba(0, 0, 0, 0.8),
		 0   -2px 0 rgba(0, 0, 0, 0.8),
		 0    2px 0 rgba(0, 0, 0, 0.8),
		-2px  0   0 rgba(0, 0, 0, 0.8),
		 2px  0   0 rgba(0, 0, 0, 0.8);
}

/* Loading spinner */
.mtv-vod-wrapper .video-js .vjs-loading-spinner {
	border-color: var(--mtv-accent);
}

.mtv-vod-wrapper .video-js .vjs-loading-spinner::before,
.mtv-vod-wrapper .video-js .vjs-loading-spinner::after {
	border-top-color: var(--mtv-accent);
}

/* ----------------------------------------------------------
   Controls bar (reconnect button)
   ---------------------------------------------------------- */
.mtv-vod-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 0 0;
}

.mtv-vod-reconnect-btn {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--mtv-accent);
	border-radius: 999px;
	color: var(--mtv-accent);
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.65px;
	line-height: 1;
	padding: 6px 16px;
	text-transform: uppercase;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.mtv-vod-reconnect-btn:hover {
	background: var(--mtv-accent);
	color: #fff;
	box-shadow: 0 2px 14px rgba(var(--mtv-accent-rgb), 0.45);
}

.mtv-vod-reconnect-btn:focus-visible {
	outline: 2px solid var(--mtv-accent);
	outline-offset: 2px;
}

/* ----------------------------------------------------------
   Admin notice (shown when file attribute is missing)
   ---------------------------------------------------------- */
.mtv-vod-notice {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 14px;
	padding: 12px 16px;
	margin: 8px 0;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 480px) {
	.mtv-vod-reconnect-btn {
		font-size: 9.5px;
		padding: 5px 12px;
		letter-spacing: 0.4px;
	}
}