/* app/assets/stylesheets/wizard.css */


/* Wizard-specific animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@layer components {
  .wizard-step {
    @apply p-6 rounded-xl bg-white shadow-md border border-slate-200;
    animation: fadeIn 0.4s ease-out;
  }

  .wizard-progress-dot {
    @apply w-3 h-3 rounded-full transition-colors duration-300;
  }

  .wizard-progress-line {
    @apply h-0.5 flex-grow transition-colors duration-500;
  }

  .wizard-option-card {
    @apply border border-indigo-200 bg-white rounded-lg p-3 flex items-center cursor-pointer transition-all;
  }

  .wizard-option-card.selected {
    @apply border-indigo-500 bg-indigo-50 ring-2 ring-indigo-300 ;
  }

  .wizard-option-card:hover:not(.selected) {
    @apply border-indigo-300 bg-indigo-50;
  }

  .wizard-option-card.selected .wizard-option-icon {
    @apply text-indigo-500 bg-indigo-100;
    animation: pulse-subtle 2s infinite;
  }

  .wizard-option-icon {
    @apply w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-400 transition-colors;
  }

  /* Enhanced navigation buttons */
  .wizard-nav-button {
    @apply py-3 px-4 rounded-lg font-medium transition-all duration-200 min-h-[48px];
    @apply cursor-pointer select-none inline-flex items-center justify-center;
    @apply hover:transform hover:translate-y-[-1px];
    @apply active:translate-y-[1px] active:shadow-inner;
  }

  .wizard-primary-button {
    @apply bg-amber-500 text-white;
    @apply hover:bg-amber-600 hover:shadow-lg;
    @apply focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:outline-none;
  }

  .wizard-secondary-button {
    @apply bg-white border border-indigo-300 text-indigo-600;
    @apply hover:bg-indigo-50 hover:border-indigo-400 hover:shadow-sm;
    @apply focus:ring-2 focus:ring-indigo-300 focus:ring-offset-1 focus:outline-none;
  }

  /* Enhance selection cards with better feedback states */
  .wizard-option-card {
    @apply border border-indigo-200 bg-white rounded-lg p-3 flex items-center cursor-pointer transition-all duration-200;
    @apply hover:border-indigo-300 hover:bg-indigo-50 hover:shadow-sm hover:translate-y-[-1px];
    @apply active:translate-y-[1px] active:shadow-none;
  }

  .wizard-option-card.selected {
    @apply border-indigo-500 bg-indigo-50 ring-2 ring-indigo-300 shadow-md;
  }

  /* Add checkmark to selected items */
  .wizard-option-card.selected::after {
    content: "";
    @apply absolute top-2 right-2 w-4 h-4 bg-indigo-500 rounded-full;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Enhance icon containers */
  .wizard-option-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center text-indigo-400;
    @apply bg-gradient-to-br from-indigo-50 to-indigo-100 transition-all duration-300;
    @apply shadow-inner;
  }

  .wizard-option-card:hover .wizard-option-icon {
    @apply text-indigo-500;
  }

  .wizard-option-card.selected .wizard-option-icon {
    @apply text-indigo-500 bg-gradient-to-br from-indigo-100 to-indigo-200;
    @apply transform scale-110;
  }

}