/*
Author       : Dreamstechnologies
Template Name: Dream Salon - Bootstrap Template
*/

jQuery(document).ready(function ($) {
  "use strict";

  // Mobile menu sidebar overlay
  function bindMobileMenu() {
    const isMobile = $(window).width() <= 991;

    if (isMobile) {
      // Mobile: bind click events
      $(".main-nav a")
        .off("click")
        .on("click", function (e) {
          const $parent = $(this).parent();
          const $submenu = $(this).next("ul");
          if ($parent.hasClass("has-submenu")) {
            e.preventDefault();

            if ($(this).hasClass("submenu")) {
              $(this).removeClass("submenu");
              $submenu.stop(true, true).slideUp(350);
            } else {
              $(".main-nav a").removeClass("submenu");
              $(".main-nav ul ul").slideUp(350);

              $(this).addClass("submenu");
              $submenu.stop(true, true).slideDown(350);
            }
          }
        });
    } else {
      $(".main-nav a").off("click"); // remove mobile click handler
      $(".main-nav a").removeClass("submenu"); // remove toggle class
      $(".main-nav .submenu").removeAttr("style"); // clear inline display:none
    }
  }
  $(document).ready(bindMobileMenu);
  $(window).on("resize", bindMobileMenu);

  // Mobile Click
  $(document).on("click", "#mobile_btn", function () {
    $("main-wrapper").toggleClass("slide-nav");
    $(".menu-overlay").toggleClass("opened");
    $("html").addClass("menu-opened");
    return false;
  });

  // Overlay
  $(document).on("click", ".menu-overlay", function () {
    $("html").removeClass("menu-opened");
    $(this).removeClass("opened");
    $("main-wrapper").removeClass("slide-nav");
  });

  // Menu Close
  $(document).on("click", "#menu_close", function () {
    $("html").removeClass("menu-opened");
    $(".sidebar-overlay").removeClass("opened");
    $("main-wrapper").removeClass("slide-nav");
  });

  // Loader
  $(window).on("load", function () {
    $('[data-loader="circle-side"]').fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
    $("body").delay(350).css({ overflow: "visible" });
  });

  // Listing Grid Slider
  $(".listing-slider").each(function () {
    const $slider = $(this);

    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: true,
        infinite: true,
        speed: 2000,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        arrows: false,
        rtl: $("html").attr("dir") === "rtl",
        adaptiveHeight: true,
        responsive: [
          {
            breakpoint: 1300,
            settings: { slidesToShow: 1, slidesToScroll: 1, dots: true },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 1, slidesToScroll: 1, dots: true },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 1, slidesToScroll: 1, dots: true },
          },
        ],
      });
    }
  });

  // Vertical Slider
  if ($(".vertical-slider").length > 0) {
    $(".slider-for").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: ".slider-nav",
    });
    $(".slider-nav").slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      vertical: true,
      asNavFor: ".slider-for",
      dots: false,
      arrows: true,
      focusOnSelect: true,
      verticalSwiping: true,
      prevArrow:
        "<span class='slick-next'><i class='ti ti-chevron-down'></i></span>",
      nextArrow:
        "<span class='slick-prev'><i class='ti ti-chevron-up'></i></span>",
      responsive: [
        {
          breakpoint: 992,
          settings: { slidesToShow: 5 },
        },
        {
          breakpoint: 780,
          settings: { slidesToShow: 4 },
        },
        {
          breakpoint: 580,
          settings: { slidesToShow: 3 },
        },
        {
          breakpoint: 0,
          settings: { vertical: false, slidesToShow: 1 },
        },
      ],
    });
  }

  // Gallery Slider
  $(".gallery-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: false,
        arrows: false,
        responsive: [
          {
            breakpoint: 1300,
            settings: { slidesToShow: 3, slidesToScroll: 1 },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 3, slidesToScroll: 1 },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 2, slidesToScroll: 1 },
          },
        ],
      });
    }
  });

  // Partners Slider
  $(".partners-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: false,
        arrows: false,
        adaptiveHeight: true,
        responsive: [
          {
            breakpoint: 1300,
            settings: { slidesToShow: 5, dots: true },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 4, dots: true },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 3, dots: true },
          },
          {
            breakpoint: 576,
            settings: { slidesToShow: 1, dots: true },
          },
        ],
      });
    }
  });

  // Testimonial 5 Slider
  $(".testimonial-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: false,
        prevArrow:
          "<span class='slick-next'><i class='ti ti-chevron-left'></i></span>",
        nextArrow:
          "<span class='slick-prev'><i class='ti ti-chevron-right'></i></span>",
        arrows: true,
        responsive: [
          {
            breakpoint: 1300,
            settings: { slidesToShow: 2 },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 1 },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 1 },
          },
          {
            breakpoint: 576,
            settings: { slidesToShow: 1 },
          },
        ],
      });
    }
  });

  // Banners 5 Slider
  $(".category-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 5,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
          {
            breakpoint: 1500,
            settings: { slidesToShow: 5 },
          },
          {
            breakpoint: 1300,
            settings: { slidesToShow: 4 },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 2 },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 2 },
          },
          {
            breakpoint: 576,
            settings: { slidesToShow: 1 },
          },
          {
            breakpoint: 450,
            settings: { slidesToShow: 1 },
          },
        ],
      });
    }
  });

  // Banners 5 Slider
  $(".banner-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
        fade: true,
        customPaging: function (slider, i) {
          return (
            '<span class="slick-number">' +
            ("0" + (i + 1)).slice(-2) +
            "</span>"
          );
        },
      });
    }
  });

  // Animation
  const tiltElements = document.getElementsByClassName("tilt");

  Array.from(tiltElements).forEach((el) => {
    const height = el.clientHeight;
    const width = el.clientWidth;

    el.addEventListener("mousemove", function (e) {
      const xVal = e.layerX;
      const yVal = e.layerY;

      const yRotation = 50 * ((xVal - width / 2) / width);
      const xRotation = -50 * ((yVal - height / 2) / height);

      const string =
        "perspective(600px) scale(1) rotateX(" +
        xRotation +
        "deg) rotateY(" +
        yRotation +
        "deg)";

      el.style.transform = string;
    });

    el.addEventListener("mouseout", function () {
      el.style.transform = "perspective(600px) scale(1) rotateX(0) rotateY(0)";
    });

    el.addEventListener("mousedown", function () {
      el.style.transform =
        "perspective(600px) scale(0.9) rotateX(0) rotateY(0)";
    });

    el.addEventListener("mouseup", function () {
      el.style.transform = "perspective(600px) scale(1) rotateX(0) rotateY(0)";
    });
  });

  // Heart Filled Toggle
