/* === Course Grid Template Styles === */

/* Used in archive-course.php */
.single-course-banner-wrap {
    margin-top: 26px;
    margin-bottom: 18px;
}

/* Unified play button style for Tutor video areas */
.course-video-play-btn,
.tutor-video-player .plyr__control--overlaid,
.tutor-video-player-wrapper .plyr__control--overlaid,
.tutor-video-player .mejs-overlay-button,
.tutor-video-player-wrapper .mejs-overlay-button,
.tutor-video-player .vjs-big-play-button,
.tutor-video-player-wrapper .vjs-big-play-button {
    background: rgba(120, 120, 120, 0.9) !important;
    border-color: transparent !important;
}

.course-video-play-btn {
    width: 49px !important;
    height: 49px !important;
    font-size: 17px !important;
}

.course-video-play-btn i {
    font-size: 17px !important;
}

.tutor-video-player .plyr__control--overlaid,
.tutor-video-player-wrapper .plyr__control--overlaid {
    width: 49px !important;
    height: 49px !important;
    min-width: 49px !important;
    min-height: 49px !important;
}

.tutor-video-player .plyr__control--overlaid svg,
.tutor-video-player-wrapper .plyr__control--overlaid svg {
    width: 17px !important;
    height: 17px !important;
}

.tutor-video-player .mejs-overlay-button,
.tutor-video-player-wrapper .mejs-overlay-button,
.tutor-video-player .vjs-big-play-button,
.tutor-video-player-wrapper .vjs-big-play-button {
    transform: none !important;
}

.course-video-play-btn:hover,
.tutor-video-player .plyr__control--overlaid:hover,
.tutor-video-player-wrapper .plyr__control--overlaid:hover,
.tutor-video-player .mejs-overlay-button:hover,
.tutor-video-player-wrapper .mejs-overlay-button:hover,
.tutor-video-player .vjs-big-play-button:hover,
.tutor-video-player-wrapper .vjs-big-play-button:hover {
    background: rgba(96, 96, 96, 0.92) !important;
}

.tutor-video-player .plyr,
.tutor-video-player-wrapper .plyr {
    --plyr-color-main: #cca471;
    --plyr-range-fill-background: #cca471;
    --plyr-video-progress-buffered-background: rgba(204, 164, 113, 0.25);
    --plyr-range-thumb-background: #cca471;
}

.tutor-video-player .plyr__progress__buffer,
.tutor-video-player .plyr__volume input[type="range"],
.tutor-video-player .plyr__progress input[type="range"],
.tutor-video-player-wrapper .plyr__progress__buffer,
.tutor-video-player-wrapper .plyr__volume input[type="range"],
.tutor-video-player-wrapper .plyr__progress input[type="range"] {
    color: #cca471 !important;
}

.tutor-video-player .mejs-controls .mejs-time-current,
.tutor-video-player .mejs-controls .mejs-horizontal-volume-current,
.tutor-video-player .mejs-controls .mejs-time-loaded,
.tutor-video-player .mejs-controls .mejs-horizontal-volume-total,
.tutor-video-player-wrapper .mejs-controls .mejs-time-current,
.tutor-video-player-wrapper .mejs-controls .mejs-horizontal-volume-current,
.tutor-video-player-wrapper .mejs-controls .mejs-time-loaded,
.tutor-video-player-wrapper .mejs-controls .mejs-horizontal-volume-total {
    background: #cca471 !important;
}

.tutor-video-player .mejs-controls .mejs-time-total,
.tutor-video-player .mejs-controls .mejs-horizontal-volume-total,
.tutor-video-player-wrapper .mejs-controls .mejs-time-total,
.tutor-video-player-wrapper .mejs-controls .mejs-horizontal-volume-total {
    background: rgba(204, 164, 113, 0.28) !important;
}

.single-course-banner {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
}

.single-course-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-hero-cta-heading-wrap {
    margin-top: 34px;
    text-align: center;
}

.course-hero-cta-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 800px;
    margin: 0 auto;
    padding: 12px 30px;
    background: linear-gradient(135deg, #a60f2d 0%, #c9193f 55%, #e33b5e 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.04em;
    border-radius: 999px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16);
}

a.course-hero-cta-heading {
    text-decoration: none !important;
}

a.course-hero-cta-heading:hover,
a.course-hero-cta-heading:focus {
    color: #fff;
    text-decoration: none !important;
}

.tutor-course-content-title {
    text-align: center;
}

.course-archive-page {
    padding: 18px 0 60px 0;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media screen and (max-width: 991px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media screen and (max-width: 600px) {
    .course-archive-page {
        padding-top: 12px;
    }

    .course-grid {
        grid-template-columns: 1fr;
    }
}

.course-archive-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-archive-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 36px rgba(122, 86, 8, 0.12);
}

.course-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.course-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-card-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.course-card-title a:hover {
    color: #cca471;
}

.course-card-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 13px;
    color: #6c757d;
}

.course-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.course-card-stat i {
    color: #8a6511;
}

.course-card-price {
    font-size: 20px;
    font-weight: 700;
    color: #8a6511;
    margin-bottom: 15px;
}

.course-card-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-meta .course-cat {
    background: #f4efe5 !important;
    border-color: rgba(197, 143, 22, 0.2) !important;
    color: #8a6511 !important;
    font-weight: 600;
}

.course-card-footer {
    margin-top: auto;
}

.course-card-button {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(135deg, #111111 0%, #cca471 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

.course-card-button:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.18);
}

/* Specific adjustment for Course Page Header spacing */
.course-archive-page .archive-header {
    margin-bottom: 30px;
}

/* Hide Description Editor in Tutor Frontend Course Builder */
.tutor-course-builder-section-content .wp-editor-wrap,
.tutor-course-builder-section-content .tutor-course-builder-editor {
    display: none !important;
}

/* Ensure the Quiz Timer SVG is always hidden even if JS injects it */
.quiz-meta-info-right .quiz-time-remaining svg {
    display: none !important;
}

/* Ensure the Retake button wrapper is always visible inline next to the timer */
#tutor-quiz-time-expire-wrapper {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Hide any text or icon injected by JS next to the Reattempt button */
#tutor-quiz-time-expire-wrapper .tutor-quiz-alert-text,
#tutor-quiz-time-expire-wrapper .flash-info {
    display: none !important;
}

/* Make Reattempt button look like a primary button */
#tutor-quiz-time-expire-wrapper .reattempt-btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 18px rgba(138, 101, 17, 0.16) !important;
}

#tutor-quiz-time-expire-wrapper .reattempt-btn:hover {
    box-shadow: 0 12px 22px rgba(138, 101, 17, 0.22) !important;
    transform: translateY(-1px);
}

/* ========================================
   SINGLE COURSE PAGE STYLING - Brand Colors
   ======================================== */

/* Hero Section - Simple style */
.single-course .breadcrumb-wrapper {
    margin-bottom: 0 !important;
}

.course-single-page .course-header {
    background: #fff;
    max-width: 800px;
    padding: 1.5rem 0 1.5rem;
    margin: 1.5rem auto 2rem;
    border-bottom: none;
    text-align: left;
}

.course-single-page .course-header .entry-title {
    color: #000;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 50px;
}

.course-single-page .course-excerpt {
    color: #000;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 1rem 0 0;
    text-align: left;
}

.course-single-page .enrolled-actions {
    justify-content: center !important;
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.course-progress-label,
.course-progress-percent {
    color: #8a6511;
}

.course-progress-track {
    background: #ece6db !important;
}

.course-progress-bar {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
}

.course-primary-action,
.course-secondary-action,
.course-single-page .modal-footer .btn-secondary {
    border-radius: 999px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.course-primary-action {
    background: linear-gradient(135deg, #a60f2d 0%, #c9193f 55%, #e33b5e 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.16);
}

.course-primary-action:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22);
}

.course-secondary-action {
    background: #f7f1e7 !important;
    border: 1px solid rgba(197, 143, 22, 0.25) !important;
    color: #8a6511 !important;
    box-shadow: none;
}

.course-secondary-action:hover {
    color: #8a6511 !important;
    border-color: #cca471 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.12);
}

.course-video-play-btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border-color: transparent !important;
}

.course-video-play-btn:hover {
    transform: scale(1.04);
}

.course-access-alert {
    background: linear-gradient(180deg, #fff9ef 0%, #f5eee2 100%);
    border: 1px solid rgba(197, 143, 22, 0.22);
    border-left: 5px solid #cca471;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(122, 86, 8, 0.08);
}

.course-access-alert-title,
.course-access-alert-note {
    color: #8a6511;
}

.course-access-alert-divider {
    border-top-color: rgba(197, 143, 22, 0.22);
}

.course-modal-icon {
    color: #cca471;
}

.course-single-page .modal-content {
    border: 1px solid rgba(197, 143, 22, 0.16);
    border-radius: 14px;
    overflow: hidden;
}

.course-single-page .modal-header {
    background: linear-gradient(135deg, #111111 0%, #2b2418 55%, #cca471 100%);
    color: #fff;
    border-bottom: 0;
}

.course-single-page .modal-header .close {
    color: #fff;
    opacity: 1;
    text-shadow: none;
}

.course-single-page .modal-footer {
    border-top-color: rgba(197, 143, 22, 0.12);
}

.course-single-page .modal-footer .btn-secondary {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.16);
}

.course-single-page .modal-footer .btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22);
}

