/* Base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom components */
@layer components {
  .step-pill {
    @apply px-3 py-1 rounded-full text-center transition-colors duration-300;
    @apply bg-gray-700 text-gray-400;
  }

  .step-pill.completed {
    @apply bg-green-500 text-white;
  }

  .step-pill.current {
    @apply bg-blue-500 text-white;
  }
}

/* Video player styling */
video {
  aspect-ratio: 9/16;
  object-fit: cover;
  width: 100%;
  height: auto;
  background-color: #000;
}

/* Text input styling */
#video-text {
  @apply w-full p-4 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  @apply text-gray-800 bg-white;
  min-height: 120px;
}

/* Watermark overlay */
#watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-container:hover #watermark-overlay,
#watermark-overlay:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Progress bars */
#progress-container {
    @apply space-y-4 w-full;
}

#queue-progress-container,
#processing-progress-container {
    @apply w-full;
}

#queue-progress-bar {
    @apply bg-yellow-500 h-2.5 rounded-full transition-all duration-500;
}

#processing-progress-bar {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-500;
}

.progress-bar-container {
    @apply w-full bg-gray-200 rounded-full h-2.5 mb-1;
}

.progress-status {
    @apply flex justify-between mb-1;
}

.progress-status span {
    @apply text-sm font-medium text-gray-700;
}

/* Queue specific styles */
#queue-progress-container .progress-status span {
    @apply text-yellow-700;
}

/* Processing specific styles */
#processing-progress-container .progress-status span {
    @apply text-blue-700;
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Text input enhancements */
textarea {
  color: #1f2937; /* gray-800 */
  caret-color: #3b82f6; /* blue-500 */
  resize: none;
}

textarea::placeholder {
  color: #6b7280; /* gray-500 */
  opacity: 1;
}

/* Toast notifications */
.toast {
  @apply fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg;
  @apply text-white animate__animated animate__fadeInUp;
}

.toast.info {
  @apply bg-blue-500;
}

.toast.success {
  @apply bg-green-500;
}

.toast.warning {
  @apply bg-yellow-500;
}

.toast.error {
  @apply bg-red-500;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #video-text {
    min-height: 100px;
    padding: 0.75rem;
  }
  
  .step-pill {
    @apply px-2 py-0.5 text-sm;
  }
}

/* Portrait aspect ratio for gallery videos */
.video-preview {
  aspect-ratio: 9/16;
  object-fit: cover;
  width: 100%;
  height: auto;
  background-color: #000;
}