/* Container for the progress bar */
.progress-container {
    position: fixed;
    top: 0;
    z-index: 1000;
    /* لضمان ظهوره فوق كل العناصر */
    width: 100%;
    height: 8px;
    /* سمك الشريط كما في المواقع الاحترافية */
    background: transparent;
    /* الخلفية شفافة حتى لا يغطي الهيدر */
}

/* The actual progress bar */
.progress-bar {
    height: 4px;
    background: var(--clr-primary);
    /* اللون الأزرق الخاص بك */
    width: 0%;
    /* يبدأ من الصفر */
    transition: width 0.1s ease-out;
    /* حركة ناعمة أثناء التمرير */
    box-shadow: 0 0 10px rgba(31, 94, 255, 0.5);
    /* وهج خفيف ليبرز الشريط */
}