/* ==========================================================
    Mobile Menu
========================================================== */

.mobile-menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:420px;
    max-width:100%;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    z-index:2500;
    transform:translateX(100%);
    transition:transform .35s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.15);
}

.mobile-menu.show {

    transform: translateX(0);

}

/* ==========================================================
    Overlay
========================================================== */

.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .6);

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 2499;

}

.mobile-menu-overlay.show {

    opacity: 1;

    visibility: visible;

}

/* ==========================================================
    Header
========================================================== */

.mobile-menu-header {

    height: 82px;

    padding: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--header);

    color: #fff;

    border-bottom: 2px solid var(--primary);

}

.mobile-menu-title {

    text-align: right;

}

.mobile-menu-title h2 {

    margin: 0;

    font-size: 18px;

}

.mobile-menu-title small {

    opacity: .8;

}

.mobile-menu-close {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    background: rgba(255, 255, 255, .08);
    padding: 6px 1px 0 0;
    color: #fff;

    font-size: 18px;

}

/* ==========================================================
    Body
========================================================== */

.mobile-menu-body {

    flex: 1;

    overflow: auto;

    background: var(--background);

}

/*==========================================================
    Footer
==========================================================*/

.mobile-menu-footer{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 16px;

    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.mobile-menu-footer::-webkit-scrollbar{
    display:none;
}

.mobile-menu-footer > *{
    flex:0 0 auto;
}

.mobile-menu-footer a{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:5px;

    background:var(--surface-alt);

    color:var(--text);

    text-decoration:none;

    transition:.25s;

}
.mobile-menu-footer{
    cursor: grab;
    white-space: nowrap;
}

.mobile-menu-footer a{
    min-width:48px;
}
.mobile-menu-footer a:hover{
    background:var(--primary-soft);
    color:var(--primary);
}

.mobile-menu-footer a:active{

    transform:scale(.95);

}

.mobile-menu-footer i{

    font-size:23px;

}

/* ==========================================
    Desktop Category Button
========================================== */

.desktop-category-button{

    display:flex;
    align-items:center;
    gap:10px;

    height:46px;

    padding:0 18px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-weight:700;

}

.desktop-category-button i{

    font-size:15px;

}