/**
 * Active Filter Badges Styles - Salient-inspired
 *
 * @package MyBestClinicShop
 */

.mbcs-active-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mbcs-filter-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.045);
	border: none;
	border-radius: 200px;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	transition: background-color 0.2s ease;
	cursor: default;
	user-select: none;
	line-height: 1.2;
}

.mbcs-filter-badge:hover {
	background: rgba(0, 0, 0, 0.07);
}

.mbcs-filter-badge-label {
	font-weight: 400;
}

.mbcs-filter-badge-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: #333;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	margin: 0 0 0 2px;
	transition: background-color 0.2s ease;
	font-size: 14px;
	line-height: 1;
	border-radius: 200px;
	order: -1; /* X icon before text like Salient */
}

.mbcs-filter-badge-remove:hover {
	background: #000;
}

.mbcs-filter-badge-remove svg {
	width: 10px;
	height: 10px;
	stroke-width: 3;
}

/* Mobile */
@media (max-width: 768px) {
	.mbcs-active-filters {
		display: none; /* Hidden on mobile - shown in drawer */
	}
}