/**
 * Service Areas pill list — rendered by [dtec_service_areas].
 *
 * Themes:
 *   (default, no modifier) — inherits whatever parent container provides
 *   --lime-outline  — transparent fill, lime border, dark text
 *   --white-outline — transparent fill, white border, white text (for dark bgs)
 *   --dark          — dark-gray fill, white text
 */

.dtec-service-areas {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 8px);
}

.dtec-service-areas li {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-s, 14px);
	font-weight: 500;
	line-height: 1.2;
	border-radius: 999px;
	padding: var(--space-3xs, 6px) var(--space-s, 14px);
}

.dtec-service-areas li a,
.dtec-service-areas li span {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: color 150ms ease;
}

.dtec-service-areas li a:is(:hover, :focus) {
	color: var(--lime-600, #7a8f11);
}

/* Default / unthemed — black cream pill, simple */
.dtec-service-areas:not([class*="--"]) li {
	background: var(--cream, #f5f3ed);
	color: var(--dark-gray, #2e2826);
	border: 1px solid transparent;
}

/* Lime outline — on light backgrounds */
.dtec-service-areas--lime-outline li {
	background: transparent;
	color: var(--dark-gray, #2e2826);
	border: 1px solid var(--lime-500, #a0ba18);
}
.dtec-service-areas--lime-outline li a:is(:hover, :focus) {
	color: var(--lime-600, #7a8f11);
}

/* White outline — on dark backgrounds */
.dtec-service-areas--white-outline li {
	background: transparent;
	color: var(--white, #fff);
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.dtec-service-areas--white-outline li a:is(:hover, :focus) {
	color: var(--lime-400, #bddb3c);
}

/* Dark filled — for lighter backgrounds where we want emphasis */
.dtec-service-areas--dark li {
	background: var(--dark-gray, #2e2826);
	color: var(--white, #fff);
	border: 1px solid var(--dark-gray, #2e2826);
}
.dtec-service-areas--dark li a:is(:hover, :focus) {
	color: var(--lime-400, #bddb3c);
}