{% comment %}
  YouTube Shorts Feed Carousel Section For Shopify - Made By OnHOW Channel - https://www.youtube.com/channel/UCI3_wzBaankhOCSvHlbWSQw
{% endcomment %}

<style>
/* Comprehensive mobile responsive styling for YouTube Shorts carousel */

/* Base responsive adjustments for all devices */
.fbs-pck__videos-slider.fbs-pck__section {
  width: 100% !important;
  padding: 20px 0 !important;
  overflow-x: hidden !important;
}

.fbs-pck__sizer {
  width: 100% !important;
  padding: 10px 0 !important;
}

.fbs-pck__video-slider {
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 10px 0 !important;
}

/* Medium size devices (tablets, 768px to 1023px) */
@media (max-width: 1023px) {
  .fbs-pck__carousel-title {
    font-size: 22px !important;
  }
  
  .fbs-pck__item {
    width: 290px !important;
    height: 580px !important;
    margin: 0 8px !important;
  }
  
  .fbs-pck__nav-button {
    width: 48px !important;
    height: 48px !important;
  }
  
  .fbs-pck__nav-button svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .fbs-pck__carousel-progress {
    max-width: 200px !important;
  }
}

/* Small devices (phones, 576px to 767px) */
@media (max-width: 767px) {
  .fbs-pck__carousel-title {
    font-size: 20px !important;
  }
  
  .fbs-pck__item {
    width: 250px !important;
    height: 500px !important;
    margin: 0 6px !important;
  }
  
  .fbs-pck__videos-nav {
    gap: 20px !important;
    margin-top: 20px !important;
  }
  
  .fbs-pck__nav-button {
    width: 42px !important;
    height: 42px !important;
  }
  
  .fbs-pck__nav-button svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .fbs-pck__carousel-progress {
    max-width: 180px !important;
    margin-top: 20px !important;
  }
  
  .fbs-pck__video-caption {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* Extra small devices (small phones, 400px and below) */
@media (max-width: 400px) {
  .fbs-pck__carousel-title {
    font-size: 18px !important;
  }
  
  .fbs-pck__item {
    width: 220px !important;
    height: 440px !important;
    margin: 0 5px !important;
  }
  
  .fbs-pck__videos-nav {
    gap: 15px !important;
  }
  
  .fbs-pck__nav-button {
    width: 36px !important;
    height: 36px !important;
  }
  
  .fbs-pck__nav-button svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  .fbs-pck__carousel-progress {
    max-width: 160px !important;
    height: 4px !important;
  }
  
  .fbs-pck__video-caption {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* Fix for iOS overflow issues */
.fbs-pck__video-slider {
  -webkit-overflow-scrolling: touch !important;
}

/* Ensure proper centering on mobile */
@media (max-width: 767px) {
  .fbs-pck__video-slider {
    justify-content: flex-start !important;
    padding-left: 10px !important;
  }
  
  /* Make sure the first item is properly visible */
  .fbs-pck__video-slider::before {
    content: "" !important;
    min-width: 10px !important;
  }
  
  .fbs-pck__video-slider::after {
    content: "" !important;
    min-width: 10px !important;
  }
}



/* Decrease top margin for YouTube Shorts section */

/* Reduce the overall section padding */
.fbs-pck__videos-slider.fbs-pck__section {
  padding-top: 10px !important; /* Reduced from 40px */
}

/* Reduce the inner padding */
.fbs-pck__sizer {
  padding-top: 10px !important; /* Adjust as needed */
}

/* Reduce spacing around the section heading */
.fbs-pck__heading {
  margin-bottom: 15px !important; /* Reduced from 30px */
  padding-bottom: 10px !important; /* Reduced from 15px */
}

/* Reduce top padding on the slider itself */
.fbs-pck__video-slider {
  padding-top: 10px !important; /* Reduced from 20px */
}

/* If there's still too much margin, you can add this stronger selector */
.DP--section-id, #DP--section-id {
  margin-top: 0 !important;
}
/* Increase shadow opacity for YouTube Shorts cards */

/* Stronger main card shadow */
.fbs-pck__item {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 15px 30px -10px rgba(0, 0, 0, 0.35) !important;
}

/* Stronger hover shadow effect */
.fbs-pck__item:hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35), 0 20px 40px -15px rgba(0, 0, 0, 0.45) !important;
}

/* Increase bottom gradient shadow opacity */
.fbs-pck__video-wrapper::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100px !important; /* Increased height for more visible shadow */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) !important;
  pointer-events: none !important;
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
  z-index: 3 !important;
}
/* Center alignment fixes for YouTube Shorts carousel */

