/**
 * LMS Pro Manager - Frontend Styles
 * Shortcode styling for course display
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    /* DeviFlow Brand Colors Integration */
    --lpm-primary: #8B6C88;          /* Purple - buttons, CTA */
    --lpm-primary-dark: #725a6f;     /* Darker purple - hover */
    --lpm-primary-light: #9d7e9a;    /* Lighter purple */
    --lpm-section-bg: #7F8F6A;       /* Green - sections background */
    --lpm-section-bg-light: #8fa07a; /* Lighter green */
    --lpm-secondary: #1c1d1f;
    --lpm-success: #1e7b34;
    --lpm-warning: #f59e0b;
    --lpm-danger: #dc2626;
    --lpm-bg: #f7f9fa;
    --lpm-card: #ffffff;
    --lpm-border: #d1d7dc;
    --lpm-text: #1c1d1f;
    --lpm-text-muted: #6a6f73;
    --lpm-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --lpm-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --lpm-radius: 8px;
    --lpm-radius-sm: 4px;
    --lpm-transition: all 0.25s ease;
}

/* ==========================================================================
   Base Container
   ========================================================================== */
.lpm-courses-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.lpm-courses-container *,
.lpm-courses-container *::before,
.lpm-courses-container *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Courses Grid
   ========================================================================== */
.lpm-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.lpm-courses-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.lpm-courses-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.lpm-courses-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .lpm-courses-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lpm-courses-grid-3,
    .lpm-courses-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .lpm-courses-grid,
    .lpm-courses-grid-2,
    .lpm-courses-grid-3,
    .lpm-courses-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Course Card (Grid View)
   ========================================================================== */
.lpm-course-card {
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
    overflow: hidden;
    transition: var(--lpm-transition);
    display: flex;
    flex-direction: column;
}

.lpm-course-card:hover {
    box-shadow: var(--lpm-shadow-lg);
    transform: translateY(-4px);
}

.lpm-course-card a {
    text-decoration: none;
}

/* Course Thumbnail */
.lpm-course-thumbnail {
    position: relative;
    padding-top: 56.25%;
    background: var(--lpm-bg);
    overflow: hidden;
}

.lpm-course-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--lpm-transition);
}

.lpm-course-card:hover .lpm-course-thumbnail img {
    transform: scale(1.05);
}

.lpm-course-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lpm-primary-light), var(--lpm-primary));
}

.lpm-course-thumbnail-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.5);
}

/* Course Badges */
.lpm-course-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lpm-badge {
    padding: 4px 10px;
    border-radius: var(--lpm-radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lpm-badge-featured {
    background: var(--lpm-warning);
    color: #fff;
}

.lpm-badge-new {
    background: var(--lpm-success);
    color: #fff;
}

.lpm-badge-sale {
    background: var(--lpm-danger);
    color: #fff;
}

.lpm-badge-free {
    background: var(--lpm-primary);
    color: #fff;
}

/* Progress Ring */
.lpm-progress-ring {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lpm-progress-ring svg {
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}

.lpm-progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
}

.lpm-progress-ring-fill {
    fill: none;
    stroke: var(--lpm-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.lpm-progress-ring-text {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

/* Course Body */
.lpm-course-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lpm-course-category {
    font-size: 11px;
    font-weight: 600;
    color: var(--lpm-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.lpm-course-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--lpm-text);
    line-height: 1.4;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-course-title a {
    color: inherit;
}

.lpm-course-title a:hover {
    color: var(--lpm-primary);
}

.lpm-course-excerpt {
    font-size: 13px;
    color: var(--lpm-text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-course-instructor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.lpm-instructor-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.lpm-instructor-name {
    font-size: 12px;
    color: var(--lpm-text-muted);
}

.lpm-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--lpm-text-muted);
    margin-top: auto;
}

.lpm-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lpm-meta-item svg {
    width: 14px;
    height: 14px;
}

/* Course Footer */
.lpm-course-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--lpm-border);
    background: var(--lpm-bg);
}

.lpm-course-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lpm-stars {
    display: flex;
    gap: 2px;
    color: var(--lpm-warning);
}

.lpm-stars svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.lpm-stars .empty {
    color: var(--lpm-border);
}

.lpm-rating-count {
    font-size: 12px;
    color: var(--lpm-text-muted);
}

.lpm-course-price {
    text-align: right;
}

.lpm-price-current {
    font-size: 16px;
    font-weight: 700;
    color: var(--lpm-text);
}

.lpm-price-sale {
    color: var(--lpm-danger);
}

.lpm-price-original {
    font-size: 12px;
    color: var(--lpm-text-muted);
    text-decoration: line-through;
    margin-left: 6px;
}

.lpm-price-free {
    font-size: 14px;
    font-weight: 600;
    color: var(--lpm-success);
}

/* ==========================================================================
   Course Card (Card View) - Horizontal
   ========================================================================== */
.lpm-courses-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lpm-course-card-horizontal {
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
    overflow: hidden;
    display: flex;
    transition: var(--lpm-transition);
}

.lpm-course-card-horizontal:hover {
    box-shadow: var(--lpm-shadow-lg);
}

.lpm-course-card-horizontal .lpm-course-thumbnail {
    flex: 0 0 280px;
    padding-top: 0;
    height: auto;
}

.lpm-course-card-horizontal .lpm-course-thumbnail img {
    position: static;
    width: 280px;
    height: 160px;
    object-fit: cover;
}

.lpm-course-card-horizontal .lpm-course-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.lpm-course-card-horizontal .lpm-course-title {
    font-size: 18px;
    margin-bottom: 8px;
}

.lpm-course-card-horizontal .lpm-course-excerpt {
    -webkit-line-clamp: 3;
}

.lpm-course-card-horizontal .lpm-course-footer {
    margin-top: auto;
    padding: 0;
    border: none;
    background: none;
}

@media (max-width: 768px) {
    .lpm-course-card-horizontal {
        flex-direction: column;
    }

    .lpm-course-card-horizontal .lpm-course-thumbnail {
        flex: none;
        padding-top: 56.25%;
    }

    .lpm-course-card-horizontal .lpm-course-thumbnail img {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   Course List View
   ========================================================================== */
.lpm-courses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grid cards restyled as horizontal rows inside list view */
.lpm-courses-list .lpm-course-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--lpm-radius, 8px);
    overflow: hidden;
}

.lpm-courses-list .lpm-course-card .lpm-card-link {
    flex: 0 0 200px;
    display: block;
}

.lpm-courses-list .lpm-course-card .lpm-card-thumbnail {
    width: 200px;
    height: 100%;
    min-height: 120px;
    aspect-ratio: auto;
}

.lpm-courses-list .lpm-course-card .lpm-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpm-courses-list .lpm-course-card .lpm-card-placeholder {
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lpm-courses-list .lpm-course-card .lpm-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
}

.lpm-courses-list .lpm-course-card .lpm-card-title {
    font-size: 16px;
    margin-bottom: 6px;
}

.lpm-courses-list .lpm-course-card .lpm-card-excerpt {
    display: block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.lpm-courses-list .lpm-course-card .lpm-card-footer {
    margin-top: auto;
    padding-top: 8px;
}

.lpm-courses-list .lpm-course-card .lpm-card-duration {
    position: absolute;
    bottom: 8px;
    left: 8px;
    top: auto;
    right: auto;
}

@media (max-width: 576px) {
    .lpm-courses-list .lpm-course-card {
        flex-direction: column;
    }
    .lpm-courses-list .lpm-course-card .lpm-card-link {
        flex: 0 0 auto;
    }
    .lpm-courses-list .lpm-course-card .lpm-card-thumbnail {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

.lpm-course-list-item {
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--lpm-transition);
}

.lpm-course-list-item:hover {
    box-shadow: var(--lpm-shadow-lg);
}

.lpm-course-list-item .lpm-course-thumbnail {
    flex: 0 0 120px;
    padding-top: 0;
    border-radius: var(--lpm-radius-sm);
}

.lpm-course-list-item .lpm-course-thumbnail img {
    position: static;
    width: 120px;
    height: 68px;
    border-radius: var(--lpm-radius-sm);
}

.lpm-course-list-item .lpm-course-info {
    flex: 1;
    min-width: 0;
}

.lpm-course-list-item .lpm-course-title {
    font-size: 15px;
    margin-bottom: 4px;
}

.lpm-course-list-item .lpm-course-meta {
    font-size: 12px;
}

.lpm-course-list-item .lpm-course-price {
    flex: 0 0 auto;
}

@media (max-width: 576px) {
    .lpm-course-list-item {
        flex-wrap: wrap;
    }

    .lpm-course-list-item .lpm-course-thumbnail {
        flex: 0 0 80px;
    }

    .lpm-course-list-item .lpm-course-thumbnail img {
        width: 80px;
        height: 45px;
    }

    .lpm-course-list-item .lpm-course-price {
        width: 100%;
        text-align: left;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--lpm-border);
    }
}

/* ==========================================================================
   User Courses (My Courses)
   ========================================================================== */
.lpm-my-courses .lpm-course-card {
    position: relative;
}

.lpm-my-courses .lpm-course-progress {
    padding: 12px 16px;
    background: var(--lpm-bg);
    border-top: 1px solid var(--lpm-border);
}

.lpm-progress-bar {
    height: 6px;
    background: var(--lpm-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.lpm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lpm-primary), var(--lpm-primary-light));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.lpm-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lpm-text-muted);
}

.lpm-progress-percent {
    font-weight: 600;
    color: var(--lpm-primary);
}

.lpm-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--lpm-primary);
    color: #fff;
    border: none;
    border-radius: var(--lpm-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-continue-btn:hover {
    background: var(--lpm-primary-dark);
}

.lpm-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--lpm-success);
    color: #fff;
    border-radius: var(--lpm-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.lpm-completed-badge svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Related Courses
   ========================================================================== */
.lpm-related-courses {
    margin-top: 40px;
}

.lpm-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--lpm-text);
    margin-bottom: 24px;
}

.lpm-related-courses .lpm-courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ==========================================================================
   Carousel / Slider
   ========================================================================== */
.lpm-courses-carousel {
    position: relative;
    overflow: hidden;
}

.lpm-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
}

