.offcanvas {
    background-color: rgba(19, 30, 43, 0.4) !important;
    -webkit-backdrop-filter: saturate(180%) blur(50px);
    backdrop-filter: saturate(180%) blur(30px);
    z-index: 9999 !important;
    border: 0px !important;
    border-radius: 20px !important;
    padding: 15px !important;
}

.offcanvas-modal {
    top: 50%;
    left: 50%;
    width: 330px;
    max-width: 90%;
    bottom: auto !important;
    right: auto !important;
    max-height: auto !important;
}

/* Center the offcanvas */
#action-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 320px;
    max-width: 90%;
    z-index: 1055;
    height: auto !important;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show state */
#action-canvas.show, #confirm-modal.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Animation keyframes */
@keyframes scaleIn {
    from {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes scaleOut {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    to {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

#action-canvas.showing {
    animation: scaleIn 0.3s forwards;
}

#action-canvas.hiding {
    animation: scaleOut 0.3s forwards;
}