/* Elvis Creator Hub — Main CSS */
/* Design tokens: Fraunces headings, Manrope body, Warm white bg */

:root {
  --cream: #FDFCF8;
  --elvis-pink: #FCE7F3;
  --elvis-lilac: #F3E8FF;
  --elvis-mint: #DCFCE7;
  --elvis-peach: #FFEDD5;
  --elvis-dark: #18181B;
  --zinc-400: #A1A1AA;
  --zinc-500: #71717A;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.05);
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--cream); }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bounceSlow {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease forwards 0.3s;
  opacity: 0;
}

.animate-bounce-slow {
  animation: bounceSlow 2s ease-in-out infinite;
}

/* Product horizontal scroll */
.product-scroll {
  display: flex;
  overflow-x: auto;
  gap: 1.25rem;
  padding: 0.5rem 0 1.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-scroll::-webkit-scrollbar {
  display: none;
}

.product-card {
  scroll-snap-align: start;
}

/* Badge styles */
.badge-paid {
  display: inline-flex;
  align-items: center;
  background: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

.badge-barter {
  display: inline-flex;
  align-items: center;
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

.badge-affiliate {
  display: inline-flex;
  align-items: center;
  background: #F5F3FF;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

/* Video type badge */
.video-type-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

.video-type-badge.ugc { background: #FCE7F3; color: #BE185D; }
.video-type-badge.integrated { background: #EFF6FF; color: #1D4ED8; }
.video-type-badge.scripted { background: #F5F3FF; color: #6D28D9; }
.video-type-badge.direct_ad { background: #FEF3C7; color: #92400E; }
.video-type-badge.product_explanation { background: #ECFDF5; color: #065F46; }
.video-type-badge.testimonial { background: #FFF7ED; color: #9A3412; }
.video-type-badge.trend_based { background: #F0FDF4; color: #15803D; }
.video-type-badge.other { background: #F4F4F5; color: #52525B; }

/* Form inputs */
.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.15);
}

/* Navbar scroll effect */
.navbar-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Alert message auto-dismiss */
.alert-msg {
  animation: fadeInUp 0.3s ease forwards;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth transitions for hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* Custom checkbox and radio styling */
input[type="checkbox"] {
  accent-color: #EC4899;
}

/* Responsive product grid adjustments */
@media (max-width: 640px) {
  .product-scroll {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Backdrop filter support */
@supports not (backdrop-filter: blur(10px)) {
  .backdrop-blur-xl { background-color: rgba(255, 255, 255, 0.95); }
}

/* Focus visible accessibility */
*:focus-visible {
  outline: 2px solid #EC4899;
  outline-offset: 2px;
}