/* Server Roulette – Custom Styles */

.hero-glow {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.15), transparent);
}

.card {
  background: rgba(18, 18, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  backdrop-filter: blur(4px);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: linear-gradient(to right, #4f46e5, #6366f1);
  color: white;
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.25);
  transition: all 0.2s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.1); transform: scale(1.02); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: #242433;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary:hover { background: #2d2d3d; }

.btn-secondary-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  background: rgba(36, 36, 51, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: #d1d5db;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-ghost:hover { color: white; background: rgba(255,255,255,0.05); }

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  border-radius: 1rem;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  background: linear-gradient(to right, #4f46e5, #9333ea, #db2777);
  color: white;
  box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.3);
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-hero:hover { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.5); }
.btn-hero:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-success {
  display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.5rem;
  font-weight: 600; font-size: 0.875rem; background: rgba(22, 163, 74, 0.2);
  color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); cursor: pointer;
}
.btn-danger {
  display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.5rem;
  font-weight: 600; font-size: 0.875rem; background: rgba(220, 38, 38, 0.2);
  color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); cursor: pointer;
}

.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #d1d5db; margin-bottom: 0.375rem; }
.form-input {
  width: 100%; padding: 0.625rem 1rem; border-radius: 0.75rem;
  background: rgba(10, 10, 15, 0.8); border: 1px solid rgba(255,255,255,0.1);
  color: #f3f4f6; font-size: 0.875rem;
}
.form-input:focus { outline: none; border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }

.filter-chip {
  padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1); color: #9ca3af; cursor: pointer;
  background: rgba(18,18,26,0.5); transition: all 0.2s;
}
.filter-chip:hover { border-color: rgba(99,102,241,0.3); color: white; }
.filter-chip.active { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.4); color: #a5b4fc; }

.status-badge {
  display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.status-pending { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.2); }
.status-approved { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.2); }
.status-rejected { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.2); }
.status-banned { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }
.status-featured { background: rgba(168,85,247,0.15); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.2); }

.flash-success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #bbf7d0; }
.flash-error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #fecaca; }
.flash-info { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); color: #c7d2fe; }
.flash-warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #fde68a; }

@keyframes slide-in {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in { animation: slide-in 0.3s ease-out; }

.roulette-wheel-container { display: flex; justify-content: center; }
.roulette-wheel {
  width: 160px; height: 160px; border-radius: 50%;
  background: conic-gradient(from 0deg, #6366f1, #a855f7, #ec4899, #6366f1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.4);
}
.roulette-wheel.spinning { animation: roulette-spin 2s cubic-bezier(0.17, 0.67, 0.12, 0.99); }
@keyframes roulette-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(1440deg); } }
.roulette-inner {
  width: 120px; height: 120px; border-radius: 50%; background: #12121a;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.1);
}
.result-card-enter { animation: result-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes result-pop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* NexoraHost branding */
.nexorahost-dot, .nexorahost-dot-sm {
  display: inline-block;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
.nexorahost-dot { width: 8px; height: 8px; }
.nexorahost-dot-sm { width: 6px; height: 6px; }

.nexorahost-link:hover .nexorahost-dot {
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
}

.nexorahost-card {
  border-color: rgba(99, 102, 241, 0.15);
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.9), rgba(26, 26, 38, 0.8));
}