/* Additional Christmas styling for images */

/* Image styling with festive border */
body.christmas-theme .date-image {
  position: relative !important;
  z-index: 0 !important;
  border-bottom: 3px solid var(--christmas-green) !important;
}

/* Alternating red/green borders */
body.christmas-theme .col-md-6:nth-child(even) .date-image {
  border-bottom: 3px solid var(--christmas-red) !important;
}

/* Subtle gradient overlay on hover */
body.christmas-theme .date-card:hover .date-image {
  box-shadow: inset 0 -60px 30px -30px rgba(193, 39, 45, 0.1) !important;
}

/* Subtle corner decorations */
body.christmas-theme .date-card {
  position: relative !important;
}

/* Top right corner decoration */
body.christmas-theme .date-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(135deg, transparent 50%, rgba(193, 39, 45, 0.1) 50%) !important;
  z-index: 2 !important;
}

/* Bottom left corner decoration */
body.christmas-theme .date-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(-45deg, transparent 50%, rgba(0, 100, 0, 0.1) 50%) !important;
  z-index: 2 !important;
}

/* Add subtle ornament pattern to card background */
body.christmas-theme .date-card {
  background-image: radial-gradient(circle, rgba(193, 39, 45, 0.02) 1px, transparent 1px), 
                    radial-gradient(circle, rgba(0, 100, 0, 0.02) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 10px 10px !important;
}

/* Add subtle festive shadow on hover */
body.christmas-theme .date-card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(193, 39, 45, 0.05), 
              0 0 15px rgba(193, 39, 45, 0.05) !important;
}

/* Add subtle Christmas ornament to bottom right of each card */
body.christmas-theme .date-card .date-image::after {
  content: '🎄' !important;
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  font-size: 16px !important;
  opacity: 0.2 !important;
  text-shadow: 0 0 3px white !important;
  z-index: 2 !important;
}