.cpv2-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:9998;
}

.cpv2-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.cpv2-open{display:flex!important}
.cpv2-open-overlay{display:block!important}

.cpv2-card{
  background:transparent;
  width:min(96vw,520px);
}

/* ===== СЕРДЦЕ ===== */

.cpv2-balloon{
  position:relative;
  width:clamp(340px,95vw,500px);
  aspect-ratio:1/1;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background:
  url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>\
<defs>\
<linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
<stop offset='0%' stop-color='%23ffe3ef'/>\
<stop offset='45%' stop-color='%23ff9ecb'/>\
<stop offset='100%' stop-color='%23ff5fa2'/>\
</linearGradient>\
</defs>\
<path fill='url(%23g)' d='M256 464C256 464 32 288 32 160C32 96 80 48 144 48C192 48 224 80 256 112C288 80 320 48 368 48C432 48 480 96 480 160C480 288 256 464 256 464Z'/>\
</svg>") no-repeat center / contain;

  filter:drop-shadow(0 12px 24px rgba(255,0,120,.35));
}

/* ===== КОНТЕНТ ===== */

.cpv2-content{
  position:relative;
  z-index:2;
  width:78%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  transform: translateY(-14px);
}

.cpv2-title{
  font-weight:700;
  font-size:clamp(18px,2.6vw,22px);
  color:#5a2d3b;
}

.cpv2-sub{
  font-size:clamp(12px,2vw,14px);
  color:#6a3a4a;
  white-space:pre-line;
}

.cpv2-code{
  background:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.1em;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* ===== КНОПКИ ===== */

.cpv2-actions{
  width:45%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
  align-items:center;
}

.cpv2-btn{
  width:100%;
  border-radius:12px;
  padding:7px 8px;
  font-weight:800;
  text-decoration:none;
  text-align:center;
  font-size:12px;
}

.cpv2-wa{background:#25D366;color:#fff}
.cpv2-tg{background:#229ED9;color:#fff}

/* ===== КРЕСТИК ===== */

.cpv2-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:#fff;
  font-size:16px;
  cursor:pointer;
  z-index:5;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* ================================================= */
/* =============== МОБИЛЬНАЯ ВЕРСИЯ ================= */
/* ================================================= */

@media (max-width: 480px){

  .cpv2-balloon{
    width:88vw;
  }

  .cpv2-content{
    width:84%;
    gap:5px;
    transform: translateY(4px);
  }

  .cpv2-title{
    font-size:15px;
  }

  .cpv2-sub{
    font-size:12px;
    line-height:1.25;
  }

  .cpv2-code{
    padding:6px 12px;
    font-size:12px;
  }

  .cpv2-actions{
    width:100%;
    gap:6px;
  }

  .cpv2-btn{
    width:40%;
    max-width:150px;
    font-size:10px;
    padding:6px 6px;
  }

  .cpv2-close{
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    font-size:14px;
  }
}