/* =========================================
   1. Stepper / Progress Bar (Complete)
   ========================================= */

.assessment-progress-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 30px auto;
  padding: 0 10px;

  .step-indicators {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }

  /* Individual Step Wrapper */
  .step-indicator {
    position: relative;
    flex: 1;
    text-align: center;
    z-index: 1;

    /* --- The Connecting Line (Grey Default) --- */
    &::after {
      content: "";
      position: absolute;
      top: 15px; /* Vertically centers line relative to 30px dot */
      left: 50%; 
      width: 100%; 
      height: 2px;
      background-color: #f3f4f6; /* Light grey default */
      z-index: -1;
      transition: background-color 0.3s ease;
    }

    /* Remove line from the last item */
    &:last-child::after {
      display: none;
    }

    /* --- The Dot (Default Grey) --- */
    .step-dot {
      width: 30px;
      height: 30px;
      background-color: #fff;
      border: 2px solid #e5e7eb;
      border-radius: 50%;
      margin: 0 auto 10px auto;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* --- The Label (Default Grey) --- */
    .step-name {
      font-size: 14px;
      color: #9ca3af;
      font-weight: 400;
      transition: color 0.3s ease;
    }

    /* ======================================
       STATE: ACTIVE (Current Step)
       ====================================== */
    &.active {
      .step-dot {
        background-color: #6366f1; /* Solid Purple */
        border-color: #6366f1;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); /* Glow */

        /* White inner dot */
        &::before {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          background-color: white;
          border-radius: 50%;
        }
      }

      .step-name {
        color: #6366f1;
        font-weight: 600;
      }
    }

    /* ======================================
       STATE: COMPLETED (Finished Step)
       ====================================== */
    &.completed {
      
      /* Turn the line following this step Purple */
      &::after {
        background-color: #8b8bfe !important;
      }

      /* Gradient Dot */
      .step-dot {
        background: linear-gradient(135deg, #a78bfa 0%, #8b8bfe 100%);
        border: none; 
        box-shadow: none;

        /* Checkmark Icon */
        &::before {
          content: "";
          display: block;
          width: 6px;
          height: 10px;
          border: solid white;
          border-width: 0 2px 2px 0; /* Right & Bottom borders make an L */
          transform: rotate(45deg);
          margin-bottom: 4px;
          border-radius: 0;
          background-color: transparent;
        }
      }

      /* Dark Text */
      .step-name {
        color: #111827;
        font-weight: 600;
      }
    }
  }
}
/* =========================================
   2. Assessment Container (Card Style)
   ========================================= */

.assessment-container {
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 860px;
  border: 1px solid #E5E7EB;
  margin: 0 auto 60px auto !important;
}

.input-container input {
    border: 1px solid #E5E7EB !important;
    border-radius: 10px;
}

.assessment-question {
  margin-bottom: 40px;
  position: relative;

  h3 {
    margin-bottom: 20px;
    color: #111827;
    font-size: 16px;
    font-weight: 500;
  }

  label.radio-option {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .form-control.question-input {
    height: 45px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 0 15px;
    
    &:focus {
      border-color: #6366f1;
      outline: 0;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
  }

  /* Specific Arrow Override for QID 1 */
  &[data-qid="1"] {
    &::after {
      content: "";
      position: absolute;
      width: 15px;
      height: 10px;
      top: 58px;
      right: 15px;
      background-image: url(/wp-content/uploads/2026/04/down-arrow-grey.svg);
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
    }
  }
}

/* =========================================
   3. Range Slider
   ========================================= */

.slider-input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;

  .slider-container {
    width: 100%; 
	height: 16px;
    input.slider {
      width: 100%; 
    }
  }
}

/* =========================================
   Radio Option Styling (Card Style)
   ========================================= */

.assessment-question {
  
  /* The Container Label */
  .radio-option {
    display: flex; /* Flex alignment for layout */
    align-items: center;
    position: relative;
    cursor: pointer;
    
    /* Default Card Style (Inactive) */
    background-color: #fff;
    border: 1px solid #e5e7eb; /* Light grey border */
    border-radius: 8px; /* Rounded corners */
    padding: 16px 20px; /* Internal spacing */
    margin-bottom: 12px; /* Space between options */
    transition: all 0.2s ease-in-out; /* Smooth hover/select transition */

    /* 1. Hide the Native Radio Input */
    input.question-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    /* 2. The Text & Custom Radio Wrapper */
    span {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #374151; /* Dark Grey Text */
      font-weight: 400;
      width: 100%;

      /* --- The Custom Radio Circle (Unchecked) --- */
      &::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 15px; /* Space between circle and text */
        
        /* Shape & Color */
        border-radius: 50%;
        border: 1px solid #d1d5db; /* Grey Ring */
        background-color: #fff;
        
        /* Prevent circle from squishing if text wraps */
        flex-shrink: 0; 
        transition: all 0.2s ease;
      }
    }

    /* 3. Hover State */
    &:hover {
      border-color: #d1d5db;
      background-color: #f9fafb;
    }

    /* ======================================
       SELECTED STATE (The Purple Look)
       ====================================== */

    /* A. Style the Card Container (using :has selector) */
    &:has(input:checked) {
      border-color: #8b8bfe; /* Purple Border */
      background-color: #f5f3ff; /* Very Light Purple Background */
    }

    /* B. Style the Radio Circle (when input is checked) */
    input:checked + span {
      
      &::before {
        border-color: #8b8bfe; /* Purple Ring */
        background-color: #8b8bfe; /* Purple Center */
        
        /* Double Shadow Trick:
           1. Inset White Shadow (3px) -> Creates the gap between ring and dot
           2. Outer Glow Shadow (4px) -> Creates the soft purple aura 
        */
        box-shadow: 
          inset 0 0 0 3px #fff, 
          0 0 0 4px rgba(139, 139, 254, 0.2);
      }
    }
  }
}

/* =========================================
   4. Utilities
   ========================================= */

.conditional-hint {
  background-color: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 6px;
  font-size: 14px;
  color: #1e40af;
}

#blurred { filter: blur(5px); }
.page-break { page-break-after: always; }
.hidden { display: none !important; }

@media (max-width: 768px) {
  .assessment-container {
    padding: 20px;
    width: 95%;
  }

  .step-indicators {
    .step-name { font-size: 12px; }
    .step-dot { width: 26px; height: 26px; }
    &::after { top: 13px; } 
  }
}

.assessment-buttons {
    width: 100%;
    max-width: 860px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
pre#licenseReport {
    position: absolute;
}