/* public/assets/test/css/partials/home-coupon-popup.css */
/* Coupon Popup V6 - refined art / outer coins */

body.fmcpp-lock{
  overflow: hidden !important;
}

#fm_coupon_popup3,
#fm_coupon_popup3 *{
  box-sizing: border-box;
}

#fm_coupon_popup3.fmcpp{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;

  display: none;
  align-items: center !important;
  justify-content: center !important;

  width: 100vw !important;
  height: 100vh !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 20px !important;

  pointer-events: none;
  isolation: isolate;
}

#fm_coupon_popup3.fmcpp.is-open{
  display: flex !important;
  pointer-events: auto;
}

#fm_coupon_popup3 .fmcpp-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .36);
  opacity: 0;
  transition: opacity .2s ease;
}

#fm_coupon_popup3.is-open .fmcpp-backdrop{
  opacity: 1;
}

#fm_coupon_popup3 .fmcpp-dialog{
  position: relative;
  z-index: 2;
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: 0 auto !important;

  transform: translateY(10px) scale(.97);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

#fm_coupon_popup3.is-open .fmcpp-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

#fm_coupon_popup3 .fmcpp-close{
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 8;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#fm_coupon_popup3 .fmcpp-close span{
  display: block;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-1px);
}

/* 外侧装饰 */
#fm_coupon_popup3 .fmcpp-sidefx{
  position: absolute;
  bottom: 22px;
  width: 120px;
  height: 180px;
  z-index: 0;
  pointer-events: none;
}

#fm_coupon_popup3 .fmcpp-sidefx--left{
  left: -92px;
}

#fm_coupon_popup3 .fmcpp-sidefx--right{
  right: -92px;
}

#fm_coupon_popup3 .fmcpp-sidefx__coin{
  position: absolute;
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8d4 0%, #ffe89a 24%, #ffd645 60%, #f3bd14 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.72),
    0 6px 14px rgba(248, 186, 15, .24);
}

#fm_coupon_popup3 .fmcpp-sidefx--left .fmcpp-sidefx__coin.is-a{
  width: 28px;
  height: 18px;
  left: 50px;
  top: 20px;
  transform: rotate(38deg);
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__coin.is-a{
  width: 42px;
  height: 26px;
  left: 0;
  top: 86px;
  transform: rotate(-28deg);
}

#fm_coupon_popup3 .fmcpp-sidefx__dot{
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #edf0b3;
}

#fm_coupon_popup3 .fmcpp-sidefx__dot.is-a{
  width: 7px;
  height: 7px;
  left: 38px;
  top: 2px;
}

#fm_coupon_popup3 .fmcpp-sidefx__dot.is-b{
  width: 7px;
  height: 7px;
  left: 34px;
  top: 120px;
  background: #f0ef5d;
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__dot.is-a{
  left: 92px;
  top: 38px;
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__dot.is-b{
  left: 70px;
  top: 104px;
  background: #c8ea56;
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__dot.is-c{
  width: 11px;
  height: 11px;
  left: 10px;
  top: 134px;
  background: #53d1f5;
}

#fm_coupon_popup3 .fmcpp-sidefx__spark{
  position: absolute;
  left: 74px;
  top: 82px;
  width: 18px;
  height: 18px;
  background: #ffe27d;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: .96;
}

#fm_coupon_popup3 .fmcpp-sidefx__line{
  position: absolute;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,235,164,0), rgba(255,234,171,.75), rgba(255,235,164,0));
  filter: blur(.4px);
  transform-origin: center;
}

#fm_coupon_popup3 .fmcpp-sidefx--left .fmcpp-sidefx__line.is-a{
  width: 60px;
  left: 36px;
  top: 58px;
  transform: rotate(-17deg);
}

#fm_coupon_popup3 .fmcpp-sidefx--left .fmcpp-sidefx__line.is-b{
  width: 88px;
  left: 4px;
  top: 138px;
  transform: rotate(-16deg);
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__line.is-a{
  width: 54px;
  left: 14px;
  top: 108px;
  transform: rotate(-6deg);
}

#fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__line.is-b{
  width: 112px;
  left: -4px;
  top: 152px;
  transform: rotate(14deg);
}

/* 主体 */
#fm_coupon_popup3 .fmcpp-panel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffcb18 0%, #f6cf2c 57%, #f7efd6 57%, #f7efd6 100%);
  box-shadow:
    0 22px 54px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.52);
}

