/* =====================================================================
 * 货到付款落地页样式（750 设计稿 rem，缩放见 js/config.js 同级 index 中 rem.js）
 * ===================================================================== */
* { margin: 0; padding: 0; }
li { list-style: none; }
body { font-family: Helvetica, Arial, sans-serif; }
img { display: block; }
.h8 { height: .08rem; }

.wrap { background-color: #f5f5f5; padding-bottom: 1.4rem; }

/* 头部气泡 */
.header-bubble { position: absolute; top: 0; left: .16rem; z-index: 2; height: 1.36rem; overflow: hidden; }
.header-bubble ul { transition: .3s ease; }
.header-bubble ul li { background-color: #fff; font-size: .2rem; display: flex; align-items: center;
  padding: .06rem .2rem .06rem .06rem; border-radius: 1rem; margin-top: .16rem; transition: .3s ease; opacity: .3; scale: .99; }
.header-bubble ul li .avatar { width: .4rem; height: .4rem; border-radius: 50%; margin-right: .12rem;
  background: linear-gradient(135deg, #ffb199, #ff5f4d); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .2rem; flex-shrink: 0; }
.header-bubble ul li.active { opacity: 1; scale: 1; }

/* 轮播 */
.banner { position: relative; }
.banner .slides { position: relative; overflow: hidden; }
.banner .track { display: flex; transition: transform .4s ease; }
.banner .slide { min-width: 100%; height: 7.5rem; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffd8c2, #ffb199); font-size: 1rem; overflow: hidden; }
.banner .slide img { width: 100%; height: 100%; object-fit: cover; }
.banner .dots { position: absolute; bottom: .2rem; left: 0; right: 0; display: flex; justify-content: center; gap: .1rem; }
.banner .dots i { width: .12rem; height: .12rem; border-radius: 50%; background: rgba(255,255,255,.6); }
.banner .dots i.on { background: #fff; }

/* 价格 */
.header-price { display: flex; justify-content: space-between; align-items: center; height: .7rem; padding: .16rem; background: #fff; }
.header-price .left { color: #f61d4a; font-size: .28rem; display: flex; align-items: center; }
.header-price .left .goods-price { font-weight: bold; font-size: .45rem; }
.header-price .left .goods-oldprice { color: #bbb; text-decoration: line-through; font-size: .26rem; padding-left: .15rem; }
.header-price .right { color: #999; font-size: .28rem; }

/* 标题 */
.header-title { padding: .16rem; line-height: .4rem; background: #fff; }
.header-title .icon { float: left; display: flex; margin-right: .1rem; }
.header-title .icon .one { background: #000; color: lightgoldenrodyellow; font-size: small; width: .6rem; text-align: center; }
.header-title .icon .two { background: red; color: #fff; font-size: small; width: .6rem; text-align: center; margin-left: 5px; margin-right: 5px; }
.header-title .text { font-size: .32rem; font-weight: bold; }
.header-title .goods-subtitle { font-size: .24rem; color: #888; line-height: .38rem; padding-top: .06rem; }

/* 补贴标签 */
.subsidy-label { padding: 0 .16rem .16rem; background: #fff; }
.subsidy-label .item { background: #f61d4a; color: #fff; display: flex; justify-content: space-around; align-items: center; height: 1.4rem; border-radius: .3rem; }
.subsidy-label .item .subprice { display: flex; justify-content: center; align-items: flex-end; }
.subsidy-label .item .subprice span:first-child { font-size: .32rem; }
.subsidy-label .item .subprice span:last-child { font-size: .55rem; font-weight: bold; margin-left: .05rem; }
.subsidy-label .item .text div:first-child { font-size: .32rem; margin-bottom: .1rem; }
.subsidy-label .item .text div:last-child { font-size: .24rem; }
.subsidy-label .item .dashed { height: .8rem; border: 1px dashed #fff; }
.subsidy-label .item .submit { font-size: .28rem; }

/* 好友记录 */
.friend-record { border: 1px solid #ff0000; border-radius: .3rem; background: #fff; margin: .16rem; }
.friend-record .top { display: flex; align-items: flex-end; padding: .1rem .2rem; }
.friend-record .top .text { font-size: .28rem; font-weight: bold; }
.friend-record .top .follow { font-size: .2rem; color: #ff0000; margin-left: .26rem; }
.friend-record .list { height: 1.56rem; position: relative; overflow: hidden; padding: 0 .2rem; }
.friend-record .list .label { width: 78%; transition: .5s ease; }
.friend-record .list .item { display: flex; justify-content: space-between; padding-bottom: .04rem; }
.friend-record .list .item .avatar { width: .62rem; height: .62rem; border-radius: 50%;
  background: linear-gradient(135deg, #a8c0ff, #5c7cfa); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .26rem; flex-shrink: 0; }
.friend-record .list .item .center { width: 56%; }
.friend-record .list .item .center .name { font-size: .21rem; }
.friend-record .list .item .center .text { font-size: .21rem; color: #a9a9a9; padding-top: .06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-record .list .item .right { position: relative; padding-top: .14rem; padding-left: .1rem; flex-shrink: 0; }
.friend-record .list .item .right .icon { font-size: .22rem; position: absolute; top: 0; right: 0; padding: .01rem .14rem;
  color: #ff4500; background: #ffd700; border-radius: .2rem .2rem .2rem 0; white-space: nowrap; }

/* 安心买 / 包邮 */
.header-anxin { padding: .18rem .24rem; display: flex; align-items: center; background: #fff; }
.header-anxin .badge { background: forestgreen; color: #fff; font-size: .22rem; padding: .04rem .14rem; border-radius: .08rem; }
.header-anxin span { font-size: .21rem; color: forestgreen; margin-left: .1rem; }
.header-baoyou { padding: .18rem .24rem; font-size: .21rem; background: #fff; }

/* 送礼 */
.give-gift { display: flex; justify-content: space-between; align-items: center; padding: .24rem 0; background: #fff; }
.give-gift .left { font-size: .2rem; padding-left: .2rem; }
.give-gift .left .text { font-size: .32rem; font-weight: bold; margin-right: .14rem; }
.give-gift .right { background: #ff0000; font-size: .22rem; border-radius: 4px; padding: .1rem .36rem .1rem .16rem; color: #fff; }

/* 评价 */
.comment { padding: .2rem .2rem; background: #fff; }
.comment .title { font-size: .3rem; font-weight: bold; }
.comment .item { padding-top: .3rem; }
.comment .item .icon { font-size: .21rem; }
.comment .item .icon span { background: #fff5f6; color: #000; padding: .1rem .16rem; margin-right: .05rem; }
.comment .item .user { display: flex; align-items: center; padding-top: .12rem; }
.comment .item .user .head { font-size: .22rem; width: .44rem; height: .44rem; background: #FFB800; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; color: #fff; }
.comment .item .user .name { font-size: .22rem; margin-left: .16rem; }
.comment .item .content { font-size: .22rem; padding-top: .1rem; line-height: .36rem; }
.comment .list.collapsed .item:nth-child(n+6) { display: none; }
.comment .toggle { display: none; align-items: center; justify-content: center; font-size: .24rem; color: #999; padding: .3rem 0 .1rem; cursor: pointer; }
.comment .toggle i { width: .12rem; height: .12rem; margin-left: .1rem; margin-top: -.06rem; border-right: 1px solid #999;
  border-bottom: 1px solid #999; transform: rotate(45deg); transition: transform .2s; }
.comment .toggle.open i { margin-top: .1rem; transform: rotate(-135deg); }

/* 详情 */
.detail { background: #fff; }
.detail .title { display: flex; justify-content: center; font-size: .34rem; padding: .3rem 0; }
.detail .content img { width: 100%; }

/* 订单区 */
.order { background: #fff; }
.order .title { display: flex; justify-content: center; font-size: .34rem; padding: .1rem 0; }
.order .dianzan { display: flex; align-items: center; justify-content: center; background: #f7f7f7; height: .6rem; font-size: .24rem; }

.form .goods, .form .sku, .form .small-title, .form .fill { padding: 0 .3rem; background: #fff; }
.form .goods { padding-top: .3rem; display: flex; justify-content: space-between; }
.form .goods .thumb { width: 1.6rem; height: 1.6rem; border-radius: .05rem; overflow: hidden;
  background: linear-gradient(135deg, #ffd8c2, #ffb199); display: flex; align-items: center; justify-content: center; font-size: .6rem; }
.form .goods .thumb img { width: 100%; height: 100%; object-fit: cover; }
.form .goods .right { width: 72%; }
.form .goods .right .name p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: .26rem; }
.form .goods .right .name p:first-child { font-weight: bold; }
.form .goods .right .name p.tip { white-space: normal; color: #8b8b8b; font-size: .22rem; }
.form .goods .right .icon { display: flex; margin-top: .1rem; }
.form .goods .right .icon span { font-size: .22rem; color: #FE2448; border: 1px solid #FE2448; padding: .01rem .06rem; }
.form .goods .right .price { display: flex; align-items: flex-end; color: #ff0000; margin-top: .06rem; }
.form .goods .right .price .unit { font-size: .28rem; }
.form .goods .right .price .text { font-size: .46rem; font-weight: bold; }
.form .goods .right .price .oldprice { font-size: .2rem; color: #bbb; text-decoration: line-through; margin-left: .2rem; }

.form .sku { padding-top: .3rem; }
.form .sku .title { font-size: .26rem; }
.form .sku .list { display: flex; flex-wrap: wrap; padding-top: .16rem; }
.form .sku .list .item { font-size: .22rem; padding: .1rem .22rem; border-radius: .05rem; line-height: .4rem;
  background: #f1f1f1; color: #8b8b8b; margin-bottom: .14rem; margin-right: .14rem; }
.form .sku .list .item.action { background: #FE2448; color: #fff; }

.form .fill .item { border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center; }
.form .fill .item .label { font-size: .26rem; width: 20%; flex-shrink: 0; }
.form .fill .item input, .form .fill .item select, .form .fill .item textarea { outline: none; }
.form .fill .item input, .form .fill .item textarea { font-size: .26rem; width: 78%; padding: .2rem 0; border: initial; background: initial; }
.form .fill .item textarea { height: .38rem; resize: none; }
/* 所在地区：自定义三级联动下拉（解决原生 select 在 WebView 中弹层错位的问题） */
.form .fill .item .region { position: relative; width: 78%; padding: .2rem 0; box-sizing: border-box; }
.form .fill .item .region-trigger { display: flex; align-items: center; justify-content: space-between;
  min-height: .5rem; font-size: .24rem; color: #333; padding: .14rem .3rem .14rem .14rem;
  border: 1px solid #e3e3e3; border-radius: .1rem; background: #fafafa; cursor: pointer; box-sizing: border-box; }
.form .fill .item .region-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form .fill .item .region-text.empty { color: #999; }
.form .fill .item .region-caret { width: .16rem; height: .16rem; flex-shrink: 0; margin-left: .12rem;
  border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; transform: rotate(45deg); transition: transform .2s; }
.form .fill .item .region.open .region-caret { transform: rotate(-135deg); }
.form .fill .item .region-panel { position: absolute; top: calc(100% + .06rem); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid #eee; border-radius: .1rem; box-shadow: 0 .1rem .3rem rgba(0,0,0,.12);
  overflow: hidden; display: none; }
.form .fill .item .region.open .region-panel { display: block; }
.form .fill .item .region-tabs { display: flex; border-bottom: 1px solid #f0f0f0; }
.form .fill .item .region-tabs .tab { flex: 1; text-align: center; font-size: .24rem; color: #999;
  padding: .18rem 0; border-bottom: 2px solid transparent; cursor: pointer; }
.form .fill .item .region-tabs .tab.active { color: #f61d4a; border-bottom-color: #f61d4a; font-weight: bold; }
.form .fill .item .region-cols { display: flex; max-height: 4.4rem; }
.form .fill .item .region-col { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-right: 1px solid #f5f5f5; }
.form .fill .item .region-col:last-child { border-right: none; }
.form .fill .item .region-col li { font-size: .24rem; color: #333; padding: .2rem .08rem; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.form .fill .item .region-col li.active { color: #f61d4a; background: #fff5f6; font-weight: bold; }
.form .fill .item .region-col li:active { background: #f5f5f5; }
.form .fill .item .price { font-size: .3rem; padding: .2rem 0; }
.form .fill .item .red { color: #ff0000; }

.form .pay-select { padding: .2rem .3rem 0; background: #fff; }
.form .pay-select .title { font-size: .26rem; }
.form .pay-select .list { padding-top: .1rem; }
.form .pay-select .list .item { display: flex; justify-content: space-between; align-items: center; padding: .24rem 0; }
.form .pay-select .list .item .left { font-size: .26rem; display: flex; align-items: center; }
.form .pay-select .list .item .left .payicon { width: .54rem; height: .54rem; margin-right: .1rem; border-radius: .1rem;
  background: #fff1ea; color: #ff5f4d; display: flex; align-items: center; justify-content: center; font-size: .3rem; }
.form .pay-select .list .item .radio { width: .34rem; height: .34rem; background: #ff0000; border-radius: 50%; position: relative; }
.form .pay-select .list .item .radio::before { content: ''; width: 8%; height: 30%; background: #fff; position: absolute; top: 47%; left: 35%; transform: rotate(-45deg); }
.form .pay-select .list .item .radio::after { content: ''; width: 8%; height: 50%; background: #fff; position: absolute; top: 30%; right: 34%; transform: rotate(43deg); }

.form .inventory-hint { background: #fff8cc; padding: .2rem .3rem; display: flex; justify-content: space-between; margin-top: .2rem; }
.form .inventory-hint .left { font-size: .22rem; color: #ff0000; }
.form .inventory-hint .left::before { content: '*'; color: #ff0000; }
.form .inventory-hint .right { display: flex; align-items: center; font-size: .22rem; color: #ff0000; }

.form .submit { padding: .3rem .2rem 0; background: #fff; }
.form .submit .btn { width: 100%; height: 1rem; background: #ff0000; color: #fff; font-size: .4rem; border-radius: .1rem;
  display: flex; justify-content: center; align-items: center; border: none; }
.form .submit .privacy { padding-top: .2rem; font-size: .22rem; color: #999; display: flex; align-items: center; }
.form .submit .privacy input { margin-right: .1rem; }
.form .submit .privacy span { color: #3B6BE7; }
.form .submit .icp { font-size: .14rem; color: #aaa; text-align: center; padding: .4rem 0; }

.toast { position: fixed; top: 45%; left: 50%; transform: translateX(-50%); padding: .125rem .25rem; color: #fff;
  border-radius: .06rem; background: rgba(0,0,0,.5); font-size: .25rem; z-index: 130; display: none; }

/* 底部导航（无联系客服） */
.bottomNav { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; z-index: 10; }
.bottomNav .remind { width: 62%; height: .64rem; background: linear-gradient(90deg, #fff6e3, #ffe8c4);
  border: 1px solid #ffd9a0; box-shadow: 0 3px 10px rgba(230,150,40,.18);
  display: flex; align-items: center; justify-content: center;
  border-radius: .32rem; margin-bottom: .14rem; position: relative; overflow: hidden; font-size: .22rem; }
.bottomNav .remind-icon { font-size: .28rem; margin-right: .1rem; flex-shrink: 0; animation: firePulse 1.2s ease-in-out infinite; }
@keyframes firePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.bottomNav .remind .flip { position: absolute; left: .55rem; right: .16rem; top: 0; bottom: 0; }
.bottomNav .remind .flip .t1, .bottomNav .remind .flip .t2 {
  position: absolute; left: 0; right: 0; top: 50%; text-align: center;
  color: #b25c00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .08rem; }
.bottomNav .remind .flip .t1 { animation: remindA 5s ease-in-out infinite; }
.bottomNav .remind .flip .t2 { animation: remindB 5s ease-in-out infinite; }
.bottomNav .remind .flip .red { color: #f61d4a; font-weight: bold; font-size: .25rem; padding: 0 .04rem; }
@keyframes remindA {
  0%, 42% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%, 100% { opacity: 0; transform: translateY(-115%) scale(.95); } }
@keyframes remindB {
  0%, 42% { opacity: 0; transform: translateY(15%) scale(.95); }
  50%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
.bottomNav .bottom { width: 100%; display: flex; }
.bottomNav .bottom .submit { width: 100%; padding: .23rem 0; font-size: .32rem; display: flex; justify-content: center;
  background: #f61d4a; color: #fff; border: none; }

/* 订单区悬浮提交栏：进入地址填写区后出现，避免填完还要往下拉 */
.formBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center;
  padding: .16rem .24rem calc(.16rem + env(safe-area-inset-bottom, 0));
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -.04rem .24rem rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translateY(110%); opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.22, .61, .36, 1), opacity .18s ease; }
.formBar.show { transform: translateY(calc(-1 * var(--kb, 0px))); opacity: 1; pointer-events: auto; }
.formBar .price { flex: 1; min-width: 0; display: flex; align-items: baseline; }
.formBar .price .label { font-size: .22rem; color: #888; margin-right: .12rem; flex-shrink: 0; }
.formBar .price .amount { color: #f61d4a; font-size: .42rem; font-weight: bold; line-height: 1; }
.formBar .price .amount small { font-size: .24rem; font-weight: normal; margin-right: .02rem; }
.formBar .btn { flex-shrink: 0; min-width: 2.9rem; height: .82rem; padding: 0 .36rem;
  border-radius: .41rem; background: linear-gradient(135deg, #ff6a3d, #f61d4a);
  color: #fff; font-size: .3rem; font-weight: bold; letter-spacing: .02rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .06rem .18rem rgba(246, 29, 74, .3); transition: transform .12s ease; }
.formBar .btn:active { transform: scale(.97); }

/* 下单成功弹层 */
.success-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
  display: none; align-items: center; justify-content: center; }
.success-mask.show { display: flex; }
.success-card { width: 82%; max-width: 5.4rem; background: #fff; border-radius: .24rem;
  padding: .48rem .32rem .36rem; text-align: center; }
.success-icon { width: 1.1rem; height: 1.1rem; margin: 0 auto .24rem; border-radius: 50%;
  background: linear-gradient(135deg, #2fc5c2, #16c784); color: #fff; font-size: .62rem;
  display: flex; align-items: center; justify-content: center; }
.success-title { font-size: .4rem; font-weight: bold; }
.success-desc { font-size: .24rem; color: #888; margin-top: .12rem; }
.success-info { margin: .32rem 0 .24rem; background: #f8f9fc; border-radius: .16rem; padding: .08rem .24rem; text-align: left; }
.success-info .srow { display: flex; justify-content: space-between; padding: .16rem 0;
  border-bottom: 1px solid #eef0f5; font-size: .24rem; }
.success-info .srow:last-child { border-bottom: none; }
.success-info .srow span:first-child { color: #999; flex-shrink: 0; margin-right: .2rem; }
.success-info .srow span:last-child { text-align: right; word-break: break-all; }
.success-info .red { color: #ff0000; font-weight: bold; }
.success-tip { font-size: .22rem; color: #ffb400; background: #fff8e6; border-radius: .12rem; padding: .12rem .16rem; }
.success-btn { margin-top: .32rem; height: .88rem; line-height: .88rem; background: linear-gradient(90deg, #f61d4a, #ff8a3d);
  color: #fff; font-size: .32rem; border-radius: .44rem; }

/* 返回联动弹窗（优惠券 / 企业微信）：居中、半透明遮罩、右上角关闭 */
.pop-mask { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; padding: .6rem .48rem; box-sizing: border-box; }
.pop-mask.show { display: flex; animation: popMaskIn .25s ease both; }
.pop-card { position: relative; width: 100%; max-width: 420px; max-height: 100%; }
.pop-mask.show .pop-card { animation: popCardIn .55s cubic-bezier(.22, 1.2, .36, 1) both; }

/* 优惠券弹窗：拼多多式挽留文案 + 动效 */
.pop-leave { text-align: center; padding: 0 .12rem .22rem; }
.pop-leave-text { font-size: .46rem; font-weight: 700; color: #fff; letter-spacing: .02rem;
  text-shadow: 0 .04rem .12rem rgba(0,0,0,.4); animation: popTipPulse 1.2s ease-in-out infinite; }
.pop-leave-sub { margin-top: .1rem; font-size: .27rem; color: #ffe9a8; }
.pop-leave-sub .pop-amount { display: inline-block; padding: 0 .06rem; font-size: .42rem; font-weight: 700;
  color: #ffe23d; text-shadow: 0 0 .12rem rgba(255,226,61,.85); animation: popAmountBeat .8s ease-in-out infinite; }
.pop-leave::after { content: ''; display: block; width: 0; height: 0; margin: .1rem auto 0;
  border-left: .13rem solid transparent; border-right: .13rem solid transparent;
  border-top: .15rem solid #ffe23d; animation: popArrowBounce 1s ease-in-out infinite; }
/* 多了文案后收紧图片高度，避免小屏溢出 */
.pop-card-coupon .pop-body img,
.pop-card-wechat .pop-body img { max-height: 64vh; }
.pop-card-coupon.img-failed .pop-body,
.pop-card-wechat.img-failed .pop-body { min-height: 3.2rem; }

@keyframes popMaskIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popCardIn {
  0% { opacity: 0; transform: scale(.62) translateY(.5rem); }
  60% { opacity: 1; transform: scale(1.05) translateY(0); }
  78% { transform: scale(.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes popTipPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes popAmountBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes popArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.08rem); } }

@media (prefers-reduced-motion: reduce) {
  .pop-mask.show, .pop-mask.show .pop-card, .pop-leave-text,
  .pop-leave-sub .pop-amount, .pop-leave::after { animation: none; }
}
.pop-body { background: #fff; border-radius: .16rem; overflow: hidden; cursor: pointer; }
.pop-body img { width: 100%; max-height: 76vh; object-fit: contain; }
/* 图片加载失败时保留弹窗与关闭按钮，避免空白塌陷 */
.pop-card.img-failed .pop-body { min-height: 4rem; }
.pop-close { position: absolute; top: -.16rem; right: -.16rem; width: .6rem; height: .6rem; padding: 0;
  border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .42rem;
  line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
body.pop-lock { overflow: hidden; }