/* ------------------------------------------------------------------
   Completion panel, at the foot of the lecture column.

   Deliberately not the bare right-aligned button this replaced: it reads
   as a closing statement for the lecture rather than a stray control, so
   it is a tinted card with a check mark, a line of copy and the button.

   The layout pass moves this out of LearnDash's tab markup to the end of
   .ace-topic-main, which is why nothing here assumes a parent.
   ------------------------------------------------------------------ */
.ace-ls-mc{
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 26px 0 4px;
  padding: 15px 18px;
  background: rgba(var(--ace-primary-rgb, 204,120,92), .08);
  border: 1px solid rgba(var(--ace-primary-rgb, 204,120,92), .22);
  border-radius: 12px;
}

.ace-ls-mc-icon{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ace-primary-rgb, 204,120,92), .16);
  color: var(--color-primary, #008a81);
}
.ace-ls-mc-icon svg{ width: 20px; height: 20px; }

.ace-ls-mc-text{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ace-ls-mc-title{
  color: var(--color-heading, #f5f4ef);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.ace-ls-mc-sub{
  color: var(--color-text-muted, #a39e93);
  font-size: .74rem;
  line-height: 1.45;
}

.ace-ls-mc-action{ flex-shrink: 0; }
.ace-ls-mc form{ margin: 0; }

/* Sized to match the status pill on the progress bar — the theme sets that
   with `padding: 4px 12px; font-size: .7rem; font-weight: 700`, so the two
   read as the same class of element rather than the button shouting.

   The theme styles .ace-player-content .learndash_mark_complete_button with
   !important, so these need both the extra class and !important to land. */
.ace-player-content .ace-ls-mc .learndash_mark_complete_button,
.ace-player-content .ace-ls-mc input[type="submit"],
.ace-ls-mc .learndash_mark_complete_button,
.ace-ls-mc input[type="submit"]{
  background: var(--color-primary, #008a81) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--color-bg, #262624) !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  padding: 4px 13px !important;
  width: auto !important;
  transition: background .18s ease, transform .18s ease;
}
.ace-player-content .ace-ls-mc .learndash_mark_complete_button:hover,
.ace-player-content .ace-ls-mc input[type="submit"]:hover,
.ace-ls-mc .learndash_mark_complete_button:hover,
.ace-ls-mc input[type="submit"]:hover{
  background: var(--color-primary-dark, #006c65) !important;
  transform: translateY(-1px);
}

/* LearnDash step navigation, hidden on these pages. The script removes these
   too; this is the belt to its braces, and it also stops them showing for the
   frame before the script runs. */
.ace-player-content .learndash_next_prev_link,
.ace-player-content .ld-button-prev,
.ace-player-content .ld-button-next,
.ace-player-content .ld-content-action a.prev-link,
.ace-player-content .ld-content-action a.next-link{
  display: none !important;
}

@media (max-width: 600px){
  .ace-ls-mc{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ace-ls-mc-action{ width: 100%; }
  .ace-ls-mc form{ width: 100%; }

  /* Full width, and a little taller than the desktop pill so it stays a
     comfortable tap target on a phone. */
  .ace-player-content .ace-ls-mc .learndash_mark_complete_button,
  .ace-player-content .ace-ls-mc input[type="submit"],
  .ace-ls-mc .learndash_mark_complete_button,
  .ace-ls-mc input[type="submit"]{
    width: 100% !important;
    padding: 9px 13px !important;
  }
}

/* ------------------------------------------------------------------
   The same panel, when a quiz is still in the way.

   Amber rather than terracotta: terracotta is the colour of "do this
   now" throughout the player, and this panel is the opposite — it is
   telling the student the door is shut, and why.
   ------------------------------------------------------------------ */
.ace-ls-mc--blocked{
  background: rgba(212,162,127,.07);
  border-color: rgba(212,162,127,.22);
}
.ace-ls-mc--blocked .ace-ls-mc-icon{
  background: rgba(212,162,127,.14);
  color: var(--color-accent, #61b6b1);
}
.ace-ls-mc--blocked .ace-ls-mc-sub strong{
  color: var(--color-text, #e8e6dc);
  font-weight: 600;
}

/* The call to action is an outline rather than a solid fill, so it does
   not compete with a real Mark Complete button elsewhere on the page. */
.ace-ls-mc-cta{
  display: inline-block;
  background: none;
  border: 1px solid rgba(212,162,127,.45);
  border-radius: 999px;
  color: var(--color-accent, #61b6b1) !important;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  padding: 5px 14px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ace-ls-mc-cta:hover{
  background: rgba(212,162,127,.14);
  border-color: rgba(212,162,127,.7);
  color: var(--color-heading, #f5f4ef) !important;
}

@media (max-width: 600px){
  .ace-ls-mc-cta{ display: block; text-align: center; padding: 9px 14px; }
}