<!-- File: sections/christmas-banner.liquid -->
<style>
.christmas-banner-{{ section.id }} {
  width: 100%;
  height: {{ section.settings.banner_height }}px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  {% if section.settings.background_image %}
    background-image: url('{{ section.settings.background_image | img_url: '2000x' }}');
    background-size: {{ section.settings.bg_size }};
    background-position: {{ section.settings.bg_position }};
    background-repeat: {{ section.settings.bg_repeat }};
  {% else %}
    background: {{ section.settings.background_gradient }};
  {% endif %}
}

.christmas-banner-{{ section.id }} .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: {{ section.settings.overlay_color }};
  opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
}

.christmas-banner-{{ section.id }} .banner-content {
  text-align: {{ section.settings.text_alignment }};
  z-index: 10;
  position: relative;
  padding: {{ section.settings.content_padding }}px;
  max-width: {{ section.settings.content_width }}%;
  margin: 0 auto;
}

.christmas-banner-{{ section.id }} .banner-title {
  font-family: {{ section.settings.heading_font }};
  font-size: {{ section.settings.heading_size }}px;
  font-weight: {{ section.settings.heading_weight }};
  color: {{ section.settings.heading_color }};
  text-shadow: {{ section.settings.text_shadow }};
  margin-bottom: {{ section.settings.title_spacing }}px;
  letter-spacing: {{ section.settings.letter_spacing }}px;
  line-height: {{ section.settings.line_height }};
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp-{{ section.id }} 0.8s ease {{ section.settings.animation_delay }}s forwards;
}

.christmas-banner-{{ section.id }} .banner-title .emoji {
  display: inline-block;
  animation: bounce-{{ section.id }} 2s infinite;
  margin: 0 {{ section.settings.emoji_spacing }}px;
  font-size: {{ section.settings.emoji_size }}%;
}

.christmas-banner-{{ section.id }} .banner-subtitle {
  font-family: {{ section.settings.subtitle_font }};
  font-size: {{ section.settings.subtitle_size }}px;
  color: {{ section.settings.subtitle_color }};
  margin-bottom: {{ section.settings.subtitle_spacing }}px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp-{{ section.id }} 0.8s ease {{ section.settings.animation_delay | plus: 0.2 }}s forwards;
}

/* Countdown Timer Container Styles */
.christmas-banner-{{ section.id }} .countdown-timer {
  display: {{ section.settings.timer_layout }};
  justify-content: {{ section.settings.timer_justify_content }};
  align-items: {{ section.settings.timer_align_items }};
  gap: {{ section.settings.timer_spacing }}px;
  margin-bottom: {{ section.settings.timer_bottom_spacing }}px;
  padding: {{ section.settings.timer_container_padding }}px;
  max-width: {{ section.settings.timer_container_max_width }}px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp-{{ section.id }} 0.8s ease {{ section.settings.animation_delay | plus: 0.4 }}s forwards;
}

.countdown-timer {
    background-color: inherit!important;
}

.timer-item {
    background: #000;
    border-radius: 5px;
}

/* Grid Layout for Timer */
.christmas-banner-{{ section.id }} .countdown-timer[style*="grid"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: {{ section.settings.timer_spacing }}px;
}

.christmas-banner-{{ section.id }} .timer-item {
  padding: {{ section.settings.timer_padding }}px;
  min-width: {{ section.settings.timer_width }}px;
  text-align: center;
}

.christmas-banner-{{ section.id }} .timer-number {
  display: block;
  font-size: {{ section.settings.timer_number_size }}px;
  font-weight: {{ section.settings.timer_number_weight }};
  color: {{ section.settings.timer_number_color }};
  text-shadow: {{ section.settings.timer_text_shadow }};
  line-height: 1;
  transition: all 0.3s ease;
}

.christmas-banner-{{ section.id }} .timer-label {
  display: block;
  font-size: {{ section.settings.timer_label_size }}px;
  color: {{ section.settings.timer_label_color }};
  text-transform: {{ section.settings.timer_text_transform }};
  letter-spacing: {{ section.settings.timer_letter_spacing }}px;
  margin-top: {{ section.settings.timer_label_spacing }}px;
  font-weight: {{ section.settings.timer_label_weight }};
  transition: all 0.3s ease;
}

