/*
 * BTROK — LISTA DE ESPERA
 * Arquivo exclusivo do campo de e-mail, botão e mensagens de retorno.
 * O endpoint de armazenamento é definido no atributo action do formulário em index.html.
 */

/* Largura e espaçamento geral do formulário. */
.waitlist-form { margin-top: 13px; max-width: 450px; width: 100%; }
.waitlist-form label { color: #00aeef; display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 8px; }

/* Desktop: e-mail e botão ficam lado a lado. */
.waitlist-row { display: flex; gap: 8px; }
.waitlist-row input {
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  flex: 1;
  font-family: Manrope, Arial, sans-serif;
  font-size: 12px;
  min-width: 0;
  outline: none;
  padding: 12px 15px;
}
.waitlist-row input:focus { border-color: #00aeef; }
.waitlist-row input::placeholder { color: rgba(255, 255, 255, .5); }

/* EDIÇÃO RÁPIDA: altere cores, texto ou dimensões do botão aqui. */
.waitlist-row button {
  align-items: center;
  background: #00aeef;
  border: 0;
  color: #000;
  cursor: pointer;
  display: flex;
  font-family: Manrope, Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  letter-spacing: .07em;
  min-height: 40px;
  padding: 0 16px;
  text-transform: uppercase;
  transition: background-color .16s ease, transform .16s ease;
}
.waitlist-row button:hover { background: #fff; }
.waitlist-row button:active { transform: scale(.97); }
.waitlist-row button:disabled { cursor: wait; opacity: .65; }

/* Honeypot anti-spam: não remover do HTML nem tornar visível. */
.website-field { height: 0; left: -9999px; opacity: 0; position: absolute; width: 0; }

/* Mensagem de sucesso ou erro exibida por waitlist.js. */
.waitlist-status { font-size: 10px; line-height: 1.45; margin: 10px 0 0; min-height: 15px; }
.waitlist-status.success { color: #bff5ff; }
.waitlist-status.error { color: #ffd0d0; }

/* Mobile: formulário em duas linhas para preservar a leitura. */
@media (max-width: 700px) {
  .waitlist-form { margin-top: 10px; max-width: 310px; }
  .waitlist-row { flex-direction: column; }
  .waitlist-row input { padding: 12px 14px; }
  .waitlist-row button { min-height: 38px; padding: 0 12px; }
}