.color-selection {
	display: flex;
	gap: 10px; /* Spacing between options */
}

.color-option {
	position: relative;
	display: inline-block;
}

.color-option input[type="radio"] {
	display: none; /* Hide the actual radio button */
}

.color-circle {
	width: 40px;
	height: 40px;
	display: block;
	border-radius: 50%;
	border: 2px solid #fff;
	background-size: cover;
	background-position: center;
	transition: border 0.2s ease;
}

/* Default border when not selected */
.color-option input[type="radio"] + .color-circle {
	border: 2px solid #ccc;
}

/* Thicker border when selected */
.color-option input[type="radio"]:checked + .color-circle {
	border: 3px solid #000;
}

/* Hover state */
.color-option:hover .color-circle {
	border: 2px solid #666;
}