.loader-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;           /* white background as requested */
  display: flex;                 /* show via JS by setting display:flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Centered loader wrapper */
.loader {
  width: 96px;
  height: 96px;
  position: relative;
  display: grid;
  place-items: center;
  transform: translateZ(0);
  /* optional subtle inner shadow to help contrast on white */
  box-shadow: 0 6px 30px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 50%;
}

/* Each vertical bar around the circle */
.loader .bar {
  --count: 12;
  --angle: calc(360deg / var(--count));
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;                    /* bar width */
  height: 22px;                  /* initial bar height */
  background: #2b2b2b;           /* dark color — tweak if needed */
  border-radius: 6px;            /* rounded corners for bars */
  transform-origin: center 40px; /* pivot so bars point outward */
  /* place each bar in circular layout */
  transform: rotate(calc(var(--i) * var(--angle))) translateY(-34px);
  animation: barPulse 1.4s cubic-bezier(.2,.9,.3,.95) infinite;
  animation-delay: calc(var(--i) * -0.09s);
  will-change: transform, height, border-radius, opacity;
  opacity: 0.95;
}

/* animation: bars shorten/lengthen, round into a pill/dot */
/* step 0: vertical bars (short) -> middle: taller & less-rounded -> end: fully rounded small dot */
@keyframes barPulse {
  0% {
    height: 8px;
    transform: rotate(calc(var(--i) * var(--angle))) translateY(-34px) scale(1);
    border-radius: 50%;       /* pill -> initially more rounded so it transitions smoothly */
    opacity: 0.5;
  }
  40% {
    height: 26px;
    transform: rotate(calc(var(--i) * var(--angle))) translateY(-34px) scale(1.05);
    border-radius: 6px;       /* long vertical bar */
    opacity: 1;
  }
  70% {
    height: 14px;
    transform: rotate(calc(var(--i) * var(--angle))) translateY(-34px) scale(0.95);
    border-radius: 50%;       /* rounding toward dot */
    opacity: 0.85;
  }
  100% {
    height: 8px;
    transform: rotate(calc(var(--i) * var(--angle))) translateY(-34px) scale(1);
    border-radius: 50%;
    opacity: 0.5;
  }
}

/* Tiny visually-hidden text for screen readers */
.sr-only {
  position: absolute;
  width: 1px;height: 1px;
  padding: 0;margin: -1px;
  overflow: hidden;clip: rect(0,0,0,0);
  white-space: nowrap;border: 0;
}

/* Responsive scaling for smaller screens */
@media (max-width: 420px) {
  .loader { width: 72px; height: 72px; }
  .loader .bar { width: 6px; height: 18px; transform-origin: center 30px; }
}