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


.modal-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  overflow: auto;
}


.modal-card-wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 100px auto;
  background-color: #fff;
}

    // карточка товара модальное окно
.modal-card {
  background-color: #F2F2F2;
  padding: 60px;

  &__img {
    max-width: 762px;
    width: 100%;
    max-height: 353px;
    height: 100%;
  }
}

.modal-card-container {
        display: flex;
}

.modal-card-info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;

  &__title {
    font-weight: 600;
    font-size: 36px;
    line-height: 42px;
    color: $vmainGrey;
  }

  &__btn {
    margin-top: 150px;
    align-self: flex-end;
    @include btn-orange;
    padding: 16px 60px;

    &:hover {
        @include btn-orange-hover;
    }
  }
}

  .modal-card-info-links {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.01em;
    text-decoration-line: underline;
    color: #ABB2BF;

    > :not(:first-child) {
      margin-top: 8px;
    }
  }

       
    
  
    // раздел с табами
    .modal-spec {
      background-color: #fff;
      padding-top: 40px;

      .modal-spec__tabs {
        display: flex;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.01em;
        color: $vmainGrey;

        .modal-spec__tab {
          margin-right: 48px;
          cursor: pointer;
        }

        .active {
          color: $vactiveOrange;
        }
      }

      .modal-spec__tabs-content {
        // таб описание
        .modal-spec__tabs-item {
          margin-top: 50px;
          display: none;
          
          &_active {
            display: block;
          }

         .description {
           font-size: 16px;
           line-height: 22px;
           letter-spacing: -0.01em;
           color: $vmainGrey;

           &__title {
             font-weight: 600;
             font-size: 16px;
             line-height: 20px;
             letter-spacing: -0.01em;
             color: $vmainGrey;
             margin-bottom: 12px;
           }

           &__par {
             margin-bottom: 32px;

             .par__item {
               list-style-type: circle;
               margin-left: 20px;
             }
           }

           &__par-1 {
             margin-bottom: 12px;
           }

           &__par-3 {
             font-weight: 600;
             font-size: 16px;
             line-height: 20px;
             color: $vactiveOrange;
             background-color: #F7F7F9;
             border-radius: 10px;

             &_text {
               padding: 24px;
             }
           }
         }
        }
        // таб характеристики
       .modal-spec__tab-2 {

        .modal-spec-tab-2-table-container {
            max-height: 560px;
            height: 100%;
            max-width: 1270px;
            width: 100%;
            overflow: auto;
            margin-top: 60px;
        
            .modal-spec-tab-2-table {
              width: auto;
              white-space: nowrap;
              border-collapse: collapse;
              color: $vmainGrey;
        
              .spec-table_line {
                height: 63px;
                font-weight: 600;
                font-size: 15.4186px;
                line-height: 21px;
        
                .spec-table__title {
                  font-weight: 600;
                  font-size: 15.4186px;
                  line-height: 21px;
                  text-align: center;
                  width: 170px;
                }
        
                .title-main {
                  width: 250px;
                  text-align: left;
                  padding-left: 15px;
                }
        
                .spec-table__info {
                  text-align: center;
                }
              }
        
              .line-two {
                color: #ABB2BF;
                font-weight: 600;
                font-size: 15.4186px;
                line-height: 21px;
                text-align: left;
        
                >* {
                  padding-left: 15px;
                }
        
              }
        
              .line-color {
                background: #F7F7F9;
                border-radius: 9.63664px;
              }
        
              thead th:hover {
                background-color: #E7EAEE;
                border-radius: 9.63664px;
                ;
                cursor: pointer;
                color: #F2994A;
              }
            }
          }

       }
      }
    }

    // недавно просматривали
    .modal-viewed {
      padding-top: 60px;

      &__container {
        color: $vmainGrey;
        position: relative;

        .modal-viewed__title {
          font-weight: 600;
          font-size: 36px;
          line-height: 42px;
        }

       .modal-viewed__item {
         margin-top: 48px;

        &-info {
            margin-left: 12px;
            max-width: 291px;
            width: 100%;
        
            .modal-viewed__item-title {
              font-weight: 600;
              font-size: 14.6087px;
              line-height: 20px;
              margin-top: 18px;
              max-width: 176px;
              width: 100%;
            }
        
            .modal-viewed__item-bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 17px;
        
              .modal-viewed__item-price {
                font-weight: 600;
                font-size: 21.913px;
                line-height: 26px;
              }
        
              .modal-viewed__item-btn {
                @include btn-orange;
                width: 108px;
                height: 34px;
        
                &:hover {
                  @include btn-orange-hover;
                }
        
              }
            }
          }
       }

           .swiper-button-next_modal-viewed,
           .swiper-button-prev_modal-viewed {
             position: absolute;
           }

           .swiper-button-next_modal-viewed {
             top: 40px;
             right: 20px;
             width: 20px;
             height: 20px;
           }

           .swiper-button-prev_modal-viewed {
             top: 40px;
             left: 1234px;
             width: 20px;
             height: 20px;
           }
      }
    }

    .modal-form {
      margin-top: 60px;
      position: relative;
      height: 738px;

      .modal-form__bc {
          position: absolute;
          background-image: url("../img/product/form-min.png");
          background-repeat: no-repeat;
          background-size: cover;
          top: 0px;
          left: 0;
          width: 50%;
          height: 100%;
        }
      
        .modal-form__container {
          display: flex;
          position: relative;
      
          .modal-form__right {
            height: 738px;
            position: relative;
            z-index: 1;
            color: #fff;

            .to-map {
              font-size: 16px;
              line-height: 24px;
              text-decoration-line: underline;
              color: #F7F7F9;
              margin-top: 50px;
            }
      
            &-title {
              // position: absolute;
              // bottom: 0;
              // left: 0;
              font-weight: 700;
              font-size: 48px;
              line-height: 100%;
              color: #F7F7F9;
              margin-top: 462px;
              max-width: 368px;
              width: 100%;
            }
          }
      
          .modal-form__left {
            transform: translateX(47%);
            width: 50%;
      
            .right__form {
              display: flex;
              flex-direction: column;
              padding-top: 60px;
              max-width: 538px;
              width: 100%;
              max-height: 632px;
              height: 100%;
              margin: 0 auto;
      
              .form__label {
                font-weight: 600;
                font-size: 16px;
                line-height: 22px;
                color: $vmainGrey;
                margin-bottom: 16px;
      
                .required {
                  color: #F2994A;
                }
              }
      
              &-input {
                border: none;
                border-bottom: 1px solid #ABB2BF;
                height: 30px;
                margin-bottom: 32px;
              }
      
              .form__question {
                height: 142px;
              }
      
              &-button {
                @include btn-orange;
                width: 100%;
                height: 60px;
      
                &:hover {
                  @include btn-orange-hover;
                }
              }
            }
          }
        }
    }
 

    .modal-viewed__container [class^="swiper-button-"]::after {
      content: "";
    }