/* BannerMonster - Frontend */

/* --- Base --- */
.bm-wrap {
  display: none !important;
  z-index: 999999 !important;
}
.bm-wrap.bm-visible {
  display: block !important;
}

/* --- Banner top --- */
.bm-wrap.bm-banner_top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* --- Banner bottom --- */
.bm-wrap.bm-banner_bottom {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* --- Container --- */
.bm-box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}
.bm-visible .bm-box {
  animation: bmFadeIn .35s ease;
}

/* --- Overlay (outside wrapper, covers full viewport, sits below popup) --- */
.bm-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 999998 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
.bm-visible .bm-overlay {
  animation: bmFadeIn .25s ease;
}

/* --- Popup center --- */
.bm-wrap.bm-popup_center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bm-wrap.bm-popup_center .bm-box {
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* --- Popup bottom right --- */
.bm-wrap.bm-popup_bottom_right {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bm-wrap.bm-popup_bottom_right .bm-box {
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}

/* --- Popup bottom left --- */
.bm-wrap.bm-popup_bottom_left {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bm-wrap.bm-popup_bottom_left .bm-box {
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}

/* --- Close button --- */
.bm-x {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none !important;
  border: 0 !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: .6;
  transition: opacity .15s;
  z-index: 10;
  color: inherit;
}
.bm-x:hover { opacity: 1; }

/* --- Content --- */
.bm-inner {
  position: relative;
  z-index: 0;
}
.bm-inner p:last-child { margin: 0; }

/* --- Animation (solo opacity, NON transform) --- */
@keyframes bmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .bm-wrap.bm-popup_center {
    width: 90vw !important;
  }
  .bm-wrap.bm-popup_bottom_right,
  .bm-wrap.bm-popup_bottom_left {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
  }
}