.form-item-civicrm-1-contribution-1-contribution-total-amount,
#wf-crm-billing-items,
#edit-contact-primary-address,
#edit-civicrm-1-contact-1-cg78-fieldset {
    visibility: hidden;
    position: absolute;
    z-index:-1;
}

/* Make the radio group flex‐wrap */
.webform-submission-form #edit-contribution-amount .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* Each option is a flex “button” */
.webform-submission-form #edit-contribution-amount .form-radios .js-form-item {
  flex: 1 1 30% !important;
}

/* Force the last (“Other amount”) to full width */
.webform-submission-form #edit-contribution-amount .form-radios .js-form-item:nth-last-child(1) {
  flex: 1 1 100% !important;
}

/* Hide the native radio inputs */
.webform-submission-form #edit-contribution-amount input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Style the labels as buttons */
.webform-submission-form #edit-contribution-amount label.option {
  display: block !important;
  text-align: center !important;
  padding: 0.75rem !important;
  border: 2px solid #19413f !important;
  border-radius: 0.375rem !important;
  background-color: #f8f9fa !important;
  color: #19413f !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s !important;
}

/* Checked (active) & hover states */
.webform-submission-form #edit-contribution-amount input[type="radio"]:checked + label.option,
.webform-submission-form #edit-contribution-amount label.option:hover {
  background-color: #19413f !important;
  color: #00c982 !important;
}

/* make the “Other amount” field + prefix sit inline and only as wide as needed */

/* 3) Keep the pound-sign prefix tight to the input */
.webform-radios-other-input .field-prefix {
  margin-right: 0.4em;
  white-space: nowrap;
}

/* 4) Prevent the input itself from stretching full width */
.webform-radios-other-input input.form-control {
  width: auto !important;
  min-width: 5em;
}

/* centre & shrink the “Other amount” field */
.js-webform-radios-other-input {
  width: auto           !important;
  margin: 1em auto      !important;
  text-align: left;
}

/* centre the Submit button */
.form-actions.js-form-wrapper,
.webform-actions {
  text-align: center    !important;
}

/* make sure the button itself stays inline */
.form-actions .webform-button--submit,
.webform-actions .webform-button--submit {
  display: inline-block !important;
}

/* 1) centre the Other-amount container (Webform still toggles its display) */
.js-webform-radios-other-input {
  text-align: center !important;
  margin: 1em auto      !important;
}

/* 2) make prefix and input sit side by side */
.webform-radios-other-input .field-prefix,
.webform-radios-other-input input.form-control {
  display: inline-block    !important;
  vertical-align: middle   !important;
  font-size: 1.7rem;
}

/* 3) tighten prefix/input spacing & sizing */
.webform-radios-other-input .field-prefix {
  margin-right: 0.4em      !important;
  white-space: nowrap      !important;
}
.webform-radios-other-input input.form-control {
  width: auto              !important;
  min-width: 5em           !important;
}

/* Gift Aid as buttons */
/* —————————————————————————————————————————————— 
   Gift Aid (“UK Tax Payer?”) radios → buttons 
   Targeting the wrapper: #edit-civicrm-1-contact-1-cg78-custom-418--wrapper 
—————————————————————————————————————————————— */

/* 1) make the inner radiogroup a flex container */
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* 2) let each label “button” flex-grow as needed */
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper .form-radios .js-form-item {
  flex: 1 1 auto !important;
}

/* 3) hide the native radio inputs */
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* 4) style the labels as toggles */
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper label.option {
  display: block !important;
  text-align: center !important;
  padding: 0.75rem !important;
  border: 2px solid #19413f !important;
  border-radius: 0.375rem !important;
  background-color: #f8f9fa !important;
  color: #19413f !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s !important;
}

/* 5) checked & hover states */
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper input[type="radio"]:checked + label.option,
#edit-civicrm-1-contact-1-cg78-custom-418--wrapper label.option:hover {
  background-color: #19413f !important;
  color: #00c982 !important;
}