.drmfw-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.drmfw-wrap--video,
.drmfw-wrap--image {
	overflow: hidden;
}

.drmfw-image,
.drmfw-video {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Always lock down anything tagged [data-drmfw] regardless of whether it came
 * from a shortcode or a block. The vendor prefixes matter — Safari only
 * honors -webkit-user-drag, Firefox needs -moz-user-select, and the iOS
 * long-press save sheet only goes away with -webkit-touch-callout.
 */
[data-drmfw],
[data-drmfw] * {
	-webkit-user-drag: none !important;
	-khtml-user-drag: none !important;
	-moz-user-drag: none !important;
	-o-user-drag: none !important;
	user-drag: none !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.drmfw-overlay {
	position: absolute;
	inset: 0;
	/* The overlay must never swallow the player controls — pointer-events:none
	   lets clicks fall through, but it also means the overlay alone can't stop
	   drags. The drag block lives on the media element itself. */
	pointer-events: none;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 14px/1.4 system-ui, sans-serif;
	color: rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	transform: rotate(-22deg);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.drmfw-gate {
	padding: 1em 1.25em;
	border: 1px dashed #c2c2c2;
	background: #fafafa;
	color: #555;
	font-size: 0.95em;
	border-radius: 4px;
}

.drmfw-unlock {
	display: flex;
	gap: 0.5em;
	align-items: center;
	flex-wrap: wrap;
}

.drmfw-unlock input[type="password"] {
	padding: 0.45em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.drmfw-unlock button {
	padding: 0.5em 1em;
	cursor: pointer;
}

.drmfw-unlock-error {
	color: #b00020;
	margin: 0;
	flex-basis: 100%;
}