/* ========================================
   DONATION FORM - PROGRESS TRACKER
   ======================================== */

#donations-form .webform-progress {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 10px 0 20px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#donations-form .webform-progress-tracker {
  display: flex;
  width: 100%;
}

#donations-form .webform-progress-tracker .progress-step {
  flex: 1 1 25%;
  min-width: 0;
  text-align: center;
}

#donations-form .webform-progress-tracker .progress-text {
  position: relative;
  margin-top: 12px;
}

#donations-form .webform-progress-tracker .progress-title {
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}


/* ========================================
   DONATION FORM - PANEL SPACING
   ======================================== */

#donations-form .webform-section.form-wrapper--bg-color {
  padding-top: 15px !important;
}

#donations-form .webform-section-title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}


/* ========================================
   DONATION FORM - BACKGROUND LAYOUT
   ======================================== */

/* Establish positioning container */

#donations-form {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
}

/* Place background image behind content */

#donations-form .donation--form--image {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 0;
}

/* Keep donation content above background */

#donations-form .donation--form--title,
#donations-form .webform-section {
  position: relative;
  z-index: 1;
}

/* Remove fixed height from title container */

#donations-form .donation--form--title {
  height: auto !important;
  min-height: 0 !important;
}

/* ========================================
   FULL-WIDTH DONATION BACKGROUND
   ======================================== */

/* Extend donation form to browser edges */

#donations-form {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding-bottom: 60px !important;
  box-sizing: border-box;
}

/* Ensure background image fills the whole area */

#donations-form .donation--form--image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Keep form content above background */

#donations-form .donation--form--title,
#donations-form .webform-section {
  position: relative;
  z-index: 1;
}