#fm_coupon_popup3 .fmcpp-top{
  position: relative;
  padding: 16px 16px 12px;
}

#fm_coupon_popup3 .fmcpp-top::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events: none;
}

#fm_coupon_popup3 .fmcpp-ticket-list{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(42vh, 340px);
  overflow: auto;
  padding-right: 2px;
}

#fm_coupon_popup3 .fmcpp-ticket{
  position: relative;
}

#fm_coupon_popup3 .fmcpp-ticket-shell{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 10px 20px rgba(185, 114, 0, .10),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#fm_coupon_popup3 .fmcpp-ticket-shell::before,
#fm_coupon_popup3 .fmcpp-ticket-shell::after{
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f4c915;
  z-index: 2;
}

#fm_coupon_popup3 .fmcpp-ticket-shell::before{ left: -8px; }
#fm_coupon_popup3 .fmcpp-ticket-shell::after{ right: -8px; }

#fm_coupon_popup3 .fmcpp-ticket-body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  min-height: 112px;
}

#fm_coupon_popup3 .fmcpp-ticket-main{
  padding: 12px 16px 10px 18px;
}

#fm_coupon_popup3 .fmcpp-ticket-value-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

#fm_coupon_popup3 .fmcpp-ticket-value{
  color: #ff5a0a;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.01em;
}

#fm_coupon_popup3 .fmcpp-ticket-sub{
  color: #ff8a2a;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

#fm_coupon_popup3 .fmcpp-ticket-rule{
  margin-top: 7px;
  color: #69707e;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
}

#fm_coupon_popup3 .fmcpp-ticket-title{
  margin-top: 8px;
  color: #161616;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  word-break: break-word;
}

/* 右侧礼包区 */
#fm_coupon_popup3 .fmcpp-ticket-art{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, #fffaf0 0%, #fff3df 100%);
}

#fm_coupon_popup3 .fmcpp-ticket-art::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 0 49%, rgba(245, 233, 207, .78) 49% 100%);
}

#fm_coupon_popup3 .fmcpp-art-coin{
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe47d 0%, #ffbf10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 4px 10px rgba(255,185,0,.22);
}

#fm_coupon_popup3 .fmcpp-art-coin.is-1{
  width: 18px;
  height: 18px;
  left: 20px;
  top: 8px;
}

#fm_coupon_popup3 .fmcpp-art-gem{
  position: absolute;
  right: 14px;
  top: 8px;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #6fe3ff 0%, #2587ff 100%);
  clip-path: polygon(50% 0%, 100% 30%, 78% 100%, 22% 100%, 0% 30%);
}

#fm_coupon_popup3 .fmcpp-art-salecard{
  position: absolute;
  left: 50px;
  top: 28px;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe5d4 0%, #ffd6c1 100%);
  transform: rotate(-16deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

#fm_coupon_popup3 .fmcpp-art-salecard::before{
  content: "8%";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7b45;
  font-size: 10px;
  font-weight: 900;
}

#fm_coupon_popup3 .fmcpp-art-token{
  position: absolute;
  right: 32px;
  top: 26px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #423108 0 18%, #111 19% 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

#fm_coupon_popup3 .fmcpp-art-token::before{
  content: "FM";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd84a;
  font-size: 8px;
  font-weight: 900;
}

#fm_coupon_popup3 .fmcpp-art-flower{
  position: absolute;
  left: 76px;
  top: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 6%, #f7d3ff 0 24%, transparent 25%),
    radial-gradient(circle at 94% 50%, #9fe1ff 0 24%, transparent 25%),
    radial-gradient(circle at 50% 94%, #c6e7ff 0 24%, transparent 25%),
    radial-gradient(circle at 6% 50%, #5ca8ff 0 24%, transparent 25%),
    radial-gradient(circle at 50% 50%, #ffffff 0 18%, #6bb0ff 19% 25%, transparent 26%);
  transform: rotate(-10deg);
}

#fm_coupon_popup3 .fmcpp-art-box{
  position: absolute;
  right: 26px;
  bottom: 18px;
  width: 72px;
  height: 48px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffc05a 0%, #ff844a 66%, #f25931 100%);
  box-shadow:
    0 8px 16px rgba(255,123,35,.20),
    inset 0 -4px 0 rgba(0,0,0,.06);
  transform: skewX(-10deg);
}

#fm_coupon_popup3 .fmcpp-art-box::before{
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -14px;
  height: 18px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #ffd08a 0%, #ff9b4d 100%);
  transform: skewX(14deg);
}

#fm_coupon_popup3 .fmcpp-art-gamecard{
  position: absolute;
  left: 30px;
  bottom: 8px;
  width: 30px;
  height: 16px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, #ebe6df 0 40%, #f5c77a 40% 62%, #6dd0ff 62% 82%, #3c5e94 82% 100%);
  transform: rotate(-18deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

#fm_coupon_popup3 .fmcpp-art-gamecard::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid #7b7b7b;
}

#fm_coupon_popup3 .fmcpp-art-gift{
  position: absolute;
  right: -4px;
  bottom: 8px;
  width: 46px;
  height: 40px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, #ffe25d 0%, #ffc71f 100%);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05);
}

