@charset "UTF-8";
/* Your existing CSS code goes here */
/* Reset default styles for list and input */
.ginput_container_checkbox ul,
.ginput_container_checkbox input[type="checkbox"] {
  /* ... your existing CSS code ... */
}

/* Reset default styles for list and input */
.ginput_container_checkbox ul,
.ginput_container_checkbox input[type="checkbox"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* General styles for checkbox container */
.ginput_container_checkbox li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 5px;
  cursor: pointer;
  opacity: 0;

  transition: opacity 1s ease; /* Fade-in on page load */
}

/* Style for the checkbox itself */
.ginput_container_checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.5s ease; /* Smooth transition for background */
}

/* Styling for checked checkboxes */
.ginput_container_checkbox input[type="checkbox"]:checked {
  background-color: #2196F3;
  border: none; /* Remove border when checked (optional) */
}

/* Checkmark styling (optional) */
.ginput_container_checkbox input[type="checkbox"]:checked::before {
  content: "✓";
  display: block;
  text-align: center;
  font-size: 16px;
  color: #000; /* Black checkmark */
}

/* Label styling */
.ginput_container_checkbox label {
  cursor: pointer;
  width: 100% !important;
  padding: 10px !important; /* Keep your padding */
  box-sizing: border-box;
  transition: background-color 0.5s ease; /* Smooth transition for background */
}

.ginput_container_checkbox input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #000;
  background-color: #50C878;
  width: 100%; 
}

/* Show checkboxes on page load */
.ginput_container_checkbox li {
  opacity: 1;
}


/* Styling for checked checkboxes */
.ginput_container_checkbox input[type="checkbox"]:checked {
  background-color: <?php echo esc_attr(get_option('ggcf_background_color', '#2196F3')); ?>; /* Get color from settings */
  border: none; 
}

.ginput_container_checkbox input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #000;
  background-color: <?php echo esc_attr(get_option('ggcf_background_color', '#50C878')); ?>; /* Get color from settings */
  width: 100%; 
}