/* ============================================================
   ROSSANA RUIZ · forms.css — Formulario de contacto progresivo
   ------------------------------------------------------------
   Chips tipo pill, revelado progresivo por intención, input de
   WhatsApp con código de país, validación inline y panel de
   éxito. Complementa a main.css (usa sus tokens y .field/.btn).
   ============================================================ */

/* ----------------------- Honeypot (bots) ----------------------- */
.hp-field{
  position:absolute !important;
  left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

/* -------------------- Grupos de chips (radio) ------------------- */
.chip-group{border:0;margin:0 0 1.35rem;padding:0;min-width:0}
.chip-group legend{
  display:block;width:100%;padding:0;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem;font-weight:500;
}
.chip-group legend .opt,
.field label .opt{
  color:rgba(255,255,255,.42);text-transform:none;letter-spacing:.05em;
  font-weight:400;margin-left:.35em;
}

.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative;display:inline-flex}
.chip input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;
}
.chip input:disabled{cursor:default}
.chip span{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:.62em 1.15em;border-radius:100px;
  border:1px solid rgba(206,174,122,.45);
  color:rgba(255,255,255,.85);
  font-size:.9rem;line-height:1.3;font-weight:400;letter-spacing:.01em;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.chip:hover span{border-color:var(--gold);color:#fff;transform:translateY(-1px)}
.chip input:checked + span{
  background:var(--gold);border-color:var(--gold);color:var(--navy-900);
  font-weight:500;box-shadow:0 10px 24px -12px rgba(206,174,122,.75);
}
.chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}

/* Chips grandes del paso 1 (Comprar · Vender · Alquilar) */
.chips-intent{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.chips-intent .chip{display:flex}
.chips-intent .chip span{
  width:100%;padding:.95em 1rem;font-size:1.02rem;letter-spacing:.02em;
}

/* ------------------ Revelado progresivo (pasos) ----------------- */
.f-step{
  max-height:0;opacity:0;overflow:hidden;visibility:hidden;
  transform:translateY(8px);
  transition:max-height .55s var(--ease),opacity .4s var(--ease),
             transform .4s var(--ease),visibility 0s linear .55s;
}
.f-step.open{
  max-height:1000px;opacity:1;visibility:visible;transform:none;
  transition:max-height .6s var(--ease),opacity .55s var(--ease) .12s,
             transform .55s var(--ease) .12s,visibility 0s;
}

/* --------------- WhatsApp: código de país + número -------------- */
.phone-row{display:flex;gap:.6rem}
.phone-row select{
  width:auto;flex:0 0 auto;min-width:122px;
  padding-right:2.5em;font-variant-numeric:tabular-nums;
}
.phone-row input{flex:1;min-width:0}

/* El date picker nativo, en oscuro (icono visible sobre navy) */
.f-step input[type="date"]{color-scheme:dark}
.f-step input[type="date"]::-webkit-calendar-picker-indicator{opacity:.7}

/* --------------------- Validación inline ------------------------ */
.f-err{
  display:none;margin-top:.55rem;
  font-size:.82rem;line-height:1.4;color:#F0B9A6;font-weight:400;
}
.f-err.show{display:block;animation:errin .35s var(--ease)}
@keyframes errin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.field.invalid input,
.field.invalid select,
.field.invalid textarea{border-color:#D98876}
.field.invalid input:focus,
.field.invalid select:focus,
.field.invalid textarea:focus{border-color:#D98876}
.chip-group.invalid .chip span{border-color:rgba(217,136,118,.75)}

/* Error general del envío (arriba del botón) */
.f-form-err{margin:0 0 .4rem;text-align:center}
.f-form-err.show{margin-bottom:1rem}

/* ------------------------ Botón de envío ------------------------ */
#fSubmit[disabled]{opacity:.55;pointer-events:none}

/* Nota de uso de datos: va pegada a la nota del formulario, no separada
   con el mismo aire (son dos renglones del mismo bloque). */
.form-note + .form-note{margin-top:.5rem}

/* --------------------- Panel de éxito ---------------------------- */
.form-ok:focus{outline:none}
.form-ok .btn{margin-top:1.7rem;width:auto}
.form-ok #okTitle{color:#fff}

/* El atributo hidden tiene que ganarle a .btn{display:inline-flex}
   de main.css (si no, el botón de Calendly se ve igual sin URL). */
.form-ok [hidden]{display:none}

/* Con Calendly cargado el panel muestra dos acciones: agendar (oro
   sólido, principal) y WhatsApp (contorno claro, alternativa). Todo
   esto se activa desde form.js con la clase .has-calendly, así el
   panel de siempre —solo WhatsApp— no cambia en nada. */
.form-ok.has-calendly .btn{margin-top:1.25rem;margin-inline:.3rem;vertical-align:top}
.form-ok.has-calendly #okCalendly{
  background:var(--gold);border-color:var(--gold);color:var(--navy-900);font-weight:500;
}
.form-ok.has-calendly #okCalendly:hover{
  background:var(--gold-soft);border-color:var(--gold-soft);
  color:var(--navy-900);transform:translateY(-3px);
}
.form-ok.has-calendly #okCalendly:hover svg{transform:translateX(4px)}
.form-ok #okCalendlySub{
  margin-top:.85rem;font-size:.82rem;letter-spacing:.01em;
  color:rgba(255,255,255,.55);font-weight:300;
}

/* ------------------------- Responsive --------------------------- */
@media(max-width:600px){
  .chips-intent{grid-template-columns:1fr}
  .phone-row{flex-wrap:nowrap}
  .phone-row select{min-width:108px}
  /* Los botones del panel de éxito son .btn, o sea white-space:nowrap: su
     ancho mínimo (315px + el padding de la tarjeta) estiraba la columna del
     grid y la .form-card se salía 20px de la pantalla. Acá pasan a ocupar el
     ancho disponible y su texto puede partirse en dos renglones.
     Con Calendly cargado quedan una debajo de la otra, alineadas. */
  .form-ok .btn{display:flex;justify-content:center;width:100%;margin-inline:0;
    white-space:normal;text-align:center;line-height:1.25}
  .form-ok.has-calendly .btn{margin-top:1.25rem;margin-inline:0}
}