#fm_coupon_popup3 .fmcpp-art-gift::before,
#fm_coupon_popup3 .fmcpp-art-gift::after{
  content: "";
  position: absolute;
  background: #ffcf2b;
}

#fm_coupon_popup3 .fmcpp-art-gift::before{
  left: 12px;
  top: 8px;
  width: 6px;
  height: 20px;
  border-radius: 2px;
}

#fm_coupon_popup3 .fmcpp-art-gift::after{
  left: 6px;
  top: 10px;
  width: 24px;
  height: 5px;
  border-radius: 2px;
}

#fm_coupon_popup3 .fmcpp-ticket-foot{
  position: relative;
  padding: 9px 18px 10px;
  border-top: 1px dashed #e5ddcf;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
}

#fm_coupon_popup3 .fmcpp-ticket-expire{
  display: inline-flex;
  align-items: center;
}

#fm_coupon_popup3 .fmcpp-bottom{
  position: relative;
  padding: 20px 16px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,212,74,.18), transparent 18%),
    radial-gradient(circle at 12% 82%, rgba(255,212,74,.10), transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

#fm_coupon_popup3 .fmcpp-bottom::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 36px;
  background: #f7efd6;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

#fm_coupon_popup3 .fmcpp-bottom::after{
  content: "";
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 68px;
  height: 24px;
  background-image: radial-gradient(circle, rgba(244,197,61,.42) 1.2px, transparent 1.3px);
  background-size: 10px 10px;
  opacity: .82;
  pointer-events: none;
}

#fm_coupon_popup3 .fmcpp-summary{
  position: relative;
  z-index: 1;
  margin: 0;
  color: #111827;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.2;
  font-weight: 900;
}

#fm_coupon_popup3 .fmcpp-note{
  position: relative;
  z-index: 1;
  margin: 8px auto 0;
  max-width: 540px;
  color: rgba(17,24,39,.62);
  font-size: 11px;
  line-height: 1.6;
}

#fm_coupon_popup3 .fmcpp-ack{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  width: min(260px, 100%);
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #05070b;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  transition: transform .16s ease, box-shadow .16s ease;
}

#fm_coupon_popup3 .fmcpp-ack:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,.16);
}

