/* LMS mode: progress bar, lesson completion bar, and sidebar lesson state.
   Loaded on every page; all rules are scoped to elements only present when a
   product is flagged as an LMS, so they are inert for ordinary products. */

/* --- Sidebar progress card --- */
.lms-progress {
  margin: 0 0 14px;
  padding: 14px 14px 16px;
  background: var(--ds-color-surface-2, #f4f1fb);
  border: 1px solid var(--ds-color-border, #e3ddef);
  border-radius: 10px;
}
.lms-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-text, #2b2140);
  margin-bottom: 8px;
}
.lms-progress-top b {
  font-size: 15px;
  color: var(--ds-color-primary, #5f2b69);
}
.lms-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ds-color-border, #e3ddef);
  overflow: hidden;
}
.lms-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-color-primary, #5f2b69), var(--ds-color-accent, #903ea0));
  transition: width .35s ease;
}
.lms-progress-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ds-color-text-muted, #6c6482);
}
.lms-cert-btn {
  margin-top: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--ds-color-accent, #903ea0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lms-cert-btn:hover { filter: brightness(1.05); }

/* --- Sidebar lesson state --- */
.sidebar-link.lms-done::after {
  content: "✓";
  margin-left: 8px;
  color: #1f9d55;
  font-weight: 700;
}
.sidebar-link.lms-locked {
  opacity: .5;
}
.sidebar-link.lms-locked::after {
  content: "🔒";
  margin-left: 8px;
  font-size: 11px;
}

/* --- Lesson completion / navigation bar under content --- */
.lms-lessonbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--ds-color-border, #ececf2);
  background: #ffffff;
}
.lms-complete {
  padding: 10px 20px;
  border: 1px solid var(--ds-color-primary, #5f2b69);
  border-radius: 8px;
  background: var(--ds-color-primary, #5f2b69);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lms-complete.is-done {
  background: #eaf7ef;
  color: #1f9d55;
  border-color: #b7e4c7;
}
.lms-nav {
  display: inline-flex;
  gap: 10px;
}
.lms-nav button {
  padding: 10px 18px;
  border: 1px solid var(--ds-color-border, #e3ddef);
  border-radius: 8px;
  background: #fff;
  color: var(--ds-color-text, #2b2140);
  font-size: 14px;
  cursor: pointer;
}
.lms-nav button:hover {
  border-color: var(--ds-color-primary, #5f2b69);
  color: var(--ds-color-primary, #5f2b69);
}
.lms-nav .lms-next {
  background: var(--ds-color-accent, #903ea0);
  border-color: var(--ds-color-accent, #903ea0);
  color: #fff;
}
.lms-nav button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.lms-quiz-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-color-text-muted, #6c6482);
}
.lms-quiz-status.is-done { color: #1f9d55; }

/* --- Interactive quiz --- */
.lms-quiz {
  margin: 28px 0 8px;
}
.lms-q {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--ds-color-border, #e3ddef);
  border-radius: 10px;
  background: #fff;
}
.lms-q.correct {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
}
.lms-q.incorrect {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
}
.lms-q-text {
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ds-color-text, #2b2140);
}
.lms-q-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lms-q-opts label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.lms-q-opts label:hover { background: var(--ds-color-surface-2, #f4f1fb); }
.lms-q-opts input { margin-top: 3px; }
.lms-q-fb {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}
.lms-q.correct .lms-q-fb { color: #065f46; }
.lms-q.incorrect .lms-q-fb { color: #991b1b; }
.lms-quiz-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.lms-quiz-submit {
  padding: 10px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--ds-color-primary, #5f2b69);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lms-quiz-result { font-size: 14px; font-weight: 600; }
.lms-quiz-result.is-pass { color: #1f9d55; }
.lms-quiz-result.is-fail { color: #b91c1c; }