/**
*
* Shopping Cart V5 CSS
* ========================
*
* Created to house shopping cart related CSS
* This includes the checkout process 
* No unsecure URLs PLEASE
*
**/

/* CartStatus */
.cart-status__count {
    position: absolute;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    text-align: center;
    line-height: .75rem;
}

.cart-status__icon:not(.cart-status__icon__img) .cart-status__count {
    top: -5px;
    right: -10px;
    background-color: #d20048;
    color: #fff;
    font-size: .7em;
}

.cart-status__icon.cart-status__icon__img .cart-status__count {
    top: -2px;
    right: 7px;
    color: #d20048;
    font-size: .9em;
    font-weight: bold;
}

.cart-status__icon.cart-status__icon__img {
    margin-left: -4px;
}

.cart-status__icon > img {
    width: 26px;
    transform: rotate(0deg) scaleX(-1);
    vertical-align: text-bottom;
}

.cart-status__checkout-btn {
    background-color: #000 !important;
    border-color: #000 !important;
    border-radius: 0px !important;
    padding: .75rem !important;
    text-transform: uppercase !important;
}

/* ViewCartItems */
.shopping-cart-v5 .cart-item-image {
    flex: 0 0 150px;
}

.shopping-cart-v5 .cart-item-details {
    flex: 1 1 auto;
}

/* ViewCartSummary */
.shopping-cart-v5 .cart-summary {
    border-top: 1px solid #dee2e6;
}

@media (min-width: 992px) {
    .shopping-cart-v5 .cart-summary {
        border-top: none;
        background-color: #f8f9fa;
        position: sticky;
        top: 1rem;
        z-index: 1;
    }
}


/* Checkout */
.shopping-cart-header-v5 .header-logo {
    max-width: 10rem;
}

    .shopping-cart-header-v5 .header-logo img {
        max-height: 3.5rem;
    }

@media (min-width: 992px) {
    .shopping-cart-header-v5 .header-logo {
        max-width: 14rem;
    }
}




/* Forms */
.cart-forms .form-group {
    position: relative;
    margin: .5em auto
}

    .cart-forms .form-group .form-control {
        padding: .75rem;
        background: #fff !important;
        border-radius: 3px;
        color: #656d78;
        transition: all .15s ease;
        height: auto;
        line-height: initial;
        background-clip: padding-box;
        min-height: 48px;
        height: 48px;
        max-height: 48px;
    }

        .cart-forms .form-group .form-control + .form-label {
            position: absolute;
            top: .8rem;
            left: 1.15rem;
            color: #636363;
            font-size: .9rem;
            transform-origin: 0 0;
            transition: all .2s ease;
            pointer-events: none
        }

    .cart-forms .form-group textarea.form-control {
        min-height: 8em
    }

    .cart-forms .form-group select.form-control + .form-label {
        transform: none !important
    }

    .cart-forms .form-group select.form-control:focus + .form-label, .cart-forms .form-group select.form-control.__selected + .form-label {
        transform: translateY(-9px) translateX(-9px) scale(.8) !important;
        display: inline-block;
        padding: 0 .25em;
        border-radius: 3px;
    }

    .cart-forms .form-group .form-control:focus + .form-label, .cart-forms .form-group .form-control.__selected + .form-label {
        transform: translateY(-9px) translateX(-9px) scale(.8);
        display: inline-block;
        padding: 0 .25em;
        border-radius: 3px;
    }

    .cart-forms .form-group .form-control:not(:placeholder-shown) + .form-label {
        transform: translateY(-9px) translateX(-9px) scale(.8);
        display: inline-block;
        padding: 0 .25em;
        border-radius: 3px;
    }

    .cart-forms .form-group .form-control:-webkit-autofill + .form-label {
        transform: translateY(-9px) translateX(-9px) scale(.8);
        display: inline-block;
        padding: 0 .25em;
        border-radius: 3px;
    }

    .cart-forms .form-group .form-control:not(:-ms-input-placeholder) + .form-label {
        transform: translateY(-9px) translateX(-9px) scale(.8);
        display: inline-block;
        padding: 0 .25em;
        border-radius: 3px;
    }

    .cart-forms .form-group .form-control:focus {
        background: none;
        outline: none;
    }

        .cart-forms .form-group .form-control:focus,
        .cart-forms .form-group .form-control:not(:placeholder-shown),
        .cart-forms .form-group .form-control:-webkit-autofill {
            padding: 1.25rem .75rem .25rem;
        }

    .cart-forms .form-group select.form-control:focus,
    .cart-forms .form-group select.form-control:not(:placeholder-shown),
    .cart-forms .form-group select.form-control:-webkit-autofill {
        padding: 1.25rem 1rem 0.25rem 0.5rem
    }

    .cart-forms .form-group .form-control:disabled {
        background-color: #e9ecef !important
    }



.skeleton-loader {
    background-color: #ebebeb;
    animation: skeleton-loader-animation 0.75s infinite alternate;
}

@keyframes skeleton-loader-animation {
    0% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}