/*Disable all dev mods for complex components if the user forgot to disable them in the admin area*/
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".dev-edite-mode").forEach((el) => {
    if (el.classList.contains("is-on")) {
      el.classList.remove("is-on");
    }
  });
});

/* Marquee START */
/* Marquee START */
function initMarquees(selector, speed) {
  const marquees = document.querySelectorAll(selector);
  if (!marquees.length) return;

  const TABLET_MAX = 991; // Webflow tablet breakpoint

  marquees.forEach((parent) => {
    const from = parent.getAttribute("data-marquee-from");

    // 👉 if attribute is set to "tablet" — disable on desktop
    if (from === "tablet" && window.innerWidth > TABLET_MAX) return;

    const original = parent.innerHTML;

    // duplicate content twice for seamless loop
    parent.insertAdjacentHTML("beforeend", original);
    parent.insertAdjacentHTML("beforeend", original);

    let offset = 0;
    let paused = false;

    /*
    parent.addEventListener("mouseenter", () => { paused = true; });
    parent.addEventListener("mouseleave", () => { paused = false; });
    */

    const first = parent.firstElementChild;

    const tick = () => {
      if (!paused) {
        first.style.marginLeft = `-${offset}px`;
        offset = offset > first.clientWidth ? 0 : offset + speed;
      }
      requestAnimationFrame(tick);
    };

    requestAnimationFrame(tick);
  });
}

document.addEventListener("DOMContentLoaded", () => {
  initMarquees(".marquee", 0.5);
});
/* Marquee END */

/* Marquee END */

/*Slider security START*/

document.addEventListener("DOMContentLoaded", () => {
  const sliderEl = document.querySelector("#slider-security");

  if (!sliderEl) return;

  const scrollbarEl = document.querySelector("#blog-slider-scrollbar");

  const swiper = new Swiper(sliderEl, {
    slidesPerView: 1.5,
    spaceBetween: 24,
    scrollbar: {
      el: scrollbarEl,
      hide: false,
    },
    navigation: {
      prevEl: ".slider-arrow-prev",
      nextEl: ".slider-arrow-next",
    },
    breakpoints: {
      992: { slidesPerView: 1.5, spaceBetween: 24 },
      768: { slidesPerView: 1, spaceBetween: 24 },
      0: { slidesPerView: 1, spaceBetween: 24 },
    },
  });
});

/*Slider security END*/

/*Slider for Awwards carusel START */

document.addEventListener("DOMContentLoaded", () => {
  const sliders = document.querySelectorAll("#video-slider");

  if (sliders.length > 0) {
    sliders.forEach((sliderEl) => {
      new Swiper(sliderEl, {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        spaceBetween: 20,
        breakpoints: {
          992: { slidesPerView: "auto", spaceBetween: 20 },
          768: { slidesPerView: "auto", spaceBetween: 16 },
          0: { slidesPerView: "auto", spaceBetween: 16 },
        },
      });
    });
  }
});

/*Slider for Awwards carusel END */

/*Navbar for Awwards carusel START */

