/* ==========================================================================
   cta-float-desktop.css
   Botão flutuante de compra para desktop (>=769px).
   Complementa o cta-sticky.css (que é mobile-only).
   Aparece após ~50% de scroll, esconde quando a seção #oferta está visível.
   ========================================================================== */

.cta-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 42;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 18px;
  border: 1px solid rgba(199, 255, 56, 0.35);
  border-radius: 100px;
  background: rgba(10, 12, 17, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(199, 255, 56, 0.08);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease;
}

/* Visível só no desktop */
@media (min-width: 769px) {
  .cta-float {
    display: inline-flex;
  }
}

/* Estado visível (ativado por JS) */
.cta-float.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cta-float:hover,
.cta-float:focus-visible {
  border-color: var(--lime);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(199, 255, 56, 0.2);
  outline: none;
}

/* Bolinha de status (lime) à esquerda */
.cta-float-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
}

/* Bloco de texto */
.cta-float-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cta-float-text small {
  color: #8f98aa;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cta-float-text strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

/* Preço (à direita) */
.cta-float-price {
  flex-shrink: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--lime);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Quando o back-to-top está visível, o float sobe um pouco
   para não sobrepor (mesma lógica do mobile). */
body.has-cta-float .back-to-top.is-visible {
  bottom: 100px;
}