/* Supplement Vergelijker Custom Styles */

/* Custom colors for the health/supplement theme */
:root {
  --primary-green: #059669;
  --primary-green-dark: #047857;
  --secondary-blue: #0369a1;
  --light-green: #f0fdf4;
  --accent-orange: #ea580c;
}

/* Custom components */
.btn-primary {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow duration-200;
}

/* Search input styling */
.search-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200;
}

/* Filter badge styling */
.filter-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200;
}

.filter-badge-active {
  @apply bg-green-600 text-white border-green-600;
}

/* Price styling */
.price-main {
  @apply text-2xl font-bold text-green-600;
}

.price-old {
  @apply text-sm text-gray-500 line-through;
}

/* Rating stars */
.rating-stars {
  @apply flex items-center;
}

.rating-star {
  @apply text-yellow-400;
}

.rating-star-empty {
  @apply text-gray-300;
}

/* Supplement card styling */
.supplement-card {
  @apply bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg hover:border-green-300 transition-all duration-300;
}

.supplement-card:hover {
  transform: translateY(-2px);
}

/* Quality badges */
.quality-badge {
  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
}

.quality-badge-organic {
  @apply bg-green-100 text-green-800;
}

.quality-badge-vegan {
  @apply bg-blue-100 text-blue-800;
}

.quality-badge-tested {
  @apply bg-purple-100 text-purple-800;
}

.quality-badge-glutenfree {
  @apply bg-orange-100 text-orange-800;
}

/* Comparison table */
.comparison-table {
  @apply min-w-full divide-y divide-gray-200;
}

.comparison-table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

.comparison-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
}

/* Loading animations */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-green-600;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .supplement-card {
    @apply mx-2;
  }
}

/* Custom scrollbar for filter panels */
.filter-panel::-webkit-scrollbar {
  width: 6px;
}

.filter-panel::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded;
}

.filter-panel::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded hover:bg-gray-500;
}

/* Transition animations */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}