//   if ($(".favourite i").length > 0) {
//     $(document).on("click", ".favourite i", function () {
//       $(this).toggleClass("ti-heart ti-heart-filled filled");
//     });
//   }

  // Select2 Initialization
  if ($(".select").length > 0) {
    $(".select").select2({
      minimumResultsForSearch: -1,
      width: "100%",
    });
  }

  // Reusable "Show More/Less" Toggle for Multiple Sections
  for (let i = 0; i <= 6; i++) {
    const moreMenu = $(`.more-menu${i || ""}`);
    const viewAllBtn = $(`.viewall${i || ""}-button`);

    if (moreMenu.length > 0) {
      moreMenu.hide();
      viewAllBtn.on("click", function () {
        const isLess = $(this).text() === "Show Less";
        $(this).text(isLess ? "Show More" : "Show Less");
        moreMenu.slideToggle(900);
      });
    }
  }

  // CounterUp Initialization
  if ($(".counter").length > 0) {
    $(".counter").counterUp({
      delay: 10,
      time: 2000,
    });
    $(".counter").addClass("animated fadeInDownBig");
  }

  // Sticky Header
  $(window).scroll(function () {
    const $header = $("header.header");
    if ($(this).scrollTop() > 130) {
      $header.addClass("fixed");
    } else {
      $header.removeClass("fixed").addClass("fadeInUp");
    }
  });

  // Booking Range
  if ($(".bookingrange").length > 0) {
    const start = moment().subtract(6, "days");
    const end = moment();
    const booking_range = function (start, end) {
      $(".bookingrange span").html(
        `${start.format("D MMM YY")} - ${end.format("D MMM YY")}`
      );
    };
    $(".bookingrange").daterangepicker(
      {
        startDate: start,
        endDate: end,
        ranges: {
          Today: [moment(), moment()],
          Yesterday: [
            moment().subtract(1, "days"),
            moment().subtract(1, "days"),
          ],
          "Last 7 Days": [moment().subtract(6, "days"), moment()],
          "Last 30 Days": [moment().subtract(29, "days"), moment()],
          "This Year": [moment().startOf("year"), moment().endOf("year")],
          "Last Year": [
            moment().subtract(1, "year").startOf("year"),
            moment().subtract(1, "year").endOf("year"),
          ],
        },
      },
      booking_range
    );
    booking_range(start, end);
  }

  // Horizontal Slide (Infinite Scroll)
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".horizontal-slide").forEach((scroller) => {
      scroller.setAttribute("data-animated", true);
      const scrollerInner = scroller.querySelector(".slide-list");
      const scrollerContent = Array.from(scrollerInner.children);
      scrollerContent.forEach((item) => {
        const clone = item.cloneNode(true);
        clone.setAttribute("aria-hidden", true);
        scrollerInner.appendChild(clone);
      });
    });
  });

  // Time Slot Selection (group-based)
  document.querySelectorAll(".time-slot1").forEach((slot) => {
    slot.addEventListener("click", () => {
      if (slot.classList.contains("disabled")) return;
      const parent = slot.closest('[id^="group"]');
      if (!parent) return;
      parent
        .querySelectorAll(".time-slot1")
        .forEach((s) => s.classList.remove("selected"));
      slot.classList.add("selected");
    });
  });

  // Select Button Toggle
  const buttons = document.querySelectorAll(".select-item .select-button");
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      buttons.forEach((btn) => {
        btn.classList.remove("selected");
        btn.querySelector(".icon").style.display = "none";
        btn.querySelector(".text").textContent = "Select";
      });
      button.classList.add("selected");
      button.querySelector(".icon").style.display = "inline";
      button.querySelector(".text").textContent = "Selected";
    });
  });

  // Select Button Toggle

  $(document).ready(function () {
    // Delegate click to any select-button inside multi-select-item
    $(document).on("click", ".multi-select-item .select-button", function (e) {
      e.preventDefault();

      const $btn = $(this); // clicked button
      const $icon = $btn.find(".icon"); // icon inside clicked button
      const $text = $btn.find(".text"); // text inside clicked button

      // Toggle selected class
      $btn.toggleClass("selected");

      // Update icon and text only for clicked button
      if ($btn.hasClass("selected")) {
        $icon.show();
        $text.text("Selected");
      } else {
        $icon.hide();
        $text.text("Select");
      }
    });
  });

  // Datetimepicker Initialization
  if ($(".datepic").length > 0) {
    $(".datepic").datetimepicker({
      format: "DD-MM-YYYY",
      keepOpen: true,
      inline: true,
      icons: {
        up: "ti ti-chevron-up",
        down: "ti ti-chevron-down",
        next: "ti ti-chevron-right",
        previous: "ti ti-chevron-left",
      },
    });
  }

  // Datetimepicker
  if ($(".datetimepicker").length > 0) {
    $(".datetimepicker").datetimepicker({
      format: "DD-MM-YYYY",
      icons: {
        up: "ti ti-chevron-up",
        down: "ti ti-chevron-down",
        next: "ti ti-chevron-right",
        previous: "ti ti-chevron-left",
      },
    });
  }

  // Year Month Picker
  if ($(".yearmonthpicker").length > 0) {
    $(".yearmonthpicker").datetimepicker({
      format: "MM-YY",
      icons: {
        up: "ti ti-chevron-up",
        down: "ti ti-chevron-down",
        next: "ti ti-chevron-right",
        previous: "ti ti-chevron-left",
      },
    });
  }

  // Table Timepicker
  $(".table .timepicker").each(function () {
    $(this).closest("td").css("position", "relative");
  });
  if ($(".table .timepicker").length > 0) {
    $(".table .timepicker").each(function () {
      $(this).datetimepicker({
        format: "hh:mm A",
        useCurrent: false,
        widgetPositioning: {
          horizontal: "right",
          vertical: "bottom",
        },
        widgetParent: ".datetimepicker-wrapper",
        icons: {
          up: "ti ti-chevron-up",
          down: "ti ti-chevron-down",
          next: "ti ti-chevron-right",
          previous: "ti ti-chevron-left",
        },
      });
    });
  }

  // Timepicker
  if ($(".timepicker").length > 0) {
    $(".timepicker").datetimepicker({
      format: "HH:mm A",
      icons: {
        up: "ti ti-chevron-up",
        down: "ti ti-chevron-down",
        next: "ti ti-chevron-right",
        previous: "ti ti-chevron-left",
      },
    });
  }

  // Toggle Password
  if ($(".toggle-password").length > 0) {
    $(document).on("click", ".toggle-password", function () {
      const $icon = $(this).find("i");
      const $input = $(this).closest(".input-group").find(".pass-input");
      if ($input.attr("type") === "password") {
        $input.attr("type", "text");
        $icon.removeClass("ti-eye-off").addClass("ti-eye");
      } else {
        $input.attr("type", "password");
        $icon.removeClass("ti-eye").addClass("ti-eye-off");
      }
    });
  }

  // Sidebar
  function initSidebar() {
    $(".sidebar-menu").on("click", "a", function (e) {
      console.log("sdad");
      const $this = $(this);
      const $parent = $this.parent();
      const $submenu = $this.next("ul");
      if ($parent.hasClass("submenu")) {
        e.preventDefault();
        const $currentMenu = $this.closest("ul");
        if (!$this.hasClass("subdrop")) {
          $currentMenu.find("ul").slideUp(250);
          $currentMenu.find("a").removeClass("subdrop");
          $submenu.stop(true, true).slideDown(350);
          $this.addClass("subdrop");
        } else {
          $this.removeClass("subdrop");
          $submenu.stop(true, true).slideUp(350);
        }
      }
    });

    // Auto-expand submenu if it contains an active link
    $(".sidebar-menu ul li.submenu a.active").each(function () {
      $(this)
        .parents("li.submenu")
        .children("a")
        .addClass("active subdrop")
        .next("ul")
        .show();
    });
  }
  $(document).ready(initSidebar);

  // Datatable
  if ($(".datatable").length > 0) {
    $(".datatable").each(function () {
      const $table = $(this);
      $table.DataTable({
        bFilter: true,
        sDom: "fBtlpi",
        ordering: false,
        language: {
          search: " ",
          searchPlaceholder: "Search",
          sLengthMenu: "Row Per Page _MENU_ Entries",
          info: "_START_ - _END_ of _TOTAL_ items",
          paginate: {
            next: '<i class="ti ti-arrow-right"></i>',
            previous: '<i class="ti ti-arrow-left"></i>',
          },
        },
        responsive: true,
        autoWidth: false,
        initComplete: function () {
          const $wrapper = $table.closest(".card");
          const $searchContainer = $wrapper.find(".search-input");
          if ($searchContainer.length) {
            $searchContainer.append($wrapper.find(".dt-search"));
          }
        },
      });
    });
  }

  // Filter Close
  document.addEventListener("DOMContentLoaded", function () {
    const closeBtn = document.getElementById("close-filter");
    const filterDropdown = document.getElementById("filter-dropdown");
    if (closeBtn && filterDropdown) {
      closeBtn.addEventListener("click", function () {
        filterDropdown.classList.remove("show");
      });
    }
  });

  // Cart Count
  document.addEventListener("DOMContentLoaded", function () {
    if (!document.getElementById("cart-wrap")) return;
    document.querySelectorAll(".btn-cover").forEach((container) => {
      const input = container.querySelector(".quantity-input");
      const plusBtn = container.querySelector(".add-btn");
      const minusBtn = container.querySelector(".minus-btn");
      plusBtn.addEventListener("click", () => {
        let currentValue = parseInt(input.value) || 0;
        input.value = currentValue + 1;
      });
      minusBtn.addEventListener("click", () => {
        let currentValue = parseInt(input.value) || 0;
        if (currentValue > 1) {
          input.value = currentValue - 1;
        }
      });
    });
  });

  // Date Range Picker
  if ($("#daterange").length > 0) {
    const start = moment().subtract(29, "days"),
      end = moment();
    const report_range = function (start, end) {
      $("#daterange span").html(
        start.format("D MMM YY") + " - " + end.format("D MMM YY")
      );
    };
    $("#daterange").daterangepicker(
      {
        startDate: start,
        endDate: end,
        ranges: {
          Today: [moment(), moment()],
          Yesterday: [
            moment().subtract(1, "days"),
            moment().subtract(1, "days"),
          ],
          "Last 7 Days": [moment().subtract(6, "days"), moment()],
          "Last 30 Days": [moment().subtract(29, "days"), moment()],
          "This Month": [moment().startOf("month"), moment().endOf("month")],
          "Last Month": [
            moment().subtract(1, "month").startOf("month"),
            moment().subtract(1, "month").endOf("month"),
          ],
        },
      },
      report_range
    );

    report_range(end, end);
  }

  // Show/Hide Reason Box
  if ($("#reason-select").length > 0) {
    $("#reason-select").on("change", function () {
      $("#other-reason-box").toggle($(this).val() === "others");
    });
  }

  // Payment Options
  if ($("#payment-options").length > 0) {
    const $paymentSection = $("#payment-options");
    const $contents = $(".payment-content");
    const hideAllContents = function () {
      $contents.addClass("d-none");
    };
    const showContent = function (suffix) {
      $("#payment-content-" + suffix).removeClass("d-none");
    };
    $paymentSection.find('input[type="radio"]').on("click", function () {
      if ($(this).is(":checked")) {
        hideAllContents();
        const suffix = this.id.replace("payment-", "");
        showContent(suffix);
      }
    });
    hideAllContents();
    showContent("credit"); // Default visible section
  }

  // Partners Slider
  $(".service-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: false,
        arrows: false,
        adaptiveHeight: true,
        responsive: [
          {
            breakpoint: 1200,
            settings: { slidesToShow: 5, dots: true },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 4, dots: true },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 3, dots: true },
          },
          {
            breakpoint: 767,
            settings: { slidesToShow: 1, dots: true },
          },
        ],
      });
    }
  });

  // Testimonial Slider
  $(".testimonials-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: false,
        arrows: true,
        prevArrow: $(".testimonial-prev"),
        nextArrow: $(".testimonial-next"),
        adaptiveHeight: true,
        responsive: [
          {
            breakpoint: 1200,
            settings: { slidesToShow: 1 },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 1 },
          },
        ],
      });
    }
  });

  // Blog Slider
  $(".blog-slider").each(function () {
    const $slider = $(this);
    if (!$slider.hasClass("slick-initialized")) {
      $slider.slick({
        dots: false,
        infinite: true,
        speed: 2000,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: false,
        arrows: true,
        prevArrow: $(".blog-prev"),
        nextArrow: $(".blog-next"),
        adaptiveHeight: true,
        responsive: [
          {
            breakpoint: 1200,
            settings: { slidesToShow: 2 },
          },
          {
            breakpoint: 992,
            settings: { slidesToShow: 2, dots: true },
          },
          {
            breakpoint: 768,
            settings: { slidesToShow: 1, dots: true },
          },
        ],
      });
    }
  });

  if (typeof WOW !== "undefined") {
    new WOW({
      offset: 0,
      mobile: true,
    }).init();
  }

  // Aricle Hover
  const items = document.querySelectorAll(".article-item-two");
  items.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      // remove active from all
      items.forEach((i) => i.classList.remove("active"));
      // add active only to hovered one
      item.classList.add("active");
    });

    item.addEventListener("mouseleave", () => {
      // optional: remove active when leaving
      // item.classList.remove('active');
    });
  });

  // Video
  $(".video-section").each(function () {
    const video = $(this).find("video")[0]; // Get the video element
    const videoBtn = $(this).find(".video-btn"); // Get the button
    const icon = $(this).find(".video-btn i"); // Get the icon

    if (video && videoBtn && icon) {
      videoBtn.on("click", function () {
        if (video.paused) {
          video.play();
          icon.removeClass("ti-player-play-filled").addClass("ti-player-pause-filled"); // Change to pause icon
        } else {
          video.pause();
          icon.removeClass("ti-player-pause-filled").addClass("ti-player-play-filled"); // Change to play icon
        }
      });

      // Optional: reset icon when video ends
      video.addEventListener("ended", function () {
        icon.removeClass("ti-player-pause-filled").addClass("ti-player-play-filled"); // Reset to play icon
      });
    }
  });


  
});

// Initialize Bootstrap Tooltips
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
});
document.querySelectorAll(".animate-button").forEach((button) => {
  const text = button.getAttribute("data-text");
  const textWrap = button.querySelector(".button-text");

  if (!text || !textWrap) return;

  textWrap.innerHTML = "";

  [...text].forEach((char, index) => {
    const span = document.createElement("span");
    span.textContent = char;
    span.style.setProperty("--index", index); // must start from 0
    textWrap.appendChild(span);
  });
});
 document.addEventListener('DOMContentLoaded', function() {
            const slideLists = document.querySelectorAll('.support-section .slide-list.infinite-loop');
            
            slideLists.forEach(function(slideList) {
                const direction = slideList.parentElement.dataset.direction || 'left';
                const speed = slideList.parentElement.dataset.speed || 'slow';
                
                // Remove existing animation classes
                slideList.className = slideList.className.replace(/slide-\w+-\w+/g, '').trim();
                
                // Add new animation class
                slideList.classList.add('slide-' + direction + '-' + speed);
                
                // Ensure the animation starts
                slideList.style.animationPlayState = 'running';
            });
        });