document.addEventListener("DOMContentLoaded", () => {
  const navbar = document.querySelector(".navbar_component");
  const dropdowns = document.querySelectorAll(".navbar_dropdown-list");
  const menuButton = document.querySelector(".navbar_menu-button");

  if (!navbar) return;

  // Функція, яка оновлює стан класу
  function updateNavbarState() {
    const scrolled = window.scrollY > 100;

    // чи є відкритий дропдаун
    const dropdownOpen = Array.from(dropdowns).some((dd) =>
      dd.classList.contains("w--open")
    );

    // чи відкритий бургер
    const menuOpen = menuButton && menuButton.classList.contains("w--open");

    if (scrolled || dropdownOpen || menuOpen) {
      navbar.classList.add("is-scroll_nav");
    } else {
      navbar.classList.remove("is-scroll_nav");
    }
  }

  // Слухач скролу
  window.addEventListener("scroll", updateNavbarState);

  // Слухачі на всі дропдауни
  dropdowns.forEach((dropdown) => {
    const observer = new MutationObserver(updateNavbarState);
    observer.observe(dropdown, {
      attributes: true,
      attributeFilter: ["class"],
    });
  });

  // Слухач на бургер
  if (menuButton) {
    const observer = new MutationObserver(updateNavbarState);
    observer.observe(menuButton, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
});

/*Navbar for Awwards carusel END */

/* ==========================================================================
     13. “Show More/Less” Button
     ========================================================================== */
(function () {
  const LIMIT_ROWS = 3;
  const BREAKPOINT = 767;
  const BUTTON_HTML = `
          <div class="show-more-wrapper">
            <a href="proxy.php?url=#" class="button show-more">
              <div class="button-md">Read more reviews</div>
            </a>
          </div>`;

  function updateGrids() {
    document.querySelectorAll(".testimonial-list").forEach((container) => {
      const items = Array.from(container.children);
      const cols =
        getComputedStyle(container).gridTemplateColumns.split(" ").length;
      const limit = cols * LIMIT_ROWS;

      // remove existing button if present
      const nxt = container.nextElementSibling;
      if (nxt?.classList.contains("show-more-wrapper")) nxt.remove();

      items.forEach((i) => (i.style.display = ""));

      if (window.innerWidth <= BREAKPOINT && items.length > limit) {
        items.slice(limit).forEach((i) => (i.style.display = "none"));

        const wrapper = document.createElement("div");
        wrapper.innerHTML = BUTTON_HTML;
        const btnWrap = wrapper.firstElementChild;
        container.parentNode.insertBefore(btnWrap, container.nextSibling);

        const btn = btnWrap.querySelector(".show-more");
        const label = btn.querySelector(".button-md");

        btn.addEventListener("click", (e) => {
          e.preventDefault();
          const hidden = items.slice(limit);
          if (btn.classList.contains("expanded")) {
            hidden.forEach((i) => (i.style.display = "none"));
            btn.classList.remove("expanded");
            label.textContent = "Read more reviews";
            container.scrollIntoView({ behavior: "smooth" });
          } else {
            hidden.forEach((i) => (i.style.display = ""));
            btn.classList.add("expanded");
            label.textContent = "Show less reviews";
          }
        });
      }
    });
  }

  window.addEventListener("resize", updateGrids);
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", updateGrids);
  } else {
    updateGrids();
  }
})();

/* Start Navbar hide animation */

document.addEventListener("DOMContentLoaded", function () {
  let prevScrollPos = window.pageYOffset;
  const header = document.querySelector(".navbar_component");

  if (!header) return;

  // Додаємо плавність у CSS через JS
  header.style.transition = "transform 0.3s ease";

  window.addEventListener("scroll", function () {
    const currentScrollPos = window.pageYOffset;

    if (currentScrollPos > prevScrollPos && currentScrollPos > 200) {
      // Скрол вниз + більше ніж 100px → сховати
      header.style.transform = "translateY(-100%)";
    } else {
      // Скрол вгору → показати
      header.style.transform = "translateY(0)";
    }

    prevScrollPos = currentScrollPos;
  });
});

/* End Navbar hide animation */

/* Start popup modal open */
$(function () {
  // 👉 Список сторінок, на яких має працювати автозапуск попапу
  var allowedSlugs = ["invest"]; // додавай ще: ["invest", "pricing", "about"]

  // Отримуємо поточний slug сторінки
  var currentPath = window.location.pathname.replace(/^\/|\/$/g, "");
  // наприклад "/invest/" → "invest"

  // Якщо ця сторінка НЕ в списку — вимикаємо автопоказ
  var autoPopupEnabled = allowedSlugs.includes(currentPath);

  var $popup = $("#get-popup");
  if (!$popup.length) return;

  if ($popup.data("popup-initialized")) return;
  $popup.data("popup-initialized", true);

  var autoPopupTriggered = false;
  var manualTriggered = false;
  var $root = $("html");

  function openPopup() {
    $popup.fadeIn();
    $root.addClass("no-scroll");
  }

  function closePopup() {
    $popup.fadeOut();
    $root.removeClass("no-scroll");
    clearTimeout(timer);
    $(window).off("scroll.popup");
  }

  $('a[href="proxy.php?url=#get"]').on("click.popup", function (e) {
    e.preventDefault();
    manualTriggered = true;
    openPopup();
  });

  $(".close-popup", $popup).on("click.popup", closePopup);

  $popup.on("click.popup", function (e) {
    if (e.target === this) closePopup();
  });

  $(document).on("keydown.popup", function (e) {
    if (e.key === "Escape") closePopup();
  });

  // 👉 Якщо автопоказ вимкнений — припиняємо тут
  if (!autoPopupEnabled) return;

  // ⏱ Таймер 40 сек
  var timer = setTimeout(function () {
    if (!autoPopupTriggered && !manualTriggered) {
      autoPopupTriggered = true;
      openPopup();
    }
  }, 40000);

  // 📜 Показ при скролі 50%
  $(window).on("scroll.popup", function () {
    if (!autoPopupTriggered && !manualTriggered) {
      var scrollTop = $(window).scrollTop();
      var docHeight = $(document).height();
      var winHeight = $(window).height();

      if (scrollTop >= (docHeight - winHeight) / 2) {
        autoPopupTriggered = true;
        clearTimeout(timer);
        openPopup();
        $(window).off("scroll.popup");
      }
    }
  });
});

/* End popup modal open */

/* select start*/
document.addEventListener("DOMContentLoaded", function () {
  const select = document.querySelector(".form-input.select");
  const icon = document.querySelector(".icon-select");

  if (select && icon) {
    select.addEventListener("click", function (event) {
      event.stopPropagation();
      select.classList.toggle("open");
      icon.style.transform = select.classList.contains("open")
        ? "rotate(180deg)"
        : "rotate(0deg)";
    });

    document.addEventListener("click", function () {
      if (select.classList.contains("open")) {
        select.classList.remove("open");
        icon.style.transform = "rotate(0deg)";
      }
    });
  }
});
/* select end*/

/*Slider swiper for hero  START*/
var heroSwiper = new Swiper("#hero-slider", {
  // Core
  slidesPerView: 1,
  spaceBetween: 0,
  grabCursor: true,
  a11y: true,

  // Fade effect
  effect: "fade",
  speed: 600,
  fadeEffect: {
    crossFade: true,
  },

  // Pagination bullets
  pagination: {
    el: ".slider-and-paginations-hero .swiper-bullet-wrapper.is-slider-main",
    clickable: true,
    bulletClass: "swiper-bullet",
    bulletActiveClass: "is_active_hero",
  },

  initialSlide: 0,
});
/*Slider swiper for hero End*/

/*Slider for WHY carusel START */

document.addEventListener("DOMContentLoaded", () => {
  const sliders = document.querySelectorAll(".why-swiper-wrap");

  if (sliders.length > 0) {
    sliders.forEach((sliderEl) => {
      new Swiper(sliderEl, {
        slidesPerView: 3,
        //centeredSlides: true,
        loop: false,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        spaceBetween: 20,
        breakpoints: {
          992: { slidesPerView: 3, spaceBetween: 20, loop: false },
          768: { slidesPerView: "auto", spaceBetween: 16, loop: false },
          0: { slidesPerView: "auto", spaceBetween: 16, loop: false },
        },
      });
    });
  }
});

/*Slider for WHY carusel END */

/*Scroll line progress Start */

document.addEventListener("DOMContentLoaded", () => {
  if (window.matchMedia("(min-width: 767px)").matches) {
    const items = document.querySelectorAll(".swiper-slide.is-scroll");

    items.forEach((item, index) => {
      const square = item.querySelector(".progress-square");
      const line = item.querySelector(".active-progress-line");
      const content = item.querySelector(".max-content-item-scroll");

      if (square && line && content) {
        gsap.to(line, {
          height: "100%",
          transformOrigin: "top",
          ease: "none",
          scrollTrigger: {
            trigger: item,
            start: "top 50%",
            end: "bottom 50%",
            scrub: true,
            onEnter: () => {
              square.classList.add("is-active");
              content.classList.add("is-on");
            },
            onLeaveBack: () => {
              if (index !== 0) {
                square.classList.remove("is-active");
                content.classList.remove("is-on");
              }
            },
          },
        });
      }
    });
  }
});

/*Scroll line progress End */

/*Open-close faq items*/
document.addEventListener("click", function (event) {
  const element = event.target.closest('[js-faq-collapse="true"]');
  if (!element) return;

  const isOpening = !element.classList.contains("open");

  // Якщо відкриваємо — закриваємо всі інші через клік
  if (isOpening) {
    document
      .querySelectorAll('[js-faq-collapse="true"].open')
      .forEach((item) => {
        if (item !== element) item.click();
      });

    element.classList.add("open");

    // ТІЛЬКИ для мобільних (< 768px)
    if (window.innerWidth < 768) {
      setTimeout(() => {
        element.scrollIntoView({
          behavior: "smooth",
          block: "center",
        });
      }, 150);
    }
  } else {
    element.classList.remove("open");
  }
});
/*Open-close faq items*/

/*Slider swiper for Blog START*/
let cmsSwiper = null;

function initCmsSwiper() {
  if (window.innerWidth <= 991 && !cmsSwiper) {
    cmsSwiper = new Swiper(".cms-slider", {
      slidesPerView: 2.2,
      grabCursor: true,
      a11y: true,
      loop: false,
      spaceBetween: 24,
      breakpoints: {
        767: {
          slidesPerView: 2.2,
          spaceBetween: 24,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1.2,
          spaceBetween: 16,
        },
      },
    });
  } else if (window.innerWidth > 991 && cmsSwiper) {
    cmsSwiper.destroy(true, true); // цього достатньо
    cmsSwiper = null;
  }
}

document.addEventListener("DOMContentLoaded", initCmsSwiper);
window.addEventListener("resize", initCmsSwiper);

/*Slider swiper for Blog END*/

/*Slider hero main tab for Blog START*/

document.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll(".switch-tab-hero");
  const contents = document.querySelectorAll(".content-hero-tab");

  tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
      tabs.forEach((t) => t.classList.remove("is-active"));

      tab.classList.add("is-active");

      contents.forEach((c) => {
        c.classList.remove("is-block", "is-visible");
      });

      const targetContent = contents[index];
      if (targetContent) {
        targetContent.classList.add("is-block");

        setTimeout(() => {
          targetContent.classList.add("is-visible");
        }, 50);
      }
    });
  });
});
/*Slider hero main tab for Blog END*/

