/* Pricing Tables */
.pricing-table {
    margin: 10px 0;
    padding: 0 ($grid-gutter-width / 2);
    text-align: center;

    ul {
        list-style: none;
        margin: 20px 0 0 0;
        padding: 0;
    }
    li {
        border-top: if-light(1px solid #ddd, 1px solid $color-dark-2);
        padding: 10px 0;
    }
    h3 {
        background-color: if-light(#eee, $color-dark-2);
        border-radius: corner-values($border-small $border-small 0 0);
        font-size: 1.3em;
        font-weight: normal;
        margin: -20px -20px 50px -20px;
        padding: 20px;
        .desc {
            font-size: 0.7em;
            line-height: 24px;
            margin-bottom: 0;
            padding-bottom: 0;
            font-style: normal;
            text-transform: none;
            display: block;
        }
        span {
            background: if-light(#fff, $color-dark-3);
            border: if-light(5px solid #fff, 5px solid $color-dark-5);
            box-shadow: if-light((0 5px 20px #ddd inset, 0 3px 0 #999 inset), (0 5px 20px $color-dark-5 inset, 0 3px 0 $color-dark-3 inset));
            border-radius: 100px;
            display: block;
            font: bold 25px / 95px Georgia, Serif;
            height: 100px;
            margin: 20px auto -65px;
            width: 100px;
        }
    }
    .most-popular {
        border: if-light(3px solid #ccc, 3px solid $color-dark-3);
        box-shadow: 11px 0 10px -10px rgba(0, 0, 0, 0.1), -11px 0 10px -10px rgba(0, 0, 0, 0.1);
        padding: 30px 20px;
        top: -10px;
        z-index: 2;
        @media #{$screen-medium} {
            top: 0;
        }
        h3 {
            background-color: if-light(#666, $color-dark-3);
            text-shadow: if-light(0 1px #555, none);
            padding-top: 30px;
        }
    }
    .plan-ribbon-wrapper {
        height: 88px;
        overflow: hidden;
        position: absolute;
        #{$right}: -3px;
        top: -5px;
        width: 85px;
    }

    .plan-ribbon {
        @include if-ltr {
            @include transform(rotate(45deg));
        }
        @include if-rtl {
            @include transform(rotate(-45deg));
        }
        @include background-image(linear-gradient(top, #bfdc7a, #8ebf45));
        background-color: if-light(#bfdc7a, $color-dark-3);
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
        color: #333;
        font-size: 14px;
        #{$left}: -5px;
        padding: 7px 0;
        position: relative;
        text-align: center;
        text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
        top: 15px;
        width: 120px;
        &:before {
            #{$left}: 0;
            border-#{$left}: 3px solid transparent;
            border-#{$right}: 3px solid transparent;
            bottom: -3px;
            content: "";
            position: absolute;
        }
        &:after {
            border-#{$left}: 3px solid transparent;
            border-#{$right}: 3px solid transparent;
            bottom: -3px;
            content: "";
            position: absolute;
            #{$right}: 0;
        }
    }
    [class*="col-md-"] {
        padding-#{$left}: 0;
        padding-#{$right}: 0;
    }
    .plan {
        background: if-light(#fff, $color-dark-3);
        border: if-light(1px solid #ddd, 1px solid $color-dark-3);
        text-shadow: if-light(0 1px rgba(255, 255, 255, 0.8), none);
        border-radius: $border-normal;
        margin-bottom: 35px;
        margin-#{$right}: 0;
        padding: 20px;
        position: relative;
    }
    .btn {
        margin-top: 5px;
    }

    &.pricing-table-sm {
        h3 {
            .desc {
                font-size: 0.7em;
            }
            span {
                border: if-light(3px solid #fff, 3px solid $color-dark-5);
                box-shadow: if-light((0 5px 20px #ddd inset, 0 3px 0 #999 inset), (0 5px 20px $color-dark-5 inset, 0 3px 0 $color-dark-3 inset));
                font: bold 19px/65px Georgia,serif;
                height: 70px;
                margin: 10px auto -65px;
                width: 70px;
            }
        }
        .most-popular {
            padding-bottom: 30px;
        }
    }

    &.pricing-table-flat {
        .plan {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 15px;
            margin: -1px;
            h3 {
                padding-left: 0;
                padding-right: 0;
                margin: -20px 0 0;
                background-color: #666;
                padding-top: 30px;
                text-shadow: 0 1px #555;
                span {
                    border-radius: 0;
                    border: 0;
                    background: #666;
                    font-size: 600;
                    box-shadow: none;
                    width: 100%;
                    font-size: 1.5em;
                    height: auto;
                    line-height: 38px;
                    margin: 0;
                }
            }
            ul {
                margin-top: 0;
                margin-bottom: -15px;
                li {
                    padding: 8px 0;
                }
            }
            &.most-popular {
                ul {
                    li {
                        padding: 10px 0;
                    }
                }
            }
        }

        .btn-top {
            margin-top: 13px;
            margin-bottom: 13px;
        }
        .btn-bottom {
            margin-top: 30px;
        }

        .plan-btn-bottom {
            li:last-child {
                border-bottom: if-light(1px solid #ddd, 1px solid $color-dark-2);
            }
        }
    }

    &.spaced {
        [class*="col-md-"] {
            padding-#{$left}: 2px;
            padding-#{$right}: 2px;
        }
    }

    &.no-borders {
        .plan {
            border: 0 !important;
        }
    }
}

/* Responsive */
@media #{$screen-medium} {

    /* Pricing Tables */
    .pricing-table {
        margin-#{$left}: 0px;
        .plan {
            margin-#{$right}: 0;
        }
    }
}