/**
 * [kimi_video] — self-hosted video player.
 *
 * The player is deliberately opaque to theme styling: it paints its own dark
 * chrome so it looks identical on every site. --kimi-video-max-width and
 * --kimi-video-ratio are set inline by the shortcode.
 */

.kimi-video {
	position: relative;
	width: 100%;
	max-width: var(--kimi-video-max-width, 800px);
	line-height: 0;
	background: #000;
	margin: 0 auto 16px;
}

.kimi-video__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--kimi-video-ratio, 16 / 9);
}

.kimi-video__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	padding: 6px 8px;
	line-height: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/* Theme button resets vary wildly, so every visual property is stated here. */
.kimi-video__button {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 0;
	opacity: 0.9;
	transition: opacity 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.kimi-video__button:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.16);
}

.kimi-video__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.kimi-video__button svg,
.kimi-video__button * {
	pointer-events: none;
}

.kimi-video__fallback {
	line-height: 1.6;
	color: #fff;
	margin: 0;
	padding: 16px;
}

.kimi-video__fallback a {
	color: #fff;
	text-decoration: underline;
}

.kimi-video__icon {
	display: block;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.kimi-video__icon--unmuted,
.kimi-video__icon--collapse {
	display: none;
}

.kimi-video--unmuted .kimi-video__icon--muted {
	display: none;
}

.kimi-video--unmuted .kimi-video__icon--unmuted {
	display: block;
}

.kimi-video--fullscreen .kimi-video__icon--expand {
	display: none;
}

.kimi-video--fullscreen .kimi-video__icon--collapse {
	display: block;
}

/* Fullscreen: each prefix must be its own rule — combining them makes browsers drop the whole group. */
.kimi-video:fullscreen {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.kimi-video:-webkit-full-screen {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.kimi-video:-moz-full-screen {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.kimi-video:-ms-fullscreen {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.kimi-video:fullscreen .kimi-video__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

.kimi-video:-webkit-full-screen .kimi-video__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

.kimi-video:-moz-full-screen .kimi-video__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

.kimi-video:-ms-fullscreen .kimi-video__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

.kimi-video.kimi-video--fullscreen {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.kimi-video.kimi-video--fullscreen .kimi-video__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}