/* ==========================================================================
   GLOBAL LOCK + BLUR
   ========================================================================== */
body.cp-lock{ overflow:hidden; }
body.cp-lock::after{
  content:""; position:fixed; inset:0; z-index:998; backdrop-filter:blur(4px);
}

/* ==========================================================================
   OFFER POPUP (cp-*)
   ========================================================================== */
.cp-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease;
}
.cp-overlay.is-open{ opacity:1; }

.cp-modal{
  width:min(480px,96vw);
  background:#fff; border:1px solid #e5e7eb; border-radius:20px;
  box-shadow:0 30px 70px rgba(15,23,42,.35);
  padding:24px 24px 18px;
  transform:translateY(10px) scale(.96);
  transition:transform .25s ease;
}
.cp-overlay.is-open .cp-modal{ transform:translateY(0) scale(1); }

.cp-close{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff;
  font-size:20px; line-height:1; cursor:pointer;
}

.cp-badge{
  display:inline-block; background:#0e8748; color:#fff; font-weight:900;
  padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.02em;
}

.cp-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; margin-top:8px;
}

/* Logo: as big as possible, no frame */
.cp-logoBox{ background:transparent; border:0; width:100%; padding:0; }
.cp-logoBox img{
  display:block; margin:6px auto 4px; width:auto; max-width:96%;
  height:clamp(96px,24vw,200px); max-height:40vh; object-fit:contain;
}

.cp-title{
  margin:6px 0 0; font-size:24px; font-weight:900; letter-spacing:.01em; color:#0f172a;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.cp-bonus{
  margin:4px 0 0; font-size:16px; font-weight:700; color:#0e8748; line-height:1.35;
}

/* Rating */
.cp-rating{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin:10px 0 4px;
}
.cp-stars{ display:inline-flex; gap:6px; }
.cp-stars svg{ width:24px; height:24px; }
.cp-ratingLabel{ font-size:13px; color:#475569; }

/* CTA */
.cp-cta{
  display:block; text-align:center; text-decoration:none;
  margin-top:8px; padding:16px 20px; border-radius:14px;
  background:linear-gradient(180deg,#0e8748,#0b6a3a);
  color:#fff; font-weight:900; letter-spacing:.02em;
  box-shadow:0 12px 30px rgba(14,135,72,.25);
  font-size:16px; transform-origin:center; animation:cp-pulse 2.2s ease-in-out infinite;
}
.cp-cta:hover,.cp-cta:focus-visible{
  box-shadow:0 16px 36px rgba(14,135,72,.35);
  transform:translateY(-1px) scale(1.02);
}
.cp-cta:active{ transform:translateY(1px); }

@keyframes cp-pulse{
  0%{transform:scale(1)} 50%{transform:scale(1.035)} 100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){ .cp-cta{ animation:none } }

/* Responsive (popup) */
@media (max-width:640px){
  .cp-modal{ width:min(560px,96vw); border-radius:16px; }
  .cp-logoBox img{ height:clamp(88px,28vw,180px); max-height:42vh; }
  .cp-title{ font-size:21px; }
  .cp-bonus{ font-size:15.5px; }
  .cp-stars svg{ width:26px; height:26px; }
}
@media (max-width:360px){
  .cp-modal{ width:96vw; padding:16px 14px 14px; }
  .cp-logoBox img{ height:clamp(78px,32vw,160px); max-height:44vh; }
  .cp-title{ font-size:20px; }
  .cp-bonus{ font-size:15px; }
  .cp-stars svg{ width:24px; height:24px; }
}

/* ==========================================================================
   FLOATING "MAIL" FAB (clean SVG, no green bars)
   ========================================================================== */
/* ===== Floating "mail" FAB (чистая SVG-картинка) ===== */
.mail-fab{
  position: fixed;
  right: max(12px, env(safe-area-inset-right) + 12px);
  bottom: max(12px, env(safe-area-inset-bottom) + 12px);
  z-index: 2147483600; /* поверх карточек/хедеров */
  width: 56px; height: 56px;
  border: 0; border-radius: 16px;
  background: transparent;            /* без фона */
  box-shadow: none;                    /* без тени кнопки */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  animation: fab-enter .25s ease-out, fab-bounce 1.8s ease-in-out infinite .25s;
}
.mail-fab.is-hidden{ display:none; }

@keyframes fab-enter{
  from{ transform: translateY(10px); opacity:0 }
  to  { transform: none;              opacity:1 }
}
@keyframes fab-bounce{
  0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) }
}

