Conflicting CSS making form design wonky - help appreciated!

Hi all,

Re: this is in regards to a page on my site https://www.peoplethebrand.com/headline-formulas..

Having 2 issues: 

One:

My lightbox form is the wrong color. See attached image.

I'm trying to make it so that the lightbox form is:

background: white

form fields: white

background border: black

form fields border: black

font: black

However a squarespace agent said that I have conflicting custom css code that's making it this way.

I'm pasting the code here for your review: how should I change it to get the result I'm looking for?

/* Summary Title Link Font and Size */
.summary-title-link {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; 
    font-weight: 400; /* Adjust the font weight as needed */
}

/* Summary Metadata Font and Size */
.summary-metadata-item {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; /* Adjust the size as needed */
    font-style: italic; /* Italicize the metadata */
}

/* Adjusting Category Font Size */
.summary-metadata-item a {
    font-size: 18px; /* Adjust the size as needed */
}

/* Excerpt Copy Font and Size (using Georgia) */
.summary-excerpt {
    font-family: 'Georgia', serif;
    font-size: 16px; /* Adjust the size as needed */
    line-height: 1.5; /* Adjust the line height as needed */
}
body[class*="type-blog"].view-item .section-border, body[class*="type-blog"].view-item .section-background {
    background-color: white !important;
}
body[class*="type-blog"].view-item section a {
    color: #574EF5 !important;
}
.sqs-block-content .lightbox-handle {
 background: #ffffff !important;
}
.sqs-block-content .lightbox-handle:hover {
 color: #fff;
 font-weight: 400;
 background: #B1C7B4;
}
.lightbox-handle {
  color: #000; /* Set initial text color */
  background-color: transparent; /* Set initial background color */
  &:hover {
    color: #fff !important; /* Change text color to white on hover */
    background-color: #000 !important; /* Change background color to black on hover */
  }
}

.lightbox-content {
  background: #ff3cc7 !important;
  .form-button-wrapper .form-submit-button {
    color: #fff; /* Set initial text color */
    background-color: transparent; /* Set initial background color */
    &:hover {
      color: #000 !important; /* Change text color to black on hover */
      background-color: #fff !important; /* Change background color to white on hover */
    }
  }
}

Issue two:

On mobile view the form lightbox moves to top of screenview and spacing looks wonky. See pic. Any way to bring the form down to center of screenview? 

Thanks in advance!
Ashley

You can use this code to Custom CSS box

.lightbox-content.lightbox-form-content-background {
    background-color: #fff !important;
}