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


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

.shopping-cart-page {
    margin-bottom: 120px;
    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: 30px 0;
            height: 30px;
        }

        li.active {
            color: #000;
        }

        span {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 30px;
            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;
            border-radius: 5PX;
            text-align: center;
            width: 7rem;
        }
    }

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

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

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

        > span {
            display: block;
        }

        .iconfont {
            float: left;
            font-size: 45px;
        }

        .txt {
            height: 30px;
            line-height: 30px;
            margin-left: 80px;
        }
    }

    .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 {
        font-size: 24px;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 30px;

        > li {
            box-sizing: border-box;
            height: 80px;
            line-height: 80px;
            margin-bottom: 10px;
            padding: 0 20px;

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

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

            .under-line {
                display: inline-block;
                height: 1px;
                width: 91%;
                position: absolute;
                left: 9%;
                background-color: #f1f1f1;
            }

        }

        > li:first-child {
            .under-line {
                display: none;
            }
        }

        .count {
            color: #7b7b7b;
            float: right;
        }

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

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

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

        .title {
            display: inline-block;
            width: 175px;
        }

        .minus {
            float: right;
        }
    }

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

        .iconfont {
            position: absolute;
            top: 50%;
            margin-top: -14px;
            font-size: 28px;
        }

        p {
            float: right;
            margin-right: 32px;
            font-size: 26px;

            span {
                display: block;
                height: 40px;
                line-height: 40px;
                color: #d0253b;
                font-weight: bold;
            }

            .tip {
                color: #666;
                font-size: 22px;
                text-align: right;
                font-weight:normal;
            }
        }

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

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