/* Plyr overrides — better contrast + mobile-friendly (no hover required) */

/* Overlaid play button — always visible, larger, stronger shadow */
.plyr--full-ui.plyr--video .plyr__control--overlaid {
	opacity: 1;
	visibility: visible;
	width: 72px;
	height: 72px;
	padding: 18px;
	background: rgba(0, 178, 255, 0.95);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.plyr--full-ui.plyr--video .plyr__control--overlaid svg {
	width: 32px;
	height: 32px;
}

/* Hide the overlay only while actually playing */
.plyr--video.plyr--playing .plyr__control--overlaid {
	opacity: 0;
	visibility: hidden;
}

/* Bottom controls bar — always visible, darker bg so white icons stand out */
.plyr--video .plyr__controls {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.6) 60%,
		rgba(0, 0, 0, 0) 100%
	);
	padding-top: 28px;
}

/* Respect Plyr's own hide-controls class (keyboard users / idle autohide) */
.plyr--video.plyr--hide-controls .plyr__controls {
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
}

/* Icons themselves — force white + drop-shadow for separation from any bg */
.plyr--video .plyr__control {
	color: #fff;
}

.plyr--video .plyr__control svg {
	width: 20px;
	height: 20px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

/* Time + volume + progress text contrast */
.plyr--video .plyr__time,
.plyr--video .plyr__volume {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Progress bar — filled portion stronger */
.plyr--video .plyr__progress input[type="range"]::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0.3);
}

/* Hover highlight (desktop) */
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control:focus-visible {
	background: rgba(0, 178, 255, 0.9);
}

/* Mobile — slightly larger touch targets */
@media (max-width: 600px) {
	.plyr--video .plyr__control {
		padding: 10px;
	}
	.plyr--video .plyr__control svg {
		width: 24px;
		height: 24px;
	}
	.plyr--full-ui.plyr--video .plyr__control--overlaid {
		width: 80px;
		height: 80px;
	}
	.plyr--full-ui.plyr--video .plyr__control--overlaid svg {
		width: 36px;
		height: 36px;
	}
}