/* Target the entire webform container (the form element itself) */
.webform-submission-form {
  background-color: #34384B;          /* background */
  color: #ffffff;                     /* default text color white - fallback */
  padding: 60px 70px 100px 70px;      /* some breathing room inside */
  border-radius: 0px;                 /* round the corners if you want */
  margin-bottom:3rem;                 /* a little room at the bottom of the form */
}

/* Make sure all form labels are white and visible */
.webform-submission-form label {
  color: #ffffff !important;
}

/* Hide the webform title */
.field--name-field-main-content 
  .field-collection-view .webform 
  .field--name-field-content-title h2 {
  display: none;
}

/* Submission confirmation success message styling */
.confirmation-success {
  text-align: center;
  padding: 2rem 1rem;
}
.confirmation-success h2 {
  font-size: 3em;
  font-weight: 550;
  margin-top: 1em;
  margin-bottom: 1em;
}
.confirmation-success p {
  font-size: 1.1em;
  margin-bottom: 1em;
}

/* Center the confirmation back button */
.webform-confirmation__back {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Remmove space above flexbox row */
/* - Remove extra top space from ALL flexbox rows on the form */
.webform-flexbox,
.webform-submission-form .webform-flexbox {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* - Target the inner wrappers that usually cause the gap */
.webform-flexbox .webform-flex--container,
.webform-flexbox .form-item,
.webform-flexbox .js-form-item,
.webform-flexbox .form-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* - Extra safety for any nested flex containers */
.webform-flexbox .webform-flex--container > .form-item,
.webform-flexbox .webform-flex--container > .js-form-item {
  margin-top: 0 !important;
}

/* Fix the gap when form is shortened */
/* - Remove the Flexbox wrappers from the layout ONLY if they are empty */
/* -- This targets the Full Name row */
#edit-full-name-flexbox:has(.webform-flex[style*="display: none"]):has(.webform-flex:nth-child(2)[style*="display: none"]) {
  display: none !important;
  margin: 0 !important;
}

/* -- This targets the City/State row */
#edit-city-state-flexbox:has(.webform-flex[style*="display: none"]):has(.webform-flex:nth-child(2)[style*="display: none"]) {
  display: none !important;
  margin: 0 !important;
}

/* - Standardize spacing for visible fields */
/* -- This ensures that when Email is followed by Company (or Comments), the gap is normal */
.form-item-email-contact, 
.form-item-company-name {
  margin-bottom: 20px !important;
}
