/* Craftydeer Custom Styles - supplements Tailwind CDN */

:root {
  --primary: #FF6B6B;
  --secondary: #FFD93D;
  --primary-hover: #ff5252;
}

* { box-sizing: border-box; }

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f9f9f9; }

/* Hide scrollbar but allow scroll */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Snap scroll */
.snap-x { scroll-snap-type: x mandatory; }
.snap-start { scroll-snap-align: start; }

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

/* Spin wheel animation */
@keyframes spinWheel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(var(--spin-degrees, 1440deg)); }
}
.spinning { animation: spinWheel 4s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards; }

/* Fade in up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease forwards; }

/* Product card hover */
.product-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.product-card img { transition: transform 0.3s ease; }
.product-card:hover img { transform: scale(1.05); }

/* Button shadow press effect */
.btn-press {
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-press:hover { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(0,0,0,0.25); }

/* Sticky bottom mobile bar */
#mobile-bottom-bar { z-index: 49; }

/* ─── AD SLOT FIX ────────────────────────────────────────────────────────────
   Prevent ads from overflowing on mobile. All ad containers are clipped to
   the viewport width and their content is centred.
   ─────────────────────────────────────────────────────────────────────────── */
.ad-slot-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.ad-slot {
  background: #f0f0f0;
  border: 2px dashed #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  position: relative;
  /* Key fix: never wider than the screen */
  max-width: 100%;
  width: 100% !important; /* override inline width on mobile */
  overflow: hidden;
  box-sizing: border-box;
}

/* On ≥768 px screens, allow the declared pixel width to take effect */
@media (min-width: 768px) {
  .ad-slot {
    width: auto !important;
  }
}

.ad-slot::before {
  content: 'AD';
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.05em;
}

/* Real ad code injected via admin: make sure it never overflows */
.ad-slot ins,
.ad-slot iframe,
.ad-slot > * {
  max-width: 100% !important;
}

/* Mobile bottom sticky: must never overflow viewport */
#mobile-bottom-bar {
  max-width: 100vw;
  overflow: hidden;
}
#mobile-bottom-bar .ad-slot {
  width: 100% !important;
  max-width: 100%;
}

/* Star rating */
.star-filled { color: #FFD93D; }
.star-empty { color: #e0e0e0; }

/* Progress bar */
.progress-bar { transition: width 0.5s ease; }

/* Checkout steps */
.step-active { color: #FF6B6B; font-weight: 700; }
.step-done { color: #FF6B6B; }
.step-pending { color: #999; }

/* Mobile menu overlay */
#mobile-menu { transition: transform 0.3s ease; transform: translateX(-100%); }
#mobile-menu.open { transform: translateX(0); }
#mobile-overlay { display: none; }
#mobile-overlay.open { display: block; }

/* Popup animations */
.popup-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.popup-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.popup-content {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.popup-overlay.open .popup-content {
  transform: scale(1);
}

/* Live sale popup */
#live-sale-popup {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
#live-sale-popup.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Spin segments */
.spin-canvas { border-radius: 50%; }

/* Wishlist heart filled */
.heart-filled { fill: #FF6B6B; color: #FF6B6B; }

/* Category card hover */
.category-card { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.category-card:hover { border-color: #FF6B6B; box-shadow: 0 4px 12px rgba(255,107,107,0.15); transform: translateY(-2px); }

/* Badge styles */
.badge-tiktok { background: #000; color: #fff; }
.badge-almost-gone { background: #dc2626; color: #fff; }
.badge-free-shipping { background: #16a34a; color: #fff; }
.badge-hot-deal { background: #FFD93D; color: #000; }

/* Ticker transition */
#ticker-text { transition: opacity 0.3s ease; }

/* Countdown digits */
.countdown-digit {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
}