/* ============================================================
   LISTA DE ESPERA DE PROMOCOES — /lista-espera-promocoes/
   Carrega so nesta rota (enqueue em inc/lista-espera.php).
   Breakpoints do tema: 1220 / 970 / 680.
   ============================================================ */

/* O #header do tema e position: fixed e nao reserva espaco. O padding-top que
   o base.css poe no body seria a compensacao, mas nesta rota o global-styles
   do proprio WordPress o zera (mesmo tropeco do /fnrh) — entao quem afasta o
   conteudo e o breadcrumb: 56px de header + os 16px de respiro. */
body.qs-lista-espera #breadcrumb { padding-top: 72px; }

.lep { padding: 30px 0px 80px 0px; background-color: #fff; }

.lep .lep-caixa {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: var(--surface);
}

/* ---------- coluna do texto ---------- */

.lep .lep-texto h1 {
  margin-bottom: 14px;
  font-size: 30px; font-weight: 900; line-height: 1.2;
  color: var(--darkblue);
}
.lep .lep-lead { font-size: 16px; line-height: 1.6; color: var(--black); }

.lep .lep-vantagens { margin-top: 24px; }
.lep .lep-vantagens li {
  position: relative;
  padding-left: 26px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.5; color: var(--black);
}
/* o mesmo marcador do bloco "por que reservar em nosso site" */
.lep .lep-vantagens li::before {
  content: ''; position: absolute; left: 0px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background-color: var(--blue);
}

/* ---------- formulario ---------- */

.lep .lep-form-col {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: #fff;
}

.lep .lep-campo { display: block; margin-bottom: 16px; }
.lep .lep-campo span {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--darkblue);
}
.lep .lep-campo input {
  width: 100%; height: 46px; padding: 0px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background-color: #fff; font-size: 15px; color: var(--black);
}
.lep .lep-campo input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0px 0px 0px 3px rgba(0, 86, 145, .12);
}
.lep .lep-campo input::placeholder { color: #9aa5ad; }

.lep .lep-enviar {
  width: 100%; min-height: 48px; margin-top: 6px;
  border: none; border-radius: var(--radius-card);
  background-color: var(--yellow); color: var(--darkblue);
  font-size: 15px; font-weight: 900; text-transform: uppercase;
  cursor: pointer; transition: background-color .2s ease;
}
.lep .lep-enviar:hover { background-color: #ffc46a; }
.lep .lep-enviar[disabled] { opacity: .6; cursor: default; }

.lep .lep-msg {
  margin-top: 12px;
  font-size: 13px; font-weight: 700; color: var(--darkblue);
}
.lep .lep-msg.qs-kommo-erro { color: #c0392b; }

.lep .lep-aviso { margin-top: 14px; font-size: 12px; line-height: 1.5; color: #6b7780; }

/* honeypot: fora da tela, sem display:none (bot ignora o que esta oculto).
   A regra existe em conta.css, mas aquele arquivo nao carrega nesta rota. */
.lep .lep-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- confirmacao ---------- */

.lep .lep-pronto { text-align: center; padding: 10px 0px; }
.lep .lep-pronto strong {
  display: block; margin-bottom: 10px;
  font-size: 20px; font-weight: 900; color: var(--darkblue);
}
.lep .lep-pronto p { margin-bottom: 22px; font-size: 15px; line-height: 1.6; color: var(--black); }
.lep .lep-voltar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0px 26px;
  border-radius: var(--radius-card);
  background-color: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
}
.lep .lep-voltar:hover { background-color: var(--darkblue); color: #fff; }

/* ---------- telas menores ---------- */

@media (max-width: 970px) {
  .lep .lep-caixa { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .lep .lep-texto h1 { font-size: 26px; }
}

@media (max-width: 680px) {
  .lep { padding: 18px 0px 48px 0px; }
  .lep .lep-caixa { padding: 20px; }
  .lep .lep-texto h1 { font-size: 23px; }
  .lep .lep-lead { font-size: 15px; }
  .lep .lep-form-col { padding: 18px; }
}