/* ============================================================
   Overlay Nag CTA Bubble (Variant B — floating × badge)
   ------------------------------------------------------------
   Performance contract
   --------------------
   The old .swipebottomsec was smooth because it had no blur,
   no gradient, no transitions. This v2 matches that discipline
   and adds GPU-layer promotion so anything we DO put on the
   element (shadow, background) is rasterized ONCE into a
   compositor layer and composited for free over the video.

   Rules followed here:
     * Flat rgba background (no gradient repaint cost)
     * Small, cheap drop-shadow (no pink glow)
     * transform: translateZ(0) + will-change: transform
         → forces its own compositor layer so the video layer
         underneath is never damaged by the bubble
     * contain: layout paint
         → nothing outside the bubble can reflow when we
         swap text / hide / show
     * transitions: NONE during normal operation
         → no compositor thrash while the user swipes
   ============================================================ */
.swipebottomsec-v2 {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 8px 22px;
  background: rgba(254, 1, 137, 0.92);
  border-radius: 30px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 9;
  /* GPU layer promotion — the bubble lives on its own
     compositor layer, so the video underneath is never
     repainted when the bubble exists, moves, or changes. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* NOTE: no `contain: paint` — it would clip the .nag-close
     badge that sits at top:-10px/right:-8px outside the bubble.
     GPU layer promotion above is what actually keeps the
     bubble free over the video. */
  display: none; /* JS flips to flex once a nag is selected */
  align-items: center;
  justify-content: center;
}
.swipebottomsec-v2 .nag-msg {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Floating × badge — sits half-in / half-out of the top-right.
   Bigger + higher-contrast than v1 so it reads clearly over video.
   Uses system-ui so the ✕ glyph has proper weight/metrics (Poppins
   renders U+2715 too thin at small sizes). */
.swipebottomsec-v2 .nag-close {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 28px;
  height: 28px;
  line-height: 24px; /* 28px box - 2px border top - 2px border bottom */
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  color: #111;
  background: #ffffff;
  border: 2px solid #111;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* Hide the old static pill when the v2 system is in use.
   Keeps the v1 CSS intact in case we need to roll back. */
body.nag-v2-active .swipebottomsec {
  display: none !important;
}

/* Mobile tweaks — position just above the Swiper indicator */
@media (max-width: 767.98px) {
  .swipebottomsec-v2 {
    bottom: 50px;
    font-size: 14px;
    padding: 7px 20px;
  }
  .swipebottomsec-v2 .nag-close {
    width: 30px;
    height: 30px;
    line-height: 26px;
    font-size: 17px;
    top: -11px;
    right: -9px;
  }
}