@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon", "select-address";


.icon-checkbox:before { content: "\e61c"; }
.icon-cb-checked:before { content: "\e61d"; }

.shopping-cart-page {
    margin-bottom: 120rem / $pxConvertRem;
    overflow-x: hidden;
    background: #f0f0f0;
    display: none;

    .yoho-tip {
        z-index: 4;
    }

    .cart-content > * {
        background: #fff;

        &:first-child {
            border-top: none;
            margin-top: 0;
        }
    }

    .cart-nav {
        color: #c6c6c6;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;

        li {
            float: left;
            width: 50%;
            padding: 30rem / $pxConvertRem 0;
            height: 30rem / $pxConvertRem;
        }

        li.active {
            color: #000;
        }

        span {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 30rem / $pxConvertRem;
            line-height: 30rem / $pxConvertRem;
            font-size: 30rem / $pxConvertRem;
            text-align: center;
        }

        li:first-child span {
            border-right: 1px solid #e0e0e0;
        }

        li:last-child {
            position: relative;
        }

        .presell-tip {
            position: absolute;
            z-index: 1;
            left: -2rem;
            top: 1.75rem;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 12px solid #000;
            margin-left: 6rem;
        }

        .pt-content {
            position: relative;
            padding: 10px;
            background: #000;
            color: #fff;
            font-size: 12px;
            @include border-radius(5px);
            text-align: center;
            width: 7rem;
        }
    }

    .login-info {
        height: 46rem / $pxConvertRem;
        padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;
        color: #24acaa;
        text-align: center;
        font-size: 28rem / $pxConvertRem;

        .btn {
            display: inline-block;
            background: #ed0010;
            color: #fff;
            width: 80rem / $pxConvertRem;
            height: 46rem / $pxConvertRem;
            line-height: 46rem / $pxConvertRem;
        }
    }

    .presell-info {
        height: 60rem / $pxConvertRem;
        padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
        font-size: 22rem / $pxConvertRem;
        background: #f0f0f0;
        color: #b7b7b7;

        > span {
            display: block;
        }

        .iconfont {
            float: left;
            font-size: 45rem / $pxConvertRem;
        }

        .txt {
            height: 30rem / $pxConvertRem;
            line-height: 30rem / $pxConvertRem;
            margin-left: 80rem / $pxConvertRem;
        }
    }

    .cart-goods {
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 0.75rem;

        .shopping-cart-good:last-child .info {
            border-bottom: none;
        }
    }

    .invalid-goods {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin: 0.75rem 0;
    }

    .freebie-and-advance-buy {
        padding: 20rem / $pxConvertRem;
        font-size: 24rem / $pxConvertRem;
        border-top: 1px solid #e0e0e0;
        margin-bottom: 30rem / $pxConvertRem;

        > li {
            box-sizing: border-box;
            height: 80rem / $pxConvertRem;
            line-height: 80rem / $pxConvertRem;
            margin-bottom: 10rem / $pxConvertRem;
            padding: 0 20rem / $pxConvertRem;
            background: #f1f1f1;

            &:last-child {
                margin-bottom: 0;
            }

            a {
                float: right;
                width: 100%;
            }
        }

        .count {
            color: #f00;
            float: right;
        }

        .icon-right-arrow {
            color: #8f8f8f;
            float: right;
        }
    }

    .activity-title{
        border-top: 1px solid #e0e0e0;
        font-size: 32rem / $pxConvertRem;
        padding: 20rem / $pxConvertRem 20rem / $pxConvertRem 0;
    }

    .activity{
        padding: 8rem / $pxConvertRem 20rem / $pxConvertRem 20rem / $pxConvertRem 32rem / $pxConvertRem;
        font-size: 26rem / $pxConvertRem;
        li:before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #000;
            border-radius: 50%;
            position: relative;
            left: 0;
            top: -.12rem;
        }
    }
    .price-compute {
        padding: 20rem / $pxConvertRem;
        border-top: 1px solid #e0e0e0;
        font-size: 28rem / $pxConvertRem;

        .title {
            display: inline-block;
            width: 175rem / $pxConvertRem;
        }

        .minus {
            float: right;
        }
    }

    .balance {
        position: fixed;
        box-sizing: border-box;
        bottom: 0;
        width: 100%;
        padding: 20rem / $pxConvertRem;
        height: 120rem / $pxConvertRem;
        border-top: 1px solid #e0e0e0;
        background: #fff;

        .iconfont {
            position: absolute;
            top: 50%;
            margin-top: -14rem / $pxConvertRem;
            font-size: 28rem / $pxConvertRem;
        }

        p {
            float: right;
            margin-right: 32rem / $pxConvertRem;
            font-size: 26rem / $pxConvertRem;

            span {
                display: block;
                height: 40rem / $pxConvertRem;
                line-height: 40rem / $pxConvertRem;
                color: #d0253b;
                font-weight: bold;
            }

            .tip {
                color: #666;
                font-size: 22rem / $pxConvertRem;
                text-align: right;
                font-weight:normal;
            }
        }

        .btn-balance {
            float: right;
            width: 140rem / $pxConvertRem;
            height: 80rem / $pxConvertRem;
            line-height: 80rem / $pxConvertRem;
            text-align: center;
            background: #e01;
            color: #fff;
            border: none;
            font-size: 28rem / $pxConvertRem;
        }
    }

    .cart-zero{
        width: 100%;
        height: auto;
        padding-top:2rem;
        padding-bottom:20%;
        i{
            font-size: 6em;
            display: block;
            margin: 0 auto;
            text-align: center;
            color: #505050;
        }
        p{
            display: block;
            text-align: center;
            font-size: 1.2em;
            color: #505050;
            padding:.6rem 0;
        }
        a{
           width: 27%;
           height: 1.2rem;
           overflow: hidden;
           line-height: 1.2rem;
           border:1px solid #505050;
           border-radius:.2rem;
           display: block;
           margin: 0 auto;
           text-align: center;
        }
    }
}