.course-single-page .enrolled-actions {
    justify-content: flex-start !important;
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.course-progress-label,
.course-progress-percent {
    color: #8a6511;
}

.course-progress-track {
    background: #ece6db !important;
}

.course-progress-bar {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
}

.course-secondary-action,
.btn-register,
.sdnh-direct-enroll-wrap .tutor-btn-enroll,
.sdnh-direct-enroll-wrap button[type="submit"],
.course-single-page .modal-footer .btn-secondary {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.16);
}

.course-primary-action:hover,
.course-secondary-action:hover,
.btn-register:hover,
.sdnh-direct-enroll-wrap .tutor-btn-enroll:hover,
.sdnh-direct-enroll-wrap button[type="submit"]:hover,
.course-single-page .modal-footer .btn-secondary:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22);
}

.course-secondary-action {
    background: #f7f1e7 !important;
    border-color: rgba(197, 143, 22, 0.25) !important;
    color: #8a6511 !important;
    box-shadow: none;
}

.course-secondary-action:hover {
    color: #8a6511 !important;
    border-color: #cca471 !important;
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.12);
}

.course-video-play-btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border-color: transparent !important;
}

.course-video-play-btn:hover {
    transform: scale(1.04);
}

/* Video Section - Centered with max-width */
.course-video-section {
    margin-bottom: 3rem;
}

.course-video-section .video-wrapper {
    max-width: 800px;
    border-radius: 10px;
    /* Outer radius */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #000;
    margin: 0 auto;
    /* Center the wrapper */
    display: flex;
    flex-direction: column;
}

/* Aspect Ratio Utilities (BS5 Backport) */
.ratio {
    position: relative;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
    /* Clip video content */
    z-index: 1;
}

.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

.ratio>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
    /* 16:9 */
}

/* Video Control Bar */
.video-controls-bar {
    background: #000;
    padding: 10px 15px;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    /* Ensure z-index works */
    z-index: 100;
    /* Bring above video parts if needed */
}

/* Video Control Buttons */
.btn-video-control {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 6px 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Ensure pointer shows */
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    /* Ensure button z-index */
    z-index: 11;
}

.btn-video-control .btn-text {
    margin-left: 8px;
    /* Increase spacing */
}


.btn-video-control:hover {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%);
    border-color: transparent;
}

.btn-video-control i {
    width: 16px;
    text-align: center;
}



/* Maximize/Landscape Video Button */
.btn-video-landscape {
    position: absolute;
    bottom: 20px;
    right: 20px;
    top: auto;
    left: auto;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    /* Rectangle */
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100000;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
}

.btn-video-landscape i {
    margin: 0;
    font-size: 16px;
}

/* Expanded State (Has Text) */
.btn-video-landscape.is-expanded {
    width: auto;
    padding: 0 15px;
    border-radius: 4px;
    /* Rectangle */
}

.btn-video-landscape.is-expanded .btn-text {
    display: inline-block !important;
    /* Force show */
    margin-left: 10px;
}

.btn-video-landscape.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.btn-video-landscape:hover {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%);
    border-color: transparent;
}

/* Landscape Mode - Rotate 90deg on Mobile/Tablet */
@media (max-width: 991px) {
    .video-wrapper.video-landscape-mode {
        /* Wrapper creates the black backdrop properties */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 85vh !important;
        height: 100vw !important;
        /* Full width in landscape */
        max-width: none !important;
        z-index: 99999 !important;
        transform: translate(-50%, -50%) rotate(90deg) !important;
        border-radius: 0 !important;
        background: #000 !important;
        box-shadow: 0 0 0 10000px #000 !important;
        /* Huge shadow */
        outline: 10000px solid #000 !important;
        /* Fallback outline */
        display: flex;
        flex-direction: column;
    }

    .video-wrapper.video-landscape-mode .ratio {
        flex: 1;
        /* Video takes available space */
    }

    .video-wrapper.video-landscape-mode .course-video-header {
        border-radius: 0;
        width: 100%;
        font-size: 1.2rem;
        /* Larger text on mobile landscape */
    }

    .video-wrapper.video-landscape-mode .video-controls-bar {
        border-radius: 0;
        padding: 15px 20px;
    }

    /* Mobile Expanded: Visual Bottom-Right */
    /* With 90deg rotation: Source Top-Right becomes Visual Bottom-Right */
    .video-wrapper.video-landscape-mode .btn-video-landscape {
        top: 20px;
        right: 20px;
        bottom: auto;
        left: auto;
        z-index: 100001;
        /* Higher than wrapper */
    }
}

/* Desktop Mode - Centered Popup (No Rotation) */
@media (min-width: 992px) {
    .video-wrapper.video-landscape-mode {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: none !important;
        border-radius: 0 !important;
        padding: 40px;
    }

    .video-wrapper.video-landscape-mode .course-video-header {
        width: 80%;
        max-width: 1200px;
        border-radius: 4px 4px 0 0;
        font-size: 1.5rem;
    }

    .video-wrapper.video-landscape-mode .ratio {
        width: 80% !important;
        max-width: 1200px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    .video-wrapper.video-landscape-mode .video-controls-bar {
        width: 80%;
        /* Match video width */
        max-width: 1200px;
        background: #111;
        border-radius: 0 0 4px 4px;
    }

    /* Desktop Expanded: Top Right */
    .video-wrapper.video-landscape-mode .btn-video-landscape {
        top: 30px;
        right: 30px;
        bottom: auto;
        left: auto;
    }
}

/* CTA Button - Brand Red */
.course-cta-section {
    margin: 2rem auto 3rem;
    max-width: 800px;
}

.course-cta-section .tutor-enrol-course-form button,
.course-cta-section .course-primary-action,
.course-cta-section .sdnh-enroll-btn {
    min-width: 0;
    padding: 12px 30px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: normal;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16);
}

.btn-register {
    background: linear-gradient(135deg, #a60f2d 0%, #c9193f 55%, #e33b5e 100%);
    border: none;
    color: #fff;
    border-radius: 50px;
    font-weight: 800;
    transition: all 0.3s ease;
}

.btn-register:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(166, 15, 45, 0.22);
}

/* Style Native Enrollment Button to Match */
.sdnh-direct-enroll-wrap .tutor-course-enroll-wrap {
    margin: 0 auto;
    text-align: center;
}

.sdnh-direct-enroll-wrap .tutor-btn-enroll,
.sdnh-direct-enroll-wrap button[type="submit"] {
    background: linear-gradient(135deg, #a60f2d 0%, #c9193f 55%, #e33b5e 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 48px !important;
    /* px-5 py-3 approx */
    font-size: 1.25rem !important;
    /* btn-lg */
    transition: all 0.3s ease !important;
    display: inline-block !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

.sdnh-direct-enroll-wrap .tutor-btn-enroll:hover,
.sdnh-direct-enroll-wrap button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(166, 15, 45, 0.22);
}

/* Section Titles - Normal case */
.course-single-page .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* Benefits Section - List Style */
.course-benefits-section {
    max-width: 800px;
    margin: 0 auto;
}

.course-problems-section {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 60px !important;
}

.course-problems-section .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    text-align: center;
}

.course-problems-accordion .accordion-item.course-problem-item {
    border: 1px solid #d8d8d8;
    background: #ffffff;
    margin-bottom: 2rem !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-problems-accordion .accordion-item.course-problem-item:hover {
    border-color: #cca471;
}

.course-problems-accordion .accordion-item.course-problem-item:has(.accordion-button:not(.collapsed)),
.course-problems-accordion .accordion-item.course-problem-item:has(.course-problem-collapse.show) {
    border-color: #8a6511;
    box-shadow: 0 16px 32px rgba(138, 101, 17, 0.12);
}

.course-problems-accordion .accordion-button.course-problem-button {
    background: #ffffff;
    color: #111111;
    font-size: 1rem;
    padding: 20px 54px 20px 30px !important;
    border: none;
    box-shadow: none;
    position: relative;
    font-weight: 700;
    transition: color 0.3s ease, box-shadow 0.3s ease;
}

.course-problems-accordion .accordion-button.course-problem-button:hover,
.course-problems-accordion .accordion-button.course-problem-button:not(.collapsed) {
    background: #ffffff;
    color: #8a6511;
    box-shadow: none;
}

.course-problems-accordion .accordion-button.course-problem-button:focus {
    box-shadow: none;
    outline: none;
}

.course-problems-accordion .accordion-button.course-problem-button::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 42px;
    border-radius: 0;
    background: #d8d8d8;
    transition: background-color 0.25s ease;
}

.course-problems-accordion .accordion-button.course-problem-button::before {
    content: '›';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1.6rem;
    font-weight: 500;
    color: #8f8f8f;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.course-problems-accordion .accordion-button.course-problem-button:not(.collapsed)::before {
    color: #8a6511;
    transform: translateY(-50%) rotate(90deg);
}

.course-problems-accordion .accordion-button.course-problem-button:not(.collapsed)::after {
    background: #cca471;
}

