/* =========================================================
   vietisrael.com — "דיוק הפנייה" block (shared component styles)
   ---------------------------------------------------------
   ONE visual language for the commitment layer that lives on the
   trip tools (vietplan / ha-giang / tours) and on the new lead pages
   (kosher / vegetarian / English).

   Deliberately re-uses the EXISTING design tokens from css/style.css
   (--green-*, --border, --radius-sm, --ink…) and mirrors the site's
   established chip look (.vp-chip / .hg-vehicle-chip), so no new
   design language is introduced.

   Compact by design: the whole block is ~3 short rows, so it never
   pushes the WhatsApp button off a phone screen.
   ========================================================= */

.pi-block{margin:14px 0 4px;}
.pi-block .pi-label{
  display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:6px;
}
.pi-block .pi-opt{font-weight:400;font-size:12.5px;color:var(--ink-soft);}

/* ---- "where are you right now?" — one tap, two friendly options ---- */
.pi-intent{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pi-intent-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;border:2px solid var(--border);border-radius:10px;
  background:var(--white);cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink);text-align:center;
  transition:border-color .15s,background .15s,color .15s;
  min-height:46px;
}
.pi-intent-btn:hover{border-color:var(--green-pastel);}
.pi-intent-btn.is-on{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}

/* ---- optional exact date range ---- */
.pi-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.pi-dates[hidden]{display:none;}
.pi-date{display:flex;flex-direction:column;gap:4px;min-width:0;}
.pi-date span{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.pi-date input{
  width:100%;min-width:0;padding:10px;border:1px solid var(--border);
  border-radius:8px;font-family:inherit;font-size:15px;background:var(--white);color:var(--ink);
}
.pi-date input:disabled{background:var(--green-50);color:var(--ink-soft);}

/* ---- two optional checkboxes, in one row ---- */
.pi-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.pi-check{
  display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:150px;
  padding:10px 12px;border:2px solid var(--border);border-radius:10px;
  background:var(--white);cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .15s,background .15s;
}
.pi-check:hover{border-color:var(--green-pastel);}
.pi-check.is-on{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}
.pi-check input{width:17px;height:17px;accent-color:var(--green-dark);flex-shrink:0;}

/* ---- budget per person (free text, USD) ---- */
.pi-budget{margin-top:10px;}
.pi-budget input{
  width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:15px;background:var(--white);color:var(--ink);
}
.pi-budget input::placeholder{color:#b7c2bc;}

/* ---- budget as a MANDATORY two-option choice (budgetMode:"choice") ----
   The visitor must answer "no limit in mind" OR name a ceiling, and the amount
   box only appears for the second answer. Visually this mirrors the intent
   buttons above on purpose: it is the same kind of one-tap decision, so it
   should not look like a different mechanism. */
.pi-budget-choice .pi-req{color:#c0392b;font-weight:700;}
.pi-budget-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pi-budget-choice-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;border:2px solid var(--border);border-radius:10px;
  background:var(--white);cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--ink);text-align:center;
  transition:border-color .15s,background .15s,color .15s;
  min-height:48px;line-height:1.25;
}
.pi-budget-choice-btn:hover{border-color:var(--green-pastel);}
.pi-budget-choice-btn.is-on{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}
.pi-budget-amount{margin-top:8px;}
/* `hidden` must actually hide it — the amount box is removed from view (not
   just emptied) whenever "no limit in mind" is chosen, so the two states can
   never appear to contradict each other. */
.pi-budget-amount[hidden]{display:none;}

/* Gentle inline validation message — never a scary red wall. */
.pi-note{display:none;margin-top:8px;font-size:13px;font-weight:600;color:var(--warn-text);}
.pi-note.is-on{display:block;}

/* English pages only: the shared block follows the page direction. */
.en-page .pi-block{text-align:left;}
.en-page .pi-budget input{text-align:left;}

@media(max-width:420px){
  .pi-checks{gap:6px;}
  .pi-check{min-width:0;flex:1 1 45%;font-size:13.5px;padding:9px 10px;}
  /* A narrow phone cannot fit two long Hebrew labels side by side without
     cramping both — stacking them keeps each one fully readable. */
  .pi-budget-choice-row{grid-template-columns:1fr;}
  .pi-budget-choice-btn{min-height:44px;}
}