/**
 * Pristine Universal Course Views & Ratings Design System
 * Package: local_courseviews
 */

:root {
    --cv-theme-primary: var(--primary, var(--bs-primary, var(--moove-link-color, var(--moove-secondary-navigation-bg-color, #0f47ad))));
    --cv-primary-accent: var(--cv-theme-primary, #6366f1);
    --cv-star-gold: #f59e0b;
    --cv-star-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --cv-progress-gradient: linear-gradient(90deg, var(--cv-theme-primary, #6366f1) 0%, #8b5cf6 100%, #ec4899 100%);
    
    --cv-shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.04);
    --cv-shadow-hover: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
    --cv-shadow-hero: 0 20px 40px -10px rgba(15, 23, 42, 0.25);
    
    --cv-radius-sm: 8px;
    --cv-radius-md: 14px;
    --cv-radius-lg: 20px;
    --cv-radius-pill: 9999px;
    
    --cv-transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. Course Rating Badges (Glow Pill Integration)
   ========================================================================== */
.cv-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--cv-radius-pill);
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.15);
    width: fit-content;
    margin-top: auto !important;
    margin-bottom: 0.4rem !important;
    z-index: 10;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    touch-action: manipulation;
}

.cv-rating-badge:hover {
    transform: translateY(-1px) scale(1.03);
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28);
    color: #78350f;
}

.cv-rating-badge:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
    background: #fde047;
}

.cv-rating-badge:focus-visible {
    outline: 2px solid var(--cv-primary-accent);
    outline-offset: 2px;
}

/* Distinct Actionable Button Style ("Rate course" CTA) */
.cv-rating-badge.cv-rating-actionable {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #4338ca;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.cv-rating-badge.cv-rating-actionable .cv-star-icon {
    color: #6366f1;
}

.cv-rating-badge.cv-rating-actionable:hover {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
    color: #3730a3;
    transform: translateY(-1px) scale(1.04);
}

.cv-rating-badge.cv-rating-actionable:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
    background: #c4b5fd;
}

.cv-star-icon {
    color: #d97706;
    font-size: 0.9rem;
}

.cv-rating-avg {
    color: #78350f;
    font-weight: 800;
}

.cv-rating-count {
    color: #b45309;
    font-weight: 600;
    font-size: 0.75rem;
}

.cv-rating-empty {
    color: #b45309;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ==========================================================================
   2. Enhanced Standard Card Grid View (Strictly Scoped to Courses View)
   ========================================================================== */
[data-course-view-mode="grid"] [data-region="courses-view"] .card,
[data-course-view-mode="grid"] [data-region="courses-view"] .dashboard-card,
[data-course-view-mode="grid"] [data-region="courses-view"] .moovel-course-card,
[data-region="courses-view"] .card,
[data-region="courses-view"] .dashboard-card,
[data-region="courses-view"] .moovel-course-card,
.dashboard-card-deck .card,
.card.course-card {
    border-radius: var(--cv-radius-md) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: var(--cv-shadow-subtle) !important;
    transition: var(--cv-transition-smooth) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

[data-region="courses-view"] .card-body,
[data-region="courses-view"] .course-info-container,
.dashboard-card-deck .card-body,
.card.course-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

[data-course-view-mode="grid"] [data-region="courses-view"] .card:hover,
[data-course-view-mode="grid"] [data-region="courses-view"] .dashboard-card:hover,
[data-course-view-mode="grid"] [data-region="courses-view"] .moovel-course-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--cv-shadow-hover) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-course-view-mode="grid"] [data-region="courses-view"] .card-img-top,
[data-course-view-mode="grid"] [data-region="courses-view"] .dashboard-card-img {
    height: 160px !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.4s ease !important;
}

[data-course-view-mode="grid"] [data-region="courses-view"] .card:hover .card-img-top,
[data-course-view-mode="grid"] [data-region="courses-view"] .dashboard-card:hover .dashboard-card-img {
    transform: scale(1.04) !important;
}

[data-course-view-mode="grid"] [data-region="courses-view"] .progress-bar {
    background: var(--cv-progress-gradient) !important;
}

/* ==========================================================================
   3. Custom View: COMPACT GRID (High Density 4-5 Columns, Strictly Scoped)
   ========================================================================== */
[data-course-view-mode="compact"] [data-region="courses-view"] [data-region="card-deck"],
[data-course-view-mode="compact"] [data-region="courses-view"] .card-deck,
[data-course-view-mode="compact"] [data-region="courses-view"] .row,
[data-course-view-mode="compact"] .dashboard-card-deck {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.4rem !important;
    margin-right: -0.4rem !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
[data-course-view-mode="compact"] [data-region="courses-view"] .card-deck > [class*="col-"],
[data-course-view-mode="compact"] [data-region="courses-view"] .row > [class*="col-"],
[data-course-view-mode="compact"] .dashboard-card-deck > * {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    width: 20% !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    margin-bottom: 0.8rem !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] .card,
[data-course-view-mode="compact"] [data-region="courses-view"] .dashboard-card,
[data-course-view-mode="compact"] [data-region="courses-view"] .moovel-course-card {
    border-radius: var(--cv-radius-sm) !important;
    overflow: hidden !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] .card-img-top,
[data-course-view-mode="compact"] [data-region="courses-view"] .dashboard-card-img {
    height: 95px !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] .card-body,
[data-course-view-mode="compact"] [data-region="courses-view"] .course-info-container {
    padding: 0.6rem !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] .coursename,
[data-course-view-mode="compact"] [data-region="courses-view"] .coursename a,
[data-course-view-mode="compact"] [data-region="courses-view"] .card-title,
[data-course-view-mode="compact"] [data-region="courses-view"] .card-title a {
    color: var(--cv-theme-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

[data-course-view-mode="compact"] [data-region="courses-view"] .coursename a:hover,
[data-course-view-mode="compact"] [data-region="courses-view"] .card-title a:hover {
    color: var(--cv-theme-primary) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   4. Custom View: HERO SHOWCASE (Cinematic Multi-Column Hero Grid)
   ========================================================================== */
[data-course-view-mode="hero"] [data-region="courses-view"] [data-region="card-deck"],
[data-course-view-mode="hero"] [data-region="courses-view"] .card-deck,
[data-course-view-mode="hero"] [data-region="courses-view"] .row,
[data-course-view-mode="hero"] .dashboard-card-deck {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
[data-course-view-mode="hero"] [data-region="courses-view"] .card-deck > [class*="col-"],
[data-course-view-mode="hero"] [data-region="courses-view"] .row > [class*="col-"],
[data-course-view-mode="hero"] .dashboard-card-deck > * {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .card,
[data-course-view-mode="hero"] [data-region="courses-view"] .dashboard-card,
[data-course-view-mode="hero"] [data-region="courses-view"] .moovel-course-card {
    height: 260px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    border-radius: var(--cv-radius-lg) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: var(--cv-shadow-hero) !important;
    background: #0f172a !important;
    transition: var(--cv-transition-smooth) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .card:hover,
[data-course-view-mode="hero"] [data-region="courses-view"] .dashboard-card:hover,
[data-course-view-mode="hero"] [data-region="courses-view"] .moovel-course-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .card-img-top,
[data-course-view-mode="hero"] [data-region="courses-view"] .dashboard-card-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .card:hover .card-img-top,
[data-course-view-mode="hero"] [data-region="courses-view"] .dashboard-card:hover .dashboard-card-img {
    transform: scale(1.06) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .card-body,
[data-course-view-mode="hero"] [data-region="courses-view"] .course-info-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
    padding: 1.25rem 1.5rem !important;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.6) 30%, rgba(15, 23, 42, 0.95) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .coursename,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title {
    border-left: 3.5px solid var(--cv-theme-primary, #6366f1) !important;
    padding-left: 0.5rem !important;
    margin-bottom: 0.35rem !important;
    display: block !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .coursename,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a:visited,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a:link,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename span,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename .multiline,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename *,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a:visited,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a:link,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title span,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 0.95) !important;
    text-decoration: none !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: text-shadow 0.15s ease !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .coursename:hover,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename:hover *,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a:hover,
[data-course-view-mode="hero"] [data-region="courses-view"] .coursename a:hover *,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a:hover,
[data-course-view-mode="hero"] [data-region="courses-view"] .card-title a:hover * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: underline !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.95) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .text-muted,
[data-course-view-mode="hero"] [data-region="courses-view"] .small,
[data-course-view-mode="hero"] [data-region="courses-view"] .categoryname,
[data-course-view-mode="hero"] [data-region="courses-view"] .categoryname * {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    font-size: 0.85rem !important;
    padding-left: calc(0.5rem + 3.5px) !important;
}

[data-course-view-mode="hero"] [data-region="courses-view"] .cv-rating-badge {
    margin-top: 0.5rem !important;
    margin-left: calc(0.5rem + 3.5px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   5. Interactive Ratings Modal Component
   ========================================================================== */
.cv-modal {
    z-index: 1060 !important;
}

.cv-modal .modal-content {
    border-radius: var(--cv-radius-lg) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: var(--cv-shadow-hero) !important;
    overflow: hidden;
}

.cv-star {
    font-size: 2rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: var(--cv-transition-smooth);
    display: inline-block;
    padding: 0 3px;
}

.cv-star:hover,
.cv-star.text-warning {
    color: var(--cv-star-gold) !important;
}

/* ==========================================================================
   6. Responsive Breakpoints
   ========================================================================== */
@media (min-width: 1600px) {
    [data-course-view-mode="hero"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
    [data-course-view-mode="hero"] [data-region="courses-view"] .card-deck > [class*="col-"],
    [data-course-view-mode="hero"] [data-region="courses-view"] .row > [class*="col-"],
    [data-course-view-mode="hero"] .dashboard-card-deck > * {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}

@media (max-width: 1200px) {
    [data-course-view-mode="compact"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
    [data-course-view-mode="compact"] [data-region="courses-view"] .row > [class*="col-"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

@media (max-width: 992px) {
    [data-course-view-mode="compact"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
    [data-course-view-mode="compact"] [data-region="courses-view"] .row > [class*="col-"] {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
        width: 33.33% !important;
    }
}

@media (max-width: 768px) {
    [data-course-view-mode="compact"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
    [data-course-view-mode="compact"] [data-region="courses-view"] .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    [data-course-view-mode="hero"] [data-region="courses-view"] [data-region="card-deck"] > [class*="col-"],
    [data-course-view-mode="hero"] [data-region="courses-view"] .card-deck > [class*="col-"],
    [data-course-view-mode="hero"] [data-region="courses-view"] .row > [class*="col-"],
    [data-course-view-mode="hero"] .dashboard-card-deck > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    [data-course-view-mode="hero"] [data-region="courses-view"] .card,
    [data-course-view-mode="hero"] [data-region="courses-view"] .dashboard-card,
    [data-course-view-mode="hero"] [data-region="courses-view"] .moovel-course-card {
        height: 220px !important;
    }
}