.engage-banner {
  position: fixed;
  width: 100%;
  z-index: 9999;
  opacity: 1;
}

/* positions */
.engage-bottom { bottom: 0; left: 0; }
.engage-top { top: 0; left: 0; }
.engage-left { left: 0; top: 0; height: 100%; width: auto; }
.engage-right { right: 0; top: 0; height: 100%; width: auto; }

/* initial enter states */
.engage-enter-left { transform: translateX(-100%); }
.engage-enter-right { transform: translateX(100%); }
.engage-enter-top { transform: translateY(-100%); }
.engage-enter-bottom { transform: translateY(100%); }

/* active state */
.engage-active {
  transform: translate(0, 0) !important;
}

/* exit states */
.engage-exit-left { transform: translateX(-100%); }
.engage-exit-right { transform: translateX(100%); }
.engage-exit-top { transform: translateY(-100%); }
.engage-exit-bottom { transform: translateY(100%); }


/* Banner */
.engage-banner {
  position: fixed;
  width: 100%;
  z-index: 10000;
}

/* Modal */
.engage-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* Backdrop */
.engage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
}

.engage-backdrop-transparent {
  background: rgba(0,0,0,0.2);
}

/* Inline */
.engage-inline {
  margin: 20px 0;
}

/* Small Info Box */
.engage-smallinfobox {
  position: fixed;
  z-index: 10000;
  background: #fff;
  padding: 12px;
  border-radius: 6px;
}

.engage-bottom-right { bottom: 20px; right: 20px; }
.engage-bottom-left { bottom: 20px; left: 20px; }
.engage-top-right { top: 20px; right: 20px; }
.engage-top-left { top: 20px; left: 20px; }