/* Add any custom styles here */

/* Search Input Styles */
#searchInput {
  background-color: #2d3748; /* Slightly lighter than the header background */
  color: #ffffff; /* White text color for contrast */
  border: 1px solid #4a5568; /* Border color for the search input */
  padding: 0.5rem 1rem; /* Padding for a consistent look */
  border-radius: 0.375rem; /* Rounded corners for the input */
  width: 100%; /* Full width to fit the container */
  transition: border-color 0.3s ease; /* Smooth transition for border color */
  margin-bottom: 0.5rem; /* Space below the input */
}

#searchInput:focus {
  outline: none; /* Remove default outline */
  border-color: #63b3ed; /* Light blue color when focused */
}

#searchInput::placeholder {
  color: #a0aec0; /* Placeholder text color */
}

/* Category Button Styles */
.category-button {
  transition: background-color 0.3s ease;
}

.category-button.active {
  background-color: #4299e1; /* Active category button background */
}

/* Prompt Card Styles */
.prompt-card {
  transition: transform 0.3s ease;
}

.prompt-card:hover {
  transform: translateY(-5px); /* Slight lift effect on hover */
}

/* Prompt Details Styles */
.prompt-details {
  transition: max-height 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
}

.prompt-details:not(.hidden) {
  max-height: 1000px; /* Adjust this value as needed */
}

/* Toggle Details Button Styles */
.toggle-details {
  transition: background-color 0.3s ease;
}

/* Pagination Styles */
#pagination button {
  transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth transition for background and opacity */
}

#pagination button:disabled {
  cursor: not-allowed; /* Change cursor to indicate disabled state */
  opacity: 0.5; /* Reduce opacity for disabled buttons */
}

#pageInfo {
  font-size: 0.9rem; /* Slightly smaller font size for page info */
  color: #a0aec0; /* Light gray color for text */
}
/* Add these styles to your existing CSS */
.prompt-details button {
  transition: background-color 0.3s ease;
}

.copy-btn:hover, .download-json-btn:hover, .download-md-btn:hover, .download-txt-btn:hover {
  opacity: 0.9;
}