/* =========================================================
   会员中心 · 加载动画（转圈圈）
   结构：<div id="mainLoading"><div class="fx-spinner"></div></div>
   文案由 #mainLoading::after 插入

   设计要点：
   - 只有「旋转」一种动画，不做位移/缩放 → 不会出现跳动或抽搐
   - 容器用 flex column 居中，不用 absolute + inset:0
     （之前方块版靠绝对定位居中，页面一变高居中点就跟着漂）
   ========================================================= */

/* ---------- 1. 全屏加载层 ---------- */
#mainLoading {
  position: fixed;
  left: 0;
  top: 0;
  /* 100vw 而非 100%：100% 会扣掉滚动条宽度，滚动条一出现/消失整层会横移 */
  width: 100vw;
  height: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
  overflow: hidden;
}

/* ---------- 2. 转圈 ---------- */
/* 各页面原来的方块标记（.ddr / .fx-spinner）统一隐藏，
   转圈直接用 #mainLoading::before 画，不依赖任何页面标记 */
#mainLoading .ddr,
#mainLoading .fx-spinner {
  display: none !important;
}

#mainLoading::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(200, 16, 46, .14);
  border-top-color: #C8102E;
  box-sizing: border-box;
  flex: 0 0 auto;
  animation: fxSpin .8s linear infinite;
  will-change: transform;
}

@keyframes fxSpin {
  to { transform: rotate(360deg); }
}

/* ---------- 3. 文案 ---------- */
#mainLoading::after {
  content: "小佛为你快速加载中";
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.6;
  color: #3D4048;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 4. 详情页加载（initLoading 期间） ---------- */
/* 关键：它是「遮罩」不是「占位块」。
   之前用 min-height:55vh 会占掉页面顶部一大块，把内容顶下去，
   转圈就浮在内容上方，看着像位置错乱。
   现在固定覆盖整个视口并居中：位置只跟窗口有关，页面怎么长都不会漂。 */
.pro-des-loading {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  background: #fff;
}

.pro-des-loading #mainLoading {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  background: transparent;
  overflow: visible;
  gap: 14px;
}

.pro-des-loading #mainLoading::before {
  width: 32px;
  height: 32px;
}

/* ---------- 5. 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  #mainLoading::before {
    animation-duration: 2s;
  }
}

/* ---------- 6. 移动端 ---------- */
@media screen and (max-width: 750px) {
  #mainLoading {
    gap: 15px;
  }
  #mainLoading::before {
    width: 32px;
    height: 32px;
  }
  #mainLoading::after {
    font-size: 13px;
    letter-spacing: .3px;
  }
}