/*Loading Cart CSS Start*/
.cart-loading-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-dots::after{
    content: '';
    animation: dots 1.5s steps(4,end) infinite;
}

@keyframes dots{
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
.cart-loading-popup .progress{
    height:100%;
    width:30%;
    background:#2563eb;
    animation: progressMove 1.2s linear infinite;
}

@keyframes progressMove{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(300%)}
}
/*Loading Cart CSS End*/

/* this code for menu cart popup  */
/* CSS for smooth slide-in cart animation */
#cart-popup-container.hidden-cart {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
#cart-popup-container {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
    z-index: 99999;
}
#cart-panel {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#cart-popup-container.hidden-cart #cart-panel {
    transform: translateX(100%);
}
#cart-popup-container:not(.hidden-cart) #cart-panel {
    transform: translateX(0);
}
/* close  */

/* close all style here  */