/* Christmas Theme - Simple and Festive */

:root {
  --christmas-red: #c1272d;
  --christmas-green: #006400;
  --christmas-gold: #d4af37;
  --christmas-white: #f9f9f9;
  --christmas-dark: #2c3e50;
  --christmas-light-red: #ffebee;
  --christmas-light-green: #e8f5e9;
}

/* Christmas background */
body.christmas-theme {
  background-color: var(--christmas-white);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.7)), 
                    url('images/christmas-bg.svg');
  background-size: 200px;
  background-repeat: repeat;
  position: relative;
  border-top: 5px solid var(--christmas-red);
}

/* Header styling */
body.christmas-theme h1 {
  color: var(--christmas-red) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 30px !important;
}

/* Christmas header decoration */
body.christmas-theme h1:after {
  content: "🎄";
  margin-left: 15px;
}

/* Date card styling - non-Christmas version */
.date-card {
  border: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease !important;
  background-color: white !important;
  position: relative !important;
}

/* Festive card styling */
body.christmas-theme .date-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(193, 39, 45, 0.1) !important;
}

/* Default header styling */
.date-header {
  padding: 12px !important;
  font-weight: bold !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Christmas header styling */
body.christmas-theme .date-header {
  background-color: var(--christmas-green) !important;
  color: white !important;
}

/* Ornament in header with better visibility */
body.christmas-theme .date-header::after {
  content: '🎁' !important; /* Changed to gift icon for better contrast */
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  opacity: 0.9 !important;
  text-shadow: 0 0 2px white !important;
}

/* Summary container styling */
body.christmas-theme #summary-container {
  background: linear-gradient(to right, var(--christmas-light-red), white, var(--christmas-light-green)) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  padding: 25px !important;
  border-left: 4px solid var(--christmas-red) !important;
  border-right: 4px solid var(--christmas-green) !important;
}

body.christmas-theme #days-since-last-value {
  color: var(--christmas-red) !important;
  font-weight: bold !important;
}

body.christmas-theme #highest-value-text {
  color: var(--christmas-green) !important;
  font-weight: bold !important;
}

/* Footer styling */
footer {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(0,0,0,0.1) !important;
  position: relative !important;
}

body.christmas-theme footer:before {
  content: '🎄' !important;
  position: absolute !important;
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 20px !important;
  background: white !important;
  padding: 0 10px !important;
}

/* Snow effect */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: snowfall;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
}

@keyframes snowfall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(25vh) translateX(15px) rotate(90deg);
  }
  50% {
    transform: translateY(50vh) translateX(-15px) rotate(180deg);
  }
  75% {
    transform: translateY(75vh) translateX(15px) rotate(270deg);
  }
  100% {
    transform: translateY(100vh) translateX(-15px) rotate(360deg);
  }
}

/* Container styling */
.container {
  background-color: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

body.christmas-theme .container {
  border: 1px solid rgba(193, 39, 45, 0.1);
}

/* Christmas decoration at the top */
.christmas-decoration {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  letter-spacing: 10px;
  color: var(--christmas-red);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  padding: 10px 0;
  background: linear-gradient(to right, transparent, var(--christmas-light-red), transparent);
}