.fbs-pck__sizer {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
}

.fbs-pck__videos {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.fbs-pck__video-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  padding: 20px 0 !important;
  margin: 0 auto !important;
  justify-content: center !important;
  max-width: 1400px !important;
}

/* Make sure the slider doesn't show scrollbars */
.fbs-pck__video-slider::-webkit-scrollbar {
  display: none !important;
}

.fbs-pck__video-slider {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

/* Make sure content is centered on wider screens */
@media (min-width: 1200px) {
  .fbs-pck__video-slider {
    justify-content: center !important;
  }
}





/* Force horizontal layout */
.fbs-pck__video-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  padding: 20px 0 !important;
}

.fbs-pck__item {
  scroll-snap-align: center !important;
  flex: 0 0 auto !important;
  width: 320px !important;
  height: 640px !important;
  margin: 0 10px !important;
  position: relative !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 15px 30px -10px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.fbs-pck__item:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), 0 20px 40px -15px rgba(0, 0, 0, 0.2) !important;
}

.fbs-pck__video {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 11px !important;
}

.fbs-pck__video-inner {
  width: 100% !important;
  height: 100% !important;
}

.fbs-pck__video-wrapper {
  width: 100% !important;
  height: 100% !important;
  transition: all 0.5s ease !important;
  position: relative !important;
}

.youtube-media-container {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: inherit !important;
  background-color: #fff !important;
}

.youtube-iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
}

.youtube-fallback {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 20px !important;
  background: #ff0000 !important;
  color: white !important;
  position: absolute !important;
  z-index: 1 !important;
  opacity: 0.95 !important;
  border-radius: 11px !important;
}

.youtube-fallback-icon {
  font-size: 40px !important;
  margin-bottom: 15px !important;
}

.youtube-fallback-message {
  font-weight: 500 !important;
  margin-bottom: 15px !important;
}

.youtube-fallback-link {
  display: inline-block !important;
  background: white !important;
  color: #ff0000 !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.youtube-fallback-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  color: #ff0000 !important;
}

.fbs-pck__videos-nav {
  width: fit-content !important;
  margin: 25px auto 0 !important;
  display: flex !important;
  gap: 30px !important;
  align-items: center !important;
}

