/* Wrapper for increased specificity against Elementor and other theme styles */
.nrich-lms-wrapper {
    /* Reset any inherited styles that might interfere */
    box-sizing: border-box;
}

.nrich-lms-wrapper .nrich-lms-course-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(316px, 316px)) !important;
    gap: 1.5rem !important;
    max-width: 100% !important;
    justify-content: start !important;
}

.nrich-lms-wrapper .nrich-lms-card-container {
    width: 316px !important;
    max-width: 316px !important;
    background-color: var(--nrich-surface, #fff) !important;
    border: 1px solid var(--nrich-border-color, #E9EAF0) !important;
    padding: 18px 14px !important;
    transition: box-shadow 0.3s ease !important;
    font-family: inherit !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

.nrich-lms-wrapper .nrich-lms-card-container:hover {
    box-shadow: 15px 20px 15px 0 var(--nrich-shadow, #82C3FF1F) !important;
}

.nrich-lms-wrapper .nrich-lms-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.nrich-lms-wrapper .nrich-lms-card-image {
    width: 100% !important;
    display: block !important;
}

.nrich-lms-wrapper .nrich-lms-card-thumbnail {
    width: 100% !important;
    height: 182px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    background: var(--nrich-muted-bg, #f7f7f9) !important;
    display: block !important;
    max-width: 100% !important;
}

.nrich-lms-wrapper .nrich-lms-card-data {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.nrich-lms-wrapper .nrich-lms-course-duration {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--nrich-muted-color, #737784) !important;
}

.nrich-lms-wrapper .nrich-lms-course-duration-icon {
    font-size: 14px !important;
    line-height: 1 !important;
}

.nrich-lms-wrapper .nrich-lms-course-card-title h4 {
    color: var(--nrich-heading-color, #241F26) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nrich-lms-wrapper .nrich-lms-course-description {
    color: var(--nrich-muted-color, #737784) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-clamp: 4;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.nrich-lms-wrapper .nrich-lms-more-info {
    align-self: flex-start !important;
    margin-top: 4px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--nrich-border-color, #E9EAF0) !important;
    background: var(--nrich-surface, #fff) !important;
    color: var(--nrich-heading-color, #241F26) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 20px !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
    font-family: inherit !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* Hover styles for catalog buttons: configure under Nrich LMS → Design (no default hover here). */

/* Catalog cards: primary = View / View Details / More Info; secondary = Buy Now / amount (tweak in Settings → design or override CSS). */
.nrich-lms-wrapper .nrich-lms-card-primary-btn {
    align-self: flex-start !important;
    margin-top: 4px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--nrich-primary-bg, #2563eb) !important;
    background: var(--nrich-primary-bg, #2563eb) !important;
    color: var(--nrich-primary-text, #fff) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.nrich-lms-wrapper .nrich-lms-card-secondary-btn {
    padding: 8px 14px !important;
    border: 1px solid var(--nrich-border-color, #E9EAF0) !important;
    background: var(--nrich-surface, #fff) !important;
    color: var(--nrich-heading-color, #241F26) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

.nrich-lms-wrapper .nrich-lms-card-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Two-button rows: equal width; primary/secondary roles above. */
.nrich-lms-wrapper .nrich-lms-card-actions .nrich-lms-card-primary-btn,
.nrich-lms-wrapper .nrich-lms-card-actions .nrich-lms-card-secondary-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
}

/* Pagination styles moved to separate pagination.css file for reusability */

.nrich-lms-wrapper .nrich-lms-no-courses {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 2rem !important;
    color: var(--nrich-muted-color, #737784) !important;
    font-size: 16px !important;
}

@media screen and (max-width: 600px) {
    .nrich-lms-wrapper .nrich-lms-course-grid {
        grid-template-columns: 1fr !important;
    }

    .nrich-lms-wrapper .nrich-lms-card-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nrich-lms-wrapper .nrich-lms-card-thumbnail {
        height: auto !important;
    }

}