/* ═══════════════════════════════════════════
   Loomic E-Commerce - Custom Styles
   ═══════════════════════════════════════════ */

/* ─── Marquee Animation ─── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* ─── Announcement Bar Seasonal Styles ─── */
/* Generic seasonal gradient - animated */
.announcement-seasonal {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 25%, #fbbf24 50%, #fb923c 75%, #f97316 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

@keyframes seasonalGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Season-specific variations */
.announcement-winter {
  background: linear-gradient(90deg, #1e40af 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #1e40af 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-spring {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 25%, #86efac 50%, #4ade80 75%, #16a34a 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-summer {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 25%, #fbbf24 50%, #fb923c 75%, #f97316 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-autumn {
  background: linear-gradient(90deg, #b45309 0%, #d97706 25%, #f59e0b 50%, #d97706 75%, #b45309 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

/* Pulse animation for special offers */
.announcement-pulse {
  animation: announcementPulse 2s ease-in-out infinite;
}

@keyframes announcementPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Shimmer effect */
.announcement-shimmer {
  position: relative;
  overflow: hidden;
}

.announcement-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* Floating emoji animation */
@keyframes floatEmoji {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.emoji-float {
  animation: floatEmoji 2s ease-in-out infinite;
}

/* ─── Scroll Entrance Animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }
.stagger-7 { transition-delay: 0.56s; }
.stagger-8 { transition-delay: 0.64s; }

/* ─── Cookie Banner ─── */
.cookie-backdrop {
  backdrop-filter: blur(4px);
}

/* ─── Dropdown ─── */
.dropdown {
  position: relative;
}
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  pointer-events: none;
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Padding bridge so hover doesn't break between link and menu */
.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 50;
}

/* ─── Product Card ─── */
.product-card {
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid transparent;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: rgba(249,115,22,0.3);
}
.product-card .cart-btn {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease-out;
}
.product-card:hover .cart-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Slideshow ─── */
.slide {
  display: none;
}
.slide.active {
  display: block;
}
.slide-content {
  animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ─── Mobile Menu ─── */
.mobile-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.mobile-panel.open {
  max-height: 800px;
}

/* ─── Submenu ─── */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.submenu.open {
  max-height: 400px;
}

/* ─── Smooth image hover ─── */
.img-zoom {
  transition: transform 0.4s ease;
}
.img-zoom:hover {
  transform: scale(1.05);
}

/* ─── Star rating ─── */
.star-filled { color: #F97316; }
.star-empty { color: #CBD5E1; }

/* ─── Announcement bar mobile ─── */
@media (min-width: 768px) {
  .announcement-mobile { display: none !important; }
  .announcement-desktop { display: flex !important; }
}
@media (max-width: 767px) {
  .announcement-mobile { display: flex !important; }
  .announcement-desktop { display: none !important; }
}

/* ─── Focus states ─── */
input:focus, button:focus {
  outline: none;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-marquee { animation: none; }
}

/* ═══ Mobile Touch Optimization ═══ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .product-card:hover { transform: none; box-shadow: none; }
  .hover\:shadow-md:hover, .hover\:shadow-lg:hover { box-shadow: none; }
  .hover\:bg-primary\/5:hover, .hover\:bg-primary\/90:hover { background: inherit; }
  
  /* Make dropdowns tap-to-open instead of hover */
  .dropdown-menu { display: none; }
  .dropdown:focus-within .dropdown-menu,
  .dropdown:active .dropdown-menu { display: block; }
  
  /* Larger touch targets */
  button, a, .sidebar-subcat-btn, input[type="checkbox"] {
    min-height: 36px;
  }
  
  /* Chat widget: move up to avoid bottom nav */
  .loomic-chat-fab { bottom: 80px; }
}

/* ═══ Mobile Filter Optimization ═══ */
@media (hover: none) and (pointer: coarse) {
  /* Category filter buttons */
  .sidebar-subcat-btn,
  [data-subcategory] button,
  button[data-subcategory] {
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 40px;
    margin-bottom: 4px;
  }
  
  /* Color filter buttons */
  .color-filter-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  .color-filter {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: 40px;
  }
  
  /* Size filter buttons */
  .size-filter-btn {
    font-size: 14px !important;
    padding: 8px 14px !important;
    min-height: 40px;
  }
  
  /* Rating filter buttons */
  .rating-filter {
    font-size: 14px !important;
    padding: 8px 0 !important;
    min-height: 40px;
  }
  
  /* Delivery time checkboxes */
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  
  /* Filter section headings */
  .sidebar h4 {
    font-size: 15px !important;
  }
  
  /* Price inputs */
  #price-min, #price-max {
    font-size: 14px !important;
    padding: 8px 10px !important;
    width: 80px !important;
  }
  
  #price-apply {
    font-size: 14px !important;
    padding: 8px 16px !important;
    min-height: 40px;
  }
  
  /* Product card text on mobile */
  .product-card h3,
  .product-card .text-sm {
    font-size: 13px !important;
  }
  
  /* "In den Warenkorb" button */
  .product-card button {
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 40px;
  }
}

/* ═══ Sidebar: larger on mobile ═══ */
@media (max-width: 1023px) {
  .sidebar {
    width: 100% !important;
  }
  
  .sidebar-subcat-btn,
  button[data-subcategory] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}