/* =============================================================================
   Stark Video Gate — Overlay Styles
   Developed By: Stark Create
   ============================================================================= */

/* Lock the underlying page — no scroll, no interaction */
body.svgate-active {
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Full-screen fixed overlay */
#svgate-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483647;
	background: rgba(0, 0, 0, 0.78);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: all;
}

/* ─── Video wrapper ──────────────────────────────────────────────────────────*/
#svgate-video-wrapper {
	position: relative;
	width: 88vw;
	max-width: min(960px, calc(85vh * 16 / 9));
	aspect-ratio: 16 / 9;
	max-height: 85vh;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
	background: #000;
}

/* ─── Player iframe — override YT inline width/height ───────────────────────*/
#svgate-video-wrapper iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	pointer-events: none !important;
}

/* ─── Tap-to-unmute prompt ───────────────────────────────────────────────────
   Sits above the iframe (pointer-events: all so clicks register as a gesture).
   Centered inside the wrapper. Fades out once dismissed.
   ─────────────────────────────────────────────────────────────────────────── */
#svgate-tap-prompt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.60);
	border: 2px solid rgba(255, 255, 255, 0.50);
	border-radius: 12px;
	padding: 20px 32px;
	cursor: pointer;
	pointer-events: all;
	z-index: 10;
	animation: svgate-pulse 2s ease-in-out infinite;
	transition: opacity 0.3s;
}

#svgate-tap-prompt span {
	font-size: 36px;
	line-height: 1;
}

#svgate-tap-prompt strong {
	color: #fff;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

#svgate-tap-prompt.svgate-hidden {
	opacity: 0;
	pointer-events: none;
}

@keyframes svgate-pulse {
	0%,  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25); }
	50%        { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* ─── Native fullscreen ──────────────────────────────────────────────────────*/
#svgate-video-wrapper:-webkit-full-screen,
#svgate-video-wrapper:-moz-full-screen,
#svgate-video-wrapper:-ms-fullscreen,
#svgate-video-wrapper:fullscreen {
	width: 100vw !important;
	max-width: none !important;
	height: 100vh !important;
	max-height: none !important;
	aspect-ratio: unset !important;
	border-radius: 0;
	background: #000;
}

/* ─── Controls bar ───────────────────────────────────────────────────────────*/
#svgate-controls {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	pointer-events: all;
	z-index: 2147483647;
}

/* Shared button style */
#svgate-unmute-btn,
#svgate-fullscreen-btn {
	background: rgba(0, 0, 0, 0.70);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.60);
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 15px;
	font-family: sans-serif;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
	pointer-events: all;
}

#svgate-unmute-btn:hover,
#svgate-fullscreen-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

#svgate-unmute-btn.muted {
	opacity: 0.85;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
	#svgate-video-wrapper {
		width: 95vw;
		max-width: 95vw;
		max-height: 80vh;
		border-radius: 4px;
	}

	#svgate-tap-prompt {
		padding: 14px 22px;
	}

	#svgate-tap-prompt span {
		font-size: 28px;
	}

	#svgate-tap-prompt strong {
		font-size: 14px;
	}

	#svgate-controls {
		margin-top: 12px;
	}

	#svgate-unmute-btn,
	#svgate-fullscreen-btn {
		font-size: 13px;
		padding: 8px 16px;
	}
}