.qa-hover-video-dropzone {
	position: relative;
	display: grid;
	gap: 10px;
	padding: 13px;
	overflow: hidden;
	border: 1px dashed rgba(102, 192, 244, 0.34);
	border-radius: 10px;
	background: rgba(5, 11, 22, 0.62);
	color: #dbeafe;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.qa-hover-video-dropzone:hover,
.qa-hover-video-dropzone:focus-within {
	border-color: rgba(102, 192, 244, 0.84);
	box-shadow: 0 0 24px rgba(20, 136, 252, 0.14);
}

.qa-hover-video-dropzone.is-dragging {
	border-color: rgba(102, 192, 244, 0.94);
	background: rgba(8, 18, 34, 0.78);
	box-shadow: 0 0 28px rgba(20, 136, 252, 0.2);
}

.qa-hover-video-dropzone.is-loaded {
	border-style: solid;
	border-color: rgba(34, 197, 94, 0.3);
}

.qa-hover-video-dropzone.is-error {
	border-color: rgba(251, 113, 133, 0.68);
	background: rgba(44, 12, 22, 0.5);
}

.qa-hover-video-dropzone input {
	position: absolute;
	inset: 0;
	z-index: 4;
	opacity: 0;
	cursor: pointer;
}

.qa-hover-video-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.qa-hover-video-header small,
.qa-hover-video-meta {
	color: #8ea4bd;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qa-hover-video-header strong {
	display: block;
	margin-top: 3px;
	color: #f8fbff;
	font-size: 0.9rem;
	line-height: 1.2;
}

.qa-hover-video-header em {
	flex: 0 0 auto;
	padding: 4px 8px;
	border: 1px solid rgba(118, 229, 255, 0.18);
	border-radius: 999px;
	color: #76e5ff;
	background: rgba(20, 136, 252, 0.1);
	font-size: 0.66rem;
	font-style: normal;
	font-weight: 900;
	text-transform: uppercase;
}

.qa-hover-video-preview {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #0b1220;
}

.qa-hover-video-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #0b1220;
}

.qa-hover-video-preview span {
	position: absolute;
	inset: auto 12px 12px;
	display: inline-flex;
	justify-content: center;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(4, 10, 20, 0.72);
	color: #f8fbff;
	font-size: 0.78rem;
	font-weight: 850;
	line-height: 30px;
	backdrop-filter: blur(10px);
}

.qa-hover-video-dropzone.is-loaded .qa-hover-video-preview span {
	opacity: 0;
}

.qa-hover-video-meta {
	display: block;
	letter-spacing: 0;
	text-transform: none;
}