/**
 * Festive Seasons FX - Master Frontend Styles
 * Premium visuals matching traditional festive aesthetics
 * 100% responsive, hardware-accelerated, zero-conflict & lightweight
 */

/* ==========================================================================
   Full Screen Fireworks & Snow Canvas
   ========================================================================== */
#festive-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 99998;
}

/* ==========================================================================
   Top Borders: Sleek Luxury Diwali Golden Lights Wire
   (Ultra-slim 20px so it NEVER covers header text, announcement bars, or buttons!)
   ========================================================================== */
.festive-top-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none !important;
  z-index: 99999;
  background-repeat: repeat-x;
  background-position: top center;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

/* Diwali Golden Fairy Lights & Micro Bunting (Slim 20px height) */
.festive-diwali-toran {
  height: 20px !important;
  background-size: auto 20px !important;
  filter: drop-shadow(0 2px 8px rgba(255, 179, 0, 0.65));
}

/* Christmas: Header decoration intentionally removed per user design requirements */
.festive-christmas-garland {
  display: none !important;
}

/* Bulky hanging corner lanterns removed completely so buttons and logos stay 100% clear */
.festive-lantern {
  display: none !important;
}

/* ==========================================================================
   Automatic Logo Decorations (Sleek Compact Diya & Santa Hat)
   ========================================================================== */
/* Container that holds the logo and its companion decoration */
.festive-logo-anchor,
.festive-logo-target {
  position: relative !important;
  overflow: visible !important;
}

/* DIYA: Placed cleanly BESIDE the logo with strict sizing so it never over-expands */
#lw-header .lw-logo img.festive-logo-diya,
.lw-logo img.festive-logo-diya,
.lwf-logo-link img.festive-logo-diya,
.festive-logo-target img.festive-logo-diya,
img.festive-logo-diya,
.festive-logo-diya {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 18px !important;
  max-width: 24px !important;
  max-height: 18px !important;
  min-width: 24px !important;
  min-height: 18px !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  flex: 0 0 24px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  align-self: center !important;
  pointer-events: none !important;
  transform-origin: center bottom;
  animation: festiveDiyaFlicker 2.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255, 152, 0, 0.85));
  will-change: transform;
}

@keyframes festiveDiyaFlicker {
  0% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 5px rgba(255, 145, 0, 0.75));
  }
  50% {
    transform: scale(1.05) translateY(-1px);
    filter: drop-shadow(0 0 10px rgba(255, 111, 0, 0.95));
  }
  100% {
    transform: scale(0.97) translateY(0);
    filter: drop-shadow(0 0 6px rgba(255, 160, 0, 0.8));
  }
}

/* SANTA HAT: Naturally perched ON TOP of the logo / icon */
#lw-header .lw-logo img.festive-santa-hat,
.lw-logo img.festive-santa-hat,
.lwf-logo-link img.festive-santa-hat,
.festive-logo-target img.festive-santa-hat,
img.festive-santa-hat,
.festive-santa-hat {
  position: absolute !important;
  top: -14px !important;
  left: -6px !important;
  width: 32px !important;
  height: 28px !important;
  max-width: 32px !important;
  max-height: 28px !important;
  min-width: 32px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100 !important;
  pointer-events: none !important;
  transform-origin: bottom center;
  animation: festiveHatTilt 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  will-change: transform;
}

@keyframes festiveHatTilt {
  0% {
    transform: rotate(-10deg) scale(1);
  }
  50% {
    transform: rotate(-4deg) scale(1.02);
  }
  100% {
    transform: rotate(-12deg) scale(0.98);
  }
}

/* ==========================================================================
   Diwali Corner Anar Bombs (Flowerpot Firecrackers)
   Placed safely offset past floating WhatsApp & Live Chat buttons!
   ========================================================================== */
.festive-anar {
  position: fixed;
  bottom: 12px;
  width: 34px !important;
  height: 40px !important;
  max-width: 34px !important;
  max-height: 40px !important;
  z-index: 99990;
  pointer-events: none !important;
  filter: drop-shadow(0 0 12px rgba(255, 152, 0, 0.75));
}

/* Horizontally offset by 95px so they NEVER overlap WhatsApp widget on bottom-left */
.festive-anar-left {
  left: 95px !important;
}

/* Horizontally offset by 95px so they NEVER overlap Tidio Live Chat on bottom-right */
.festive-anar-right {
  right: 95px !important;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 900px) {
  .festive-diwali-toran {
    height: 18px !important;
    background-size: auto 18px !important;
  }
  .festive-anar {
    width: 28px !important;
    height: 34px !important;
    bottom: 10px;
  }
  .festive-anar-left {
    left: 80px !important;
  }
  .festive-anar-right {
    right: 80px !important;
  }
}

@media (max-width: 640px) {
  .festive-diwali-toran {
    height: 16px !important;
    background-size: auto 16px !important;
  }
  #lw-header .lw-logo img.festive-logo-diya,
  .festive-logo-diya {
    width: 20px !important;
    height: 15px !important;
    margin-left: 4px !important;
  }
  #lw-header .lw-logo img.festive-santa-hat,
  .festive-santa-hat {
    width: 26px !important;
    height: 22px !important;
    top: -12px !important;
    left: -4px !important;
  }
  .festive-anar {
    width: 24px !important;
    height: 28px !important;
    bottom: 8px;
  }
  .festive-anar-left {
    left: 72px !important;
  }
  .festive-anar-right {
    right: 72px !important;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .festive-top-decoration,
  .festive-logo-diya,
  .festive-santa-hat {
    animation: none !important;
  }
}