/* css/styles.css */
.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}

.locked-overlay {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
}

.ad-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.xp-bar {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Level Colors */
.level-beginner-bg { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.level-intermediate-bg { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.level-advanced-bg { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.level-all-bg { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }

/* Card uniform sizing */
.course-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-card .card-footer {
    margin-top: auto;
}

/* Ensure consistent image heights */
.course-image-container {
    height: 200px;
    overflow: hidden;
}

.course-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}