@import "../libs/include-media.scss";
@import "../variables.scss";

.modal {
  position: fixed;
  top: calc(50vh - 300px);
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  height: 600px;
  max-width: 1000px;
  background-color: $white;
  z-index: 102;
  border-radius: 150px;
  border-top-right-radius: unset;

  @include media("<=tablet") {
    // flex-direction: column-reverse;
    top: 0;
    width: 100%;
    max-height: 100%;
    height: 100vh;
    border-radius: unset;
  }

  .contentWrapper {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;

    @include media("<=tablet") {
      width: 100%;
    }

    .contentBox {
      display: flex;
      flex-direction: column;
      width: 80%;

      @include media("<=tablet") {
        width: 85%;
        max-width: 350px;
      }

      h1 {
        color: $purple;
        font-size: 56px;
        font-weight: 900;
        line-height: 0.83;
        letter-spacing: 0.82px;
        margin: 0;

        @include media("<=tablet") {
          font-size: 40px;
          margin-top: 24px;
          white-space: unset;
        }
      }
      h2 {
        color: $lightBlue;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: 0.35px;

        @include media("<=tablet") {
          font-size: 20px;
        }
      }
      .linksWrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        // a img {
        //   display: block;
        // }
        a img.mobile {
          display: none;
        }

        @include media("<=tablet") {
          flex-direction: column;

          a img {
            display: none;
          }
          a img.mobile {
            display: block;
            margin-bottom: 16px;
          }
        }
      }
      p {
        font-size: 18px;
        line-height: 1.17;
        letter-spacing: 0.25px;
      }

      form {
        input {
          outline: none;
          border: none;
          border-bottom: 1px solid #ccc;
          color: $purple;
          width: 100%;

          &::placeholder {
            color: $purple;
          }
        }
        .errorMessage {
          color: red;
          &.hidden {
            visibility: hidden;
          }
        }
        button {
          margin-top: 12px;
          width: 100%;
        }

        .sendedMessage {
          color: $green;
          margin-top: 16px !important;
          font-size: 20px !important;
          font-weight: normal;

          &.failed {
            color: red;
          }
        }
      }

      .spinnerWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        width: 100%;
        & > span {
          margin: 0;
        }
      }
    }
  }

  .svgWrapper {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 100;

    @include media("<=tablet") {
      top: 30px;
      left: 30px;

      svg path {
        fill: black !important;
      }
    }
  }

  .imageWrapper {
    position: relative;
    width: 55%;

    @include media("<=tablet") {
      display: none;
    }

    img {
      width: 100%;
      height: 100%;
      // object-fit: cover;
      border-top-left-radius: 150px;
      border-bottom-left-radius: 150px;

      @include media("<=tablet") {
        border-top-left-radius: unset;
        border-bottom-left-radius: 45px;
      }
    }
  }
}