/* Interactive tab teamline START */
document.addEventListener("DOMContentLoaded", () => {
  const PROGRESS_DURATION = 4; // тривалість прогресу в секундах

  document.querySelectorAll(".interactive-flex_wrapper").forEach((wrapper) => {
    const tabList = wrapper.querySelector(".interactive-tab-list");
    if (!tabList) return;

    const items = Array.from(wrapper.querySelectorAll(".interactive-item"));
    const medias = Array.from(wrapper.querySelectorAll(".media-interective"));

    let started = false;
    let currentIndex = 0;
    let currentTween = null;

    // === IntersectionObserver: старт циклу, коли елемент у в'юпорті ===
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !started) {
            started = true;
            startCycle();
          }
        });
      },
      {
        root: null,
        threshold: 0,
        rootMargin: "0px 0px -15% 0px",
      }
    );
    io.observe(tabList);

    // === Утиліти ===
    function setActiveSquaresUpTo(idx) {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      items.forEach((it, i) => {
        const sq = it.querySelector(".progress-square");
        if (!sq) return;
        sq.classList.toggle("is-active", i <= idx);
      });
    }

    function addActiveSquare(idx) {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      const sq = items[idx]?.querySelector(".progress-square");
      if (sq) sq.classList.add("is-active");
    }

    function setMediaActive(idx) {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      medias.forEach((m, i) => m.classList.toggle("is-active", i === idx));
    }

    function resetAllLines() {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      items.forEach((it) => {
        const line = it.querySelector(".active-progress-line");
        if (line) gsap.set(line, { height: "0%" });
      });
    }

    function killCurrentTween() {
      if (currentTween && typeof currentTween.kill === "function") {
        try {
          currentTween.kill();
        } catch (e) {}
        currentTween = null;
      }
    }

    // === Головна функція запуску прогресу ===
    function runProgress(idx, options = { resetSquares: false }) {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      killCurrentTween();

      if (options.resetSquares) setActiveSquaresUpTo(idx);
      else addActiveSquare(idx);

      setMediaActive(idx);

      const item = items[idx];
      if (!item) return onCompleteNext(idx);

      const line = item.querySelector(".active-progress-line");
      if (!line) return onCompleteNext(idx);

      gsap.set(line, { height: "0%" });

      currentTween = gsap.to(line, {
        height: "100%",
        duration: PROGRESS_DURATION,
        ease: "linear",
        onComplete: () => onCompleteNext(idx),
      });
    }

    function onCompleteNext(idx) {
      currentIndex = idx + 1;

      if (currentIndex < items.length) {
        runProgress(currentIndex, { resetSquares: false });
      } else {
        // цикл завершено — скидаємо все
        if (window.innerWidth > 767) {
          items.forEach((it) => {
            const sq = it.querySelector(".progress-square");
            if (sq) sq.classList.remove("is-active");
            const ln = it.querySelector(".active-progress-line");
            if (ln) gsap.set(ln, { height: "0%" });
          });
          medias.forEach((m) => m.classList.remove("is-active"));

          setActiveSquaresUpTo(0);
          setMediaActive(0);
          currentIndex = 0;

          setTimeout(() => runProgress(0, { resetSquares: false }), 350);
        }
      }
    }

    // === Старт циклу ===
    function startCycle() {
      if (window.innerWidth <= 767) return; // блокуємо на мобільних
      resetAllLines();
      setActiveSquaresUpTo(0);
      setMediaActive(0);
      currentIndex = 0;
      runProgress(0, { resetSquares: false });
    }

    // === Кліки для ручного перемикання ===
    items.forEach((it, i) => {
      const content = it.querySelector(".progress-box-scroll");
      const square = it.querySelector(".progress-square");

      const handler = (e) => {
        e && e.preventDefault();
        if (window.innerWidth <= 767) return; // блокуємо на мобільних
        killCurrentTween();
        currentIndex = i;

        items.forEach((it2, idx2) => {
          const line = it2.querySelector(".active-progress-line");
          if (!line) return;
          if (idx2 < i) gsap.set(line, { height: "100%" });
          else if (idx2 > i) gsap.set(line, { height: "0%" });
        });

        runProgress(i, { resetSquares: true });
      };

      if (content) content.addEventListener("click", handler);
      if (square) square.addEventListener("click", handler);
    });

    // === Пауза при hover на media-interective ===
    medias.forEach((media) => {
      media.addEventListener("mouseenter", () => {
        if (window.innerWidth <= 767) return; // блокуємо на мобільних
        if (currentTween) currentTween.pause();
      });
      media.addEventListener("mouseleave", () => {
        if (window.innerWidth <= 767) return; // блокуємо на мобільних
        if (currentTween) currentTween.resume();
      });
    });
  });
});
/* Interactive tab teamline END */

