/* ═══════════════════════════════════════════════════════════════════
   FAB Instagram — v1  (fab-instagram-mrcd-v1.css)
   Botão flutuante acima do WhatsApp (.mg-fab-whats).
   WhatsApp: 58×58 px, bottom 82 px.  Instagram: 58×58 px, bottom 152 px
   (82 + 58 + 12 gap).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Botão base ────────────────────────────────────────────────── */
.mg-fab-instagram {
  position: fixed !important;
  right: 16px !important;
  bottom: 152px !important;          /* 82 (wpp) + 58 (wpp size) + 12 (gap) */
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  z-index: 9998 !important;          /* mesmo nível do WhatsApp */
  display: grid !important;
  place-items: center !important;
  text-decoration: none !important;
  cursor: pointer !important;

  /* Gradiente oficial Instagram */
  background: radial-gradient(
    circle farthest-corner at 35% 90%,
    #fec564, transparent 50%
  ),
  radial-gradient(
    circle farthest-corner at 0 140%,
    #fec564, transparent 50%
  ),
  radial-gradient(
    ellipse farthest-corner at 0 -25%,
    #5258cf, transparent 50%
  ),
  radial-gradient(
    ellipse farthest-corner at 20% -50%,
    #5258cf, transparent 50%
  ),
  radial-gradient(
    ellipse farthest-corner at 100% 0,
    #893dc2, transparent 50%
  ),
  radial-gradient(
    ellipse farthest-corner at 60% -20%,
    #893dc2, transparent 50%
  ),
  radial-gradient(
    ellipse farthest-corner at 100% 100%,
    #d9317a, transparent
  ),
  linear-gradient(
    #6559ca,
    #bc318f 30%,
    #e33f5f 50%,
    #f77638 70%,
    #fec66d 100%
  ) !important;

  /* Hover / tap */
  transition: transform .15s ease, box-shadow .15s ease !important;

  /* Glow base: halo multi-camada rosa/roxo/laranja */
  box-shadow:
    0 4px 16px rgba(225,48,108,.4),
    0 0 22px rgba(188,24,136,.25),
    0 0 6px rgba(225,48,108,.15) !important;

  /* Glow + Float + Breathe */
  animation:
    mg-ig-float 3.2s ease-in-out infinite,
    mg-ig-glow 3.2s ease-in-out infinite !important;
}

.mg-fab-instagram:hover {
  animation: none !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(225,48,108,.5) !important;
}

.mg-fab-instagram:active {
  animation: none !important;
  transform: scale(.94) !important;
}

/* Ícone SVG dentro */
.mg-fab-instagram svg {
  width: 30px !important;
  height: 30px !important;
  color: #fff !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ── Esconder quando cart drawer está aberto ───────────────────── */
#cartDrawer.drawer--open ~ .mg-fab-instagram {
  display: none !important;
}

/* ── Acessibilidade: foco visível ──────────────────────────────── */
.mg-fab-instagram:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

/* ── Animações: float + breathe + glow Instagram ─────────────── */
@keyframes mg-ig-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.03); }
}

@keyframes mg-ig-glow {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(225,48,108,.4),
      0 0 22px rgba(188,24,136,.25),
      0 0 6px rgba(225,48,108,.15);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(225,48,108,.55),
      0 0 32px rgba(188,24,136,.4),
      0 0 48px rgba(225,48,108,.2),
      0 0 12px rgba(254,198,109,.15);
  }
}

/* ── Acessibilidade: reduzir movimento ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mg-fab-instagram {
    animation: none !important;
  }
}