/*--------------------------------------------------------------
>> Slide-in Column for Mobile
----------------------------------------------------------------*/

/* Styles for mobile devices */
@media (max-width: 767px) {
  .mobile-sidebar {
    position: fixed;
    right: -100%;
    top: 0;
    width: 80% !important;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
    transition: right 0.4s ease-in-out;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    padding-left: 3%;
    padding: 25% 3% 15% 3%;
  }

    .mobile-sidebar.open {
        right: 0; /* Slide the sidebar into view */
    }

    /* Button to trigger the sidebar */
    .toggle-sidebar-btn {
        display: block; /* Show the toggle button only on mobile */
    }
}

/* Styles for desktop and larger screens */
@media (min-width: 768px) {
    .mobile-sidebar {
        position: static; /* Normal flow on desktop */
        right: auto; /* Reset right positioning */
        width: auto; /* Reset width */
        height: auto; /* Reset height */
        box-shadow: none; /* Remove box-shadow if not needed on desktop */
        overflow: visible; /* Ensure content is not clipped */
    }

    .toggle-sidebar-btn {
        display: none; /* Hide the toggle button on desktop */
    }
}