.page-id-92314 { background-color: var(--color-background-light) !important; } .page-id-92314 .mp_wrapper { margin: 0 !important; padding: 0 !important; } .page-id-92314 .mepr-form { margin: 0 !important; } .page-id-92314 .special-title { font-size: var(--font-size-heading-small) !important; font-weight: var(--font-weight-semibold) !important; } .page-id-92314 .price-highlight { margin-top: 20px !important; font-size: 16px !important; display: flex; justify-content: space-between; gap: var(--spacer-20); padding: var(--spacer-20) !important; background: var(--color-white); border-radius: var(--border-radius-media); } .page-id-92314 .mepr-transaction-invoice-wrapper { padding-top: 0 !important; } .page-id-92314 .special-form .wp-block-list { padding-left: 24px !important; } @media (min-width: 768px) { .page-id-92314 .special-form .wp-block-list { padding-left: 4px !important; } } .page-id-92314 .site-header__search-wrap, .page-id-92314 .site-header__button, .page-id-92314 .site-header__navigation-wrap, .page-id-92314 .site-header__utility-nav, .page-id-92314 .membership-navigation, .page-id-92314 .site-header__scroll-nav-cta-wrapper, .page-id-92314 footer { display: none !important; } .page-id-92314 .site-header__logo-wrap { padding-top: 0; } .page-id-92314 [data-js=site-wrap] { margin-top: 0 !important; } @media (min-width: 768px) { .page-id-92314 .special-title { font-size: 24px !important; font-weight: var(--font-weight-semibold) !important; margin-bottom: var(--spacer-30) !important; } .page-id-92314 .special-form p, .page-id-92314 .special-form li { font-size: 16px; margin-bottom: var(--spacer-20); } .page-id-92314 .special-form ul { margin-top: var(--spacer-20); margin-bottom: var(--spacer-20); } .page-id-92314 .special-form li { margin-left: var(--spacer-20); } .page-id-92314 .site-header__logo-wrap { padding-top: 15px !important; } .page-id-92314 .l-sink>.wp-block-group { padding-top: 90px !important; padding-bottom: 90px !important; } } @media (min-width: 1200px) { .page-id-92314.scroll-down .site-header { padding-top: 0 !important; padding-bottom: 0 !important; } } .mp_wrapper { padding: 0 !important; margin: 0 !important; } @media (min-width: 960px) { .b-columns__grid--2-cols { grid-template-columns: 0.43fr 0.57fr !important; grid-column-gap: var(--spacer-70) !important; } } .form-steps-nav { margin-bottom: 48px; } .form-steps-nav ul { display: flex; justify-content: space-evenly; align-items: start; list-style: none; padding: 0; margin: 0; gap: 0; position: relative; padding-left: 0 !important; } /* Linje mellem trin */ .form-steps-nav ul::before { content: ''; position: absolute; top: 15px; /* Juster med midten af cirklerne */ left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #E5E7EB; z-index: 0; } .form-steps-nav li { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-neutral-90); font-size: 14px; font-weight: 500; z-index: 1; width: 120px; /* Fast bredde for ensartet afstand */ text-align: center; } /* Nummercirkler */ .form-steps-nav li::before { content: attr(data-step); width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 2px solid var(--color-neutral-90); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; margin-bottom: 4px; } /* Aktiv tilstand */ .form-steps-nav li.active::before { background: var(--color-primary); border-color: var(--color-primary); color: white; } .form-steps-nav li.active { color: var(--color-neutral-90); font-weight: 700; } /* Responsive justeringer */ @media (max-width: 768px) { .step-1, .step-2 .mp-form-row:has([type="password"]) { grid-template-columns: 1fr; } .form-steps-nav ul { } .form-steps-nav ul::before { top: 22px; } .form-steps-nav li { font-size: 12px; padding: 6px 12px; } } /* Klasser til kritisk trin-funktionalitet */ .form-steps-wrapper { position: relative; min-height: 300px; } .form-step { display: none; opacity: 0; transition: opacity 0.3s ease; width:100%; margin: 0 auto; } .form-step.active { display: block; opacity: 1; } .form-steps-navigation { margin-top: 40px; } .nav-buttons { display: flex; justify-content: space-between; gap: 16px; } .prev-btn, .next-btn, input[type="submit"] { padding: 12px 32px; border: none; border-radius: 24px; cursor: pointer; font-weight: 500; font-size: 16px; transition: all 0.2s ease; } .prev-btn { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); } .next-btn, input[type="submit"] { background: var(--color-primary); color: white; margin-left: auto; } .prev-btn:hover, .next-btn:hover, input[type="submit"]:hover { opacity: 0.9; transform: translateY(-1px); } /* Styling af formularfelter */ .mp-form-row { margin-bottom: 24px; } .mp-form-label { display: block; margin-bottom: 8px; font-weight: 500; } .mepr-form-input { width: 100%; padding: 12px; border: 1px solid #e1e1e1; border-radius: 8px; font-size: 16px; } input.invalid { border-color: #ff3d5b !important; } .validation-error { color: #ff3d5b; font-size: 14px; margin-top: 4px; } /* Styling af kuponlink */ .have-coupon-link { color: var(--color-primary); text-decoration: none; font-weight: 500; display: inline-block; margin-top: 16px; } /* Layout med to kolonner til første trin */ .step-1.active { display: grid; grid-template-columns: 1fr; gap: 24px; row-gap: 0; @media (min-width: 960px) { grid-template-columns: 1fr 1fr; } } .mp_invoice .mp-table thead { display: none !important; } .mp_invoice { background: var(--color-neutral-0); padding: 16px !important; border-radius: 8px; overflow: hidden; } .mp_invoice .mp-table, .mp_invoice .mp-table * { background: var(--color-neutral-0); border: 0 !important; font-size: 16px !important; } .mp_invoice .mp-table { padding: 0 !important; margin: 0 !important; } .price-highlight .mepr-invoice-loader { display: none !important; } document.addEventListener('DOMContentLoaded', function () { const waitForStripe = new Promise((resolve) => { if (window.MeprStripeGateway) { resolve(); } else { const stripeCheck = setInterval(() => { if (window.MeprStripeGateway) { clearInterval(stripeCheck); resolve(); } }, 100); } }); waitForStripe.then(initializeMultiStepForm); function initializeMultiStepForm() { const form = document.querySelector('.mepr-signup-form'); if (!form) return; form.style.display = 'none'; const originalSubmit = form.querySelector('input[type="submit"]'); const submitButton = document.createElement('input'); submitButton.type = 'submit'; submitButton.value = originalSubmit?.value || 'Indsend'; submitButton.className = `${originalSubmit?.className || ''} submit-btn`; submitButton.style.display = 'none'; const stepsNav = document.createElement('div'); stepsNav.className = 'form-steps-nav'; stepsNav.innerHTML = '
- Personlige oplysninger
- Loginoplysninger
- Betaling
'; form.parentNode.insertBefore(stepsNav, form); const wrapper = document.createElement('div'); wrapper.className = 'form-steps-wrapper'; const steps = [1, 2, 3].map((number) => { const step = document.createElement('div'); step.className = `form-step step-${number}${number === 1 ? ' active' : ''}`; wrapper.appendChild(step); return step; }); const email = form.querySelector('[name="user_email"]'); const username = form.querySelector('[name="user_login"]'); if (email && username) { const usernameRow = username.closest('.mp-form-row'); if (usernameRow) usernameRow.style.display = 'none'; const syncUsername = () => { username.value = email.value; }; email.addEventListener('input', syncUsername); email.addEventListener('blur', syncUsername); } const personalSelectors = '[id*="user_first_name"],[id*="user_last_name"],[id*="mepr-address-one"],[id*="mepr-address-two"],[id*="mepr-address-city"],[id*="mepr-address-country"],[id*="mepr-address-state"],[id*="mepr-address-zip"]'; const accountSelectors = '[name="user_email"],[name="mepr_user_password"],[name="mepr_user_password_confirm"],[name="user_login"]'; const paymentSelectors = '.mepr-transaction-invoice-wrapper,.mepr-payment-methods-wrapper,.have-coupon-link,.mp-form-row.mepr_coupon,.mp-form-row.mepr_tos'; form.querySelectorAll(personalSelectors).forEach((field) => { const row = field.closest('.mp-form-row'); if (row) steps[0].appendChild(row); }); form.querySelectorAll(accountSelectors).forEach((field) => { const row = field.closest('.mp-form-row'); if (row && !steps[1].contains(row)) steps[1].appendChild(row); }); form.querySelectorAll(paymentSelectors).forEach((field) => steps[2].appendChild(field)); const hiddenFields = [...form.querySelectorAll('input[type="hidden"]')]; form.innerHTML = ''; hiddenFields.forEach((field) => form.appendChild(field)); form.appendChild(wrapper); const navigation = document.createElement('div'); navigation.className = 'form-steps-navigation'; navigation.innerHTML = '
'; navigation.appendChild(submitButton); form.appendChild(navigation); let currentStep = 1; const previous = navigation.querySelector('.prev-btn'); const next = navigation.querySelector('.next-btn'); function validateStep() { let valid = true; steps[currentStep - 1].querySelectorAll('.mepr-form-input:required,.mp-form-row.required input:not([type="hidden"]),.mp-form-row.required select').forEach((field) => { const empty = !field.value.trim(); field.classList.toggle('invalid', empty); if (empty) valid = false; }); return valid; } function showStep(number) { currentStep = number; steps.forEach((step, index) => step.classList.toggle('active', index === number - 1)); previous.style.display = number === 1 ? 'none' : 'block'; next.style.display = number === 3 ? 'none' : 'block'; submitButton.style.display = number === 3 ? 'inline-block' : 'none'; stepsNav.querySelectorAll('li').forEach((item) => item.classList.toggle('active', Number(item.dataset.step) === number)); } previous.addEventListener('click', () => { if (currentStep > 1) showStep(currentStep - 1); }); next.addEventListener('click', () => { if (validateStep() && currentStep { if (event.key === 'Enter') event.preventDefault(); }); form.style.display = 'block'; } });
