.mpf-timeline{
  position:relative;
  width:100%;
  --mpf-line-base:#DDE3E9;
  --mpf-line-progress:#66CC66;
  --mpf-dot-bg:#66CC66;
  --mpf-dot-icon:#FFFFFF;
  --mpf-title:#2B2F33;
  --mpf-text:#5B646D;
  --mpf-line-w:3px;
  --mpf-dot:56px;
  --mpf-gap:34px;
}

.mpf-tl-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:var(--mpf-line-w);
  transform:translateX(-50%);
  pointer-events:none;
}

.mpf-tl-line-base,
.mpf-tl-line-progress{
  position:absolute;
  left:0;
  width:100%;
  border-radius:999px;
}

.mpf-tl-line-base{
  top:0;
  bottom:0;
  background:var(--mpf-line-base) !important;
  opacity:.9;
}

.mpf-tl-line-progress{
  top:0;
  height:0;
  background:var(--mpf-line-progress) !important;
}

.mpf-tl-items{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--mpf-gap);
  padding:8px 0;
}

.mpf-tl-item{
  position:relative;
  display:grid;
  grid-template-columns: 1fr var(--mpf-dot) 1fr;
  align-items:center;
  min-height:var(--mpf-dot);
}

.mpf-tl-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:var(--mpf-dot);
  align-self:center;
}

.mpf-tl-item.is-left .mpf-tl-content{
  grid-column:1;
  justify-self:end;
  text-align:right;
  padding-right:18px;
}

.mpf-tl-item.is-right .mpf-tl-content{
  grid-column:3;
  justify-self:start;
  text-align:left;
  padding-left:18px;
}

.mpf-tl-dot{
  grid-column:2;
  width:var(--mpf-dot);
  height:var(--mpf-dot);
  border-radius:999px;
  background:var(--mpf-dot-bg) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  align-self:center;
  justify-self:center;
}

.mpf-tl-dot i,
.mpf-tl-dot svg{
  color:var(--mpf-dot-icon) !important;
  fill:var(--mpf-dot-icon) !important;
  width:22px;
  height:22px;
}

.mpf-tl-title{
  color:var(--mpf-title) !important;
  font-weight:600;
  line-height:1.2;
}

.mpf-tl-text{
  margin-top:6px;
  color:var(--mpf-text) !important;
  line-height:1.5;
  opacity:.95;
}

@media (max-width: 767px){
  .mpf-tl-line{ left:18px; transform:none; }
  .mpf-tl-item{
    grid-template-columns: var(--mpf-dot) 1fr;
    column-gap:14px;
    align-items:flex-start;
  }
  .mpf-tl-item .mpf-tl-dot{ grid-column:1; }
  .mpf-tl-item .mpf-tl-content{
    grid-column:2;
    justify-self:start;
    text-align:left;
    padding:6px 0 0 0;
    min-height:auto;
  }
  .mpf-tl-item.is-left .mpf-tl-content,
  .mpf-tl-item.is-right .mpf-tl-content{
    padding:6px 0 0 0;
  }
}

.mpf-horizontal{
  position:relative;
  width:100%;
  padding:24px 0;
  --mpf-gap-x:28px;
}

.mpf-th-line{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:var(--mpf-line-w);
  transform:translateY(-50%);
  pointer-events:none;
}

.mpf-th-line-base,
.mpf-th-line-progress{
  position:absolute;
  top:0;
  height:100%;
  border-radius:999px;
}

.mpf-th-line-base{
  left:0;
  right:0;
  background:var(--mpf-line-base) !important;
  opacity:.9;
}

.mpf-th-line-progress{
  left:0;
  width:0;
  background:var(--mpf-line-progress) !important;
}

.mpf-th-items{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:var(--mpf-gap-x);
}