.lpm-carousel-track .lpm-course-card {
    flex: 0 0 280px;
}

.lpm-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--lpm-card);
    border: 1px solid var(--lpm-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--lpm-transition);
    box-shadow: var(--lpm-shadow);
}

.lpm-carousel-btn:hover {
    background: var(--lpm-primary);
    border-color: var(--lpm-primary);
    color: #fff;
}

.lpm-carousel-btn svg {
    width: 20px;
    height: 20px;
}

.lpm-carousel-prev {
    left: -22px;
}

.lpm-carousel-next {
    right: -22px;
}

.lpm-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.lpm-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lpm-border);
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-carousel-dot.active {
    background: var(--lpm-primary);
    width: 24px;
    border-radius: 4px;
}

/* ==========================================================================
   Filters
   ========================================================================== */
.lpm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
}

.lpm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lpm-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lpm-text-muted);
    text-transform: uppercase;
}

.lpm-filter-select,
.lpm-filter-input {
    padding: 8px 12px;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius-sm);
    font-size: 14px;
    color: var(--lpm-text);
    background: #fff;
    min-width: 150px;
    transition: var(--lpm-transition);
}

.lpm-filter-select:focus,
.lpm-filter-input:focus {
    outline: none;
    border-color: var(--lpm-primary);
    box-shadow: 0 0 0 3px rgba(164, 53, 240, 0.15);
}

.lpm-search-form {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.lpm-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius-sm);
    font-size: 14px;
}

.lpm-search-btn {
    padding: 8px 16px;
    background: var(--lpm-primary);
    color: #fff;
    border: none;
    border-radius: var(--lpm-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-search-btn:hover {
    background: var(--lpm-primary-dark);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.lpm-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.lpm-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--lpm-card);
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--lpm-text);
    text-decoration: none;
    transition: var(--lpm-transition);
}

.lpm-page-link:hover {
    border-color: var(--lpm-primary);
    color: var(--lpm-primary);
}

.lpm-page-link.active {
    background: var(--lpm-primary);
    border-color: var(--lpm-primary);
    color: #fff;
}

.lpm-page-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   Loading States
   ========================================================================== */
.lpm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--lpm-text-muted);
}

.lpm-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--lpm-border);
    border-top-color: var(--lpm-primary);
    border-radius: 50%;
    animation: lpm-spin 0.8s linear infinite;
    margin-right: 12px;
}

@keyframes lpm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.lpm-skeleton {
    background: linear-gradient(90deg, var(--lpm-border) 25%, var(--lpm-bg) 50%, var(--lpm-border) 75%);
    background-size: 200% 100%;
    animation: lpm-skeleton 1.5s ease-in-out infinite;
}

@keyframes lpm-skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.lpm-skeleton-card {
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    overflow: hidden;
}

.lpm-skeleton-thumb {
    padding-top: 56.25%;
}

.lpm-skeleton-text {
    height: 16px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.lpm-skeleton-text.short {
    width: 60%;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.lpm-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
}

.lpm-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    color: var(--lpm-border);
}

.lpm-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 8px 0;
}

.lpm-empty-text {
    font-size: 14px;
    color: var(--lpm-text-muted);
    margin: 0 0 20px 0;
}

.lpm-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--lpm-primary);
    color: #fff;
    border: none;
    border-radius: var(--lpm-radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--lpm-transition);
}

.lpm-empty-btn:hover {
    background: var(--lpm-primary-dark);
    color: #fff;
}

