/* ======================================================================
   Lightweight preloader with percent bar
   Path: /assets/css/preloader.css
   ====================================================================== */

:root{
  --pl-bg: #ffffff;
  --pl-ink: #0f172a;
  --pl-muted: #6b7280;
  --pl-accent: var(--accent, #ef476f);
  --pl-accent-2: var(--accent-2, #ff8aa1);
}

html.preloading, body.preloading{ overflow: hidden; }

.preloader{
  position: fixed;
  inset: 0;
  background: var(--pl-bg);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.preloader__card{
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(2,84,154,.10);
  min-width: 240px;
  max-width: 78vw;
  text-align: center;
}

.preloader__percent{
  font-weight: 800;
  color: var(--pl-ink);
  font-size: 16px;
  margin-bottom: 10px;
}

.preloader__bar{
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

.preloader__bar-fill{
  height: 100%;
  width: var(--p, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pl-accent), var(--pl-accent-2));
  transition: width .15s linear;
}

/* Fade-out */
.preloader--fade{ animation: plFade .25s ease forwards; }
@keyframes plFade{ to{ opacity:0; visibility:hidden; } }