/* Question Form Animations */

/* Smooth transitions for question type options */
[data-question-form-target="multipleChoice"],
[data-question-form-target="numberOptions"],
[data-question-form-target="textOptions"] {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  max-height: 1000px;
  overflow: hidden;
}

[data-question-form-target="multipleChoice"].hidden,
[data-question-form-target="numberOptions"].hidden,
[data-question-form-target="textOptions"].hidden {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Conditional Logic Panel Animations */
#conditional-logic-panel {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  max-height: 1000px;
  overflow: hidden;
}

#conditional-logic-panel.hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}

/* Choice Item Animations */
.choice-item {
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}

.choice-item.removing {
  transform: translateY(-10px);
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding: 0;
}

/* Conditional Questions Animations (for questionnaire display) */
.conditional-question {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  transform: translateY(0);
  max-height: none;
  overflow: hidden;
}

.conditional-question.hidden {
  opacity: 0;
  transform: translateY(-20px);
  max-height: 0;
  margin: 0;
  padding: 0;
}

.conditional-question-entering {
  animation: slideInDown 0.3s ease-out;
}

.conditional-question-leaving {
  animation: slideOutUp 0.3s ease-in;
}

/* Keyframe animations */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Hover effects for question cards */
.question-card {
  transition: all 0.2s ease-in-out;
}

.question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Form field focus animations */
.question-form input:focus,
.question-form select:focus,
.question-form textarea:focus {
  transition: all 0.2s ease-in-out;
  transform: scale(1.02);
}

/* Badge animations */
.question-badge {
  transition: all 0.2s ease-in-out;
}

.question-badge:hover {
  transform: scale(1.05);
}

/* Loading states */
.question-form.loading {
  opacity: 0.7;
  pointer-events: none;
}

.question-form.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .conditional-question-entering,
  .conditional-question-leaving {
    animation-duration: 0.2s;
  }
  
  [data-question-form-target="multipleChoice"],
  [data-question-form-target="numberOptions"],
  [data-question-form-target="textOptions"],
  #conditional-logic-panel {
    transition-duration: 0.2s;
  }
}

/* Print styles */
@media print {
  .conditional-question-entering,
  .conditional-question-leaving,
  .conditional-question.hidden {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
}