.button() {
  height: 28px;
  border-radius: 8px !important;
  border: 1px solid #787EFF !important;
  font-size: 14px;
  font-weight: 400;
  color: #787EFF !important;
  line-height: 16px;
  background-color: #fff !important;

  &:first-child {
    margin-right: 8px;
  }
}

.card-container() {
  margin: 0 16px 10px;
  padding: 20px;
  background: #FFFFFF;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
  border-radius: 14px;
}

.card-title(@marginBottom) {
  margin-bottom: @marginBottom;
  font-size: 18px;
  font-weight: 600;
  color: #242629;
  line-height: 24px;
}

.card-desc(@marginBottom, @lineHeight: 16px) {
  margin-bottom: @marginBottom;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: @lineHeight;
}

.card-head() {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;

  span:first-child {
    font-size: 18px;
    font-weight: 600;
    color: #242629;
    line-height: 24px;
  }

  span:last-child {
    font-size: 12px;
    font-weight: 400;
    color: #787EFF;
    line-height: 24px;
  }

  .svg-icon {
    padding: 4px 0;
    width: 16px;
    height: 16px;
  }
}

.card-body(@marginBottom: 0) {
  margin-bottom: @marginBottom;

  div {
    display: flex;
    justify-content: space-between;

    span:first-child {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }

    span:last-child {
      font-size: 12px;
      font-weight: 600;
      color: #333333;
      line-height: 24px;
    }
  }
}

.policy-detail {
  position: relative;
  background: #F6F6F6;

  &:before {
    position: absolute;
    width: 375px;
    height: 269px;
    border: 0;
    content: '';
    background: linear-gradient(360deg, rgba(244, 244, 244, 1) 0%, rgba(255, 200, 66, 1) 100%);
  }

  &:after {
    position: absolute;
    top: 38px;
    right: 0;
    width: 36px;
    height: 19px;
    content: '';
    background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
  }

  &-body {
    position: absolute;
    left: 0;
    right: 0;

    // padding-bottom: 49px;
    .Pdb-status {
      margin: 0 0 5px 20px;
      font-size: 28px;
      font-weight: 600;
      color: #333333;
      line-height: 40px;

      &:first-child {
        margin: 32px 0 0 20px;
      }
    }

    .Pdb-tips {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 0 24px 20px;
      padding: 0 4px;
      width: auto;
      height: 20px;
      background: #000000;
      border-radius: 8px;
      opacity: 0.2;

      &-text {
        margin-right: 1px;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &-svg {
        width: 12px;
        height: 12px;
      }
    }

    .Pdb-refund {
      .card-container();
      margin: 27px 16px 10px;

      &-title {
        .card-title(8px);
      }

      &-desc {
        .card-desc(24px);
      }

      &-note {
        .card-desc(0);
        margin-top: 16px;
      }

      &-operation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
        width: 100%;

        .Pdbi-operation-button {
          padding: 0 !important;
          width: 146px;
          height: 40px;
          border-radius: 8px !important;
          border: 1px solid #787EFF !important;
          background-color: #fff !important;
          font-size: 14px;
          font-weight: 400;
          color: #787EFF !important;
          line-height: 16px;

          &_paid {
            border: 0 !important;
            background: #F4F5FF !important;
            color: #787EFF !important;
          }
        }
      }

      &-content {
        .Pdbr-content-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px;
          height: 50px;
          background: #F6F7FA;
          border-radius: 8px;

          &:first-child {
            margin-bottom: 12px;
          }

          span:first-child {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 24px;
          }

          span:last-child {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            line-height: 24px;
          }
        }
      }
    }

    .Pdb-payment {
      .card-container();

      &-title {
        .card-title(16px);

        &_tips {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
        }
      }

      &-content {
        margin-bottom: 17px;

        .Pdbp-content-item {
          display: flex;
          align-items: center;

          .Pdbpc-item-svg {
            margin-right: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #FFC842;
          }

          .Pdbpc-item-text {
            .card-desc(0, 24px);
          }
        }
      }

      &-button {
        width: 100%;
        height: 52px;
        background: #FFC842 !important;
        border-radius: 14px !important;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 22px;
      }
    }

    .Pdb-insurance {
      .card-container();

      &-name {
        .card-title(12px);
      }

      &-no {
        .card-desc(16px);
      }

      &-operation {
        .Pdbi-operation-button {
          .button
        }
      }
    }

    .Pdb-content {
      .card-container();

      &-head {
        .card-head
      }

      &-body {
        .card-body(8px);
      }

      &-operation {
        .Pdbc-button {
          .button
        }
      }

      &-user {
        margin-top: 24px;

        .Pdbc-user-who {
          .card-title(16px);
        }

        .Pdbc-user-info {
          display: flex;
          // justify-content: space-around;
          box-sizing: border-box;
          padding: 0 16px;
          align-items: center;
          width: 100%;
          height: 50px;
          background: #F6F7FA;
          border-radius: 14px;

          span:first-child {
            width: 55px;
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            line-height: 24px;
          }

          span:last-child {
            // flex: 1;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 24px;
          }
        }
      }
    }

    .Pdb-service {
      .card-container();
      margin: 0 16px 16px;
      padding: 20px 20px 11px;

      &-head {
        .card-head();
      }

      &-body {
        .card-body();
      }

      &-question {
        // margin-top: 24px;
        .card-head();
      }

      &-divider {
        margin: 0 0 12px 0;

        &:before {
          height: 1px;
          border-color: #EBEBEB;
        }
      }

      &-agreement {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        a {
          font-size: 12px;
          color: #333;
          font-weight: 400;
          line-height: 24px;
          &::after {
            display: inline-block;
            content: " ";
            width: 0;
            height: 12px;
            border-right: 1px #333 solid;
            margin: 0 5px;
            vertical-align: -2px;
          }
          &:last-child::after {
            display: none;
          }
        }

        // span {
        //   font-size: 12px;
        //   font-weight: 400;
        //   color: #333333;
        //   line-height: 24px;
        // }
      }
    }

    .Pdb-operation {
      display: flex;
      justify-content: space-around;
      margin-bottom: 14px;

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 84px;

        .Pdbo-item-svg {
          width: 16px;
          height: 16px;
        }

        .Pdbo-item-text {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
        }
      }
    }

    .Pdb-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 231px 0 20px;

      span:first-child {
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }

      span:last-child {
        font-size: 20px;
        font-weight: 600;
        color: #666666;
        line-height: 28px;
      }
    }

    .Pdb-recommend {
      margin-bottom: 49px;
    }
  }
}