/* assets/css/frontend.css */

.mm-toc{
  --mm-toc-height: 340px;
  --mm-toc-gap: 16px;
  --mm-toc-sep: #F0F0F0;
  --mm-toc-muted: #808080;
  --mm-toc-active: #1E2023;

  /* مقدار اولیه پرشدن (طبق درخواست شما) */
  --mm-toc-initial-fill: 47px;

  display: flex;
  align-items: stretch;
  gap: var(--mm-toc-gap);
  width: 100%;

  /* چینش راست‌به‌چپ + نوار سمت راست */
  direction: rtl;
  flex-direction: row-reverse;
}

/* ستون نوار پروگرس */
.mm-toc__progress{
  position: relative;
  width: 16px;
  min-width: 16px;
  height: var(--mm-toc-height);
  flex: 0 0 16px;
}

/* خط پایه */
.mm-toc__track{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0px;
  border-left: 4px solid var(--mm-toc-sep);
  border-radius: 4px;
  transform: translateX(-50%);
}

/* خط پرشونده */
.mm-toc__fill{
  position: absolute;
  left: 50%;
  top: 0;
  width: 0px;
  height: 0%;
  border-left: 4px solid var(--mm-toc-active);
  border-radius: 4px;
  transform: translateX(-50%);
}

/* دایره سر نوار */
.mm-toc__dot{
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  background: var(--mm-toc-active);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* لیست: اسکرول داخل خودش + اسکرول‌بار سمت راست */
.mm-toc__list{
  width: 100%;
  height: var(--mm-toc-height);
  overflow-y: auto;
  overflow-x: hidden;

  /* این ترفند باعث میشه اسکرول‌بار سمت راست بیاد */
  direction: ltr;

  padding-right: 6px;
  box-sizing: border-box;
}

/* متن داخل لیست راست‌چین بماند */
.mm-toc__ul,
.mm-toc__li,
.mm-toc__a{
  direction: rtl;
}

.mm-toc__ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-toc__li{
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--mm-toc-sep);
  box-sizing: border-box;
}

.mm-toc__li:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.mm-toc__a{
  display: block;
  text-decoration: none !important;

  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: Medium !important;
  font-size: 16px !important;
  text-align: right !important;

  color: var(--mm-toc-muted) !important;
}

.mm-toc__a:hover,
.mm-toc__a.is-active{
  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: Medium !important;
  font-size: 16px !important;
  text-align: right !important;

  color: var(--mm-toc-active) !important;
}