.checkout {
    margin-top: 30px;
}

.cart-total {
    .available-shipping-methods {
        > span {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 0;
        }

        .form-group {
            margin-bottom: 0;
        }

        .radio:first-child {
            margin-top: 5px;
        }
    }

    .error-message {
        margin-top: 8px;
    }

    .checkbox {
        margin-bottom: 20px;

        a {
            @include themify {
                color: themed('primary');
            }

            &:hover {
                @include themify {
                    color: themed('primary-hover');
                }
            }
        }
    }
}

.order-review {
    position: relative;
    z-index: 1;

    &.sticky {
        position: fixed;
        top: 100px;
    }

    &.bottom {
        position: absolute;
    }

    #stripe-payment {
        display: none;
        background: #f7f8f9;
        padding: 15px 10px;
        border-radius: 3px;
        margin: 12px 0 15px;
    }
}

.wizard {
    .nav-tabs {
        position: relative;

        @include themify {
            border-bottom-color: themed('primary');
        }
    }

    .round-tab {
        width: 50px;
        height: 50px;
        line-height: 48px;
        display: table-cell;
        vertical-align: middle;
        border-radius: 100%;
        background: #ffffff;
        position: absolute;
        left: 0;
        top: 31px;
        right: 0;
        text-align: center;
        font-size: 20px;
        margin: auto;
        transition: 200ms ease-in-out;

        @include themify {
            border: 2px solid themed('default');
        }

        i {
            transition: 200ms ease-in-out;
        }
    }

    li.active {
        .round-tab {
            @include themify {
                border-color: themed('primary');
            }

            i {
                @include themify {
                    color: themed('primary');
                }
            }
        }
    }

    .nav-tabs > li {
        width: 33.33%;
        overflow: hidden;

        &:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            width: 5px;
            opacity: 0;
            margin: 0 auto;
            border: 8px solid transparent;
            transition: 200ms ease-in-out;
        }

        &.active:after {
            bottom: 0;
            opacity: 1;

            @include themify {
                border-bottom-color: themed('primary');
            }
        }

        a {
            font-size: 16px;
            width: 90px;
            height: 90px;
            margin: 0 auto 11px;
            padding: 0;
            display: table;
            text-align: center;
            background: transparent !important;
            border: none !important;

            @include themify {
                color: themed('black');
            }

            &:hover,
            &:focus {
                @include themify {
                    color: themed('black');
                }
            }

            &:after {
                width: 0;
            }
        }
    }

    .nav-tabs > li.selected {
        .round-tab {
            @include themify {
                border-color: themed('primary');
            }

            i {
                @include themify {
                    color: themed('primary');
                }
            }
        }
    }

    .tab-pane {
        position: relative;
        padding: 20px 0 0;
    }

    .address {
        .create-account {
            > .checkbox {
                margin-top: 2px;
            }

            > .form-group {
                label {
                    display: block;
                }
            }
        }
    }

    .billing-address {
        margin-top: 16px;
    }

    .personal-information,
    .billing-address,
    .shipping-address {
        clear: both;

        h5 {
            font-weight: 500;
            margin: 0 15px 15px;
            padding-bottom: 8px;

            @include themify {
                border-bottom: 1px solid themed('default');
            }
        }
    }

    .prev-step,
    .next-step {
        margin: 20px 15px 20px;
    }

    .prev-step {
        margin-right: 0;
    }

    .continue-button {
        margin-top: 10px;
        float: right;
    }

    .confirm {
        .box-header {
            margin-bottom: 8px;
        }
    }

    .order-list {
        border: none;

        .table-responsive {
            tr:last-child {
                @include themify {
                    border-bottom-color: themed('gray-lite');
                }
            }
        }
    }

    .payment-instructions {
        margin-top: 30px;

        .instruction {
            padding: 0 15px 15px;
        }
    }
}

.wizard-inner {
    position: relative;

    .progress {
        position: absolute;
        left: 0;
        right: 0;
        top: 55px;
        height: 3px;
        box-shadow: none;
        margin: auto;
        width: 66.66%;
        margin-bottom: 0;

        @include themify {
            background: themed('white-lite');
        }

        .progress-bar {
            @include themify {
                background: themed('primary');
            }
        }
    }
}

.ship-to-a-different-address {
    margin: 20px 15px 30px 15px;
    float: left;
    transition: 200ms ease-in-out;

    &.clicked {
        ~ .continue-button {
            margin-top: 5px;
        }
    }
}

.payment {
    .payment-method {
        margin: 0 15px;
        padding-bottom: 20px;

        @include themify {
            border-bottom: 1px solid themed('gray-lite');
        }

        > li {
            display: block;
            margin-bottom: 15px;
            padding: 0;

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

            > p {
                font-size: 14px;
                margin-left: 28px;
            }
        }

        > .error-message {
            margin-top: 5px;
        }

        .radio {
            margin-bottom: 6px;
        }

        label {
            font-weight: 600;
        }
    }
}

@media screen and (max-width: $md) {
    .checkout {
        .checkout-sidebar {
            top: 0;
        }
    }
}

@media screen and (max-width: $sm) {
    .payment {
        margin-top: 0;

        .payment-method {
            li {
                display: block;
            }

            p {
                text-align: left;
            }
        }
    }
}

@media screen and (max-width: $xs) {
    .ship-to-a-different-address {
        margin-top: 10px;
        margin-bottom: 20px;
        float: none;

        ~ .continue-button {
            margin-top: 5px;
        }

        &.clicked {
            ~ .continue-button {
                float: right !important;
                margin-top: 5px;
            }
        }
    }
}
