iframe[id^="booxi-iframe__"] {
  z-index: 9999;
}

booxi-cta {
  background-color: var(--background-color, #555);
  border: none;
  border-radius: var(--border-radius, 8px);
  color: var(--color, #FFFFFF);
  padding: var(--padding, 12px);
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  appearance: none;
  display: inline-block;
  max-width: 100%;
  width: var(--width, auto);
  font-size: 16px;
  font-family: inherit;
  margin: var(--margin, 0);
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: transform .2s ease;
}

booxi-cta:not([data-ready]) {
  display: none;
}

booxi-cta[data-ready] {
  animation: booxi-cta-enter .5s ease;
}

booxi-cta:hover, #booxi__tracking-bubble:hover {
  transform: scale(1.05);
}

#booxi-ctas-container {
  visibility: hidden;
  opacity: 0;
  display: none;
}

#booxi__tracking-bubble {
  --booxi-bubble-spacing: 20px;
  --booxi-bubble-size: 60px;
  position: fixed;
  z-index: 999;
  bottom: var(--booxi-bubble-spacing);
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px #00000099;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--booxi-bubble-size);
  height: var(--booxi-bubble-size);
  border-radius: calc(var(--booxi-bubble-size) / 2);
  animation: booxi-cta-enter .5s ease;
  transition: transform .2s ease;
}

#booxi__tracking-bubble svg path {
  fill: #555;
  fill-rule: evenodd;
}

#booxi__tracking-bubble.booxi__tracking-bubble-right {
  right: var(--booxi-bubble-spacing);
}

#booxi__tracking-bubble.booxi__tracking-bubble-left {
  right: var(--booxi-bubble-spacing);
}

@keyframes booxi-cta-enter {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}