/* -- Make the radios container a horizontal flex row (allows wrapping on small screens) -- */
.js-webform-radios.webform-options-display-side-by-side {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem;            /* space between options */
  align-items: center;
}

/* -- Ensure each option doesn't take full width and aligns items horizontally -- */
.js-webform-radios.webform-options-display-side-by-side .form-item {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -- Space between radio input and label, keep label inline -- */
.js-webform-radios.webform-options-display-side-by-side .form-item .form-radio {
  margin-right: 0.4rem !important;
  vertical-align: middle;
}

.js-webform-radios.webform-options-display-side-by-side .form-item label {
  display: inline-block !important;
  white-space: nowrap; /* prevents label from breaking to next line if you want compact items */
  cursor: pointer;
  margin: 0;
}

.grid-x > fieldset {
  flex-basis: 100%;
}

hr {
   border-bottom: 2px solid rgb(0, 91, 130) !important;
}
.color-primary {
  color: rgb(0, 91, 130);
}

.form-type-radio .option {
  text-transform: capitalize !important;
  font-weight: 400 !important;
}

/* Add spacing specifically to radio/checkbox wrappers despite theme override */
fieldset.radios--wrapper,
fieldset.checkboxes--wrapper {
    margin-bottom: 1rem !important;
}