/* Custom styles for checkout page */

body {
  background-color: #05080d;
}

/* Glow effects */
.glow-accent-1 {
  position: absolute;
  width: 400px;
  height: 400px;
  top: -100px;
  left: -150px;
  background: radial-gradient(circle, rgba(0, 209, 255, 0.08) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.glow-accent-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -200px;
  background: radial-gradient(circle, rgba(20, 241, 217, 0.06) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Glassmorphic card styling */
.glass-card {
  background: rgba(11, 17, 28, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Custom frosted inputs */
input:not([readonly]), select {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

input:focus, select:focus {
  box-shadow: 
    0 0 0 2px rgba(0, 209, 255, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Custom drag and drop zone */
#drop-zone.dragover {
  border-color: #00d1ff;
  background-color: rgba(0, 209, 255, 0.05);
  box-shadow: 0 0 20px rgba(0, 209, 255, 0.1);
}

/* Disable scrollbar on mobile views but keep functional */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 209, 255, 0.2);
}

/* Animations and transitions */
.animate-spin {
  animation: spin 1s linear infinite;
}

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