/*Slider swiper for TABWHY START*/
let tabwhySwiper = null;

function inittabwhySwiper() {
  if (window.innerWidth <= 991 && !tabwhySwiper) {
    tabwhySwiper = new Swiper("#is-slider-why-tab", {
      slidesPerView: 2.2,
      grabCursor: true,
      a11y: true,
      loop: false,
      spaceBetween: 24,
      breakpoints: {
        767: {
          slidesPerView: 2.2,
          spaceBetween: 24,
        },
        480: {
          slidesPerView: "auto",
          spaceBetween: 20,
        },
        320: {
          slidesPerView: "auto",
          spaceBetween: 16,
        },
      },
    });
  } else if (window.innerWidth > 991 && tabwhySwiper) {
    tabwhySwiper.destroy(true, true); // цього достатньо
    tabwhySwiper = null;
  }
}

document.addEventListener("DOMContentLoaded", inittabwhySwiper);
window.addEventListener("resize", inittabwhySwiper);
/*Slider swiper for TABWHY END*/

/*Slider swiper for TABWHY START*/
let offerSwiper = null;

function initofferSwiper() {
  if (window.innerWidth <= 991 && !offerSwiper) {
    offerSwiper = new Swiper("#slider-offer", {
      slidesPerView: 2.2,
      grabCursor: true,
      a11y: true,
      loop: false,
      spaceBetween: 24,
      breakpoints: {
        767: {
          slidesPerView: 2.2,
          spaceBetween: 24,
        },
        480: {
          slidesPerView: "auto",
          spaceBetween: 20,
        },
        320: {
          slidesPerView: "auto",
          spaceBetween: 16,
        },
      },
    });
  } else if (window.innerWidth > 991 && offerSwiper) {
    offerSwiper.destroy(true, true); // цього достатньо
    offerSwiper = null;
  }
}

