/**
 * AAA Video Shortcode Styles
 *
 * Custom video player with popup or inline mode. Plyr is themed with
 * AAA brand colors via CSS custom properties.
 *
 * @package AAA_Templates
 */

/* ──────────────────────────────────────────
   Container
   ────────────────────────────────────────── */
.aaa-video {
	position: relative;
	width: 100%;
	margin: 0 auto;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ──────────────────────────────────────────
   Poster (thumbnail + play button)
   ────────────────────────────────────────── */
.aaa-video__poster {
	position: relative;
	width: 100%;
	background: #c6c6c6;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
}

.aaa-video__poster-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ──────────────────────────────────────────
   Play button
   ────────────────────────────────────────── */
.aaa-video__play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	background: #fff;
	color: #bf1d2d;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding-left: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	z-index: 2;
}

.aaa-video__poster:hover .aaa-video__play-btn {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.aaa-video__play-btn:focus-visible {
	outline: 3px solid #1685cd;
	outline-offset: 4px;
}

/* ──────────────────────────────────────────
   Inline player slot (replaces poster content)
   ────────────────────────────────────────── */
.aaa-video__player-slot {
	position: absolute;
	inset: 0;
	display: none;
	background: #000;
}

.aaa-video.is-playing .aaa-video__poster-image,
.aaa-video.is-playing .aaa-video__play-btn {
	display: none;
}

.aaa-video.is-playing .aaa-video__player-slot {
	display: block;
}

.aaa-video__player-slot .plyr {
	width: 100%;
	height: 100%;
}

.aaa-video__player-slot video,
.aaa-video__player-slot iframe {
	width: 100%;
	height: 100%;
	display: block;
}

/* ──────────────────────────────────────────
   Popup modal
   ────────────────────────────────────────── */
.aaa-video__modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.aaa-video__modal.is-open {
	display: flex;
}

.aaa-video__modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	cursor: pointer;
}

.aaa-video__modal-content {
	position: relative;
	width: 90%;
	max-width: 1000px;
	z-index: 1;
}

.aaa-video__modal-close {
	position: absolute;
	top: -48px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 8px;
	z-index: 2;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.aaa-video__modal-close:hover {
	color: #bf1d2d;
}

.aaa-video__player {
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.aaa-video__player video,
.aaa-video__player iframe {
	width: 100%;
	display: block;
}

/* ──────────────────────────────────────────
   Plyr theme override — use AAA brand colors
   ────────────────────────────────────────── */
.aaa-video .plyr,
.aaa-video__modal .plyr {
	--plyr-color-main: #bf1d2d;
	--plyr-video-control-color: #fff;
	--plyr-video-control-color-hover: #fff;
	--plyr-video-control-background-hover: #bf1d2d;
	--plyr-range-fill-background: #bf1d2d;
	--plyr-range-track-background: rgba(255, 255, 255, 0.25);
	--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.35);
	--plyr-tooltip-background: #1685cd;
	--plyr-tooltip-color: #fff;
	--plyr-menu-background: rgba(22, 133, 205, 0.95);
	--plyr-menu-color: #fff;
	--plyr-audio-control-color: #1685cd;
	--plyr-audio-control-background-hover: #1685cd;
	--plyr-focus-visible-color: #1685cd;
}

/* ──────────────────────────────────────────
   Responsive
   ────────────────────────────────────────── */
@media (max-width: 768px) {
	.aaa-video__poster {
		border-radius: 12px;
	}

	.aaa-video__play-btn {
		width: 52px;
		height: 52px;
	}

	.aaa-video__play-btn svg {
		width: 24px;
		height: 24px;
	}

	.aaa-video__modal-content {
		width: 95%;
	}
}