.quick-action-section{
    position:relative;
    z-index:999;
}

.quick-action-section .container-xxl{
    position:relative;
    overflow:visible !important;
}

.quick-action-placeholder{
    display:none;
    width:100%;
}

.quick-action-placeholder.active{
    display:block;
}

.quick-action-bar{
    transition:
        box-shadow .35s ease,
        transform .35s ease,
        background-color .35s ease,
        border-radius .35s ease,
        opacity .35s ease;
    transform-origin:center top;
    will-change:transform, opacity, box-shadow;
}

.quick-action-bar.is-sticky{
    position:fixed;
    top:0;
    inset-inline-start:50%;
    transform:translateX(-50%) translateY(0) scale(1);
    width:100%;
    max-width:calc(100% - 24px);
    z-index:9999;

    animation:quickStickyEntrance .42s cubic-bezier(.22,1,.36,1);

    box-shadow:0 14px 34px rgba(0,0,0,.16);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.quick-action-bar.is-sticky.is-animating-out{
    animation:quickStickyExit .28s ease forwards;
}

@keyframes quickStickyEntrance{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(-18px) scale(.965);
        box-shadow:0 4px 10px rgba(0,0,0,.04);
    }
    60%{
        opacity:1;
        transform:translateX(-50%) translateY(4px) scale(1.01);
        box-shadow:0 18px 38px rgba(0,0,0,.18);
    }
    100%{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
        box-shadow:0 14px 34px rgba(0,0,0,.16);
    }
}

@keyframes quickStickyExit{
    0%{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }
    100%{
        opacity:0;
        transform:translateX(-50%) translateY(-10px) scale(.985);
    }
}

@media (max-width: 991px){
    .quick-action-bar.is-sticky{
        max-width:calc(100% - 16px);
    }
}

@media (prefers-reduced-motion: reduce){
    .quick-action-bar,
    .quick-action-bar.is-sticky,
    .quick-action-bar.is-sticky.is-animating-out{
        transition:none !important;
        animation:none !important;
    }
}

@media (max-width: 767px){

    .quick-action-bar.is-sticky{
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        border-radius: 18px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
    }

    .quick-action-bar.is-sticky::-webkit-scrollbar{
        display: none;
    }

    .quick-action-bar.is-sticky .quick-action-item{
        flex: 0 0 138px;
        min-width: 32vw;
        max-width: 32vw;
        min-height: 82px;
        padding: 10px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-inline-end: 1px solid rgba(255,255,255,.22);
        border-bottom: none !important;
    }

    .quick-action-bar.is-sticky .quick-action-item:last-child{
        border-inline-end: none;
    }

    .quick-action-bar.is-sticky .quick-action-item .icon{
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .quick-action-bar.is-sticky .quick-action-item .icon img{
        max-width: 28px;
        max-height: 28px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .quick-action-bar.is-sticky .quick-action-item span:last-child{
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        text-align: start;
    }
}


@media (max-width: 767px) {
    .quick-action-bar.is-sticky .quick-action-item .icon img {
        max-width:none !important;
    }
}

.quick-action-placeholder.active {
    display:none;
}

@media(min-width:992px){
    .quick-action-bar.is-sticky {
        bottom:0 !important;
        top:unset !important;
        
    }
}

#quickActionBar {
    bottom:0px !important;
    top:unset !important;
    border-radius:5px !important;
}

.quick-action-bar.is-sticky .quick-action-item {
    min-height:65px !important;
}