/* ==========================================================================
   Difficulty Badge
   ========================================================================== */
.lpm-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--lpm-radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.lpm-difficulty-beginner {
    background: rgba(30, 123, 52, 0.1);
    color: var(--lpm-success);
}

.lpm-difficulty-intermediate {
    background: rgba(245, 158, 11, 0.1);
    color: var(--lpm-warning);
}

.lpm-difficulty-advanced {
    background: rgba(220, 38, 38, 0.1);
    color: var(--lpm-danger);
}

/* ==========================================================================
   Course Single Enhancements
   ========================================================================== */
.lpm-course-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
    margin-bottom: 24px;
}

.lpm-single-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--lpm-text);
}

.lpm-single-meta-item svg {
    width: 18px;
    height: 18px;
    color: var(--lpm-primary);
}

.lpm-single-meta-item strong {
    font-weight: 600;
}

/* ==========================================================================
   Wishlist / Bookmark
   ========================================================================== */
.lpm-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: var(--lpm-transition);
    z-index: 5;
}

.lpm-course-card:hover .lpm-wishlist-btn {
    opacity: 1;
}

.lpm-wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.lpm-wishlist-btn svg {
    width: 18px;
    height: 18px;
    color: var(--lpm-text-muted);
    transition: var(--lpm-transition);
}

.lpm-wishlist-btn.active svg {
    color: var(--lpm-danger);
    fill: var(--lpm-danger);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes lpmFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lpm-animate-in {
    animation: lpmFadeIn 0.3s ease forwards;
}

.lpm-course-card {
    opacity: 0;
    animation: lpmFadeIn 0.4s ease forwards;
}

.lpm-course-card:nth-child(1) { animation-delay: 0.05s; }
.lpm-course-card:nth-child(2) { animation-delay: 0.1s; }
.lpm-course-card:nth-child(3) { animation-delay: 0.15s; }
.lpm-course-card:nth-child(4) { animation-delay: 0.2s; }
.lpm-course-card:nth-child(5) { animation-delay: 0.25s; }
.lpm-course-card:nth-child(6) { animation-delay: 0.3s; }
.lpm-course-card:nth-child(7) { animation-delay: 0.35s; }
.lpm-course-card:nth-child(8) { animation-delay: 0.4s; }

/* ==========================================================================
   RTL Support
   ========================================================================== */
[dir="rtl"] .lpm-course-badges {
    left: auto;
    right: 12px;
}

[dir="rtl"] .lpm-progress-ring {
    right: auto;
    left: 12px;
}

[dir="rtl"] .lpm-course-price {
    text-align: left;
}

[dir="rtl"] .lpm-carousel-prev {
    left: auto;
    right: -22px;
}

[dir="rtl"] .lpm-carousel-next {
    right: auto;
    left: -22px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .lpm-courses-container {
        background: #fff;
    }

    .lpm-course-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .lpm-wishlist-btn,
    .lpm-carousel-btn,
    .lpm-filters {
        display: none;
    }
}

/* ==========================================================================
   Course Catalog (WooCommerce-style)
   ========================================================================== */
#lpm-catalog-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Catalog Toolbar */
.lpm-catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--lpm-border);
}

.lpm-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.lpm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search Input */
.lpm-catalog-search {
    position: relative;
    flex: 0 0 280px;
}

.lpm-catalog-search .lpm-search-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius);
    font-size: 14px;
    background: var(--lpm-card);
    transition: var(--lpm-transition);
}

.lpm-catalog-search .lpm-search-input:focus {
    outline: none;
    border-color: var(--lpm-primary);
    box-shadow: 0 0 0 3px rgba(164, 53, 240, 0.1);
}

.lpm-catalog-search .lpm-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lpm-text-muted);
    pointer-events: none;
}

/* Filter Dropdowns */
.lpm-catalog-filters {
    display: flex;
    gap: 10px;
}

.lpm-filter-select,
.lpm-sort-select {
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius);
    font-size: 14px;
    background: var(--lpm-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6f73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    transition: var(--lpm-transition);
    min-width: 150px;
}

.lpm-filter-select:focus,
.lpm-sort-select:focus {
    outline: none;
    border-color: var(--lpm-primary);
}

.lpm-filter-select:hover,
.lpm-sort-select:hover {
    border-color: var(--lpm-primary-light);
}

/* Results Count */
.lpm-results-count {
    font-size: 14px;
    color: var(--lpm-text-muted);
    white-space: nowrap;
}

.lpm-count-number {
    font-weight: 600;
    color: var(--lpm-text);
}

/* View Toggle */
.lpm-view-toggle {
    display: flex;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius);
    overflow: hidden;
}

.lpm-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    border: none;
    background: var(--lpm-card);
    color: var(--lpm-text-muted);
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-view-btn:hover {
    background: var(--lpm-bg);
    color: var(--lpm-text);
}

.lpm-view-btn.active {
    background: var(--lpm-primary);
    color: #fff;
}

.lpm-view-btn + .lpm-view-btn {
    border-left: 1px solid var(--lpm-border);
}

/* Loading Overlay */
.lpm-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--lpm-radius);
}

.lpm-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lpm-border);
    border-top-color: var(--lpm-primary);
    border-radius: 50%;
    animation: lpmSpin 0.8s linear infinite;
}

@keyframes lpmSpin {
    to {
        transform: rotate(360deg);
    }
}

.lpm-courses-wrapper {
    position: relative;
}

/* Catalog Pagination */
.lpm-catalog-pagination {
    margin-top: 32px;
}

.lpm-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lpm-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lpm-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--lpm-border);
    border-radius: var(--lpm-radius);
    background: var(--lpm-card);
    color: var(--lpm-text);
    font-size: 14px;
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-page-btn:hover:not(.active) {
    border-color: var(--lpm-primary);
    color: var(--lpm-primary);
}

.lpm-page-btn.active {
    background: var(--lpm-primary);
    border-color: var(--lpm-primary);
    color: #fff;
}

.lpm-page-dots {
    padding: 0 8px;
    color: var(--lpm-text-muted);
}

/* No Results */
.lpm-no-courses {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}

.lpm-no-results-icon {
    color: var(--lpm-text-muted);
    margin-bottom: 16px;
}

.lpm-no-courses h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 8px 0;
}

.lpm-no-courses p {
    color: var(--lpm-text-muted);
    margin: 0 0 20px 0;
}

/* Buttons */
.lpm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--lpm-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--lpm-transition);
}

.lpm-btn-primary {
    background: var(--lpm-primary);
    color: #fff;
}

.lpm-btn-primary:hover {
    background: var(--lpm-primary-dark);
    color: #fff;
}

.lpm-btn-secondary {
    background: var(--lpm-bg);
    color: var(--lpm-text);
    border: 1px solid var(--lpm-border);
}

.lpm-btn-secondary:hover {
    background: var(--lpm-border);
}

