@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        height: 100vh;
        width: 70%;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        padding: 1rem 0;
    }
    .main-content {
        margin-left: 0;
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
        backdrop-filter: blur(var(--sidebar-mobile-blur));
        -webkit-backdrop-filter: blur(var(--sidebar-mobile-blur));
    }
    body.sidebar-open .main-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }
    .sidebar-header .menu-toggle {
        display: flex;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        margin-right: 1.5rem;
    }
    #mobile-menu-toggle-placeholder {
        display: block;
    }
    #mobile-menu-toggle-placeholder .menu-toggle {
        display: flex;
    }
    #mobile-menu-toggle-placeholder .menu-toggle .icon-close {
        display: none;
    }
    .sidebar-header .menu-toggle .icon-open {
        display: none;
    }
    body.sidebar-open #mobile-menu-toggle-placeholder .menu-toggle .icon-open {
        display: flex;
        opacity: 0;
        transform: scale(0);
    }
    body.sidebar-open #mobile-menu-toggle-placeholder .menu-toggle .icon-close {
        display: none;
    }
}