@import "vars";

body{
  background: #13abd1;
}

#content{
  height:100%;
  position: relative;
}
.left-bg{
  background: url("../img/flow-left.png") bottom right no-repeat;
  background-size: contain;
  width: 63vh;
  height: 85%;
  position: absolute;
  left: 50%;
  top:10px;
  z-index:1;
}
.right-bg{
  background: url("../img/flow-right.png") bottom right no-repeat;
  background-size: contain;
  width: 63vh;
  height: 85%;
  position: absolute;
  right: 50%;
  top:0;
  z-index:1;
}

.phone-block {
  background: url("../img/phone.png")  no-repeat 50% 50%;
  background-size: auto 100%;
  height: 85%;
  margin:0 auto;
  position: relative;
  top:70px;
  width: 47vh;
  z-index:2;

  form {

    .phone-top {

      .message-left {
        background-color: #13abd1;
        color: white;
        min-width:11vw;
        max-width: 12vw;
        border-radius: 8px;
        position: absolute;
        top: 9vh;
        left: 8vh;
        padding:10px;
        line-height: 1vw;

        &:before{
          content:'';
          width: 0;
          height: 0;
          border-bottom: 15px solid #13abd1;
          border-left: 15px solid transparent;
          position: absolute;
          bottom:0;
          left:-10px;
          line-height: normal;
        }

        .smile1{
          background: url("../img/smile1.png") bottom center no-repeat;
          width:1vw;
          height:1vw;
          display: inline-block;
          background-size: cover;
          line-height: 1vw;
        }
        .smile2 {
          background: url("../img/smile2.png") bottom center no-repeat;
          width:1vw;
          height:1vw;
          display: inline-block;
          background-size: cover;
          line-height: 1vw;
        }

        &.js-second-message{
          top:35vw;
          opacity: 0;
        }

        p {
          font-size:0.8vw;
        }
      }

      .message-right {
        background-color: #f2f2f2;
        color: #606060;
        min-width:11vw;
        max-width: 12vw;
        border-radius: 8px;
        position: absolute;
        top: 82vh;
        right: 8vh;
        padding:10px;
        line-height: 1vw;
        border: 1px solid #d9d9d9;
        z-index:4;
        opacity: 0;
        font-size:0.8vw;

        &:before{
          content:'';
          width: 0;
          height: 0;
          border-bottom: 15px solid #f2f2f2;
          border-right: 11px solid transparent;
          position: absolute;
          bottom: 0px;
          right: -7px;
          line-height: normal;
          z-index:3;
        }
        &:after{
          content:'';
          width: 0;
          height: 0;
          border-bottom: 14px solid #d9d9d9;
          border-right: 13px solid transparent;
          position: absolute;
          bottom: -1px;
          right: -10px;
          line-height: normal;
          z-index:2;
        }
      }

      .phone-input {
        position: absolute;
        bottom: 10vh;
        width: 65%;
        left: 17.5%;
        background-color: #f2f2f2;
        resize: none;
        border: none;
        border-top: 2px solid #d9d9d9;
        font-family: "ProximaNovaRegular", sans-serif;
        font-size: 0.9vw;
        padding: 5%;
        height: 12vh;
      }

      .phone-button {
        position: absolute;
        bottom:4vh;
        width: 60%;
        left: 20%;
        border-radius: 3px;
        background: #e41056;
        border: 1px solid #e41056;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: white;
        cursor: pointer;

        &:disabled{
          background-color: #9a9a9a;
          border-color: #9a9a9a;
          cursor: default;
        }
      }
    }
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 667px) {

  .phone-block{
    background: white;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .phone-block form .phone-top .message-left{
    min-width: 55%;
    max-width: 60%;
    left: 6%;
    top: 5%;
    p{
      font-size:3vw;
      line-height: normal;
      .smile1{
        width: 3vw;
        height: 3vw;
      }
      .smile2{
        width: 3vw;
        height: 3vw;
      }
    }
  }
  .phone-block form .phone-top .message-right{
    min-width: 55%;
    max-width: 60%;
    font-size:3vw;
    line-height: normal;
    right: 17%;
    top:100vh;
  }
  .phone-block form .phone-top .message-left.js-second-message{
    top:100vh;
  }
  .phone-block form .phone-top .phone-input{
    font-size:3vw;
    line-height: normal;
    bottom: 24%;
    width:100%;
    left:0;
  }
  .phone-block form .phone-top .phone-button{
    bottom: 15%;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 812px) and (max-device-height : 414px) {
  body {
    background: #13abd1;
    &:before {
      content: 'Пожалуйста, поверните ваш телефон';
      position: absolute;
      top: 30%;
      color:white;
      left:20%;
      font-size:22px;
    }
    & > * {
      display: none;
    }
  }
  #content{
    display:none !important;
  }
  #menu, .js-mobile-menu{
    display:none !important;
  }
}