.lpm-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ==========================================================================
   My Courses / Enrolled Courses
   ========================================================================== */
.lpm-my-courses {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.lpm-courses-section {
    margin-bottom: 40px;
}

.lpm-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 20px 0;
}

.lpm-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--lpm-bg);
    border-radius: var(--lpm-radius-sm);
    color: var(--lpm-primary);
}

.lpm-section-icon.lpm-icon-success {
    color: var(--lpm-success);
}

.lpm-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--lpm-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.lpm-count-badge.lpm-badge-success {
    background: var(--lpm-success);
}

/* Enrolled Course Card */
.lpm-enrolled-card {
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
    overflow: hidden;
    transition: var(--lpm-transition);
}

.lpm-enrolled-card:hover {
    box-shadow: var(--lpm-shadow-lg);
    transform: translateY(-2px);
}

.lpm-enrolled-thumbnail {
    position: relative;
    display: block;
    padding-top: 56.25%;
    background: var(--lpm-bg);
    overflow: hidden;
}

.lpm-enrolled-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--lpm-transition);
}

.lpm-enrolled-card:hover .lpm-enrolled-thumbnail img {
    transform: scale(1.05);
}

.lpm-card-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lpm-primary-light), var(--lpm-primary));
    color: rgba(255, 255, 255, 0.5);
}

.lpm-completed-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--lpm-success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lpm-enrolled-content {
    padding: 16px;
}

.lpm-enrolled-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-enrolled-title a {
    color: var(--lpm-text);
    text-decoration: none;
}

.lpm-enrolled-title a:hover {
    color: var(--lpm-primary);
}

.lpm-enrolled-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--lpm-text-muted);
    margin-bottom: 12px;
}

.lpm-enrolled-meta .lpm-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lpm-enrolled-meta svg {
    flex-shrink: 0;
}

/* Progress Bar */
.lpm-enrolled-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lpm-enrolled-progress .lpm-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--lpm-bg);
    border-radius: 3px;
    overflow: hidden;
}

.lpm-enrolled-progress .lpm-progress-fill {
    height: 100%;
    background: var(--lpm-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.lpm-enrolled-progress .lpm-progress-fill.lpm-complete {
    background: var(--lpm-success);
}

.lpm-enrolled-progress .lpm-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--lpm-text);
    white-space: nowrap;
}

.lpm-enrolled-actions {
    margin-top: 12px;
}

.lpm-enrolled-actions .lpm-btn {
    width: 100%;
}

/* Completed course styling */
.lpm-enrolled-card.lpm-completed {
    opacity: 0.85;
}

.lpm-enrolled-card.lpm-completed:hover {
    opacity: 1;
}

/* Empty State */
.lpm-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
}

.lpm-empty-icon {
    color: var(--lpm-primary-light);
    margin-bottom: 16px;
}

.lpm-empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 8px 0;
}

.lpm-empty-state p {
    color: var(--lpm-text-muted);
    margin: 0 0 20px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Login Required */
.lpm-login-required {
    text-align: center;
    padding: 60px 20px;
    background: var(--lpm-card);
    border-radius: var(--lpm-radius);
    box-shadow: var(--lpm-shadow);
}

.lpm-login-icon {
    color: var(--lpm-text-muted);
    margin-bottom: 16px;
}

.lpm-login-required h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 8px 0;
}

.lpm-login-required p {
    color: var(--lpm-text-muted);
    margin: 0 0 20px 0;
}

/* Responsive - only for non-isolated catalog (without #lpm-catalog-root) */
@media (max-width: 992px) {
    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-toolbar-left,
    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-catalog-search {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-toolbar-left {
        flex-direction: column;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-catalog-search {
        width: 100%;
        flex: none;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-catalog-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-filter-select,
    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-sort-select {
        flex: 1;
        min-width: 0;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-results-count {
        display: none;
    }
}

@media (max-width: 576px) {
    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-toolbar-right {
        justify-content: flex-end;
    }

    .lpm-course-catalog:not(#lpm-catalog-root) .lpm-view-toggle {
        display: none;
    }
}

/* ==========================================================================
   Course Card - Compact Style
   Small, clean cards for course catalog
   ========================================================================== */

/* Default: 6 small cards per row */
.lpm-courses-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* Override column classes */
.lpm-columns-2 { grid-template-columns: repeat(2, 1fr); }
.lpm-columns-3 { grid-template-columns: repeat(3, 1fr); }
.lpm-columns-4 { grid-template-columns: repeat(4, 1fr); }
.lpm-columns-5 { grid-template-columns: repeat(5, 1fr); }
.lpm-columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
    .lpm-courses-grid,
    .lpm-columns-6 {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .lpm-courses-grid,
    .lpm-columns-4,
    .lpm-columns-5,
    .lpm-columns-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .lpm-courses-grid,
    .lpm-columns-3,
    .lpm-columns-4,
    .lpm-columns-5,
    .lpm-columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .lpm-courses-grid,
    .lpm-columns-2,
    .lpm-columns-3,
    .lpm-columns-4,
    .lpm-columns-5,
    .lpm-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Compact Course Card */
.lpm-course-card {
    background: var(--lpm-card);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.lpm-course-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.lpm-course-card a {
    text-decoration: none;
}

/* Course Card Link */
.lpm-course-card .lpm-card-link {
    display: block;
    text-decoration: none;
}

/* Compact Card Thumbnail */
.lpm-card-thumbnail {
    position: relative;
    padding-top: 56.25%;
    background: var(--lpm-bg);
    overflow: hidden;
}

.lpm-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.lpm-course-card:hover .lpm-card-thumbnail img {
    transform: scale(1.03);
}

.lpm-card-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
    color: #999;
}

.lpm-card-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.lpm-card-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    border-radius: 2px;
}

/* Small Card Content */
.lpm-card-content {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Small Card Title */
.lpm-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--lpm-text);
    line-height: 1.25;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-card-title a {
    color: inherit;
    text-decoration: none;
}

.lpm-card-title a:hover {
    color: var(--lpm-primary);
}

/* Small Card Meta - hide for compact */
.lpm-card-meta {
    display: none;
}

.lpm-card-difficulty {
    display: none;
}

.lpm-card-rating {
    display: none;
}

/* Hide excerpt */
.lpm-card-excerpt {
    display: none;
}

/* Small Card Progress */
.lpm-card-progress {
    margin-bottom: 4px;
}

.lpm-card-progress .lpm-progress-bar {
    height: 3px;
    background: var(--lpm-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}

.lpm-card-progress .lpm-progress-fill {
    height: 100%;
    background: var(--lpm-primary);
    border-radius: 2px;
}

.lpm-card-progress .lpm-progress-text {
    font-size: 9px;
    font-weight: 600;
    color: var(--lpm-primary);
}

/* Small Card Footer */
.lpm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--lpm-border);
    margin-top: auto;
}

.lpm-card-students {
    display: none;
}

.lpm-card-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--lpm-text);
}

.lpm-card-price.lpm-free {
    color: var(--lpm-success);
    font-size: 10px;
}

/* Star Rating - Compact */
.lpm-star-rating {
    display: inline-flex;
    gap: 0;
}

.lpm-star {
    color: var(--lpm-warning);
    font-size: 10px;
    line-height: 1;
}

.lpm-star-empty {
    color: var(--lpm-border);
}

.lpm-star-half {
    position: relative;
    color: var(--lpm-border);
}

.lpm-star-half::before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: var(--lpm-warning);
    width: 50%;
    overflow: hidden;
}

