/*
    LearnDash single course: enroll widget (.bb-enroll-widget) without the BuddyBoss theme.
    Markup: templates/learndash/ld30/template-single-course-sidebar.php
    This file is part of the JEF 4 Website plugin.
*/

/* Sidebar wrapper */
.bb-single-course-sidebar .bb-ld-sticky-sidebar
{
    position: sticky;
    top: 140px;
    z-index: 2;
}

/* Card */
.bb-single-course-sidebar .widget.bb-enroll-widget
{
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* Thumbnail */
.bb-enroll-widget .thumbnail-container
{
    position: relative;
    line-height: 0;
}
.bb-enroll-widget .thumbnail-container img
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* "Preview this course" overlay only makes sense with a video */
.bb-enroll-widget .thumbnail-container-img .bb-course-video-overlay
{
    display: none;
}

/* Content */
.bb-enroll-widget .bb-course-preview-content
{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Enrolled members */
.bb-enroll-widget .bb-course-member-wrap
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--secondary-website-color);
}
.bb-enroll-widget .bb-course-members
{
    display: flex;
}
.bb-enroll-widget .bb-course-members img
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}
.bb-enroll-widget .bb-course-members img + img
{
    margin-left: -8px;
}

/* Status (Not Enrolled / In Progress / Complete) */
.bb-enroll-widget .bb-course-status-content .ld-status
{
    display: block;
    width: 100%;
    margin: 0;
    padding: .65rem 1rem;
    border-radius: 5px;
    background-color: var(--grey-light-website-color);
    color: var(--secondary-website-color);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/* Main button (Start / Continue / Login to Enroll / Take this course) */
.bb-enroll-widget .bb-button-wrap
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    text-align: center;
}
.bb-enroll-widget .learndash_join_button,
.bb-enroll-widget .learndash_join_button form
{
    margin: 0;
    width: 100%;
}
.bb-enroll-widget .learndash_join_button a.btn-advance,
.bb-enroll-widget .learndash_join_button .btn-join,
.bb-enroll-widget .learndash_join_button input[type="submit"]
{
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: 2px solid var(--accent-website-color) !important;
    border-radius: 5px;
    background-color: var(--accent-website-color) !important;
    color: white !important;
    font-family: var(--primary-website-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.bb-enroll-widget .learndash_join_button a.btn-advance:hover,
.bb-enroll-widget .learndash_join_button .btn-join:hover,
.bb-enroll-widget .learndash_join_button input[type="submit"]:hover
{
    background-color: white !important;
    color: var(--accent-website-color) !important;
}
.bb-enroll-widget .learndash_join_button.btn-advance-completed a.btn-advance
{
    border-color: var(--secondary-website-color) !important;
    background-color: var(--secondary-website-color) !important;
    display: none !important;
}
.bb-enroll-widget .learndash_join_button.btn-advance-completed a.btn-advance:hover
{
    background-color: white !important;
    color: var(--secondary-website-color) !important;
}
.bb-enroll-widget .learndash_join_button.btn-advance-disable
{
    opacity: .5;
    pointer-events: none;
}

/* Price / course type (Free, Open Registration, price) */
.bb-enroll-widget .bb-course-type
{
    font-size: .9rem;
    color: var(--secondary-website-color);
}
.bb-enroll-widget .bb-course-type-paynow
{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-website-color);
}
.bb-enroll-widget .ld-login-text
{
    color: var(--accent-website-color);
    font-weight: 600;
}

/* Course includes */
.bb-enroll-widget .bb-course-volume
{
    border-top: 1px solid var(--grey-website-color);
    padding-top: 1rem;
}
.bb-enroll-widget .bb-course-volume h4
{
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.bb-enroll-widget .bb-course-volume-list
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.bb-enroll-widget .bb-course-volume-list li
{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    font-size: .95rem;
    color: var(--secondary-website-color);
}
.bb-enroll-widget .bb-course-volume-list li i
{
    width: 18px;
    font-size: 18px;
    text-align: center;
}

/* Video modal is opened by BuddyBoss JS only: keep it hidden */
.bb-modal.mfp-hide
{
    display: none !important;
}

/*
    Lesson / topic / quiz: left sidebar (back to course, progress, lessons list).
    Markup: Jef_LD_Templates::render_step_sidebar() in jef4learndash-functions.php
*/
.jef-ld-step-sidebar
{
    position: sticky;
    top: 140px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

/* Back to course */
.jef-ld-step-sidebar .jef-ld-back-to-course
{
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 5px;
    background-color: var(--grey-light-website-color);
    color: var(--secondary-website-color);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s;
}
.jef-ld-step-sidebar .jef-ld-back-to-course:hover
{
    background-color: var(--grey-website-color);
}
/* arrow-left.php points right: flip it */
.jef-ld-step-sidebar .jef-ld-back-to-course svg
{
    width: 14px;
    height: 14px;
    transform: scaleX(-1);
}

/* Progress */
.jef-ld-step-sidebar .jef-ld-step-progress
{
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--grey-website-color);
}
.jef-ld-step-sidebar .ld-progress
{
    margin: 0;
}
.jef-ld-step-sidebar .ld-progress .ld-progress-heading
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    font-size: .85rem;
}

/* Lessons list */
.jef-ld-step-sidebar .ld-course-navigation
{
    margin: 0 -1.5rem -1.5rem;
}
.jef-ld-step-sidebar .ld-lesson-item-preview
{
    border-top: 1px solid var(--grey-website-color);
}
.jef-ld-step-sidebar .ld-lesson-item-preview-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.5rem;
    color: var(--text-website-color);
    font-size: .95rem;
    text-decoration: none;
}
.jef-ld-step-sidebar .ld-lesson-item-preview-heading:hover,
.jef-ld-step-sidebar .ld-lesson-item.ld-is-current-lesson > .ld-lesson-item-preview .ld-lesson-item-preview-heading
{
    background-color: var(--grey-light-website-color);
}
.jef-ld-step-sidebar .ld-lesson-item.ld-is-current-lesson > .ld-lesson-item-preview .ld-lesson-title
{
    font-weight: 600;
}

/* Mobile: no sticky */
@media (max-width: 991.98px)
{
    .bb-single-course-sidebar .bb-ld-sticky-sidebar,
    .jef-ld-step-sidebar
    {
        position: static;
    }
}

 
.learndash-wrapper .ld-content-actions .ld-content-action .ld-course-step-back {
	margin-top: 25px;
	text-transform: uppercase;
	font-weight: 600;
}
/*
    Lock icon on lessons the user can't access yet (not enrolled / drip).
    LD adds .learndash-not-available (skipped for admins with "bypass course limits")
    and .is_not_sample (free preview lessons stay unlocked).
*/
.learndash-wrapper .ld-item-list-item.learndash-not-available.is_not_sample .ld-item-name::after,
.jef-ld-step-sidebar .ld-lesson-item.learndash-not-available.is_not_sample .ld-lesson-item-preview-heading::after
{
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: .6rem;
    background-color: var(--secondary-website-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3ZM9 7a3 3 0 0 1 6 0v2H9Zm4 9.73V18a1 1 0 0 1-2 0v-1.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3ZM9 7a3 3 0 0 1 6 0v2H9Zm4 9.73V18a1 1 0 0 1-2 0v-1.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .6;
}