/**
 * Extra Fields for ACF — Color Swatch Field Styles
 */

.efacf-color-swatch-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.efacf-swatch-item {
	position: relative;
	display: inline-flex;
}

.efacf-swatch-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.efacf-swatch-item label {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.15 );
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.efacf-swatch-item label:hover {
	opacity: 0.85;
	box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.25 );
}

.efacf-swatch-item input[type="radio"]:checked + label {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0073aa;
}

/* Focus ring for accessibility */
.efacf-swatch-item input[type="radio"]:focus-visible + label {
	outline: 2px solid #3b82f6;
	outline-offset: 3px;
}