document.addEventListener("DOMContentLoaded", initofferSwiper);
window.addEventListener("resize", initofferSwiper);
/*Slider swiper for TABWHY END*/

/*Slider swiper for PHONE START*/
let phoneSwiper = null;

function initphoneSwiper() {
  if (window.innerWidth <= 991 && !phoneSwiper) {
    phoneSwiper = new Swiper("#slider-phone", {
      slidesPerView: 2.2,
      grabCursor: true,
      a11y: true,
      loop: false,
      spaceBetween: 24,
      breakpoints: {
        767: {
          slidesPerView: 2.2,
          spaceBetween: 24,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1.2,
          spaceBetween: 16,
        },
      },
    });
  } else if (window.innerWidth > 991 && phoneSwiper) {
    phoneSwiper.destroy(true, true); // цього достатньо
    phoneSwiper = null;
  }
}

document.addEventListener("DOMContentLoaded", initphoneSwiper);
window.addEventListener("resize", initphoneSwiper);
/*Slider swiper for PHONE END*/

/*Sleder blog detail featured START*/

var cmsfeaturedSwiper = new Swiper("#slider-blog-featured", {
  slidesPerView: 3,
  spaceBetween: 16,
  grabCursor: true,
  a11y: true,
  loop: true,
  initialSlide: 0,
  speed: 700,
  navigation: {
    nextEl: "#cmsblog-arrow-slider-next",
    prevEl: "#cmsblog-arrow-slider-prev",
  },
  breakpoints: {
    991: {
      slidesPerView: 3,
    },
    767: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    320: {
      slidesPerView: 1.1,
      spaceBetween: 10,
    },
  },
});

