/* ==========================================================================
   Lovescape Review — Promo Popup v2
   --------------------------------------------------------------------------
   This is a NEW, versioned filename on purpose. The old shared style.css was
   previously cached for one year as immutable, so editing it in place could
   never fix returning visitors. Loading this dedicated file after style.css
   forces browsers to request fresh popup rules.
   ========================================================================== */

html body .promo-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: auto !important;
  background: rgba(5, 7, 8, .82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .25s ease, visibility .25s ease !important;
}

html body .promo-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .promo-modal {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  box-sizing: border-box !important;
  width: min(680px, 100%) !important;
  max-width: 680px !important;
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  color: #f5f7f7 !important;
  background: #161616 !important;
  border: 1px solid #343838 !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72), 0 0 0 1px rgba(0, 240, 208, .05) !important;
  transform: translateY(14px) scale(.985) !important;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html body .promo-overlay.is-open .promo-modal {
  transform: translateY(0) scale(1) !important;
}

html body .promo-media {
  position: relative !important;
  display: block !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #0b0b0b !important;
}

html body .promo-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center 22% !important;
}

html body .promo-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0, 240, 208, .08), rgba(0, 0, 0, .52)) !important;
}

html body .promo-body {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 30px 30px 25px !important;
}

html body .promo-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  margin: 0 0 14px !important;
  padding: 6px 12px !important;
  color: #05231e !important;
  background: #32e6cd !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

html body .promo-offer {
  display: block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: #32e6cd !important;
  font-size: clamp(40px, 5vw, 54px) !important;
  font-weight: 800 !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
}

html body .promo-offer-sub {
  display: block !important;
  margin: 0 0 12px !important;
  color: #f5f7f7 !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

html body .promo-text {
  display: block !important;
  margin: 0 0 17px !important;
  color: #c6cecc !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

html body .promo-list {
  display: block !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .promo-list li {
  position: relative !important;
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 0 0 24px !important;
  color: #dde3e2 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html body .promo-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 5px !important;
  width: 11px !important;
  height: 6px !important;
  border: 0 !important;
  border-left: 2px solid #32e6cd !important;
  border-bottom: 2px solid #32e6cd !important;
  transform: rotate(-45deg) !important;
}

html body .promo-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin: 0 !important;
}

html body .promo-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  color: #05231e !important;
  background: linear-gradient(135deg, #32e6cd, #00f0d0) !important;
  border: 1px solid #00f0d0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 240, 208, .18) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body .promo-actions .btn:hover {
  color: #021916 !important;
  background: #51f1db !important;
  transform: translateY(-1px) !important;
}

html body .promo-dismiss {
  display: block !important;
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px !important;
  color: #aab4b2 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

html body .promo-dismiss:hover { color: #f5f7f7 !important; }

html body .promo-fineprint {
  display: block !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  color: #87928f !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

html body .promo-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .7) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35) !important;
  cursor: pointer !important;
}

html body .promo-close:hover { background: #000 !important; transform: scale(1.05) !important; }
html body .promo-close:focus-visible,
html body .promo-dismiss:focus-visible,
html body .promo-actions .btn:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

@media (max-width: 620px) {
  html body .promo-overlay { padding: 12px !important; }
  html body .promo-modal {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 18px !important;
  }
  html body .promo-media { min-height: 145px !important; height: 145px !important; }
  html body .promo-media img {
    min-height: 145px !important;
    height: 145px !important;
    object-position: center 18% !important;
  }
  html body .promo-body { padding: 21px 20px 19px !important; }
  html body .promo-badge { margin-bottom: 11px !important; }
  html body .promo-offer { font-size: clamp(36px, 12vw, 48px) !important; }
  html body .promo-list { margin-bottom: 15px !important; }
}

@media (max-height: 570px) {
  html body .promo-media { display: none !important; }
  html body .promo-list { display: none !important; }
  html body .promo-modal { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px !important; }
  html body .promo-body { padding: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .promo-overlay,
  html body .promo-modal,
  html body .promo-close { transition: none !important; }
  html body .promo-overlay.is-open .promo-modal { transform: none !important; }
}