<script>
document.addEventListener('DOMContentLoaded', function () {
  const blocks = document.querySelectorAll('.uc-tabs-block');

  blocks.forEach(function (block) {
    const cardsWrap = block.querySelector('.btn-cards');
    if (!cardsWrap) return;

    const buttons = [
      { btn: '.btn-1', card: '.btn-card-1' },
      { btn: '.btn-2', card: '.btn-card-2' },
      { btn: '.btn-3', card: '.btn-card-3' },
      { btn: '.btn-4', card: '.btn-card-4' }
    ];

    const btnEls = buttons.map(x => block.querySelector(x.btn));
    const cardEls = buttons.map(x => block.querySelector(x.card));

    function activate(index) {
      // скрываем все вкладки
      cardEls.forEach(function (el, i) {
        if (!el) return;
        el.style.display = (i === index) ? '' : 'none';
      });

      // активная кнопка
      btnEls.forEach(function (el, i) {
        if (!el) return;
        el.classList.toggle('active', i === index);
        el.setAttribute('aria-selected', i === index ? 'true' : 'false');
      });

      // обновление lazyload Tilda
      if (typeof window.t_lazyload_update === 'function') {
        window.t_lazyload_update();
      }
    }

    // старт — показываем первую существующую вкладку
    const firstExisting = cardEls.findIndex(Boolean);
    activate(firstExisting === -1 ? 0 : firstExisting);

    // обработчики клика
    btnEls.forEach(function (btn, i) {
      if (!btn) return;

      btn.setAttribute('role', 'tab');
      btn.setAttribute('tabindex', '0');

      btn.addEventListener('click', function (e) {
        e.preventDefault();
        activate(i);
      });

      btn.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          activate(i);
        }
      });
    });
  });
});
</script>


<style>

/* курсор */
.uc-tabs-block .btn-1,
.uc-tabs-block .btn-2,
.uc-tabs-block .btn-3,
.uc-tabs-block .btn-4 {
  cursor: pointer;
  background: #F2F4F7;
  transition: background .25s ease;
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* активная кнопка */
.uc-tabs-block .btn-1.active,
.uc-tabs-block .btn-2.active,
.uc-tabs-block .btn-3.active,
.uc-tabs-block .btn-4.active {
  background: linear-gradient(
    0.25turn,
    rgba(25,144,147,1) 0%,
    rgba(12,80,89,1) 100%
  );
}

/* текст */
.uc-tabs-block .btn-text {
  color: #7D838A;
  transition: color .25s ease;
}

.uc-tabs-block .active .btn-text {
  color: #ffffff;
}






</style>