/*
 * PLAB Multiple Scroll Indicator for Divi
 * Version: 1.3.6
 */

:root {
  --plab-multiple-indicator-line-width: 1px;
  --plab-multiple-indicator-line-color: rgba(0, 0, 0, 0.14);
  --plab-multiple-indicator-line-active-color: #111111;
  --plab-multiple-indicator-line-completed-color: #111111;

  /* Path aliases: these are used by both the current CSS line system and future SVG path mode. */
  --plab-multiple-indicator-path-color: var(--plab-multiple-indicator-line-color);
  --plab-multiple-indicator-path-active-color: var(--plab-multiple-indicator-line-active-color);
  --plab-multiple-indicator-path-completed-color: var(--plab-multiple-indicator-line-completed-color);
  --plab-multiple-indicator-line-base-opacity: 1;
  --plab-multiple-indicator-line-active-opacity: 1;
  --plab-multiple-marker-line-gap: 10px;

  --plab-multiple-marker-upcoming-color: rgba(0, 0, 0, 0.26);
  --plab-multiple-marker-active-color: #111111;
  --plab-multiple-marker-completed-color: rgba(0, 0, 0, 0.78);
  --plab-multiple-marker-upcoming-opacity: 1;
  --plab-multiple-marker-active-opacity: 1;
  --plab-multiple-marker-completed-opacity: 1;

  --plab-multiple-content-upcoming-color: rgba(0, 0, 0, 0.36);
  --plab-multiple-content-active-color: #111111;
  --plab-multiple-content-completed-color: rgba(0, 0, 0, 0.72);
  --plab-multiple-content-upcoming-opacity: 1;
  --plab-multiple-content-active-opacity: 1;
  --plab-multiple-content-completed-opacity: 1;

  --plab-multiple-indicator-transition: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --plab-multiple-indicator-line-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --plab-multiple-section-indicator-left: 38px;
  --plab-multiple-section-indicator-z: 999;
  --plab-multiple-section-marker-gap: 58px;
  --plab-multiple-section-marker-size: 32px;
  --plab-multiple-section-marker-font-size: 12px;
  --plab-multiple-section-marker-size-mobile: 28px;
  --plab-multiple-section-marker-font-size-mobile: 11px;
  --plab-multiple-section-marker-gap-mobile: 44px;
  --plab-multiple-marker-line-gap-mobile: 8px;
  --plab-multiple-section-indicator-left-mobile: 12px;
  --plab-multiple-section-marker-radius: 9px;
  --plab-multiple-section-marker-bg: transparent;
  --plab-multiple-section-marker-active-bg: #a66a2a;
  --plab-multiple-section-marker-completed-bg: transparent;
  --plab-multiple-section-marker-upcoming-text-color: var(--plab-multiple-marker-upcoming-color);
  --plab-multiple-section-marker-active-text-color: #ffffff;
  --plab-multiple-section-marker-completed-text-color: var(--plab-multiple-marker-completed-color);
  --plab-multiple-section-marker-border-color: currentColor;
  --plab-multiple-section-marker-active-border-color: var(--plab-multiple-section-marker-active-bg);
  --plab-multiple-section-marker-completed-border-color: currentColor;
}

/* -----------------------------
   Shared dynamic line layer
   v1.2.4: Firefox-safe SVG connector painting.
   Firefox can fail to paint very thin rotated absolute HTML elements,
   so the connector is now rendered as SVG <line> elements with a 1px minimum.
------------------------------ */
.plab-multiple-indicator-ready {
  position: relative;
}

.plab-multiple-dynamic-line-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.plab-multiple-line-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.plab-multiple-svg-line-base,
.plab-multiple-svg-line-active {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-width: max(1px, var(--plab-multiple-indicator-line-width, 1px));
  fill: none;
  pointer-events: none;
}

.plab-multiple-svg-line-base {
  stroke: var(--plab-multiple-indicator-path-color, var(--plab-multiple-indicator-line-color));
  opacity: var(--plab-multiple-indicator-line-base-opacity, 1);
}

.plab-multiple-svg-line-active {
  stroke: var(--plab-multiple-indicator-path-active-color, var(--plab-multiple-indicator-line-active-color));
  opacity: var(--plab-multiple-indicator-line-active-opacity, 1);
}