@media (max-width: 860px){
  #fm_coupon_popup3.fmcpp{
    padding: 14px !important;
  }

  #fm_coupon_popup3 .fmcpp-dialog{
    width: min(360px, calc(100vw - 28px));
    max-width: 360px;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
  }

  #fm_coupon_popup3 .fmcpp-close{
    top: -8px;
    right: -8px;
    width: 30px;
    height: 30px;
  }

  #fm_coupon_popup3 .fmcpp-close span{
    font-size: 21px;
  }

  #fm_coupon_popup3 .fmcpp-sidefx{
    width: 76px;
    height: 120px;
    bottom: 26px;
  }

  #fm_coupon_popup3 .fmcpp-sidefx--left{ left: -56px; }
  #fm_coupon_popup3 .fmcpp-sidefx--right{ right: -56px; }

  #fm_coupon_popup3 .fmcpp-sidefx--left .fmcpp-sidefx__coin.is-a{
    width: 18px;
    height: 12px;
    left: 34px;
    top: 20px;
  }

  #fm_coupon_popup3 .fmcpp-sidefx--right .fmcpp-sidefx__coin.is-a{
    width: 28px;
    height: 18px;
    left: 0;
    top: 58px;
  }

  #fm_coupon_popup3 .fmcpp-sidefx__spark{
    left: 46px;
    top: 56px;
    width: 13px;
    height: 13px;
  }

  #fm_coupon_popup3 .fmcpp-sidefx__line.is-a{ height: 4px; }
  #fm_coupon_popup3 .fmcpp-sidefx__line.is-b{ height: 4px; }

  #fm_coupon_popup3 .fmcpp-top{
    padding: 12px 12px 8px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-list{
    gap: 8px;
    max-height: min(40vh, 270px);
  }

  #fm_coupon_popup3 .fmcpp-ticket-body{
    grid-template-columns: minmax(0, 1fr) 110px;
    min-height: 88px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-main{
    padding: 10px 12px 8px 12px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-value-row{
    gap: 6px;
    margin-top: 2px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-value{
    font-size: 14px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-sub{
    font-size: 9px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-rule{
    margin-top: 5px;
    font-size: 10px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-title{
    margin-top: 6px;
    font-size: 11px;
  }

  #fm_coupon_popup3 .fmcpp-ticket-foot{
    padding: 8px 12px 9px;
    font-size: 10px;
  }

  #fm_coupon_popup3 .fmcpp-art-coin.is-1{
    width: 12px;
    height: 12px;
    left: 10px;
    top: 6px;
  }

  #fm_coupon_popup3 .fmcpp-art-gem{
    width: 12px;
    height: 12px;
    right: 8px;
    top: 6px;
  }

  #fm_coupon_popup3 .fmcpp-art-salecard{
    left: 28px;
    top: 18px;
    width: 18px;
    height: 14px;
  }

  #fm_coupon_popup3 .fmcpp-art-salecard::before{
    font-size: 7px;
  }

  #fm_coupon_popup3 .fmcpp-art-token{
    right: 18px;
    top: 16px;
    width: 18px;
    height: 18px;
  }

  #fm_coupon_popup3 .fmcpp-art-token::before{
    font-size: 5px;
  }

  #fm_coupon_popup3 .fmcpp-art-flower{
    left: 42px;
    top: 18px;
    width: 24px;
    height: 24px;
  }

  #fm_coupon_popup3 .fmcpp-art-box{
    right: 14px;
    bottom: 10px;
    width: 42px;
    height: 30px;
  }

  #fm_coupon_popup3 .fmcpp-art-box::before{
    left: 6px;
    right: 6px;
    top: -8px;
    height: 12px;
  }

  #fm_coupon_popup3 .fmcpp-art-gamecard{
    left: 14px;
    bottom: 7px;
    width: 18px;
    height: 10px;
  }

  #fm_coupon_popup3 .fmcpp-art-gamecard::before{
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
  }

  #fm_coupon_popup3 .fmcpp-art-gift{
    right: -2px;
    bottom: 6px;
    width: 28px;
    height: 25px;
  }

  #fm_coupon_popup3 .fmcpp-art-gift::before{
    left: 8px;
    top: 5px;
    width: 4px;
    height: 13px;
  }

  #fm_coupon_popup3 .fmcpp-art-gift::after{
    left: 4px;
    top: 7px;
    width: 16px;
    height: 4px;
  }

  #fm_coupon_popup3 .fmcpp-bottom{
    padding: 16px 12px 12px;
  }

  #fm_coupon_popup3 .fmcpp-bottom::before{
    top: -16px;
    height: 32px;
  }

  #fm_coupon_popup3 .fmcpp-bottom::after{
    right: 12px;
    bottom: 8px;
    width: 48px;
    height: 16px;
    background-size: 8px 8px;
  }

  #fm_coupon_popup3 .fmcpp-summary{
    font-size: 16px;
  }

  #fm_coupon_popup3 .fmcpp-note{
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.45;
  }

  #fm_coupon_popup3 .fmcpp-ack{
    margin-top: 12px;
    width: 100%;
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
  }
}







/* =========================================================
   Envelope reveal animation - same size before/after
   blade / js 保持不动，只替换这段 css
   ========================================================= */

#fm_coupon_popup3 .fmcpp-dialog{
  overflow: visible;
}

#fm_coupon_popup3 .fmcpp-envelope{
  position: relative;
  width: 100%;
  min-height: 0;
}

/* 优惠券本体：和最终尺寸完全一致，只做轻微上浮，不缩放 */
#fm_coupon_popup3 .fmcpp-env-paper{
  position: relative;
  z-index: 3;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .28s cubic-bezier(.2,.82,.2,1),
    opacity .18s ease;
}

