/* ==========================================================================
   婚礼请柬 —— 自定义样式（补充 hunbei 原始样式，不动 hb-app.css）
   ========================================================================== */

html, body { height: 100%; margin: 0; padding: 0; background: #ded6cc; overflow-x: hidden; max-width: 100%; }
#app { position: relative; width: 100%; height: 100%; max-width: 560px; margin: 0 auto;
       background: #fffbf9; box-shadow: 0 0 30px rgba(0,0,0,.18); overflow: hidden; }
#index { position: relative; width: 100%; height: 100%; }

/* ---------- 长页滚动（原生滚动替代原版 transform 自动滚动） ---------- */
#page-list, #page-list .page-item, #page-list .page-item.current {
  display: block !important; visibility: visible !important; opacity: 1 !important;
}
#page-list .page-item { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
#page-list .page-item .page-wrap {
  position: relative; width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
#page-list .page-item .page-wrap::-webkit-scrollbar { width: 0; height: 0; }
#page-list .page-item .scroll-wrap { transform: none !important; transition: none !important; }

/* ---------- 轮播两端：容器左右各留边距，不贴屏幕边（因此不做羽化） ---------- */

/* ---------- 平滑循环轮播（从右往左匀速，含相框） ---------- */
.hb-carousel.hb-smooth { overflow: hidden; }
.hb-carousel.hb-smooth .hb-track {
  display: flex; width: max-content; height: 100%;
  animation: hb-marquee 10s linear infinite;
  will-change: transform;
}
.hb-carousel.hb-smooth-rev .hb-track { animation-direction: reverse; }   /* 反向：从左进入、向右移动 */
.hb-carousel.hb-smooth .hb-slide { flex: 0 0 auto; height: 100%; position: relative; overflow: hidden; }
.hb-carousel.hb-smooth .hb-box { position: relative; height: 100%; margin: 0 auto; }
@keyframes hb-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hb-carousel.hb-smooth .hb-track { animation: none; } }

/* ---------- 横向轮播 ---------- */
.hb-carousel { overflow: hidden; }
.ele-img .rotate-wrap .img-wrap img { object-fit: cover; }
.hb-carousel .hb-swip {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hb-carousel .hb-swip::-webkit-scrollbar { display: none; }
.hb-carousel .hb-slide { position: relative; overflow: hidden; flex: 0 0 100%; width: 100%; height: 100%;
                         scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.hb-carousel .hb-box { position: relative; }
.hb-carousel .hb-box .ani-wrap { width: 100%; height: 100%; }
.hb-carousel .hb-slide img { display: block; width: 100%; height: 100%; object-fit: cover;
                             -webkit-user-drag: none; user-select: none; }
.hb-carousel .hb-dots {
  position: absolute; left: 0; right: 0; bottom: .18rem;
  display: flex; justify-content: center; align-items: center; gap: .12rem; z-index: 3;
  pointer-events: none;
}
.hb-carousel .hb-dot {
  width: .16rem; height: .16rem; border-radius: 50%;
  background: rgba(255,255,255,.6); box-shadow: 0 .02rem .06rem rgba(0,0,0,.35);
  transition: width .2s, background .2s;
}
.hb-carousel .hb-dot.on { width: .38rem; border-radius: .06rem; background: #fff; }

/* ---------- 倒计时 ---------- */
.count-down .hb-count {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: .16rem;
  font-family: PingFang SC, Microsoft Yahei, sans-serif;
}
.count-down .hb-count .hb-unit { display: flex; align-items: baseline; }
.count-down .hb-count .hb-num {
  font-size: .64rem; line-height: 1; font-weight: 600; color: #a33527;
  font-variant-numeric: tabular-nums; min-width: .7rem; text-align: center;
}
.count-down .hb-count .hb-lab { font-size: .3rem; line-height: 1; color: #a33527; margin-left: .06rem; }
.count-down .hb-count .hb-sep { font-size: .5rem; color: #a33527; opacity: .55; }

/* ---------- 音乐按钮 ---------- */
#audio .audio { cursor: pointer; }
#audio.playing .audio { animation: hb-spin 6s linear infinite; }
@keyframes hb-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
#audio:not(.playing) .audio { opacity: .75; }

/* ---------- 拨号 / 地图 悬浮按钮 ---------- */
#page-global .global { cursor: pointer; background: rgba(0,0,0,.32); }

/* ---------- 地图上的“导航”按钮 ---------- */
.element-ditu .hb-nav {
  position: absolute; right: .16rem; bottom: .16rem; z-index: 6;
  display: flex; align-items: center; gap: .08rem;
  padding: .1rem .24rem; border-radius: .32rem;
  background: rgba(0,0,0,.55); color: #fff; font-size: .26rem; line-height: 1;
  font-family: PingFang SC, Microsoft Yahei, sans-serif; cursor: pointer;
}
.element-ditu .hb-nav .iconfont { font-size: .26rem; }

/* ---------- 拨号面板 ---------- */
.hb-sheet-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center;
  max-width: 560px; margin: 0 auto;
}
.hb-sheet {
  width: 100%; background: #fff; border-radius: .32rem .32rem 0 0;
  padding: .5rem .4rem calc(.5rem + env(safe-area-inset-bottom));
  box-sizing: border-box; font-family: PingFang SC, Microsoft Yahei, sans-serif;
}
.hb-sheet h4 { margin: 0 0 .3rem; font-size: .38rem; color: #6c5853; text-align: center; font-weight: 500; }
.hb-sheet a.hb-call {
  display: flex; justify-content: space-between; align-items: center;
  padding: .34rem .3rem; margin-bottom: .2rem; border-radius: .24rem;
  background: #faf4ef; color: #a33527; text-decoration: none; font-size: .34rem;
}
.hb-sheet a.hb-call span.hb-num { color: #6c5853; font-size: .3rem; }
.hb-sheet .hb-sheet-cancel {
  text-align: center; padding: .28rem; font-size: .34rem; color: #888; background: #f2f2f2;
  border-radius: .24rem; margin-top: .08rem;
}

/* ---------- 留言表单 ---------- */
.ele-form input, .ele-form textarea { outline: none; }
.hb-toast {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(0,0,0,.78); color: #fff; padding: .3rem .44rem; border-radius: .2rem;
  font-size: .34rem; z-index: 300; font-family: PingFang SC, Microsoft Yahei, sans-serif;
  max-width: 76vw; text-align: center; line-height: 1.5;
}

/* ---------- 滚动提示（首次进入的轻提示） ---------- */
.hb-hint {
  position: fixed; left: 50%; bottom: .5rem; transform: translateX(-50%);
  z-index: 150; color: #fff; background: rgba(0,0,0,.42);
  padding: .16rem .32rem; border-radius: .3rem; font-size: .28rem;
  font-family: PingFang SC, Microsoft Yahei, sans-serif;
  animation: hb-hint-bob 1.6s ease-in-out infinite; pointer-events: none;
  max-width: 560px;
}
@keyframes hb-hint-bob { 0%,100% { transform: translate(-50%,0) } 50% { transform: translate(-50%,.12rem) } }

/* ---------- 倒计时结束文案 ---------- */
.count-down .hb-finish { width: 100%; text-align: center; font-size: .5rem; color: #a33527;
  font-family: PingFang SC, Microsoft Yahei, sans-serif; }

/* ---------- 隐藏原站白色星星飘落特效（snow） ----------
   这 20 颗白星落在米白纸底上会看成一个"白点"，整层隐藏 */
.effect-wrap { display: none !important; }
/* ---------- （备用）把封面下方那张照片提到封面之上：需要时在生成器里把 RAISE_019 改 True ---------- */