.plab-multiple-line-segment {
  position: absolute;
  display: block;
  height: max(1px, var(--plab-multiple-indicator-line-width));
  min-height: 1px;
  transform-origin: 0 50%;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
  transform: translateZ(0);
}

.plab-multiple-line-base,
.plab-multiple-line-active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 1px;
  transform-origin: 0 50%;
  border-radius: 999px;
  pointer-events: none;
  display: block;
  backface-visibility: hidden;
}

.plab-multiple-line-base {
  background: var(--plab-multiple-indicator-path-color, var(--plab-multiple-indicator-line-color));
  opacity: var(--plab-multiple-indicator-line-base-opacity, 1);
}

.plab-multiple-line-active {
  background: var(--plab-multiple-indicator-path-active-color, var(--plab-multiple-indicator-line-active-color));
  opacity: var(--plab-multiple-indicator-line-active-opacity, 1);
  transform: scaleX(0);
  transition: transform var(--plab-multiple-indicator-line-transition);
  will-change: transform;
}

/* Future/optional SVG path compatibility. If a custom indicator design uses SVG paths,
   these same variables can control base and active path colours. */
.plab-multiple-dynamic-line-layer svg .plab-multiple-svg-path-base,
.plab-multiple-dynamic-line-layer svg .plab-multiple-path-base,
.plab-multiple-dynamic-line-layer svg .plab-multiple-svg-line-base {
  stroke: var(--plab-multiple-indicator-path-color, var(--plab-multiple-indicator-line-color));
  stroke-width: var(--plab-multiple-indicator-line-width);
  opacity: var(--plab-multiple-indicator-line-base-opacity, 1);
  fill: none;
}

.plab-multiple-dynamic-line-layer svg .plab-multiple-svg-path-active,
.plab-multiple-dynamic-line-layer svg .plab-multiple-path-active,
.plab-multiple-dynamic-line-layer svg .plab-multiple-svg-line-active {
  stroke: var(--plab-multiple-indicator-path-active-color, var(--plab-multiple-indicator-line-active-color));
  stroke-width: var(--plab-multiple-indicator-line-width);
  opacity: var(--plab-multiple-indicator-line-active-opacity, 1);
  fill: none;
}

/* Optional: keep custom marker modules visually above the line layer. */
.plab-multiple-custom-indicator-marker,
.plab-multiple-indicator-marker,
.plab-multiple-indicator-row-marker,
.plab-multiple-section-progress__link {
  position: relative;
  z-index: 3;
  transition:
    color var(--plab-multiple-indicator-transition),
    opacity var(--plab-multiple-indicator-transition),
    border-color var(--plab-multiple-indicator-transition),
    background-color var(--plab-multiple-indicator-transition),
    transform var(--plab-multiple-indicator-transition);
}

/* -----------------------------
   Custom Divi marker states
   Use these classes on Divi Text/Blurb/Code modules.
------------------------------ */
.plab-multiple-custom-indicator-marker.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-marker.is-upcoming:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-marker.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-marker.is-upcoming:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-marker.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-marker.is-upcoming:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-marker-upcoming-color) !important;
  border-color: var(--plab-multiple-marker-upcoming-color) !important;
}

.plab-multiple-custom-indicator-marker.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-marker.is-active:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-marker.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-marker.is-active:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-marker.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-marker.is-active:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-marker-active-color) !important;
  border-color: var(--plab-multiple-marker-active-color) !important;
}

.plab-multiple-custom-indicator-marker.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-marker.is-completed:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-marker.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-marker.is-completed:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-marker.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-marker.is-completed:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-marker-completed-color) !important;
  border-color: var(--plab-multiple-marker-completed-color) !important;
}


/* Opacity is applied to the main marker module only, not every child element,
   so custom Divi text/icon styling stays clean. */
.plab-multiple-custom-indicator-marker.is-upcoming,
.plab-multiple-indicator-marker.is-upcoming,
.plab-multiple-indicator-row-marker.is-upcoming,
.plab-multiple-section-progress__link.is-upcoming {
  opacity: var(--plab-multiple-marker-upcoming-opacity, 1);
}