#fm_coupon_popup3.is-letter-out .fmcpp-env-paper{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 外侧金币装饰：等券出来后再显示 */
#fm_coupon_popup3 .fmcpp-sidefx{
  opacity: 0;
  transition: opacity .14s ease;
}

#fm_coupon_popup3.is-letter-out .fmcpp-sidefx{
  opacity: 1;
}

/* ===== 信封与券同尺寸 ===== */
#fm_coupon_popup3{
  --fmcpp-env-radius: 18px;
}

/* 阴影 */
#fm_coupon_popup3 .fmcpp-env-shadow{
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 18px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.08) 42%,
    rgba(0,0,0,0) 74%
  );
  z-index: 0;
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity .18s ease,
    transform .22s ease;
}

/* 信封后壳：整张券同宽同高 */
#fm_coupon_popup3 .fmcpp-env-back{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  border-radius: var(--fmcpp-env-radius);
  background:
    linear-gradient(180deg, #ffe57e 0%, #f8cf23 100%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.38);
  transition: opacity .16s ease;
}

#fm_coupon_popup3 .fmcpp-env-back::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fmcpp-env-radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%);
}

/* 信封内部折面 */
#fm_coupon_popup3 .fmcpp-env-back::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 53%;
  border-radius: 0 0 var(--fmcpp-env-radius) var(--fmcpp-env-radius);
  background:
    linear-gradient(180deg, #ffd94d 0%, #f3c411 100%);
  clip-path: polygon(0 0, 50% 66%, 100% 0, 100% 100%, 0 100%);
}

/* 信封前口袋：覆盖底部，打开时下滑一点 */
#fm_coupon_popup3 .fmcpp-env-front{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 0 var(--fmcpp-env-radius) var(--fmcpp-env-radius);
  background:
    linear-gradient(180deg, #ffd94b 0%, #f4c612 100%);
  clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(0);
  transition:
    transform .24s cubic-bezier(.2,.82,.2,1),
    opacity .16s ease;
}

/* 上盖：就在顶部，翻起，不乱飞 */
#fm_coupon_popup3 .fmcpp-env-flap{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 47%;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  background:
    linear-gradient(180deg, #ffeb8d 0%, #f8cf24 100%);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40);
  will-change: transform, opacity;
  transition:
    transform .28s cubic-bezier(.2,.82,.2,1),
    opacity .14s ease;
}

#fm_coupon_popup3 .fmcpp-env-flap::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  clip-path: polygon(0 0, 100% 0, 50% 78%);
}

/* 封口圆点 */
#fm_coupon_popup3 .fmcpp-env-seal{
  position: absolute;
  left: 50%;
  top: calc(47% - 11px);
  width: 22px;
  height: 22px;
  margin-left: -11px;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, #fff3ae 0%, #ffd95d 50%, #efb80c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 3px 8px rgba(0,0,0,.10);
  transition: opacity .12s ease;
}

/* 第一段：信封出现（和最终尺寸一致） */
#fm_coupon_popup3.is-envelope-show .fmcpp-env-shadow{
  opacity: 1;
  transform: scale(1);
}

#fm_coupon_popup3.is-envelope-show .fmcpp-env-back,
#fm_coupon_popup3.is-envelope-show .fmcpp-env-front,
#fm_coupon_popup3.is-envelope-show .fmcpp-env-flap,
#fm_coupon_popup3.is-envelope-show .fmcpp-env-seal{
  opacity: 1;
}

/* 第二段：翻盖打开 */
#fm_coupon_popup3.is-envelope-open .fmcpp-env-flap{
  transform: rotateX(-160deg);
}

/* 第二段同时：下口袋轻微下移，像“打开” */
#fm_coupon_popup3.is-envelope-open .fmcpp-env-front{
  transform: translateY(10px);
}

/* 第三段：信封淡出，券显现 */
#fm_coupon_popup3.is-letter-out .fmcpp-env-back,
#fm_coupon_popup3.is-letter-out .fmcpp-env-front,
#fm_coupon_popup3.is-letter-out .fmcpp-env-flap,
#fm_coupon_popup3.is-letter-out .fmcpp-env-seal{
  opacity: 0;
}