.course-problems-accordion .course-problem-collapse .accordion-body {
    padding: 1.25rem 1.5rem 1.4rem;
    color: #2f2a22;
    font-size: 1rem;
    line-height: 1.8;
    background: #ffffff;
    border-top: 1px solid #ececec;
}

.course-problems-note-block {
    margin-top: 1.5rem;
    padding: 3rem 1.4rem;
    background: #f0f0f0;
    border: 1px solid rgba(204, 164, 113, 0.75);
    border-left: 4px solid #cca471;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1);
    color: #8a6511;
    font-size: 1rem;
    line-height: 1.85;
    font-weight: 700;
}

.benefits-list {
    max-width: 100%;
}

.benefits-list .benefit-card {
    margin-bottom: 3rem !important;
}

/* New Design: #e1e1e1 Background, Number -> Title -> 2 Cols */
.benefit-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #d8d8d8;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
    border-color: #cca471;
}

.benefit-header {
    margin-bottom: 28px;
}

.benefit-number {
    font-size: 3rem;
    font-weight: 800;
    color: #8a6511;
    line-height: 1;
    margin-bottom: 16px;
}

.benefit-title {
    color: #000;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.4;
}

.benefit-body {
    gap: 36px;
}

.benefit-image-col {
    width: 35%;
    flex-shrink: 0;
}

.benefit-image-col img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.benefit-content-col {
    flex-grow: 1;
}

