/* Modern Survey Styles with Tailwind Integration */

.survey__answer {
  /* Base styles for survey answer - Tailwind handles most */
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.survey__answer:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.survey__answer--highlighted {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgb(139, 92, 246) !important;
  box-shadow: 0 0 0 1px rgb(139, 92, 246), 0 4px 12px rgba(139, 92, 246, 0.2);
}

.survey__answer--highlighted .survey__answer-fill {
  background: linear-gradient(to right, rgb(139, 92, 246), rgb(59, 130, 246)) !important;
}

.survey__answer-fill {
  transform-origin: left;
  animation: fillAnimation 0.8s ease-out forwards;
}

@keyframes fillAnimation {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.survey__question--loading {
  opacity: 0.6;
  pointer-events: none;
  filter: blur(0.5px);
}