/**
 * WP Pro Quiz - Course Progress Bar Animations
 * Version: 3.3.2
 * Animations spectaculaires pour les barres de progression
 */

/* ============================
   BARRE DE PROGRESSION AMÉLIORÉE
   ============================ */

/* Pas de modification du conteneur principal pour éviter les conflits */
.wpProQuiz_course_progress_bar {
    /* Gardons les dimensions par défaut */
    position: relative;
}

.wpProQuiz_my_progress {
    /* Dimensions originales conservées */
    width: 100%;
    position: relative;
    background-color: #e1e1e1 !important;
    border-radius: 15px;
    text-align: left;
    overflow: hidden;
}

.wpProQuiz_course_bar {
    /* Hauteur originale de 12px conservée */
    position: relative;
    height: 12px;
    /* Gradient jaune/or moderne et dynamique */
    background: linear-gradient(145deg, #ffcc00, #ffbc3f) !important;
    text-align: center;
    color: white;
    border-radius: 15px;
    font-size: medium;
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Légère ombre dorée pour la profondeur */
    box-shadow: 0 1px 3px rgba(255, 188, 63, 0.25);
}

/* Effet SHINE moderne et subtil */
.wpProQuiz_course_bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 60%
    );
    animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -150px;
    }
    100% {
        left: calc(100% + 150px);
    }
}

/* Effet de texture subtile glassmorphism */
.wpProQuiz_course_bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 15px;
    opacity: 0.7;
}

/* Pourcentage - style simple sans animation */
.wpProQuiz_course_percentage {
    position: absolute;
    /* Gardons le positionnement et style par défaut */
}

/* ============================
   EFFET DE SUCCÈS (100%)
   ============================ */

.wpProQuiz_course_bar.complete {
    /* Gradient vert émeraude pour 100% */
    background: linear-gradient(135deg, #00c851 0%, #00ff88 100%) !important;
    box-shadow: 0 2px 4px rgba(0, 200, 81, 0.3);
}

/* ============================
   EFFET PROGRESSION EN COURS
   ============================ */

.wpProQuiz_course_bar.updating {
    /* Effet de lueur dorée lors de la mise à jour */
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.4);
    transition: box-shadow 0.3s ease-out;
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 768px) {
    /* Gardons les dimensions originales sur mobile aussi */
    /* Pas de changement de hauteur ou padding */
}