/* Top VPN Ratings — exit-intent overlay. Brand-aligned (navy / electric blue
   / cyan). Two-column desktop layout: visual+featured-VPN left, offer+CTA right.
   Stacks on mobile. */

.tvr-exit { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tvr-exit[hidden] { display:none; }
.tvr-exit__backdrop { position:absolute; inset:0; background:rgba(7,27,51,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease; }
.tvr-exit.is-open .tvr-exit__backdrop { opacity:1; }

.tvr-exit__modal {
  position:relative;
  width:min(960px, 100%);
  max-height:92vh; overflow:auto;
  background:#fff; border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:grid; grid-template-columns:1fr 1.05fr;
  transform:translateY(20px) scale(.98);
  opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.tvr-exit.is-open .tvr-exit__modal { transform:translateY(0) scale(1); opacity:1; }

@media (max-width: 760px) {
  .tvr-exit__modal { grid-template-columns:1fr; max-height:96vh; }
}

/* ---- Close button ---- */
.tvr-exit__close {
  position:absolute; top:.6rem; right:.8rem; z-index:2;
  background:rgba(255,255,255,.9); border:1px solid rgba(7,27,51,.1);
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  font-size:1.4rem; line-height:1; color:#0B2547; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.tvr-exit__close:hover { background:#fff; transform:scale(1.06); }

/* ---- Left visual panel ---- */
.tvr-exit__visual {
  position:relative;
  background:linear-gradient(135deg, #061327 0%, #0B2547 60%, #1E3A8A 100%);
  color:#fff;
  padding:2rem 1.75rem 1.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:1rem;
  border-radius:18px 0 0 18px;
}
@media (max-width: 760px) { .tvr-exit__visual { border-radius:18px 18px 0 0; padding:1.5rem 1.25rem 1.25rem; } }

.tvr-exit__visual::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 220px at 80% 0%, rgba(6,182,212,.18), transparent 60%),
             radial-gradient(380px 220px at 0% 100%, rgba(37,99,235,.22), transparent 60%);
  border-radius:inherit;
}

.tvr-exit__badge {
  position:relative; z-index:1; align-self:flex-start;
  background:linear-gradient(135deg, #06B6D4, #2563EB);
  color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.72rem; padding:.35rem .75rem; border-radius:999px;
  box-shadow:0 6px 16px rgba(6,182,212,.30);
}

.tvr-exit__visual-art { position:relative; z-index:1; width:100%; max-width:260px; }
.tvr-exit__visual-art svg { width:100%; height:auto; display:block; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); }

.tvr-exit__featured {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.75rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:.65rem .9rem; border-radius:12px;
  width:100%; box-sizing:border-box;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tvr-exit__featured .tvr-vpn-logo {
  width:96px; height:auto; flex:0 0 auto;
  background:#fff; padding:5px 8px; border-radius:8px;
}
.tvr-exit__featured-meta { display:flex; flex-direction:column; min-width:0; }
.tvr-exit__featured-name { font-size:1rem; color:#fff; font-weight:700; }
.tvr-exit__featured-bestfor { color:#cfe6ff; font-size:.82rem; line-height:1.25; }

/* ---- Right body panel ---- */
.tvr-exit__body { padding:2rem 2rem 1.75rem; display:flex; flex-direction:column; gap:.85rem; }
@media (max-width: 760px) { .tvr-exit__body { padding:1.5rem 1.25rem 1.25rem; } }

.tvr-exit__headline {
  margin:0; font-size:clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight:800; color:#0B2547; line-height:1.15; letter-spacing:-.01em;
}
.tvr-exit__subhead { margin:0; color:#4B5563; font-size:.95rem; line-height:1.5; }

.tvr-exit__rating { display:flex; align-items:center; gap:.6rem; }

.tvr-exit__countdown {
  background:#F5F7FB; border:1px solid #E5E7EB; border-radius:12px;
  padding:.75rem 1rem; display:flex; align-items:center; gap:.85rem;
}
.tvr-exit__countdown-label {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:#4B5563; font-weight:700;
}
.tvr-exit__clock { display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.tvr-exit__clock-cell { display:inline-flex; flex-direction:column; align-items:center; min-width:42px; }
.tvr-exit__clock-cell b {
  background:linear-gradient(180deg, #0B2547, #2563EB);
  color:#fff; font-weight:800;
  padding:.35rem .55rem; border-radius:8px;
  font-variant-numeric:tabular-nums; font-size:1.05rem;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);
}
.tvr-exit__clock-cell em { font-style:normal; font-size:.6rem; color:#4B5563; margin-top:.2rem; text-transform:uppercase; letter-spacing:.08em; }
.tvr-exit__clock-sep { color:#94A3B8; font-weight:700; padding-bottom:1rem; }

.tvr-exit__pros { list-style:none; padding:0; margin:.25rem 0; display:grid; gap:.3rem; }
.tvr-exit__pros li { color:#0B2547; font-size:.92rem; padding-left:1.4rem; position:relative; }
.tvr-exit__pros li::before {
  content:"✓"; position:absolute; left:0; top:0;
  color:#16A34A; font-weight:800;
}

.tvr-exit__cta {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.4rem; padding:1rem 1.4rem;
  background:linear-gradient(135deg, #DC2626 0%, #EF4444 50%, #F97316 100%);
  color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:.01em;
  border-radius:999px; text-decoration:none;
  box-shadow:0 12px 28px rgba(220,38,38,.40), inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .2s ease;
  text-transform:uppercase;
}
.tvr-exit__cta:hover { transform:translateY(-1px); box-shadow:0 18px 36px rgba(220,38,38,.50), inset 0 -2px 0 rgba(0,0,0,.18); color:#fff; text-decoration:none; }
.tvr-exit__cta-arrow { font-size:1.1rem; }

.tvr-exit__trust { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:.25rem; }
.tvr-exit__trust-item { color:#16A34A; font-weight:700; font-size:.82rem; }

.tvr-exit__footer { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-top:.4rem; padding-top:.75rem; border-top:1px solid #E5E7EB; }
.tvr-exit__skip { color:#2563EB; font-size:.85rem; text-decoration:none; }
.tvr-exit__skip:hover { text-decoration:underline; }
.tvr-exit__nope { background:none; border:0; color:#94A3B8; font-size:.82rem; cursor:pointer; padding:.25rem 0; }
.tvr-exit__nope:hover { color:#4B5563; }