/* ===== Mobile ===== */
@media (max-width: 860px){
  #fm_coupon_popup3{
    --fmcpp-env-radius: 12px;
  }

  #fm_coupon_popup3 .fmcpp-env-paper{
    transform: translateY(10px);
  }

  #fm_coupon_popup3.is-letter-out .fmcpp-env-paper{
    transform: translateY(0);
  }

  #fm_coupon_popup3 .fmcpp-env-shadow{
    left: 20px;
    right: 20px;
    bottom: 12px;
    height: 18px;
  }

  #fm_coupon_popup3 .fmcpp-env-front{
    height: 42%;
  }

  #fm_coupon_popup3 .fmcpp-env-flap{
    height: 45%;
    clip-path: polygon(0 0, 100% 0, 50% 80%);
  }

  #fm_coupon_popup3 .fmcpp-env-flap::before{
    clip-path: polygon(0 0, 100% 0, 50% 80%);
  }

  #fm_coupon_popup3 .fmcpp-env-seal{
    width: 16px;
    height: 16px;
    margin-left: -8px;
    top: calc(45% - 8px);
  }

  #fm_coupon_popup3.is-envelope-open .fmcpp-env-front{
    transform: translateY(6px);
  }
}



/* =========================
   Envelope folds stronger
   追加在 home-coupon-popup.css 最后
   ========================= */

/* 信封整体层次更明显 */
#fm_coupon_popup3 .fmcpp-env-back{
  box-shadow:
    0 16px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -10px 18px rgba(230, 170, 0, .10);
}

/* 背板下三角折面更明显 */
#fm_coupon_popup3 .fmcpp-env-back::after{
  background:
    linear-gradient(180deg, #ffd94d 0%, #f3c411 100%);
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,.10),
    inset 0 -10px 16px rgba(214, 146, 0, .12);
  filter: saturate(1.04);
}

/* 前口袋本身加一点立体感 */
#fm_coupon_popup3 .fmcpp-env-front{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 10px 16px rgba(255,255,255,.05),
    inset 0 -8px 14px rgba(205, 144, 0, .10);
}

/* ✅ 前口袋折痕：左/右两条对角折线 */
#fm_coupon_popup3 .fmcpp-env-front::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(141deg,
      transparent 47.6%,
      rgba(255,255,255,.28) 48.2%,
      rgba(218,156,0,.18) 49.3%,
      transparent 50.2%),
    linear-gradient(219deg,
      transparent 47.6%,
      rgba(255,255,255,.28) 48.2%,
      rgba(218,156,0,.18) 49.3%,
      transparent 50.2%);
  opacity: .95;
}

/* 中间那条竖向折痕/压线 */
#fm_coupon_popup3 .fmcpp-env-front::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  bottom: 8%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(255,255,255,.36) 0%,
    rgba(227,170,13,.38) 48%,
    rgba(255,255,255,.14) 100%);
  border-radius: 999px;
  opacity: .52;
  box-shadow: 0 0 8px rgba(255, 214, 91, .16);
}

/* 上盖更像“纸翻开”，边缘线和阴影明显一些 */
#fm_coupon_popup3 .fmcpp-env-flap{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -8px 14px rgba(212, 145, 0, .10),
    0 8px 16px rgba(0,0,0,.06);
}

/* 上盖中线 / 折线高光 */
#fm_coupon_popup3 .fmcpp-env-flap::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 18%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(255,255,255,.38),
    rgba(231,174,18,.28));
  border-radius: 999px;
  opacity: .48;
}

/* 封口圆点更立体 */
#fm_coupon_popup3 .fmcpp-env-seal{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 4px 10px rgba(0,0,0,.12),
    0 0 0 2px rgba(255,230,129,.18);
}

/* 打开时让前口袋和翻盖动作更柔一些 */
#fm_coupon_popup3 .fmcpp-env-paper{
  transition:
    transform .44s cubic-bezier(.2,.82,.2,1),
    opacity .24s ease;
}

#fm_coupon_popup3 .fmcpp-env-shadow{
  transition:
    opacity .26s ease,
    transform .34s ease;
}

#fm_coupon_popup3 .fmcpp-env-front{
  transition:
    transform .38s cubic-bezier(.2,.82,.2,1),
    opacity .22s ease;
}

#fm_coupon_popup3 .fmcpp-env-flap{
  transition:
    transform .48s cubic-bezier(.2,.82,.2,1),
    opacity .18s ease;
}