.benefit-desc {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .course-problems-accordion .accordion-button {
        padding: 18px 46px 18px 24px !important;
        font-size: 0.98rem;
    }

    .course-problems-accordion .accordion-button::after {
        left: 12px;
        height: 24px;
    }

    .course-problems-accordion .accordion-body {
        padding: 1rem 1.1rem 1.15rem;
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .course-problems-note-block {
        margin-top: 1.15rem;
        padding: 1.25rem 1.1rem;
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .benefit-body {
        flex-direction: column;
        gap: 0px;
    }

    .benefit-image-col {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Curriculum Section - Single Column Design */
.course-curriculum-section {
    max-width: 800px;
    margin: 0 auto;
}

.course-curriculum-section .tutor-accordion,
.course-curriculum-section .tutor-course-topics-contents,
.course-curriculum-section .tutor-course-content-wrap {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.course-curriculum-section .tutor-course-content-title,
.course-faq-section .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    text-align: center !important;
}

.course-curriculum-section .tutor-course-content-title {
    display: block;
    width: 100%;
}

.course-faq-section .accordion-item {
    border: 1px solid #d8d8d8 !important;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    background: #fff !important;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    margin-bottom: 2rem !important;
}

.course-faq-section .accordion-button {
    background: #ffffff !important;
    color: #212529 !important;
    padding: 1.25rem 3.4rem 1.25rem 3rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
    border-radius: 16px 16px 0 0 !important;
}

.course-faq-section .accordion-button:hover,
.course-faq-section .accordion-button:not(.collapsed) {
    background: #ffffff !important;
    color: #8a6511 !important;
}

.course-faq-section .accordion-item:hover {
    border-color: #cca471 !important;
}

.course-faq-section .accordion-button:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
}

.course-faq-section .accordion-button::after {
    content: '›' !important;
    display: block !important;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    font-size: 1.6rem;
    font-weight: 500;
    color: #8f8f8f;
    line-height: 1;
    transition: transform .25s ease, color .25s ease;
}

.course-faq-section .accordion-button::before {
    display: none !important;
}

.course-faq-section .accordion-header {
    position: relative;
}

.course-faq-section .accordion-header::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 42px;
    border-radius: 0;
    background: #d8d8d8;
    transition: background-color .2s ease-in-out;
    z-index: 2;
}

.course-faq-section .sdnh-faq-question-text {
    display: inline-block;
    padding-left: 0.6rem;
}

.course-faq-section .accordion-button:not(.collapsed) + .accordion-header::before,
.course-faq-section .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-header::before {
    background: #cca471;
}

.course-faq-section .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: #8a6511 !important;
    box-shadow: 0 16px 32px rgba(138, 101, 17, 0.12);
}

.course-faq-section .accordion-button:not(.collapsed)::after {
    color: #8a6511;
    transform: translateY(-50%) rotate(90deg);
}

.course-faq-section .accordion-item:not(:has(.accordion-button:not(.collapsed))) .accordion-button {
    border-radius: 16px !important;
}

.course-faq-section .accordion-body {
    padding: 0 !important;
    border: none !important;
    border-top: 1px solid #e6e6e6 !important;
    background: #ffffff !important;
}

.course-faq-section .faq-answer-list {
    background: #ffffff;
}

.course-faq-section .faq-answer-line {
    padding: 1rem 1.25rem;
    color: #2f2a22;
    font-size: 1rem;
    line-height: 1.8;
}

.course-faq-section .faq-answer-line + .faq-answer-line {
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

/* Custom Accordion Styles */
.custom-accordion .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 1rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-accordion .accordion-button {
    background: #e1e1e1;
    /* Match benefits bg */
    color: #000;
    font-size: 1rem;
    padding: 20px 50px 20px 20px !important;
    border: none;
    box-shadow: none;
    position: relative;
    font-weight: 600;
    /* Bold title */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.custom-accordion .accordion-button:hover,
.custom-accordion .accordion-button:not(.collapsed) {
    background: #e1e1e1;
    /* Keep same bg */
    color: #8a6511;
    box-shadow: none;
}

.custom-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

/* Custom +/- Toggle Indicator on Right */
.custom-accordion .accordion-button::after {
    display: none;
    /* Hide default bootstrap icon */
}

.custom-accordion .accordion-button::before {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: #6c757d;
    transition: transform 0.3s ease;
    line-height: 1;
}

.custom-accordion .accordion-button:not(.collapsed)::before {
    content: '-';
    transform: translateY(-50%) rotate(0deg);
    /* Simple minus */
    color: #8a6511;
}

/* Accordion Body */
.custom-accordion .accordion-body {
    padding: 1.25rem;
    color: #000;
    font-size: 0.95rem;
    line-height: 1.6;
    background: #f8f9fa;
    /* Lighter than header #e1e1e1 */
}

/* Responsive */
@media (max-width: 991px) {
    .curriculum-image {
        position: static;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    .custom-accordion .accordion-button::before {
        right: 1rem;
    }
}

/* Registration Guide */
#registration-guide {
    scroll-margin-top: 100px;
}

.course-registration-section {
    background: #fff8f0;
    border-left: 4px solid #cca471 !important;
    padding: 2rem;
    border-radius: 6px;
    max-width: 800px;
    margin: 0 auto;
}

.course-registration-section .section-title {
    color: #8a6511;
    border-bottom-color: #cca471;
}

.registration-content {
    color: #000;
    line-height: 1.7;
}

.course-manual-cta-section {
    max-width: 800px;
    width: 100%;
    margin: 30px auto 60px;
}

.course-manual-cta-box {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #111111;
}

.course-manual-cta-box::before {
    display: none;
}

.course-manual-cta-text {
    max-width: none;
}

.course-manual-cta-heading {
    margin: 0;
}

.course-manual-cta-body {
    color: inherit;
}

.course-manual-cta-action {
    margin-top: 0;
    text-align: inherit;
}

.course-manual-cta-action .sdnh-direct-enroll-wrap,
.course-manual-cta-action .course-access-alert,
.course-manual-cta-action .course-manual-cta-button {
    margin-top: 0 !important;
}

.course-manual-cta-action .course-manual-cta-button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.course-manual-cta-action .course-manual-cta-button:hover {
    color: #111111 !important;
    text-decoration: none;
}

@media (max-width: 768px) {
    .course-manual-cta-box {
        padding: 0;
        border-radius: 0;
    }

    .course-manual-cta-text {
        font-size: inherit;
        line-height: inherit;
    }

    .course-manual-cta-heading {
        font-size: inherit;
        line-height: inherit;
        margin-bottom: 0;
    }

    .course-manual-cta-body {
        font-size: inherit;
        line-height: inherit;
    }

    .course-manual-cta-action .course-manual-cta-button {
        min-width: 100%;
        width: 100%;
    }

    .course-manual-cta-action,
    .course-manual-cta-action .tutor-enrol-course-form,
    .course-manual-cta-action .sdnh-direct-enroll-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .course-cta-section .course-manual-cta-button {
        min-width: 100%;
        width: 100%;
    }
}

/* FAQs Section - Uses shared .custom-accordion styles */
.course-faq-section {
    padding: 1rem 0 0.5rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Main Content */
.course-main-content {
    padding: 2rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.course-main-content .entry-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #000;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 768px) {

    .course-single-page .course-header {
        padding: 0;
        margin: 1rem auto 1.5rem;
    }

    .course-single-page .course-header .entry-title {
        font-size: 1.75rem;
        line-height: 38px;
    }

    .course-single-page .course-excerpt {
        font-size: 1rem;
    }

    .course-single-page .section-title {
        font-size: 26px;
    }

    .benefit-item {
        margin-bottom: 1rem;
    }

    .btn-register {
        font-size: 1rem;
        padding: 0.75rem 2rem !important;
    }

    .benefit-icon {
        width: 50px;
        height: 50px;
    }
}

/* Sticky Video Styles REMOVED */

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === Match Tutor Accordion to FAQ Style === */

/* Wrapper adjustment */
.course-curriculum-section .tutor-accordion-item {
    margin-bottom: 2rem;
    border: 1px solid #d8d8d8 !important;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    background-color: #fff;
    outline: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-curriculum-section .tutor-accordion-item:hover {
    border-color: #cca471 !important;
}

/* Header */
.tutor-accordion-item-header,
.sdnh-accordion-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem 3.4rem 1.25rem 1.9rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0 !important;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
    font-weight: 700;
    cursor: pointer;
}

.course-curriculum-section .tutor-accordion-item-header:hover,
.course-curriculum-section .tutor-accordion-item-header.is-active,
.course-curriculum-section .sdnh-accordion-header:hover,
.course-curriculum-section .sdnh-accordion-header.is-active {
    color: #8a6511 !important;
}

.course-curriculum-section .tutor-accordion-item-header,
.course-curriculum-section .sdnh-accordion-header {
    border-left: 0 !important;
    padding-left: 1.9rem !important;
    box-shadow: none;
    border-radius: 16px 16px 0 0;
}

.course-curriculum-section .tutor-accordion-item-header::before,
.course-curriculum-section .sdnh-accordion-header::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 42px;
    border-radius: 0;
    background: #d8d8d8;
    transition: background-color .2s ease-in-out;
}

.course-curriculum-section .tutor-accordion-item-header::after,
.course-curriculum-section .sdnh-accordion-header::after {
    display: none !important;
}

.course-curriculum-section .sdnh-curriculum-toggle {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 500;
    color: #8f8f8f;
    line-height: 1;
    transition: transform .25s ease, color .25s ease;
    pointer-events: none;
}

/* Active State */
.tutor-accordion-item-header.is-active,
.sdnh-accordion-header.is-active {
    color: #8a6511;
    background-color: #ffffff;
}

.course-curriculum-section .tutor-accordion-item:has(.tutor-accordion-item-header.is-active),
.course-curriculum-section .tutor-accordion-item:has(.sdnh-accordion-header.is-active) {
    border-color: #8a6511 !important;
    box-shadow: 0 16px 32px rgba(138, 101, 17, 0.12) !important;
}

.course-curriculum-section .tutor-accordion-item:not(:has(.tutor-accordion-item-header.is-active)) .tutor-accordion-item-header,
.course-curriculum-section .tutor-accordion-item:not(:has(.sdnh-accordion-header.is-active)) .sdnh-accordion-header {
    border-radius: 20px;
}

.course-curriculum-section .tutor-accordion-item-header:hover .sdnh-curriculum-toggle,
.course-curriculum-section .tutor-accordion-item-header.is-active .sdnh-curriculum-toggle,
.course-curriculum-section .sdnh-accordion-header:hover .sdnh-curriculum-toggle,
.course-curriculum-section .sdnh-accordion-header.is-active .sdnh-curriculum-toggle {
    color: #8a6511;
}

.course-curriculum-section .tutor-accordion-item-header.is-active::before,
.course-curriculum-section .sdnh-accordion-header.is-active::before {
    background: #cca471;
}

.course-curriculum-section .tutor-accordion-item-header.is-active .sdnh-curriculum-toggle,
.course-curriculum-section .sdnh-accordion-header.is-active .sdnh-curriculum-toggle {
    transform: translateY(-50%) rotate(90deg);
}

.tutor-accordion-item-body,
.sdnh-accordion-body {
    padding: 0;
    border: none !important;
}

/* Body */
.tutor-accordion-item-body,
.sdnh-accordion-body-content {
    border: none !important;
    background: #ffffff;
}

/* === Enrolled Badge === */
.course-card-image {
    position: relative;
}

.enrolled-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #28a745;
    /* Green */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

/* === Enrolled Progress & Continue Button === */
.enrolled-progress .progress {
    background-color: #e9ecef;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.enrolled-progress .progress-bar {
    background: linear-gradient(135deg, #7a5608 0%, #cca471 100%) !important;
}

.course-card-button.btn-continue {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%);
    border-color: transparent;
}

.course-card-button.btn-continue:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.18);
}



/* List Items Styling */
.tutor-course-content-list-item {
    border-bottom: 1px solid #eee;
    padding: 12px 18px;
}

.tutor-course-content-list-item:last-child {
    border-bottom: none;
}

.course-curriculum-section .tutor-course-content-list {
    border: none !important;
    box-shadow: none !important;
}

.course-curriculum-section .tutor-course-content-list-item {
    border: none !important;
    box-shadow: none !important;
}

.course-curriculum-section .tutor-course-content-list-item + .tutor-course-content-list-item {
    border-top: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.sdnh-tutor-container .tutor-dashboard-menu-divider {
    border-top: 1px solid #e0e4e8;
    margin: 15px 0;
}

.tutor-dashboard.tutor-frontend-dashboard {
    padding-top: 28px !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-container {
    max-width: 1200px;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-header {
    margin-bottom: 28px;
    padding: 20px 24px;
    background: linear-gradient(180deg, #fffaf1 0%, #f5efe5 100%);
    border: 1px solid rgba(197, 143, 22, 0.16);
    border-bottom: none !important;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(122, 86, 8, 0.08);
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-header,
.tutor-dashboard.tutor-frontend-dashboard .tutor-header-left-side.tutor-dashboard-header,
.tutor-dashboard.tutor-frontend-dashboard .tutor-header-right-side {
    border-bottom: 0 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-maincontent {
    border-top: 0 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-header::after,
.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-maincontent ul.tutor-dashboard-permalinks::before {
    content: none !important;
    display: none !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-header-greetings {
    color: #8f7a4f;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-header-username,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-header-display-name,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-header-username * {
    color: #1f1f1f;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-header-right-side .tutor-btn,
.tutor-dashboard.tutor-frontend-dashboard .tutor-mobile-menu-toggle-wrap .tutor-btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.16) !important;
    border-radius: 10px !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-header-right-side .tutor-btn:hover,
.tutor-dashboard.tutor-frontend-dashboard .tutor-mobile-menu-toggle-wrap .tutor-btn:hover {
    background: linear-gradient(135deg, #1b1710 0%, #d39d26 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.2) !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
    background: #fff;
    border: 1px solid rgba(197, 143, 22, 0.12);
    border-right: none !important;
    border-inline-end: 0 !important;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 10px 22px rgba(122, 86, 8, 0.06);
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu {
    border-right: 0 !important;
    border-inline-end: 0 !important;
    box-shadow: none !important;
    position: relative;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu::before,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu::after,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks::before,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks::after {
    content: none !important;
    display: none !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li {
    margin-bottom: 6px;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li:last-child {
    margin-bottom: 0;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a {
    border-radius: 10px;
    color: #3d3528 !important;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a .tutor-dashboard-menu-item-icon,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a [class*="tutor-icon-"] {
    color: #8a6511 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover {
    background: #f7f1e7 !important;
    color: #8a6511 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover .tutor-dashboard-menu-item-icon,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover [class*="tutor-icon-"] {
    color: #8a6511 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.16);
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a span,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a i {
    color: #fff !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a .tutor-dashboard-menu-item-icon,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a [class*="tutor-icon-"] {
    color: #fff !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-inline-links,
.tutor-dashboard.tutor-frontend-dashboard .tutor-announcement-list-item,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-review-item,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-wrapper {
    background: #fff;
    border: 1px solid rgba(197, 143, 22, 0.12);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(122, 86, 8, 0.06);
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content [class*="tutor-icon-"],
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .dashicons,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-color-warning {
    color: #8a6511 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content svg {
    fill: #8a6511 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .progress-bar,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-progress-bar,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content [class*="progress-bar"] {
    background: linear-gradient(135deg, #7a5608 0%, #cca471 100%) !important;
    background-color: #cca471 !important;
    border-color: #cca471 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-course-progress .tutor-progress-bar {
    background: #ffffff !important;
    border: 1px solid rgba(197, 143, 22, 0.18);
    box-shadow: none !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-frontend-dashboard-course-progress .tutor-progress-bar .tutor-progress-value {
    background: linear-gradient(135deg, #7a5608 0%, #cca471 100%) !important;
    background-color: #cca471 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .tutor-ratings,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .list-item-button,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .tutor-card-body > .tutor-mt-24 {
    display: none !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .tutor-course-name {
    margin-bottom: 20px !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .tutor-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content-inner.enrolled-courses .tutor-course-progress {
    margin-top: 0 !important;
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-btn-primary,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-profile-settings-save,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-profile-password-reset,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor_cover_uploader,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor_set_withdraw_account_btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.16);
}

.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-btn-primary:hover,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-profile-settings-save:hover,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor-profile-password-reset:hover,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor_cover_uploader:hover,
.tutor-dashboard.tutor-frontend-dashboard .tutor-dashboard-content .tutor_set_withdraw_account_btn:hover {
    color: #fff !important;
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22);
}

.tutor-dashboard.tutor-frontend-dashboard a {
    color: #8a6511;
}

.tutor-dashboard.tutor-frontend-dashboard a:hover {
    color: #cca471;
}

/* Remove borders from mobile dashboard menu and make header compact */
@media (max-width: 768px) {

    .tutor-dashboard.tutor-frontend-dashboard {
        padding-top: 18px !important;
    }

    /* Compact Header Styling */
    .tutor-frontend-dashboard-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        border-radius: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .tutor-header-left-side.tutor-dashboard-header {
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        flex-direction: row !important;
        /* Force row */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .tutor-dashboard-header-avatar {
        flex: 0 0 45px !important;
        width: 45px !important;
        height: 45px !important;
        margin-right: 12px !important;
        /* Space between avatar and text */
        display: block !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .tutor-dashboard-header-avatar>div.tutor-avatar,
    .tutor-dashboard-header-avatar .tutor-avatar {
        width: 45px !important;
        height: 45px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .tutor-dashboard-header-avatar img,
    .tutor-dashboard-header-avatar .tutor-avatar-text {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
        border-radius: 50% !important;
        line-height: 45px !important;
        margin: 0 !important;
        display: block !important;
        text-align: center !important;
    }

    .tutor-dashboard-header .tutor-user-info {
        margin-left: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .tutor-dashboard-header-display-name {
        display: block !important;
        width: 100%;
    }

    .tutor-dashboard-header-greetings {
        font-size: 13px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        color: #777;
        display: block !important;
        margin-left: 0 !important;
    }

    .tutor-dashboard-header-username {
        font-size: 15px !important;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        /* allow badge wrapping if really tight */
        margin-top: 0 !important;
        line-height: 1.2 !important;
        margin-left: 0 !important;
    }

    /* Hide right side if empty or reduce its margin */
    .tutor-header-right-side {
        display: none !important;
    }

    /* Mobile Toggle Menu Button Spacing */
    .tutor-mobile-menu-toggle-wrap {
        position: fixed !important;
        bottom: 30px !important;
        left: 20px !important;
        z-index: 9998 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        width: max-content !important;
        padding: 0 !important;
    }

    .tutor-dashboard.tutor-frontend-dashboard .tutor-mobile-menu-toggle-wrap .sdnh-mobile-account-toggle {
        display: inline-flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        background: linear-gradient(135deg, rgba(17, 17, 17, 0.94) 0%, rgba(197, 143, 22, 0.94) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 5px !important;
        box-shadow: 0 10px 20px rgba(122, 86, 8, 0.18) !important;
        color: #fff7e8 !important;
        padding: 8px 7px !important;
        min-height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .tutor-dashboard.tutor-frontend-dashboard .tutor-mobile-menu-toggle-wrap .sdnh-mobile-account-toggle:hover,
    .tutor-dashboard.tutor-frontend-dashboard .tutor-mobile-menu-toggle-wrap .sdnh-mobile-account-toggle:focus {
        background: linear-gradient(135deg, rgba(17, 17, 17, 0.98) 0%, rgba(197, 143, 22, 0.98) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 24px rgba(122, 86, 8, 0.24) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
    }

    .sdnh-mobile-account-toggle-inner {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1.1;
        width: auto;
        white-space: nowrap;
    }

    .sdnh-mobile-account-toggle-inner i {
        font-size: 18px;
        line-height: 1;
        color: #fff !important;
    }

    .tutor-dashboard-left-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        padding: 18px 16px 28px !important;
        margin: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .tutor-dashboard.is-sidebar-expanded .tutor-dashboard-left-menu {
        transform: translateX(0);
    }

    .sdnh-mobile-account-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }

    .sdnh-mobile-account-panel-title {
        color: #111111;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .sdnh-mobile-account-close {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: 0;
        color: #8a6511;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0;
    }

    .sdnh-mobile-account-close i {
        font-size: 1rem;
    }

    /* Keep the menu as is */
    .tutor-dashboard-left-menu {
        border: none !important;
        box-shadow: none !important;
        padding: 18px 16px 28px !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.tutor-dashboard-menu-divider {
        display: none !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li {
        border: none !important;
        background: transparent !important;
        margin-bottom: 2px;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a {
        border: none !important;
        border-radius: 10px !important;
        color: #3d3528 !important;
        padding: 12px 14px !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover {
        background: #f7f1e7 !important;
        color: #8a6511 !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a .tutor-dashboard-menu-item-icon,
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a [class*="tutor-icon-"] {
        color: #cca471 !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover .tutor-dashboard-menu-item-icon,
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover [class*="tutor-icon-"] {
        color: #8a6511 !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a {
        background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
        color: #ffffff !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a span,
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a i {
        color: #ffffff !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a .tutor-dashboard-menu-item-icon,
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a [class*="tutor-icon-"] {
        color: #ffffff !important;
    }
}

/* === Homepage Course Slider & Card Styles (Moved from components.css) === */

.course-desc {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.course-btn {
    font-size: 18px;
    font-weight: bold;
    color: #cca471;
    text-decoration: none;
    border-bottom: 2px solid #cca471;
    padding-bottom: 2px;
    transition: all 0.3s;
}

.course-btn:hover {
    color: #bfa57d;
    text-decoration: none;
}

.course-list-container {
    overflow: hidden;
    width: 100%;
    padding: 30px 0 30px;
}

.course-list {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
    scroll-behavior: smooth;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 5px;
    box-sizing: border-box;
    width: 100%;
    margin-left: 10px;
}

.course-list::-webkit-scrollbar {
    display: none;
}

.course-item {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 10px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* Base Card Style (Shared) */
.course-card,
.course-archive-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Re-added border for consistency if desired */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.course-card:hover,
.course-archive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Homepage specific card adjustments */
.course-card .course-thumb {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%; /* 4:3 ratio */
}

.course-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-details {
    padding: 15px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.course-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-name a {
    color: #333;
    text-decoration: none;
}

.course-price {
    color: #cca471;
    font-weight: bold;
    font-size: 16px;
    margin-top: auto;
    /* Push price to bottom if needed */
}

/* Navigation Buttons (Side) */
.course-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.course-nav-btn.nav-left {
    left: 10px;
}

.course-nav-btn.nav-right {
    right: 10px;
}

@media screen and (min-width: 1350px) {
    .course-nav-btn.nav-left {
        left: -60px;
    }

    .course-nav-btn.nav-right {
        right: -60px;
    }
}

.course-nav-btn:hover {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%);
    color: #fff;
    border-color: transparent;
}

/* Mobile Responsiveness for Course Section */
@media screen and (max-width: 768px) {
    .single-course-banner-wrap {
        margin-top: 14px;
        margin-bottom: 18px;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .single-course-banner-wrap .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .single-course-banner {
        border-radius: 0;
        aspect-ratio: 16 / 9;
    }

    .course-hero-cta-heading-wrap {
        margin-top: 40px;
        text-align: center;
    }

    .course-hero-cta-heading {
        width: 80%;
        padding: 12px 18px;
        font-size: 1rem;
        line-height: 1.5;
    }

    .course-nav-btn {
        display: none;
    }

    .course-section-1,
    .course-section-2,
    .course-section-3 {
        padding-right: 0;
        padding-left: 0;
    }

    .course-desc-wrapper {
        border-left: 4px solid #cca471;
        padding-left: 15px;
        margin: 0 0 25px 0;
        text-align: left;
    }

    .course-info {
        padding-right: 15px;
        margin-bottom: 20px;
        text-align: left;
    }

    .course-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .course-list {
        overflow-x: visible;
    }

    .course-item {
        flex: 0 0 70vw;
        width: 70vw;
        max-width: 70vw;
        min-width: 70vw;
        margin-bottom: 15px;
        margin-left: 10px;
        padding: 0;
    }

    .course-list::after {
        content: '';
        flex: 0 0 1px;
        width: 1px;
        padding-right: 20px;
    }

    .course-card {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
        border: none !important;
    }
}

/* === Single Course Header Actions (Enrolled) === */
.course-single-page .course-header .enrolled-actions {
    margin-top: 2rem;
    padding: 1.5rem;
    border-top: none;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem;
}

.course-single-page .course-header .enrolled-actions .progress-wrapper {
    flex: 0 0 320px;
    width: 320px;
    margin-right: 0 !important;
    max-width: 320px;
}

.course-single-page .course-header .enrolled-actions .course-progress-label,
.course-single-page .course-header .enrolled-actions .course-progress-percent {
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

.course-single-page .course-header .enrolled-actions .course-progress-track,
.course-single-page .course-header .enrolled-actions .progress {
    height: 16px !important;
    border-radius: 999px !important;
}

.course-single-page .course-header .enrolled-actions .course-progress-bar,
.course-single-page .course-header .enrolled-actions .progress-bar {
    border-radius: 999px !important;
}

.course-single-page .course-header .enrolled-actions .action-wrapper {
    flex: 0 0 auto;
}

.course-single-page .course-header .enrolled-actions .btn-action {
    border-radius: 50px;
    font-size: 1rem;
    padding: 12px 30px;
    box-shadow: 0 8px 18px rgba(138, 101, 17, 0.16);
    transition: all 0.3s ease;
}

.course-single-page .course-header .enrolled-actions .btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(138, 101, 17, 0.22);
}

@media (max-width: 768px) {
    .course-single-page .course-header .enrolled-actions {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .course-single-page .course-header .enrolled-actions .progress-wrapper {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 0;
    }

    .course-single-page .course-header .enrolled-actions .action-wrapper {
        width: 100%;
        margin-top: 0.8rem !important;
    }

    .course-single-page .course-header .enrolled-actions .btn-action {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        padding: 14px 24px;
        font-size: 1.125rem;
        line-height: 1.2;
    }

    .course-single-page .course-header .enrolled-actions .action-wrapper .course-primary-action,
    .course-single-page .course-header .enrolled-actions .action-wrapper .btn.btn-action,
    .course-single-page .course-header .enrolled-actions .action-wrapper > a {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .course-single-page .course-header .enrolled-actions .course-progress-wrapper,
    .course-single-page .course-header .enrolled-actions .progress-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .course-single-page .course-header .enrolled-actions .course-progress-label,
    .course-single-page .course-header .enrolled-actions .course-progress-percent {
        font-size: 1.05rem !important;
    }

    .course-single-page .course-header .enrolled-actions .course-progress-track,
    .course-single-page .course-header .enrolled-actions .progress {
        width: 100%;
        height: 16px !important;
    }
}

/* === Course Filter Menu === */
.course-filter-menu {
    position: relative;
    z-index: 10;
}

.course-filter-menu .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 50px;
    background: #fff;
    color: #555;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e1e1e1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
}

.course-filter-menu .filter-btn:hover {
    background: #fff;
    color: #c40d2e;
    border-color: #c40d2e;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.course-filter-menu .filter-btn.active {
    background: #c40d2e;
    color: #fff;
    border-color: #c40d2e;
    box-shadow: 0 5px 15px rgba(196, 13, 46, 0.3);
    transform: translateY(0);
}


.course-filter-menu .filter-btn.active:hover {
    background: #a30b26;
    border-color: #a30b26;
    color: #fff;
}

/* Mobile Fix for Course Action Buttons - Single Line */
@media screen and (max-width: 576px) {

    .course-single-page .action-wrapper,
    .tutor-single-course-meta .action-wrapper {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        /* Center the buttons */
        gap: 15px;
        /* Increase gap slightly */
        margin-top: 25px;
        /* Add margin top */
        width: 100%;
        /* Ensure full width for centering */
    }

    .course-single-page .action-wrapper .btn-action,
    .course-single-page .action-wrapper .tutor-course-retake-button,
    .tutor-single-course-meta .action-wrapper .btn-action,
    .tutor-single-course-meta .action-wrapper .tutor-course-retake-button {
        white-space: nowrap !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        /* Increase font size */
        padding: 10px 20px !important;
        /* Increase padding */
        width: auto !important;
        margin: 0 !important;
        flex-shrink: 0;
        line-height: 1.2 !important;
        height: auto !important;
    }
}

/* === Fix Tutor Course Builder Frontend Top Spacing Gap === */
body.tutor-frontend {
    top: 0 !important;
}

/* Add some spacing within course builder */
body.tutor-frontend body.admin-bar .tutor-course-builder,
body.admin-bar .tutor-course-builder>div:first-child {
    top: 0 !important;
}

/* Hide Analytics Overview Graph and Filter Period */
.tutor-analytics-overview .tutor-analytics-graph,
.tutor-analytics-overview .analytics-title,
.tutor-analytics-overview div.tutor-modal-content a[href*="tutor-pro"] {
    display: none !important;
}

/* Ẩn nút Generate with AI trong khóa học */
button[data-cy="generate-with-ai"],
button:has(span:contains("Generate with AI")),
.tutor-course-builder-section button:has(svg:first-child) {
    display: none !important;
}

/* If the gap is caused by the WP admin bar pushing down .tutor-course-builder */
body.admin-bar .tutor-course-builder {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specifically target the builder header container to reset top position */
.tutor-course-builder>div:first-child {
    top: 0 !important;
}

/* Hide breadcrumb on single lesson pages */
body.single-lesson .breadcrumb-wrapper,
body.single-tutor_lesson .breadcrumb-wrapper,
body.single-tutor_quiz .breadcrumb-wrapper,
body.single-tutor_assignments .breadcrumb-wrapper,
body.single-tutor_zoom_meeting .breadcrumb-wrapper {
    display: none !important;
}

/* ============================================================
   Custom Single Lesson (Spotlight Mode) Layout
   ============================================================*/
/* Spotlight Custom Layout - Vibe Clean Override */

/* Main Layout & Container */
.vibe-lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 60px;
    align-items: start;
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    margin-bottom: 50px;
}

/* Main Content Area (Video & Text) */
.vibe-lesson-layout .vibe-lesson-main {
    grid-column: 1;
    flex: 1 1 auto;
    width: auto;
    position: relative;
    background: #ffffff;
    /* white theme */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 32px;
    min-height: calc(100vh - 40px);
}

.vibe-lesson-layout .vibe-lesson-main .tutor-course-topic-single-body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Sidebar Area (Curriculum) */
.vibe-lesson-layout .vibe-lesson-sidebar {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 350px;
    flex-shrink: 0;
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    position: sticky;
    top: 20px;
    background: transparent;
    border-radius: 0;
    border: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vibe-lesson-layout .vibe-lesson-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.vibe-lesson-related-main {
    grid-column: 1;
    min-width: 0;
    margin-bottom: 32px;
}

/* Responsive */
@media (max-width: 991px) {
    .vibe-lesson-layout {
        grid-template-columns: 1fr;
    }

    .vibe-lesson-layout .vibe-lesson-main {
        border: none;
        box-shadow: none;
        padding: 0;
        background: transparent;
        min-height: auto;
    }

    .vibe-lesson-layout .vibe-lesson-sidebar {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        position: static;
        max-height: none;
    }

    .vibe-lesson-related-main {
        grid-column: 1;
        margin-bottom: 24px;
    }

    .lesson-sidebar-scroll-spacer {
        height: 0;
    }
}

/* ============================================================
   Lesson Sidebar
   Scope all rules to the learn-page sidebar to avoid bleed
   ============================================================ */
.vibe-lesson-layout .tutor-course-single-sidebar-wrapper {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    padding: 8px 10px;
    border: 0;
}

.vibe-lesson-layout .lesson-sidebar-scroll-spacer {
    height: 0;
}

.vibe-lesson-layout .tutor-course-single-sidebar-title {
    padding: 20px 20px 15px;
    border-bottom: 2px solid #fff;
    margin-bottom: 0;
}

.vibe-lesson-layout .tutor-course-single-sidebar-title span {
    font-weight: bold;
    color: #333 !important;
    text-transform: uppercase;
}

.vibe-lesson-layout .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header,
.vibe-lesson-layout .tutor-course-single-sidebar-wrapper .sdnh-accordion-header {
    background: #fff;
    border-radius: 6px;
    padding: 12px 15px !important;
    margin-bottom: 0;
    border: none !important;
    font-weight: 600;
}

.vibe-lesson-layout .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body,
.vibe-lesson-layout .tutor-course-single-sidebar-wrapper .sdnh-accordion-body {
    background: transparent !important;
    border: none !important;
}

/* Custom Header */
.custom-lesson-header {
    background: linear-gradient(180deg, #fcfbf8 0%, #f6f1ea 100%) !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 18px !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(122, 86, 8, 0.08) !important;
    position: relative !important;
    margin: 20px auto 30px auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
    gap: 14px !important;
}

.custom-lesson-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(197, 143, 22, 0.06), rgba(197, 143, 22, 0));
    pointer-events: none;
}

.custom-lesson-progress-meta {
    gap: 12px;
}

.custom-lesson-progress-label,
.custom-lesson-progress-percent {
    font-size: 15px;
    font-weight: 500;
    color: #a06f11;
}

.custom-lesson-progress-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.custom-lesson-progress-track {
    height: 15px;
    border-radius: 999px;
    background-color: #ebe5da;
    overflow: hidden;
    display: flex;
}

.custom-lesson-back-btn {
    background: #ffffff;
    color: #8a6511;
    border: 1px solid rgba(197, 143, 22, 0.4);
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 14px !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.custom-lesson-back-btn:hover {
    background: #cca471;
    border-color: #cca471;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(138, 101, 17, 0.18);
}

.custom-lesson-back-btn:hover i,
.custom-lesson-back-btn:hover span {
    color: #fff !important;
}

.custom-lesson-header-right button,
.custom-lesson-header-right a.btn {
    background: linear-gradient(135deg, #111111 0%, #cca471 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: auto !important;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 14px rgba(138, 101, 17, 0.18) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
}

.custom-lesson-header-right .tutor-topbar-complete-btn,
.custom-lesson-header-right .custom-lesson-next-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.custom-lesson-header-right .tutor-topbar-complete-btn i,
.custom-lesson-header-right .tutor-topbar-complete-btn svg,
.custom-lesson-header-right .tutor-topbar-complete-btn [class*="icon"],
.custom-lesson-header-right .custom-lesson-next-btn i,
.custom-lesson-header-right .custom-lesson-next-btn svg,
.custom-lesson-header-right .custom-lesson-next-btn [class*="icon"] {
    display: none !important;
}

.custom-lesson-header > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .custom-lesson-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
        border-radius: 14px !important;
        margin: 20px 12px 34px !important;
        max-width: 100% !important;
        width: auto !important;
        border: none !important;
        box-shadow: 0 12px 28px rgba(122, 86, 8, 0.12) !important;
        gap: 12px !important;
    }

    .custom-lesson-header .custom-lesson-progress-wrapper {
        order: 1;
        grid-column: 1 / -1;
        flex: none;
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px 0 !important;
    }

    .custom-lesson-progress-label,
    .custom-lesson-progress-percent {
        font-size: 14px;
        font-weight: 500;
    }

    .custom-lesson-header .custom-lesson-header-left {
        order: 2;
        grid-column: 1;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    }

    .custom-lesson-header .custom-lesson-header-right {
        order: 3;
        grid-column: 2;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;
        display: flex !important;
        align-items: stretch !important;
    }

    .custom-lesson-header .custom-lesson-header-left .custom-lesson-back-btn {
        width: 100%;
        justify-content: center;
        min-height: 52px;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
        padding: 12px 14px !important;
    }

    .custom-lesson-header .custom-lesson-header-right .tutor-topbar-complete-btn,
    .custom-lesson-header .custom-lesson-header-right form {
        width: 100% !important;
        margin: 0 !important;
    }

    .custom-lesson-header .course-progress-track,
    .custom-lesson-header .course-progress-bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .custom-lesson-header .custom-lesson-header-right .tutor-topbar-complete-btn,
    .custom-lesson-header .custom-lesson-header-right .custom-lesson-next-btn,
    .custom-lesson-header .custom-lesson-header-right .custom-lesson-retake-btn,
    .custom-lesson-header .custom-lesson-header-right .btn {
        width: 100% !important;
        min-height: 52px !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-align: center !important;
        white-space: normal !important;
        padding: 12px 14px !important;
    }

    .custom-lesson-header .custom-lesson-header-right .tutor-topbar-complete-btn span,
    .custom-lesson-header .custom-lesson-header-right .custom-lesson-next-btn span,
    .custom-lesson-header .custom-lesson-header-left .custom-lesson-back-btn span {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

.custom-lesson-header-right button.custom-lesson-retake-btn {
    background: #f7f1e7 !important;
    color: #8a6511 !important;
    border: 1px solid rgba(197, 143, 22, 0.3) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}

.custom-lesson-header-right button:hover,
.custom-lesson-header-right a.btn:hover {
    background: linear-gradient(135deg, #111111 0%, #d1a129 100%) !important;
    box-shadow: 0 10px 18px rgba(138, 101, 17, 0.24) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.custom-lesson-header-right button.custom-lesson-retake-btn:hover {
    background: #cca471 !important;
    color: #fff !important;
}

.tutor-topbar-complete-btn {
    margin: 0 !important;
}

/* Sidebar Thumbnails */
.vibe-lesson-layout .custom-lesson-sidebar-left {
    align-items: center;
}

.vibe-lesson-layout .custom-lesson-sidebar-thumb {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 63px !important;
    min-height: 63px !important;
    max-height: 63px !important;
    margin-right: 14px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vibe-lesson-layout .lesson-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vibe-lesson-layout .lesson-thumb-placeholder {
    font-size: 24px;
    color: #9ca3af;
}

.vibe-lesson-layout .lesson-thumb-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.82);
    color: #fff7e2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.vibe-lesson-layout .lesson-thumb-duration i {
    font-size: 12px;
    color: #cca471;
}

.course-related-section {
    margin: 2.4rem auto 0;
    max-width: 800px;
    padding: 0;
    border-top: 1px solid #e6e6e6;
    padding-top: 2.75rem;
}

.course-related-section-inner {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.course-related-title {
    margin-bottom: 1.5rem;
    text-align: left;
}

.course-related-section .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    text-align: left !important;
    display: block;
    width: 100%;
    padding: 0 0 0 1.1rem;
    position: relative;
    padding-bottom: 0;
}

.course-related-section .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: #cca471;
}

.related-courses-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.related-course-card {
    height: 100%;
}

.course-related-in-learn {
    margin-top: 30px;
    padding-top: 2.25rem;
    max-width: none;
    border-top: 1px solid #e6e6e6;
}

.course-related-in-learn .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    text-align: left !important;
    display: block;
    width: 100%;
    padding: 0 0 0 1.1rem;
    position: relative;
}

.course-related-in-learn .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: #cca471;
}

.course-related-after-cta {
    margin-top: 1.25rem;
    margin-bottom: 3.5rem;
    width: 100%;
}

/* === Unified Yellow Course Action Buttons === */
.course-archive-card .course-card-button,
.course-archive-card .course-card-button.btn-continue,
.related-course-card .course-card-button,
.related-course-card .course-card-button.btn-continue {
    background: #cca471 !important;
    border-color: #cca471 !important;
    color: #000000 !important;
    box-shadow: 0 10px 20px rgba(138, 101, 17, 0.16) !important;
}

.course-archive-card .course-card-button:hover,
.course-archive-card .course-card-button.btn-continue:hover,
.related-course-card .course-card-button:hover,
.related-course-card .course-card-button.btn-continue:hover {
    background: #b98412 !important;
    border-color: #b98412 !important;
    color: #000000 !important;
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22) !important;
}

@media (max-width: 767.98px) {
    .course-related-section {
        padding: 0 15px;
        padding-top: 2.5rem;
    }

    .course-related-section-inner {
        padding: 0;
        border-radius: 0;
    }

    .related-courses-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .course-related-after-cta {
        margin-bottom: 4rem;
    }
}

.vibe-lesson-layout .custom-lesson-sidebar-title-wrap {
    flex: 1;
    overflow: hidden;
}

.vibe-lesson-layout .tutor-course-topic-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: #000;
    font-weight: 600;
}

.vibe-lesson-layout .tutor-course-topic-item {
    padding: 20px !important;
    /* Increased horizontal padding */
    background: #fff;
    margin-bottom: 0;
    border-bottom: 0 !important;
}

.vibe-lesson-layout .tutor-course-topic-item + .tutor-course-topic-item {
    border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.vibe-lesson-layout .tutor-course-topic-item a {
    display: flex !important;
    align-items: flex-start !important;
}

.course-curriculum-section .tutor-course-content-list-item-title a,
.course-curriculum-section .tutor-course-content-list-item-title a:visited {
    color: #000;
    transition: color 0.25s ease;
}

.course-curriculum-section .tutor-course-content-list-item-title a:hover,
.course-curriculum-section .tutor-course-content-list-item-title a:focus {
    color: #cca471;
    text-decoration: none;
}

.course-curriculum-section .tutor-course-topic-item:hover .tutor-course-topic-item-title,
.course-curriculum-section .tutor-course-topic-item:hover .tutor-course-topic-item-title a,
.course-curriculum-section .tutor-course-topic-item a:hover .tutor-course-topic-item-title,
.course-curriculum-section .tutor-course-topic-item a:hover .tutor-course-topic-item-title a {
    color: #cca471 !important;
}

.vibe-lesson-layout .tutor-course-topic-item.is-active {
    background: #f1f1f1;
    border-left: 0;
}

.vibe-lesson-layout .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
.vibe-lesson-layout .tutor-course-topic-item.is-active .tutor-course-topic-item-title a {
    color: #cca471 !important;
}

.vibe-lesson-layout .tutor-course-topic-item:hover {
    background: #ffffff;
}

/* Sidebar Custom Topics */
.vibe-lesson-layout .custom-sidebar-topic {
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid #bcbcbc;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.05),
        0 16px 32px -22px rgba(17, 17, 17, 0.18);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.vibe-lesson-layout .custom-sidebar-topic:hover {
    border-color: #cca471;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.06),
        0 18px 36px -22px rgba(17, 17, 17, 0.2);
}

.vibe-lesson-layout .custom-sidebar-topic:has(.sdnh-accordion-header.is-open),
.vibe-lesson-layout .custom-sidebar-topic:has(.sdnh-accordion-header.is-active),
.vibe-lesson-layout .custom-sidebar-topic:has(.tutor-accordion-item-header.is-open),
.vibe-lesson-layout .custom-sidebar-topic:has(.tutor-accordion-item-header.is-active) {
    border-color: #cca471;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header,
.vibe-lesson-layout .sdnh-accordion-header {
    background: #ffffff;
    padding: 24px 18px !important;
    cursor: pointer;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    top: auto;
    z-index: 1;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-title-wrapper {
    position: relative;
    padding-left: 14px;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-title-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #d6d6d6;
}

/* Custom Scrollbar for Sidebar */
.tutor-lesson-sidebar::-webkit-scrollbar,
.custom-lesson-sidebar-wrap::-webkit-scrollbar {
    width: 6px;
}

.tutor-lesson-sidebar::-webkit-scrollbar-track,
.custom-lesson-sidebar-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tutor-lesson-sidebar::-webkit-scrollbar-thumb,
.custom-lesson-sidebar-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #111111 0%, #cca471 100%);
    border-radius: 4px;
}

.tutor-lesson-sidebar::-webkit-scrollbar-thumb:hover,
.custom-lesson-sidebar-wrap::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1f1f1f 0%, #d3a32b 100%);
}

.vibe-lesson-layout .vibe-lesson-sidebar::-webkit-scrollbar {
    width: 8px;
}

.vibe-lesson-layout .vibe-lesson-sidebar::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 999px;
}

.vibe-lesson-layout .vibe-lesson-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #111111 0%, #cca471 100%);
    border-radius: 999px;
}

.vibe-lesson-layout .vibe-lesson-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1f1f1f 0%, #d3a32b 100%);
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    display: flex;
    align-items: center;
    padding-right: 30px;
    /* Space for the absolute toggle */
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header:hover,
.vibe-lesson-layout .sdnh-accordion-header:hover {
    background: #ffffff;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active,
.vibe-lesson-layout .sdnh-accordion-header.is-active {
    border-bottom: 0 !important;
    background: #ffffff;
    box-shadow: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    z-index: 2;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active .tutor-course-topic-title,
.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active .tutor-topic-meta,
.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active .tutor-topic-meta i,
.vibe-lesson-layout .sdnh-accordion-header.is-active .tutor-course-topic-title,
.vibe-lesson-layout .sdnh-accordion-header.is-active .tutor-topic-meta,
.vibe-lesson-layout .sdnh-accordion-header.is-active .tutor-topic-meta i {
    color: #1a202c !important;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active::after,
.vibe-lesson-layout .sdnh-accordion-header.is-active::after {
    color: #4a5568 !important;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-active .tutor-course-topic-title-wrapper::before,
.vibe-lesson-layout .sdnh-accordion-header.is-active .tutor-course-topic-title-wrapper::before {
    background: #cca471;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header::after,
.vibe-lesson-layout .sdnh-accordion-header::after {
    content: "›" !important;
    background-image: none !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #4a5568 !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-header.is-open::after,
.vibe-lesson-layout .sdnh-accordion-header.is-open::after {
    transform: translateY(-50%) rotate(90deg) !important;
}

.vibe-lesson-layout .tutor-course-topic-body-custom {
    padding: 0;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-body,
.vibe-lesson-layout .custom-sidebar-topic .sdnh-accordion-body,
.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-body-custom {
    background: #ffffff !important;
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    overflow: hidden;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-accordion-item-body,
.vibe-lesson-layout .custom-sidebar-topic .sdnh-accordion-body {
    border-top: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-item:last-child {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.vibe-lesson-layout .custom-sidebar-topic .tutor-course-topic-item:last-child a {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Dark theme for video area */
.tutor-video-player-wrapper {
    background: #000;
    border-radius: 5px;
    overflow: hidden;
}

.tutor-lesson-feature-image img {
    width: 100%;
    object-fit: cover;
}

.tutor-course-single-content-wrapper #tutor-single-entry-content {
    padding: 0 !important;
}

/* Active Quiz Container Padding & Width constraint */
.vibe-lesson-main {
    min-width: 0 !important;
    /* Allow flex to shrink below its content size */
}


.tutor-quiz-wrap .tutor-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.quiz-attempt-single-question {
    box-sizing: border-box !important;
    max-width: 100%;
}


table.tutor-quiz-attempt-details,
.tutor-quiz-attempt-details table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

table.tutor-table-quiz-attempts {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 32px;
}

table.tutor-quiz-attempt-details,
.tutor-quiz-attempt-details table {
    table-layout: auto !important;
    min-width: 600px !important;
    margin-top: 32px;
}

/* We need to allow the container of the second table to scroll */
.tutor-quiz-attempt-details.tutor-table-responsive,
.tutor-quiz-attempt-details .tutor-table-responsive {
    overflow-x: auto !important;
}

table.tutor-table-quiz-attempts th,
table.tutor-table-quiz-attempts td,
table.tutor-quiz-attempt-details th,
table.tutor-quiz-attempt-details td,
.tutor-quiz-attempt-details table th,
.tutor-quiz-attempt-details table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.quiz-time-remaining-progress-circle svg circle,
.quiz-time-remaining-expired-circle svg circle {
    cx: 25;
    cy: 25;
}

/* Quiz Meta Header Alignment */
.quiz-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.quiz-meta-info-left,
.quiz-meta-info-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.tutor-quiz-warning-box {
    display: none;
    /* Just in case */
}

/* Quiz Answers Grid Fix */
.quiz-question-ans-choice-area .tutor-row {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.tutor-quiz-answer-single {
    padding: 8px;
    box-sizing: border-box;
    width: 50%;
}

.tutor-quiz-question-item {
    display: block;
    height: 100%;
}

.tutor-quiz-question-item .tutor-card {
    height: 100%;
    margin: 0;
}

@media (max-width: 768px) {

    .tutor-quiz-attempt-history table,
    .tutor-quiz-attempt-history thead,
    .tutor-quiz-attempt-history tbody,
    .tutor-quiz-attempt-history th,
    .tutor-quiz-attempt-history td,
    .tutor-quiz-attempt-history tr {
        display: block;
    }

    .tutor-quiz-attempt-history thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .tutor-quiz-attempt-history tr {
        margin-bottom: 24px;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        padding: 16px;
    }

    .tutor-quiz-attempt-history td {
        border: none;
        position: relative;
        padding-left: 0 !important;
        text-align: right;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tutor-quiz-attempt-history td:before {
        content: attr(data-title);
        position: relative;
        left: 0;
        width: auto;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #7A7A7A;
    }
}

.tutor-quiz-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    margin-bottom: 24px;
}

.tutor-quiz-result-summary>div {
    display: inline-flex;
    align-items: center;
}

/* Lesson Content Styling */
.custom-lesson-content-style.has-video {
    margin-top: 40px;
}

.custom-lesson-content-style.no-video {
    margin-top: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto;
}

.custom-lesson-content-style .custom-lesson-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 20px;
    line-height: 1.3;
}

.custom-lesson-content-style .tutor-lesson-wrapper {
    font-size: 16px;
    line-height: 1.5;
    /* Reduced from 1.7 */
    color: #4a5568 !important;
}

.custom-lesson-content-style .tutor-lesson-wrapper p {
    margin-bottom: 12px;
    /* Reduced from 16px */
}

.custom-lesson-content-style .tutor-lesson-wrapper h2,
.custom-lesson-content-style .tutor-lesson-wrapper h3,
.custom-lesson-content-style .tutor-lesson-wrapper h4,
.custom-lesson-content-style .tutor-lesson-wrapper h5,
.custom-lesson-content-style .tutor-lesson-wrapper h6 {
    font-weight: 600;
    color: #2d3748;
    margin-top: 32px;
    margin-bottom: 16px;
}

.custom-lesson-content-style .tutor-lesson-wrapper h2 {
    font-size: 22px;
}

.custom-lesson-content-style .tutor-lesson-wrapper h3 {
    font-size: 20px;
}

.custom-lesson-content-style .toc-title,
.custom-lesson-content-style .toc-sidebar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #495057 !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 16px !important;
    margin-top: 16px !important;
}

.custom-lesson-content-style .tutor-lesson-wrapper h4 {
    font-size: 18px;
}

.custom-lesson-content-style .tutor-lesson-wrapper ul,
.custom-lesson-content-style .tutor-lesson-wrapper ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.custom-lesson-content-style .tutor-lesson-wrapper li {
    margin-bottom: 6px;
    /* Reduced from 8px */
}

.custom-lesson-content-style .tutor-lesson-wrapper img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    margin: 16px 0;
}

.custom-lesson-content-toggle {
    position: relative;
}

.custom-lesson-content-style .tutor-lesson-wrapper.lesson-content-collapsed {
    position: relative;
    max-height: 420px;
    overflow: hidden;
}

.custom-lesson-content-style .tutor-lesson-wrapper.lesson-content-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 82%);
    pointer-events: none;
}

.lesson-content-toggle-actions {
    margin-top: 1rem;
    text-align: center;
}

.lesson-content-toggle-btn {
    background: #ffffff;
    color: #111111;
    border: 1px solid #111111;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lesson-content-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(138, 101, 17, 0.22);
}

.lesson-content-toggle-btn.is-expanded,
.lesson-content-toggle-btn:active {
    background: #cca471;
    border-color: #cca471;
    color: #fff;
    box-shadow: 0 12px 24px rgba(138, 101, 17, 0.2);
}

.lesson-content-toggle-btn:focus {
    outline: none;
}

@media screen and (max-width: 991px) {
    .tutor-course-single-content-wrapper.tutor-custom-spotlight {
        flex-direction: column;
    }

    .tutor-course-single-sidebar-wrapper.tutor-desktop-sidebar {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    .vibe-lesson-layout .vibe-lesson-sidebar {
        background: #ffffff;
        border-radius: 12px;
        border-bottom: 0;
        max-height: none;
        overflow-y: visible;
        overflow-x: visible;
    }

    .tutor-course-single-sidebar-wrapper {
        padding: 20px;
        border-radius: 12px;
    }

    .custom-sidebar-topic .tutor-accordion-item-header,
    .sdnh-accordion-header {
        position: relative !important;
        top: auto !important;
        padding: 24px 18px !important;
        border-radius: 14px !important;
        z-index: 1;
    }

    .custom-lesson-sidebar-thumb {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        height: 63px !important;
        min-height: 63px !important;
        max-height: 63px !important;
    }

    .tutor-course-topic-item {
        padding: 14px 20px !important;
        margin-bottom: 10px;
    }

    .custom-lesson-content-style .tutor-lesson-wrapper.lesson-content-collapsed {
        max-height: 340px;
    }

    .lesson-content-toggle-btn {
        width: 100%;
        max-width: 220px;
    }


}