/* Wrapper encloses exactly the image area, so the badge anchors to the
   image itself and never sits on top of a caption. */
.bmaim-imgwrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.bmaim-thumbwrap {
	position: relative;
	display: block;
}

/* Some themes size their <img> with position:absolute + width/height:100%,
   resolved against the nearest positioned ancestor - which, once this
   wrapper sits between that ancestor and the image, becomes the wrapper
   itself. An inline-block wrapper with no explicit size collapses to 0x0
   in that case (nothing else inside it contributes to its size), so the
   image collapses too. includes/frontend.php detects this at runtime and
   adds this class to make the wrapper transparently pass through 100% of
   its own parent's box instead. */
.bmaim-imgwrap--fill {
	display: block;
	width: 100%;
	height: 100%;
}

.bmaim-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.bmaim-badge-icon {
	width: 32px;
	height: 32px;
	display: block;
	line-height: 0;
}

.bmaim-badge-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Tooltip: real text in the DOM at all times (see includes/frontend.php),
   only its visibility is toggled here — never removed from the page, so
   it stays readable by crawlers, screen readers and browser find-in-page. */
.bmaim-badge-text {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 3;
	width: max-content;
	max-width: 260px;
	background: rgba(20, 20, 20, .92);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 6px;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}

/* Hover/keyboard-focus reveal is for devices that actually have a hover
   concept (mouse). On touch devices, tapping the badge can otherwise trigger
   a lingering :focus state outside of our own control - so touch relies
   solely on .is-active, toggled explicitly by assets/front.js on tap. */
@media (hover: hover) {
	.bmaim-badge:hover .bmaim-badge-text,
	.bmaim-badge:focus .bmaim-badge-text,
	.bmaim-badge:focus-within .bmaim-badge-text {
		opacity: 1;
		visibility: visible;
	}
}

.bmaim-badge.is-active .bmaim-badge-text {
	opacity: 1;
	visibility: visible;
}