/* =========================
   LensFlow Page Loader (4 Types)
   Modern / Minimal / Cream-Brown Defaults
   ========================= */

.mps-page-loader{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /*  بجای inset */
  z-index: 9999999;
  background: var(--lf-loader-bg, #F6F1E8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .32s ease, visibility .32s ease;
}

.mps-page-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .03), transparent 60%);
  pointer-events: none;
}

.mps-page-loader-inner {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mps-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

:root {
  --lf-loader-accent: #8A6A4D;
  /*  قهوه‌ای */
  --lf-loader-accent2: #D7C3A8;
  /*  کرمیِ تیره‌تر */
  --lf-loader-track: rgba(0, 0, 0, .08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mps-page-loader * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================
   Type 1: Ring (improved)
   ========================= */
.mps-loader--ring {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mps-loader--ring .mps-loader-ring {
  position: absolute;
  border-radius: 999px;
  border: 3px solid var(--lf-loader-track);
  border-top-color: var(--lf-loader-accent);
  animation: mps-ring-spin 1.05s cubic-bezier(.48, .08, .44, .96) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .08));
}

.mps-loader--ring .mps-loader-ring--lg {
  width: 72px;
  height: 72px;
}

.mps-loader--ring .mps-loader-ring--md {
  width: 50px;
  height: 50px;
  border-top-color: var(--lf-loader-accent2);
  animation-delay: .08s;
}

.mps-loader--ring .mps-loader-ring--sm {
  width: 30px;
  height: 30px;
  border-top-color: var(--lf-loader-accent);
  animation-delay: .16s;
}

@keyframes mps-ring-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =========================
   Type 2: Dots (bounce)
   ========================= */
.mps-loader--dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .08));
}

.mps-loader--dots .mps-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lf-loader-accent);
  opacity: .85;
  animation: mps-dot-bounce .72s ease-in-out infinite;
}

.mps-loader--dots .mps-dot:nth-child(2) {
  background: var(--lf-loader-accent2);
  animation-delay: .10s;
}

.mps-loader--dots .mps-dot:nth-child(3) {
  opacity: .75;
  animation-delay: .20s;
}

@keyframes mps-dot-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

/* =========================
   Type 3: Bars (wave)
   ========================= */
.mps-loader--bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  justify-content: center;
  height: 44px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .08));
}

.mps-loader--bars .mps-bar {
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--lf-loader-accent);
  opacity: .85;
  animation: mps-bars-wave .9s ease-in-out infinite;
}

.mps-loader--bars .mps-bar:nth-child(2) {
  animation-delay: .08s;
  background: var(--lf-loader-accent2);
}

.mps-loader--bars .mps-bar:nth-child(3) {
  animation-delay: .16s;
}

.mps-loader--bars .mps-bar:nth-child(4) {
  animation-delay: .24s;
  background: var(--lf-loader-accent2);
}

.mps-loader--bars .mps-bar:nth-child(5) {
  animation-delay: .32s;
}

@keyframes mps-bars-wave {

  0%,
  100% {
    transform: scaleY(.55);
    opacity: .55;
  }

  50% {
    transform: scaleY(1.25);
    opacity: .95;
  }
}

/* =========================
   Type 4: Orbit (modern)
   ========================= */
.mps-loader--orbit {
  position: relative;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .08));
}

.mps-loader--orbit .mps-orbit-track {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  border: 2px solid var(--lf-loader-track);
  background: transparent;
}

.mps-loader--orbit .mps-orbit-dot {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  animation: mps-orbit 1.05s linear infinite;
}

.mps-loader--orbit .mps-orbit-dot::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lf-loader-accent);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .02);
}

@keyframes mps-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}