/*
 * Modern Progress Bar Override for Bootstrap 3
 * Description: Replaces the default BS3 progress bars with a modern,
 * animated, and elegant design.
 */

/* --- 1. Main Progress Bar Container --- */
.progress {
  height: 28px; /* Taller for a modern feel */
  border-radius: 50px; /* Pill shape */
  background-color: #e9ecef; /* A light, neutral background */
  box-shadow: none; /* Remove default BS3 inner shadow */
  overflow: hidden; /* Contain the inner bar and animations */
}

/* --- 2. The Colored Fill Bar (General) --- */
.progress-bar {
  border-radius: 50px; /* Match the container's pill shape */
  box-shadow: none; /* Remove default BS3 shadow */
  line-height: 28px; /* Vertically center the text */
  
  /* Remove the default BS3 stripes if .progress-bar-striped is used */
  /* We are replacing it with our own animated stripes */
  background-image: none; 
  
  /* Smooth transition for the width property (when it loads) */
  transition: width 0.6s ease;
  
  /* Prepare for the animated stripes pseudo-element */
  position: relative;
  overflow: hidden;

  /* Default beautiful gradient */
  background: linear-gradient(45deg, #007bff, #6610f2);

  /* Set a subtle pulse glow animation */
  animation: pulseGlow 1.5s ease-in-out infinite alternate;
}

/* --- 3. The Animated Stripes Overlay --- */
/* We use a pseudo-element for a non-intrusive overlay */
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* The stripes are a semi-transparent white gradient */
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, 0.2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.2) 75%, 
    transparent 75%, 
    transparent
  );
  
  /* Size the stripes */
  background-size: 40px 40px;
  
  /* Animate the stripes! */
  animation: slideStripes 2s linear infinite;
  
  /* Ensure it doesn't break the rounded corners */
  border-radius: 50px;
}

/* --- 4. Keyframe Animations --- */

/* Animation for the sliding stripes */
@keyframes slideStripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Default pulse glow */
@keyframes pulseGlow {
  from {
    box-shadow: 0 0 5px rgba(102, 16, 242, 0.5);
  }
  to {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.8);
  }
}

/* --- 5. Contextual Colors (Success, Info, etc.) --- */

/* We override each color with a new gradient and a matching pulse animation */

/* Success (Green) */
.progress-bar-success {
   background: linear-gradient(45deg, #28a745, #20c997);
   animation-name: pulseGlowSuccess;
}
@keyframes pulseGlowSuccess {
  from { box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); }
  to { box-shadow: 0 0 15px rgba(32, 201, 151, 0.8); }
}

/* Info (Teal/Blue) */
.progress-bar-info {
   background: linear-gradient(45deg, #17a2b8, #20c997);
   animation-name: pulseGlowInfo;
}
@keyframes pulseGlowInfo {
  from { box-shadow: 0 0 5px rgba(23, 162, 184, 0.5); }
  to { box-shadow: 0 0 15px rgba(32, 201, 151, 0.8); }
}

/* Warning (Yellow/Orange) */
.progress-bar-warning {
   background: linear-gradient(45deg, #ffc107, #fd7e14);
   animation-name: pulseGlowWarning;
}
@keyframes pulseGlowWarning {
  from { box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
  to { box-shadow: 0 0 15px rgba(253, 126, 20, 0.8); }
}

/* Danger (Red/Pink) */
.progress-bar-danger {
   background: linear-gradient(45deg, #dc3545, #d63384);
   animation-name: pulseGlowDanger;
}
@keyframes pulseGlowDanger {
  from { box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); }
  to { box-shadow: 0 0 15px rgba(214, 51, 132, 0.8); }
}

/* --- 6. Optional: Disable Animations --- */
/* Add this class to a .progress-bar element to make it static */
.progress-bar.no-animation {
  /* Remove the pulse glow animation and any static shadow */
  animation: none;
  box-shadow: none;
}

.progress-bar.no-animation::after {
  /* Remove the sliding stripes overlay completely */
  display: none;
}

/* --- 7. Optional: Sizing Classes --- */

/* Small Progress Bar */
.progress.progress-sm {
  height: 18px;
}
.progress.progress-sm .progress-bar {
  line-height: 18px; /* Vertically center text */
}

/* Large Progress Bar */
.progress.progress-lg {
  height: 40px;
}
.progress.progress-lg .progress-bar {
  line-height: 40px; /* Vertically center text */
}