/*Sleder blog detail featured END*/

/*Slider on the referral page START*/
document.addEventListener("DOMContentLoaded", function () {
  function initCardSlider(sliderWrapper) {
    const cardSwiper = new Swiper(
      sliderWrapper.querySelector(".slider-cards-wrapper"),
      {
        slidesPerView: 1,
        grabCursor: true,
        loop: false,
        speed: 300,
        effect: "fade",
        fadeEffect: { crossFade: true },
      }
    );

    const progressBoxes = sliderWrapper.querySelectorAll(
      ".switch-box-progress"
    );
    const progressBars = Array.from(progressBoxes).map((box) =>
      box.querySelector(".line-progress-active")
    );

    const activeNumber = sliderWrapper.querySelector(".active-number");

    let progressTimeout;
    let isProgressRunning = false;
    const progressDuration = 5000; // час на один слайд

    // Жорстке виставлення стану барів (щоб не було бага при русі назад)
    function hardSetProgress(index) {
      progressBars.forEach((bar, i) => {
        if (!bar) return;
        bar.style.transition = "none";
        if (i < index) {
          bar.style.width = "100%"; // попередні повні
        } else {
          bar.style.width = "0%"; // поточний і наступні чисті
        }
      });
      // форсуємо reflow, щоб браузер застосував нові стилі
      void sliderWrapper.offsetWidth;
    }

    function resetProgress() {
      progressBoxes.forEach((box) => box.classList.remove("active"));
      progressBars.forEach((bar) => {
        if (bar) {
          bar.style.transition = "none";
          bar.style.width = "0%";
        }
      });
    }

    function startProgress() {
      if (isProgressRunning) return;
      isProgressRunning = true;

      const index = cardSwiper.realIndex;
      const progressBar = progressBars[index];
      const activeBox = progressBoxes[index];

      if (!progressBar || !activeBox) {
        isProgressRunning = false;
        return;
      }

      hardSetProgress(index); // жорстко виставили попередні

      activeBox.classList.add("active");

      // запускаємо плавне заповнення для поточного
      progressBar.style.transition = `width ${progressDuration}ms linear`;
      setTimeout(() => {
        progressBar.style.width = "100%";
      }, 20);

      // оновлюємо цифру
      if (activeNumber) {
        activeNumber.textContent = index + 1;
      }

      progressTimeout = setTimeout(() => {
        isProgressRunning = false;
        if (index === progressBars.length - 1) {
          resetProgress();
          cardSwiper.slideTo(0);
        } else {
          cardSwiper.slideNext();
        }
        startProgress();
      }, progressDuration);
    }

    progressBoxes.forEach((box, index) => {
      box.addEventListener("click", () => {
        clearTimeout(progressTimeout);
        isProgressRunning = false;
        hardSetProgress(index);
        cardSwiper.slideTo(index);
        startProgress();
      });
    });

    cardSwiper.on("slideChange", () => {
      clearTimeout(progressTimeout);
      isProgressRunning = false;
      hardSetProgress(cardSwiper.realIndex);
      startProgress();
    });

    startProgress();
  }

  // Запускаємо всі слайдери у .group-sliders-card
  document.querySelectorAll(".group-sliders-card").forEach((sliderWrapper) => {
    initCardSlider(sliderWrapper);
  });
});
/*Slider on the referral page END*/

