/**
 * Christmas Snow Animation Styles
 * Festive snowfall effect for the Christmas Offers page
 */

:root {
  /* Snowflake styling */
  --snowflake-color: #ffffff;
  
  /* Button styling */
  --snow-button-bg: linear-gradient(135deg, #b30000, #ff4d4d, #008000);
  --snow-button-bg-hover: linear-gradient(135deg, #008000, #00b36b, #ff4d4d);
  --snow-button-font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  --snow-button-padding-block: 0.6rem;
  --snow-button-padding-inline: 1.2rem;
  --snow-button-radius: 999px;
}

/* Snow containers */
#let_it_snow,
#let_it_snow_mobile {
  position: fixed !important;
  margin: 0;
  width: 100vw;
  height: 100vh;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Show desktop snow on desktop, hide on mobile */
#let_it_snow {
  display: block;
}

#let_it_snow_mobile {
  display: none;
}

@media (max-width: 768px) {
  #let_it_snow {
    display: none;
  }
  
  #let_it_snow_mobile {
    display: block;
  }
}

.snowflake {
  position: fixed !important;
  transition: opacity 1s ease-in-out;
  pointer-events: auto;
  color: var(--snowflake-color);
  user-select: none;
  transform: translateZ(0);
  will-change: transform, top, left;
  cursor: grab;
}

.snowflake:active {
  cursor: grabbing;
}

/* Fixed toggle button (top-right) */
#toggleSnow {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  background: var(--snow-button-bg);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  font-size: var(--snow-button-font-size);
  padding: var(--snow-button-padding-block) var(--snow-button-padding-inline);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-family: 'Glancyr', sans-serif;
  border-radius: var(--snow-button-radius);
  box-shadow: 
    0 0.2rem 0.6rem rgba(0, 0, 0, 0.5),
    0 0 0.4rem rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

#toggleSnow:hover {
  background: var(--snow-button-bg-hover);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 
    0 0.3rem 0.9rem rgba(0, 0, 0, 0.6),
    0 0 0.5rem rgba(255, 255, 255, 0.5);
}

#toggleSnow:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 
    0 0.1rem 0.4rem rgba(0, 0, 0, 0.6),
    0 0 0.3rem rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #toggleSnow {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
}