/* Community Badges — front end (BuddyBoss web) */

:root {
	/* Badge size in activity footers / shortcode rows. */
	--cd-badge-size: 36px;
	/* Avatar badge scales with the avatar, clamped for very small/large ones. */
	--cd-avatar-badge-scale: 34%;
	--cd-avatar-badge-min: 22px;
	--cd-avatar-badge-max: 80px;
	/* Horizontal offset of the avatar badge. Negative pushes it further off
	   the avatar's right edge. */
	--cd-avatar-badge-offset: -10px;
	--cd-badge-bg: #fff;
}

/* ---------- Badge rows (activity footer, shortcode) ---------- */

.cd-badges {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	vertical-align: middle;
}
.cd-badges--row { margin-top: 8px; }

.cd-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	cursor: default;
	outline: none;
}

.cd-badge img {
	width: var(--cd-badge-size);
	height: var(--cd-badge-size);
	object-fit: contain;
	display: block;
	/* White plate behind transparent PNG artwork. */
	background: var(--cd-badge-bg);
	border-radius: 50%;
	padding: 2px;
	box-sizing: border-box;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}

/* ---------- Tooltip ---------- */

.cd-badge-tooltip {
	position: absolute;
	bottom: calc(100% + 7px);
	/* Anchor to the badge's left edge and grow rightward. Centering with
	   translateX(-50%) pushed the tooltip past the left edge of the activity
	   card, where it got clipped. */
	left: 0;
	transform: none;
	background: #1d2327;
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	padding: 5px 9px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
	z-index: 9999;
}
.cd-badge-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	/* Point at the badge, not the middle of the tooltip. */
	left: calc(var(--cd-badge-size) / 2 - 4px);
	border: 4px solid transparent;
	border-top-color: #1d2327;
}
.cd-badge:hover .cd-badge-tooltip,
.cd-badge:focus .cd-badge-tooltip { opacity: 1; visibility: visible; }

/* Ensure common BuddyBoss wrappers don't clip the tooltip. */
.cd-badges,
.cd-avatar-badges-wrap { overflow: visible; }

/* ---------- Avatar badge ---------- */

.cd-avatar-badges-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: visible;
}

.cd-avatar-badges {
	position: absolute;
	right: var(--cd-avatar-badge-offset);
	bottom: 0;
	display: inline-flex;
	gap: 2px;
	/* The percentage MUST live here, not on the img. This element is absolutely
	   positioned inside .cd-avatar-badges-wrap (position:relative), so a
	   percentage width resolves against the avatar. On the img it would resolve
	   against this shrink-to-fit box, which is indeterminate — it silently
	   collapsed to min-width and never scaled. */
	width: var(--cd-avatar-badge-scale);
	min-width: var(--cd-avatar-badge-min);
	max-width: var(--cd-avatar-badge-max);
	/* Nudge onto the avatar's edge. */
	transform: translate(12%, 12%);
}

.cd-avatar-badges .cd-badge {
	width: 100%;
}

.cd-avatar-badges .cd-badge img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	box-shadow: 0 0 0 2px #fff;
}

/* Avatar badge tooltip sits to the right so it isn't clipped by the avatar. */
.cd-avatar-badges .cd-badge-tooltip::after {
	left: 8px;
}