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

.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;
    }
}

/* ===== Mobile Responsive ===== */
@media (max-width: 767px) {
    .tutor-course-thumbnail {
        height: 160px !important;
    }
    .tutor-course-thumbnail .neon-text {
        font-size: 20px !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
    }
}
@media (max-width: 480px) {
    .tutor-course-thumbnail {
        height: 140px !important;
    }
    .tutor-course-thumbnail .neon-text {
        font-size: 18px !important;
        letter-spacing: 0.5px !important;
    }
}

/* ===== Card Mobile Responsive ===== */
@media (max-width: 767px) {
    .tutor-card-body {
        padding: 14px !important;
    }
    .tutor-card-footer {
        padding: 12px 14px !important;
    }
    .tutor-course-name {
        font-size: 14px !important;
    }
    .tutor-meta {
        font-size: 12px !important;
    }
    .list-item-button .tutor-btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}
@media (max-width: 480px) {
    .tutor-card-body {
        padding: 12px !important;
    }
    .tutor-card-footer {
        padding: 10px 12px !important;
    }
}

/* ===== Filter Bar Mobile Responsive ===== */
@media (max-width: 480px) {
    .tutor-course-filter {
        text-align: left !important;
    }
    .tutor-form-control.tutor-form-select {
        min-width: 100% !important;
        width: 100% !important;
    }
}