/* Custom Styles & Modern Enhancements */

body {
  font-family: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif;
}

/* Custom Drag and Drop Highlight */
#dropZone.dragover {
  border-color: #6366f1 !important;
  background-color: rgba(99, 102, 241, 0.15) !important;
  transform: scale(1.01);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Range input styling */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  border: 2px solid #ffffff;
}

input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  border: 2px solid #ffffff;
}

/* Image Card Hover */
.image-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
}

/* Spinner Animation */
@keyframes spin-fast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-fast {
  animation: spin-fast 0.8s linear infinite;
}

/* Transparency checkboard pattern for previews */
.checkerboard-pattern {
  background-color: #0f172a;
  background-image: 
    linear-gradient(45deg, #1e293b 25%, transparent 25%), 
    linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #1e293b 75%), 
    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}