/* General Body Styling (Optional - prevent scroll when open) */

body.offcanvas-active {

    overflow: hidden;

}



/* Overlay */

.offcanvas-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Transition for fade */

}



.offcanvas-overlay.active {

    opacity: 1;

    visibility: visible;

    transition: opacity 0.3s ease-in-out;

}



/* Off-Canvas Container */

.offcanvas-container {

    position: fixed;

    top: 0;

    right: 0;

    height: 100%;

    width: 50%; /* Default width for larger screens */

    max-width: 600px; /* Optional: max width */

    background-color: var(--m1-color);

    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);

    z-index: 1001; /* Above overlay */

    transform: translateX(100%); /* Start off-screen */

    transition: transform 0.3s ease-in-out; /* Slide animation */

    display: flex;

    flex-direction: column; /* Stack close button and content */

    overflow: hidden; /* Hide overflow during transition */

}



.offcanvas-container.active {

    transform: translateX(0); /* Slide in */

}



/* Close Button */

.offcanvas-close {

    position: absolute;

    top: 0px;

    right: 50px; /* Position inside the container */

    background: none;

    border: none;

    font-size: 2.5rem; /* Make X bigger */

    line-height: 1;

    cursor: pointer;

    padding: 5px;

    z-index: 1002; /* Ensure it's clickable */

    background-color: red;

    color: white;

    aspect-ratio: 1 / 1;

    width: 50px;

    border-bottom-left-radius: var(--l-radius);

    border-bottom-right-radius: var(--l-radius);

}

.offcanvas-close:hover {

    color: var(--s1-color);

}





/* Iframe Content Area */

.offcanvas-content {

    flex-grow: 1; /* Take remaining height */

    overflow-y: auto; /* Allow scrolling within the iframe area if needed */

    /*padding-top: 50px; /* Add padding so content isn't under the close button */

    height: 100%;

    box-sizing: border-box;

}



#offcanvas-iframe {

    width: 100%;

    height: 100%;

    border: none;

    display: block; /* Remove extra space below iframe */

}



/* Responsive: Mobile screens */

@media (max-width: 768px) {

    .offcanvas-container {

        width: 100%; /* Full width on smaller screens */

        max-width: none;

    }

    .offcanvas-close {

        font-size: 2rem;

        top: 0px;

        right: 50px;

    }

     .offcanvas-content {

        padding-top: 0px; /* Adjust padding for potentially larger button tap area */

    }

}