/* =====================================================================
   Cerrajeros 24 Horas Bogotá - Modal de captación de leads por WhatsApp
   Archivo: css/wa-lead-modal.css
   ===================================================================== */

/* Variables de marca */
:root{
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;
  --wa-ink:#0b2a25;
  --wa-text:#20323a;
  --wa-muted:#6b7b82;
  --wa-border:#e3e8ea;
  --wa-error:#e23c3c;
}

/* Overlay */
.wa-lead-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000; /* por encima de todo */
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(6,20,17,.55);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  box-sizing:border-box;
}
.wa-lead-overlay.wa-open{ display:flex; animation:waFade .18s ease; }
@keyframes waFade{ from{opacity:0} to{opacity:1} }

/* Caja */
.wa-lead-modal{
  width:100%;
  max-width:420px;
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--wa-text);
  animation:waPop .2s ease;
  box-sizing:border-box;
}
@keyframes waPop{ from{transform:translateY(12px) scale(.98);opacity:0} to{transform:none;opacity:1} }

/* Cabecera */
.wa-lead-head{
  position:relative;
  background:linear-gradient(135deg,var(--wa-green) 0%,var(--wa-green-dark) 100%);
  color:#fff;
  padding:20px 22px 18px;
  border-radius:16px 16px 0 0;
}
.wa-lead-head h3{
  margin:0 0 4px;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  color:#fff;
}
.wa-lead-head p{
  margin:0;
  font-size:13px;
  line-height:1.4;
  opacity:.95;
  color:#fff;
}
.wa-lead-wa-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  margin-bottom:8px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.wa-lead-wa-icon svg{ width:20px;height:20px;fill:#fff; }

/* Botón cerrar */
.wa-lead-close{
  position:absolute;
  top:12px;right:12px;
  width:30px;height:30px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:20px;line-height:1;
  cursor:pointer;
  transition:background .15s;
}
.wa-lead-close:hover{ background:rgba(255,255,255,.35); }

/* Cuerpo / formulario */
.wa-lead-body{ padding:18px 22px 22px; }
.wa-lead-field{ margin-bottom:13px; }
.wa-lead-field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--wa-ink);
  margin-bottom:5px;
}
.wa-lead-field label .req{ color:var(--wa-error); }
.wa-lead-field input,
.wa-lead-field select,
.wa-lead-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  font-size:14px;
  color:var(--wa-text);
  background:#fff;
  border:1.5px solid var(--wa-border);
  border-radius:10px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  font-family:inherit;
}
.wa-lead-field textarea{ resize:vertical;min-height:64px; }
.wa-lead-field input:focus,
.wa-lead-field select:focus,
.wa-lead-field textarea:focus{
  border-color:var(--wa-green);
  box-shadow:0 0 0 3px rgba(37,211,102,.15);
}
.wa-lead-field.wa-invalid input,
.wa-lead-field.wa-invalid select{
  border-color:var(--wa-error);
  box-shadow:0 0 0 3px rgba(226,60,60,.12);
}
.wa-lead-err{
  display:none;
  font-size:11.5px;
  color:var(--wa-error);
  margin-top:4px;
}
.wa-lead-field.wa-invalid .wa-lead-err{ display:block; }

/* Honeypot: oculto para humanos, accesible para bots */
.wa-hp{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px;height:1px;
  opacity:0;
  overflow:hidden;
}

/* Botón enviar */
.wa-lead-submit{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 16px;
  margin-top:4px;
  font-size:15px;
  font-weight:700;
  color:#fff;
  background:var(--wa-green);
  border:0;
  border-radius:11px;
  cursor:pointer;
  transition:background .15s,transform .05s;
}
.wa-lead-submit:hover{ background:#1eb757; }
.wa-lead-submit:active{ transform:translateY(1px); }
.wa-lead-submit:disabled{ opacity:.65;cursor:default; }
.wa-lead-submit svg{ width:19px;height:19px;fill:#fff; }

.wa-lead-note{
  margin:12px 0 0;
  font-size:11px;
  line-height:1.45;
  color:var(--wa-muted);
  text-align:center;
}

/* Spinner de envío */
.wa-spin{
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:waSpin .7s linear infinite;
}
@keyframes waSpin{ to{transform:rotate(360deg)} }

/* Botón flotante nuevo (reemplaza al viejo cuando aplica) */
.wa-float-btn{
  position:fixed;
  right:18px;bottom:18px;
  z-index:2147482000;
  width:58px;height:58px;
  border-radius:50%;
  background:var(--wa-green);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  border:0;
  animation:waFloatIn .4s ease;
}
.wa-float-btn svg{ width:32px;height:32px;fill:#fff; }
.wa-float-btn:hover{ background:#1eb757; }
@keyframes waFloatIn{ from{transform:scale(0);opacity:0} to{transform:none;opacity:1} }

@media (max-width:480px){
  .wa-lead-modal{ max-width:100%; border-radius:14px; }
  .wa-lead-head{ padding:18px 18px 16px; }
  .wa-lead-body{ padding:16px 18px 20px; }
}