/* mobile 稍微弱一点，不然线太重 */
@media (max-width: 860px){
  #fm_coupon_popup3 .fmcpp-env-front::after,
  #fm_coupon_popup3 .fmcpp-env-flap::after{
    width: 1px;
  }

  #fm_coupon_popup3 .fmcpp-env-front::before{
    opacity: .82;
  }
}




/* =========================
   Envelope folds deeper - unopened state stronger
   追加在 home-coupon-popup.css 最后
   ========================= */

/* 整个信封底板：再压深一点 */
#fm_coupon_popup3 .fmcpp-env-back{
  box-shadow:
    0 18px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -16px 26px rgba(196, 132, 0, .16);
}

/* 上半部分翻盖：上下明暗更明显 */
#fm_coupon_popup3 .fmcpp-env-flap{
  background:
    linear-gradient(180deg, #ffec92 0%, #f8cf24 72%, #efbf12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -14px 22px rgba(206, 137, 0, .14),
    0 10px 18px rgba(0,0,0,.08);
}

/* 上盖中线更明显 */
#fm_coupon_popup3 .fmcpp-env-flap::after{
  width: 3px;
  opacity: .62;
  background: linear-gradient(180deg,
    rgba(255,255,255,.46) 0%,
    rgba(231,174,18,.38) 44%,
    rgba(193,124,0,.22) 100%);
  box-shadow:
    0 0 10px rgba(255, 224, 128, .20);
}

/* 下半口袋：整体加深 */
#fm_coupon_popup3 .fmcpp-env-front{
  background:
    linear-gradient(180deg, #ffd948 0%, #f3c20d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 14px 22px rgba(255,255,255,.05),
    inset 0 -12px 20px rgba(191, 126, 0, .16);
}

/* 左右折痕更深一点 */
#fm_coupon_popup3 .fmcpp-env-front::before{
  background:
    linear-gradient(141deg,
      transparent 47.2%,
      rgba(255,255,255,.34) 48.0%,
      rgba(224,154,0,.26) 49.1%,
      rgba(165,107,0,.12) 49.9%,
      transparent 50.7%),
    linear-gradient(219deg,
      transparent 47.2%,
      rgba(255,255,255,.34) 48.0%,
      rgba(224,154,0,.26) 49.1%,
      rgba(165,107,0,.12) 49.9%,
      transparent 50.7%);
  opacity: 1;
}

/* 中间竖折痕再重一点 */
#fm_coupon_popup3 .fmcpp-env-front::after{
  width: 3px;
  opacity: .72;
  background: linear-gradient(180deg,
    rgba(255,255,255,.42) 0%,
    rgba(226,168,8,.42) 48%,
    rgba(173,112,0,.24) 100%);
  box-shadow:
    0 0 10px rgba(255, 210, 90, .18);
}

/* 背板下方那个大三角折面，再压深一点 */
#fm_coupon_popup3 .fmcpp-env-back::after{
  box-shadow:
    inset 0 12px 20px rgba(255,255,255,.08),
    inset 0 -14px 20px rgba(188, 121, 0, .16);
  filter: saturate(1.06) contrast(1.02);
}

/* 中间折点位置，给一个更聚焦的“压痕阴影” */
#fm_coupon_popup3 .fmcpp-envelope::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 48.5%;
  width: 120px;
  height: 42px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(
    ellipse at center,
    rgba(181, 116, 0, .16) 0%,
    rgba(181, 116, 0, .08) 32%,
    rgba(181, 116, 0, 0) 72%
  );
  opacity: .9;
}

/* 封口圆点再立体一点 */
#fm_coupon_popup3 .fmcpp-env-seal{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 4px rgba(205, 138, 0, .18),
    0 5px 12px rgba(0,0,0,.14),
    0 0 0 2px rgba(255,230,129,.20);
}

/* 未打开阶段专门强化一下整体层次 */
#fm_coupon_popup3.is-envelope-show .fmcpp-env-back,
#fm_coupon_popup3.is-envelope-show .fmcpp-env-front,
#fm_coupon_popup3.is-envelope-show .fmcpp-env-flap{
  filter: contrast(1.02) saturate(1.03);
}

/* mobile 稍微收一点，不然会脏 */
@media (max-width: 860px){
  #fm_coupon_popup3 .fmcpp-env-front::after,
  #fm_coupon_popup3 .fmcpp-env-flap::after{
    width: 2px;
  }

  #fm_coupon_popup3 .fmcpp-envelope::after{
    width: 72px;
    height: 26px;
    top: 49%;
    opacity: .72;
  }
}