/**
 * Product gallery videos (front end) — play-button overlay + the injected
 * <video>. Applies to the poster slides enhanced by assets/js/product-video.js.
 *
 * @package Atolyeman
 */

.woocommerce-product-gallery .at-has-video {
	position: relative;
}

.at-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.58);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, transform 0.18s ease;
	z-index: 4;
}

.at-video-play:hover,
.at-video-play:focus-visible {
	background: rgba(17, 17, 17, 0.82);
	transform: translate(-50%, -50%) scale(1.06);
	outline: none;
}

.at-video-play svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	margin-left: 4px; /* optically centre the triangle */
}

.at-has-video.is-playing .at-video-play {
	display: none;
}

.at-video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	z-index: 3;
}