/* ==========================================================================
   Course List Item - Compact Style
   ========================================================================== */
.lpm-courses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpm-course-list-item {
    background: var(--lpm-card);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.lpm-course-list-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lpm-list-thumbnail {
    flex: 0 0 80px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: var(--lpm-bg);
}

.lpm-list-thumbnail img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    display: block;
}

.lpm-list-content {
    flex: 1;
    min-width: 0;
}

.lpm-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lpm-text);
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpm-list-title a {
    color: inherit;
    text-decoration: none;
}

.lpm-list-title a:hover {
    color: var(--lpm-primary);
}

.lpm-list-instructor {
    font-size: 11px;
    color: var(--lpm-text-muted);
    margin: 0;
}

.lpm-list-excerpt {
    display: none;
}

.lpm-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--lpm-text-muted);
    margin-top: 4px;
}

.lpm-list-meta .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 2px;
}

.lpm-list-price {
    flex: 0 0 auto;
    text-align: right;
}

.lpm-list-price .lpm-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--lpm-text);
}

.lpm-list-price .lpm-price.lpm-free {
    color: var(--lpm-success);
    font-size: 11px;
}

@media (max-width: 576px) {
    .lpm-list-thumbnail {
        flex: 0 0 60px;
    }

    .lpm-list-thumbnail img {
        width: 60px;
        height: 34px;
    }

    .lpm-list-price {
        width: 100%;
        text-align: left;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--lpm-border);
    }
}

/* ==========================================================================
   Udemy-style Course Card - Compact
   ========================================================================== */
.lpm-course-card-udemy {
    background: var(--lpm-card);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.lpm-course-card-udemy:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.lpm-course-card-udemy .lpm-card-link {
    display: block;
    text-decoration: none;
}

.lpm-course-card-udemy .lpm-card-image {
    position: relative;
    padding-top: 56.25%;
    background: var(--lpm-bg);
    overflow: hidden;
}

.lpm-course-card-udemy .lpm-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.lpm-course-card-udemy:hover .lpm-card-image img {
    transform: scale(1.03);
}

.lpm-course-card-udemy .lpm-card-body {
    padding: 8px 10px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lpm-course-card-udemy .lpm-card-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 3px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-course-card-udemy .lpm-card-title a {
    color: var(--lpm-text);
    text-decoration: none;
}

.lpm-course-card-udemy .lpm-card-title a:hover {
    color: var(--lpm-primary);
}

.lpm-course-card-udemy .lpm-card-instructor {
    font-size: 10px;
    color: var(--lpm-text-muted);
    margin: 0 0 4px 0;
}

.lpm-course-card-udemy .lpm-card-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.lpm-course-card-udemy .lpm-rating-number {
    font-size: 11px;
    font-weight: 700;
    color: #b4690e;
}

.lpm-course-card-udemy .lpm-rating-count {
    font-size: 9px;
    color: var(--lpm-text-muted);
}

.lpm-course-card-udemy .lpm-card-info {
    display: none;
}

.lpm-course-card-udemy .lpm-card-price-row {
    margin-top: auto;
    padding-top: 6px;
}

.lpm-course-card-udemy .lpm-price-current {
    font-size: 13px;
    font-weight: 700;
    color: var(--lpm-text);
}

.lpm-course-card-udemy .lpm-price-original {
    font-size: 10px;
    color: var(--lpm-text-muted);
    text-decoration: line-through;
    margin-left: 4px;
}

.lpm-course-card-udemy .lpm-price-free {
    font-size: 11px;
    font-weight: 600;
    color: var(--lpm-success);
}

/* Udemy Cards Grid - Compact */
.lpm-courses-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* ==========================================================================
   Widget Styles
   ========================================================================== */
.lpm-courses-widget,
.lpm-user-courses-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Widget Grid */
.lpm-widget-courses-grid {
    display: grid;
    gap: 12px;
}

.lpm-widget-columns-1 { grid-template-columns: 1fr; }
.lpm-widget-columns-2 { grid-template-columns: repeat(2, 1fr); }
.lpm-widget-columns-3 { grid-template-columns: repeat(3, 1fr); }
.lpm-widget-columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Widget Grid Item */
.lpm-widget-grid-item {
    background: var(--lpm-card, #fff);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.lpm-widget-grid-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.lpm-widget-grid-item .lpm-widget-thumbnail {
    display: block;
    padding-top: 56.25%;
    position: relative;
    background: #f0f0f0;
}

.lpm-widget-grid-item .lpm-widget-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpm-widget-grid-item .lpm-widget-info {
    padding: 10px;
}

.lpm-widget-grid-item .lpm-widget-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpm-widget-grid-item .lpm-widget-title a {
    color: inherit;
    text-decoration: none;
}

.lpm-widget-grid-item .lpm-widget-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--lpm-primary, #a435f0);
}

.lpm-widget-grid-item .lpm-widget-price.lpm-free {
    color: var(--lpm-success, #1e7b34);
}

/* Widget List */
.lpm-widget-courses-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lpm-widget-list-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--lpm-card, #fff);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lpm-widget-list-item .lpm-widget-thumbnail {
    flex: 0 0 60px;
    width: 60px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
}

.lpm-widget-list-item .lpm-widget-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpm-widget-list-item .lpm-widget-info {
    flex: 1;
    min-width: 0;
}

.lpm-widget-list-item .lpm-widget-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpm-widget-list-item .lpm-widget-title a {
    color: inherit;
    text-decoration: none;
}

.lpm-widget-list-item .lpm-widget-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
}

.lpm-widget-list-item .lpm-widget-rating {
    color: var(--lpm-warning, #f59e0b);
}

.lpm-widget-list-item .lpm-widget-price {
    font-weight: 600;
    color: var(--lpm-primary, #a435f0);
}

.lpm-widget-list-item .lpm-widget-price.lpm-free {
    color: var(--lpm-success, #1e7b34);
}

/* Widget Compact */
.lpm-widget-courses-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpm-widget-compact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.lpm-widget-compact-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.lpm-widget-compact-item .lpm-widget-thumbnail {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
}

.lpm-widget-compact-item .lpm-widget-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpm-widget-compact-item .lpm-widget-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpm-widget-compact-item .lpm-widget-title a {
    color: inherit;
    text-decoration: none;
}

/* User Courses Widget */
.lpm-widget-user-courses {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lpm-widget-user-course {
    border-radius: 6px;
    overflow: hidden;
    background: var(--lpm-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lpm-widget-course-link {
    display: flex;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
    color: inherit;
}

.lpm-widget-course-link img {
    flex: 0 0 60px;
    width: 60px;
    height: 45px;
    border-radius: 4px;
    object-fit: cover;
}

.lpm-widget-course-info {
    flex: 1;
    min-width: 0;
}

.lpm-widget-course-info h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpm-widget-progress {
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.lpm-widget-progress-bar {
    height: 100%;
    background: var(--lpm-primary, #a435f0);
    border-radius: 2px;
}

.lpm-widget-progress-text {
    font-size: 11px;
    color: var(--lpm-text-muted, #6a6f73);
}

.lpm-widget-view-all,
.lpm-widget-browse {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lpm-primary, #a435f0);
    text-decoration: none;
}

.lpm-widget-view-all:hover,
.lpm-widget-browse:hover {
    color: var(--lpm-primary-dark, #8710d8);
    text-decoration: underline;
}

.lpm-widget-no-courses {
    font-size: 13px;
    color: var(--lpm-text-muted, #6a6f73);
    text-align: center;
    padding: 16px 0;
}

.lpm-widget-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--lpm-primary-light, #c77dff), var(--lpm-primary, #a435f0));
}

/* ==========================================================================
   LPM COURSE CATALOG - Isolated from theme (ID-scoped for max specificity)
   All rules use #lpm-catalog-root to override any WP theme styles
   ========================================================================== */

/* --- CSS Isolation Reset: prevent theme bleeding --- */
#lpm-catalog-root,
#lpm-catalog-root *,
#lpm-catalog-root *::before,
#lpm-catalog-root *::after {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

#lpm-catalog-root h1,
#lpm-catalog-root h2,
#lpm-catalog-root h3,
#lpm-catalog-root h4,
#lpm-catalog-root h5,
#lpm-catalog-root h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    line-height: 1.4 !important;
}

#lpm-catalog-root input,
#lpm-catalog-root select,
#lpm-catalog-root button {
    font-family: inherit !important;
    line-height: normal !important;
    margin: 0 !important;
}

/* ===== GRID VIEW - 4 columns ===== */
#lpm-catalog-root .lpm-courses-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

#lpm-catalog-root .lpm-view-grid .lpm-courses-grid {
    display: grid !important;
}

@media (max-width: 1200px) {
    #lpm-catalog-root .lpm-courses-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    #lpm-catalog-root .lpm-courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    #lpm-catalog-root .lpm-courses-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== LIST VIEW - Vertical stack ===== */
#lpm-catalog-root .lpm-courses-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#lpm-catalog-root .lpm-view-list .lpm-courses-list {
    display: flex !important;
    flex-direction: column !important;
}

/* Admin-style Course Card */
#lpm-catalog-root .lpm-course-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.2s ease !important;
    animation: none !important;
    opacity: 1 !important;
}

#lpm-catalog-root .lpm-course-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
    border-color: #a435f0 !important;
}

/* Admin-style Thumbnail with Purple Gradient */
#lpm-catalog-root .lpm-card-thumbnail,
#lpm-catalog-root .lpm-course-thumbnail {
    position: relative !important;
    padding-top: 56.25% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    overflow: hidden !important;
}

#lpm-catalog-root .lpm-card-thumbnail img,
#lpm-catalog-root .lpm-course-thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Purple Gradient Placeholder with Font Awesome Graduation Cap Icon */
#lpm-catalog-root .lpm-card-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

#lpm-catalog-root .lpm-card-placeholder::before {
    content: none !important;
}

#lpm-catalog-root .lpm-card-placeholder .lpm-placeholder-icon {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    stroke: currentColor !important;
}

/* Status Badge with Font Awesome Check Icon - Upper Right Corner */
#lpm-catalog-root .lpm-card-thumbnail::after {
    content: "\f00c  PUBLISHED" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 5px 10px !important;
    background: #10b981 !important;
    color: #fff !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Duration Badge - Bottom Right */
#lpm-catalog-root .lpm-card-duration {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    padding: 3px 6px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
}

/* Admin-style Card Content */
#lpm-catalog-root .lpm-card-content {
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Admin-style Card Title */
#lpm-catalog-root .lpm-card-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.25 !important;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#lpm-catalog-root .lpm-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}

#lpm-catalog-root .lpm-card-title a:hover {
    color: #a435f0 !important;
}

/* Admin-style Meta Row (Students + Lessons) — hidden for compact */
#lpm-catalog-root .lpm-card-meta {
    display: none !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-bottom: 12px !important;
}

