/* =========================================================
   PDP "Mark as done" → "Next"  (goes with pdp-done-next.js)
   Load after pdp-modules2.css.
   ========================================================= */

.pdp-learning-shell .pdp-dn-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.pdp-learning-shell .pdp-dn-group [hidden] {
  display: none !important;
}

/* Pending: "Skip for now" sits UNDER "Mark as done" */
.pdp-learning-shell .pdp-dn-group.is-pending {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
}

.pdp-learning-shell .lesson-controls:has(.pdp-dn-group.is-pending) {
  align-items: flex-start;
}

/* Shared button shape */
.pdp-learning-shell #btn-mark-done-step,
.pdp-learning-shell #btn-next.pdp-dn-skip,
.pdp-learning-shell #btn-next.pdp-dn-next-ready {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 12px !important;
  font-family: "Inter", "Noto Sans", sans-serif;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Step 1 — "Mark as done": outline in the module colour */
.pdp-learning-shell #btn-mark-done-step {
  padding: 11px 22px;
  border: 2px solid var(--pdp-theme-color, #171940);
  background: #fff;
  color: var(--pdp-theme-color, #171940);
  font-size: 1rem;
  font-weight: 700;
}

.pdp-learning-shell #btn-mark-done-step:hover {
  background: rgba(var(--pdp-theme-color-rgb, 23, 25, 64), .08);
}

/* "Skip for now": neutral grey outline, under the button above */
.pdp-learning-shell #btn-next.pdp-dn-skip {
  padding: 8px 18px !important;
  border: 1px solid rgba(23, 25, 64, .25) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #3d4150 !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
}

.pdp-learning-shell #btn-next.pdp-dn-skip:hover,
.pdp-learning-shell #btn-next.pdp-dn-skip:focus-visible {
  border-color: rgba(23, 25, 64, .5) !important;
  background: rgba(23, 25, 64, .04) !important;
  color: #171940 !important;
}

/* Step 2 — "Next →": filled in the module colour, pops in */
.pdp-learning-shell #btn-next.pdp-dn-next-ready {
  padding: 12px 24px !important;
  border: 2px solid var(--pdp-theme-color, #171940) !important;
  background: var(--pdp-theme-color, #171940) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(var(--pdp-theme-color-rgb, 23, 25, 64), .25) !important;
  animation: pdp-dn-pop-in .4s ease;
}

.pdp-learning-shell #btn-next.pdp-dn-next-ready:hover {
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(var(--pdp-theme-color-rgb, 23, 25, 64), .32) !important;
}

/* "☑ Completed": plain text in the module colour with a ticked checkbox (untick = undo).
   Not a button: no border, no background. */
.pdp-learning-shell #pdpDoneBadge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pdp-theme-color, #16803c);
  font-family: "Inter", "Noto Sans", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  animation: pdp-dn-pop-in .35s ease;
}

.pdp-learning-shell #pdpDoneCheck {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--pdp-theme-color, #16803c);
  cursor: pointer;
}

/* Keyboard focus */
.pdp-learning-shell #btn-mark-done-step:focus-visible,
.pdp-learning-shell #btn-next.pdp-dn-next-ready:focus-visible {
  outline: 3px solid rgba(var(--pdp-theme-color-rgb, 23, 25, 64), .3);
  outline-offset: 2px;
}

.pdp-learning-shell #pdpDoneCheck:focus-visible {
  outline: 3px solid rgba(var(--pdp-theme-color-rgb, 22, 128, 60), .3);
  outline-offset: 2px;
}

@keyframes pdp-dn-pop-in {
  0%   { opacity: 0; transform: scale(.85); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-learning-shell #pdpDoneBadge,
  .pdp-learning-shell #btn-next.pdp-dn-next-ready {
    animation: none;
  }
}

/* The original checkbox box is replaced by the buttons + badge */
.pdp-learning-shell .mark-done-box.pdp-dn-hidden {
  display: none !important;
}

/* Done state: text vertically centred next to "Next" */
.pdp-learning-shell .pdp-dn-group:not(.is-pending) {
  align-items: center;
}

/* Hidden buttons must stay hidden, whatever the rules above say.
   (Kept at the end and with an id so it always wins.) */
.pdp-learning-shell #pdpDoneNextGroup > [hidden] {
  display: none !important;
}

/* Phones: full-width buttons */
@media (max-width: 575.98px) {
  .pdp-learning-shell .lesson-controls {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pdp-learning-shell .pdp-dn-group {
    width: 100%;
  }

  .pdp-learning-shell #btn-mark-done-step,
  .pdp-learning-shell #btn-next.pdp-dn-next-ready {
    flex: 1 1 auto;
  }
}