/* Сама пиктограмма письма — напрямую через <img> */
.mail-fab__img{
  display: block;
  width: 40px;             /* размер иконки */
  height: 40px;
  object-fit: contain;
  background: transparent !important; /* на случай встроенных стилей */
  filter: none !important;
  -webkit-mask: none !important; mask: none !important; /* на всякий */
  pointer-events: none;    /* кликаем по кнопке, не по картинке */
}

/* Бейдж уведомления */
.mail-fab__badge{
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #f43f5e;
  box-shadow: 0 0 0 4px rgba(244,63,94,.25);
  animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%{ transform:scale(0.9) } 50%{ transform:scale(1.1) } 100%{ transform:scale(0.9) }
}

/* Мобайл — чуть компактнее */
@media (max-width:640px){
  .mail-fab{ width: 52px; height: 52px; border-radius: 14px; }
  .mail-fab__img{ width: 36px; height: 36px; }
}


/* ==========================================================================
   VIDEO MODAL (cv-*) — always over FAB
   ========================================================================== */
.cv-overlay{
  position: fixed; inset:0; z-index: 2147483640;
  background: rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease;
}
.cv-overlay.is-open{ opacity:1; }

.cv-modal{
  width: min(720px, 96vw);
  background:#fff; border:1px solid #e5e7eb; border-radius: 18px;
  box-shadow: 0 30px 70px rgba(15,23,42,.35);
  padding: 16px 16px 18px;
  transform: translateY(10px) scale(.96);
  transition: transform .25s ease;
}
.cv-overlay.is-open .cv-modal{ transform: translateY(0) scale(1); }

.cv-close{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff;
  font-size:20px; line-height:1; cursor:pointer;
}

/* Video box */
.cv-videoBox{
  position: relative; aspect-ratio: 16 / 9;
  background:#0b1220; border-radius: 14px; overflow: hidden;
}
.cv-video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }

.cv-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
  cursor:pointer; border:0;
}
.cv-play::before{
  content:""; width:64px; height:64px; border-radius:999px; background:#fff;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M8 5v14l11-7z"/></svg>') center / 48% no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cv-play.is-hidden{ display:none; }

/* Text + CTA */
.cv-text{ text-align:center; margin: 10px 6px 0; }
.cv-title{ margin:8px 0 0; font-size:20px; font-weight:900; color:#0f172a; }
.cv-bonus{ margin:6px 0 0; font-size:15px; font-weight:700; color:#0e8748; }
.cv-cta{
  display:block; text-align:center; text-decoration:none;
  margin:12px 0 0; padding:14px 18px; border-radius:14px;
  background: linear-gradient(180deg, #0e8748, #0b6a3a);
  color:#fff; font-weight:900; letter-spacing:.02em;
  box-shadow: 0 12px 30px rgba(14,135,72,.25);
}
.cv-cta:active{ transform: translateY(1px); }

/* Responsive (video modal) */
@media (max-width:640px){
  .cv-modal{ width:min(560px,96vw); border-radius:16px; padding: 14px 14px 16px; }
  .cv-title{ font-size:18px; }
  .cv-bonus{ font-size:14.5px; }
}
@media (max-width:360px){
  .cv-modal{ width:96vw; }
  .cv-title{ font-size:17px; }
}

/* ==========================================================================
   END
   ========================================================================== */