.vrwp {
	position: relative;
	display: inline-block;
	width: 100%;
}

.vrwp-video,
.vrwp canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.vrwp-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 80px;
	height: 80px;
	transition: opacity 0.3s ease, transform 0.2s ease;
	z-index: 10;
}

.vrwp-play-button:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.vrwp-play-button:active {
	transform: translate(-50%, -50%) scale(0.95);
}

.vrwp-play-button.hidden {
	opacity: 0;
	pointer-events: none;
}

.vrwp-play-button img {
	width: 100%;
	height: 100%;
}

@media (max-width: 600px) {
	.vrwp-play-button {
		width: 60px;
		height: 60px;
	}
}

@media (min-width: 900px) {
	.vrwp-play-button {
		width: 100px;
		height: 100px;
	}
}

.vrwp-panel {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	padding: 20px;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.70);
	color: #fff;
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
}

.vrwp-panel.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vrwp-status {
	margin: 0 12px 12px 12px;
}

.vrwp-video-title {
	text-align: center;
	margin: 0 0 16px 0;
	font-size: 1rem;
	font-weight: 500;
}

.vrwp-current-time,
.vrwp-total-time {
	margin: 0;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.vrwp-progress {
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-gap: 8px;
	align-items: center;
}

.vrwp-bar {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: #666;
	cursor: pointer;
	position: relative;
}

.vrwp-played {
	border-radius: 2px;
	background: #fff;
	height: 4px;
	width: 0%;
	transition: width 0.1s ease;
}

.vrwp-controls {
	display: grid;
	grid-template-areas: "full lflex nav rflex mute";
	grid-template-columns: 44px 1fr 156px 1fr 44px;
	height: 44px;
}

.vrwp-panel button {
	cursor: pointer;
	border: none;
	background-color: transparent;
}

.vrwp-fullscreen {
	grid-area: full;
	width: 44px;
	height: 44px;
	background-image: url(images/fullscreen.png);
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vrwp-fullscreen:hover {
	background-image: url(images/fullscreen-hover.png);
}

.vrwp-mute {
	grid-area: mute;
	width: 44px;
	height: 44px;
	background-image: url(images/mute.png);
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vrwp-mute:hover {
	background-image: url(images/mute-hover.png);
}

.vrwp-mute.muted {
	background-image: url(images/mute.png);
}

.vrwp-mute.muted:hover {
	background-image: url(images/mute-hover.png);
}

.vrwp-mute.unmuted {
	background-image: url(images/unmute.png);
}

.vrwp-mute.unmuted:hover {
	background-image: url(images/unmute-hover.png);
}

.vrwp-nav {
	grid-area: nav;
	display: grid;
	grid-template-columns: 44px 44px 44px;
	grid-gap: 12px;
	height: 44px;
}

.vrwp-back {
	width: 44px;
	height: 44px;
	background-image: url(images/back.png);
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vrwp-back:hover {
	background-image: url(images/back-hover.png);
}

.vrwp-play-toggle {
	width: 44px;
	height: 44px;
	background-image: url(images/play2.png);
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vrwp-play-toggle:hover {
	background-image: url(images/play2-hover.png);
}

.vrwp-play-toggle.paused {
	background-image: url(images/play2.png);
}

.vrwp-play-toggle.paused:hover {
	background-image: url(images/play2-hover.png);
}

.vrwp-play-toggle.playing {
	background-image: url(images/pause.png);
}

.vrwp-play-toggle.playing:hover {
	background-image: url(images/pause-hover.png);
}

.vrwp-forward {
	width: 44px;
	height: 44px;
	background-image: url(images/forward.png);
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vrwp-forward:hover {
	background-image: url(images/forward-hover.png);
}