@import "../../vars";
@import "../../mixins";


.modal-parts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1030px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.24);
  border-radius: 10px;
  position: absolute;
  top: 15%;
  left: 20%;
  margin: 0 auto;
  z-index: 101;

  &__hidden {
      display: none;
    }

  &__close {
    position: relative;
    cursor: pointer;

    &:after {
      position: absolute;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_314_26000)'%3E%3Cpath d='M4 40L0 36L16 20L0 4L4 0L20 16L36 0L40 4L24 20L40 36L36 40L20 24L4 40Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_314_26000'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: cover;
      width: 40px;
      height: 40px;
      top: -42px;
      right: -38px;
    }
  }
}

  .modal-parts-content {
    padding: 40px 37px 40px 65px;
    color: $vmainGrey;
    

    &__title {
      font-weight: 700;
      font-size: 48px;
      line-height: 100%;
    }
  }

    .modal-parts-model {
      margin-top: 7px;
      font-size: 16px;
      line-height: 22px;

      &__link {
        color: $vactiveOrange;
      }
    }

    .modal-parts-content-form {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .parts-content-form-top {
      display: flex;
      margin-bottom: 15px;
    }

    .parts-content-form-top-line-one{
        margin-right: 100px;
        flex-basis: 400px;
        max-height: 268px;
        height: 100%;
     }


    .parts-content-form-top-line-two {
        flex-basis: 430px;
        max-height: 268px;
        height: 100%;
    }

.parts-content-form-bottom {
        max-width: 427px;
        width: 100%;
        display: flex;
        flex-direction: column;

        &__par {
            font-size: 14px;
            line-height: 16px;
            color: #ABB2BF;
            text-align: center;
        }

        &__button {
            @include btn-orange;
            width: 100%;
            height: 60px;
            margin-top: 10px;
            font-size: 16px;

            &:hover {
                @include btn-orange-hover;
                font-size: 16px;
            }
        }
    }
        .form__label {
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
            color: $vmainGrey;
            margin-bottom: 16px;
        
            .required {
              color: #F2994A;
            }

            &-question {
                max-width: 424px;
                width: 100%;
                display: inline-block;
                margin-bottom: 0;
            }

            &-file {
              display: inline-block;
              cursor: pointer;
              width: 400px;
              position: relative;
              border-bottom: 1px solid #ABB2BF;
              padding-bottom: 45px;


              .svg-file {
                position: absolute;
                width: 14px;
                height: 22px;
                top: 38px;
                left: 0;
                cursor: pointer;
              }

              .choose-file {
                position: absolute;
                font-size: 16px;
                line-height: 22px;
                font-weight: 400;
                color: #ABB2BF;
                top: 40px;
                left: 24px;
              }
            }
          }  

            .form-input {
              border: none;
              border-bottom: 1px solid #ABB2BF;
              height: 30px;
              margin-bottom: 32px;
              width: 400px;
              margin-top: 16px;
              font-weight: 400;
              font-size: 16px;
              line-height: 22px;
            }

            ::placeholder {
              /* Chrome, Firefox, Opera, Safari 10.1+ */
              color: #ABB2BF;
              opacity: 1;
            }

            :-ms-input-placeholder {
              /* Internet Explorer 10-11 */
              color: #ABB2BF;
            }

            ::-ms-input-placeholder {
              /* Microsoft Edge */
              color: #ABB2BF;
            }

            #file {
              display: none;
            }

            .form__question {
                resize: none;
                height: 108px;
                margin-bottom: 29px;
            } 
     

      .modal-checkboxes {
        align-self: start;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: -0.01em;
        color: #636B78;
        margin-bottom: 31px;
        height: 16px;
        display: flex;
        align-items: center;

        &__title {
          margin-right: 20px;
        }

        .label-checkbox {
          display: block;
          position: relative;
          cursor: pointer;
          padding-left: 23px;
          padding-right: 20px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;

          .input-checkbox {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
          }

          .checkmark {
            position: absolute;
            top: 1px;
            left: 0;
            height: 14px;
            width: 14px;
            background-color: #fff;
            border: 1px solid #ABB2BF;
            border-radius: 3px;
          }
        }

       .label-checkbox input:checked ~ .checkmark {
         background-color: #ABB2BF;
         background: #ABB2BF;
       }
      }

    
  
 


.modal-parts__overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 59, 73, 0.8);
  z-index: 100;
  overflow: hidden;

  &__hidden {
    display: none;
  }
}



//стили orderPartsModel.html
.order-parts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1030px;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    position: absolute;
    top: 15%;
    left: 20%;
    margin: 0 auto;
    z-index: 101;

    .modal-parts__close {
        position: relative;
        cursor: pointer;
    
        &:after {
          position: absolute;
          content: "";
          background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_314_26000)'%3E%3Cpath d='M4 40L0 36L16 20L0 4L4 0L20 16L36 0L40 4L24 20L40 36L36 40L20 24L4 40Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_314_26000'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-size: cover;
          width: 40px;
          height: 40px;
          top: -42px;
          right: -38px;
        }
      }
}

.order-parts-overlay {
  position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 59, 73, 0.8);
    z-index: 100;
    overflow: hidden;
}