/* == ОБЩИЙ CSS == */

/* ── КНОПКА-ШАРИК ───────────────────────────────── */
#ftg-btn{
  position:fixed;
  right:22px;bottom:80px;
  width:60px;height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#00D4FF,#0099BB);
  box-shadow:0 4px 20px rgba(0,212,255,0.5);
  cursor:pointer;
  z-index:9998;
  display:flex;align-items:center;justify-content:center;
  animation:ftg-shake 3s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s;
  user-select:none;
}
#ftg-btn:hover{
  transform:scale(1.12) !important;
  box-shadow:0 6px 28px rgba(0,212,255,0.7);
  animation:none;
}

/* Анимация "звонит" */
@keyframes ftg-shake{
  0%,100%{transform:rotate(0) scale(1)}
  5%{transform:rotate(-12deg) scale(1.05)}
  10%{transform:rotate(12deg) scale(1.05)}
  15%{transform:rotate(-8deg) scale(1.05)}
  20%{transform:rotate(8deg) scale(1.05)}
  25%{transform:rotate(-4deg) scale(1)}
  30%,95%{transform:rotate(0) scale(1)}
}

/* Пульсирующие кольца */
.ftg-ring{
  position:absolute;
  inset:-6px;border-radius:50%;
  border:2px solid rgba(0,212,255,0.4);
  animation:ftg-ring 3s ease-in-out infinite;
}
.ftg-ring2{
  inset:-13px;
  border-color:rgba(0,212,255,0.2);
  animation-delay:.4s;
}
@keyframes ftg-ring{
  0%,60%,100%{transform:scale(1);opacity:.7}
  5%,25%{transform:scale(1.12);opacity:.3}
  15%{transform:scale(1.06);opacity:.5}
}

.ftg-icon{flex-shrink:0;position:relative;z-index:1}

/* Значок 🔑 */
.ftg-badge{
  position:absolute;
  top:-4px;right:-4px;
  background:#FF4444;
  width:20px;height:20px;
  border-radius:50%;
  font-size:10px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg0,#07080D);
  animation:ftg-badge-pulse 2s infinite;
}
@keyframes ftg-badge-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}

