/* PSG Quote calculator — inherits the site palette via CSS variables
   (--psg-* defined by the child theme; safe fallbacks provided). */
.psgq{
  --g:var(--psg-green,#0B7A38); --gh:var(--psg-green-hover,#096530);
  --y:var(--psg-orange,#E67817); --yh:var(--psg-orange-hover,#C96510);
  --blue:var(--psg-blue,#007CC2); --ink:var(--psg-ink,#1F2937);
  --muted:var(--psg-muted,#5B6573); --surface:var(--psg-surface,#F4F7FA);
  --card:var(--psg-white,#fff); --border:var(--psg-border,rgba(14,34,51,.12));
  --radius:var(--psg-radius,14px);
  font-family:var(--psg-font,inherit);color:var(--ink);max-width:860px;margin:0 auto;
}
.psgq *{box-sizing:border-box;}
.psgq-title{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 6px;}
.psgq-sub{color:var(--muted);margin:0 0 22px;}

.psgq-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.psgq-lines{display:flex;flex-direction:column;gap:14px;}
.psgq-line{display:grid;grid-template-columns:1.6fr .8fr .8fr .6fr;gap:10px;align-items:center;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 40px 12px 12px;}
.psgq-line input{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;background:var(--card);color:var(--ink);font-family:inherit;}
.psgq-line input:focus{outline:none;border-color:var(--psg-brand,#00923F);box-shadow:0 0 0 3px rgba(0,146,63,.15);}
.psgq-readout{grid-column:1/-1;font-size:14px;color:var(--ink);min-height:18px;}
.psgq-readout .psgq-por{color:var(--blue);font-weight:700;}
.psgq-readout .psgq-warn{color:#c0392b;font-weight:600;}
.psgq-readout .psgq-muted,.psgq-muted{color:var(--muted);}
.psgq-remove{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(192,57,43,.12);color:#c0392b;font-size:18px;line-height:1;cursor:pointer;}

.psgq-add{margin:14px 0 4px;background:none;border:2px dashed var(--border);color:var(--ink);font-weight:600;padding:12px;border-radius:10px;width:100%;cursor:pointer;}
.psgq-add:hover{border-color:var(--g);color:var(--g);}

.psgq-extras{border:1px solid var(--border);border-radius:10px;padding:14px;margin:18px 0;}
.psgq-extras legend{font-weight:700;padding:0 6px;color:var(--ink);}
.psgq-check{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--ink);}
.psgq-check input,.psgq-privacy input{width:18px;height:18px;accent-color:var(--g);}

.psgq-summary{margin:16px 0;border-radius:10px;}
.psgq-summary.is-sale{background:var(--surface);border:1px solid var(--border);padding:16px;}
.psgq-summary.is-lead{background:rgba(0,124,194,.08);border:1px solid rgba(0,124,194,.25);padding:16px;display:flex;flex-direction:column;gap:4px;}
.psgq-tot{display:flex;justify-content:space-between;padding:5px 0;}
.psgq-grand{font-size:20px;font-weight:800;border-top:2px solid var(--ink);margin-top:6px;padding-top:10px;}

.psgq-customer{border:1px solid var(--border);border-radius:10px;padding:14px;margin:8px 0 16px;}
.psgq-customer legend{font-weight:700;padding:0 6px;}
.psgq-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.psgq-grid2 input{padding:12px;border:1px solid var(--border);border-radius:8px;font-size:15px;background:var(--card);color:var(--ink);font-family:inherit;width:100%;}
.psgq-grid2 input:focus{outline:none;border-color:var(--psg-brand,#00923F);box-shadow:0 0 0 3px rgba(0,146,63,.15);}

.psgq-privacy{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin:8px 0 16px;}
/* 2026-09-10 (owner): the label was display:flex, so each inline piece
   ("I agree to the" / the link / "and to being contacted...") became its own
   flex item and rendered as three ragged columns on mobile. Block label with
   a floated checkbox keeps it one flowing sentence at any width. */
.psgq-privacy input{float:left;margin:2px 10px 0 0;}
.psgq-privacy a{color:var(--psg-brand-dark,#0B7A38);font-weight:600;}
.psgq-error{color:#c0392b;font-weight:600;margin:0 0 12px;}

.psgq-submit{background:var(--y);color:var(--psg-btn-ink,#14231A);border:0;border-radius:10px;padding:15px 26px;font-size:17px;font-weight:800;width:100%;cursor:pointer;}
.psgq-submit:hover{background:var(--yh);}
.psgq-submit:disabled{opacity:.6;cursor:default;}

.psgq-result{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;text-align:center;}
.psgq-result h2{margin:0 0 8px;}
.psgq-result.is-sale .psgq-grand{justify-content:center;gap:18px;border:0;}
.psgq-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.psgq-pay{background:var(--g);color:#fff;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:10px;}
.psgq-pay:hover{background:var(--gh);}
.psgq-pdf{background:transparent;border:2px solid var(--blue);color:var(--blue);text-decoration:none;font-weight:700;padding:12px 24px;border-radius:10px;}

@media (max-width:640px){
  .psgq-line{grid-template-columns:1fr 1fr;padding:12px 12px 12px 12px;}
  .psgq-line .psgq-desc{grid-column:1/-1;}
  .psgq-remove{position:static;justify-self:end;grid-column:2;width:100%;border-radius:8px;height:38px;}
  .psgq-grid2{grid-template-columns:1fr;}
}