Styling and Layout of Guest/Account Selection Block

document.addEventListener("DOMContentLoaded", function () {
  // Radio-opties met bijbehorende knoptekst
  const options = [
    {
      id: 'data_register_registration_methodlogin',
      text: 'Inloggen'
    },
    {
      id: 'data_register_registration_method0',
      text: 'Account aanmaken'
    },
    {
      id: 'data_register_registration_method2',
      text: 'Bestellen als gast'
    }
  ];

  const container = document.querySelector('#data_register_registration_method div[data-toggle]');
  if (!container) return;

  // Maak het visuele blok leeg
  container.innerHTML = '';

  options.forEach(option => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom';
    button.textContent = option.text;

    button.addEventListener('click', () => {
      const radio = document.getElementById(option.id);
      if (radio) {
        radio.checked = true;
        // Trigger event die HikaShop gebruikt
        if (typeof displayRegistration === 'function') {
          displayRegistration(radio);
        }
      }
    });

    container.appendChild(button);
  });
});

/* Container for vertical layout and alignment */
#data_register_registration_method div[data-toggle] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 300px;
  margin-bottom: 40px; 
}

/* Buttons: full width inside the container, with 20px margin on the right */
#data_register_registration_method label.btn {
  width: calc(100% - 20px);
  margin-right: 20px;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* No extra margin under the last button */
#data_register_registration_method label.btn:last-child {
  margin-bottom: 0;
}