/* =============================================================================
   AUTH GATE (BIA+)
   - Blur SOMENTE no backdrop
   - Card nunca borrado
   - Bloqueia interação com a página por trás
   - Responsivo (center no desktop / bottom-sheet no mobile)
   ============================================================================= */

/* Estado: hidden/visible */
#bia-sub-gate { display: none; }
#bia-sub-gate.on { display: flex; }

/* Overlay container */
#bia-sub-gate{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* layout */
  align-items: center;
  justify-content: center;

  /* safe area + respiro */
  padding:
    max(18px, env(safe-area-inset-top))
    16px
    max(18px, env(safe-area-inset-bottom))
    16px;

  /* IMPORTANTÍSSIMO: nada de blur no container */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* garante que o overlay capture clique */
  pointer-events: auto;

  /* melhora layering de backdrop-filter em alguns browsers */
  isolation: isolate;
}

/* Backdrop (é aqui que fica o blur) */
#bia-sub-gate .gate-backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(1100px 520px at 50% 22%, rgba(47,209,255,.08), transparent 62%),
    rgba(6,10,16,.52);

  backdrop-filter: blur(2px) saturate(1.08);
  -webkit-backdrop-filter: blur(2px) saturate(1.08);

  /* bloqueia clique no fundo */
  pointer-events: auto;
}

/* Card */
#bia-sub-gate .gate-card{
  position: relative;
  z-index: 1;

  width: min(440px, 100%);
  max-height: calc(100vh - 2 * max(18px, env(safe-area-inset-top)));
  overflow: auto;

  /* visual */
  padding: 34px 24px 18px; /* topo maior pra caber o badge */
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(15,30,45,.98), rgba(8,14,22,.98));
  border: 1px solid rgba(47,209,255,.26);
  box-shadow:
    0 28px 70px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(255,255,255,.03);

  text-align: center;

  /* GARANTIA anti-bug: nunca borra o card */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;

  /* anima */
  animation: gate-pop .22s ease-out;
  pointer-events: auto;
}

/* Badge (não corta) */
#bia-sub-gate .gate-card::before{
  content: "EXCLUSIVO";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  padding: 5px 10px;
  border-radius: 999px;

  background: linear-gradient(90deg, #2fd1ff, #56e0ff);
  color: #00131d;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .04em;

  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Texto */
#bia-sub-gate h3{
  margin: 6px 0 10px;
  font-size: 1.12rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #eaf6ff;
}

#bia-sub-gate p{
  margin: 0 0 16px;
  color: rgba(191,239,255,.90);
  font-size: .92rem;
  line-height: 1.45;
}

/* CTA */
#bia-sub-gate .gate-cta{
  display: block;
  margin: 14px 0 10px;
  padding: 14px 16px;
  border-radius: 14px;

  background: linear-gradient(135deg, #2fd1ff, #56e0ff);
  color: #00131d;

  font-weight: 900;
  text-decoration: none;

  box-shadow: 0 14px 30px rgba(47,209,255,.28);
}

#bia-sub-gate .gate-cta:hover{
  filter: brightness(1.03);
}

/* Login (link secundário) */
#bia-sub-gate .gate-login{
  display: inline-block;
  margin-top: 2px;
  color: #9adfff;
  font-size: .9rem;
  text-decoration: underline;
  opacity: .95;
}

/* Cupom */
#bia-sub-gate .gate-coupon{
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(191,239,255,.86);
}

/* Fechar (se você quiser manter) */
#bia-sub-gate .gate-close{
  margin-top: 12px;
  width: 100%;
  padding: 10px 12px;

  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);

  color: rgba(191,239,255,.78);
  cursor: pointer;
}

#bia-sub-gate .gate-close:hover{
  border-color: rgba(95,227,255,.28);
}

/* Mobile: vira bottom-sheet (melhor conversão + menos atrito) */
@media (max-width: 520px){
  #bia-sub-gate{
    align-items: flex-end;
  }

  #bia-sub-gate .gate-card{
    width: 100%;
    border-radius: 18px 18px 16px 16px;
    max-height: calc(100vh - max(18px, env(safe-area-inset-top)));
  }
}

/* Animação */
@keyframes gate-pop{
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* (Opcional) trava scroll quando o gate abre
   -> você PRECISA adicionar/remover a classe no JS (2 linhas) */
html.gate-lock,
body.gate-lock{
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}


#bia-sub-gate .gate-cta{
  display: block;
  margin: 14px 0 10px;
  padding: 15px 16px;
  border-radius: 14px;

  background: linear-gradient(135deg, #2fd1ff, #56e0ff);
  color: #00131d;

  font-weight: 950;
  letter-spacing: .02em;
  text-decoration: none;

  box-shadow:
    0 14px 34px rgba(47,209,255,.22),
    0 0 0 1px rgba(255,255,255,.06) inset;

  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

#bia-sub-gate .gate-cta:hover{
  filter: brightness(1.03);
  box-shadow:
    0 18px 42px rgba(47,209,255,.26),
    0 0 0 1px rgba(255,255,255,.07) inset;
}

#bia-sub-gate .gate-cta:active{
  transform: translateY(1px);
}