/*--------------------------------------------------------------
  17. Newsletter
----------------------------------------------------------------*/
.cs_newsletter.cs_style_1 {
  .cs_newsletter_icon {
    height: 60px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
  }
  .cs_newsletter_form {
    max-width: 636px;
    margin-left: auto;
    margin-right: auto;
  }
  .cs_newsletter_input {
    width: 100%;
    border: 1px solid var(--ternary);
    height: 55px;
    padding: 5px 185px 5px 20px;
    outline: none;
    background-color: transparent;
    @media (max-width: 575px) {
      padding: 5px 160px 5px 15px;
    }
    &:focus {
      border-color: var(--accent);
    }
  }
  .cs_btn.cs_style_2 {
    padding: 10px 25px;
    background-color: transparent;
    position: absolute;
    right: 0;
    height: 55px;
    border: none;
    @media (max-width: 575px) {
      padding: 10px 12px;
      gap: 5px;
    }
    &:hover {
      color: var(--accent);
    }
    &::before {
      content: '';
      position: absolute;
      height: 27px;
      width: 1px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--secondary);
    }
  }
  .cs_newsletter_subtitle {
    margin-top: 21px;
  }
  &.cs_color_1,
  &.cs_color_2 {
    .cs_btn.cs_style_2 {
      color: #fff;
      padding: 10px 20px;
      &:hover {
        color: var(--accent);
      }
      @media (max-width: 575px) {
        padding: 10px 12px;
        gap: 5px;
      }
    }
    .cs_newsletter_input {
      color: #fff;
    }
  }
  &.cs_color_2 {
    .cs_newsletter_input {
      background: rgba(27, 27, 27, 0.5);
      backdrop-filter: blur(10px);
      &::placeholder {
        color: rgba(255, 255, 255, 0.75);
      }

      &::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.75);
      }
    }
  }
  &.cs_color_3 {
    .cs_accent_bg {
      background-color: var(--primary);
    }
    h2,
    .cs_btn.cs_style_2 {
      color: #fff;
      &::before {
        background-color: #fff;
      }
    }
    .cs_newsletter_input {
      color: #fff;
      &::placeholder {
        color: #fff;
      }

      &::-ms-input-placeholder {
        color: #fff;
      }
      &:focus {
        border-color: #fff;
      }
    }
  }
}