/* =========================================================
   vietisrael.com — shared LEAD FORM styles
   ---------------------------------------------------------
   Used by the three new lead pages (kosher / vegetarian / English) via
   js/lead-form.js. The option cards reuse `.pi-check` from
   css/plan-intent.css on purpose — one visual language, not two.

   Load order matters: plan-intent.css BEFORE this file.
   Compact by design (mobile-first): the whole form is a handful of short
   rows, so it never becomes an endless scroll on a phone.
   ========================================================= */

.lf-form{margin:0;}
.lf-group{margin-bottom:14px;}
.lf-group .pi-label{margin-bottom:7px;}

/* Two columns on a phone-friendly grid; the shared .pi-check handles the
   "selected" look, so nothing is duplicated here. */
.lf-options{gap:8px;margin-top:0;}

.lf-intent{margin:12px 0 6px;}

/* ---- contact fields: side by side when there is room, stacked on a phone ---- */
.lf-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.lf-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.lf-field>span{font-weight:600;font-size:14px;color:var(--ink);}
.lf-field input,.lf-field textarea{
  width:100%;min-width:0;padding:11px;border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:15px;background:var(--white);color:var(--ink);
}
.lf-field input::placeholder,.lf-field textarea::placeholder{color:#b7c2bc;}
.lf-field textarea{resize:vertical;}
.lf-contact+.lf-field{margin-bottom:12px;}

.lf-actions{margin-top:6px;}
.lf-fineprint{font-size:12.5px;color:var(--ink-soft);text-align:center;margin:10px 0 0;}

.lf-success{
  margin-top:14px;background:var(--green-50);border:1px solid var(--green-200);
  border-radius:12px;padding:14px;text-align:center;color:var(--green-darker);
  font-weight:600;font-size:14.5px;line-height:1.6;
}
.lf-reopen{margin-top:10px;}

/* ⚠️ CRITICAL — do not remove.
   `.btn` (css/style.css) sets `display:inline-flex`, and an AUTHOR stylesheet
   beats the browser's built-in `[hidden]{display:none}` on specificity. So
   setting `el.hidden = true` on a button or link does NOTHING here: the element
   stays on screen. That made the "reopen in WhatsApp" link render from page
   load as a second, dead green WhatsApp button next to the submit button —
   reported on all three lead pages. Any element this component hides must have
   the rule below. Same fix the tours tool already carries
   (`.tours-page [hidden]`), and the reason js/vietplan.js / js/cart-page.js set
   `style.display` in addition to `hidden`. */
.lf-form [hidden],.lf-reopen[hidden],.lf-success[hidden]{display:none!important;}

@media(max-width:520px){
  .lf-contact{grid-template-columns:1fr;}
  .lf-options .pi-check{flex:1 1 100%;}
}