/* ─────────────────────────────────────────────
   mobile-nav.css — Mobile Navigation Panel
   ───────────────────────────────────────────── */

/* Mobile Nav Panel (All Menu) */
.mobile-nav-panel {
    position: fixed; top: 0; right: -340px; width: 340px; height: 100vh; height: 100dvh;
    background: #fff; z-index: 2000; box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-nav-panel.open { right: 0; }
.mobile-nav-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
    background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; pointer-events: none;
    transition: opacity 0.4s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

.m-nav-header {
    padding: 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee;
}
.m-nav-header img { height: 35px; }
.m-nav-close { font-size: 1.5rem; color: #111; cursor: pointer; transition: 0.2s; }
.m-nav-close:hover { color: var(--main-brand); transform: scale(1.1); }

.m-nav-list { padding: 5px 0; }
.m-nav-item { border-bottom: 1px solid #f0f0f0; }

/* Level 1 */
.m-nav-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; font-weight: 700; font-size: 1.05rem; color: #111; cursor: pointer;
}
.m-nav-link.active { color: var(--main-brand); }
.m-nav-link i { font-size: 0.8rem; transition: transform 0.3s; color: #999; }
.m-nav-link.open i { transform: rotate(180deg); color: var(--main-brand); }

/* Level 2 */
.m-sub-list { display: none; background: #fafafa; }
.m-mid-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 20px 13px 30px; font-weight: 600; font-size: 0.95rem;
    color: #333; cursor: pointer; border-bottom: 1px solid #f0f0f0;
}
.m-mid-link.active { color: var(--main-brand); }
.m-mid-link i { font-size: 0.7rem; transition: transform 0.3s; color: #bbb; }
.m-mid-link.open i { transform: rotate(180deg); color: var(--main-brand); }

/* Level 3 */
.m-sub-inner { display: none; background: #f3f3f3; padding: 10px 20px 10px 40px; }
.m-sub-inner li { margin-bottom: 10px; }
.m-sub-inner li:last-child { margin-bottom: 5px; }
.m-sub-inner a { color: #666; font-size: 0.9rem; display: block; padding: 4px 0; transition: 0.2s; }
.m-sub-inner a:hover { color: var(--main-brand); }
.m-sub-inner a.active-link { color: var(--main-brand); font-weight: 700; }