/*Сarousel of comments sliders on the referrals page START*/
var cmsfeaturedSwiper = new Swiper("#reviews-carusel-slider", {
  slidesPerView: "auto",
  spaceBetween: 16,
  grabCursor: true,
  a11y: true,
  loop: true,
  centeredSlides: true,
  speed: 700,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  breakpoints: {
    991: {
      slidesPerView: "auto",
    },
    767: {
      slidesPerView: "auto",
      spaceBetween: 10,
    },
    320: {
      slidesPerView: "auto",
      spaceBetween: 10,
    },
  },
});
/*Сarousel of comments sliders on the referrals page END*/

/* Pagination hide state (multi-instance safe) */
(function () {
  const PAGINATION_SELECTOR = ".w-pagination-wrapper.pagination"; // трохи точніше
  const COUNT_SELECTOR = ".w-page-count";

  // Normalize text like "1 / 1" (handle NBSP and multiple spaces)
  function normalize(text) {
    return (text || "")
      .replace(/\u00A0/g, " ")
      .replace(/\s+/g, " ")
      .trim();
  }

  // Read "1 / 1" style or aria-label="Page 1 of 1" and return total pages
  function readTotalPages(paginationEl) {
    const countEl = paginationEl.querySelector(COUNT_SELECTOR);
    if (!countEl) return null;

    // Prefer visible text content
    const text = normalize(countEl.textContent);
    const m = text.match(/^(\d+)\s*\/\s*(\d+)$/);
    if (m) {
      const total = parseInt(m[2], 10);
      if (!Number.isNaN(total)) return total;
    }

    // Fallback to aria-label e.g. "Page 1 of 1"
    const aria = countEl.getAttribute("aria-label") || "";
    const ariaMatch = aria.match(/of\s+(\d+)/i);
    if (ariaMatch) {
      const total = parseInt(ariaMatch[1], 10);
      if (!Number.isNaN(total)) return total;
    }

    return null;
  }

  function updateVisibility(paginationEl) {
    const total = readTotalPages(paginationEl);
    // Якщо не вдалося розпарсити — не ховаємо (консервативно)
    if (total === null) {
      paginationEl.removeAttribute("data-hidden");
      return;
    }
    if (total <= 1) {
      paginationEl.setAttribute("data-hidden", "true");
    } else {
      paginationEl.removeAttribute("data-hidden");
    }
  }

  // Слідкуємо за змінами конкретного лічильника
  function observeCount(paginationEl) {
    const countEl = paginationEl.querySelector(COUNT_SELECTOR);
    if (!countEl) return;

    // початкова перевірка
    updateVisibility(paginationEl);

    // створюємо (або перестворюємо) observer саме для цього елемента
    const countObserver = new MutationObserver(() => {
      setTimeout(() => updateVisibility(paginationEl), 0);
    });
    countObserver.observe(countEl, {
      subtree: true,
      childList: true,
      characterData: true,
    });

    // зберігаємо посилання, щоб можна було від’єднати при видаленні вузла
    paginationEl.__countObserver = countObserver;
  }

  // Під’єднати до всіх пагінацій на сторінці
  function attachAll() {
    document.querySelectorAll(PAGINATION_SELECTOR).forEach((node) => {
      // якщо вже під’єднаний observer — пропускаємо
      if (node.__countObserver) {
        updateVisibility(node);
        return;
      }
      observeCount(node);
    });
  }

  // Від’єднати observer, якщо вузол зник
  function cleanupDisconnected() {
    document.querySelectorAll(PAGINATION_SELECTOR).forEach((node) => {
      if (!document.body.contains(node) && node.__countObserver) {
        try {
          node.__countObserver.disconnect();
        } catch (e) {}
        node.__countObserver = null;
      }
    });
  }

  // DOM ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", attachAll, { once: true });
  } else {
    attachAll();
  }

  // Глобальний спостерігач: якщо CMS/Finsweet перерендерить список — перепід’єднатись
  const outerObserver = new MutationObserver(() => {
    cleanupDisconnected();
    attachAll();
  });
  outerObserver.observe(document.body, { childList: true, subtree: true });

  // Події Finsweet/CMS (підстраховка)
  const reattach = () => setTimeout(attachAll, 0);
  window.addEventListener("fs-cmsfilter-update", reattach);
  window.addEventListener("fs-cmsfilter-reset", reattach);
  window.addEventListener("fs-cmsfilter-change", reattach);
  window.addEventListener("fs-cmsload", reattach);
  // інколи використовують таку подію:
  window.addEventListener("fs-list-update", reattach);
})();