#lpm-catalog-root .lpm-card-meta .lpm-card-difficulty {
    display: none !important;
}

#lpm-catalog-root .lpm-card-meta .lpm-card-rating {
    display: none !important;
}

/* Hide excerpt for admin-style */
#lpm-catalog-root .lpm-card-excerpt {
    display: none !important;
}

/* Admin-style Card Footer (Price + Rating) */
#lpm-catalog-root .lpm-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    border-top: 1px solid #e5e7eb !important;
    background: transparent !important;
    margin-top: auto !important;
}

/* Students Count - Show with Font Awesome icon */
#lpm-catalog-root .lpm-card-students {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: #6b7280 !important;
}

#lpm-catalog-root .lpm-card-students .dashicons {
    display: inline-block !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: #9ca3af !important;
}

#lpm-catalog-root .lpm-card-students::before {
    content: none !important;
}

/* Price Styling */
#lpm-catalog-root .lpm-card-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

#lpm-catalog-root .lpm-card-price.lpm-free {
    color: #10b981 !important;
    font-weight: 600 !important;
}

/* Star Rating in Footer with Font Awesome */
#lpm-catalog-root .lpm-star-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
}

#lpm-catalog-root .lpm-star {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #f59e0b !important;
    font-size: 11px !important;
}

#lpm-catalog-root .lpm-star::before {
    content: "\f005" !important;
}

#lpm-catalog-root .lpm-star-empty {
    color: #d1d5db !important;
}

#lpm-catalog-root .lpm-star-full::before {
    content: "\f005" !important;
}

/* Rating value next to stars */
#lpm-catalog-root .lpm-rating-value {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #f59e0b !important;
    margin-left: 4px !important;
}

/* ===== ADMIN-STYLE TOOLBAR ===== */
#lpm-catalog-root .lpm-catalog-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    margin-bottom: 24px !important;
}

#lpm-catalog-root .lpm-toolbar-left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
}

#lpm-catalog-root .lpm-toolbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Search Input */
#lpm-catalog-root .lpm-catalog-search {
    position: relative !important;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
}

#lpm-catalog-root .lpm-catalog-search .lpm-search-input {
    width: 100% !important;
    padding: 8px 36px 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    background: #fff !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    height: 36px !important;
}

