/**
 * Migala Taxonomy Terms widget — chip cloud only.
 *
 * The Elementor Style-tab controls set CSS variables on the widget wrapper
 * (`.elementor-element-…`), which `.mgl-tax` inherits. Defaults are applied as the
 * *fallback* argument of each `var()` — never declared on `.mgl-tax` itself, or that
 * declaration would override the wrapper value and the controls would do nothing.
 */
.mgl-tax {
	display: flex;
}

.mgl-tax-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mgl-tax-chip-gap, 8px);
}

.mgl-tax-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 7px 14px;
	border-radius: var(--mgl-tax-chip-radius, 999px);
	background: var(--mgl-tax-chip-bg, var(--ts-color-bg-3, #f4f4f5));
	color: var(--mgl-tax-chip-color, var(--ts-color-fg, #3a3a3a));
	border: 1px solid var(--mgl-tax-chip-border, transparent);
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mgl-tax-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Drives both SVG icons (width/height) and font icons (font-size). */
	width: var(--mgl-tax-chip-icon-size, 1.1em);
	height: var(--mgl-tax-chip-icon-size, 1.1em);
	font-size: var(--mgl-tax-chip-icon-size, 1.1em);
	color: var(--mgl-tax-chip-accent, currentColor);
	flex-shrink: 0;
}

/* Font icons (Line Awesome / Font Awesome): size is the glyph's font-size. */
.mgl-tax-chip-icon i {
	font-size: inherit;
	line-height: 1;
}

/* SVG icons: fill the sized wrapper. */
.mgl-tax-chip-icon svg {
	width: 100%;
	height: 100%;
}

.mgl-tax-chip--link:hover {
	background: var(--mgl-tax-chip-bg-hover, var(--ts-color-bg-4, #e8e8ea));
	color: var(--mgl-tax-chip-color-hover, var(--mgl-tax-chip-color, var(--ts-color-fg, #3a3a3a)));
	transform: translateY(-1px);
}

/* Primary term chip — inherits the normal chip style unless overridden. */
.mgl-tax-chip--primary {
	background: var(--mgl-tax-primary-bg, var(--mgl-tax-chip-bg, var(--ts-color-bg-3, #f4f4f5)));
	color: var(--mgl-tax-primary-color, var(--mgl-tax-chip-color, var(--ts-color-fg, #3a3a3a)));
	border-color: var(--mgl-tax-primary-border, var(--mgl-tax-chip-border, transparent));
}

.mgl-tax--empty .mgl-tax-empty,
.mgl-tax-empty {
	color: var(--ts-color-fg-soft, #8a8a8a);
	font-size: 0.9rem;
	font-style: italic;
}