/*
 * RideSnapGo universal video player - Premium Coastal skin.
 *
 * Palette tokens (mirror plugin docs; do not redeclare elsewhere):
 *   --rsg-deep   #0A2540  deep ocean (chrome background)
 *   --rsg-ocean  #1E5F8E  ocean blue (secondary surfaces, hint pill)
 *   --rsg-coral  #FF6B4A  primary action (play, scrubber fill)
 *   --rsg-sunset #FFA552  highlight (gradient tail, badge ring)
 *   --rsg-cream  #FAF7F2  on-dark text
 *
 * We only override the parts of video.js's skin that need to match the
 * coastal brand. Structural visibility rules stay vanilla so library
 * upgrades remain drop-in.
 */

.rsg-player-wrap {
	--rsg-deep: #0A2540;
	--rsg-ocean: #1E5F8E;
	--rsg-coral: #FF6B4A;
	--rsg-sunset: #FFA552;
	--rsg-cream: #FAF7F2;
	--rsg-radius: 12px;
	--rsg-shadow: 0 12px 40px rgba(10, 37, 64, 0.25);

	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--rsg-deep);
	border-radius: var(--rsg-radius);
	overflow: hidden;
	box-shadow: var(--rsg-shadow);
	isolation: isolate; /* keep z-indexed children off page-level stacking ctx */
}

.rsg-player-wrap .video-js,
.rsg-player-wrap .rsg-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--rsg-deep);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* video.js stretches the poster by default which looks bad on portrait posters. */
.rsg-player-wrap .vjs-poster {
	background-size: cover;
	background-position: center;
	background-color: var(--rsg-deep);
}

/* Big center play button */
.rsg-player-wrap .vjs-big-play-button {
	width: 96px;
	height: 96px;
	line-height: 96px;
	border-radius: 50%;
	border: 0;
	margin: -48px 0 0 -48px;
	top: 50%;
	left: 50%;
	background: linear-gradient(135deg, var(--rsg-coral) 0%, var(--rsg-sunset) 100%);
	box-shadow:
		0 8px 24px rgba(255, 107, 74, 0.45),
		0 0 0 6px rgba(255, 255, 255, 0.08);
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.rsg-player-wrap .vjs-big-play-button:hover,
.rsg-player-wrap .vjs-big-play-button:focus-visible {
	transform: scale(1.06);
	box-shadow:
		0 12px 32px rgba(255, 107, 74, 0.55),
		0 0 0 8px rgba(255, 255, 255, 0.12);
	outline: none;
}
.rsg-player-wrap .vjs-big-play-button .vjs-icon-placeholder::before {
	font-size: 44px;
	line-height: 96px;
	color: #fff;
	text-shadow: 0 2px 6px rgba(10, 37, 64, 0.35);
}

/* Control bar */
.rsg-player-wrap .vjs-control-bar {
	background: linear-gradient(
		to top,
		rgba(10, 37, 64, 0.92) 0%,
		rgba(10, 37, 64, 0.7) 60%,
		rgba(10, 37, 64, 0) 100%
	);
	height: 56px;
	padding: 0 12px;
	font-size: 13px;
	color: var(--rsg-cream);
	opacity: 0;
	transition: opacity 220ms ease-in-out;
}

/* Show on hover, focus, paused, or while user is poking around. */
.rsg-player-wrap:hover .vjs-control-bar,
.rsg-player-wrap .video-js.vjs-paused .vjs-control-bar,
.rsg-player-wrap .video-js.vjs-user-active .vjs-control-bar,
.rsg-player-wrap .video-js:not(.vjs-has-started) .vjs-control-bar {
	opacity: 1;
}

/* Larger touch targets on coarse pointers. */
@media (pointer: coarse) {
	.rsg-player-wrap .vjs-control-bar {
		height: 64px;
	}
	.rsg-player-wrap .vjs-button {
		min-width: 48px;
		min-height: 48px;
	}
}

.rsg-player-wrap .vjs-button > .vjs-icon-placeholder::before {
	color: var(--rsg-cream);
	transition: color 140ms ease;
}
.rsg-player-wrap .vjs-button:hover > .vjs-icon-placeholder::before,
.rsg-player-wrap .vjs-button:focus-visible > .vjs-icon-placeholder::before {
	color: var(--rsg-coral);
}

.rsg-player-wrap .vjs-play-control:not(:hover) .vjs-icon-placeholder::before {
	color: #fff;
}

/* tabular-nums keeps the time display from jittering as seconds tick. */
.rsg-player-wrap .vjs-time-control,
.rsg-player-wrap .vjs-duration,
.rsg-player-wrap .vjs-current-time,
.rsg-player-wrap .vjs-remaining-time {
	font-variant-numeric: tabular-nums;
	color: var(--rsg-cream);
	padding: 0 6px;
}

/* Progress / scrubber */
.rsg-player-wrap .vjs-progress-control {
	flex: 1 1 auto;
}
.rsg-player-wrap .vjs-progress-holder {
	height: 6px;
	margin: 0 8px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	overflow: hidden;
}
.rsg-player-wrap .vjs-load-progress,
.rsg-player-wrap .vjs-load-progress div {
	background: rgba(255, 255, 255, 0.22);
}
.rsg-player-wrap .vjs-play-progress {
	background: linear-gradient(90deg, var(--rsg-coral) 0%, var(--rsg-sunset) 100%);
}
.rsg-player-wrap .vjs-play-progress::before {
	color: #fff;
	font-size: 12px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.rsg-player-wrap .vjs-progress-control:hover .vjs-progress-holder {
	height: 8px;
}

.rsg-player-wrap .vjs-volume-bar {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}
.rsg-player-wrap .vjs-volume-level {
	background: var(--rsg-coral);
	border-radius: 999px;
}

/* 360 badge (top-left) */
.rsg-360-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff;
	background: linear-gradient(135deg, var(--rsg-coral), var(--rsg-sunset));
	box-shadow: 0 4px 14px rgba(255, 107, 74, 0.4);
	pointer-events: none;
	user-select: none;
}
.rsg-360-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: rsg-pulse 1.8s ease-out infinite;
}
@keyframes rsg-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
	70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* "Drag to look around" hint pill, top-center, frosted glass */