/* Pagination hide state END */

/* TAB POPUP START */

$(document).ready(function () {
  const $switches = $(".switch-popup");
  const $cards = $(".card-popup-video");

  // --- Початковий стан ---
  $switches.removeClass("is-active").first().addClass("is-active");
  $cards.removeClass("is-visible is-on").first().addClass("is-visible is-on");

  // --- Логіка при кліку ---
  $switches.on("click", function () {
    const index = $(this).index();

    // Якщо вже активний — нічого не робимо
    if ($(this).hasClass("is-active")) return;

    // Змінюємо активний свіч
    $switches.removeClass("is-active");
    $(this).addClass("is-active");

    // Прибираємо класи з усіх карток
    $cards.removeClass("is-visible is-on");

    // Додаємо класи до потрібної картки
    const $targetCard = $cards.eq(index);
    $targetCard.addClass("is-visible");

    // Додаємо "is-on" з невеликою затримкою для плавності
    setTimeout(() => {
      $targetCard.addClass("is-on");
    }, 150);
  });
});
/* TAB POPUP END */

/* Start popup modal open */
$(function () {
  var $popup = $("#popup-video");
  if (!$popup.length) return;

  var $root = $("html");

  function openPopup() {
    $popup.fadeIn(300);
    $root.addClass("no-scroll");
  }

  function closePopup() {
    $popup.fadeOut(300);
    $root.removeClass("no-scroll");
  }

  // Відкриття по кліку на кнопку з href="proxy.php?url=#popup-video"
  $('a[href="proxy.php?url=#popup-video"]').on("click", function (e) {
    e.preventDefault();
    openPopup();
  });

  // Закриття по хрестику
  $popup.find(".close-popup").on("click", closePopup);

  // Закриття по кліку поза контентом (оверлей)
  $popup.on("click", function (e) {
    if (e.target === this) closePopup();
  });

  // Закриття по Esc
  $(document).on("keydown", function (e) {
    if (e.key === "Escape") closePopup();
  });
});
/* End popup modal open */

/* TOOLTIPS START*/
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".tooltips-wrapper").forEach((wrapper) => {
    const tooltip = wrapper.querySelector(".tooltips");
    if (!tooltip) return;

    wrapper.addEventListener("mouseenter", () => {
      tooltip.classList.add("is-on");
    });

    wrapper.addEventListener("mouseleave", () => {
      tooltip.classList.remove("is-on");
    });
  });
});

document.addEventListener("mouseover", (e) => {
  const wrapper = e.target.closest(".tooltips-wrapper");
  if (!wrapper) return;

  const tooltip = wrapper.querySelector(".tooltips");
  tooltip?.classList.add("is-on");
});

document.addEventListener("mouseout", (e) => {
  const wrapper = e.target.closest(".tooltips-wrapper");
  if (!wrapper) return;

  const tooltip = wrapper.querySelector(".tooltips");
  tooltip?.classList.remove("is-on");
});
/* TOOLTIPS END*/