// main: ga-fabricfarm.less

/* 장바구니/주문/결제 */
.cart, .order, .order-confirm {
    h4 {
        font-size:19px;
        min-height: 26px;
    }
    .steps-form-box {
        width: 60%;
        margin: 0 auto;
    }
    .f1 p {
        text-align: center;
    }
    .f1-steps { 
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
    }
    .f1-progress { 
        position: absolute; 
        top: 24px; 
        left: 0; 
        width: 100%; 
        height: 1px; 
        background: #ddd; 
    }
    .f1-progress-line { 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 1px; 
        background: @primary-color; 
    }
    .f1-step { 
        position: relative; 
        float: left; 
        width: 33.333333%; 
        padding: 0 5px;
        text-align: center;
    }
    .f1-step-icon {
        display: inline-block; 
        width: 40px; 
        height: 40px; 
        margin-top: 4px; 
        background: #ddd;
        font-size: 17px; 
        color: #fff; 
        line-height: 40px;
        -moz-border-radius: 50%; 
        -webkit-border-radius: 50%; 
        border-radius: 50%;
    }
    .f1-step.activated .f1-step-icon {
        background: #fff; 
        border: 1px solid @primary-color; 
        color: @primary-color; 
        line-height: 38px;
    }
    .f1-step.active .f1-step-icon {
        width: 48px; 
        height: 48px; 
        margin-top: 0; 
        background: @primary-color; 
        font-size: 23px; 
        line-height: 48px;
    }
    .f1-step p { color: #ccc; }
    .f1-step.activated p { color: @primary-color; }
    .f1-step.active p { color: @primary-color; }
    .form-control {
        background-color: #ffffff;
        opacity: 1;
    }
}
.cart, .order, .mypage {
    /* checkbox, radio */
    .checkbox ,
    .radio {
        margin: 0;
        padding: 0;
    }
    .checkbox label:after, 
    .radio label:after {
        content: '';
        display: table;
        clear: both;
    }
    .checkbox label,
    .radio label {
        padding: 0;
        font-weight: inherit;
    }
    .checkbox .cr,
    .radio .cr {
        position: relative;
        display: inline-block;
        border: 1px solid #a9a9a9;
        border-radius: 0;
        width: 1.3em;
        height: 1.3em;
        margin-right: .5em;
        vertical-align: middle;
    }
    .radio .cr {
        border-radius: 50%;
    }
    .checkbox .cr .cr-icon,
    .radio .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 20%;
    }
    .radio .cr .cr-icon {
        margin-left: 0.04em;
    }
    .checkbox label input[type="checkbox"],
    .radio label input[type="radio"] {
        display: none;
    }
    .checkbox label input[type="checkbox"] + .cr > .cr-icon,
    .radio label input[type="radio"] + .cr > .cr-icon {
        transform: scale(3) rotateZ(-20deg);
        opacity: 0;
        transition: all .3s ease-in;
    }
    .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
    .radio label input[type="radio"]:checked + .cr > .cr-icon {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
    .checkbox label input[type="checkbox"]:disabled + .cr,
    .radio label input[type="radio"]:disabled + .cr {
        opacity: .5;
    }
    .cart-list-btn {
        li {
            margin: 5px 0;
        }
    }
    .payment {
        border: 3px solid #666;
        .payment-inner {
            .payment-item {
                vertical-align: middle;
            }
        }
        h5 {
            margin: 0;
            display: block;
            text-align: center;
            font-size: 15px;
        }
        span {
            margin-bottom: 5px;
            display: block;
            text-align: center;
            font-weight: 700;
        }
        span.subject {
            color:#666;
            font-size: 13px;
        }
        span.cart-sum {
            font-size: 17px;
        }
        span.all-sum {
            font-size: 25px;
            color: @primary-color;
        }
    }
    /* 주문상품리스트 */
    .order_list {
        border-top: 2px solid #656565;
        margin-bottom: 20px;
        h4 {
            font-size: 15px;
            margin:0;
            padding: 0;
        }
        .divider_row {
            padding: 8px 0 11px 0;
            border-bottom:1px solid #dcdcdc;
            .checkbox {padding-left: 10px;}
            .vcenter {
                display: inline-block;
                vertical-align: middle;
                float: none;
                margin-right: -4px;
            }
            dl {
                float: left;
                text-align: left;
            }
            dl dt {
                font-size: 15px;
                margin-bottom: 5px;
            }
            dl dd {
                font-size: 13px;
            }
            ul {
                width: 100%;
                list-style: none;
                padding: 0;
                text-align: center;
            }
            .cart-count {
                font-size: 0px; letter-spacing: 0px; word-spacing: 0px;
                li {
                    height:30px;line-height:30px;border:1px solid #d1d1d1;vertical-align:middle;
                    display: inline-block; margin-right: -1px;text-align: center;
                }
                .minus, 
                .add {width:30px; cursor:pointer;.f18;}
                .number {.f14;}
                .minus:hover, .add:hover{background-color:#ddd;color:@00;}
            }
            .price {
                ul {
                    text-align: left;
                    li > h5 {
                        margin: 0;
                        text-align: left;
                        font-size: 13px;
                    }
                    li > p {font-size: 13px;}
                    li > p > span {font-weight:bold; font-size: 15px;}
                }
            }
            .sum {
                border-top: 1px solid @divider;
                margin-top: 5px;
                padding-top: 5px;
            }
        }
    }
}
.cart {
    .payment {
        margin-top: 30px;
    }
}
.order {
    .form-horizontal .checkbox {
        padding-top: 6px;
    }
    .input-group-addon {
        border-radius: 0;
    }
    .input-group-addon:hover {
        text-decoration: none;
        background: #e2e2e2;
        color: #555;
    }
    .pay-with {
        padding: 20px;
        margin: 15px 0 30px 0;
        border: 1px solid @box-border;
        .pay-with-inner {
            display: table;
            width: 100%;
            .pay-with-item {
                float: inherit;
                display: table-cell;
                vertical-align: middle;
                h5 {
                    margin: 0;
                    display: block;
                    text-align: center;
                    padding: 0 20px 0 0;
                    border-right: 1px solid @divider;
                    font-size: 15px;
                }
                ul {
                    padding: 0; margin: 0;
                    list-style: none;
                    li { 
                        display: inline-block;
                        margin: 0 20px 0 0;
                    }
                }
                .saved-money {
                    margin-top: 20px;
                    label {
                        margin-right: 10px;
                    }
                    .form-group {
                        margin-right: 10px;
                    }
                    input {
                        text-align: right;
                    }
                    span b {
                        color: @primary-color;
                    }
                }
            }
        }
    }
    .nonmember {
        margin-top: 30px;
        .checkbox {
            margin: 10px 0 20px 0;
        }
    }
}
.order-confirm {
    .form-group {
        div {
            padding-top: 3px;
        }
    }
    .explanation {
        text-align: center;
        margin: 30px 0;
        .exp {
            font-size: 13px;
            color: #333;
        }
        .confirm {
            font-size: 33px;
            color: #999;
            b {
                color: #333;
            }
        }
        .icon {
            font-size: 47px;
            color: #26A86B;
        }
    }
    .pay-with {
        .pay-success {
            span {
                margin-right: 10px;
            }
        }
    }
}
@media (max-width: 767px) {
    .cart, .order, .order-confirm {
        .steps-form-box {
            width: 80%;
        }
    }
    .cart, .order {
        .payment {
            padding: 20px 10px;
            h5 {
                font-size: 19px;
                padding: 0 0 0 0;
                margin-bottom: 20px;
                border-right: none;
            }
        }
       /* 주문상품리스트 */
       .order_list {
            .divider_row {
                .product-thum {
                    margin-right: 15px;
                    float: left;
                }
                dl dt {margin-top: 10px;}
                .cart-count {
                    .number {width:60px;}
                }
                .price {
                    ul {
                        li h5, li p, {display: inline-block;}
                        li > p {
                            margin: 0;
                            float: right;
                        }
                    }
                }
            }
        }
    }
    .order {
        .pay-with {
            display: table;
            width: 100%;
            .pay-with-inner {
                .pay-with-item {
                    display: block;
                    h5 {
                        margin: 0 0 20px 0;
                        display: block;
                        padding: 0 0 0 0;
                        border-right: none;
                    }
                    ul {
                        text-align: center;
                        li { 
                            margin: 0 20px 5px 0;
                        }
                    }
                    .saved-money {
                        margin-top: 10px;
                        input {
                            width: 90%;
                            display: inline-block;
                        }
                        span.exp {
                            display: block;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
}
@media (min-width: 768px) {
    .cart, .order {
        .payment {
            padding: 30px 20px;
            .payment-inner {
                width: 100%;
                display: table;
                .payment-item {
                    float: inherit;
                    display: table-cell;
                }
            }
            h5 {
                padding: 0 20px 0 0;
                border-right: 1px solid @divider;
            }
        }
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .cart, .order {
        /* 주문상품리스트 */
        .order_list {
            .divider_row {
                .product-thum {
                    margin-right: 0;
                    text-align: center;
                    .img-responsive {
                        display: inherit;
                    }
                }
                dl dt {margin-top: 10px;}
                .cart-count {
                    .number {width:60px;}
                }
                .price {
                    ul {
                        li h5, li p, {display: inline-block;}
                        li > p {
                            margin: 0;
                            float: right;
                        }
                    }
                }
            }
        }
    }
}
@media (min-width: 992px) {
    .cart, .order {
        /* 주문상품리스트 */
        .order_list {
            .divider_row {
                .product-thum {
                    margin-right: 10px;
                    float: left;
                }
                .cart-count {
                    .number {width:80px;}
                }
                .price {
                    ul {
                        li h5, li p, {display: inline-block;}
                        li > p {
                            margin: 0;
                            float: right;
                        }
                    }
                }
            }
        }
    }
}