/* Additional styles beyond Tailwind */

/* Animation for character cards */
.character-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(92, 73, 53, 0.1), 0 10px 10px -5px rgba(92, 73, 53, 0.04);
}

/* Custom scrollbar for the search dropdown */
#search-dropdown::-webkit-scrollbar {
  width: 8px;
}

#search-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#search-dropdown::-webkit-scrollbar-thumb {
  background: #8C7158;
  border-radius: 4px;
}

#search-dropdown::-webkit-scrollbar-thumb:hover {
  background: #5C4935;
}

/* Fade-in animation for prompts in modal */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.prompt-card {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Ensure modal doesn't overflow on mobile */
@media (max-width: 640px) {
  #prompt-modal > div {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

/* Active state for search results */
.search-result.active {
  background-color: #F5F0E1;
  color: #5C4935;
}

/* Newsletter subscription status messages */
.success-message {
  color: #48bb78;
}

.error-message {
  color: #9B2C2C;
}