/* ==========================================================================
   會員等級徽章 (system/member_badge.php 產生的 <span class="level-badge ...">)
   前台 header (system/layout.php) 與後台會員管理 (BG/admin_users_edit.php) 共用
   ========================================================================== */

.level-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.5;
  white-space: nowrap;
}

/* 圖示與文字都墊在最上層，蓋過底下的光澤/掃光效果 */
.level-badge i,
.level-badge > span {
  position: relative;
  z-index: 2;
}

.level-badge i {
  font-size: 0.85em;
}

/* 玻璃感光澤：由上往下的柔和高光，讓徽章看起來像實體按鈕而不是純色色塊 */
.level-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
}

/* ── 各等級配色 ─────────────────────────────────────────── */

/* 9 超管 */
.level-badge-9 {
  color: #fff;
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #991b1b 100%);
  box-shadow:
    0 2px 6px rgba(153, 27, 27, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.level-badge-9 i {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* 8 管理員 */
.level-badge-8 {
  color: #fff;
  background: linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #9a3412 100%);
  box-shadow:
    0 2px 6px rgba(154, 52, 18, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.level-badge-8 i {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* 7 工作人員 */
.level-badge-7 {
  color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1d4ed8 100%);
  box-shadow:
    0 2px 6px rgba(29, 78, 216, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.level-badge-7 i {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* 3 VVIP：香檳金，質感最重的一顆 */
.level-badge-3 {
  color: #5b3a05;
  background: linear-gradient(135deg, #fdf1c7 0%, #f3c04c 45%, #d99a1f 100%);
  box-shadow:
    0 2px 8px rgba(217, 154, 31, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.level-badge-3 i {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4));
}

/* 2 VIP */
.level-badge-2 {
  color: #fff;
  background: linear-gradient(135deg, #581c87 0%, #9333ea 50%, #6b21a8 100%);
  box-shadow:
    0 2px 6px rgba(107, 33, 168, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.level-badge-2 i {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* 1 普通會員：淡化處理，跟其他有質感的等級拉開層次 */
.level-badge-1 {
  color: #57606f;
  background: linear-gradient(135deg, #f4f5f7, #e6e8eb);
  box-shadow: inset 0 0 0 1px rgba(87, 96, 111, 0.25);
  text-shadow: none;
}
.level-badge-1 i {
  opacity: 0.75;
}

/* ── 掃光動畫：只給比較高階的等級 (超管 / VVIP / VIP) 一點細節，
   每 5 秒才滑過一次，安靜、不搶戲 ───────────────────────── */
@keyframes level-badge-sheen {
  0%,
  65% {
    transform: translateX(-140%) skewX(-18deg);
  }
  85%,
  100% {
    transform: translateX(220%) skewX(-18deg);
  }
}

.level-badge-9::after,
.level-badge-3::after,
.level-badge-2::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: level-badge-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .level-badge-9::after,
  .level-badge-3::after,
  .level-badge-2::after {
    animation: none;
  }
}

/* 姓名按鈕 (.member-chip) 和 header 排版 (.member-badge-item) 現在一定會顯示 (不受這個開關限制)，
   樣式移到 system/layout.php 的 show_header() 裡一個永遠會載入的 <style> 區塊，不再放在這份
   有條件才載入的 CSS 檔——這裡只留「等級開關開啟時才需要」的徽章樣式 */