/* Wrapper around the Plyr player. --plyr-color-main is set inline per player
   (in the shortcode) and themes the PLAYER only - never the unmute button. */
.svplite-wrap {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

.svplite-wrap .plyr {
	width: 100%;
}

.svplite-wrap .svplite-video {
	width: 100%;
	height: auto;
}

/* Tapping the video toggles play/pause, so show a pointer. */
.svplite-wrap[data-click="1"] .plyr__video-wrapper {
	cursor: pointer;
}

/* ---------------------------------------------------------------
   Instagram-style unmute button (bottom right).

   Selectors are written with high specificity (.svplite-wrap .plyr ...)
   because Plyr ships a `.plyr button { width: auto }` rule and themes
   often style buttons too - both would otherwise break the circle.

   The colours here are deliberately FIXED (neutral black/white) and do
   NOT use --plyr-color-main, so the player's hex colour never affects it.
   --------------------------------------------------------------- */
.svplite-wrap .plyr .svplite-unmute,
.svplite-wrap .svplite-unmute {
	/* Reset anything inherited from the theme or Plyr. */
	all: unset;
	box-sizing: border-box;

	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 4; /* above Plyr's poster + controls layers so it stays tappable */

	display: flex;
	align-items: center;
	justify-content: center;

	/* Fixed circle - not affected by the chosen player colour. */
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;

	background-color: rgba( 0, 0, 0, 0.55 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.25 );

	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.12s ease;
}

.svplite-wrap .plyr .svplite-unmute:hover,
.svplite-wrap .svplite-unmute:hover {
	background-color: rgba( 0, 0, 0, 0.75 );
}

.svplite-wrap .plyr .svplite-unmute:active,
.svplite-wrap .svplite-unmute:active {
	transform: scale( 0.9 );
}

.svplite-wrap .plyr .svplite-unmute svg,
.svplite-wrap .svplite-unmute svg {
	width: 19px;
	height: 19px;
	display: block;
	/* Always white, regardless of the player's colour. */
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none; /* taps always land on the button */
}

/* Lift the button above the control bar when it's visible. */
.svplite-wrap[data-controls="1"] .svplite-unmute {
	bottom: 58px;
}

@media ( max-width: 480px ) {
	.svplite-wrap .svplite-unmute {
		right: 10px;
		bottom: 10px;
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
	}
	.svplite-wrap .svplite-unmute svg {
		width: 17px;
		height: 17px;
	}
}