#spp-popup { position: fixed; z-index:99999; border-radius:8px; max-width:340px; box-shadow:0 8px 30px rgba(0,0,0,.12); background:#fff; color:#111; overflow:hidden; }
#spp-popup .spp-inner{ padding:12px; }
#spp-popup .spp-close{ position:absolute; top:6px; right:8px; cursor:pointer; font-weight:bold; border:none; background:transparent; font-size:18px; }
#spp-popup.theme-dark{ background:#222; color:#fff; }
#spp-popup.theme-modern{ background:linear-gradient(135deg,#fff,#f2f6ff); }
/* positions */
.spp-pos-top-left{ top:20px; left:20px; transform:none }
.spp-pos-top-center{ top:20px; left:50%; transform:translateX(-50%) }
.spp-pos-top-right{ top:20px; right:20px }
.spp-pos-middle-left{ top:50%; left:20px; transform:translateY(-50%) }
.spp-pos-middle{ top:50%; left:50%; transform:translate(-50%,-50%) }
.spp-pos-middle-right{ top:50%; right:20px; transform:translateY(-50%) }
.spp-pos-bottom-left{ bottom:20px; left:20px }
.spp-pos-bottom-center{ bottom:20px; left:50%; transform:translateX(-50%) }
.spp-pos-bottom-right{ bottom:20px; right:20px }
/* basic animations */
@keyframes sppFadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes sppFadeOut { from{opacity:1} to{opacity:0; transform:translateY(8px)} }
.spp-anim-fadeIn{ animation: sppFadeIn .35s ease-out forwards }
.spp-anim-fadeOut{ animation: sppFadeOut .35s ease-out forwards }
/* slideInUp/OutDown simple */
.spp-anim-slideInUp{ animation: sppFadeIn .4s cubic-bezier(.2,.8,.2,1) forwards }
.spp-anim-slideOutDown{ animation: sppFadeOut .35s cubic-bezier(.2,.8,.2,1) forwards }
/* zoom */
.spp-anim-zoomIn{ transform-origin:center; animation: sppFadeIn .35s ease-out forwards }
.spp-anim-zoomOut{ animation: sppFadeOut .35s ease-out forwards }