.snp-popup{position:fixed!important;z-index:2147483647!important;display:flex!important;box-sizing:border-box;width:var(--dw);height:var(--dh);padding:var(--dpad);gap:12px;align-items:center;background:var(--bg);color:var(--name);border:1px solid var(--border);border-radius:var(--dr);box-shadow:0 12px 35px rgba(0,0,0,.18);font-family:Arial,sans-serif;line-height:1.3;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);overflow:visible}.snp-popup.snp-show{opacity:1;visibility:visible;pointer-events:auto}
.pos-bottom-left{left:var(--dml)!important;bottom:var(--dmb)!important}.pos-bottom-right{right:var(--dmr)!important;bottom:var(--dmb)!important}.pos-top-left{left:var(--dml)!important;top:var(--dmt)!important}.pos-top-right{right:var(--dmr)!important;top:var(--dmt)!important}
.snp-img{width:var(--dimg);height:var(--dimg);flex:0 0 var(--dimg);border-radius:10px;overflow:hidden;background:#f1f3f5}.snp-img img{width:100%;height:100%;object-fit:cover;display:block}.snp-body{min-width:0;flex:1}.snp-title{font-size:var(--dn);font-weight:700;color:var(--name);line-height:1.25}.snp-purchased{font-size:calc(var(--dn) - 1px);font-weight:500;color:var(--purchased);margin-top:3px;line-height:1.2}.snp-product{font-size:var(--dp);font-weight:700;color:var(--product);margin-top:3px;line-height:1.25}.snp-time{font-size:var(--dt);color:var(--time);margin-top:5px;line-height:1.2}.snp-close{position:absolute!important;right:6px!important;top:5px!important;z-index:20!important;border:0!important;background:transparent!important;color:var(--close)!important;font-size:23px!important;line-height:1!important;padding:2px 5px!important;cursor:pointer!important;box-shadow:none!important}

/* Five notification-style card designs */
.design-1{border-left:4px solid var(--product);background:var(--bg)}
.design-1 .snp-img{border-radius:8px}

/* Modern pill/card with circular image and floating accent */
.design-2{border:0;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.20);padding-right:42px}
.design-2 .snp-img{border-radius:50%;padding:4px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);overflow:visible}
.design-2 .snp-img img{border-radius:50%}
.design-2:after{content:"";position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--product);border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.14)}
.design-2 .snp-title{font-weight:600}

/* Compact notification */
.design-3{height:auto!important;min-height:70px!important;padding:9px 36px 9px 9px;gap:10px;border-radius:8px}
.design-3 .snp-img{width:48px;height:48px;flex-basis:48px;border-radius:6px}
.design-3 .snp-title{font-size:12px}.design-3 .snp-purchased{font-size:11px;margin-top:1px}.design-3 .snp-product{font-size:13px;margin-top:1px}.design-3 .snp-time{font-size:10px;margin-top:2px}

/* Elegant bordered notification */
.design-4{border-radius:10px;border:1px solid var(--border);box-shadow:0 8px 26px rgba(0,0,0,.13);border-top:3px solid var(--product);gap:15px}
.design-4 .snp-img{border-radius:50%}
.design-4 .snp-title{font-weight:500;letter-spacing:.1px}
.design-4 .snp-purchased{font-style:italic}

/* Product-forward notification */
.design-5{display:grid!important;grid-template-columns:76px 1fr;gap:14px;border-radius:14px;padding-right:42px}
.design-5 .snp-img{width:76px;height:76px;flex-basis:76px;border-radius:10px}
.design-5 .snp-product{font-size:calc(var(--dp) + 1px)}
.design-5 .snp-time{opacity:.8}

