.t4s-newsletter-parent > div {
  border: 0 !important;
}

.t4s-newsletter-parent .klaviyo-form {
  --input-border-radius: 0px;
  --input-height: 45px;
  --input-padding: 0;
  --input-font-size: 13px;
  --input-font-family: var(--primary-font);
  --input-color: var(--black);
  --input-placeholder-color: var(--black);
  --input-background: var(--bg-color);
  --input-border: 1px solid var(--black);
  --input-border-color-hover: var(--black);
  --button-background: var(--bg-color);
  --button-background-hover: var(--bg-color);
  --button-disabled-background: var(--bg-color);
  --button-background-image: url('icon-arrow.svg');
  --button-background-image-width: 20px;
  --button-background-image-height: 20px;
  --button-color: var(--white);
  --button-color-hover: var(--white);
  --button-border-radius: 0;
  --button-width: 40px;
  --button-height: 100%;
  --button-padding: 0;
  --button-font-family: var(--primary-font);
  --button-font-size: 0;
  --button-font-weight: 400;
  --button-separation: 0;
  --success-font-family: var(--primary-font);
  --success-color: var(--black);
  --success-font-weight: 700;
  --success-font-size: var(--text-fs);
  --success-line-height: normal;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background-color: transparent !important;

  > .needsclick {
    min-height: 0 !important;
  }

  [data-testid="form-row"] {
    position: relative !important;
  }

  [data-testid="form-component"] {
    padding: 0 !important;

    &:last-child {
      &:has(button[type="button"]) {
        margin-left: var(--button-separation) !important;
      }

      &:not(:has(button[type="button"])) * {
        font-family: var(--success-font-family) !important;
        font-weight: var(--success-font-weight) !important;
        font-size: var(--success-font-size) !important;
        line-height: var(--success-line-height) !important;
        color: var(--success-color) !important;
        text-align: left !important;
      }
    }

    button[type="button"] {
      -webkit-tap-highlight-color: transparent;
      font-family: var(--button-font-family) !important;
      font-size: var(--button-font-size) !important;
      font-weight: var(--button-font-weight) !important;
      width: var(--button-width) !important;
      height: var(--button-height) !important;
      background-color: var(--button-background) !important;
      border-radius: var(--button-border-radius) !important;
      border: 0 !important;
      border-bottom: var(--input-border) !important;
      padding: 0 !important;
      transition: 0.15s !important;

      @media (hover: hover) {
        &:hover {
          background-color: var(--button-background-hover) !important;
        }
      }

      &:active {
        background-color: var(--button-background-hover) !important;
      }

      &:not(.klaviyo-spinner)::after,
      &.klaviyo-spinner::after {
        content: '';
        width: var(--button-background-image-width);
        height: var(--button-background-image-height);
        background-image: var(--button-background-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 3px;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-sizing: initial !important;
        margin: 0 !important;
      }

      &.klaviyo-spinner {
        font-size: var(--button-font-size) !important;

        /* &::after {
          content: none !important;
        } */
      }

      &[disabled] {
        background-color: var(--button-background) !important;
      }
    }
  }

  input[type="email"] {
    -webkit-tap-highlight-color: transparent;
    height: var(--input-height) !important;
    background-color: var(--input-background) !important;
    border-radius: var(--input-border-radius) !important;
    font-weight: 400 !important;
    font-family: var(--input-font-family) !important;
    font-size: var(--input-font-size) !important;
    color: var(--input-color) !important;
    padding: var(--input-padding) !important;
    border: 0 !important;
    border-bottom: var(--input-border) !important;
    letter-spacing: 0 !important;

    &.needsclick:hover {
      border-color: var(--input-border-color-hover) !important;
    }

    &:focus,
    &:focus-visible {
      outline: none !important;
    }

    &::placeholder {
      font-family: var(--input-font-family) !important;
      font-size: var(--input-font-size) !important;
      color: var(--input-placeholder-color) !important;
      letter-spacing: 0 !important;
    }

    &:-internal-autofill-selected,
    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus, 
    &:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 50px var(--input-background) inset;
      -webkit-text-fill-color: var(--input-color) !important;
    }

    @media (max-width: 767px) {
      text-align: center !important;
    }
  }
}