.plab-multiple-custom-indicator-marker.is-active,
.plab-multiple-indicator-marker.is-active,
.plab-multiple-indicator-row-marker.is-active,
.plab-multiple-section-progress__link.is-active {
  opacity: var(--plab-multiple-marker-active-opacity, 1);
}

.plab-multiple-custom-indicator-marker.is-completed,
.plab-multiple-indicator-marker.is-completed,
.plab-multiple-indicator-row-marker.is-completed,
.plab-multiple-section-progress__link.is-completed {
  opacity: var(--plab-multiple-marker-completed-opacity, 1);
}

.plab-multiple-custom-indicator-content,
.plab-multiple-indicator-row-item,
.plab-multiple-row-indicator-item {
  transition:
    color var(--plab-multiple-indicator-transition),
    opacity var(--plab-multiple-indicator-transition),
    border-color var(--plab-multiple-indicator-transition),
    background-color var(--plab-multiple-indicator-transition),
    transform var(--plab-multiple-indicator-transition);
}

.plab-multiple-custom-indicator-content.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-content.is-upcoming:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-item.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-item.is-upcoming:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-row-indicator-item.is-upcoming:not(.plab-multiple-indicator-keep-color),
.plab-multiple-row-indicator-item.is-upcoming:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-content-upcoming-color) !important;
}

.plab-multiple-custom-indicator-content.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-content.is-active:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-item.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-item.is-active:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-row-indicator-item.is-active:not(.plab-multiple-indicator-keep-color),
.plab-multiple-row-indicator-item.is-active:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-content-active-color) !important;
}

.plab-multiple-custom-indicator-content.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-custom-indicator-content.is-completed:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-indicator-row-item.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-indicator-row-item.is-completed:not(.plab-multiple-indicator-keep-color) *,
.plab-multiple-row-indicator-item.is-completed:not(.plab-multiple-indicator-keep-color),
.plab-multiple-row-indicator-item.is-completed:not(.plab-multiple-indicator-keep-color) * {
  color: var(--plab-multiple-content-completed-color) !important;
}

/* -----------------------------
   Auto/floating section indicator
------------------------------ */
.plab-multiple-section-progress {
  position: fixed;
  left: var(--plab-multiple-section-indicator-left);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--plab-multiple-section-indicator-z);
  pointer-events: auto;
  color: var(--plab-multiple-marker-upcoming-color);
}

.plab-multiple-section-progress__inner {
  position: relative;
}

/* v1.2.6 browser-safe generated section line fallback.
   The earlier single continuous line could visibly pass through transparent
   indicator boxes. Generated section indicators now draw one vertical segment
   per gap, with JS-set dimensions, so every marker keeps a clean break. */
.plab-multiple-section-progress .plab-multiple-dynamic-line-layer {
  display: none !important;
}

.plab-multiple-section-progress__inner::before,
.plab-multiple-section-progress__inner::after {
  display: none !important;
}

