/* Target the entire webform container (the form element itself) */
.webform-submission-zi-go-zebra-contact-form-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 */
}

/* Make sure all form labels are white and visible */
.webform-submission-zi-go-zebra-contact-form-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;
}

/* Placeholder text */
.webform-submission-zi-go-zebra-contact-form-form input::placeholder,
.webform-submission-zi-go-zebra-contact-form-form textarea::placeholder {
  color: #888888;
  font-size: 1.3rem;
  opacity: 1; /* Ensures browsers don't apply default transparency */
}

/* Submission confirmation success message styling */
.webform-submission-zi-go-zebra-contact-form-form .confirmation-success {
  text-align: center;
  padding: 2rem 1rem;
}
.webform-submission-zi-go-zebra-contact-form-form .confirmation-success h2 {
  font-size: 3em;
  font-weight: 550;
  margin-top: 1em;
  margin-bottom: 1em;
}
.webform-submission-zi-go-zebra-contact-form-form .confirmation-success p {
  font-size: 1.1em;
  margin-bottom: 1em;
}

/* Center the confirmation back button */
.webform-submission-zi-go-zebra-contact-form-form .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-submission-zi-go-zebra-contact-form-form .webform-flexbox {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* - Target the inner wrappers that usually cause the gap */
.webform-submission-zi-go-zebra-contact-form .webform-flexbox .webform-flex--container,
.webform-submission-zi-go-zebra-contact-form .webform-flexbox .form-item,
.webform-submission-zi-go-zebra-contact-form .webform-flexbox .js-form-item,
.webform-submission-zi-go-zebra-contact-form .webform-flexbox .form-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* - Extra safety for any nested flex containers */
.webform-submission-zi-go-zebra-contact-form-form .webform-flexbox .webform-flex--container > .form-item,
.webform-submission-zi-go-zebra-contact-form-form .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 */
.webform-submission-zi-go-zebra-contact-form-form #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 */
.webform-submission-zi-go-zebra-contact-form-form #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 */
.webform-submission-zi-go-zebra-contact-form-form .form-item-email-contact,
.webform-submission-zi-go-zebra-contact-form-form .form-item-company-name {
  margin-bottom: 20px !important;
}




/* Form container – keep desktop padding, shrink it on tablet + phone */
.webform-submission-zi-go-zebra-contact-form-form {
  background-color: #34384B;
  color: #ffffff;
  padding: 60px 70px 100px 70px;
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

/* Submit button base styles */
.webform-submission-zi-go-zebra-contact-form-form .form-submit,
.webform-submission-zi-go-zebra-contact-form-form .webform-button--submit,
.webform-submission-zi-go-zebra-contact-form-form input[type="submit"],
.webform-submission-zi-go-zebra-contact-form-form button[type="submit"] {
  background-color: #f42424 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #f42424 !important;
  border-radius: 0 !important;
  padding: 15px 15px !important;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* Hover / focus */
.webform-submission-zi-go-zebra-contact-form-form .form-submit:hover,
.webform-submission-zi-go-zebra-contact-form-form .webform-button--submit:hover,
.webform-submission-zi-go-zebra-contact-form-form input[type="submit"]:hover,
.webform-submission-zi-go-zebra-contact-form-form button[type="submit"]:hover,
.webform-submission-zi-go-zebra-contact-form-form .form-submit:focus,
.webform-submission-zi-go-zebra-contact-form-form .webform-button--submit:focus,
.webform-submission-zi-go-zebra-contact-form-form input[type="submit"]:focus,
.webform-submission-zi-go-zebra-contact-form-form button[type="submit"]:focus {
  background-color: #cc0000 !important;
  color: #ffffff !important;
  border-color: #e02323 !important;
  border-radius: 0 !important;
}

/* ===== Tablets + phones (up to ~1024px) ===== */
@media (max-width: 1024px) {
  .webform-submission-zi-go-zebra-contact-form-form {
    padding: 40px 30px 60px 30px !important;   /* reduced horizontal padding */
  }

  .webform-submission-zi-go-zebra-contact-form-form .form-submit,
  .webform-submission-zi-go-zebra-contact-form-form .webform-button--submit,
  .webform-submission-zi-go-zebra-contact-form-form input[type="submit"],
  .webform-submission-zi-go-zebra-contact-form-form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 15px !important;
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== Phones only (extra tight) ===== */
@media (max-width: 767px) {
  .webform-submission-zi-go-zebra-contact-form-form {
    padding: 30px 16px 50px 16px !important;
  }

  .webform-submission-zi-go-zebra-contact-form-form .form-submit,
  .webform-submission-zi-go-zebra-contact-form-form .webform-button--submit,
  .webform-submission-zi-go-zebra-contact-form-form input[type="submit"],
  .webform-submission-zi-go-zebra-contact-form-form button[type="submit"] {
    padding: 10px 10px !important;
  }
}