/* Overlay e modal */
.gate-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:2000}
.gate-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:2001}
.gate-overlay[hidden],.gate-modal[hidden]{display:none}

/* Card 4:5 com banner */
.gate-card{
  width:min(640px,92vw);
  aspect-ratio: 4 / 5;
  max-height: 92vh;
  display:flex; flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.35);
}

/* Banner topo (pode trocar por imagem) */
.gate-banner{
  position:relative; height:28%;
  background: linear-gradient(135deg,#4b1aa6 0%, #7d37ff 100%);
  display:flex; align-items:center; justify-content:center;
}
.gate-banner img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.gate-banner .banner-text{
  position:absolute; inset:auto 0 12px 0; text-align:center; color:#fff;
  font-weight:800; font-size:18px; letter-spacing:.2px; text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Área de conteúdo do formulário */
.gate-main{
  flex:1; display:flex; flex-direction:column;
  padding:20px 22px;
}

/* Título e divisor fino */
.gate-header{
  display:flex; align-items:center; justify-content:space-between; padding:0 2px 10px; border-bottom:1px solid #eee;
}
.gate-title{margin:0; font-size:22px; font-weight:800; color:#111}

/* Corpo do form */
.gate-body{ padding:16px 2px; display:grid; gap:14px; overflow:auto }
.gate-row{display:grid; gap:8px}
.gate-label{font-size:13px; color:#333}
.gate-input{
  width:100%; font-size:16px; line-height:1.25; padding:12px 14px;
  border:1px solid #ddd; border-radius:12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  background:#fafafa;
}
.gate-input:focus{
  border-color:#b9a8ff; box-shadow:0 0 0 4px rgba(57,0,148,.14); background:#fff;
}
.gate-note{ font-size:13px; color:#555; }

/* CTA centralizado e maior */
.gate-actions{ display:flex; justify-content:center; padding-top:6px }
.gate-btn{
  appearance:none; border:0; cursor:pointer; border-radius:12px;
  padding:14px 22px; font-weight:500; font-size:15px;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.gate-btn.primary{
  background:#390094; color:#fff; min-width: 240px;
  box-shadow:0 10px 24px rgba(57,0,148,.35);
}
.gate-btn.primary:hover{ filter:brightness(1.05) }
.gate-btn.primary:active{ transform:translateY(1px) }

/* Mensagens de status (aria-live) */
.gate-status{
  margin-top:6px; display:grid; gap:8px;
}
.status-line{
  display:flex; align-items:center; gap:10px; border-radius:10px;
  padding:10px 12px; font-size:14px; line-height:1.2; border:1px solid transparent;
  opacity:0; transform:translateY(4px); transition:opacity .28s ease, transform .28s ease;
}
.status-line.appear{ opacity:1; transform:none; }
.status-line .icon{ width:18px; height:18px; flex:0 0 18px; display:inline-grid; place-items:center; }

/* Verde sucesso */
.status-success{ background:#19a463; color:#fff; border-color:#0f7b49 }
/* Progresso neutro */
.status-progress{ background:#f1effb; color:#2b0063; border-color:#d6ccff }
/* Erro */
.status-error{ background:#ffe9e9; color:#9a0921; border-color:#ffb7b7 }

/* Bloqueio de scroll no body */
.body-lock{overflow:hidden}

/* Mobile */
@media (max-width: 480px){
  .gate-card{ aspect-ratio:auto; height:auto; }
  .gate-banner{ height:26%; }
  .gate-title{ font-size:20px; }
}