.plab-multiple-section-progress__list {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--plab-multiple-section-marker-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.plab-multiple-section-progress__item {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.plab-multiple-section-progress__item::before,
.plab-multiple-section-progress__item::after {
  content: "";
  position: absolute;
  left: var(--plab-multiple-section-segment-left, calc(var(--plab-multiple-section-marker-size, 32px) / 2));
  top: var(--plab-multiple-section-segment-top, calc(var(--plab-multiple-section-marker-size, 32px) + var(--plab-multiple-marker-line-gap, 10px)));
  width: max(1px, var(--plab-multiple-indicator-line-width, 1px));
  min-width: 1px;
  height: var(--plab-multiple-section-segment-height, 0px);
  min-height: 0;
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.plab-multiple-section-progress__item::before {
  background: var(--plab-multiple-indicator-path-color, var(--plab-multiple-indicator-line-color, rgba(0, 0, 0, 0.14)));
  opacity: var(--plab-multiple-indicator-line-base-opacity, 1);
}

.plab-multiple-section-progress__item::after {
  height: var(--plab-multiple-section-segment-active-height, 0px);
  background: var(--plab-multiple-indicator-path-active-color, var(--plab-multiple-indicator-line-active-color, #111111));
  opacity: var(--plab-multiple-indicator-line-active-opacity, 1);
  transition: height var(--plab-multiple-indicator-line-transition);
}

.plab-multiple-section-progress__item:last-child::before,
.plab-multiple-section-progress__item:last-child::after {
  display: none !important;
}

.plab-multiple-section-progress__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--plab-multiple-section-marker-size);
  min-width: var(--plab-multiple-section-marker-size);
  height: var(--plab-multiple-section-marker-size);
  min-height: var(--plab-multiple-section-marker-size);
  font-size: var(--plab-multiple-section-marker-font-size);
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  color: var(--plab-multiple-section-marker-upcoming-text-color, var(--plab-multiple-marker-upcoming-color)) !important;
  border: var(--plab-multiple-section-marker-border-width, 0.5px) solid var(--plab-multiple-section-marker-border-color, currentColor);
  border-radius: var(--plab-multiple-section-marker-radius, 999px);
  background: var(--plab-multiple-section-marker-bg, transparent);
  backdrop-filter: var(--plab-multiple-section-marker-backdrop, none);
  box-sizing: border-box;
}

.plab-multiple-section-progress__link.is-active {
  color: var(--plab-multiple-section-marker-active-text-color, var(--plab-multiple-marker-active-color)) !important;
  border-color: var(--plab-multiple-section-marker-active-border-color, currentColor);
  background: var(--plab-multiple-section-marker-active-bg, transparent);
}

.plab-multiple-section-progress__link.is-completed {
  color: var(--plab-multiple-section-marker-completed-text-color, var(--plab-multiple-marker-completed-color)) !important;
  border-color: var(--plab-multiple-section-marker-completed-border-color, currentColor);
  background: var(--plab-multiple-section-marker-completed-bg, transparent);
}

.plab-multiple-marker-shape-circle,
.plab-multiple-section-marker-circle {
  --plab-multiple-section-marker-radius: 999px;
}

.plab-multiple-marker-shape-square,
.plab-multiple-section-marker-square {
  --plab-multiple-section-marker-radius: 0px;
}

.plab-multiple-marker-shape-rounded,
.plab-multiple-marker-shape-rounded-square,
.plab-multiple-section-marker-rounded,
.plab-multiple-section-marker-rounded-square {
  --plab-multiple-section-marker-radius: 9px;
}

.plab-multiple-section-progress__link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.plab-multiple-section-indicator-item,
.plab-multiple-indicator-section-item {
  transition:
    color var(--plab-multiple-indicator-transition),
    opacity var(--plab-multiple-indicator-transition),
    border-color var(--plab-multiple-indicator-transition),
    background-color var(--plab-multiple-indicator-transition);
}


/* Content/module opacity states. */
.plab-multiple-custom-indicator-content.is-upcoming,
.plab-multiple-indicator-row-item.is-upcoming,
.plab-multiple-row-indicator-item.is-upcoming,
.plab-multiple-section-indicator-item.is-upcoming,
.plab-multiple-indicator-section-item.is-upcoming {
  opacity: var(--plab-multiple-content-upcoming-opacity, 1);
}

.plab-multiple-custom-indicator-content.is-active,
.plab-multiple-indicator-row-item.is-active,
.plab-multiple-row-indicator-item.is-active,
.plab-multiple-section-indicator-item.is-active,
.plab-multiple-indicator-section-item.is-active {
  opacity: var(--plab-multiple-content-active-opacity, 1);
}

.plab-multiple-custom-indicator-content.is-completed,
.plab-multiple-indicator-row-item.is-completed,
.plab-multiple-row-indicator-item.is-completed,
.plab-multiple-section-indicator-item.is-completed,
.plab-multiple-indicator-section-item.is-completed {
  opacity: var(--plab-multiple-content-completed-opacity, 1);
}

/* Module-colour opacity mode: keep the colours you set inside Divi modules.
   Add this class to the wrapper/section/row when you want the plugin to control
   fade amount only instead of forcing text colours. */
.plab-multiple-indicator-opacity-mode {
  --plab-multiple-marker-upcoming-color: inherit;
  --plab-multiple-marker-active-color: inherit;
  --plab-multiple-marker-completed-color: inherit;
  --plab-multiple-content-upcoming-color: inherit;
  --plab-multiple-content-active-color: inherit;
  --plab-multiple-content-completed-color: inherit;
  --plab-multiple-marker-upcoming-opacity: 0.28;
  --plab-multiple-marker-active-opacity: 1;
  --plab-multiple-marker-completed-opacity: 0.72;
  --plab-multiple-content-upcoming-opacity: 0.34;
  --plab-multiple-content-active-opacity: 1;
  --plab-multiple-content-completed-opacity: 0.72;
}

/* When opacity mode is applied directly to marker/content modules, support that too. */
.plab-multiple-indicator-opacity-mode.plab-multiple-custom-indicator-marker,
.plab-multiple-indicator-opacity-mode.plab-multiple-indicator-marker,
.plab-multiple-indicator-opacity-mode.plab-multiple-indicator-row-marker,
.plab-multiple-indicator-opacity-mode.plab-multiple-custom-indicator-content,
.plab-multiple-indicator-opacity-mode.plab-multiple-indicator-row-item,
.plab-multiple-indicator-opacity-mode.plab-multiple-row-indicator-item {
  --plab-multiple-marker-upcoming-color: inherit;
  --plab-multiple-marker-active-color: inherit;
  --plab-multiple-marker-completed-color: inherit;
  --plab-multiple-content-upcoming-color: inherit;
  --plab-multiple-content-active-color: inherit;
  --plab-multiple-content-completed-color: inherit;
}

/* -----------------------------
   Convenience theme classes
------------------------------ */
.plab-multiple-indicator-light {
  --plab-multiple-indicator-line-color: rgba(255, 255, 255, 0.2);
  --plab-multiple-indicator-line-active-color: #ffffff;
  --plab-multiple-indicator-path-color: rgba(255, 255, 255, 0.2);
  --plab-multiple-indicator-path-active-color: #ffffff;
  --plab-multiple-marker-upcoming-color: rgba(255, 255, 255, 0.38);
  --plab-multiple-marker-active-color: #ffffff;
  --plab-multiple-marker-completed-color: rgba(255, 255, 255, 0.82);
  --plab-multiple-content-upcoming-color: rgba(255, 255, 255, 0.42);
  --plab-multiple-content-active-color: #ffffff;
  --plab-multiple-content-completed-color: rgba(255, 255, 255, 0.76);
}

.plab-multiple-indicator-ultra-thin {
  --plab-multiple-indicator-line-width: 1px;
}

.plab-multiple-indicator-module-colour,
.plab-multiple-indicator-module-color {
  /* Alias class for users who prefer plain wording. */
  --plab-multiple-marker-upcoming-color: inherit;
  --plab-multiple-marker-active-color: inherit;
  --plab-multiple-marker-completed-color: inherit;
  --plab-multiple-content-upcoming-color: inherit;
  --plab-multiple-content-active-color: inherit;
  --plab-multiple-content-completed-color: inherit;
  --plab-multiple-marker-upcoming-opacity: 0.28;
  --plab-multiple-marker-active-opacity: 1;
  --plab-multiple-marker-completed-opacity: 0.72;
  --plab-multiple-content-upcoming-opacity: 0.34;
  --plab-multiple-content-active-opacity: 1;
  --plab-multiple-content-completed-opacity: 0.72;
}

.plab-multiple-indicator-thin {
  --plab-multiple-indicator-line-width: 1px;
}

.plab-multiple-indicator-medium {
  --plab-multiple-indicator-line-width: 1px;
}

@media (max-width: 980px) {
  .plab-multiple-section-progress {
    left: var(--plab-multiple-section-indicator-left-tablet, 18px);
  }
}

@media (max-width: 767px) {
  .plab-multiple-section-progress {
    display: var(--plab-multiple-section-indicator-mobile-display, block);
    left: var(--plab-multiple-section-indicator-left-mobile, 12px);
    --plab-multiple-section-marker-size: var(--plab-multiple-section-marker-size-mobile, 28px);
    --plab-multiple-section-marker-font-size: var(--plab-multiple-section-marker-font-size-mobile, 11px);
    --plab-multiple-section-marker-gap: var(--plab-multiple-section-marker-gap-mobile, 44px);
    --plab-multiple-marker-line-gap: var(--plab-multiple-marker-line-gap-mobile, 8px);
  }

  .plab-multiple-section-progress--mobile-hidden {
    display: none !important;
  }
}

/* -----------------------------
   v1.0.4 section indicator placement options
------------------------------ */
.plab-multiple-section-progress--range-only {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--plab-multiple-indicator-transition),
    visibility var(--plab-multiple-indicator-transition);
}

.plab-multiple-section-progress--range-only.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.plab-multiple-section-progress--range-only.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.plab-multiple-section-progress--document {
  position: absolute;
  top: 0;
  transform: none;
  left: var(--plab-multiple-section-indicator-left);
}

.plab-multiple-section-progress--document .plab-multiple-section-progress__inner {
  position: relative;
  min-height: var(--plab-multiple-section-marker-size);
}

.plab-multiple-section-progress--document .plab-multiple-section-progress__list {
  display: block;
  position: relative;
  gap: 0;
  height: 100%;
}

.plab-multiple-section-progress--document .plab-multiple-section-progress__item {
  position: absolute;
  left: 0;
  top: 0;
}

.plab-multiple-section-progress--compact {
  position: fixed;
  left: var(--plab-multiple-section-indicator-left);
  top: 50%;
  transform: translateY(-50%);
}
/* Control activation point. 0.50 = centre viewport; 0.65 = earlier/lower in viewport. */
.plab-multiple-section-progress__inner {
  --plab-multiple-indicator-trigger-ratio: 0.65;
}
/* -----------------------------
   v1.3.6 Option 3: Module Fade Indicator
   The shortcode/controller uses module_fade="yes" and the targets use:
   plab-msi-fade-item plab-msi-fade-group-{group}
------------------------------ */
.plab-msi-fade-item,
.plab-multiple-fade-item,
.plab-multiple-module-fade-item {
  --plab-msi-fade-upcoming-opacity: var(--plab-multiple-content-upcoming-opacity, 0.22);
  --plab-msi-fade-active-opacity: var(--plab-multiple-content-active-opacity, 1);
  --plab-msi-fade-completed-opacity: var(--plab-multiple-content-completed-opacity, 1);
  --plab-msi-fade-duration: 420ms;
  --plab-msi-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --plab-msi-fade-y: 0px;
  --plab-msi-fade-blur: 0px;
  transition:
    opacity var(--plab-msi-fade-duration) var(--plab-msi-fade-ease),
    transform var(--plab-msi-fade-duration) var(--plab-msi-fade-ease),
    filter var(--plab-msi-fade-duration) var(--plab-msi-fade-ease);
  will-change: opacity, transform, filter;
}

.plab-msi-fade-ready.is-upcoming,
.plab-multiple-fade-item.plab-msi-fade-ready.is-upcoming,
.plab-multiple-module-fade-item.plab-msi-fade-ready.is-upcoming {
  opacity: var(--plab-msi-fade-upcoming-opacity, 0.22);
  transform: translateY(var(--plab-msi-fade-y, 0px));
  filter: blur(var(--plab-msi-fade-blur, 0px));
}

.plab-msi-fade-ready.is-active,
.plab-multiple-fade-item.plab-msi-fade-ready.is-active,
.plab-multiple-module-fade-item.plab-msi-fade-ready.is-active {
  opacity: var(--plab-msi-fade-active-opacity, 1);
  transform: translateY(0px);
  filter: blur(0px);
}

.plab-msi-fade-ready.is-completed,
.plab-multiple-fade-item.plab-msi-fade-ready.is-completed,
.plab-multiple-module-fade-item.plab-msi-fade-ready.is-completed {
  opacity: var(--plab-msi-fade-completed-opacity, 1);
  transform: translateY(0px);
  filter: blur(var(--plab-msi-fade-completed-blur, 0px));
}

.plab-msi-fade-disable-pointer.is-upcoming,
.plab-msi-fade-disable-pointer.is-completed {
  pointer-events: none;
}

.plab-msi-module-fade-controller {
  display: block;
  min-height: 0;
}