/* Force the lesson "Complete" button to render as a real button on this
   theme, where it was showing as plain unstyled text. Applies to every
   lesson site-wide, independent of the video gate feature. */

form[name="learn-press-form-complete-lesson"] .lp-button,
.button-complete-lesson,
.lp-btn-complete-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--lp-primary-color, #ffb606) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--lp-border-radius, 5px) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: opacity 0.2s;
}

form[name="learn-press-form-complete-lesson"] .lp-button:hover,
.button-complete-lesson:hover,
.lp-btn-complete-item:hover {
    opacity: 0.85;
    color: #fff !important;
}

form[name="learn-press-form-complete-lesson"] .lp-button.completed,
.lp-button.completed {
    background-color: #28a745 !important;
    cursor: default !important;
    opacity: 1 !important;
}