/* Tailwind v2 Comparison Styles */

.comparison-v2 {
  position: relative;
}

/* Column hover effects */
.traditional-column {
  transition: all var(--transition-slow);
}

.traditional-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modern-column {
  transition: all var(--transition-slow);
}

.modern-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

/* Icon animations */
.comparison-v2 svg {
  transition: transform 0.2s ease;
}

.comparison-v2 li:hover svg {
  transform: scale(1.1);
}

/* List item animations */
.comparison-v2 li {
  transition: all var(--transition-base);
}

.comparison-v2 li:hover {
  padding-left: 0.5rem;
}

/* Badge animations */
.comparison-v2 span[class*="rounded-full"] {
  transition: all var(--transition-slow);
}

.comparison-v2 span[class*="rounded-full"]:hover {
  transform: scale(1.05);
}

/* Recommended badge pulse effect */
.comparison-v2 span[class*="bg-gradient-to-r"] {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comparison-item {
    gap: 1rem;
  }
  
  .comparison-v2 h3 {
    font-size: 1.5rem;
  }
  
  .modern-column .absolute {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    margin-bottom: 1rem;
  }
}

/* Dark mode support */
/* Dark mode automatically handled by design tokens */
  
  .comparison-v2 h2 {
    color: var(--color-neutral-50);
  }
  
  .comparison-v2 p {
    color: var(--color-neutral-300);
  }
  
  .traditional-column {
    background-color: var(--text-secondary);
  }
  
  .modern-column {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
  }
  
  .comparison-v2 h3 {
    color: var(--color-neutral-50);
  }
  
  .comparison-v2 li span {
    color: var(--color-neutral-200);
  }
}