/* Overlay */
.bs-canvas-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 320px; height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease-out;
}
.bs-canvas-overlay.show {
    opacity: 0.85;
    z-index: 1100;
}

/* Canvas Base */
.bs-canvas {
    position: fixed;
    top: 0;
    width: 320px; /* Fixed width */
    height: 100%;
    overflow-y: auto;
    z-index: 1110;
    background-color: var(--black);;
}

/* Left/Right Slide */
.bs-canvas-left  { left: 0;  transform: translateX(-100%); }
.bs-canvas-right { right: 0; transform: translateX(100%); }

.bs-canvas.show { transform: translateX(0); }

/* Animation */
.bs-canvas-anim {
    transition: transform 0.4s ease-out;
}