/* Custom styles for Character Name Generator */

/* Smooth fade in for results */
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

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

/* Gender Toggle Buttons */
.gender-btn {
  @apply py-3 px-4 rounded-lg font-medium text-slate-400 transition-all duration-200 border border-transparent;
}

.gender-btn:hover {
  @apply text-white bg-white/5;
}

.gender-btn.active {
  @apply bg-slate-700 text-white shadow-md border-slate-600;
}

/* Result Cards */
.name-card {
  @apply bg-slate-800/80 backdrop-blur border border-white/5 rounded-xl p-4 hover:border-purple-500/50 transition-colors cursor-default relative overflow-hidden;
}

.name-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #9333ea, #db2777);
  opacity: 0.7;
}

/* Scrollbar styling for webkit */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a; 
}
::-webkit-scrollbar-thumb {
  background: #334155; 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; 
}