// Thelia : Checkout

// Step 3
#cart-address {
    .panel {
        .box-shadow(none);
        border: none;
    }
}

#payment-method.panel {
    .panel-body {
        text-align: center;
    }
    .radio {
        // Add a hover state
        label {
            > img {
                border: 1px solid #ddd;
                border-radius: @border-radius-base;
                .opacity(.4);
                &:hover,
                &:focus {
                    .opacity(1);
                    .transition(opacity 200ms ease-in-out);
                }
            }
        }
    }
}

#payment-method {
    .list-group-item {
        border: none;
    }
}

.js #payment-method {
    .radio {
        .active > img,
        input:checked + img {
            .opacity(1);
        }
    }
}

// Checkout - Progress
.checkout-progress {
    .btn-step {
        padding: 16px 24px;
        background: @gray-lighter;
        color: @gray;

        + .btn-step {
            border-left: 1px solid @gray;
        }

        .step-nb {
            border-right: 1px solid @text-color;
            font-size: 30px;
            line-height: 0;
            font-weight: 600;
            padding-right: 6px;
            vertical-align: middle;
        }

        .step-label {
            font-size: ceil(@font-size-base * 1.4);
            font-weight: 100;
            min-width: 250px;
            padding-left: 6px;
            vertical-align: middle;
        }

        &:hover,
        &:focus,
        &:active,
        &.active {
            color: #fff;
            background: @brand-primary;

            .step-nb {
                border-right: 1px solid #fff;
            }
        }

        &.active {
            background: @brand-primary;
            cursor: default;
            display: inherit;
            pointer-events: none; // Future-proof disabling of clicks
        }
    }
}