/* Extracted unchanged from approved assets/css/common.css. Scoped to wizard parent. */
.hapus-assessment-wizard {
   --blue: #ff6500;
   --navy: #001337;
}

.premium-stepper {
   padding: 22px 28px;
   margin: 22px 0 30px;
   background: #fff;
   border: 1px solid #e8edf5;
   border-radius: 16px;
}

.premium-stepper-eyebrow {
   display: block;
   color: var(--blue);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   margin-bottom: 4px;
}

.premium-stepper-title {
   font-size: 19px;
   font-weight: 700;
   color: #001337;
}

.premium-stepper-count {
   font-size: 12px;
   font-weight: 600;
   color: #001337;
   background: #f1f5fa;
   padding: 7px 13px;
   border-radius: 30px;
   white-space: nowrap;
}

/* =========================================
   Stepper Layout
========================================= */

.premium-stepper-track {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
}

.premium-step {
   position: relative;
   flex: 1;
   min-width: 0;
   text-align: center;
}

/* =========================================
   Dashed Connector Lines
========================================= */

.premium-step:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 19px;
   left: calc(50% + 25px);
   right: calc(-50% + 25px);
   height: 2px;

   background: repeating-linear-gradient(90deg,
         #d5dfea 0,
         #d5dfea 7px,
         transparent 7px,
         transparent 13px);
}

/* Completed dashed connectors */
.premium-step.is-complete:not(:last-child)::after {
   background: repeating-linear-gradient(90deg,
         #ff6500 0,
         #ff6500 7px,
         transparent 7px,
         transparent 13px);
   background-size: 26px 2px;
   animation: premiumDashMove 2.5s linear infinite;
}

@keyframes premiumDashMove {
   from {
      background-position: 0 0;
   }

   to {
      background-position: 26px 0;
   }
}

/* =========================================
   Step Circles
========================================= */

.premium-step-node {
   position: relative;
   z-index: 1;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 38px;
   height: 38px;

   border: 2px solid #dce5f3;
   border-radius: 50%;

   background: #fff;
   color: #8794aa;

   font-size: 14px;
   font-weight: 600;

   transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease,
      box-shadow 0.3s ease;

   animation: premiumStepAppear 0.45s ease-out both;
}

/* Completed Step */

/* Completed step circles */
.premium-step.is-complete .premium-step-node {
   background: #ff6500;
   border-color: #ff6500;
   color: #ffffff;
   box-shadow: 0 3px 12px rgba(255, 101, 0, 0.18);
}

.premium-step.is-complete .premium-step-node i {
   color: #fff;
   font-size: 17px;
   font-weight: 700;
}

/* Current Step */

.premium-step.is-current .premium-step-node {
   background: #001337;
   border-color: #001337;
   color: #fff;
   box-shadow: 0 0 0 5px rgba(0, 19, 55, 0.09);
}

/* =========================================
   Step Labels
========================================= */

.premium-step-name {
   display: block;
   margin-top: 12px;

   font-size: 13px;
   font-weight: 500;
   color: #8290a8;

   line-height: 1.4;
}

.premium-step.is-complete .premium-step-name {
   color: #52618e;
}

.premium-step.is-current .premium-step-name {
   color: #001337;
   font-weight: 700;
}

/* =========================================
   Entry Animation
========================================= */

@keyframes premiumStepAppear {
   from {
      opacity: 0;
      transform: scale(0.85);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.premium-step:nth-child(2) .premium-step-node {
   animation-delay: 0.08s;
}

.premium-step:nth-child(3) .premium-step-node {
   animation-delay: 0.16s;
}

.premium-step:nth-child(4) .premium-step-node {
   animation-delay: 0.24s;
}

.premium-step:nth-child(5) .premium-step-node {
   animation-delay: 0.32s;
}

/* =========================================
   Tablet Responsiveness
========================================= */

@media (min-width: 576px) and (max-width: 991.98px) {
   .premium-stepper {
      padding: 20px;
   }

   .premium-step-name {
      font-size: 11px;
   }
}

/* =========================================
   Mobile Responsiveness
========================================= */

@media (max-width: 575.98px) {
   .premium-stepper {
      padding: 18px 12px;
      margin: 15px 0 24px;
      border-radius: 12px;
   }

   .premium-stepper-title {
      font-size: 16px;
   }

   .premium-stepper-eyebrow {
      font-size: 10px;
      letter-spacing: 1px;
   }

   .premium-stepper-count {
      font-size: 10px;
      padding: 6px 9px;
   }

   .premium-step-node {
      width: 30px;
      height: 30px;
      font-size: 12px;
   }

   .premium-step.is-complete .premium-step-node i {
      font-size: 14px;
   }

   .premium-step:not(:last-child)::after {
      top: 14px;
      left: calc(50% + 18px);
      right: calc(-50% + 18px);
   }

   .premium-step-name {
      font-size: 10px;
      line-height: 1.3;
      margin-top: 9px;
      overflow-wrap: anywhere;
   }
}

/* =========================================
   Accessibility
========================================= */

@media (prefers-reduced-motion: reduce) {

   .premium-step-node,
   .premium-step.is-complete:not(:last-child)::after {
      animation: none;
      transition: none;
   }
}

/* =========================================
   Sticky Assessment Stepper
========================================= */

.assessment-stepper-sticky {
   position: sticky;
   top: 0;
   z-index: 1020;
   background: #fff;
   padding: 8px 0;
   border-bottom: 1px solid #e8edf5;
}

.assessment-stepper-sticky .premium-stepper {
   margin: 0;
}

/* Mobile */
@media (max-width: 767.98px) {
   .assessment-stepper-sticky {
      padding: 5px 0;
   }
}


/* =========================================================
   HAPUS LEAD MAGNET
   STICKY HORIZONTAL ASSESSMENT STEPPER
========================================================= */

/* Keep the stepper visible while scrolling */

.hapus-assessment-landing .premium-stepper {
   position: sticky !important;
   top: 0 !important;
   z-index: 100 !important;

   width: 100% !important;

   background: #ffffff !important;
   border: 1px solid #e8edf5 !important;
   border-radius: 16px !important;

   box-shadow: 0 8px 24px rgba(0, 19, 55, 0.07) !important;
}

/* Prevent horizontal overflow on smaller screens */

.hapus-assessment-landing .premium-stepper-track {
   width: 100% !important;
   min-width: 0 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {
   .hapus-assessment-landing .premium-stepper {
      top: 0 !important;
      z-index: 100 !important;
      border-radius: 12px !important;
   }
}