/**
 * Vexal Media — responsive video embed (shortcode / block-safe).
 * File: wp-content/plugins/vexal-media/assets/css/vexal-video-embed.css
 */

.vexal-video-wrap {
	width: 100%;
	max-width: 100%;
	overflow: visible;
	position: relative;
	box-sizing: border-box;
	background: transparent;
}

.vexal-video-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	line-height: 0;
	background: transparent;
}

.vexal-video-visual {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	background: transparent;
}

.vexal-video-interactive .vexal-video-visual,
.vexal-video-interactive .vexal-video-player {
	cursor: pointer;
}

.vexal-video-interactive.is-playing .vexal-video-player {
	cursor: default;
}

/* Corner controls — subdued (~50% transparent) so video stays visible */
.vexal-video-expand-btn,
.vexal-video-sound-btn {
	position: absolute;
	z-index: 3;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.88);
	cursor: pointer;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0.5;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.vexal-video-expand-btn {
	top: 0.65rem;
	right: 0.65rem;
	width: 2.35rem;
	height: 2.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vexal-video-sound-btn {
	right: 0.65rem;
	bottom: 0.65rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.35rem;
	padding: 0.35rem 0.55rem;
}

.vexal-video-expand-btn:hover,
.vexal-video-expand-btn:focus-visible,
.vexal-video-sound-btn:hover,
.vexal-video-sound-btn:focus-visible {
	outline: none;
	opacity: 0.85;
	background: rgba(0, 0, 0, 0.5);
}

.vexal-video-expand-btn:focus-visible,
.vexal-video-sound-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vexal-video-expand-btn__icon {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 7h4V3H7v4zm10 0h4V3h-4v4zM7 21h4v-4H7v4zm10 0h4v-4h-4v4z'/%3E%3C/svg%3E");
}

.vexal-video-sound-btn__icon {
	display: block;
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}

.vexal-video-sound-btn[data-vexal-sound-state="unmuted"] .vexal-video-sound-btn__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

.vexal-video-sound-btn__label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.vexal-video-sound-btn[data-vexal-sound-state="unmuted"] {
	width: 2.35rem;
	min-width: 2.35rem;
	padding: 0;
	justify-content: center;
}

/* Centered play overlay (tap-to-play mode) */
.vexal-video-play-hit {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.vexal-video-play-hit:hover,
.vexal-video-play-hit:focus-visible {
	outline: none;
}

.vexal-video-play-hit:focus-visible .vexal-video-play-hit__icon,
.vexal-video-play-hit:focus-visible .vexal-video-play-hit__label {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vexal-video-interactive.is-playing .vexal-video-play-hit {
	display: none;
}

.vexal-video-play-hit__icon {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	position: relative;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.vexal-video-play-hit:hover .vexal-video-play-hit__icon,
.vexal-video-play-hit:focus-visible .vexal-video-play-hit__icon {
	opacity: 0.85;
}

.vexal-video-play-hit__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.65rem 0 0.65rem 1.05rem;
	border-color: transparent transparent transparent #1d2327;
}

.vexal-video-play-hit__label {
	font-size: 0.875rem;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	background: rgba(0, 0, 0, 0.35);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.vexal-video-play-hit:hover .vexal-video-play-hit__label,
.vexal-video-play-hit:focus-visible .vexal-video-play-hit__label {
	opacity: 0.85;
}

.vexal-video-wrap .vexal-video-player {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	background-color: transparent;
}

.vexal-video-wrap.vexal-video-inline .vexal-video-player,
.vexal-video-wrap.vexal-video-default .vexal-video-player {
	object-fit: cover;
	background-color: transparent;
}

.vexal-video-wrap.vexal-video-hero,
.vexal-video-wrap.vexal-video-background {
	aspect-ratio: 16 / 9;
	overflow: visible;
}

.vexal-video-wrap.vexal-video-hero .vexal-video-frame,
.vexal-video-wrap.vexal-video-background .vexal-video-frame,
.vexal-video-wrap.vexal-video-hero .vexal-video-visual,
.vexal-video-wrap.vexal-video-background .vexal-video-visual {
	width: 100%;
	height: 100%;
}

.vexal-video-wrap.vexal-video-hero .vexal-video-player,
.vexal-video-wrap.vexal-video-background .vexal-video-player {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Edge feather + drop shadow on visual wrapper (video elements do not mask reliably) */
.vexal-video-feather-light .vexal-video-visual {
	-webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 68%, transparent 100%);
	mask-image: radial-gradient(ellipse 96% 96% at 50% 50%, #000 68%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.vexal-video-feather-medium .vexal-video-visual {
	-webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 58%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.vexal-video-feather-strong .vexal-video-visual {
	-webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 48%, transparent 100%);
	mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 48%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.vexal-video-feather-light.vexal-video-shadow-soft .vexal-video-visual,
.vexal-video-feather-medium.vexal-video-shadow-soft .vexal-video-visual,
.vexal-video-feather-strong.vexal-video-shadow-soft .vexal-video-visual {
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.2));
}

.vexal-video-feather-light.vexal-video-shadow-medium .vexal-video-visual,
.vexal-video-feather-medium.vexal-video-shadow-medium .vexal-video-visual,
.vexal-video-feather-strong.vexal-video-shadow-medium .vexal-video-visual {
	filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.28));
}

.vexal-video-feather-light.vexal-video-shadow-strong .vexal-video-visual,
.vexal-video-feather-medium.vexal-video-shadow-strong .vexal-video-visual,
.vexal-video-feather-strong.vexal-video-shadow-strong .vexal-video-visual {
	filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.36));
}

