.mobile-sheet-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bs-light, #f8f9fa);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    transition: all .3s ease
}

.mobile-sheet-toggle:hover {
    background-color: rgba(var(--bs-primary-rgb), .1)
}

.mobile-sheet-toggle i.chevron {
    transition: transform .3s ease
}

.mobile-sheet-toggle.open i.chevron {
    transform: rotate(180deg)
}

.mobile-sheet-overlay {
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040
}

.mobile-sheet-overlay.open {
    opacity: 1
}

.mobile-sheet-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 360px;
    height: 100%;
    background-color: var(--bs-white, #ffffff);
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    z-index: 1050
}

.mobile-sheet-container.open {
    transform: translateX(0)
}

.mobile-sheet-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.mobile-sheet-header .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s;
    background-color: var(--bs-gray-100, #f8f9fa)
}

.mobile-sheet-header .close-btn:hover {
    background-color: var(--bs-gray-200, #e9ecef)
}

.mobile-category-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bs-gray-500, #adb5bd);
    font-weight: 600;
    padding: 0 8px;
    margin-bottom: 8px
}

.mobile-sheet-item {
    display: flex;
    align-items: center;
    padding: 3px;
    transition: all .2s ease;
    border-radius: 10px;
    margin-bottom: 5px;
    color: var(--bs-gray-700, #495057);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left
}

.mobile-sheet-item:hover {
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary, #3b82f6)
}

.mobile-sheet-item.active {
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary, #3b82f6);
    font-weight: 500
}

.mobile-icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    background-color: var(--bs-gray-100, #f8f9fa);
    color: var(--bs-gray-600, #6c757d);
    transition: all .2s ease
}

.mobile-sheet-item:hover .mobile-icon-wrapper {
    background-color: rgba(var(--bs-primary-rgb), .15);
    color: var(--bs-primary, #3b82f6)
}

.mobile-sheet-item.active .mobile-icon-wrapper {
    background-color: var(--bs-primary, #3b82f6);
    color: white
}

.mobile-submenu {
    margin: 5px 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
    opacity: 0
}

.mobile-submenu.active {
    max-height: 500px;
    opacity: 1;
    margin: 10px 0
}

.mobile-submenu-link {
    color: var(--bs-gray-700, #495057);
    text-decoration: none;
    transition: all .2s ease;
    border-radius: 8px
}

.mobile-submenu-link.active,
.mobile-submenu-link:hover {
    background-color: rgba(var(--bs-primary-rgb), .05);
    color: var(--bs-primary, #3b82f6)
}

.mobile-submenu-link.active {
    font-weight: 500
}

.mobile-submenu-header {
    color: var(--bs-gray-600, #6c757d)
}

.mobile-support-section {
    background-color: rgba(var(--bs-primary-rgb), .05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px
}

.mobile-support-btn {
    border-radius: 8px;
    background: var(--bs-primary, #3b82f6);
    color: white;
    border: none;
    padding: 8px 16px;
    transition: all .2s ease;
    display: inline-block;
    text-decoration: none
}

.mobile-support-btn:hover {
    background: var(--bs-primary-dark, #2563eb);
    transform: translateY(-1px);
    color: white;
    text-decoration: none
}

.mobile-nested-submenu-toggle {
    color: var(--bs-gray-700, #495057);
    text-decoration: none;
    transition: all .2s ease;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    width: 100%;
    padding: 0;
    text-align: left
}

.mobile-nested-submenu-toggle.active {
    color: var(--bs-primary, #3b82f6);
    font-weight: 500
}

.mobile-nested-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0
}

.px-07 {
    padding-left: .7rem !important;
    padding-right: .7rem !important
}

.mobile-nested-submenu.active {
    max-height: 300px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px
}

.mobile-nested-submenu,
.mobile-submenu {
    will-change: max-height, opacity
}

[data-bs-theme=dark] .mobile-sheet-container {
    background-color: #1e1e2d
}

[data-bs-theme=dark] .mobile-sheet-header .close-btn {
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: #3b82f6
}

[data-bs-theme=dark] .mobile-sheet-item {
    color: #fff
}

[data-bs-theme=dark] .mobile-icon-wrapper {
    background-color: var(--bs-gray-800, #343a40);
    color: var(--bs-gray-400, #ced4da)
}

[data-bs-theme=dark] .mobile-sheet-item.active,
[data-bs-theme=dark] .mobile-sheet-item:hover {
    color: #3b82f6
}

[data-bs-theme=dark] .mobile-category-title,
[data-bs-theme=dark] .mobile-submenu-link {
    color: var(--bs-gray-400, #ced4da)
}

[data-bs-theme=dark] .mobile-support-section {
    background-color: rgba(var(--bs-primary-rgb), .15)
}

[data-bs-theme=dark] .mobile-nested-submenu-toggle {
    color: var(--bs-gray-400, #ced4da)
}

[data-bs-theme=dark] .mobile-nested-submenu-toggle.active,
[data-bs-theme=dark] .mobile-submenu-link.active {
    color: var(--bs-primary, #3b82f6)
}

@media (max-width:576px) {
    .mobile-sheet-container {
        width: 60%
    }
}