/**
 * Mobile Off-Canvas Menu Styles
 *
 * @package MultiBuilder
 */

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

.mb-mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--mb-transition-base);
}

.mb-mobile-menu-overlay--visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Off-Canvas Panel
   ========================================================================== */

.mb-mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    background: var(--mb-color-white);
    box-shadow: var(--mb-shadow-xl);
    overflow-y: auto;
    overflow-x: hidden;
    transition: right var(--mb-transition-slow);
    -webkit-overflow-scrolling: touch;
}

.mb-mobile-menu--open {
    right: 0;
}

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

.mb-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mb-spacing-md) var(--mb-spacing-lg);
    border-bottom: 1px solid var(--mb-color-border);
    min-height: 64px;
}

.mb-mobile-menu-header .mb-site-logo img {
    max-height: 36px;
}

.mb-mobile-menu-header .mb-site-title {
    font-size: var(--mb-font-size-lg);
}

.mb-mobile-menu-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mb-color-bg-alt);
    border: none;
    border-radius: var(--mb-border-radius-full);
    cursor: pointer;
    color: var(--mb-color-text);
    transition: all var(--mb-transition-fast);
}

.mb-mobile-menu-close:hover {
    background: var(--mb-color-primary);
    color: var(--mb-color-white);
}

/* ==========================================================================
   Menu Content
   ========================================================================== */

.mb-mobile-menu-content {
    padding: var(--mb-spacing-md) 0;
}

/* Navigation List */
.mb-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mb-mobile-nav-list li {
    border-bottom: 1px solid var(--mb-color-border);
}

.mb-mobile-menu-item-inner {
    display: flex;
    align-items: center;
}

.mb-mobile-menu-item-inner a {
    flex: 1;
    display: block;
    padding: var(--mb-spacing-md) var(--mb-spacing-lg);
    color: var(--mb-color-text);
    font-size: var(--mb-font-size-md);
    font-weight: var(--mb-font-weight-medium);
    transition: all var(--mb-transition-fast);
}

.mb-mobile-menu-item-inner a:hover,
.mb-mobile-nav-list .current-menu-item > .mb-mobile-menu-item-inner > a {
    color: var(--mb-color-primary);
    background-color: var(--mb-color-bg-alt);
}

/* Sub-menu toggle button */
.mb-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    border-left: 1px solid var(--mb-color-border);
    color: var(--mb-color-text-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--mb-transition-fast);
}

.mb-mobile-submenu-toggle:hover {
    background: var(--mb-color-bg-alt);
    color: var(--mb-color-primary);
}

.mb-mobile-submenu-toggle svg {
    transition: transform var(--mb-transition-base);
}

.mb-submenu-open > .mb-mobile-menu-item-inner > .mb-mobile-submenu-toggle svg {
    transform: rotate(180deg);
}

/* Sub-menus */
.mb-mobile-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--mb-color-bg-alt);
}

.mb-mobile-nav-list .sub-menu li {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.mb-mobile-nav-list .sub-menu a {
    padding-left: calc(var(--mb-spacing-lg) + var(--mb-spacing-md));
    font-size: var(--mb-font-size-sm);
}

.mb-mobile-nav-list .sub-menu .sub-menu a {
    padding-left: calc(var(--mb-spacing-lg) + var(--mb-spacing-2xl));
    font-size: var(--mb-font-size-sm);
    color: var(--mb-color-text-light);
}

/* ==========================================================================
   Search (inside mobile menu)
   ========================================================================== */

.mb-mobile-menu-search {
    padding: var(--mb-spacing-lg);
    border-top: 1px solid var(--mb-color-border);
    margin-top: var(--mb-spacing-md);
}

.mb-mobile-menu-search .search-form {
    display: flex;
    gap: var(--mb-spacing-sm);
}

.mb-mobile-menu-search .search-field {
    flex: 1;
}

.mb-mobile-menu-search .search-submit {
    flex-shrink: 0;
}

/* ==========================================================================
   Responsive — show only on mobile/tablet
   ========================================================================== */

@media (min-width: 1024px) {
    .mb-mobile-menu,
    .mb-mobile-menu-overlay {
        display: none !important;
    }
}