/* 霓虹灯风格课程缩略图 - 通用版 */

.tutor-course-thumbnail-wrap {
    width: 100% !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.tutor-course-thumbnail {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    background: linear-gradient(135deg, #0d0b2e 0%, #1a1744 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Force hide the image */
.tutor-course-thumbnail img {
    display: none !important;
}

/* Hide the old pseudo element */
.tutor-course-thumbnail::after {
    display: none !important;
    content: "" !important;
}

/* Neon text overlay style */
.tutor-course-thumbnail .neon-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #d4af37,
        0 0 40px #d4af37,
        0 0 80px #d4af37 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    padding: 0 15px !important;
    white-space: nowrap !important;
    animation: neonPulse 2s ease-in-out infinite !important;
    font-family: 'Outfit', 'Inter', 'Noto Sans KR', sans-serif !important;
}

/* Glow rotation animation overlay */
.tutor-course-thumbnail::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(212, 175, 55, 0.15) 60deg,
        transparent 120deg
    ) !important;
    animation: neonRotate 8s linear infinite !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

@keyframes neonRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes neonPulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
        text-shadow: 
            0 0 5px #ffffff,
            0 0 10px #ffffff,
            0 0 20px #d4af37,
            0 0 40px #d4af37,
            0 0 80px #d4af37;
    }
    50% { 
        opacity: 0.85;
        transform: scale(0.98);
        text-shadow: 
            0 0 3px #ffffff,
            0 0 8px #ffffff,
            0 0 15px #d4af37,
            0 0 30px #d4af37,
            0 0 60px #d4af37;
    }
}