.fbs-pck__nav-button {
  cursor: pointer !important;
  background: white !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.fbs-pck__nav-button:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.fbs-pck__carousel-progress {
  width: 100% !important;
  max-width: 250px !important;
  margin: 25px auto 0 !important;
  height: 5px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.fbs-pck__progress-bar {
  height: 100% !important;
  background: #ff0000 !important;
  width: 0% !important;
  transition: width 0.3s ease !important;
  border-radius: 3px !important;
}

.fbs-pck__carousel-title {
  text-align: center !important;
  margin-bottom: 20px !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.fbs-pck__heading {
  position: relative !important;
  text-align: center !important;
  padding-bottom: 15px !important;
  margin-bottom: 30px !important;
}

.fbs-pck__heading:after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: #ff0000 !important;
}

.fbs-pck__video-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  backdrop-filter: blur(4px) !important;
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
  z-index: 4 !important;
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  .fbs-pck__item {
    width: 280px !important;
    height: 560px !important;
  }
}
</style>

{%- assign section_id = section.id | replace: '+', '' -%}

<section id="DP--{{ section_id }}" class="DP--{{ section_id }} fbs-pck__videos-slider fbs-pck__section"
  style="
    background: {{ section.settings.background_color }};
    margin-top: {{ section.settings.outer_margin }}px;
    margin-bottom: {{ section.settings.outer_margin }}px;
    padding: 40px 0;
  "
>
  {%- if section.settings.anchor_id != blank -%}
    <div
      id="{{ section.settings.anchor_id | remove: '#' | handleize }}"
      class="fbs-pck__anchor-id"
      style="height: 0; overflow: hidden;"
    ></div>
  {%- endif -%}

  <div
    class="fbs-pck__sizer"
    style="
      width: {{ section.settings.base_width }}%;
      max-width: {% if section.settings.max_width contains 'px' or section.settings.max_width contains '%' %}
        {{ section.settings.max_width }}
      {% else %}
        {{ section.settings.max_width }}px
      {% endif %};
      padding-top: {{ section.settings.inner_padding }}px;
      padding-bottom: {{ section.settings.inner_padding }}px;
    "
  >
    {% if section.settings.section_title != blank %}
      <div class="fbs-pck__heading">
        <h2 class="fbs-pck__carousel-title">
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 5px; position: relative; top: -3px;">
            <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
          </svg>
          {{ section.settings.section_title }}
        </h2>
      </div>
    {% endif %}

    <div class="fbs-pck__flex fbs-pck__flex--main" style="align-items: center;">
      <div class="fbs-pck__videos">
        <div id="slider-{{ section_id }}" class="fbs-pck__videos-wrapper fbs-pck__video-slider">
          {% comment %} Loop through blocks of type 'youtube' {% endcomment %}
          {% assign youtubes = section.blocks | where: 'type', 'youtube' %}
          {% for block in youtubes %}
            <div class="fbs-pck__item fbs-pck__youtube-{{ forloop.index }} fbs-pck__block-{{ block.id }}" {{ block.shopify_attributes }}>
              <div class="fbs-pck__video">
                <div class="fbs-pck__video-inner">
                  <div class="fbs-pck__video-wrapper" style="border-radius: {{ section.settings.border_radius }}px;">
                    {% assign video_url = block.settings.youtube_video_url %}
                    <div class="youtube-media-container">
                      {% if video_url != blank %}
                        <div 
                          class="youtube-container"
                          data-youtube-url="{{ video_url }}"
                          data-video-id="{{ forloop.index }}"
                        >
                          {% comment %} Extract YouTube ID {% endcomment %}
                          {% assign yt_id = null %}
                          {% if video_url contains 'shorts/' %}
                            {% assign yt_id = video_url | split: 'shorts/' | last | split: '?' | first %}
                          {% elsif video_url contains 'v=' %}
                            {% assign yt_id = video_url | split: 'v=' | last | split: '&' | first %}
                          {% elsif video_url contains 'youtu.be/' %}
                            {% assign yt_id = video_url | split: 'youtu.be/' | last | split: '?' | first %}
                          {% endif %}
                          
                          {% if yt_id != blank %}
                            <iframe
                              class="youtube-iframe"
                              src="https://www.youtube.com/embed/{{ yt_id }}?playsinline=1&modestbranding=1&rel=0"
                              frameborder="0"
                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                              allowfullscreen
                            ></iframe>
                          {% else %}
                            <div class="youtube-fallback">
                              <div class="youtube-fallback-icon">
                                <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                  <path fill="white" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                </svg>
                              </div>
                              <div class="youtube-fallback-message">{{ block.settings.fallback_text | default: "Watch this Short on YouTube" }}</div>
                              <a href="{{ video_url }}" target="_blank" rel="noopener" class="youtube-fallback-link">Open on YouTube</a>
                            </div>
                          {% endif %}
                        </div>
                      {% else %}
                        <div class="youtube-fallback">
                          <div class="youtube-fallback-icon">
                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                              <path fill="white" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                            </svg>
                          </div>
                          <div class="youtube-fallback-message">Please add a YouTube URL</div>
                        </div>
                      {% endif %}
                    </div>
                    {% if block.settings.video_caption != blank %}
                      <div class="fbs-pck__video-caption">{{ block.settings.video_caption }}</div>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>

        {% if section.settings.show_arrows %}
          <div class="fbs-pck__videos-nav">
            <div class="fbs-pck__nav-button fbs-pck__nav-button--prev" onclick="scrollCarousel(-1, '{{ section_id }}')">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                <path
                  d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm3 5.753l-6.44 5.247 6.44 5.263-.678.737-7.322-6 7.335-6 .665.753z"
                  fill="{{ section.settings.border_color }}"
                />
              </svg>
            </div>
            <div class="fbs-pck__nav-button fbs-pck__nav-button--next" onclick="scrollCarousel(1, '{{ section_id }}')">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                <path
                  d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z"
                  fill="{{ section.settings.border_color }}"
                />
              </svg>
            </div>
          </div>
        {% endif %}
        
        {% if section.settings.show_progress %}
          <div class="fbs-pck__carousel-progress">
            <div class="fbs-pck__progress-bar" id="progress-{{ section_id }}"></div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "YouTube Shorts Carousel",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Our YouTube Highlights"
    },
    {
      "type": "range",
      "id": "slide_width",
      "label": "Slide width (px)",
      "min": 300,
      "max": 500,
      "step": 5,
      "default": 320
    },
    {
      "type": "range",
      "id": "outer_margin",
      "label": "Outer margin (px)",
      "default": 0,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "inner_padding",
      "label": "Inner padding (px)",
      "default": 40,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "base_width",
      "label": "Section base width (%)",
      "min": 80,
      "max": 100,
      "step": 5,
      "default": 100
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Maximum width (e.g. 1200px or 90%)",
      "default": "1400px"
    },
    {
      "type": "color_background",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Video corner radius",
      "default": 10,
      "min": 0,
      "max": 30,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show navigation arrows",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_progress",
      "label": "Show progress bar",
      "default": true
    },
    {
      "type": "text",
      "id": "anchor_id",
      "label": "Anchor ID",
      "info": "Use this if you want to link directly to this section, e.g. #my-youtube-section"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Arrow color",
      "default": "#121212"
    }
  ],
  "blocks": [
    {
      "type": "youtube",
      "name": "YouTube Short",
      "settings": [
        {
          "type": "url",
          "id": "youtube_video_url",
          "label": "YouTube Short URL",
          "info": "Copy the URL from your browser when viewing the short"
        },
        {
          "type": "text",
          "id": "fallback_text",
          "label": "Fallback Text",
          "default": "Watch this short on YouTube"
        },
        {
          "type": "text",
          "id": "video_caption",
          "label": "Caption (optional)"
        },
        {
          "type": "image_picker",
          "id": "thumbnail_image",
          "label": "Thumbnail Image",
          "info": "Used as a fallback if YouTube embed fails"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "YouTube Shorts Carousel",
      "blocks": [
        {
          "type": "youtube"
        },
        {
          "type": "youtube"
        },
        {
          "type": "youtube"
        },
        {
          "type": "youtube"
        },
        {
          "type": "youtube"
        }
      ]
    }
  ]
}
{% endschema %}

<script>
// Simple vanilla JavaScript scrolling carousel - no dependencies
document.addEventListener('DOMContentLoaded', function() {
  initYoutubeCarousel('{{ section_id }}');
});

function initYoutubeCarousel(sectionId) {
  // Setup progress bar
  updateProgressBar(sectionId);
  
  // Set initial scroll position for better viewing
  const slider = document.getElementById('slider-' + sectionId);
  if (slider && slider.children.length > 0) {
    const firstItem = slider.children[0];
    const scrollLeft = firstItem.offsetLeft - (slider.offsetWidth - firstItem.offsetWidth) / 2;
    slider.scrollLeft = scrollLeft;
  }
  
  // Add scroll event listener for progress bar
  if (slider) {
    slider.addEventListener('scroll', function() {
      updateProgressBar(sectionId);
    });
  }
}

function scrollCarousel(direction, sectionId) {
  const slider = document.getElementById('slider-' + sectionId);
  if (!slider) return;
  
  const scrollAmount = direction * 340; // approximate width of one card + margin
  const currentScroll = slider.scrollLeft;
  
  slider.scrollTo({
    left: currentScroll + scrollAmount,
    behavior: 'smooth'
  });
  
  // Update progress after scrolling
  setTimeout(function() {
    updateProgressBar(sectionId);
  }, 500);
}

function updateProgressBar(sectionId) {
  const slider = document.getElementById('slider-' + sectionId);
  const progressBar = document.getElementById('progress-' + sectionId);
  
  if (!slider || !progressBar) return;
  
  const scrollWidth = slider.scrollWidth - slider.clientWidth;
  const scrolled = slider.scrollLeft;
  
  if (scrollWidth <= 0) {
    progressBar.style.width = '100%';
    return;
  }
  
  const progress = (scrolled / scrollWidth) * 100;
  progressBar.style.width = progress + '%';
}
</script>