//css for DIYCard
@import 'cbkfe-assets/dist/css/control.less';
.cbkfe-diy-card--detail {
    position: relative;
    width: 100%;
    .diy-card-detail {
        position: relative;
        min-height: 8rem;
    }
    .cbkfe-diy-cardImg {}
    .diy-card__title {
        .font(1.15rem, #fff, 1.25rem);
        font-weight: 500;
        .text-overflow();
    }
    .diy-card-info {
        position: absolute;
        bottom: 0.75rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &--normal {
            bottom: 0.75rem;
            width: 80%;
        }
        &--isRefund {
            bottom: 1rem;
            width: 100%;
        }
    }
    .diy-card-content {
        position: relative;
        width: 100%;
    }
    .card-info-count_refund {
        .font(0.85rem, #fff, 1);
        font-weight: 500;
        margin-right: 0.1rem;
    }
    .card-info-count_title {
        transform: translateY(-1px)
    }
    .card-info_refund {
        .font(0.75rem, #fff, 1);
        font-weight: 500;
        margin-right: 0.1rem;
    }
    .card-info-count_no-refund {
        .font(1.2rem, #fff, 1);
        font-weight: 500;
        margin-right: 0.1rem;
    }
    .icon-size {
        height: 13px;
        width: 13px;
        margin: 0 0.25rem;
        transform: translateY(-1px);
    }
    .icon-size-normal {
        height: 13px;
        width: 13px;
        margin: 0 0.25rem;
    }
    .card-info-item-layout {
        display: flex;
        align-items: flex-end;
        flex-direction: row;
        flex: 1;
        flex-shrink: 0;
        font-weight: 400;
    }
    .card-info-count {
        .font(1.2rem, #fff, 1);
        font-weight: 500;
        margin-right: 0.1rem;
    }
    .card-info-item-redund-layout {
        display: flex;
        align-items: baseline;
        flex-direction: row;
        flex: 1;
        flex-shrink: 0;
        font-weight: 400;
    }
    .card-info-item {
        display: flex;
        align-items: baseline;
        flex: 1;
        flex-shrink: 0;
        .font(0.65rem, #fff, 1);
        font-weight: 400;
    }
    .cbkfe-diyCard-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        width: 100%;
        height: 100%;
        padding: 2.7rem 1.5rem 0.75rem;
        overflow: hidden;
    }
}

.cbkfe-card--package {
    position: relative;
    z-index: 20;
    margin-top: -0.7rem;
    .package-card {
        transform: translateY(0.7rem);
        position: relative;
        min-height: 5rem;
    }
    .package-card__img {
        width: 100%;
    }
    .package-card-detail {
        position: absolute;
        top: 0.5rem;
        left: 0;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 3.5rem;
        padding: 0 1.5rem;
    }
    .package-card-title {
        flex: 1;
        .font(1.2rem, #fff, 1);
        font-weight: 500;
        padding-top: 2.2rem;
        .text-overflow();
    }
    .package-card-info {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-left: 0.75rem;
    }

    .package-card-storeInfo {
        .font(0.65rem, #fff, 0.85rem);
        font-weight: 400;
    }
    .package-card-urlBtn {
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        background: #fff;
        .font(0.6rem, #ff2244, 0.6rem);
        font-weight: 500;
        padding-left: 0.5rem;
        padding-right: 0.4rem;
        margin-top: 0.3rem;
        .iconfont {
            font-size: 0.5rem;
            display: inline-block;
            transform: scale(0.7);
            margin-left: 0.1rem;
        }
    }
}

.cbkfe-card--cardDetail {
    position: relative;
    margin-top: -0.7rem;
    z-index: 20;
    .package-card {
        transform: translateY(0.7rem);
        position: relative;
        min-height: 5rem;
    }
    .package-card__img {
        width: 100%;
    }
    .package-card-detail {
        position: absolute;
        top: 0.5rem;
        left: 0;
        width: 100%;
        padding: 0 1.5rem;
        padding-top: 1rem;
    }
    .package-card-title {
        flex: 1;
        .font(1.2rem, #fff, 1);
        font-weight: 500;
        .text-overflow();
    }
    .package-card-info {
        display: flex;
        align-items: center;
    }
    .package-card-storeInfo {
        .font(0.65rem, #fff, 0.85rem);
        font-weight: 400;
    }
    .card-packages-title {
        margin-top: 0.5rem;
        .font(0.7rem, #fff, 0.9rem);
        font-weight: 400;
    }
    .package-card-count {
        font-size: 1.15rem;
        font-weight: 500;
        margin-right: 0.25rem;
        &--multi {
            margin-left: 0.25rem;
        }
    }
    .package-card-urlBtn {
        height: 1.2rem;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        background: #fff;
        .font(0.6rem, #ff2244, 0.6rem);
        font-weight: 500;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.4rem;
        .iconfont {
            font-size: 0.5rem;
            display: inline-block;
            transform: scale(0.7);
            margin-left: 0.1rem;
        }
    }
}

.cbkfe-card--combination {
    position: relative; // height: 6rem;
    z-index: 20;
    border-radius: 0 0 50% 50%/0 0 12% 12%;
    .package-card {
        transform: translateY(50px);
        position: relative;
        min-height: 5rem;
        .package-card__img {
            width: 100%;
        }
        .package-card-vouchersNo {
            position: absolute;
            right: 1.8rem;
            top: 0.5rem;
            font-size: 0.7rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 0.9rem;
            opacity: 0.8;
        }
        .package-card-detail {
            position: absolute;
            top: 0.6rem;
            left: 0;
            width: 100%;
            padding: 0 1.5rem;
            padding-top: 2rem;
        }
        .package-card-title {
            flex: 1;
            .font(1.2rem, #fff, 1);
            font-weight: 500;
            .text-overflow();
        }
        .package-card-info {
            display: flex;
            align-items: center;
        }
        .package-card-storeInfo {
            .font(0.65rem, #fff, 0.85rem);
            font-weight: 400;
        }
        .card-packages-title {
            margin-top: 0.4rem;
            .font(0.7rem, #fff, 0.9rem);
            font-weight: 400;
        }
        .package-card-count {
            font-size: 1.15rem;
            font-weight: 500;
            margin-right: 0.25rem;
            &--multi {
                margin-left: 0.25rem;
            }
        }
        .urlBtn-layout {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.45rem;
            .package-card-urlBtn {
                height: 1.2rem;
                width: 3.85rem;
                border-radius: 0.75rem;
                display: flex;
                align-items: center;
                background: #fff;
                .font(0.6rem, #ff2244, 0.6rem);
                font-weight: 500;
                justify-content: center;
                .iconfont {
                    font-size: 0.5rem;
                    display: inline-block;
                    transform: scale(0.7);
                    margin-left: 0.1rem;
                }
            }
        }
    }
}

.package-card-tollBtns {
    display: inline-block;
    text-align: center;
    height: 1.2rem;
    background: #FFFFFF;
    border-radius: 0.75rem; 
    font-size: 0.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FF2244;
    line-height: 1.2rem;
    padding: 0 0.5rem;
    margin-top:0.3rem;

    .iconfont {
        font-size: 0.5rem;
        display: inline-block;
        transform: scale(0.7);
        margin-left: 0.1rem;
    }
}