Edit button colour after selection about jspsych HOT 6 CLOSED

/* Target the containers for each option to apply a horizontal layout */
.jspsych-survey-multi-choice-option {
  display: inline-block; /* Align options horizontally */
  margin-right: 5px; /* Space between options */
}

/* Hide the actual input (radio button) visually but keep it accessible */
.jspsych-survey-multi-choice-option input[type="radio"] {
  position: relative;
  opacity: 100;
  width: 2;
  height: 2;
}

.jspsych-survey-multi-choice-option label {
  background-color: #f0f0f0; /* Light background for the label */
  padding: 3px 20px; /* Padding around the text */
  border-radius: 20px; /* Rounded corners for the labels */
  font-size: 16px; /* Adjust font size as needed */
  cursor: pointer; /* Pointer cursor on hover */
  display: inline-block; /* Ensure label is inline-block for proper spacing */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for color changes */
}

.jspsych-survey-multi-choice-option input[type="radio"]:checked + label {
  background-color: #ff9900; /* Orange background for selected option */
  color: white; /* White text for selected option */
}