/* =========================
   MM 360 Viewer – Fullwidth Linear Loader + Spinner (no overlay)
   ========================= */

/* (اختیاری) فونت پینار */
@font-face{
  font-family:'Pinar';
  src: url('../fonts/pinar/Pinar.woff2') format('woff2'),
       url('../fonts/pinar/Pinar.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.mm360-wrap{
  position:relative;
  display:block;
  font-family:'Pinar', Vazirmatn, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  min-height:160px; /* برای مرکز شدن لودر قبل از نمایش */
}

/* ===== Loader =====
   بدون هرگونه بک‌گراند/اوورلی/بلور */
.mm360-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* حذف اوورلی و بلور */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index:5;

  /* رنگ برند و درصد پیشرفت (0..1) */
  --brand: #221C35;
  --pct: 0;
}

.mm360-lbox{
  width: min(100%, 1124px);   /* تمام‌عرض افزونه/استیج */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding: 0 12px;            /* کمی حاشیه داخل روی موبایل */
}

/* Progress Bar — full width */
.mm360-bar{
  width:100%;
  height:8px;
  background: rgba(34,28,53,.16); /* ریل کم‌رنگ هم‌خانواده با برند */
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.mm360-fill{
  display:block;
  width:0%;
  height:100%;
  background: var(--brand);
  transform-origin:left center;
  transition: width .12s linear;
}

/* Spinner زیر نوار */
.mm360-spinner{
  align-self:center;
  width:22px; height:22px;
  border-radius:999px;
  border: 2px solid rgba(34,28,53,.28);  /* حلقه کم‌رنگ */
  border-top-color: var(--brand);        /* بخش برند */
  animation: mm360-spin .8s linear infinite;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
@keyframes mm360-spin{
  to { transform: rotate(360deg); }
}

/* ===== Stage / Frame ===== */
.mm360-stage{
  display:none;            /* بعد از reveal نمایش داده می‌شود */
  position:relative;
  user-select:none;
  -webkit-user-drag:none;
  cursor:grab;
  background:transparent;
  width:100%;
  max-width:1124px;        /* سقف دسکتاپ */
  margin-inline:auto;      /* مرکز */
  height:auto;             /* اگر ارتفاع ثابت می‌خواهی، اینجا تعیین کن */
  overflow:hidden;
}
.mm360-stage:active{ cursor:grabbing; }

.mm360-frame{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  filter:none;
  box-shadow:none;
  background:transparent;
  -webkit-user-drag:none;
}

/* Mobile */
@media (max-width:480px){
  .mm360-wrap{ min-height:140px; }
  .mm360-lbox{ gap:10px; padding:0 10px; }
  .mm360-bar{ height:7px; }
  .mm360-spinner{ width:20px; height:20px; }
}