/* ==========================================================================
   Pop-up de captação estilo WhatsApp — Gutierre Menezes
   Capta nome + telefone antes de mandar a pessoa pro WhatsApp da clínica.
   Identidade: Azul Profundo #162738, Azul Petróleo #1D4369, Dourado #BF7733.
   Familiaridade visual de WhatsApp (cabeçalho verde, balões), fontes da marca.
   Responsivo, sem inglês visível ao usuário. Prefixo gtr-lp- para não colidir.
   ========================================================================== */

.gtr-lp-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(22, 39, 56, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
  font-family: "Josefin Sans", system-ui, -apple-system, sans-serif;
}
.gtr-lp-overlay.is-open { opacity: 1; visibility: visible; }

.gtr-lp-card {
  width: 100%; max-width: 380px;
  background: #ece5dd;                 /* fundo de conversa, tom papel */
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(22, 39, 56, .4);
  transform: translateY(12px) scale(.98); transition: transform .22s ease;
  display: flex; flex-direction: column; max-height: 92vh;
}
.gtr-lp-overlay.is-open .gtr-lp-card { transform: translateY(0) scale(1); }

/* cabeçalho estilo app de conversa */
.gtr-lp-head {
  display: flex; align-items: center; gap: .7rem;
  background: #1D4369; color: #fff; padding: .85rem 1rem;
}
.gtr-lp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  background: #BF7733; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; overflow: hidden;
}
.gtr-lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gtr-lp-head-info { line-height: 1.25; min-width: 0; }
.gtr-lp-head-info b { display: block; font-size: .98rem; font-weight: 600; }
.gtr-lp-head-info span { font-size: .76rem; color: #cfe0ee; }
.gtr-lp-close {
  margin-left: auto; background: transparent; border: 0; color: #cfe0ee;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.gtr-lp-close:hover { color: #fff; }

/* corpo da conversa */
.gtr-lp-body { padding: 1rem; overflow-y: auto; }
.gtr-lp-msg {
  background: #fff; color: #223; border-radius: 10px 10px 10px 2px;
  padding: .7rem .85rem; font-size: .92rem; line-height: 1.45;
  box-shadow: 0 1px 1px rgba(22, 39, 56, .12); max-width: 92%;
  margin-bottom: .9rem;
}
.gtr-lp-msg b { color: #1D4369; }

.gtr-lp-form { display: flex; flex-direction: column; gap: .6rem; }
.gtr-lp-field { display: flex; flex-direction: column; gap: .25rem; }
.gtr-lp-input {
  width: 100%; padding: .7rem .8rem; font-size: .95rem;
  font-family: inherit; color: #223;
  background: #fff; border: 1.5px solid #d6cfc4; border-radius: 9px;
  transition: border-color .15s ease;
}
.gtr-lp-input:focus { outline: none; border-color: #1D4369; }
.gtr-lp-input.has-error { border-color: #c0392b; }
.gtr-lp-error { color: #c0392b; font-size: .78rem; margin-top: .1rem; }

.gtr-lp-submit {
  margin-top: .3rem; padding: .8rem 1rem; font-size: .98rem; font-weight: 600;
  font-family: inherit; color: #fff; cursor: pointer;
  background: #BF7733; border: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background .15s ease, opacity .15s ease;
}
.gtr-lp-submit:hover { background: #a9662b; }
.gtr-lp-submit:disabled { opacity: .6; cursor: default; }
.gtr-lp-submit svg { width: 20px; height: 20px; fill: currentColor; }

.gtr-lp-note {
  margin-top: .55rem; font-size: .72rem; color: #6b6257; text-align: center;
}

/* tela de sucesso */
.gtr-lp-success { text-align: center; padding: .5rem .2rem 1rem; }
.gtr-lp-success-ic {
  width: 56px; height: 56px; margin: 0 auto .7rem;
  background: #1D4369; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gtr-lp-success-ic svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2.5; }
.gtr-lp-success h3 { font-family: "Fraunces", Georgia, serif; color: #162738; font-size: 1.2rem; margin: 0 0 .4rem; }
.gtr-lp-success p { color: #4a453d; font-size: .9rem; line-height: 1.5; margin: 0; }
.gtr-lp-success b { color: #1D4369; }

@media (max-width: 420px) {
  .gtr-lp-card { max-width: 100%; }
}