/* Minecraft Skin Overlay Merger - Enhanced Styles */

/* Pixelated image rendering for Minecraft skins */
.pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Enhanced gradient backgrounds */
.bg-gradient-cyber {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #0f172a 50%, #1e293b 75%, #0f172a 100%);
  background-size: 400% 400%;
  animation: gradientShiftCyber 15s ease infinite;
}

@keyframes gradientShiftCyber {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glass morphism effects */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced button styles */
.btn-gradient-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}

.btn-gradient-emerald:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.btn-gradient-cyan {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
  transition: all 0.3s ease;
}

.btn-gradient-cyan:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  box-shadow: 0 6px 25px rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Upload zone styles with better visual feedback */
.upload-zone {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(16, 185, 129, 0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.upload-zone:hover::before {
  transform: translateX(100%);
}

.upload-zone:hover {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.05);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

/* Drag and drop effects - Critical for functionality */
.dragover {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1)) !important;
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.4) !important;
  transform: scale(1.02) !important;
}

.dragover::after {
  content: 'Drop your file here';
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: inherit;
  z-index: 10;
  animation: pulse 1s ease-in-out infinite;
}

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

/* File input hiding - ensure inputs are completely hidden */
input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Preview canvas container */
.preview-canvas-container {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.preview-canvas-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Canvas styling */
canvas {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: manipulation;
}

canvas.hidden {
  display: none !important;
}

/* Status indicators */
.status-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.status-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.status-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

/* Loading animations */
.loading-pulse {
  animation: pulse-loading 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-loading {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced scrollbars */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.3) rgba(30, 41, 59, 0.5);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(6, 182, 212, 0.6));
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(6, 182, 212, 0.8));
}

/* Badge enhancements */
.badge-glow {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

/* Input enhancements */
.input-glow:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

/* File selection hover effects */
.file-item {
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
}

.file-item:active {
  transform: scale(0.98);
}

/* Image preview enhancements */
.skin-preview-image {
  transition: all 0.2s ease;
}

.skin-preview-image:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Button click feedback */
button:active {
  transform: scale(0.98);
}

button:disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Range slider custom styling */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.8) 0%, rgba(16, 185, 129, 0.3) 100%);
  outline: none;
  transition: all 0.2s ease;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

/* GitHub overlay indication */
.github-overlay-indicator {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(6, 182, 212, 0.4);
}

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

/* Responsive improvements */
@media (max-width: 768px) {
  .dragover::after {
    font-size: 0.9rem;
  }
  
  .upload-zone {
    height: 120px;
  }
  
  .card-hover {
    transform: none;
  }
  
  .card-hover:hover {
    transform: none;
  }
  
  .btn-gradient-emerald:hover,
  .btn-gradient-cyan:hover {
    transform: none;
  }
  
  button:active {
    transform: scale(0.95);
  }
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(255, 255, 255, 0.03);
  }
  
  .glass-strong {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Focus visibility improvements */
.focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Text glow effects for headings */
.text-glow {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.text-glow-cyan {
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

/* Success/error message animations */
.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Logo animation */
.logo-pulse {
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
  }
}

/* Processing overlay */
.processing {
  pointer-events: none;
  opacity: 0.7;
}

.processing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 5;
}

/* Ensure proper z-indexing for modals and overlays */
.modal-overlay {
  z-index: 50;
}

.dropdown-menu {
  z-index: 60;
}

.tooltip {
  z-index: 70;
}