.vexal-video-shadow-soft:not([class*="vexal-video-feather-"]) .vexal-video-visual {
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.16));
}

.vexal-video-shadow-medium:not([class*="vexal-video-feather-"]) .vexal-video-visual {
	filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.24));
}

.vexal-video-shadow-strong:not([class*="vexal-video-feather-"]) .vexal-video-visual {
	filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.32));
}

/* Rounded corners */
.vexal-video-radius-sm .vexal-video-visual {
	border-radius: 8px;
	overflow: hidden;
}

.vexal-video-radius-md .vexal-video-visual {
	border-radius: 14px;
	overflow: hidden;
}

.vexal-video-radius-lg .vexal-video-visual {
	border-radius: 22px;
	overflow: hidden;
}

/* Beveled / raised edge */
.vexal-video-bevel-subtle:not([class*="vexal-video-feather-"]) .vexal-video-visual {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12),
		0 10px 28px rgba(0, 0, 0, 0.18);
}

.vexal-video-bevel-raised:not([class*="vexal-video-feather-"]) .vexal-video-visual {
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		0 16px 40px rgba(0, 0, 0, 0.28);
}

/* Expand modal */
html.vexal-video-modal-open {
	overflow: hidden;
}

.vexal-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

/* Portaled to document.body so theme headers cannot stack above the dialog */
.vexal-video-modal--portaled {
	z-index: 2147483000;
}

.vexal-video-modal[hidden] {
	display: none !important;
}

.vexal-video-modal__backdrop {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.82);
	cursor: pointer;
}

.vexal-video-modal__panel {
	position: relative;
	z-index: 1;
	width: min(96vw, 1200px);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
}

.vexal-video-modal__close {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: #1d2327;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.vexal-video-modal__close:hover,
.vexal-video-modal__close:focus-visible {
	outline: none;
	background: #fff;
}

.vexal-video-modal__close:focus-visible {
	outline: 2px solid #0d8ec4;
	outline-offset: 2px;
}

.vexal-video-modal__close-icon {
	display: block;
	width: 1rem;
	height: 1rem;
	margin: 0 auto;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d2327'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

.vexal-video-modal__visual {
	width: 100%;
	line-height: 0;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.vexal-video-modal__visual .vexal-video-player--modal {
	display: block;
	width: 100%;
	max-height: 92vh;
	height: auto;
	background: #000;
}

.vexal-video-modal__title.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.vexal-video-fallback {
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
}

.vexal-video-missing {
	margin: 0.5rem 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
}

@supports not (aspect-ratio: 16 / 9) {
	.vexal-video-wrap.vexal-video-hero,
	.vexal-video-wrap.vexal-video-background {
		padding-top: 56.25%;
		height: 0;
	}

	.vexal-video-wrap.vexal-video-hero .vexal-video-frame,
	.vexal-video-wrap.vexal-video-background .vexal-video-frame {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
	}

	.vexal-video-wrap.vexal-video-hero .vexal-video-player,
	.vexal-video-wrap.vexal-video-background .vexal-video-player {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vexal-video-wrap .vexal-video-player[autoplay] {
		display: block;
	}
}