/**
 * Hitbox Video Player — styles.
 *
 * BEM naming: .hitbox-video-player, __video, __control, __progress, __icon.
 * State modifiers: --loaded, --playing.
 *
 * @package Hitbox_Video_Player
 * @since   1.0.0
 */

/* ---- Container ---- */
.hitbox-video-player {
	position: relative;
	overflow: hidden;
	background-color: #111;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	cursor: pointer;
}

/* ---- Video element ---- */
.hitbox-video-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.hitbox-video-player--loaded .hitbox-video-player__video {
	opacity: 1;
}

/* ---- Control button ---- */
.hitbox-video-player__control {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	border: none;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.hitbox-video-player__control:hover {
    background: rgba(0, 0, 0, 0.4) !important;
}

.hitbox-video-player__control:focus,
.hitbox-video-player__control:focus-visible {
    background: rgba(0, 0, 0, 0.25) !important;
}

.hitbox-video-player:hover .hitbox-video-player__control,
.hitbox-video-player__control:focus-visible {
	opacity: 1;
}

.hitbox-video-player__control:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}

/* ---- Progress ring SVG ---- */
.hitbox-video-player__progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.hitbox-video-player__progress-circle {
	opacity: 0.9;
	transition: stroke-dashoffset 0.15s linear;
}

/* ---- Play / Pause icons ---- */
.hitbox-video-player__icon {
	position: relative;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Default state: show play, hide pause */
.hitbox-video-player__icon--pause {
	display: none;
}

.hitbox-video-player__icon--play {
	display: block;
}

/* Playing state: show pause, hide play */
.hitbox-video-player--playing .hitbox-video-player__icon--pause {
	display: block;
}

.hitbox-video-player--playing .hitbox-video-player__icon--play {
	display: none;
}

/* ---- Responsive: larger button on md+ screens ---- */
@media (min-width: 768px) {
	.hitbox-video-player__control {
		width: 48px;
		height: 48px;
		padding: 12px;
	}

	.hitbox-video-player__icon {
		width: 24px;
		height: 24px;
	}
}