/* ===================================================================
   Brand fonts, served same-origin from the Drupal backend.
   The share page previously loaded no fonts at all, so Merriweather and
   Raleway silently fell back to Georgia / system sans. The files are copied
   from the frontend's own self-hosted set, so the type matches the brand site
   exactly. Same-origin avoids the CORS problem: sundvolden.no/fonts/ does not
   send Access-Control-Allow-Origin, so loading them cross-origin would work
   locally and fail in production.
   =================================================================== */
@font-face {
  font-family: Merriweather;
  src: url('/sites/default/files/fonts/Merriweather-Light.woff') format('woff'),
       url('/sites/default/files/fonts/Merriweather-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Merriweather;
  src: url('/sites/default/files/fonts/Merriweather-LightItalic.woff') format('woff'),
       url('/sites/default/files/fonts/Merriweather-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url('/sites/default/files/fonts/Raleway-Light.woff') format('woff'),
       url('/sites/default/files/fonts/Raleway-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url('/sites/default/files/fonts/Raleway-Regular.woff') format('woff'),
       url('/sites/default/files/fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url('/sites/default/files/fonts/Raleway-Medium.woff') format('woff'),
       url('/sites/default/files/fonts/Raleway-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url('/sites/default/files/fonts/Raleway-SemiBold.woff') format('woff'),
       url('/sites/default/files/fonts/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* The header is now a webform markup element (so it is translatable) rather
   than markup injected by JS. These rules style that element in place. */
.webform-share-page-body .wf-brandhead {
  /* The header is a webform element inside the card, so the card's own padding
     already positions it. Adding padding or a max-width here indented it 64px
     further right than every other row. */
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: none;
}
.webform-share-page-body .wf-brandhead .wf-wordmark {
  margin: 0;
  color: var(--wf-ink);
  font-family: var(--wf-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.webform-share-page-body .wf-brandhead h1 {
  margin: 1.4rem 0 .5rem;
  color: var(--wf-ink);
  font-family: var(--wf-serif);
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 300;
  /* Upright, matching the frontend: every Merriweather heading there is
     font-style:normal with positive tracking (measured 0.9-2px at 36-38px).
     Italic read as an entirely different typeface. */
  font-style: normal;
  letter-spacing: .04em;
  line-height: 1.15;
}
.webform-share-page-body .wf-brandhead > p:not(.wf-wordmark):not(.wf-count) {
  margin: 0;
  max-width: 46ch;
  color: var(--wf-muted);
  font-size: .95rem;
}
/**
 * Sundvolden — Forespørsel (events) form design.
 * Tokens observed on sundvolden.no (brand-spec.md). Presentation only.
 * PKND Tech Studio / Giri
 */
.webform-share-page-body {
  --wf-bg:#fbfdfd; --wf-surface:#f3fafb; --wf-ink:#1c3247; --wf-muted:#676973;
  --wf-line:#d6d6d6; --wf-accent:#64a4b5; --wf-accent-deep:#4d8f9f; --wf-tint:#f0f4f7;
  --wf-serif: Merriweather, Georgia, "Times New Roman", serif;
  --wf-sans: Raleway, "Segoe UI", system-ui, sans-serif;
  margin:0; padding:2.5rem 1.5rem 3.5rem;
  background:var(--wf-bg); color:var(--wf-ink);
  font-family:var(--wf-sans); font-size:16px; font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.webform-share-page-body form {
  max-width:1180px; margin:0 auto;
  padding:3rem clamp(1.5rem,4vw,4rem) 2.5rem;
  background:#fff; border-radius:14px;
  box-shadow:0 12px 36px rgb(28 50 71 / 16%);
  counter-reset:wf-section;
}
/* section eyebrows */
.webform-share-page-body fieldset { margin:0 0 2.25rem; padding:0; border:0; }

/* The legacy markup wraps most groups in `flex flex-col items-center`
   containers, which shrink-wrap their children: measured fieldset widths of
   432, 601, 615, 660, 751 and 795px in one form, so option cards ended at a
   different edge in every section. Stretch them back to the card width. */
.webform-share-page-body fieldset,
.webform-share-page-body .fieldset-wrapper,
.webform-share-page-body .fieldset__wrapper { width:100%; align-self:stretch; }
.webform-share-page-body legend {
  display:flex; align-items:center; gap:.75rem; width:100%; margin:0 0 1.25rem; padding:0;
  color:var(--wf-ink); font-family:var(--wf-serif); font-size:.8rem; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase;
}
.webform-share-page-body legend::before {
  counter-increment:wf-section; content:"0" counter(wf-section);
  color:var(--wf-accent); font-size:.95rem; letter-spacing:.04em;
}
.webform-share-page-body legend::after { content:""; flex:1; height:1px; background:var(--wf-line); }

/* Sections whose title is set to display:invisible. Editors hid most group
   titles on kurs_og_konferanse and julebordsskjema because they are internal
   names ("Mat og Drikke2", "firma data"). Drupal still renders the <legend>
   with the text inside a .visually-hidden span, so the eyebrow number and the
   rule painted with nothing beside them — a column of empty numbered
   separators. Drop the ornament and, because the counter increments on
   ::before, the count with it: the numbers that do show then run in order
   over the sections that actually carry a heading. The legend itself stays in
   the accessibility tree. */
.webform-share-page-body legend:has(> .visually-hidden:only-child) { margin:0; }
.webform-share-page-body legend:has(> .visually-hidden:only-child)::before,
.webform-share-page-body legend:has(> .visually-hidden:only-child)::after { content:none; }
.webform-share-page-body fieldset.captcha { counter-increment:none; }
.webform-share-page-body fieldset.captcha > legend::before,
.webform-share-page-body fieldset.captcha > legend::after { content:none; }
.webform-share-page-body fieldset.captcha > legend,
.webform-share-page-body .captcha__title {
  position:absolute; overflow:hidden; clip-path:inset(50%); width:1px; height:1px; white-space:nowrap;
}
/* labels + inputs */
.webform-share-page-body label { display:block; margin-bottom:.4rem; font-size:.9rem; font-weight:500; }
.webform-share-page-body .form-required::after { margin-left:.15rem; color:var(--wf-accent); content:"*"; }
.webform-share-page-body input[type="text"], .webform-share-page-body input[type="email"],
.webform-share-page-body input[type="tel"], .webform-share-page-body input[type="number"],
.webform-share-page-body input[type="date"], .webform-share-page-body select,
.webform-share-page-body textarea {
  box-sizing:border-box; width:100%; padding:.7rem .9rem;
  border:1px solid var(--wf-line); border-radius:9px; background:#fcfefe;
  color:var(--wf-ink); font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.webform-share-page-body textarea { min-height:7.5rem; resize:vertical; }
.webform-share-page-body input:hover, .webform-share-page-body textarea:hover { border-color:#c3d6dc; }
.webform-share-page-body input:focus, .webform-share-page-body select:focus,
.webform-share-page-body textarea:focus {
  border-color:var(--wf-accent); outline:none; background:#fff;
  box-shadow:0 0 0 3px rgb(100 164 181 / 18%);
}
.webform-share-page-body input::placeholder, .webform-share-page-body textarea::placeholder { color:#a6b8bf; }
/* two/three column flow */
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper { display:flex; flex-wrap:wrap; gap:1.35rem 1.5rem; }
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > * {
  flex:1 1 calc(50% - .75rem); min-width:0; max-width:100%; width:auto !important; margin:0 !important;
}
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > input[type="hidden"] { display:none; }
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > .js-webform-type-textarea,
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > .webform-type-textarea,
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > .webform-element-help-container--title,
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > fieldset.captcha { flex-basis:100%; }
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper.border { border:0 !important; border-radius:0 !important; }
@media (min-width:1024px) {
  .webform-share-page-body fieldset:not(.captcha) .fieldset-wrapper > .form-wrapper > * { flex:1 1 calc(33.333% - 1rem); }
}
@media (max-width:640px) {
  .webform-share-page-body { padding:1rem .75rem 2rem; }
  .webform-share-page-body form { padding:1.75rem 1.25rem 1.5rem; border-radius:12px; }
  .webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > * { flex-basis:100% !important; }
}
/* consent */
.webform-share-page-body .form-type-checkbox {
  display:flex; align-items:flex-start; gap:.7rem; padding:1.1rem 1.2rem;
  border:1px solid var(--wf-line); border-radius:11px; background:var(--wf-surface);
}
.webform-share-page-body .form-type-checkbox input[type="checkbox"] {
  flex:none; width:1.1rem; height:1.1rem; margin-top:.18rem; accent-color:var(--wf-accent);
}
.webform-share-page-body .form-type-checkbox label { margin:0; font-weight:400; }

/* ---- radio options -----------------------------------------------------
   The consent rule above covers checkboxes only. Radio options fall back to
   the theme default, where the <label> is a block element and so drops onto
   the line below its own button — every option rendered as a stray circle
   with its text underneath. Same row treatment as a checkbox, so an option
   list reads as a list. Only kurs_og_konferanse and julebordsskjema use
   radios today; the other forms are unaffected. */
.webform-share-page-body .form-type-radio {
  display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1.1rem;
  border:1px solid var(--wf-line); border-radius:11px; background:var(--wf-surface);
}
.webform-share-page-body .form-type-radio input[type="radio"] {
  flex:none; width:1.1rem; height:1.1rem; margin:.18rem 0 0; accent-color:var(--wf-accent);
}
.webform-share-page-body .form-type-radio label { margin:0; font-weight:400; }

/* Space the options within a group, and keep a group in one column. */
.webform-share-page-body .form-radios,
.webform-share-page-body .form-checkboxes {
  display:flex; flex-direction:column; gap:.5rem;
}
/* submit */
.webform-share-page-body .form-actions, .webform-share-page-body .webform-actions {
  display:flex; justify-content:flex-end; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--wf-line);
}
.webform-share-page-body input[type="submit"], .webform-share-page-body button[type="submit"] {
  padding:.85rem 2rem; border:0; border-radius:10px;
  background:var(--wf-accent); color:#fff; font-family:var(--wf-sans); font-size:.82rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 4px 12px rgb(100 164 181 / 35%);
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.webform-share-page-body input[type="submit"]:hover, .webform-share-page-body button[type="submit"]:hover {
  background:var(--wf-accent-deep); transform:translateY(-2px);
}
@media (max-width:640px) {
  .webform-share-page-body .form-actions, .webform-share-page-body .webform-actions { justify-content:stretch; }
  .webform-share-page-body input[type="submit"], .webform-share-page-body button[type="submit"] { width:100%; }
}
/* messages */
.webform-share-page-body .messages {
  margin-bottom:1.5rem; padding:.9rem 1.1rem; border:1px solid var(--wf-line);
  border-left:3px solid var(--wf-accent); border-radius:9px; background:var(--wf-surface);
}
.webform-share-page-body .messages--error { border-left-color:#c0504d; background:#fdf6f6; }

/* ===================================================================
   Mockup parity — header, steppers, sticky mobile submit, captcha slot
   Copy taken verbatim from foresporsel-events-mobile.html.
   =================================================================== */

/* ---- header (injected by Custom JS) ----------------------------------- */
.webform-share-page-body .wf-head {
  max-width: 1180px;
  margin: 0 auto 1.25rem;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}
.webform-share-page-body .wf-headbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .6rem;
}
.webform-share-page-body .wf-wordmark {
  margin: 0;
  color: var(--wf-ink);
  font-family: var(--wf-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.webform-share-page-body .wf-count {
  margin: 0;
  color: var(--wf-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.webform-share-page-body .wf-progress {
  height: 2px;
  background: var(--wf-line);
  border-radius: 2px;
  overflow: hidden;
}
.webform-share-page-body .wf-progress-fill {
  height: 100%;
  width: 0;
  background: var(--wf-accent);
  transition: width .25s ease;
}
.webform-share-page-body .wf-title {
  margin: 1.4rem 0 .5rem;
  color: var(--wf-ink);
  font-family: var(--wf-serif);
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 300;
  /* Upright, matching the frontend: every Merriweather heading there is
     font-style:normal with positive tracking (measured 0.9-2px at 36-38px).
     Italic read as an entirely different typeface. */
  font-style: normal;
  letter-spacing: .04em;
  line-height: 1.15;
}
.webform-share-page-body .wf-sub {
  margin: 0 0 .25rem;
  max-width: 46ch;
  color: var(--wf-muted);
  font-size: .95rem;
}

/* ---- number steppers (buttons injected by Custom JS) ------------------- */
.webform-share-page-body .wf-num {
  display: flex;
  align-items: stretch;
  gap: .55rem;
}
.webform-share-page-body .wf-num input[type="number"] {
  flex: 1 1 auto;
  text-align: center;
  -moz-appearance: textfield;
}
.webform-share-page-body .wf-num input[type="number"]::-webkit-outer-spin-button,
.webform-share-page-body .wf-num input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.webform-share-page-body .wf-step-btn {
  flex: none;
  width: 2.9rem;
  border: 1px solid var(--wf-line);
  border-radius: 9px;
  background: var(--wf-surface);
  color: var(--wf-ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.webform-share-page-body .wf-step-btn:hover:not([aria-disabled="true"]) {
  border-color: var(--wf-accent);
  background: #fff;
  color: var(--wf-accent-deep);
}
.webform-share-page-body .wf-step-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- captcha slot ------------------------------------------------------ */
.webform-share-page-body fieldset.captcha .captcha__element {
  padding: 1rem;
  border: 1px dashed var(--wf-line);
  border-radius: 11px;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px, var(--wf-tint) 7px, var(--wf-tint) 14px);
}
.webform-share-page-body .captcha__description {
  margin-top: .6rem;
  color: var(--wf-muted);
  font-size: .82rem;
}

/* ---- submit: arrow + required note ------------------------------------- */
.webform-share-page-body .form-actions,
.webform-share-page-body .webform-actions {
  position: relative;
  align-items: center;
  justify-content: space-between;
}
/* ---- required-fields note ----------------------------------------------
   This used to be CSS generated content (`content: "* Obligatoriske felt"`),
   which meant the translation system could never see the string: every EN and
   DE page showed the Norwegian note. It is now a real webform_markup element
   (`wf_required_note`, class .wf-reqnote) sitting just before the actions, so
   editors and TMGMT can reach it. The presentation JS lifts it into the submit
   bar; without JS it simply sits above the bar, which still reads correctly. */
.webform-share-page-body .wf-reqnote {
  margin: 0;
  color: var(--wf-muted);
  font-size: .78rem;
  line-height: 1.3;
}
.webform-share-page-body .wf-reqnote p { margin: 0; }
.webform-share-page-body input[type="submit"],
.webform-share-page-body button[type="submit"] {
  padding-right: 3.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.15rem center;
  background-size: 1.05rem 1.05rem;
}

/* ---- submit bar: always reachable ------------------------------------
   The form is embedded in an iframe whose height is often far shorter than its
   content (measured ~657x444 in the frontend modal). Keying a sticky bar on
   viewport WIDTH was wrong — the constraint is HEIGHT, and at e.g. 700x500 the
   button sat 631px below the fold with no fallback. `position: sticky` pins it
   to the bottom of the scroll area at every size and settles naturally at the
   end of the form, with no fixed-position side effects inside the iframe. */
.webform-share-page-body .form-actions,
.webform-share-page-body .webform-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 1.75rem;
  padding: 1rem 0 .9rem;
  border-top: 1px solid var(--wf-line);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
  .webform-share-page-body .wf-head { padding: 0 .25rem; }
  .webform-share-page-body .wf-title { margin-top: 1rem; }

  .webform-share-page-body .form-actions,
  .webform-share-page-body .webform-actions {
    flex-direction: column-reverse;
    gap: .35rem;
    padding: .85rem 0 .9rem;
  }
  .webform-share-page-body .wf-reqnote { font-size: .74rem; }
}

/* ---- consent block layout ---------------------------------------------- */
.webform-share-page-body .form-type-checkbox { flex-wrap: wrap; }
.webform-share-page-body .form-type-checkbox > label {
  flex: 1 1 auto;
  align-self: center;
  font-weight: 500;
}
.webform-share-page-body .form-type-checkbox > .description {
  flex: 1 1 100%;
  margin-top: .5rem;
  color: var(--wf-muted);
  font-size: .85rem;
  line-height: 1.5;
}

/* ---- static "Fyll ut dette feltet" hints -------------------------------
   These are real webform elements, not validation messages, so they render
   permanently — including under fields that are correctly filled — and where
   one sits in its own wrapper it consumes a whole grid column and breaks the
   alignment. The required asterisk already carries the meaning, and the
   approved mockup shows this string only when a field is invalid.
   Hidden as a presentation choice; deleting the elements in the form builder
   is the permanent fix. */
.webform-share-page-body [data-drupal-selector^="edit-fyll-ut-dette-feltet"] {
  display: none;
}
.webform-share-page-body .form-wrapper:has([data-drupal-selector^="edit-fyll-ut-dette-feltet"]):not(:has(input, select, textarea)) {
  display: none;
}

/* ---- required asterisk must not change label height ---------------------
   The theme renders the marker with `vertical-align: super`, which grows the
   label's line box by ~6px. On a two-column row that puts a required field's
   input 6px lower than its neighbour's, so the inputs never line up.
   Raise it visually with position instead, and take it out of the line box
   with line-height: 0, so required and optional labels are the same height. */
.webform-share-page-body label,
.webform-share-page-body .form-required {
  line-height: 1.4;
}
.webform-share-page-body .form-required::after {
  position: relative;
  top: -.3em;
  vertical-align: baseline;
  font-size: .8em;
  line-height: 0;
}

/* Belt and braces: align every field in a row to the top so any remaining
   label-height difference cannot cascade into the inputs. */
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper {
  align-items: flex-start;
}

/* Some fields sit directly in the row while others are nested one level deeper
   inside an extra .form-wrapper. The nested ones carry a 16px top margin the
   un-nested ones don't, so their input lands 16px below its row neighbour.
   Zero it on the first child so every field in a row starts at the same y. */
/* A hidden <input> often precedes the field wrapper inside a grid item, so the
   field is not :first-child and a position-based rule misses it. Zero the top
   margin on the field wrapper itself, wherever it sits: each grid item holds a
   single field, so there is no legitimate vertical stacking to preserve, and
   row spacing is handled by the row gap. */
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper [class*="js-webform-type-"],
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper [class*="webform-type-"] {
  margin-top: 0 !important;
}

/* Hidden inputs must never occupy layout, at any depth. */
.webform-share-page-body input[type="hidden"] { display: none !important; }

/* ---- content images must use the full width -----------------------------
   Menus and other graphics are content to be READ, not decoration. Two things
   were shrinking them: the row container itself sometimes carries a Tailwind
   width utility (lg:w-1/5), which caps the whole row at ~210px, and the column
   rule then splits that further. Force rows to span the card, give any item
   holding an image the full row, and let the image scale up to fill it. */
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > *:has(img) {
  flex-basis: 100%;
}

.webform-share-page-body fieldset img:not(label img):not(button img):not([class*="help"] img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Processed-text blocks (menus, price lists) read better full width too. */
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > .js-webform-type-processed-text,
.webform-share-page-body fieldset .fieldset-wrapper > .form-wrapper > .webform-type-processed-text {
  flex-basis: 100%;
}

/* A number field whose row happens to hold only one item would otherwise
   stretch across the whole card, which looks wrong next to a 3-up row above.
   Cap the stepper group so counts stay a sensible size at any row width. */
.webform-share-page-body .wf-num { max-width: 22rem; }

/* ---- header bar: wordmark left, counter right, rule beneath -------------- */
.webform-share-page-body .wf-headbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .6rem;
}
.webform-share-page-body .wf-headbar .wf-count {
  margin: 0;
  max-width: none;
  color: var(--wf-muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ---- BEM variant of the fieldset wrapper --------------------------------
   Some forms render `.fieldset__wrapper` (double underscore) instead of
   `.fieldset-wrapper`. The theme gives that variant a 24px left margin, which
   indented every field to the right of the header, the section eyebrow and the
   footer note. Mirror the layout rules onto it and drop the stray margin. */
.webform-share-page-body .fieldset__wrapper {
  margin-left: 0 !important;
}

.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.35rem 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
}

.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > * {
  flex: 1 1 calc(50% - .75rem);
  min-width: 0;
  max-width: 100%;
  width: auto !important;
  margin: 0 !important;
}

.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > input[type="hidden"] { display: none; }

.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > .js-webform-type-textarea,
.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > .webform-type-textarea,
.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > *:has(img) { flex-basis: 100%; }

.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper [class*="js-webform-type-"],
.webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper [class*="webform-type-"] {
  margin-top: 0 !important;
}

@media (min-width: 1024px) {
  .webform-share-page-body fieldset:not(.captcha) .fieldset__wrapper > .form-wrapper > * {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

@media (max-width: 640px) {
  .webform-share-page-body fieldset .fieldset__wrapper > .form-wrapper > * { flex-basis: 100%; }
}