/* Component styles for AIClips V2 theme */

/* Action Cards */
.action-card {
  @apply p-6 rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer;
  @apply bg-white dark:bg-dcard border-gray-200/70 dark:border-white/10;
}

.action-card-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4;
}

/* Creation Cards */
.creation-card {
  @apply relative rounded-xl overflow-hidden group cursor-pointer;
  @apply bg-white dark:bg-dcard border border-gray-200/70 dark:border-white/10;
}

.creation-card-image {
  @apply w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105;
}

.creation-card-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}

.creation-card-content {
  @apply absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300;
}

/* Workflow Cards */
.workflow-card {
  @apply flex items-center gap-4 p-4 rounded-xl transition-colors cursor-pointer;
  @apply hover:bg-gray-100 dark:hover:bg-dmuted;
}

.workflow-icon {
  @apply w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0;
}

.workflow-badge {
  @apply ml-auto px-2 py-1 rounded-full text-[10px] font-semibold uppercase tracking-wide;
}

/* Glass Effect */
.glass-effect {
  @apply backdrop-blur-lg bg-white/80 dark:bg-dcard/80 border border-white/20 dark:border-white/10;
}

/* Loading Skeleton */
.skeleton-loader {
  @apply animate-pulse bg-gray-200 dark:bg-dmuted rounded;
}

/* Item Card V2 */
.item-card-v2 {
  @apply bg-white dark:bg-dcard rounded-xl border border-gray-200/60 dark:border-white/10;
  @apply hover:shadow-lg transition-all duration-300;
}

.item-card-v2:hover {
  transform: translateY(-2px);
}

/* Category Card V2 */
.category-card-v2 {
  @apply relative overflow-hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card-v2:hover {
  transform: scale(1.02);
}

/* Tab Navigation */
.tab-button {
  @apply px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200;
  white-space: nowrap;
}

.tab-button.active {
  @apply bg-blue-600 text-white;
}

.tab-button:not(.active) {
  @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-dmuted;
}

/* Hero Gradient Background */
.hero-gradient {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(147, 51, 234, 0.1) 100%);
}

.dark .hero-gradient {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(147, 51, 234, 0.2) 100%);
}

/* Stats Counter */
.stat-counter {
  @apply text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

/* Quick Action Pills */
.quick-action-pill {
  @apply px-4 py-2 rounded-full border border-gray-200/60 dark:border-white/10;
  @apply hover:bg-gray-50 dark:hover:bg-dmuted transition-colors;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Gradient Text */
.gradient-text {
  @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

/* Badge Styles */
.badge-featured {
  @apply px-2 py-0.5 bg-yellow-500 text-white text-xs font-medium rounded-full;
}

.badge-discount {
  @apply px-2 py-0.5 bg-red-500 text-white text-xs font-medium rounded-full;
}

.badge-free {
  @apply px-2 py-0.5 bg-green-500 text-white text-xs font-medium rounded-full;
}

.badge-premium {
  @apply px-2 py-0.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-medium rounded-full;
}
.skeleton {
  @apply animate-pulse bg-gray-200 dark:bg-white/10 rounded;
}

.skeleton-text {
  @apply h-4 w-full skeleton mb-2;
}

.skeleton-title {
  @apply h-6 w-3/4 skeleton mb-4;
}

.skeleton-image {
  @apply w-full aspect-video skeleton;
}

/* Gradient Backgrounds */
.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #667eea 0%, #4facfe 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Button Variants */
.btn-primary {
  @apply px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors;
}

.btn-secondary {
  @apply px-4 py-2 rounded-lg bg-gray-100 dark:bg-dmuted text-gray-900 dark:text-gray-100 font-medium hover:bg-gray-200 dark:hover:bg-dmuted/80 transition-colors;
}

.btn-outline {
  @apply px-4 py-2 rounded-lg border border-gray-300 dark:border-white/20 font-medium hover:bg-gray-100 dark:hover:bg-dmuted transition-colors;
}

/* Badge Styles */
.badge {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold;
}

.badge-success {
  @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.badge-danger {
  @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}

.badge-info {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
}

/* Input Styles */
.input-field {
  @apply w-full px-4 py-2 rounded-lg border bg-white dark:bg-dcard border-gray-300 dark:border-white/20;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
}

/* Section Headers */
.section-header {
  @apply flex items-center justify-between mb-6;
}

.section-title {
  @apply text-xl font-bold text-gray-900 dark:text-gray-100;
}

.section-link {
  @apply text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium;
}

/* Grid Layouts */
.grid-responsive {
  @apply grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
}

.grid-actions {
  @apply grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Hover Effects */
.hover-lift {
  @apply transition-transform duration-200 hover:-translate-y-1;
}

.hover-glow {
  @apply transition-shadow duration-200 hover:shadow-xl hover:shadow-blue-500/20;
}