/* Floating layer that hosts every heart button. It lives outside WP
 * Radio's own markup entirely - we only ever read WP Radio's DOM to know
 * where to draw the button, never insert into it. */
#wprf-overlay-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
	pointer-events: none;
}

.wprf-heart-wrapper {
	position: absolute;
	pointer-events: none;
}

.wprf-heart-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	pointer-events: auto;
	transition: transform 0.15s ease, background 0.15s ease;
}

.wprf-heart-btn:hover {
	background: rgba(0, 0, 0, 0.65);
	transform: scale(1.08);
}

.wprf-heart-btn:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.wprf-heart-icon {
	width: 18px;
	height: 18px;
	color: #fff;
	stroke: #fff;
	stroke-width: 2;
	fill: none;
	transition: fill 0.15s ease;
}

.wprf-heart-btn.is-active .wprf-heart-icon {
	fill: #ff4d6d;
	stroke: #ff4d6d;
}

.wprf-empty-message {
	opacity: 0.75;
	padding: 20px 0;
}

.wp-radio-listing.wprf-removing {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}