.christmas-banner-{{ section.id }} .banner-button {
  display: inline-block;
  background: {{ section.settings.button_bg_color }};
  color: {{ section.settings.button_text_color }};
  padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
  font-size: {{ section.settings.button_font_size }}px;
  font-weight: {{ section.settings.button_font_weight }};
  text-decoration: none;
  border-radius: {{ section.settings.button_border_radius }}px;
  border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
  transition: all 0.3s ease;
  box-shadow: {{ section.settings.button_shadow }};
  text-transform: {{ section.settings.button_text_transform }};
  letter-spacing: {{ section.settings.button_letter_spacing }}px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp-{{ section.id }} 0.8s ease {{ section.settings.animation_delay | plus: 0.6 }}s forwards;
}

.christmas-banner-{{ section.id }} .banner-button:hover {
  transform: translateY(-3px);
  box-shadow: {{ section.settings.button_hover_shadow }};
  background: {{ section.settings.button_hover_bg_color }};
  color: {{ section.settings.button_hover_text_color }};
}

/* Animations */
@keyframes fadeInUp-{{ section.id }} {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce-{{ section.id }} {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-{{ section.settings.bounce_height }}px);
  }
  60% {
    transform: translateY(-{{ section.settings.bounce_height | divided_by: 2 }}px);
  }
}

/* Snowflake Animation */
.christmas-banner-{{ section.id }} .snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.christmas-banner-{{ section.id }} .snowflake {
  position: absolute;
  top: -50px;
  color: {{ section.settings.snowflake_color }};
  animation: fall-{{ section.id }} linear infinite;
  user-select: none;
  opacity: {{ section.settings.snowflake_opacity | divided_by: 100.0 }};
}

@keyframes fall-{{ section.id }} {
  to {
    transform: translateY({{ section.settings.banner_height | plus: 50 }}px) rotate(360deg);
  }
}

/* Gift Icons Animation */
.christmas-banner-{{ section.id }} .gift-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.christmas-banner-{{ section.id }} .gift-icon {
  position: absolute;
  top: -60px;
  color: {{ section.settings.gift_color }};
  animation: float-{{ section.id }} linear infinite;
  user-select: none;
  text-shadow: {{ section.settings.gift_shadow }};
  opacity: {{ section.settings.gift_opacity | divided_by: 100.0 }};
}

@keyframes float-{{ section.id }} {
  to {
    transform: translateY({{ section.settings.banner_height | plus: 60 }}px) rotate(180deg);
  }
}

/* Glow Effects */
.christmas-banner-{{ section.id }}::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: {{ section.settings.glow_color }};
  opacity: {{ section.settings.glow_opacity | divided_by: 100.0 }};
  pointer-events: none;
  animation: pulse-{{ section.id }} {{ section.settings.glow_speed }}s ease-in-out infinite;
}

@keyframes pulse-{{ section.id }} {
  0%, 100% {
    opacity: {{ section.settings.glow_opacity | divided_by: 100.0 }};
    transform: scale(1);
  }
  50% {
    opacity: {{ section.settings.glow_opacity | plus: 20 | divided_by: 100.0 }};
    transform: scale(1.1);
  }
}

/* Particles Effect */
.christmas-banner-{{ section.id }} .particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.christmas-banner-{{ section.id }} .particle {
  position: absolute;
  width: {{ section.settings.particle_size }}px;
  height: {{ section.settings.particle_size }}px;
  background: {{ section.settings.particle_color }};
  border-radius: 50%;
  animation: float-{{ section.id }} linear infinite;
  opacity: {{ section.settings.particle_opacity | divided_by: 100.0 }};
}

