/*
 * assets/css/seasonal.css
 * Seasonal shop decoration themes — body class activates each theme.
 * Works alongside Bootstrap 5 + shop.css.
 */

/* ══════════════════════════════════════════════════════════════════════════════
   SEASONAL BADGE (product image overlay — pure CSS, no PHP image modification)
   ══════════════════════════════════════════════════════════════════════════════ */

.seasonal-badge {
  position: absolute;
  top: 10px;
  right: -4px;
  padding: 4px 10px 4px 10px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 3px 0 0 3px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.4;
}

/* The "folded" right edge of the ribbon */
.seasonal-badge::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 0;
  width: 5px;
  height: 100%;
  background: inherit;
  filter: brightness(0.65);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* Ensure product card image wrapper is relatively positioned */
.card-img-wrap {
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SEASONAL BANNER (top-of-page announcement bar)
   ══════════════════════════════════════════════════════════════════════════════ */

.seasonal-banner {
  width: 100%;
  padding: 9px 0;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 10000;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.seasonal-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-right: 48px; /* space for close button */
  flex-wrap: wrap;
}

.seasonal-banner-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.seasonal-banner-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: color 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.seasonal-banner-close:hover,
.seasonal-banner-close:focus {
  color: #fff;
  outline: 2px solid rgba(255,255,255,0.5);
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHRISTMAS  🎄  body.season-christmas
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-christmas {
  --shop-accent: #c0392b;
  --shop-accent-2: #27ae60;
}

body.season-christmas .navbar {
  background: linear-gradient(135deg, #1a472a 0%, #2d5a1b 100%) !important;
  border-bottom: none !important;
}

/* Christmas light strip */
body.season-christmas .navbar::before {
  content: '';
  display: block;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #c0392b 0px,  #c0392b 10px,
    #f1c40f 10px, #f1c40f 20px,
    #27ae60 20px, #27ae60 30px,
    #2980b9 30px, #2980b9 40px
  );
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

body.season-christmas .btn-primary,
body.season-christmas .btn-add-cart,
body.season-christmas .btn-add-cart-lg {
  background: #c0392b !important;
  border-color: #a93226 !important;
  color: #fff !important;
}

body.season-christmas .btn-primary:hover,
body.season-christmas .btn-add-cart:hover,
body.season-christmas .btn-add-cart-lg:hover {
  background: #a93226 !important;
}

/* Floating snowflake decoration */
body.season-christmas::before {
  content: '❄️';
  position: fixed;
  top: 18px;
  right: 18px;
  font-size: 36px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-spin 6s linear infinite;
  opacity: 0.7;
}

@keyframes seasonal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Card accents */
body.season-christmas .product-card:hover {
  border-color: #c0392b !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EASTER  🐣  body.season-easter
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-easter {
  --shop-accent: #8e44ad;
}

body.season-easter .navbar {
  background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%) !important;
}

body.season-easter .btn-primary,
body.season-easter .btn-add-cart,
body.season-easter .btn-add-cart-lg {
  background: #8e44ad !important;
  border-color: #7d3c98 !important;
  color: #fff !important;
}

body.season-easter .btn-primary:hover,
body.season-easter .btn-add-cart:hover,
body.season-easter .btn-add-cart-lg:hover {
  background: #7d3c98 !important;
}

body.season-easter .product-card:hover {
  border-color: #8e44ad !important;
}

body.season-easter::after {
  content: '🐣';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 28px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 3s ease-in-out infinite;
}

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

/* ══════════════════════════════════════════════════════════════════════════════
   420 / CANNABIS DAY  🌿  body.season-420
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-420 .navbar {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important;
}

body.season-420 .btn-primary,
body.season-420 .btn-add-cart,
body.season-420 .btn-add-cart-lg {
  background: #27ae60 !important;
  border-color: #219a52 !important;
  color: #fff !important;
}

body.season-420 .btn-primary:hover,
body.season-420 .btn-add-cart:hover,
body.season-420 .btn-add-cart-lg:hover {
  background: #1e8449 !important;
}

body.season-420::after {
  content: '🌿';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 32px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 3.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   VALENTINE'S DAY  💝  body.season-valentines
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-valentines {
  --shop-accent: #e74c3c;
}

body.season-valentines .navbar {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
}

body.season-valentines .btn-primary,
body.season-valentines .btn-add-cart,
body.season-valentines .btn-add-cart-lg {
  background: #e74c3c !important;
  border-color: #c0392b !important;
  color: #fff !important;
}

body.season-valentines .btn-primary:hover,
body.season-valentines .btn-add-cart:hover,
body.season-valentines .btn-add-cart-lg:hover {
  background: #c0392b !important;
}

body.season-valentines::after {
  content: '💝';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 30px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 2.5s ease-in-out infinite;
}

body.season-valentines .product-card:hover {
  border-color: #e74c3c !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HALLOWEEN  🎃  body.season-halloween
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-halloween {
  --shop-accent: #e67e22;
  background-color: #1a1a1a !important;
  color: #f0f0f0;
}

body.season-halloween .navbar {
  background: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%) !important;
}

body.season-halloween .card {
  border-color: #e67e22 !important;
  background-color: #2a2a2a !important;
  color: #f0f0f0;
}

body.season-halloween .card-body,
body.season-halloween .product-name,
body.season-halloween .price-gross {
  color: #f0f0f0 !important;
}

body.season-halloween .text-muted {
  color: #aaa !important;
}

body.season-halloween .btn-primary,
body.season-halloween .btn-add-cart,
body.season-halloween .btn-add-cart-lg {
  background: #e67e22 !important;
  border-color: #ca6f1e !important;
  color: #fff !important;
}

body.season-halloween .btn-primary:hover,
body.season-halloween .btn-add-cart:hover,
body.season-halloween .btn-add-cart-lg:hover {
  background: #ca6f1e !important;
}

body.season-halloween::after {
  content: '🎃';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 34px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLACK FRIDAY  🖤  body.season-blackfriday
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-blackfriday {
  --shop-accent: #f1c40f;
  background-color: #0a0a0a !important;
  color: #f0f0f0;
}

body.season-blackfriday .navbar {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

body.season-blackfriday .card {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
  color: #f0f0f0;
}

body.season-blackfriday .card-body,
body.season-blackfriday .product-name {
  color: #f0f0f0 !important;
}

body.season-blackfriday .text-muted {
  color: #999 !important;
}

body.season-blackfriday .btn-primary,
body.season-blackfriday .btn-add-cart,
body.season-blackfriday .btn-add-cart-lg {
  background: #f1c40f !important;
  border-color: #d4ac0d !important;
  color: #000 !important;
  font-weight: 700 !important;
}

body.season-blackfriday .btn-primary:hover,
body.season-blackfriday .btn-add-cart:hover,
body.season-blackfriday .btn-add-cart-lg:hover {
  background: #d4ac0d !important;
}

body.season-blackfriday .price-gross,
body.season-blackfriday .product-price {
  color: #f1c40f !important;
}

/* Pulsing "BLACK FRIDAY" label for badges */
body.season-blackfriday .seasonal-badge {
  animation: bf-pulse 1.5s ease-in-out infinite;
}

@keyframes bf-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SWISS NATIONAL DAY  🇨🇭  body.season-swiss
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-swiss .navbar {
  background: linear-gradient(135deg, #d52b1e 0%, #ff2211 100%) !important;
}

body.season-swiss .btn-primary,
body.season-swiss .btn-add-cart,
body.season-swiss .btn-add-cart-lg {
  background: #d52b1e !important;
  border-color: #b71c1c !important;
  color: #fff !important;
}

body.season-swiss .btn-primary:hover,
body.season-swiss .btn-add-cart:hover,
body.season-swiss .btn-add-cart-lg:hover {
  background: #b71c1c !important;
}

body.season-swiss::after {
  content: '🇨🇭';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 32px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NEW YEAR  🎆  body.season-newyear
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-newyear .navbar {
  background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%) !important;
}

body.season-newyear .btn-primary,
body.season-newyear .btn-add-cart,
body.season-newyear .btn-add-cart-lg {
  background: #f1c40f !important;
  border-color: #d4ac0d !important;
  color: #000 !important;
  font-weight: 700 !important;
}

body.season-newyear .btn-primary:hover,
body.season-newyear .btn-add-cart:hover,
body.season-newyear .btn-add-cart-lg:hover {
  background: #d4ac0d !important;
}

body.season-newyear::after {
  content: '🎆';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 32px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPRING  🌸  body.season-spring
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-spring {
  --shop-accent: #27ae60;
}

body.season-spring .navbar {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
}

body.season-spring .btn-primary,
body.season-spring .btn-add-cart,
body.season-spring .btn-add-cart-lg {
  background: #27ae60 !important;
  border-color: #219a52 !important;
  color: #fff !important;
}

body.season-spring::after {
  content: '🌸';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 30px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 3.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUMMER  ☀️  body.season-summer
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-summer .navbar {
  background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%) !important;
}

body.season-summer .btn-primary,
body.season-summer .btn-add-cart,
body.season-summer .btn-add-cart-lg {
  background: #e67e22 !important;
  border-color: #ca6f1e !important;
  color: #fff !important;
}

body.season-summer .btn-primary:hover,
body.season-summer .btn-add-cart:hover,
body.season-summer .btn-add-cart-lg:hover {
  background: #ca6f1e !important;
}

body.season-summer::after {
  content: '☀️';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 34px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-spin 8s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   AUTUMN  🍂  body.season-autumn
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-autumn .navbar {
  background: linear-gradient(135deg, #8b4513 0%, #d35400 100%) !important;
}

body.season-autumn .btn-primary,
body.season-autumn .btn-add-cart,
body.season-autumn .btn-add-cart-lg {
  background: #d35400 !important;
  border-color: #ba4a00 !important;
  color: #fff !important;
}

body.season-autumn .btn-primary:hover,
body.season-autumn .btn-add-cart:hover,
body.season-autumn .btn-add-cart-lg:hover {
  background: #ba4a00 !important;
}

body.season-autumn::after {
  content: '🍂';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 30px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-float 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WINTER  ❄️  body.season-winter
   ══════════════════════════════════════════════════════════════════════════════ */

body.season-winter .navbar {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%) !important;
}

body.season-winter .btn-primary,
body.season-winter .btn-add-cart,
body.season-winter .btn-add-cart-lg {
  background: #2980b9 !important;
  border-color: #2471a3 !important;
  color: #fff !important;
}

body.season-winter .btn-primary:hover,
body.season-winter .btn-add-cart:hover,
body.season-winter .btn-add-cart-lg:hover {
  background: #2471a3 !important;
}

body.season-winter::after {
  content: '❄️';
  position: fixed;
  bottom: 80px;
  right: 18px;
  font-size: 30px;
  pointer-events: none;
  z-index: 9998;
  animation: seasonal-spin 5s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: hide floating emoji on mobile to avoid layout overlap
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  body.season-christmas::before,
  body[class*="season-"]::after {
    display: none;
  }

  .seasonal-banner-text {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: reduce motion
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  body[class*="season-"]::before,
  body[class*="season-"]::after {
    animation: none !important;
  }

  #seasonal-particles {
    display: none !important;
  }

  .seasonal-badge {
    animation: none !important;
  }
}