/* Usage example:
<label class="go3__check">
  <input type="checkbox" name="checked" value="1">
  <span><?php echo esc_html( $checkbox ); ?></span>
</label>
*/

/* Wrapper label */
.go3__check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.3;
  margin: 12px 0 18px;
  cursor: pointer;
  position: relative;
}

/* Hide native checkbox (kept in the label for accessibility) */
.go3__check > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 28px; /* click area */
  height: 24px; /* click area */
}

/* Text */
.go3__check > span {
  position: relative;
  padding-left: 28px; /* room for custom box */
}

/* Custom box (unchecked) */
.go3__check > span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background: transparent;

  /* inside “border”, no box-shadow */
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: -1px;

  transition: background 0.1s ease, outline-color 0.1s ease, transform 0.1s ease;
}

/* Checkmark (hidden by default) */
.go3__check > span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 3px;
  height: 9px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
}

/* Checked state */
.go3__check > input[type="checkbox"]:checked + span::before {
  outline: 0; /* remove inside outline when checked */
  background: #ff1a1a; /* red fill */
}
.go3__check > input[type="checkbox"]:checked + span::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Keyboard focus */
.go3__check > input[type="checkbox"]:focus-visible + span::before {
  outline: 0; /* keep outline off even on focus */
  box-shadow: 0 0 0 3px rgba(255, 26, 26, 0.35);
}

/* Disabled */
.go3__check > input[type="checkbox"]:disabled + span {
  opacity: 0.6;
  cursor: not-allowed;
}