@import "tailwindcss";

@theme {
  --color-primary: #c5a059;
  --color-primary-dark: #8a7b5d;
  --color-bg-dark: #0a0a0a;
  --color-bg-card: #151515;
}

body {
  background-color: var(--color-bg-dark);
  color: #e5e7eb;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
}

.text-gold {
  color: var(--color-primary);
}

.bg-gold {
  background-color: var(--color-primary);
}

.border-gold {
  border-color: var(--color-primary);
}

.gold-gradient {
  background: linear-gradient(135deg, #c5a059 0%, #8a7b5d 100%);
}

.shadow-gold {
  box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15);
}

/* Hover effects */
.hover-gold:hover {
  color: var(--color-primary);
}

.btn-primary {
  background: linear-gradient(135deg, #c5a059 0%, #8a7b5d 100%);
  color: black;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  transition: all 0.3s;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.btn-primary:active {
  transform: scale(0.95);
}

.card-movie {
  background-color: var(--color-bg-card);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s;
}

.card-movie:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15);
}

.movie-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

/* Floating button */
#float-app {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 50;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Navigation animation */
nav {
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 10, 0.8);
}

/* Custom categories styling */
.category-item {
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: #374151; /* gray-700 */
  font-size: 0.875rem; /* text-sm */
  transition-property: all;
  cursor: pointer;
}

.category-item.active {
  background-color: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

.category-item:hover:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}