/* ---- WS-A baseline (principled, token-based, site-agnostic) ---- */
/* Centre the form column inside its block region: the source centres the form
   (Webflow .container-large.center { display:flex; justify-content:center } +
   .max-width-520). margin-inline:auto on the capped-width form reproduces that
   without depending on any source-specific wrapper class. */
.webform-submission-form { width: 100%; max-width: 44rem; margin-inline: auto; }
.webform-submission-form .form-item,
.webform-submission-form .js-form-item { margin: 0 0 16px; }
.webform-submission-form .webform-section-wrapper { margin: 0; }

/* Labels */
.webform-submission-form label,
.webform-submission-form .form-item label,
.webform-submission-form legend,
.webform-submission-form .fieldset-legend {
  display: block;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-strong, #121212);
  margin: 0 0 6px;
  text-transform: none;
}

/* Text-like inputs + textarea + select. Selectors are CLASS-ONLY (Drupal's own
   webform classes) so they stay specificity (0,2,0) — the extracted source rules
   (same specificity, emitted later) win on source order where the source styled
   the field, while these supply a clean default otherwise. border-radius defaults
   to 0 (the faithful "source did not round its inputs" baseline; a source that
   DOES round has an explicit rule the extraction captures). */
.webform-submission-form .form-text,
.webform-submission-form .form-email,
.webform-submission-form .form-tel,
.webform-submission-form .form-url,
.webform-submission-form .form-number,
.webform-submission-form .form-search,
.webform-submission-form .form-textarea,
.webform-submission-form .form-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 8px 16px;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-text-strong, #121212);
  background-color: transparent;
  border: 1px solid var(--color-border-2, #e5e5e5);
  border-radius: 0;
}
.webform-submission-form .form-textarea {
  min-height: 10rem;
  padding: 16px;
  line-height: 24px;
  resize: vertical;
}
.webform-submission-form .form-text::placeholder,
.webform-submission-form .form-email::placeholder,
.webform-submission-form .form-tel::placeholder,
.webform-submission-form .form-textarea::placeholder { color: var(--color-text-muted, #737373); }
.webform-submission-form .form-text:focus,
.webform-submission-form .form-email:focus,
.webform-submission-form .form-tel:focus,
.webform-submission-form .form-textarea:focus,
.webform-submission-form .form-select:focus { outline: 0; border-color: var(--color-text-strong, #121212); }

/* Native file input */
.webform-submission-form input[type="file"],
.webform-submission-form .form-managed-file input { width: 100%; font-family: var(--font-family-body); font-size: 16px; }

/* Fieldset reset — strip the browser's default groove border/padding and force
   full width so a radio/checkbox group that sits inside a flex grouping container
   does not shrink to content (which would wrap the options to one per line). */
.webform-submission-form fieldset {
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.webform-submission-form fieldset > legend { width: auto; padding: 0; }

/* Radios — native input drawn as a circle (no Webflow JS) + inline option layout */
.webform-submission-form .webform-options-display-one-column,
.webform-submission-form .webform-options-display-buttons,
.webform-submission-form fieldset .fieldset-wrapper { display: flex; flex-wrap: wrap; gap: 8px 40px; width: 100%; }
.webform-submission-form .webform-options-display-one-column .form-item,
.webform-submission-form fieldset .form-item { margin: 0; display: flex; flex-direction: row; align-items: center; }
.webform-submission-form input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: .875rem;
  height: .875rem;
  margin: 0 .5rem 0 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.webform-submission-form input[type="radio"]:checked { border-width: .25rem; border-color: var(--color-accent, #3898ec); }
.webform-submission-form input[type="radio"]:focus { box-shadow: 0 0 .25rem 0 var(--color-accent, #3898ec); outline: 0; }
.webform-submission-form .form-type-radio label,
.webform-submission-form input[type="radio"] + label { margin: 0; font-weight: 400; cursor: pointer; }

/* Checkbox / consent — inline with its label */
.webform-submission-form .form-type-checkbox,
.webform-submission-form .js-form-type-checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
.webform-submission-form input[type="checkbox"] { margin: 4px 0 0; flex: none; }
.webform-submission-form .form-item a { color: var(--color-accent, #ed1c24); text-decoration: underline; }

/* Submit — principled primary button (token values are per-site) */
.webform-submission-form .form-submit,
.webform-submission-form .webform-button--submit,
.webform-submission-form button[type="submit"],
.webform-submission-form input[type="submit"],
.webform-submission-form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  min-width: 180px;
  padding: 16px 40px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-transform: capitalize;
  color: var(--color-white, #fff);
  background-color: var(--color-text-strong, #121212);
  border-radius: var(--radius-sm, 0);
  transition: background-color .2s;
}
.webform-submission-form .form-submit:hover,
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form button[type="submit"]:hover,
.webform-submission-form input[type="submit"]:hover { background-color: var(--color-accent, #ed1c24); color: var(--color-white, #fff); }