/* ── ПОПАП ───────────────────────────────────────── */
.ftg-popup{transition:transform .3s ease,opacity .3s ease;
  position:fixed;
  right:22px;bottom:155px;
  width:320px;
  background:#0D1B2A;
  border:1px solid rgba(0,212,255,0.2);
  border-radius:18px;
  padding:20px;
  z-index:9999;
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(0,212,255,0.08);
  display:none;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.ftg-popup.open{display:flex}
.ftg-popup-glow{
  position:absolute;
  top:-60px;right:-40px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(0,212,255,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.ftg-close{
  position:absolute;top:12px;right:12px;
  background:rgba(255,255,255,0.06);
  border:none;color:rgba(255,255,255,0.4);
  width:26px;height:26px;border-radius:50%;
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.ftg-close:hover{background:rgba(255,255,255,0.12);color:#fff}

/* Header */
.ftg-header{display:flex;align-items:center;gap:10px}
.ftg-logo{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#00D4FF22,#0099BB22);
  border:1px solid rgba(0,212,255,0.25);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ftg-popup-title{font-weight:700;font-size:14px;color:#E2E4EF}
.ftg-popup-sub{font-size:11px;color:#7B8299;margin-top:1px}
.ftg-online{
  margin-left:auto;
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:#22C55E;
  background:rgba(34,197,94,0.1);
  border:1px solid rgba(34,197,94,0.2);
  padding:3px 8px;border-radius:100px;flex-shrink:0;
}
.ftg-dot{
  width:6px;height:6px;background:#22C55E;
  border-radius:50%;
  animation:blink 1.5s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Оффер */
.ftg-offer{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.ftg-offer-line{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#C0C4D6;line-height:1.4;
}
.ftg-offer-line strong{color:#fff}
.ftg-offer-ico{font-size:15px;flex-shrink:0;width:20px;text-align:center}

/* Кнопка CTA */
.ftg-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#00D4FF,#0099BB);
  color:#07080D;font-weight:700;font-size:14px;
  padding:13px 16px;border-radius:10px;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(0,212,255,0.3);
  transition:.18s;
}
.ftg-cta:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,212,255,0.45)}

/* Новости */
.ftg-news{
  display:flex;align-items:center;justify-content:center;
  background:rgba(41,182,246,0.08);
  border:1px solid rgba(41,182,246,0.2);
  color:#29B6F6;font-size:13px;font-weight:600;
  padding:10px;border-radius:10px;
  text-decoration:none;transition:.15s;
}
.ftg-news:hover{background:rgba(41,182,246,0.15)}

/* Доверие */
.ftg-trust{
  display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:11px;color:#4A4F66;flex-wrap:wrap;
}

/* Мобайл */

  /* Срочность */
  .ftg-urgent{
    background:rgba(255,68,68,0.08);
    border:1px solid rgba(255,68,68,0.2);
    border-radius:8px;padding:9px 12px;
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;color:#FFAAAA;line-height:1.4;
  }
  .ftg-urgent-ico{font-size:16px;flex-shrink:0}

  /* Заголовок оффера */
  .ftg-offer-title{
    font-size:11px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    color:#4A4F66;margin-bottom:4px;
  }

  /* Бесплатно vs цена */
  .ftg-free{color:#00D4FF;font-size:15px}
  .ftg-old-price{color:#4A4F66;font-size:12px;margin-left:4px;text-decoration:line-through}

  /* Счётчик */
  .ftg-counter{
    display:flex;align-items:center;gap:6px;
    background:rgba(34,197,94,0.07);
    border:1px solid rgba(34,197,94,0.15);
    border-radius:8px;padding:8px 12px;
    font-size:12.5px;
  }
  .ftg-counter-txt{color:#7B8299}
  .ftg-counter-num{
    font-weight:800;font-size:16px;
    color:#22C55E;font-family:monospace;
  }

  /* Hint под кнопкой */
  .ftg-cta-hint{
    text-align:center;font-size:11px;
    color:#4A4F66;margin-top:-6px;
  }
  
  /* ТАЙМЕР */
  .ftg-timer{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(255,68,68,0.08);
    border:1px solid rgba(255,68,68,0.2);
    border-radius:8px;padding:9px 14px;
  }
  .ftg-timer-label{font-size:12px;color:#FFAAAA}
  .ftg-timer-val{
    font-family:monospace;font-weight:800;font-size:18px;
    color:#FF6B6B;letter-spacing:2px;
    text-shadow:0 0 12px rgba(255,68,68,0.4);
  }
  .ftg-timer-ico{font-size:16px;animation:ftg-tick 1s steps(1) infinite}
  @keyframes ftg-tick{0%{opacity:1}50%{opacity:0}}

  /* ПРОГРЕССБАР */
  .ftg-progress-wrap{display:none;flex-direction:column;gap:6px}
  .ftg-progress-wrap.active{display:flex}
  .ftg-progress-label{
    font-size:12px;color:#7B8299;
    display:flex;justify-content:space-between;
  }
  .ftg-progress-bar{
    height:6px;background:rgba(255,255,255,0.07);
    border-radius:100px;overflow:hidden;
  }
  .ftg-progress-fill{
    height:100%;width:0%;
    background:linear-gradient(90deg,#00D4FF,#0099BB);
    border-radius:100px;
    transition:width .3s ease;
    box-shadow:0 0 8px rgba(0,212,255,0.4);
  }
  .ftg-progress-steps{
    display:flex;flex-direction:column;gap:4px;margin-top:2px;
  }
  .ftg-progress-step{
    font-size:11.5px;color:#4A4F66;
    display:flex;align-items:center;gap:6px;
    transition:color .3s;
  }
  .ftg-progress-step.done{color:#22C55E}
  .ftg-progress-step.active{color:#00D4FF}
  .ftg-step-ico{font-size:12px;width:16px;text-align:center}

  /* CTA меняется при клике */
  .ftg-cta.connecting{
    background:rgba(0,212,255,0.15) !important;
    color:#00D4FF !important;
    pointer-events:none;
    box-shadow:none !important;
  }
  .ftg-cta-done{
    display:none;
    align-items:center;justify-content:center;gap:8px;
    background:rgba(34,197,94,0.15);
    border:1px solid rgba(34,197,94,0.3);
    color:#22C55E;font-weight:700;font-size:14px;
    padding:13px 16px;border-radius:10px;
    text-decoration:none;
  }
  .ftg-cta-done.show{display:flex}

  @media(max-width:480px){
  .ftg-popup{transition:transform .3s ease,opacity .3s ease;right:8px;left:8px;width:auto;bottom:148px}
  #ftg-btn{right:14px;bottom:70px}
}