@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(16, 42, 67, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 125, 152, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 125, 152, 0.8);
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  @apply bg-void-950 text-void-100 antialiased;
  font-family: 'Satoshi', system-ui, sans-serif;
  background-image: 
    radial-gradient(ellipse 80% 80% at 50% -20%, rgba(255, 107, 107, 0.05), transparent),
    radial-gradient(ellipse 80% 80% at 80% 50%, rgba(34, 184, 207, 0.05), transparent);
}

/* Glass morphism effect */
.glass {
  @apply bg-void-900/60 backdrop-blur-xl border border-void-700/30;
}

.glass-dark {
  @apply bg-void-950/80 backdrop-blur-xl border border-void-800/50;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-coral-400 via-coral-500 to-electric-400 bg-clip-text text-transparent;
}

.gradient-text-electric {
  @apply bg-gradient-to-r from-electric-400 to-electric-600 bg-clip-text text-transparent;
}

/* Button base styles */
.btn-primary {
  @apply px-6 py-3 bg-gradient-to-r from-coral-500 to-coral-600 text-white font-semibold rounded-xl;
  @apply hover:from-coral-400 hover:to-coral-500 transition-all duration-300;
  @apply shadow-lg shadow-coral-500/25 hover:shadow-coral-500/40;
  @apply active:scale-[0.98];
}

.btn-secondary {
  @apply px-6 py-3 bg-void-800 text-void-100 font-semibold rounded-xl border border-void-600;
  @apply hover:bg-void-700 hover:border-void-500 transition-all duration-300;
  @apply active:scale-[0.98];
}

.btn-secondary-electric {
  @apply px-6 py-3 bg-void-800 text-void-100 font-semibold rounded-xl border border-electric-500/50;
  @apply hover:bg-electric-500/10 hover:border-electric-400 hover:text-electric-300 transition-all duration-300;
  @apply active:scale-[0.98];
}

.btn-electric {
  @apply px-6 py-3 bg-gradient-to-r from-electric-500 to-electric-600 text-void-950 font-semibold rounded-xl;
  @apply hover:from-electric-400 hover:to-electric-500 transition-all duration-300;
  @apply shadow-lg shadow-electric-500/25 hover:shadow-electric-500/40;
  @apply active:scale-[0.98];
}

/* Card styles */
.card {
  @apply bg-void-900/50 backdrop-blur-lg rounded-2xl border border-void-700/30 p-6;
}

.card-interactive {
  @apply card cursor-pointer transition-all duration-300;
  @apply hover:bg-void-800/50 hover:border-void-600/50 hover:shadow-xl;
}

/* Input styles */
.input-field {
  @apply w-full bg-void-900/50 border border-void-700 rounded-xl px-4 py-3;
  @apply text-void-100 placeholder-void-500;
  @apply focus:outline-none focus:border-coral-500/50 focus:ring-2 focus:ring-coral-500/20;
  @apply transition-all duration-200;
}

.textarea-field {
  @apply input-field resize-none;
}

/* Provider card animations */
.provider-card {
  @apply relative overflow-hidden;
}

.provider-card::before {
  content: '';
  @apply absolute inset-0 opacity-0 transition-opacity duration-500;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 107, 107, 0.05) 100%);
}

.provider-card:hover::before {
  @apply opacity-100;
}

/* Progress ring */
.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.35s;
  transform-origin: 50% 50%;
}

/* Shimmer loading effect */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Floating animation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Glow effects */
.glow-coral {
  box-shadow: 0 0 40px rgba(255, 107, 107, 0.15);
}

.glow-electric {
  box-shadow: 0 0 40px rgba(34, 184, 207, 0.15);
}

/* Tab styles */
.tab-button {
  @apply px-6 py-3 font-medium text-void-400 rounded-lg transition-all duration-200;
}

.tab-button.active {
  @apply text-void-100 bg-void-800;
}

.tab-button:hover:not(.active) {
  @apply text-void-200 bg-void-900/50;
}

/* Step indicator */
.step-dot {
  @apply w-3 h-3 rounded-full bg-void-700 transition-all duration-300;
}

.step-dot.active {
  @apply bg-coral-500 scale-125;
}

.step-dot.completed {
  @apply bg-electric-500;
}

/* Select dropdown */
.select-field {
  @apply input-field cursor-pointer appearance-none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239fb3c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Pulse animation for live elements */
@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-live {
  animation: pulse-live 2s ease-in-out infinite;
}

/* Slow pulse animation */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 2s ease-in-out infinite;
}

/* Shimmer animation for progress bars */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* Scrollbar utilities */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-thumb-void-600::-webkit-scrollbar-thumb {
  background: rgba(99, 125, 152, 0.5);
  border-radius: 4px;
}

.scrollbar-track-void-800::-webkit-scrollbar-track {
  background: rgba(16, 42, 67, 0.5);
  border-radius: 4px;
}

/* Drag and drop zone */
.dropzone {
  @apply border-2 border-dashed border-void-600 rounded-2xl p-8;
  @apply transition-all duration-300;
}

.dropzone.active {
  @apply border-coral-500 bg-coral-500/5;
}

.dropzone:hover {
  @apply border-void-500 bg-void-900/30;
}