/* ==========================================================================
   PT Noto Water Envirotech - Diagnostic Page Stylesheet (css/diagnostic.css)
   ========================================================================== */

/* Wizard Stepper Bar */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #cbd5e1;
  transition: all 0.3s ease;
}

.step-circle.active {
  background: #12AABF;
  color: #ffffff;
  border-color: #12AABF;
  box-shadow: 0 0 12px rgba(18, 170, 191, 0.45);
}

/* Wizard Option Buttons */
.wizard-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.wizard-btn:hover {
  border-color: #12AABF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(18, 170, 191, 0.15);
}

.wizard-btn.selected {
  border-color: #12AABF !important;
  background-color: #f0f9ff !important;
  ring: 2px;
  ring-color: rgba(18, 170, 191, 0.3) !important;
  box-shadow: 0 4px 14px rgba(18, 170, 191, 0.2) !important;
}

/* Before / After Slider on Diagnostic Page */
.ba-container {
  position: relative;
  overflow: hidden;
  user-select: none;
  border-radius: 1rem;
}

.ba-before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 10;
  border-right: 3px solid #12AABF;
}

.ba-before-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ba-after-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ba-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 30;
  margin: 0;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #12AABF;
  color: white;
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.1s ease;
}

/* Diagnostic Result Box */
.result-box {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid rgba(18, 170, 191, 0.35);
  box-shadow: 0 20px 40px -15px rgba(9, 37, 52, 0.15);
}