/* =======================================================================
   Preloader — Slim Bar + Percentage
   Path: /assets/css/preloader.css
   ======================================================================= */

:root{
  --preloader-bg:#ffffff;
  --preloader-muted:#475569;
  --preloader-accent:#2563eb;
  --preloader-accent-2:#1e40af;
  --preloader-radius:12px;
  --preloader-shadow:0 10px 30px rgba(2,84,154,.10);
  --preloader-bar-h:8px;
}

/* Fullscreen overlay */
.preloader-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--preloader-bg);
  z-index: 9999;
  opacity: 1;
  transition: opacity .28s ease;
}

/* Hidden after load */
.preloader-overlay.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Center stack (let the bar dictate width) */
.preloader-center{
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--preloader-radius);
  box-shadow: var(--preloader-shadow);
  border: 1px solid #e9eef6;
  background: #fff;

  min-inline-size: 0;   /* allow full shrink */
  inline-size: auto;
  max-inline-size: 92%;
}

/* Bar track — SHORTER */
.preloader-bar{
  inline-size: clamp(140px, 24vw, 240px); /* was 220–380px; much shorter now */
  block-size: var(--preloader-bar-h);
  background: #e9eef6;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* Bar fill */
.preloader-progress{
  position: absolute;
  inset: 0 100% 0 0; /* 0% width */
  background: linear-gradient(90deg, var(--preloader-accent) 0%, var(--preloader-accent-2) 100%);
  border-radius: inherit;
  transition: inset .12s linear;
}

/* Percent text */
.preloader-percent{
  margin: 0;
  font-size: .875rem;
  color: var(--preloader-muted);
  direction: ltr;
}

/* Page lock + strong blur while loading */
body.is-loading{ overflow: hidden; }
body.is-loading .auth-page{
  filter: blur(12px) brightness(.92);
  transition: filter .2s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .preloader-overlay{ transition: none; }
  .preloader-progress{ transition: none; }
  body.is-loading .auth-page{ transition: none; }
}