/* Responsive Design */
@media (max-width: 768px) {
  .christmas-banner-{{ section.id }} {
    height: {{ section.settings.banner_height_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .banner-title {
    font-size: {{ section.settings.heading_size_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .banner-subtitle {
    font-size: {{ section.settings.subtitle_size_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .countdown-timer {
    gap: {{ section.settings.timer_spacing_mobile }}px;
    padding: {{ section.settings.timer_container_padding_mobile }}px;
    max-width: {{ section.settings.timer_container_max_width_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .countdown-timer[style*="grid"] {
    grid-template-columns: repeat(2, 1fr);
    gap: {{ section.settings.timer_spacing_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .timer-item {
    min-width: {{ section.settings.timer_width_mobile }}px;
    padding: {{ section.settings.timer_padding_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .timer-number {
    font-size: {{ section.settings.timer_number_size_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .timer-label {
    font-size: {{ section.settings.timer_label_size_mobile }}px;
  }
  
  .christmas-banner-{{ section.id }} .banner-button {
    padding: {{ section.settings.button_padding_vertical_mobile }}px {{ section.settings.button_padding_horizontal_mobile }}px;
    font-size: {{ section.settings.button_font_size_mobile }}px;
  }
}

.christmas-banner-{{ section.id }} .sale-ended {
  color: {{ section.settings.ended_color }};
  font-size: {{ section.settings.ended_size }}px;
  font-weight: {{ section.settings.ended_weight }};
  text-shadow: {{ section.settings.ended_shadow }};
}
</style>

<div class="christmas-banner-{{ section.id }}" id="{{ section.id }}">
  {% if section.settings.background_image %}
    <div class="overlay"></div>
  {% endif %}
  
  <div class="banner-content">
    <h2 class="banner-title">
      <span class="emoji">🎄</span>
      {{ section.settings.heading | default: "Christmas Mega Sale — Up to 50% OFF" }}
      <span class="emoji">🎁</span>
    </h2>
    
    {% if section.settings.subtitle != blank %}
      <div class="banner-subtitle">{{ section.settings.subtitle }}</div>
    {% endif %}
    
    {% if section.settings.show_timer %}
      <div class="countdown-timer">
        <div class="timer-item">
          <span class="timer-number" id="days-{{ section.id }}">00</span>
          <span class="timer-label">Days</span>
        </div>
        <div class="timer-item">
          <span class="timer-number" id="hours-{{ section.id }}">00</span>
          <span class="timer-label">Hours</span>
        </div>
        <div class="timer-item">
          <span class="timer-number" id="minutes-{{ section.id }}">00</span>
          <span class="timer-label">Minutes</span>
        </div>
        <div class="timer-item">
          <span class="timer-number" id="seconds-{{ section.id }}">00</span>
          <span class="timer-label">Seconds</span>
        </div>
      </div>
    {% endif %}
    
    {% if section.settings.button_text != blank %}
      <a href="{{ section.settings.button_link }}" class="banner-button">
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
  
  <!-- Animated Elements -->
  {% if section.settings.enable_snowflakes %}
    <div class="snowflakes"></div>
  {% endif %}
  
  {% if section.settings.enable_gifts %}
    <div class="gift-icons"></div>
  {% endif %}
  
  {% if section.settings.enable_particles %}
    <div class="particles"></div>
  {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sectionId = '{{ section.id }}';
  
  // Snowflake animation
  function createSnowflakes() {
    const snowflakes = document.querySelector(`#${sectionId} .snowflakes`);
    if (!snowflakes) return;
    
    const snowflakeCount = {{ section.settings.snowflake_count }};
    const snowflakeTypes = ['❄', '❅', '❆', '•'];
    
    for (let i = 0; i < snowflakeCount; i++) {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake';
      snowflake.innerHTML = snowflakeTypes[Math.floor(Math.random() * snowflakeTypes.length)];
      snowflake.style.left = Math.random() * 100 + 'vw';
      snowflake.style.animationDuration = (Math.random() * {{ section.settings.snowflake_speed_max | minus: section.settings.snowflake_speed_min }} + {{ section.settings.snowflake_speed_min }}) + 's';
      snowflake.style.animationDelay = Math.random() * {{ section.settings.snowflake_delay }} + 's';
      snowflake.style.fontSize = (Math.random() * {{ section.settings.snowflake_size_max | minus: section.settings.snowflake_size_min }} + {{ section.settings.snowflake_size_min }}) + 'px';
      snowflakes.appendChild(snowflake);
    }
  }
  
  // Gift icons animation
  function createGiftIcons() {
    const gifts = document.querySelector(`#${sectionId} .gift-icons`);
    if (!gifts) return;
    
    const giftCount = {{ section.settings.gift_count }};
    const giftIcons = ['🎁', '🎀', '🦌', '⭐', '🔔', '🕯️', '🧦', '🌟'];
    
    for (let i = 0; i < giftCount; i++) {
      const gift = document.createElement('div');
      gift.className = 'gift-icon';
      gift.innerHTML = giftIcons[i % giftIcons.length];
      gift.style.left = Math.random() * 100 + 'vw';
      gift.style.animationDuration = (Math.random() * {{ section.settings.gift_speed_max | minus: section.settings.gift_speed_min }} + {{ section.settings.gift_speed_min }}) + 's';
      gift.style.animationDelay = Math.random() * {{ section.settings.gift_delay }} + 's';
      gift.style.fontSize = (Math.random() * {{ section.settings.gift_size_max | minus: section.settings.gift_size_min }} + {{ section.settings.gift_size_min }}) + 'px';
      gifts.appendChild(gift);
    }
  }
  
  // Particles animation
  function createParticles() {
    const particles = document.querySelector(`#${sectionId} .particles`);
    if (!particles) return;
    
    const particleCount = {{ section.settings.particle_count }};
    
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.className = 'particle';
      particle.style.left = Math.random() * 100 + 'vw';
      particle.style.animationDuration = (Math.random() * 8 + 4) + 's';
      particle.style.animationDelay = Math.random() * 5 + 's';
      particles.appendChild(particle);
    }
  }
  
  // Countdown timer
  function updateCountdown() {
    const endDate = new Date('{{ section.settings.countdown_date }}').getTime();
    const now = new Date().getTime();
    const distance = endDate - now;
    
    const daysEl = document.getElementById(`days-${sectionId}`);
    const hoursEl = document.getElementById(`hours-${sectionId}`);
    const minutesEl = document.getElementById(`minutes-${sectionId}`);
    const secondsEl = document.getElementById(`seconds-${sectionId}`);
    
    if (!daysEl || !hoursEl || !minutesEl || !secondsEl) return;
    
    if (distance < 0) {
      const timerContainer = document.querySelector(`#${sectionId} .countdown-timer`);
      if (timerContainer) {
        timerContainer.innerHTML = '<div class="sale-ended">{{ section.settings.ended_text }}</div>';
      }
      return;
    }
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    daysEl.textContent = days.toString().padStart(2, '0');
    hoursEl.textContent = hours.toString().padStart(2, '0');
    minutesEl.textContent = minutes.toString().padStart(2, '0');
    secondsEl.textContent = seconds.toString().padStart(2, '0');
  }
  
  // Initialize animations
  {% if section.settings.enable_snowflakes %}
    createSnowflakes();
  {% endif %}
  
  {% if section.settings.enable_gifts %}
    createGiftIcons();
  {% endif %}
  
  {% if section.settings.enable_particles %}
    createParticles();
  {% endif %}
  
  {% if section.settings.show_timer %}
    updateCountdown();
    setInterval(updateCountdown, 1000);
  {% endif %}
});
</script>

{% schema %}
{
  "name": "Christmas Banner",
  "tag": "section",
  "class": "christmas-banner",
  "settings": [
    {
      "type": "header",
      "content": "Background Settings"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay Color",
      "default": "#1a472a"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay Opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 70,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "bg_size",
      "label": "Background Size",
      "options": [
        {"value": "cover", "label": "Cover"},
        {"value": "contain", "label": "Contain"},
        {"value": "auto", "label": "Auto"}
      ],
      "default": "cover"
    },
    {
      "type": "select",
      "id": "bg_position",
      "label": "Background Position",
      "options": [
        {"value": "center", "label": "Center"},
        {"value": "top", "label": "Top"},
        {"value": "bottom", "label": "Bottom"},
        {"value": "left", "label": "Left"},
        {"value": "right", "label": "Right"}
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "bg_repeat",
      "label": "Background Repeat",
      "options": [
        {"value": "no-repeat", "label": "No Repeat"},
        {"value": "repeat", "label": "Repeat"},
        {"value": "repeat-x", "label": "Repeat X"},
        {"value": "repeat-y", "label": "Repeat Y"}
      ],
      "default": "no-repeat"
    },
    {
      "type": "text",
      "id": "background_gradient",
      "label": "Background Gradient",
      "default": "linear-gradient(135deg, #1a472a 0%, #2d5a3a 25%, #1a472a 50%, #2d5a3a 75%, #1a472a 100%)"
    },
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "banner_height",
      "label": "Banner Height",
      "min": 200,
      "max": 600,
      "step": 10,
      "default": 300,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "banner_height_mobile",
      "label": "Banner Height (Mobile)",
      "min": 150,
      "max": 400,
      "step": 10,
      "default": 200,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "content_width",
      "label": "Content Width",
      "min": 50,
      "max": 100,
      "step": 5,
      "default": 80,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "content_padding",
      "label": "Content Padding",
      "min": 10,
      "max": 100,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        {"value": "left", "label": "Left"},
        {"value": "center", "label": "Center"},
        {"value": "right", "label": "Right"}
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Heading Settings"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading Text",
      "default": "🎄 Christmas Mega Sale — Up to 50% OFF 🎁"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Size",
      "min": 24,
      "max": 80,
      "step": 2,
      "default": 56,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "heading_size_mobile",
      "label": "Heading Size (Mobile)",
      "min": 18,
      "max": 48,
      "step": 2,
      "default": 32,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "heading_font",
      "label": "Heading Font",
      "options": [
        {"value": "'Helvetica Neue', Arial, sans-serif", "label": "Helvetica"},
        {"value": "'Times New Roman', Times, serif", "label": "Times New Roman"},
        {"value": "Georgia, serif", "label": "Georgia"},
        {"value": "'Arial Black', Gadget, sans-serif", "label": "Arial Black"}
      ],
      "default": "'Helvetica Neue', Arial, sans-serif"
    },
    {
      "type": "select",
      "id": "heading_weight",
      "label": "Heading Weight",
      "options": [
        {"value": "300", "label": "Light"},
        {"value": "400", "label": "Regular"},
        {"value": "600", "label": "Semi Bold"},
        {"value": "700", "label": "Bold"},
        {"value": "800", "label": "Extra Bold"}
      ],
      "default": "800"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "title_spacing",
      "label": "Title Bottom Spacing",
      "min": 10,
      "max": 60,
      "step": 5,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "letter_spacing",
      "label": "Letter Spacing",
      "min": -2,
      "max": 10,
      "step": 0.5,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "line_height",
      "label": "Line Height",
      "min": 1.0,
      "max": 2.0,
      "step": 0.1,
      "default": 1.2
    },
    {
      "type": "text",
      "id": "text_shadow",
      "label": "Text Shadow",
      "default": "2px 2px 4px rgba(0, 0, 0, 0.3)"
    },
    {
      "type": "header",
      "content": "Subtitle Settings"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle Text",
      "default": "Limited Time Offer - Don't Miss Out!"
    },
    {
      "type": "range",
      "id": "subtitle_size",
      "label": "Subtitle Size",
      "min": 14,
      "max": 40,
      "step": 2,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "subtitle_size_mobile",
      "label": "Subtitle Size (Mobile)",
      "min": 12,
      "max": 24,
      "step": 2,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "subtitle_color",
      "label": "Subtitle Color",
      "default": "#ffd700"
    },
    {
      "type": "range",
      "id": "subtitle_spacing",
      "label": "Subtitle Bottom Spacing",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "subtitle_font",
      "label": "Subtitle Font",
      "options": [
        {"value": "'Helvetica Neue', Arial, sans-serif", "label": "Helvetica"},
        {"value": "'Times New Roman', Times, serif", "label": "Times New Roman"},
        {"value": "Georgia, serif", "label": "Georgia"}
      ],
      "default": "'Helvetica Neue', Arial, sans-serif"
    },
    {
      "type": "header",
      "content": "Countdown Timer"
    },
    {
      "type": "checkbox",
      "id": "show_timer",
      "label": "Show Countdown Timer",
      "default": true
    },
    {
      "type": "text",
      "id": "countdown_date",
      "label": "Countdown End Date",
      "default": "2024-12-25",
      "info": "Format: YYYY-MM-DD"
    },
    {
      "type": "text",
      "id": "ended_text",
      "label": "Sale Ended Text",
      "default": "Sale Ended!"
    },
    {
      "type": "color",
      "id": "ended_color",
      "label": "Ended Text Color",
      "default": "#ffd700"
    },
    {
      "type": "range",
      "id": "ended_size",
      "label": "Ended Text Size",
      "min": 16,
      "max": 40,
      "step": 2,
      "default": 24,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "ended_weight",
      "label": "Ended Text Weight",
      "options": [
        {"value": "400", "label": "Regular"},
        {"value": "600", "label": "Semi Bold"},
        {"value": "700", "label": "Bold"}
      ],
      "default": "700"
    },
    {
      "type": "text",
      "id": "ended_shadow",
      "label": "Ended Text Shadow",
      "default": "0 0 10px rgba(255, 215, 0, 0.5)"
    },
    {
      "type": "header",
      "content": "Timer Container Style"
    },
    {
      "type": "range",
      "id": "timer_container_padding",
      "label": "Timer Container Padding",
      "min": 0,
      "max": 50,
      "step": 5,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_container_padding_mobile",
      "label": "Timer Container Padding (Mobile)",
      "min": 0,
      "max": 30,
      "step": 5,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_container_max_width",
      "label": "Timer Container Max Width",
      "min": 400,
      "max": 1200,
      "step": 50,
      "default": 800,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_container_max_width_mobile",
      "label": "Timer Container Max Width (Mobile)",
      "min": 300,
      "max": 800,
      "step": 50,
      "default": 400,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "timer_layout",
      "label": "Timer Layout",
      "options": [
        {"value": "flex", "label": "Flex"},
        {"value": "grid", "label": "Grid"},
        {"value": "inline-flex", "label": "Inline Flex"}
      ],
      "default": "flex"
    },
    {
      "type": "select",
      "id": "timer_justify_content",
      "label": "Timer Justify Content",
      "options": [
        {"value": "center", "label": "Center"},
        {"value": "flex-start", "label": "Start"},
        {"value": "flex-end", "label": "End"},
        {"value": "space-between", "label": "Space Between"},
        {"value": "space-around", "label": "Space Around"},
        {"value": "space-evenly", "label": "Space Evenly"}
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "timer_align_items",
      "label": "Timer Align Items",
      "options": [
        {"value": "center", "label": "Center"},
        {"value": "flex-start", "label": "Start"},
        {"value": "flex-end", "label": "End"},
        {"value": "stretch", "label": "Stretch"}
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Timer Item Style"
    },
    {
      "type": "range",
      "id": "timer_width",
      "label": "Timer Item Width",
      "min": 60,
      "max": 150,
      "step": 5,
      "default": 100,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_width_mobile",
      "label": "Timer Item Width (Mobile)",
      "min": 50,
      "max": 100,
      "step": 5,
      "default": 70,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_padding",
      "label": "Timer Padding",
      "min": 5,
      "max": 30,
      "step": 1,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_padding_mobile",
      "label": "Timer Padding (Mobile)",
      "min": 5,
      "max": 20,
      "step": 1,
      "default": 12,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_spacing",
      "label": "Timer Spacing",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_spacing_mobile",
      "label": "Timer Spacing (Mobile)",
      "min": 5,
      "max": 30,
      "step": 5,
      "default": 15,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_bottom_spacing",
      "label": "Timer Bottom Spacing",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_number_size",
      "label": "Timer Number Size",
      "min": 20,
      "max": 60,
      "step": 2,
      "default": 40,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_number_size_mobile",
      "label": "Timer Number Size (Mobile)",
      "min": 16,
      "max": 40,
      "step": 2,
      "default": 28,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "timer_number_weight",
      "label": "Timer Number Weight",
      "options": [
        {"value": "400", "label": "Regular"},
        {"value": "600", "label": "Semi Bold"},
        {"value": "700", "label": "Bold"},
        {"value": "800", "label": "Extra Bold"}
      ],
      "default": "700"
    },
    {
      "type": "color",
      "id": "timer_number_color",
      "label": "Timer Number Color",
      "default": "#ffd700"
    },
    {
      "type": "range",
      "id": "timer_label_size",
      "label": "Timer Label Size",
      "min": 10,
      "max": 20,
      "step": 1,
      "default": 14,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_label_size_mobile",
      "label": "Timer Label Size (Mobile)",
      "min": 8,
      "max": 16,
      "step": 1,
      "default": 12,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "timer_label_color",
      "label": "Timer Label Color",
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "timer_label_weight",
      "label": "Timer Label Weight",
      "options": [
        {"value": "300", "label": "Light"},
        {"value": "400", "label": "Regular"},
        {"value": "500", "label": "Medium"}
      ],
      "default": "400"
    },
    {
      "type": "range",
      "id": "timer_label_spacing",
      "label": "Timer Label Spacing",
      "min": 2,
      "max": 20,
      "step": 2,
      "default": 8,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "timer_text_transform",
      "label": "Timer Text Transform",
      "options": [
        {"value": "none", "label": "None"},
        {"value": "uppercase", "label": "Uppercase"},
        {"value": "lowercase", "label": "Lowercase"},
        {"value": "capitalize", "label": "Capitalize"}
      ],
      "default": "uppercase"
    },
    {
      "type": "range",
      "id": "timer_letter_spacing",
      "label": "Timer Letter Spacing",
      "min": 0,
      "max": 5,
      "step": 1,
      "default": 1,
      "unit": "px"
    },
    {
      "type": "text",
      "id": "timer_text_shadow",
      "label": "Timer Text Shadow",
      "default": "0 0 10px rgba(255, 215, 0, 0.5)"
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background",
      "default": "#ffd700"
    },
    {
      "type": "color",
      "id": "button_hover_bg_color",
      "label": "Button Hover Background",
      "default": "#ffed4e"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#1a472a"
    },
    {
      "type": "color",
      "id": "button_hover_text_color",
      "label": "Button Hover Text Color",
      "default": "#1a472a"
    },
    {
      "type": "range",
      "id": "button_font_size",
      "label": "Button Font Size",
      "min": 14,
      "max": 24,
      "step": 1,
      "default": 18,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_font_size_mobile",
      "label": "Button Font Size (Mobile)",
      "min": 12,
      "max": 20,
      "step": 1,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "button_font_weight",
      "label": "Button Font Weight",
      "options": [
        {"value": "400", "label": "Regular"},
        {"value": "600", "label": "Semi Bold"},
        {"value": "700", "label": "Bold"},
        {"value": "800", "label": "Extra Bold"}
      ],
      "default": "700"
    },
    {
      "type": "range",
      "id": "button_padding_vertical",
      "label": "Button Padding Vertical",
      "min": 8,
      "max": 40,
      "step": 2,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_padding_horizontal",
      "label": "Button Padding Horizontal",
      "min": 16,
      "max": 60,
      "step": 4,
      "default": 40,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_padding_vertical_mobile",
      "label": "Button Padding Vertical (Mobile)",
      "min": 6,
      "max": 30,
      "step": 2,
      "default": 12,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_padding_horizontal_mobile",
      "label": "Button Padding Horizontal (Mobile)",
      "min": 12,
      "max": 40,
      "step": 4,
      "default": 32,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "label": "Button Border Radius",
      "min": 0,
      "max": 50,
      "step": 5,
      "default": 25,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_border_width",
      "label": "Button Border Width",
      "min": 0,
      "max": 5,
      "step": 1,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button Border Color",
      "default": "transparent"
    },
    {
      "type": "select",
      "id": "button_text_transform",
      "label": "Button Text Transform",
      "options": [
        {"value": "none", "label": "None"},
        {"value": "uppercase", "label": "Uppercase"},
        {"value": "lowercase", "label": "Lowercase"}
      ],
      "default": "uppercase"
    },
    {
      "type": "range",
      "id": "button_letter_spacing",
      "label": "Button Letter Spacing",
      "min": 0,
      "max": 5,
      "step": 1,
      "default": 1,
      "unit": "px"
    },
    {
      "type": "text",
      "id": "button_shadow",
      "label": "Button Shadow",
      "default": "0 4px 15px rgba(255, 215, 0, 0.3)"
    },
    {
      "type": "text",
      "id": "button_hover_shadow",
      "label": "Button Hover Shadow",
      "default": "0 6px 20px rgba(255, 215, 0, 0.5)"
    },
    {
      "type": "header",
      "content": "Animation Settings"
    },
    {
      "type": "range",
      "id": "animation_delay",
      "label": "Animation Start Delay",
      "min": 0.0,
      "max": 2.0,
      "step": 0.1,
      "default": 0.2,
      "unit": "s"
    },
    {
      "type": "range",
      "id": "bounce_height",
      "label": "Emoji Bounce Height",
      "min": 5,
      "max": 20,
      "step": 1,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "emoji_spacing",
      "label": "Emoji Spacing",
      "min": 5,
      "max": 30,
      "step": 1,
      "default": 15,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "emoji_size",
      "label": "Emoji Size",
      "min": 100,
      "max": 200,
      "step": 10,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Special Effects"
    },
    {
      "type": "checkbox",
      "id": "enable_snowflakes",
      "label": "Enable Snowflakes",
      "default": true
    },
    {
      "type": "range",
      "id": "snowflake_count",
      "label": "Snowflake Count",
      "min": 10,
      "max": 100,
      "step": 5,
      "default": 30
    },
    {
      "type": "color",
      "id": "snowflake_color",
      "label": "Snowflake Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "snowflake_opacity",
      "label": "Snowflake Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "default": 80,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "snowflake_size_min",
      "label": "Snowflake Min Size",
      "min": 8,
      "max": 20,
      "step": 1,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "snowflake_size_max",
      "label": "Snowflake Max Size",
      "min": 15,
      "max": 30,
      "step": 1,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "snowflake_speed_min",
      "label": "Snowflake Min Speed",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 2,
      "unit": "s"
    },
    {
      "type": "range",
      "id": "snowflake_speed_max",
      "label": "Snowflake Max Speed",
      "min": 5,
      "max": 15,
      "step": 1,
      "default": 5,
      "unit": "s"
    },
    {
      "type": "range",
      "id": "snowflake_delay",
      "label": "Snowflake Max Delay",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 5,
      "unit": "s"
    },
    {
      "type": "checkbox",
      "id": "enable_gifts",
      "label": "Enable Gift Icons",
      "default": true
    },
    {
      "type": "range",
      "id": "gift_count",
      "label": "Gift Count",
      "min": 5,
      "max": 20,
      "step": 1,
      "default": 8
    },
    {
      "type": "color",
      "id": "gift_color",
      "label": "Gift Color",
      "default": "#ffd700"
    },
    {
      "type": "range",
      "id": "gift_opacity",
      "label": "Gift Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "default": 70,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "gift_size_min",
      "label": "Gift Min Size",
      "min": 15,
      "max": 30,
      "step": 1,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "gift_size_max",
      "label": "Gift Max Size",
      "min": 25,
      "max": 50,
      "step": 1,
      "default": 40,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "gift_speed_min",
      "label": "Gift Min Speed",
      "min": 4,
      "max": 12,
      "step": 1,
      "default": 4,
      "unit": "s"
    },
    {
      "type": "range",
      "id": "gift_speed_max",
      "label": "Gift Max Speed",
      "min": 8,
      "max": 20,
      "step": 1,
      "default": 12,
      "unit": "s"
    },
    {
      "type": "range",
      "id": "gift_delay",
      "label": "Gift Max Delay",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 3,
      "unit": "s"
    },
    {
      "type": "text",
      "id": "gift_shadow",
      "label": "Gift Shadow",
      "default": "0 0 10px rgba(255, 215, 0, 0.5)"
    },
    {
      "type": "checkbox",
      "id": "enable_particles",
      "label": "Enable Particles",
      "default": false
    },
    {
      "type": "range",
      "id": "particle_count",
      "label": "Particle Count",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 20
    },
    {
      "type": "range",
      "id": "particle_size",
      "label": "Particle Size",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 3,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "particle_color",
      "label": "Particle Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "particle_opacity",
      "label": "Particle Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "default": 50,
      "unit": "%"
    },
    {
      "type": "color",
      "id": "glow_color",
      "label": "Glow Color",
      "default": "#ffd700"
    },
    {
      "type": "range",
      "id": "glow_opacity",
      "label": "Glow Opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 10,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "glow_speed",
      "label": "Glow Animation Speed",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 4,
      "unit": "s"
    }
  ],
  "presets": [
    {
      "name": "Christmas Banner",
      "category": "Promotional"
    }
  ]
}
{% endschema %}