/* Base layout and variables */
.sis-wrapper {
  --sis-step-bg: #fff;
  --sis-step-color: #222;
  --sis-step-border: #ddd;
  --sis-active-bg: #e8f3ff;
  --sis-active-border: #5aa3ff;
  --sis-btn-bg: #3399ff;
  --sis-btn-color: #fff;

  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Preview */
.sis-preview {
  position: relative;
  width: 60%;
  min-width: 220px;
  overflow: visible;
}
.sis-main-img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 10px;
  transition: opacity .25s ease, width .25s ease;
  background: transparent;
  opacity: 1;
}

/* Hotspot */
.sis-hotspot {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all .35s ease;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  width: 40px;
  height: 40px;
  background: rgba(0,150,255,0.9);
}

/* Steps */
.sis-steps {
  width: 35%;
  min-width: 200px;
}
.sis-steps-inner { list-style:none; padding:0; margin:0; }
.sis-steps-inner li {
  background: var(--sis-step-bg);
  color: var(--sis-step-color);
  border: 1px solid var(--sis-step-border);
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.sis-steps-inner li .sis-step-desc { font-size: .95em; color: #666; margin-top:6px; }

/* active */
.sis-steps-inner li.active {
  background: var(--sis-active-bg);
  border-color: var(--sis-active-border);
  font-weight: 600;
}

/* Nav buttons */
.sis-nav { display:flex; gap:10px; margin-top:12px; align-items:center; }
.sis-btn {
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--sis-btn-bg);
  color: var(--sis-btn-color);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

/* Progress */
.sis-progress { height:8px; background:#eee; border-radius:6px; overflow:hidden; margin-top:12px; width:100%; }
.sis-progress-bar { height:100%; width:0%; background:var(--sis-btn-bg); transition: width .3s ease; }
.sis-progress-label { font-size:0.9em; color:#444; margin-top:6px; }

/* Responsive default */
@media(max-width:800px){
  .sis-wrapper { flex-direction: column; }
  .sis-preview, .sis-steps { width: 100%; }
}