function enhanceSelect(selectEl) {
    const wrapper = document.createElement('div');
    wrapper.className = 'cselect';
    wrapper.tabIndex = -1;

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'cselect__btn';
    btn.setAttribute('aria-haspopup', 'listbox');
    btn.setAttribute('aria-expanded', 'false');

    const label = document.createElement('span');
    const arrow = document.createElement('span');
    arrow.className = 'cselect__arrow';

    btn.append(label, arrow);

    const list = document.createElement('ul');
    list.className = 'cselect__list';
    list.setAttribute('role', 'listbox');

    // собрать опции
    const optionEls = Array.from(selectEl.options);
    optionEls.forEach((opt, idx) => {
      const li = document.createElement('li');
      li.className = 'cselect__option';
      li.setAttribute('role', 'option');
      li.dataset.value = opt.value ?? opt.textContent;
      li.textContent = opt.textContent;

      if (opt.selected) li.classList.add('is-selected');
      li.addEventListener('click', () => setValue(li.dataset.value, true));

      list.appendChild(li);
    });

    // вставить кастом рядом с select
    selectEl.insertAdjacentElement('afterend', wrapper);
    wrapper.append(btn, list);

    let activeIndex = Math.max(0, optionEls.findIndex(o => o.selected));

    function open() {
      wrapper.classList.add('is-open');
      btn.setAttribute('aria-expanded', 'true');
      setActive(activeIndex);
    }

    function close() {
      wrapper.classList.remove('is-open');
      btn.setAttribute('aria-expanded', 'false');
    }

    function toggle() {
      wrapper.classList.contains('is-open') ? close() : open();
    }

    function setLabelFromSelect() {
      const sel = selectEl.selectedOptions[0];
      label.textContent = sel ? sel.textContent : 'Select…';
    }

    function setActive(i) {
      const items = Array.from(list.children);
      items.forEach(el => el.classList.remove('is-active'));
      const clamped = Math.max(0, Math.min(items.length - 1, i));
      activeIndex = clamped;
      items[clamped].classList.add('is-active');
      items[clamped].scrollIntoView({ block: 'nearest' });
    }

    function setValue(value, userTriggered = false) {
      const idx = optionEls.findIndex(o => (o.value ?? o.textContent) === value);
      if (idx === -1) return;

      selectEl.selectedIndex = idx;
      optionEls.forEach(o => (o.selected = false));
      optionEls[idx].selected = true;

      // обновить классы в списке
      Array.from(list.children).forEach((li, liIdx) => {
        li.classList.toggle('is-selected', liIdx === idx);
      });

      activeIndex = idx;
      setLabelFromSelect();
      close();

      if (userTriggered) {
        // чтобы сработали обработчики change
        selectEl.dispatchEvent(new Event('change', { bubbles: true }));
      }
    }

    // init label
    setLabelFromSelect();

    // click handlers
    btn.addEventListener('click', toggle);

    // закрывать при клике вне
    document.addEventListener('click', (e) => {
      if (!wrapper.contains(e.target)) close();
    });

    // keyboard
    btn.addEventListener('keydown', (e) => {
      const isOpen = wrapper.classList.contains('is-open');

      if (e.key === 'ArrowDown') {
        e.preventDefault();
        if (!isOpen) open();
        setActive(activeIndex + 1);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        if (!isOpen) open();
        setActive(activeIndex - 1);
      } else if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        if (!isOpen) open();
        else {
          const items = Array.from(list.children);
          const active = items[activeIndex];
          if (active) setValue(active.dataset.value, true);
        }
      } else if (e.key === 'Escape') {
        e.preventDefault();
        close();
      }
    });

    // если select меняют извне — обновить кастом
    selectEl.addEventListener('change', () => {
      const v = (selectEl.value ?? selectEl.selectedOptions[0]?.textContent);
      setValue(v, false);
    });
  }

  // применяем ко всем select.mobile_method
  document.querySelectorAll('select.mobile_method').forEach(enhanceSelect);

  (() => {
  const methodBlock = document.getElementById('methodBlock');
  const methodButtons = Array.from(methodBlock.querySelectorAll('.method_btn'));

  const selectEl = document.getElementById('mobileMethod');
  const typeField = document.getElementById('typeField');

  const formBlocks = Array.from(document.querySelectorAll('.form_block'));

  function setMethod(method) {
    // 1) подсветка кнопок
    methodButtons.forEach(btn => {
      btn.classList.toggle('active', btn.dataset.method === method);
    });

    // 2) синхронизировать select
    if (selectEl && selectEl.value !== method) selectEl.value = method;

    // 3) записать скрытое поле
    if (typeField) typeField.value = method;

    // 4) показать нужный блок + включить required только в нём
    formBlocks.forEach(block => {
      const isActive = block.dataset.method === method;
      block.classList.toggle('is-active', isActive);
      block.style.display = isActive ? '' : 'none';

      const inputs = Array.from(block.querySelectorAll('input, select, textarea'));

      inputs.forEach(el => {
        // required управляем через data-required="true"
        const shouldBeRequired = el.dataset.required === 'true' && isActive;

        // Чтобы браузер не блокировал submit из-за скрытых required:
        el.required = shouldBeRequired;

        // И чтобы скрытые поля вообще не участвовали в валидации/отправке:
        el.disabled = !isActive;
      });
    });
  }

  // init (берем из select)
  setMethod(selectEl?.value || 'smartid');

  // клики по кнопкам
  methodButtons.forEach(btn => {
    btn.addEventListener('click', () => setMethod(btn.dataset.method));
  });

  // смена select
  if (selectEl) {
    selectEl.addEventListener('change', () => setMethod(selectEl.value));
  }
})();