.rsg-hint {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rsg-cream);
	background: rgba(10, 37, 64, 0.55);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 4px 16px rgba(10, 37, 64, 0.35);
	opacity: 0;
	transition: opacity 280ms ease-out, transform 280ms ease-out;
	pointer-events: none;
	user-select: none;
}
.rsg-hint.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.rsg-hint-icon {
	color: var(--rsg-sunset);
}

/* VR / reset buttons (added by player.js) */
.rsg-player-wrap .vjs-vr-button .vjs-icon-placeholder::before,
.rsg-player-wrap .vjs-reset-view-button .vjs-icon-placeholder::before {
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
}

.rsg-player-wrap .vjs-loading-spinner {
	border-color: rgba(255, 255, 255, 0.22);
	border-top-color: var(--rsg-coral);
	width: 56px;
	height: 56px;
}

/* Error / retry overlay */
.rsg-error-retry {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	padding: 12px 24px;
	border-radius: 999px;
	border: 0;
	background: linear-gradient(135deg, var(--rsg-coral), var(--rsg-sunset));
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(255, 107, 74, 0.45);
}
.rsg-error-retry[hidden] {
	display: none;
}

/* video.js renders its own error display; hide the default text overlay so
   our retry pill is the focal point. */
.rsg-player-wrap .vjs-error-display .vjs-modal-dialog-content {
	color: var(--rsg-cream);
	font-size: 14px;
}

/* Single-product page wrapper */
.rsg-product-media {
	margin: 0 0 1.5rem;
}
.woocommerce-product-gallery + .rsg-product-media {
	/* Defensive: our remove_action should short-circuit the default gallery,
	   but if BOTH happen to render keep the spacing sane. */
	margin-top: 1rem;
}

/* Mobile */
@media (max-width: 600px) {
	.rsg-player-wrap {
		--rsg-radius: 8px;
	}
	.rsg-360-badge {
		top: 10px;
		left: 10px;
		font-size: 11px;
		padding: 4px 10px 4px 8px;
	}
	.rsg-hint {
		top: 12px;
		font-size: 12px;
		padding: 6px 12px;
	}
	.rsg-player-wrap .vjs-big-play-button {
		width: 72px;
		height: 72px;
		line-height: 72px;
		margin: -36px 0 0 -36px;
	}
	.rsg-player-wrap .vjs-big-play-button .vjs-icon-placeholder::before {
		font-size: 32px;
		line-height: 72px;
	}
}

/* Respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.rsg-360-dot { animation: none; }
	.rsg-hint,
	.rsg-player-wrap .vjs-control-bar,
	.rsg-player-wrap .vjs-big-play-button {
		transition: none;
	}
}