.promobubble{position:fixed;z-index:9990;width:min(var(--pb-size),68vw);height:min(var(--pb-size),68vw);display:none;opacity:0;transition:opacity .4s ease}
.promobubble.is-visible{display:block}
.promobubble.is-shown{opacity:1}

.promobubble--top-left{top:var(--pb-offset);left:var(--pb-offset)}
.promobubble--top-center{top:var(--pb-offset);left:50%;transform:translateX(-50%)}
.promobubble--top-right{top:var(--pb-offset);right:var(--pb-offset)}
.promobubble--middle-left{top:50%;left:var(--pb-offset);transform:translateY(-50%)}
.promobubble--middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.promobubble--middle-right{top:50%;right:var(--pb-offset);transform:translateY(-50%)}
.promobubble--bottom-left{bottom:var(--pb-offset);left:var(--pb-offset)}
.promobubble--bottom-center{bottom:var(--pb-offset);left:50%;transform:translateX(-50%)}
.promobubble--bottom-right{bottom:var(--pb-offset);right:var(--pb-offset)}

.promobubble__circle{position:relative;width:100%;height:100%;border-radius:50%;box-sizing:border-box;
  background:var(--pb-bg);color:var(--pb-color);border:var(--pb-bw) solid var(--pb-border);
  box-shadow:0 6px 22px rgba(0,0,0,.28);overflow:hidden;font-size:var(--pb-fs);line-height:1.3}
.promobubble--pulse .promobubble__circle{animation:promobubble-pulse 2.4s ease-in-out infinite}
.promobubble:hover .promobubble__circle{animation-play-state:paused}

.promobubble__msg{position:absolute;top:0;left:0;right:0;bottom:0;box-sizing:border-box;padding:14%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.promobubble__msg.is-active{opacity:1;visibility:visible}
.promobubble__msg a{color:var(--pb-link);text-decoration:underline;font-weight:700}
.promobubble__msg a:hover{text-decoration:none}

.promobubble__close{position:absolute;top:2%;right:2%;z-index:2;width:28px;height:28px;padding:0;border-radius:50%;
  border:0;background:var(--pb-close-bg);color:var(--pb-close-color);font-size:20px;line-height:28px;text-align:center;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.promobubble__close:hover{filter:brightness(.92)}

@keyframes promobubble-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.promobubble--pulse .promobubble__circle{animation:none}.promobubble,.promobubble__msg{transition:none}}
@media (max-width:575px){.promobubble{--pb-fs:13px}.promobubble--hide-mobile{display:none!important}}