:root { --wsb-sp-accent:     #2563eb;    --wsb-sp-radius:     16px; --wsb-sp-shadow:     0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1); --wsb-sp-transition: .3s cubic-bezier(.4,0,.2,1); --wsb-sp-z:          99990; --wsb-sp-max-width:  680px;      } .wsb-sp-popup *, .wsb-sp-popup *::before, .wsb-sp-popup *::after { box-sizing: border-box; } .wsb-sp-overlay { position: fixed; inset: 0; z-index: calc(var(--wsb-sp-z) - 1); background: rgba(0,0,0,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--wsb-sp-transition), visibility var(--wsb-sp-transition); } .wsb-sp-overlay--visible { opacity: 1; visibility: visible; pointer-events: auto; } .wsb-sp-positioner { position: fixed; inset: 0; z-index: var(--wsb-sp-z); display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none;  } .wsb-sp-positioner--top    { align-items: flex-start; } .wsb-sp-positioner--bottom { align-items: flex-end; } .wsb-sp-popup { position: relative; width: 100%; max-width: var(--wsb-sp-max-width, 680px); background: #fff; border-radius: var(--wsb-sp-radius); box-shadow: var(--wsb-sp-shadow); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.95) translateY(10px); transition: opacity var(--wsb-sp-transition), transform var(--wsb-sp-transition), visibility var(--wsb-sp-transition); } .wsb-sp-popup.wsb-sp-popup--open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateY(0); } .wsb-sp-positioner--top    .wsb-sp-popup { transform: scale(.95) translateY(-10px); } .wsb-sp-positioner--top    .wsb-sp-popup.wsb-sp-popup--open { transform: scale(1) translateY(0); } .wsb-sp-positioner--bottom .wsb-sp-popup { transform: scale(.95) translateY(10px); } .wsb-sp-positioner--bottom .wsb-sp-popup.wsb-sp-popup--open { transform: scale(1) translateY(0); } .wsb-sp-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0,0,0,.08); color: #333; cursor: pointer; transition: background .2s; } .wsb-sp-close:hover { background: rgba(0,0,0,.16); } .wsb-sp-body { text-align: center; } .wsb-sp-title { margin: 0 0 12px; font-size: 22px; line-height: 1.3; color: #111; } .wsb-sp-content { font-size: 15px; line-height: 1.65; color: #444; } .wsb-sp-content p { margin: 0 0 10px; } .wsb-sp-content p:last-child { margin-bottom: 0; } .wsb-sp-btn { display: inline-block; padding: 12px 30px; background: var(--wsb-sp-accent); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 999px; transition: filter .2s, transform .2s; } .wsb-sp-btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); } body.wsb-sp-open { overflow: hidden; } @media (max-width: 768px) { .wsb-sp-positioner { padding: 12px; } .wsb-sp-popup { width: 95%; max-width: none; } }