.checklist {
  margin:20px 0;
}

.checklist .grid__column {
  cursor: pointer;
  padding: 2rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  text-align: center;
	background-color:#FFEDED;
	user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.checklist .grid__column:hover {
  background-color: #f9f9f9;
}

.checklist .grid__column.selected {
  background-color: var(--token-ui-button-primary-color-active);
  border: 1px solid var(--token-ui-button-primary-color-active);
	color: white;
}
.checklist .grid__column.selected img {
filter: invert(1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checklist .grid__column {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in {
  opacity: 0;
  animation: slideInRight 0.2s ease-out forwards;
}

@keyframes iconBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.question-item img.bounce {
  animation: iconBounce 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* soft bounce */
}


/* Optional: stagger dela*