// @import "../../style/var.less";
@font-face {
  font-family: "din";
  src: url("../../style/DIN.ttf") format("truetype");
}
@{deep} .cr-button--default {
  color: inherit;
}
.btn-absolute{
  position: absolute;
  bottom: 16px;
}
.goods-bottom-buy {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 335px;
  height: 40px;
  .text-14();
  font-weight: bold;
  border-radius: @padding-lg;
  color: @white;
  background-image: @gradient-red;
  &.disabled {
    opacity: 0.7;
  }
}
.goods-popup{
  height: auto !important;
}
// 弹出框头部
.popup-head{
  border-radius: 20px 20px 0 0;
  .popup-title {
    .text-16();
    font-weight: @font-weight-bold;
    color: @black;
    text-align: center;
    padding: 10px 0
  }
}


.goods {
  &-container {
      padding-bottom: 60px;
      box-sizing: border-box;
      font-size: 16px;
      &-lose {
          &-container {
              background: #fff;
              padding: 45px 15px;
              text-align: center;
              img {
                  width: 150px;
              }
          }  
      }
  }
  &-carousel {
    position: relative;
    width: 100%;
    height: 375px;

    &-swiper {
      height: 100%;

      &-item {
        width: 100%;
        height: 100%;

        &-img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .custom-indicator {
      position: absolute;
      right: 10px;
      bottom: 13px;
      padding: 2px 5px;
      font-size: 12px;
      background-color: #000;
      opacity: 0.4;
      color: #fff;
      border-radius: 10px;
    }
  }
  &-swipe-avator{
    position: absolute;
    left: @padding-sm;
    bottom: @padding-sm;
  }
  &-info {
    padding: @padding-sd @padding-sd 0;
    background: @white;
    margin-bottom: @padding-sm - 4;
    &-name {
      .text-16();
      color: @black;
      font-weight: bold;
      padding-bottom: @padding-x;
    }
  }
  &-group-buy-info{
    display: flex;
    background-image: url("../../assets/images/info-bg.png");
    background-color: #FFE8E8;
    background-size: cover;
    width: 100%;
    height: 66px;
    padding-left: @padding-unit * 3;
    box-sizing: border-box;
    &-price{
      width: 241px;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .desc{
        .text-12();
        color:@white;
        opacity: .8;
      }
      .price{
        margin-bottom: @padding-unit - 2;
        .text-14();
        color:@white;
        .group-price {
          // font-family: "din";
          margin-right: @padding-xs;
          font-size: 30px;
        }
        .sale-price{
          // font-family: "din";
          .text-16();
        }
      }
    }
    &-time{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &-desc{
        .text-12();
        // margin-bottom: @padding-unit;
        color: @font-color-dark;
        text-align: center;
      }
    }
  }
  // 头像组、团购规则等
  &-group-info{
    padding:@padding-sm - 4 @padding-sd @padding-sd;
    background: @white;
  }
  &-param {
    padding: 0 @padding-sm - 2;
    background: @white;
    margin-bottom: @padding-sm - 4;

    &-text {
      max-width: 225px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;

    }

    &-area {
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;

        &:nth-child(1) {
          .text-16();
          color: @red;
          margin-right: 2px;
        }

        &.noAddr {
          color: @gray-4;
          
        }
      }
    }

    &-service {
      span {
        &:after {
          margin: 0 10px;
          content: '';
          height: 22px;
          vertical-align: middle;
        }

        &:last-child {
          &:after {
            height: 0;
          }
        }
      }
    }
  }

  &-popup {
    margin: @padding-md + 4 @padding-lg;
    height: 71vh;
    position: relative;

    &-selected {
      display: flex;
      align-items: flex-end;
      margin-bottom: @padding-xl - 4;

      img {
        width: 100px;
        height: 100px;
        border-radius: @border-radius-sm;
      }

      .Gp-selected-right {
        display: flex;
        flex-direction: column;
        padding-left: @padding-sd;
        align-items: flex-start;
        .Gps-right-header {
          display: flex;
          align-items: center;
          margin-bottom: @padding-sd;

          .Gpsr-header-price {
            margin-right: @padding-x;
            line-height: 0;
            span {
              color: @red-light;
              font-weight: @font-weight-bold;

              &:first-child {
                .text-12();
              }

              &:last-child {
                .text-18();
              }
            }
          }

          .Gpsr-header-discount {
            .text-12();
            color: @gray-4;

            span {
              &:last-child {
                text-decoration: line-through;
              }
            }
          }
        }

        .Gps-right-selected {
          .text-13();
          color: @black;
          display: inline-block;
        }
      }
    
    } 
    &-param {
      display: flex;
      flex-direction: column;
      margin-bottom: @padding-lg;

      .Gp-param-name {
        margin-bottom: @padding-xs + 2;
        .text-13();
        color: @gray-4;
        display: inherit;
      }

      .Gp-param-list {
        display: flex;
        flex-wrap: wrap;

        span {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: @padding-sd;
          padding: 0 @padding-md - 2;
          background: @gray-1;
          border-radius: @border-radius-sm / 2;
          height: 26px;
          .text-13();
          color: @black;
          margin-bottom: @padding-xs;
        }

        .Gpp-list-selected {
          border: 1px solid @red;
          background: pink;
          color: @red;
        }

        .Gpp-list-disabled {
          color: @gray-4;
        }
      }
    }

    &-num {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 100px;
      &-limit {
        position: absolute;
        right: 0;
        top: 27.5px;
        .text-14();
        color: @red;
        // width: 90px;
        text-align: right;
      }

      .Gp-num-name {
        .text-13();
        color: @gray-4;
      }
      .Gp-num-step{
        width: auto;
        display: flex;
        button{
          background-color:#F7F7F7 !important;
        }
      }
    }

    &-button {
      button{
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 0;
        padding: @padding-md 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

    }
  }
  &-area {
    height: 65vh;
    overflow: scroll;
    padding: @padding-md @padding-lg;
    &-item {
      display: flex;
      align-items: center;
      margin-bottom: @padding-lg;
      span {
        .text-13();
        color: @gray-4;
        &:first-child {
          width: 20px;
          height: 20px;
          line-height: 20px;
          .text-16();
        }
        &:second-child {
          flex: 1;
        }
      }
      &_selected {
        span {
          &:first-child {
            color: @red;
          }
          &.secondText {
            color: @black;
            font-weight: @font-weight-bold;
          }
        }
      }
    }
    &-none {
      display: inline-block;
      width: 100%;
      line-height: 65vh;
      .text-13();
      color: @gray-5;
      text-align: center;
    }
    &-button {
      display: flex;
      justify-content: center;
    }
  }
  &-divider {
    display:flex;
    align-items:center;
    justify-content: center;
    margin: 15px 0;
    width: 100%;
    font-size: 12px;
    color: #999;
    text-align: center;
    &:before, &:after{
        display: inline-block;
        content: '';
        width: 50px;
        height: 0;
        border-top: 1px solid #D8D8D8;
        margin-right: 5px;
    }
    &:after{
        margin-left: 5px;
        margin-right: 0;
     }
  }
}



