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

    .tabs__wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 29px;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: -0.01em;
      color: $vmainGrey;

      .specification__tabs {
        display: flex;
        position: relative;

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

        .tab-7 {
          position: absolute;
          top: 1px;
          right: -351px;
        }

        .active {
          color: $vactiveOrange;
        }
      }
    }

    .specification__tabs-content {
        // таб описание
      .specification__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: disc;
            margin-left: 20px;
           } 
          }

          &__par-1 {
            margin-bottom: 12px;
            max-width: 973px;
            width: 100%;
          }

          &__par-3 {
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: $vactiveOrange;
            background-color: #F7F7F9;
            border-radius: 10px;
            // max-width: 973px;
            // width: 100%;
         
            &_text {
                padding: 24px;
                max-width: 973px;
                width: 100%;
            }
          }

          &__par-4 {
                max-width: 973px;
                width: 100%;
          }
        }
      }

      // таб характеристики 
      .spec__tab-2 {
        
        .spec-tab-2-table-container {
            max-height: 560px;
            height: 100%;
            max-width: 1270px;
            width: 100%;
            overflow-x: auto;
            overflow-y: auto;
            margin-top: 100px;

          .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;
                min-width: 145px;
                cursor: pointer;

                &.active {
                    background-color: #E7EAEE;
                    border-radius: 9.63664px;  
                    cursor: pointer;
                    color: #F2994A;
                }
              }

              .title-main {
                    min-width: 250px;
                    text-align: left;
                    padding-left: 15px;
              }

              .spec-table__info {
                text-align: center;

                &.active {
                    color: $vactiveOrange;
                }
              }
            }

            .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;
            // }
          }
        }
      }

      // таб образцы изделей
      .spec__tab-3 {
        position: relative;

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

        &__subtitle {
          font-weight: 600;
          font-size: 24px;
          line-height: 28px;
          color: $vMain2;
          margin-top: 26px;
          margin-bottom: 26px;
        }

        .models-wrapper {
          width: 100%;
          overflow: auto;
          margin-bottom: 80px;
        }

        .spec-scrollbar {
            position: absolute;
            bottom: -35px; 
            left: 0;
            width: 100%;
            background-color: #DFE1E7
          }

       .swiper-button-next_models,
       .swiper-button-prev_models {
         position: absolute;
       }
       .swiper-button-prev_models {
        width: 20px;
        height: 20px;
        top: 90px;
        left: 1209px;
       }

       .swiper-button-next_models {
        width: 20px;
        height: 20px;
        top: 90px;
        right: 15px;
       }
    }

   .swiper-slide-models {

       &__img {
           max-width: 428px;
           width: 100%;
           max-height: 228px;
           height: 100%;
       }
   }

      // таб комплектация
      .spec__tab-4 {

        &__title {
          font-weight: 600;
          font-size: 36px;
          line-height: 42px;
          letter-spacing: -0.01em;
          color: #283142;
          margin-top: 48px;
        }

        &__table-container {
          max-width: 1270px;
          width: 100%;
          max-height: 500px;
          height: 100%;
          overflow: auto;
          margin-top: 26px;

          .tab-4__table {
            width: 100%;
            font-weight: 600;
            font-size: 15.4186px;
            line-height: 21px;
            color: $vmainGrey;

            &-line {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 63px;
            
            > td {
              margin-left: 15px;
              margin-right: 58px;
            }
              
            }

            .line-color {
              background: #F7F7F9;
              border-radius: 9.63664px;
            }
          }
        }
      }
      // таб аксессуары
      .spec__tab-5 {
        position: relative;

        &__title {
          font-weight: 600;
          font-size: 36px;
          line-height: 42px;
          color: $vmainGrey;
          margin-top: 48px;
          margin-bottom: 42px;
        }
        
        .swiper-tab-5 {
          display: flex;
          // flex-wrap: wrap;
          max-width: 1320px;
          width: 100%;
          max-height: 860px;
          height: 100%;

          .swiper-slide-tab-5 {
            display: flex;
            flex-wrap: wrap;

            > :not(:last-child) {
              margin-right: 20px;
            }

      
            .item-tab-5 {
              margin-bottom: 20px;

              .tab-5__item-info {
                  position: relative;
                  margin-left: 7px;
                  max-width: 291px;
                  width: 100%;
                  height: 91px;
              
                  .tab-5__item-title {
                    font-weight: 600;
                    font-size: 14.6087px;
                    line-height: 20px;
                    margin-top: 18px;
                    max-width: 100%;
                  }
              
                  .tab-5__item-bottom {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 14px;
              
                    .tab-5__item-price {
                      font-weight: 600;
                      font-size: 21.913px;
                      line-height: 26px;
                      margin-right: 66px;
                    }
              
                    .tab-5__item-btn {
                      @include btn-orange;
                      width: 108px;
                      height: 34px;
              
                      &:hover {
                        @include btn-orange-hover;
                      }
                    }
                  }
                }
            }
            }
          }
        }

        .swiper-button-next_tab-5, .swiper-button-prev_tab-5 {
          position: absolute;
        }

        .swiper-button-next_tab-5 {
            top: 40px;
            right: 15px;
            width: 20px;
            height: 20px;
        }

        .swiper-button-prev_tab-5 {
          top: 40px;
          left: 1209px;
          width: 20px;
          height: 20px;
        }
      }

      .spec__tab-6 {
        position: relative;

        &__title {
          font-weight: 600;
          font-size: 36px;
          line-height: 42px;
          color: $vmainGrey;
          margin-top: 48px;
          margin-bottom: 42px;
        }
                 .swiper-tab-6 {
                   display: flex;
                   // flex-wrap: wrap;
                   max-width: 1320px;
                   width: 100%;
                   max-height: 860px;
                   height: 100%;
        
                   .swiper-slide-tab-6 {
                     display: flex;
                     flex-wrap: wrap;
        
                     > :not(:last-child) {
                       margin-right: 20px;
                     }
        
        
                     .item-tab-6 {
                       margin-bottom: 20px;
        
                       .tab-6__item-info {
                         position: relative;
                         margin-left: 7px;
                         max-width: 291px;
                         width: 100%;
                         height: 91px;
        
                         .tab-6__item-title {
                           font-weight: 600;
                           font-size: 14.6087px;
                           line-height: 20px;
                           margin-top: 18px;
                           max-width: 100%;
                         }
        
                         .tab-6__item-bottom {
                           position: absolute;
                           bottom: 0;
                           left: 0;
                           display: flex;
                           justify-content: space-between;
                           align-items: center;
                           margin-top: 14px;
        
                           .tab-6__item-price {
                             font-weight: 600;
                             font-size: 21.913px;
                             line-height: 26px;
                             margin-right: 66px;
                           }
        
                           .tab-6__item-btn {
                             @include btn-orange;
                             width: 108px;
                             height: 34px;
        
                             &:hover {
                               @include btn-orange-hover;
                             }
                           }
                         }
                       }
                     }
                   }
                 }

                   .swiper-button-next_tab-6,
                   .swiper-button-prev_tab-6 {
                     position: absolute;
                   }
  
                   .swiper-button-next_tab-6 {
                     top: 40px;
                     right: 15px;
                     width: 20px;
                     height: 20px;
                   }
  
                   .swiper-button-prev_tab-6 {
                     top: 40px;
                     left: 1209px;
                     width: 20px;
                     height: 20px;
                   }
        
      }

      .spec__tab-7 {
        position: relative;

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

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

                   .swiper-button-next_tab-7,
                   .swiper-button-prev_tab-7 {
                     position: absolute;
                     top: 0;
                     right: 0;
                   }

                   .swiper-button-next_tab-7 {
                     top: 40px;
                     right: 15px;
                     width: 20px;
                     height: 20px;
                   }

                   .swiper-button-prev_tab-7 {
                     top: 40px;
                     left: 1209px;
                     width: 20px;
                     height: 20px;
                   }
      }
   
 

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