/* Ali Process Scroll Widget - FIXED (pixel aligned + real dynamic controls) */

.ali-process-wrap{
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Desktop: horizontal roadmap */
.ali-process-wrap .ali-process{
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 60px;
  z-index: 2;
  box-sizing: border-box !important;
}

.ali-process-wrap .ali-process-step{
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  z-index: 2;
  box-sizing: border-box !important;
}

.ali-process-wrap .ali-process-circle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px;   /* Elementor control overrides */
  height: 46px;  /* Elementor control overrides */
  border-radius: 999px !important;
  border: 2px solid #D6DEE6;
  background: #fff;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box !important;
  user-select: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.ali-process-wrap .ali-process-text{
  margin-top: 18px;
  width: 100%;
}

.ali-process-wrap .ali-process-title{
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
}

.ali-process-wrap .ali-process-desc{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}

/* Line: positioned by JS so it is perfectly centered behind circles */
.ali-process-wrap .ali-process-line-track{
  position: absolute !important;
  height: 2px; /* Elementor thickness overrides */
  background: #D6DEE6;
  z-index: 1;
  overflow: hidden;
  border-radius: 999px;
  box-sizing: border-box !important;
}

.ali-process-wrap .ali-process-line-fill{
  width: 0%;
  height: 100%;
  background: #136B9E;
  border-radius: 999px;
  transition: width .25s ease, height .25s ease;
}

/* Active */
.ali-process-wrap .ali-process-step.is-active .ali-process-circle{
  background: #136B9E;
  border-color: #136B9E;
  color: #fff;
}

/* ---------------- Mobile: vertical roadmap ---------------- */
@media (max-width: 767px){

  /* =========================
     Mobile: Centered timeline
     - circles centered
     - text stacked below circle
     - vertical line through center
     - line never blocks text (mask)
     - sizes driven by Elementor controls
     ========================= */

  .ali-process-wrap{
    padding-top: 0;
  }

  .ali-process-wrap .ali-process{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 34px;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .ali-process-wrap .ali-process-step{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    position: relative;
    z-index: 4; /* content above line */
  }

  /* Circle shape is locked; size comes from Elementor (responsive control) */
  .ali-process-wrap .ali-process-circle{
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    box-sizing: border-box;

    flex: 0 0 auto;
    flex-shrink: 0;

    position: relative;
    z-index: 6; /* above line */
    line-height: 1;
    padding: 0;

    /* Dynamic white halo so the line never visually touches the circle edge */
    box-shadow: 0 0 0 calc(var(--ali-circle-size, 48px) / 5) #fff;
  }

  /* Text stacked below and "cuts" the line behind it */
  .ali-process-wrap .ali-process-text{
    margin-top: 14px;
    width: 100%;
    position: relative;
    z-index: 7;

    display: inline-block;
    background: #fff;
    padding: 10px 18px;
    border-radius: 14px;
  }

  /* Vertical line centered and behind everything */
  .ali-process-wrap .ali-process-line-track{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: 0;
    bottom: 0;

    width: var(--ali-line-width, 2px);
    height: auto;

    z-index: 1; /* behind */
  }

  .ali-process-wrap .ali-process-line-fill{
    width: 100%;
    height: 0%;
    z-index: 2;
  }
}