/* Hide the default circular radio input */
.button-group input[type="radio"] {
  display: none;
}

/* Style the labels to look like normal buttons */
.button-group label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #e0e0e0; /* Default gray color */
  color: #333;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 5px;
  transition: background-color 0.3s;
}

/* Change color ONLY when the radio button is active/checked */
.button-group input[type="radio"]:checked + label {
  background-color: #007bff; /* Active blue color */
  color: white;
}