/* Progress Bar Animation */

.animated-progress {
    position: relative !important;
    height: 8px !important;
    background: #f0f0f0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    margin: 25px 0 20px !important;
}

.animated-progress-bar {
    position: relative !important;
    height: 100% !important;
    background: linear-gradient(90deg, #1E5BC6, #2d6fd9) !important;
    border-radius: 20px !important;
    width: 0% !important;
    transition: width 1.8s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Thumb circle at progress end */
.animated-progress-bar::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 20px;
    height: 20px;
    background: #1E5BC6;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(30, 91, 198, 0.5);
    border: 3px solid #fff;
    transition: transform 0.4s ease 1.5s;
}

.animated-progress.show .animated-progress-bar::after {
    transform: translateY(-50%) scale(1);
}

/* % counter tooltip above thumb */
.percent-counter {
    position: absolute;
    right: -25px;
    top: -34px;
    color: #1E5BC6;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animated-progress.show .percent-counter {
    opacity: 1;
    transform: translateY(0);
}