/* ─── POPUP ENGAGEMENT OVERLAY ─────────────────────────────────
   Design D (Friendly Handwritten) — Warm Coral design system.
   No SweetAlert dependency — pure CSS.
   Stealth: all overlay classes use generic names to avoid
   popup/modal/overlay detection patterns.
   Load: <link rel="stylesheet" href="/css/popup.css">
   ───────────────────────────────────────────────────────────── */

/* ─── SCROLL LOCK ───────────────────────────────────────────── */
body._sl {
  overflow: hidden !important;
  touch-action: none;
}

/* ─── BACKGROUND BLUR ───────────────────────────────────────── */
body._bl > *:not(._bk):not(._dk):not(script):not(style):not(link) {
  transition: filter 0.1s;
  filter: blur(10px);
}

/* ─── LOADING POPUP BACKDROP ────────────────────────────────── */
._bk {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 43, 46, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 300ms;
}
._bk._vis {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* ─── LOADING POPUP CARD ────────────────────────────────────── */
._cd {
  position: relative;
  width: 340px;
  max-width: calc(100vw - 48px);
  padding: 36px 28px 28px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 24px 64px -12px rgba(212, 100, 110, 0.25),
              0 8px 24px -4px rgba(74, 68, 72, 0.1);
  text-align: center;
  transform: scale(0.9) translateY(16px);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 300ms ease;
  opacity: 0;
}
._bk._vis ._cd {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ─── ICON AREA ─────────────────────────────────────────────── */
._ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #FDF0F0;
}
._ic svg {
  width: 32px;
  height: 32px;
  color: #D4646E;
}

/* ─── Loading spinner ─── */
._ic._ld svg {
  animation: _spin 1.2s linear infinite;
}
@keyframes _spin {
  to { transform: rotate(360deg); }
}

/* ─── Success checkmark ─── */
._ic._ok {
  background: #E8F5E9;
}
._ic._ok svg {
  color: #2D8B6E;
  animation: _pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes _pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */
._tt {
  font-family: 'Quicksand', 'Quicksand Fallback', ui-sans-serif, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2D2B2E;
  margin: 0 0 8px;
  line-height: 1.3;
}
._tx {
  font-family: 'Nunito', 'Nunito Fallback', ui-sans-serif, sans-serif;
  font-size: 0.938rem;
  color: #5A5258;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ─── PROGRESS BAR ──────────────────────────────────────────── */
._pg {
  position: relative;
  width: 100%;
  height: 6px;
  background: #F0E8E5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}
._pb {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #D4646E, #B84864);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  /* Non-linear: ease-in makes last 20% feel longer (sunk cost effect) */
  transition: transform ease-in;
}
._pb._su {
  background: linear-gradient(90deg, #2D8B6E, #4CAF50);
}

/* ─── AD OVERLAY DARK BACKDROP ─────────────────────────────── */
/* Full-viewport dark overlay. Uses <aside> tag for stealth.
   pointer-events:none so clicks pass through to ad beneath. */
._dk {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* ─── AD OVERLAY CARD (Design D — Friendly Handwritten) ───── */
/* Positioned exactly over the selected ad via inline styles.
   Uses <section> tag for stealth. z-index set dynamically (adZ+2).
   100% opaque warm background — ad completely hidden beneath.
   pointer-events:none — clicks pass through. */
._oc {
  position: fixed;
  pointer-events: none;
  background: rgba(253, 248, 246, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title zone — anchored at top center, Caveat handwritten font */
._oc > h3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  font-weight: 500;
  color: #B84864;
  margin: 0;
  pointer-events: none;
}

/* NASTAVI button — 240x60, coral gradient pill, random position via inline styles */
._oc > a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 60px;
  background: linear-gradient(135deg, #D4646E, #B84864);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-family: 'Nunito', 'Nunito Fallback', ui-sans-serif, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  pointer-events: none;
  box-shadow: 0 6px 20px -4px rgba(184, 72, 100, 0.4);
  letter-spacing: 0.5px;
  /* Entrance: slide up with spring ease after 0.5s delay */
  animation: _btnIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
             _btnPulse 2.5s ease 1.5s infinite;
}

/* Button entrance animation */
@keyframes _btnIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtle pulse shadow animation (attracts eye without being annoying) */
@keyframes _btnPulse {
  0%, 100% { box-shadow: 0 6px 20px -4px rgba(184, 72, 100, 0.4); }
  50% { box-shadow: 0 8px 28px -2px rgba(184, 72, 100, 0.6); }
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 400px) {
  ._cd {
    padding: 28px 20px 20px;
    width: calc(100vw - 32px);
  }
  ._ic {
    width: 56px;
    height: 56px;
  }
  ._ic svg {
    width: 28px;
    height: 28px;
  }
  ._tt {
    font-size: 1.125rem;
  }
  /* Smaller button on very small screens */
  ._oc > a {
    width: 200px;
    height: 50px;
    font-size: 0.875rem;
  }
}

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ._bk,
  ._cd,
  ._ic svg,
  ._ic._ok svg,
  ._oc > a {
    transition-duration: 0ms;
    animation-duration: 0ms;
    animation: none;
  }
}