/*
 * Lightbox: a plain overlay, not tied to any block-editor lightbox feature
 * (this markup isn't a core/image block), so it needs its own — image and
 * video share the same overlay/close behavior, video is only ever a
 * playable element in here (the inline thumbnail has no controls). Shared
 * by review-media.js (review attachments) and product-photo.js (the "your
 * photo" cart-item thumbnail) — see ppb-lightbox.js.
 */
.ppb-review-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 40px;
}

/*
 * A flex item sizes to fit its content by default, so this wrapper hugs the
 * image/video's actual rendered box — that's what lets the close button
 * (absolutely positioned against it) track the content's corner instead of
 * sitting fixed in the viewport corner, which reads oddly once the content
 * is capped below full-screen size.
 */
.ppb-review-lightbox-inner {
	position: relative;
	max-width: min(1000px, 90vw);
	max-height: 80vh;
}

.ppb-review-lightbox-content {
	display: block;
	max-width: min(1000px, 90vw);
	max-height: 80vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/*
 * Custom video player: native `<video controls>` can't be reliably reskinned
 * across browsers and always drags in a fullscreen/download/PiP/playback-
 * speed menu we don't want, so the video itself has no `controls` at all —
 * this bar is the entire UI (play/pause, seek, time, mute only).
 */
.ppb-video-player {
	position: relative;
	width: min(700px, 90vw);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border: 1px solid #9a9a9a45;
}

.ppb-video-player-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: pointer;
}

.ppb-video-player-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.ppb-video-player-playpause {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: none;
	background: #fff;
	color: #000;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.ppb-video-player-seek {
	flex: 1;
	accent-color: #fff;
	cursor: pointer;
}

.ppb-video-player-time {
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ppb-video-player-mute {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.ppb-review-lightbox-close {
	position: absolute;
	top: -32px;
	right: -32px;
	width: 32px;
	height: 32px;
	line-height: 28px;
	border-radius: 999px;
	border: none;
	background: #000;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ppb-review-lightbox-download {
	position: absolute;
	bottom: -48px;
	left: 50%;
	transform: translateX(-50%);
	height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 0 20px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}