/* =========================================================
   Unified mobile swipe indicators
   Shared by Why It Works, Core Features, Discovery and Pricing
   ========================================================= */

@media (max-width: 575.98px) {
  :root {
    --cp-swipe-track-width: min(210px, 56vw);
    --cp-swipe-track-height: 4px;
    --cp-swipe-track: rgba(255, 255, 255, 0.11);
    --cp-swipe-thumb: rgba(218, 218, 221, 0.72);
  }

  /* Every indicator uses the same geometry and grey palette. */
  .cp-swipe-scrollbar,
  .cp-problem-mobile-scrollbar,
  .pricing-mobile-scrollbar,
  .service4-section-area .service-mobile-dots,
  .case4-section-area .discover-mobile-dots {
    position: relative !important;
    display: block !important;
    width: var(--cp-swipe-track-width) !important;
    height: var(--cp-swipe-track-height) !important;
    margin: 16px auto 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--cp-swipe-track) !important;
    box-shadow: none !important;
  }

  /* Same thumb treatment for all four sliders. */
  .cp-swipe-scrollbar-thumb,
  .cp-problem-mobile-scrollbar-thumb,
  .pricing-mobile-scrollbar-thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #676769b8 !important;
    box-shadow: none !important;
    transition: transform 90ms linear !important;
    will-change: transform;
    z-index: 1;
  }

  /* Thumb widths reflect the number of swipe positions. */
  #cpProblemMobileScrollbarThumb,
  #serviceMobileScrollbarThumb {
    width: 50% !important;
  }

  #discoverMobileScrollbarThumb {
    width: 22% !important;
  }

  #pricingMobileScrollbarThumb {
    width: 32% !important;
  }

  /* Retain clickable dots for accessibility/navigation, but make
     them invisible so every section presents the same clean bar. */
  .service4-section-area .service-mobile-dots .service-dot,
  .case4-section-area .discover-mobile-dots .discover-dot {
    position: relative !important;
    float: left;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    z-index: 2;
  }

  .service4-section-area .service-mobile-dots .service-dot {
    width: 50% !important;
  }

  .case4-section-area .discover-mobile-dots .discover-dot {
    width: 16.6667% !important;
  }

  /* Keep section-specific vertical rhythm, but identical bar design. */
  .cp-problem-mobile-scrollbar {
    margin-bottom: 42px !important;
  }

  .pricing-mobile-scrollbar {
    margin-top: 16px !important;
  }
}