/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: linear-gradient(90deg, #3A80F3, #1C4ED8, #60A5FA);
  position: fixed;
  z-index: 99999999999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  
  /* Design ultra moderne et minimaliste */
  box-shadow: 
    0 0 20px rgba(58, 128, 243, 0.6),
    0 0 40px rgba(58, 128, 243, 0.3),
    0 0 80px rgba(58, 128, 243, 0.1);
  
  /* Animation fluide de progression */
  background-size: 200% 100%;
  animation: gradient-shift 3s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Effet moderne et élégant */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  
  /* Dégradé subtil et élégant */
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(58, 128, 243, 0.4) 70%, 
    rgba(96, 165, 250, 0.8) 100%
  );
  
  /* Ombre douce et moderne */
  box-shadow: 
    0 0 30px rgba(58, 128, 243, 0.5),
    0 0 60px rgba(58, 128, 243, 0.2);
  
  /* Animation subtile et fluide */
  animation: smooth-glow 2s ease-in-out infinite;
  
  -webkit-transform: skewX(-22deg);
      -ms-transform: skewX(-22deg);
          transform: skewX(-22deg);
}

@keyframes smooth-glow {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 
      0 0 30px rgba(58, 128, 243, 0.5),
      0 0 60px rgba(58, 128, 243, 0.2);
  }
  50% {
    opacity: 1;
    box-shadow: 
      0 0 40px rgba(58, 128, 243, 0.7),
      0 0 80px rgba(58, 128, 243, 0.3);
  }
}

/* Spinner moderne et minimaliste */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 20px;
  right: 20px;
  
  /* Design glassmorphism élégant */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 8px;
  
  /* Bordure subtile */
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Ombre douce et moderne */
  box-shadow: 
    0 8px 32px rgba(58, 128, 243, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  
  /* Design circulaire moderne */
  border: 2px solid transparent;
  border-top: 2px solid #3A80F3;
  border-right: 2px solid #60A5FA;
  border-radius: 50%;
  
  /* Effet de lueur subtile */
  filter: drop-shadow(0 0 8px rgba(58, 128, 243, 0.4));
  
  /* Animation fluide et élégante */
  -webkit-animation: elegant-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
          animation: elegant-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes elegant-spin {
  0% { 
    transform: rotate(0deg);
    border-top-color: #3A80F3;
    border-right-color: #60A5FA;
  }
  50% { 
    transform: rotate(180deg);
    border-top-color: #60A5FA;
    border-right-color: #3A80F3;
  }
  100% { 
    transform: rotate(360deg);
    border-top-color: #3A80F3;
    border-right-color: #60A5FA;
  }
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}