/* Five independent animations */
.anim-1{transform:translate3d(-120%,0,0)}.anim-1.snp-show{transform:translate3d(0,0,0)}
.anim-2{transform:translate3d(120%,0,0)}.anim-2.snp-show{transform:translate3d(0,0,0)}
.anim-3{transform:translate3d(0,120%,0)}.anim-3.snp-show{transform:translate3d(0,0,0)}
.anim-4{transform:scale(.72);opacity:0}.anim-4.snp-show{transform:scale(1);opacity:1}
@keyframes snpPop{0%{transform:scale(.2);opacity:0}45%{transform:scale(1.10);opacity:1}70%{transform:scale(.94)}88%{transform:scale(1.03)}100%{transform:scale(1)}}.anim-5.snp-show{animation:snpPop .65s both cubic-bezier(.2,.8,.2,1)}.anim-5:not(.snp-show){animation:none;opacity:0}

@media(max-width:600px){
 .snp-popup{width:var(--mw)!important;height:var(--mh)!important;padding:var(--mpad)!important;border-radius:var(--mr)!important;left:var(--mml)!important;right:auto!important;top:auto!important;bottom:var(--mmb)!important}
 .pos-top-left,.pos-top-right{top:auto!important;bottom:var(--mmb)!important}
 .snp-img{width:var(--mimg);height:var(--mimg);flex-basis:var(--mimg)}
 .snp-title{font-size:var(--mn)}.snp-product{font-size:var(--mp)}.snp-time{font-size:var(--mt)}
 .design-3 .snp-img{width:var(--mimg);height:var(--mimg);flex-basis:var(--mimg)}
 .design-5{grid-template-columns:var(--mimg) 1fr}.design-5 .snp-img{width:var(--mimg);height:var(--mimg);flex-basis:var(--mimg)}
 .anim-1,.anim-2{transform:translate3d(0,120%,0)}.anim-1.snp-show,.anim-2.snp-show{transform:translate3d(0,0,0)}
 .anim-3{transform:translate3d(0,120%,0)}.anim-3.snp-show{transform:translate3d(0,0,0)}
 .anim-4{transform:scale(.72)}.anim-4.snp-show{transform:scale(1)}
 .anim-5.snp-show{animation:snpPop .65s both}
 .snp-no-mobile{display:none!important}
}
@media(min-width:601px){.snp-no-desktop{display:none!important}}
/* Final single-card mode: only animation changes; card design is fixed. */
.snp-popup.design-1{border:1px solid var(--border);border-radius:var(--dr);background:var(--bg);box-shadow:0 12px 35px rgba(0,0,0,.18);padding:var(--dpad);gap:12px}
.snp-popup.design-1 .snp-img{border-radius:10px;box-shadow:none;padding:0}
.snp-popup[data-image-shape="square"] .snp-img{border-radius:0!important}
.snp-popup[data-image-shape="circle"] .snp-img,.snp-popup[data-image-shape="circle"] .snp-img img{border-radius:50%!important}
.snp-popup[data-image-shape="rounded"] .snp-img,.snp-popup[data-image-shape="rounded"] .snp-img img{border-radius:10px!important}
@media(max-width:600px){
 .snp-popup.design-1{border-radius:var(--mr);padding:var(--mpad)!important}
 .snp-popup[data-image-shape="rounded"] .snp-img,.snp-popup[data-image-shape="rounded"] .snp-img img{border-radius:9px!important}
}


/* Futuristic single-card polish */
.snp-popup{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 92%,transparent);border-color:color-mix(in srgb,var(--border) 75%,#fff);box-shadow:0 16px 45px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.12) inset}
.snp-popup .snp-body{letter-spacing:.05px}
.snp-popup .snp-purchased{text-transform:none}

/* v13: Close button is ALWAYS pinned to the popup's own top-right corner */
.snp-popup{position:fixed!important}
.snp-popup .snp-close{
  position:absolute!important;
  top:6px!important;
  right:6px!important;
  left:auto!important;
  bottom:auto!important;
  inset:auto 6px auto auto!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:999999!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:30px!important;
  text-align:center!important;
  cursor:pointer!important;
}
@media(max-width:600px){
  .snp-popup .snp-close{
    top:5px!important;
    right:5px!important;
    left:auto!important;
    bottom:auto!important;
    inset:auto 5px auto auto!important;
  }
}