.mvak-widget {
	max-width: 100%;
	box-sizing: border-box;
}

.mvak-align-center { text-align: center; }
.mvak-align-right { text-align: right; }

.mvak-w-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
}

.mvak-w-pills {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	box-sizing: border-box;
}

/* Each pill lives inside its own bounded wrapper. Spacing between pills is
   real margin on this element (not flex `gap`), and this box is what
   actually constrains the pill - the pill itself can never render wider
   than its own item container, which can never render wider than the row. */
.mvak-pill-item {
	display: inline-flex;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 10px 10px 0;
}

.mvak-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	/* em-based padding so it scales with whatever font size is set in the
	   Typography control, instead of a fixed px value that ignores it.
	   Elementor's Padding control overrides this per-instance via inline style. */
	padding: 0.55em 1.1em;
	width: auto;         /* pill hugs its own text - never stretches to fill its item container */
	max-width: 100%;      /* never wider than its own .mvak-pill-item - forces wrap instead of overflow */
	border-radius: 999px;
	background: #f0f0f1;
	color: #1d2327;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: normal;   /* text wraps inside the pill rather than pushing it past its container */
	word-break: normal;
	overflow-wrap: break-word;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	cursor: pointer;
}

.mvak-pill-label {
	display: inline-block;
}

.mvak-pill:hover,
.mvak-pill:focus-visible {
	text-decoration: none;
}

.mvak-pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mvak-pill-icon {
	opacity: 0.6;
	font-size: 0.9em;
}

.mvak-pill-count {
	opacity: 0.6;
	font-size: 0.85em;
}

@media (max-width: 480px) {
	.mvak-pill {
		font-size: 13px;
	}
}