.mpf-th-item{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mpf-th-dot{
  width:var(--mpf-dot);
  height:var(--mpf-dot);
  border-radius:999px;
  background:var(--mpf-dot-bg) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  z-index:2;
}

.mpf-th-dot i,
.mpf-th-dot svg{
  color:var(--mpf-dot-icon) !important;
  fill:var(--mpf-dot-icon) !important;
  width:20px;
  height:20px;
}

.mpf-th-label{
  max-width:220px;
  text-align:center;
}

.mpf-th-title{
  color:var(--mpf-title) !important;
  font-weight:600;
  line-height:1.2;
  margin:0 !important;
  padding:0 !important;
}

.mpf-th-text{
  margin-top:6px;
  color:var(--mpf-text) !important;
  line-height:1.5;
}

.mpf-th-item.is-top{
  justify-content:flex-end;
  padding-bottom: calc(var(--mpf-dot) / 2 + 10px);
}

.mpf-th-item.is-top .mpf-th-label{
  order:1;
  margin-bottom:12px;
}

.mpf-th-item.is-top .mpf-th-dot{
  order:2;
}

.mpf-th-item.is-bottom{
  justify-content:flex-start;
  padding-top: calc(var(--mpf-dot) / 2 + 10px);
}

.mpf-th-item.is-bottom .mpf-th-dot{
  order:1;
}

.mpf-th-item.is-bottom .mpf-th-label{
  order:2;
  margin-top:12px;
}

@media (max-width: 767px){
  .mpf-horizontal{
    padding:10px 0;
  }
  .mpf-th-line{
    left:18px;
    right:auto;
    top:0;
    bottom:0;
    width:var(--mpf-line-w);
    height:auto;
    transform:none;
  }
  .mpf-th-line-base,
  .mpf-th-line-progress{
    left:0;
    width:100%;
  }
  .mpf-th-line-base{
    top:0;
    bottom:0;
  }
  .mpf-th-line-progress{
    top:0;
    height:0;
    width:100%;
  }
  .mpf-th-items{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding-left: calc(var(--mpf-dot) + 18px);
  }
  .mpf-th-item{
    flex:none;
    flex-direction:row;
    align-items:flex-start;
    padding:0 !important;
  }
  .mpf-th-dot{
    margin-left: calc(-1 * (var(--mpf-dot) + 18px));
    margin-right:14px;
  }
  .mpf-th-label{
    text-align:left;
    max-width:none;
  }
}

.mpf-horizontal{
  position:relative;
  width:100%;
  padding:24px 0;
  --mpf-gap-x:28px;
}

.mpf-th-line{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:var(--mpf-line-w);
  transform:translateY(-50%);
  pointer-events:none;
}

.mpf-th-line-base,
.mpf-th-line-progress{
  position:absolute;
  top:0;
  height:100%;
  border-radius:999px;
}

.mpf-th-line-base{
  left:0;
  right:0;
  background:var(--mpf-line-base) !important;
  opacity:.9;
}

.mpf-th-line-progress{
  left:0;
  width:0;
  background:var(--mpf-line-progress) !important;
}

.mpf-th-items{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:var(--mpf-gap-x);
}

.mpf-th-item{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mpf-th-dot{
  width:var(--mpf-dot);
  height:var(--mpf-dot);
  border-radius:999px;
  background:var(--mpf-dot-bg) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  z-index:2;
}

.mpf-th-dot i,
.mpf-th-dot svg{
  color:var(--mpf-dot-icon) !important;
  fill:var(--mpf-dot-icon) !important;
  width:20px;
  height:20px;
}

.mpf-th-label{
  max-width:220px;
  text-align:center;
}

.mpf-th-title{
  color:var(--mpf-title) !important;
  font-weight:600;
  line-height:1.2;
  margin:0 !important;
  padding:0 !important;
}

.mpf-th-text{
  margin-top:6px;
  color:var(--mpf-text) !important;
  line-height:1.5;
}

.mpf-th-item.is-top{
  justify-content:flex-end;
  padding-bottom: calc(var(--mpf-dot) / 2 + 10px);
}

.mpf-th-item.is-top .mpf-th-label{
  order:1;
  margin-bottom:12px;
}

.mpf-th-item.is-top .mpf-th-dot{
  order:2;
}

.mpf-th-item.is-bottom{
  justify-content:flex-start;
  padding-top: calc(var(--mpf-dot) / 2 + 10px);
}

.mpf-th-item.is-bottom .mpf-th-dot{
  order:1;
}

.mpf-th-item.is-bottom .mpf-th-label{
  order:2;
  margin-top:12px;
}

@media (max-width: 767px){
  .mpf-horizontal{
    padding:10px 0;
  }
  .mpf-th-line{
    left:18px;
    right:auto;
    top:0;
    bottom:0;
    width:var(--mpf-line-w);
    height:auto;
    transform:none;
  }
  .mpf-th-line-base,
  .mpf-th-line-progress{
    left:0;
    width:100%;
  }
  .mpf-th-line-base{
    top:0;
    bottom:0;
  }
  .mpf-th-line-progress{
    top:0;
    height:0;
    width:100%;
  }
  .mpf-th-items{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding-left: calc(var(--mpf-dot) + 18px);
  }
  .mpf-th-item{
    flex:none;
    flex-direction:row;
    align-items:flex-start;
    padding:0 !important;
  }
  .mpf-th-dot{
    margin-left: calc(-1 * (var(--mpf-dot) + 18px));
    margin-right:14px;
  }
  .mpf-th-label{
    text-align:left;
    max-width:none;
  }
}


/* Vertical alignment hardening */
.mpf-vertical .mpf-tl-item{
  align-items:center;
  align-content:center;
}

.mpf-vertical .mpf-tl-content,
.mpf-vertical .mpf-tl-dot{
  grid-row:1;
  align-self:center;
}

.mpf-vertical .mpf-tl-content{
  justify-content:center;
}

.mpf-vertical .mpf-tl-title,
.mpf-vertical .mpf-tl-text{
  margin:0 !important;
  padding:0 !important;
}

.mpf-vertical .mpf-tl-item.is-left .mpf-tl-content{
  align-items:flex-end;
}

.mpf-vertical .mpf-tl-item.is-right .mpf-tl-content{
  align-items:flex-start;
}


/* Horizontal endpoints + true start/end */
.mpf-horizontal .mpf-th-line{
  left: calc(var(--mpf-dot) / 2);
  right: calc(var(--mpf-dot) / 2);
}

.mpf-horizontal .mpf-th-items{
  justify-content:space-between;
  gap:0;
}

.mpf-horizontal .mpf-th-item{
  flex:0 0 auto;
}


/* Mobile fix: force both sides into 2-column layout */
@media (max-width: 767px){
  .mpf-vertical .mpf-tl-item.is-left .mpf-tl-content,
  .mpf-vertical .mpf-tl-item.is-right .mpf-tl-content{
    grid-column:2 !important;
    justify-self:start !important;
    text-align:left !important;
    padding:6px 0 0 0 !important;
  }
  .mpf-vertical .mpf-tl-item.is-left .mpf-tl-dot,
  .mpf-vertical .mpf-tl-item.is-right .mpf-tl-dot{
    grid-column:1 !important;
  }
}


/* Mobile: ensure icon is perfectly centered inside dot (Font Awesome baseline fixes) */
@media (max-width: 767px){
  .mpf-vertical .mpf-tl-dot{
    font-size:22px;
  }
  .mpf-vertical .mpf-tl-dot i,
  .mpf-vertical .mpf-tl-dot svg{
    display:block !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
  .mpf-vertical .mpf-tl-dot i{
    width:1em !important;
    height:1em !important;
  }
}


/* Mobile: line centered through dot circles */
@media (max-width: 767px){
  .mpf-vertical .mpf-tl-line{
    left: calc(var(--mpf-dot) / 2) !important;
    transform: translateX(-50%) !important;
  }
}