/*!
 * Copyright (c) 掌米数字科技（深圳）有限公司
 * 全站苹果风玻璃弹窗样式
 */

:root {
  --zm-glass-mask: rgba(8, 15, 32, 0.32);
  --zm-glass-panel: rgba(22, 28, 45, 0.36);
  --zm-glass-panel-strong: rgba(255, 255, 255, 0.16);
  --zm-glass-border: rgba(255, 255, 255, 0.28);
  --zm-glass-highlight: rgba(255, 255, 255, 0.42);
  --zm-glass-text: #f7fbff;
  --zm-glass-subtext: rgba(247, 251, 255, 0.78);
  --zm-glass-btn: rgba(255, 255, 255, 0.18);
  --zm-glass-btn-hover: rgba(255, 255, 255, 0.28);
  --zm-glass-primary: linear-gradient(135deg, rgba(122,162,255,.92), rgba(88,126,255,.86));
  --zm-glass-shadow:
    0 30px 80px rgba(15, 23, 42, 0.38),
    0 10px 28px rgba(30, 41, 59, 0.24),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.08);
  --zm-glass-blur: blur(28px) saturate(185%);
  --zm-glass-radius: 26px;
  --zm-glass-z: 999999;
}

.zm-glass-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: var(--zm-glass-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(circle at 20% 20%, rgba(120, 170, 255, 0.18), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(85, 110, 255, 0.16), transparent 28%),
    var(--zm-glass-mask);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: zmGlassMaskIn .22s ease-out;
}

.zm-glass-dialog {
  position: relative;
  width: min(92vw, 540px);
  border-radius: var(--zm-glass-radius);
  color: var(--zm-glass-text);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)),
    linear-gradient(180deg, rgba(25,34,56,0.54), rgba(17,24,39,0.38));
  border: 1px solid var(--zm-glass-border);
  box-shadow: var(--zm-glass-shadow);
  backdrop-filter: var(--zm-glass-blur);
  -webkit-backdrop-filter: var(--zm-glass-blur);
  overflow: hidden;
  transform: translateY(0) scale(1);
  animation: zmGlassPanelIn .24s cubic-bezier(.2,.8,.2,1);
}

.zm-glass-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 32%),
    radial-gradient(circle at top left, rgba(255,255,255,0.22), transparent 28%);
  pointer-events: none;
}

.zm-glass-dialog-inner {
  position: relative;
  padding: 28px 28px 22px;
}

.zm-glass-dialog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #ffffff;
}

.zm-glass-dialog-badge {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #cce0ff, #7aa4ff);
  box-shadow:
    0 0 18px rgba(122, 164, 255, 0.75),
    0 0 5px rgba(255,255,255,0.88);
  flex: 0 0 auto;
}

.zm-glass-dialog-message {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--zm-glass-subtext);
  word-break: break-word;
  white-space: pre-wrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.zm-glass-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 28px 24px;
}

.zm-glass-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  min-width: 112px;
  height: 46px;
  padding: 0 22px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: var(--zm-glass-btn);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 20px rgba(15, 23, 42, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .18s ease;
}

.zm-glass-btn:hover {
  transform: translateY(-1px);
  background: var(--zm-glass-btn-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 14px 28px rgba(15, 23, 42, .18);
}

.zm-glass-btn:active {
  transform: translateY(0);
}

.zm-glass-btn-primary {
  background: var(--zm-glass-primary);
  border-color: rgba(190, 210, 255, .42);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 12px 30px rgba(76, 110, 245, .32);
}

.zm-glass-btn-primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 18px 36px rgba(76, 110, 245, .38);
}

.zm-glass-dialog-mask.zm-glass-leaving {
  animation: zmGlassMaskOut .18s ease forwards;
}

.zm-glass-dialog-mask.zm-glass-leaving .zm-glass-dialog {
  animation: zmGlassPanelOut .18s ease forwards;
}

@keyframes zmGlassMaskIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes zmGlassPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes zmGlassMaskOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes zmGlassPanelOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }
}

@media (max-width: 640px) {
  .zm-glass-dialog {
    width: min(94vw, 94vw);
    border-radius: 22px;
  }

  .zm-glass-dialog-inner {
    padding: 22px 20px 18px;
  }

  .zm-glass-dialog-actions {
    padding: 0 20px 20px;
    gap: 10px;
  }

  .zm-glass-dialog-title {
    font-size: 22px;
  }

  .zm-glass-dialog-message {
    font-size: 16px;
    line-height: 1.7;
  }

  .zm-glass-btn {
    min-width: 96px;
    height: 42px;
    font-size: 15px;
  }
}