/*
  访问弹窗（图在上 / 文字在下 / 底部胶囊按钮）
  前台 index.html 和后台 admin.html 都引入这份，后台「预览效果」才能和线上完全一致。
  变量写死在这里、不依赖各页面 :root，否则后台会拿到自己那套红色主色。
*/

.popup-root {
  --pp-brand: #ffc531;
  --pp-brand2: #ff8a00;
  --pp-on-brand: #3d2700;
  --pp-link: #1a73e8;

  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 0.53333rem 0.48rem;
}
.popup-root.out { animation: pp-fadeout .2s ease forwards; }
.popup-mask {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(0.08rem);
  animation: pp-fade .2s ease;
}

.popup {
  position: relative; width: 100%; max-width: 11.2rem;
  max-height: calc(100vh - 1.06667rem);
  max-height: calc(var(--vh, 1vh) * 100 - 1.06667rem);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 0.42667rem; overflow: hidden;
  box-shadow: 0 0.48rem 1.6rem rgba(0, 0, 0, .45);
  animation: pp-in .26s cubic-bezier(.2, .9, .3, 1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 图片区不许撑高：按比例裁切，图再大也不会把弹窗顶出屏幕 */
.popup .pimg { flex: none; background: #eef2fb; line-height: 0; }
.popup .pimg img {
  display: block; width: 100%; height: auto;
  max-height: 34vh; object-fit: cover; object-position: center;
}

/* 文字区可滚动：内容多的时候只有这块动，按钮永远固定可见 */
.popup .pbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.48rem 0.53333rem 0.16rem;
  color: #1f2329; font-size: 0.4rem; line-height: 1.75;
}
.popup .pbody p { margin: 0 0 0.37333rem; }
.popup .pbody p:last-child { margin-bottom: 0; }
/* 蓝色是与参考图一致，也是通用的「可点」语义色，不用站点主色 */
.popup .pbody .plink { color: var(--pp-link); text-decoration: none; word-break: break-all; }
.popup .pbody .plink:active { opacity: .7; }

.popup .pfoot {
  flex: none; padding: 0.37333rem 0.53333rem calc(0.42667rem + env(safe-area-inset-bottom));
  border-top: 1px solid #eef0f4;
}
.popup .pbtn {
  display: block; width: 100%; height: 1.22667rem;
  border: 0; border-radius: 26.64rem;
  background: linear-gradient(90deg, var(--pp-brand), var(--pp-brand2));
  color: var(--pp-on-brand);
  font-size: 0.42667rem; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
}
.popup .pbtn:active { opacity: .85; }

@keyframes pp-in { from { transform: scale(.92) translateY(0.32rem); opacity: 0; } }
@keyframes pp-fade { from { opacity: 0; } }
@keyframes pp-fadeout { to { opacity: 0; } }