#lpm-catalog-root .lpm-catalog-search .lpm-search-input:focus {
    outline: none !important;
    border-color: #a435f0 !important;
    box-shadow: 0 0 0 3px rgba(164, 53, 240, 0.1) !important;
}

#lpm-catalog-root .lpm-catalog-search .lpm-search-icon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
}

/* Filter Dropdowns */
#lpm-catalog-root .lpm-catalog-filters {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

#lpm-catalog-root .lpm-filter-select,
#lpm-catalog-root .lpm-sort-select {
    padding: 8px 28px 8px 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    appearance: none !important;
    cursor: pointer !important;
    min-width: 150px !important;
    max-width: 200px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    height: 36px !important;
}

#lpm-catalog-root .lpm-filter-select:focus,
#lpm-catalog-root .lpm-sort-select:focus {
    outline: none !important;
    border-color: #a435f0 !important;
}

/* Results Count */
#lpm-catalog-root .lpm-results-count {
    font-size: 13px !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

#lpm-catalog-root .lpm-count-number {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* View Toggle Buttons - inline in toolbar row */
#lpm-catalog-root .lpm-view-toggle {
    display: flex !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

#lpm-catalog-root .lpm-view-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 38px !important;
    border: none !important;
    background: #fff !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

#lpm-catalog-root .lpm-view-btn::before {
    content: none !important;
}

#lpm-catalog-root .lpm-view-btn[data-view="grid"]::before {
    content: none !important;
}

#lpm-catalog-root .lpm-view-btn[data-view="list"]::before {
    content: none !important;
}

#lpm-catalog-root .lpm-view-btn svg {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
}

#lpm-catalog-root .lpm-view-btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

#lpm-catalog-root .lpm-view-btn.active {
    background: #8B6C88 !important;
    color: #fff !important;
    border-color: #8B6C88 !important;
}

#lpm-catalog-root .lpm-view-btn + .lpm-view-btn {
    border-left: 1px solid #d1d5db !important;
}

/* ===== LANGUAGE TOGGLE SWITCH (UML Integration) ===== */
#lpm-catalog-root .lpm-lang-switch-wrapper {
    margin-left: 12px !important;
}

/* Style UML toggle switch within LPM catalog */
#lpm-catalog-root .uml-switcher-toggle {
    display: inline-flex !important;
    align-items: center !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: 2px !important;
    gap: 0 !important;
}

#lpm-catalog-root .uml-toggle-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #9ca3af !important;
    text-decoration: none !important;
    border-radius: 16px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

#lpm-catalog-root .uml-toggle-option:hover {
    color: #6b7280 !important;
}

#lpm-catalog-root .uml-toggle-option.active {
    color: #fff !important;
    background: #a435f0 !important;
}

#lpm-catalog-root .uml-toggle-slider {
    display: none !important;
}

/* ===== Marusya Theme Conflict Overrides ===== */
#lpm-catalog-root input[type="text"],
#lpm-catalog-root input[type="search"],
#lpm-catalog-root select {
    width: auto !important;
    max-width: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    border-radius: 6px !important;
}

#lpm-catalog-root .lpm-catalog-search input[type="text"] {
    width: 100% !important;
}

#lpm-catalog-root h1, #lpm-catalog-root h2,
#lpm-catalog-root h3, #lpm-catalog-root h4,
#lpm-catalog-root h5, #lpm-catalog-root h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#lpm-catalog-root .lpm-catalog-filters {
    flex-direction: row !important;
}

/* Page dots separator */
#lpm-catalog-root .lpm-page-dots {
    padding: 0 6px !important;
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* ===== LIST VIEW STYLING ===== */
#lpm-catalog-root .lpm-courses-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Hide grid cards in list view, show list items */
#lpm-catalog-root .lpm-view-list .lpm-course-card {
    display: none !important;
}

#lpm-catalog-root .lpm-view-grid .lpm-course-list-item {
    display: none !important;
}

#lpm-catalog-root .lpm-course-list-item {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.15s ease !important;
}

#lpm-catalog-root .lpm-course-list-item:hover {
    border-color: #a435f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#lpm-catalog-root .lpm-list-thumbnail {
    flex: 0 0 140px !important;
    width: 140px !important;
    height: 80px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    position: relative !important;
}

#lpm-catalog-root .lpm-list-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* List thumbnail placeholder with Font Awesome */
#lpm-catalog-root .lpm-list-thumbnail .lpm-card-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

#lpm-catalog-root .lpm-list-thumbnail .lpm-card-placeholder::before {
    content: none !important;
}

#lpm-catalog-root .lpm-list-thumbnail .lpm-card-placeholder .lpm-placeholder-icon {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    stroke: currentColor !important;
}

#lpm-catalog-root .lpm-list-content {
    flex: 1 !important;
    min-width: 0 !important;
}

#lpm-catalog-root .lpm-list-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
}

#lpm-catalog-root .lpm-list-title a {
    color: inherit !important;
    text-decoration: none !important;
}

#lpm-catalog-root .lpm-list-title a:hover {
    color: #a435f0 !important;
}

#lpm-catalog-root .lpm-list-instructor {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 0 6px 0 !important;
}

#lpm-catalog-root .lpm-list-meta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 12px !important;
    color: #6b7280 !important;
}

#lpm-catalog-root .lpm-list-meta .lpm-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* List meta icons — use dashicons, not Font Awesome */
#lpm-catalog-root .lpm-list-meta .dashicons {
    display: inline-block !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

#lpm-catalog-root .lpm-list-meta .lpm-meta-item::before {
    content: none !important;
}

#lpm-catalog-root .lpm-list-price {
    flex: 0 0 auto !important;
    text-align: right !important;
    min-width: 80px !important;
}

#lpm-catalog-root .lpm-list-price .lpm-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

#lpm-catalog-root .lpm-list-price .lpm-price.lpm-free {
    color: #10b981 !important;
}

/* List view responsive */
@media (max-width: 768px) {
    #lpm-catalog-root .lpm-course-list-item {
        flex-wrap: wrap !important;
    }

    #lpm-catalog-root .lpm-list-thumbnail {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 60px !important;
    }

    #lpm-catalog-root .lpm-list-price {
        width: 100% !important;
        text-align: left !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid #e5e7eb !important;
    }
}

/* ===== PAGINATION ===== */
#lpm-catalog-root .lpm-catalog-pagination {
    margin-top: 24px !important;
}

#lpm-catalog-root .lpm-pagination-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

#lpm-catalog-root .lpm-page-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#lpm-catalog-root .lpm-page-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#lpm-catalog-root .lpm-page-btn:hover:not(.active):not(:disabled) {
    border-color: #a435f0 !important;
    color: #a435f0 !important;
    background: #faf5ff !important;
}

