/* ============================================================
   Tela de espera do redirect para o Stripe. Ver js/aguarde.js.

   Cobre a tela inteira de propósito: o objetivo é a pessoa entender que
   há algo acontecendo e que vale esperar, em vez de tocar de novo e
   criar uma segunda sessão de checkout.
   ============================================================ */

.aguarde {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  /* Opaco, não translúcido: por baixo está o paywall, e deixá-lo
     entrever convida a tocar nele. */
  background: var(--bg);
  animation: aguarde-entra .18s ease-out;
}

@keyframes aguarde-entra { from { opacity: 0 } to { opacity: 1 } }

.aguarde-miolo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 320px;
}

/* O anel ecoa o da tela de loading do funil — mesma espessura, mesma cor
   de marca —, para a espera parecer parte do produto e não um spinner
   genérico de biblioteca. */
.aguarde-anel {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid var(--surface-2);
  border-top-color: var(--brand);
  animation: aguarde-gira .9s linear infinite;
}

@keyframes aguarde-gira { to { transform: rotate(360deg) } }

/* Passado o teto, o anel para: girar para sempre é promessa que a tela
   não cumpre. */
.aguarde-anel.parado {
  animation: none;
  border-top-color: var(--atencao);
}

.aguarde-titulo {
  margin: 22px 0 0;
  font: 700 19px/1.3 var(--font); color: var(--ink);
}

.aguarde-sub {
  margin: 10px 0 0;
  font: 400 14px/1.5 var(--font); color: var(--ink-2);
}

.aguarde-sair {
  margin-top: 24px;
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: var(--btn-r);
  background: transparent; color: var(--ink);
  font: 600 15px/1 var(--font); cursor: pointer;
}
.aguarde-sair:active { background: var(--surface); }

/* Trava a rolagem do fundo enquanto a espera está aberta. */
body.sem-rolagem { overflow: hidden; }

/* Quem pediu menos movimento não recebe o giro; o anel fica estático e a
   mensagem continua dizendo o que está havendo. */
@media (prefers-reduced-motion: reduce) {
  .aguarde { animation: none; }
  .aguarde-anel { animation: none; }
}