#lpm-catalog-root .lpm-page-btn.active {
    background: #a435f0 !important;
    border-color: #a435f0 !important;
    color: #fff !important;
}

#lpm-catalog-root .lpm-page-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Navigation arrows with Font Awesome */
#lpm-catalog-root .lpm-page-btn.lpm-page-first,
#lpm-catalog-root .lpm-page-btn.lpm-page-prev,
#lpm-catalog-root .lpm-page-btn.lpm-page-next,
#lpm-catalog-root .lpm-page-btn.lpm-page-last {
    font-size: 0 !important;
    padding: 0 !important;
    width: 36px !important;
}

#lpm-catalog-root .lpm-page-btn.lpm-page-first::before,
#lpm-catalog-root .lpm-page-btn.lpm-page-prev::before,
#lpm-catalog-root .lpm-page-btn.lpm-page-next::before,
#lpm-catalog-root .lpm-page-btn.lpm-page-last::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
}

#lpm-catalog-root .lpm-page-btn.lpm-page-first::before {
    content: "\f100" !important;
}

#lpm-catalog-root .lpm-page-btn.lpm-page-prev::before {
    content: "\f104" !important;
}

#lpm-catalog-root .lpm-page-btn.lpm-page-next::before {
    content: "\f105" !important;
}

#lpm-catalog-root .lpm-page-btn.lpm-page-last::before {
    content: "\f101" !important;
}

/* Hide SVG icons in pagination buttons */
#lpm-catalog-root .lpm-page-btn svg {
    display: none !important;
}

/* ===== LOADING STATE ===== */
#lpm-catalog-root .lpm-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    /* Use opacity/visibility for show/hide - don't override display */
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    border-radius: 8px !important;
}

/* When loading is active - shown via JS class toggle */
#lpm-catalog-root .lpm-loading-overlay.lpm-loading-active {
    display: flex !important;
}

#lpm-catalog-root .lpm-spinner {
    width: 36px !important;
    height: 36px !important;
    border: 3px solid #e5e7eb !important;
    border-top-color: var(--lpm-primary, #8B6C88) !important;
    border-radius: 50% !important;
    animation: lpmSpin 0.8s linear infinite !important;
}

/* ===== NO RESULTS ===== */
#lpm-catalog-root .lpm-no-courses {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 60px 20px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

#lpm-catalog-root .lpm-no-courses h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 16px 0 8px 0 !important;
}

#lpm-catalog-root .lpm-no-courses p {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 0 20px 0 !important;
}

#lpm-catalog-root .lpm-reset-filters {
    padding: 10px 20px !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

#lpm-catalog-root .lpm-reset-filters:hover {
    background: #e5e7eb !important;
}

/* ===== RESPONSIVE TOOLBAR ===== */
@media (max-width: 768px) {
    #lpm-catalog-root .lpm-toolbar-left,
    #lpm-catalog-root .lpm-toolbar-right {
        flex: 1 1 100% !important;
    }

    #lpm-catalog-root .lpm-toolbar-left {
        flex-direction: column !important;
    }

    #lpm-catalog-root .lpm-catalog-search {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    #lpm-catalog-root .lpm-catalog-filters {
        width: 100% !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    #lpm-catalog-root .lpm-filter-select,
    #lpm-catalog-root .lpm-sort-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #lpm-catalog-root .lpm-results-count {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #lpm-catalog-root .lpm-filter-select,
    #lpm-catalog-root .lpm-sort-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   DeviFlow Brand Colors Override
   Purple (#8B6C88) for buttons/CTA, Green (#7F8F6A) for sections
   ========================================================================== */

/* All buttons - UNIFIED PURPLE STYLE */
.lpm-courses-container .btn,
.lpm-courses-container button,
.lpm-courses-container input[type="submit"],
.lpm-courses-container .lpm-btn,
.lpm-course-card .lpm-course-btn,
#lpm-catalog-root .lpm-reset-filters,
#lpm-catalog-root .lpm-page-btn,
#lpm-catalog-root .lpm-catalog-btn {
    background-color: #8B6C88 !important;
    border-color: #8B6C88 !important;
    color: #ffffff !important;
}

.lpm-courses-container .btn:hover,
.lpm-courses-container button:hover,
.lpm-courses-container input[type="submit"]:hover,
.lpm-courses-container .lpm-btn:hover,
.lpm-course-card .lpm-course-btn:hover,
#lpm-catalog-root .lpm-reset-filters:hover,
#lpm-catalog-root .lpm-page-btn:hover,
#lpm-catalog-root .lpm-catalog-btn:hover {
    background-color: #725a6f !important;
    border-color: #725a6f !important;
    color: #ffffff !important;
}

/* Primary color elements */
.lpm-courses-container a:hover,
.lpm-course-card .lpm-course-title a:hover,
.lpm-course-card .lpm-course-category a:hover {
    color: #8B6C88 !important;
}

/* Active/selected states */
#lpm-catalog-root .lpm-filter-select:focus,
#lpm-catalog-root .lpm-sort-select:focus,
#lpm-catalog-root .lpm-search-input:focus {
    border-color: #8B6C88 !important;
    box-shadow: 0 0 0 3px rgba(139, 108, 136, 0.2) !important;
}

/* Pagination active */
#lpm-catalog-root .lpm-page-btn.active,
#lpm-catalog-root .lpm-page-btn.current {
    background-color: #8B6C88 !important;
    border-color: #8B6C88 !important;
    color: #ffffff !important;
}

/* Spinner color */
.lpm-spinner,
#lpm-catalog-root .lpm-spinner {
    border-top-color: #8B6C88 !important;
}

/* Progress bars */
.lpm-progress-fill,
.lpm-course-progress .progress-fill {
    background: linear-gradient(90deg, #8B6C88, #725a6f) !important;
}

/* Course card hover effect */
.lpm-course-card:hover {
    border-color: rgba(139, 108, 136, 0.3) !important;
}

/* Thumbnail placeholder gradients - use GREEN */
.lpm-course-thumbnail-placeholder,
.lpm-course-placeholder {
    background: linear-gradient(135deg, #7F8F6A 0%, #8fa07a 100%) !important;
}

/* Section backgrounds - use GREEN */
.lpm-section-bg,
.lpm-hero-section,
.lpm-featured-section {
    background-color: #7F8F6A !important;
}

/* View toggle active state */
#lpm-catalog-root .lpm-view-btn.active {
    background-color: #8B6C88 !important;
    color: #ffffff !important;
}

/* Tags and badges */
.lpm-course-tag,
.lpm-badge {
    background-color: #8B6C88 !important;
    color: #ffffff !important;
}

/* Links within course cards */
.lpm-course-card .lpm-course-meta a,
.lpm-course-card .lpm-course-instructor a {
    color: #8B6C88 !important;
}

.lpm-course-card .lpm-course-meta a:hover,
.lpm-course-card .lpm-course-instructor a:hover {
    color: #725a6f !important;
}