/* =====================================================================
   Shared styles for the customer forms rendered by js/form-templates.js
   (renderFormBody + renderSignatureBlock). Loaded by both the customer
   portal (portal.html) and the admin app (pool-pro.html) so the form
   markup looks identical wherever it appears.
   ===================================================================== */

.hpsf-msg{flex:1;min-width:160px;align-self:center;font-size:var(--hps-text-sm);}
.hpsf-msg--error{color:var(--hps-danger,#c0392b);}

.hpsf-intro{font-size:var(--hps-text-sm);color:var(--hps-text-muted);line-height:1.55;margin:0 0 var(--hps-space-5);}
.hpsf-section{margin-bottom:var(--hps-space-5);padding-bottom:var(--hps-space-4);border-bottom:1px solid var(--hps-border);}
.hpsf-section:last-child{border-bottom:none;}
.hpsf-section--emphasis{background:rgba(178,106,0,0.06);border:1px solid rgba(178,106,0,0.25);border-radius:var(--hps-radius-md);padding:var(--hps-space-4);}
.hpsf-heading{font-family:var(--hps-font-heading);font-size:var(--hps-text-base);font-weight:700;color:var(--hps-primary);margin:0 0 var(--hps-space-2);}
.hpsf-note{font-size:var(--hps-text-xs);color:var(--hps-text-muted);margin:0 0 var(--hps-space-3);}
.hpsf-body{font-size:13px;color:var(--hps-text);line-height:1.6;margin:0 0 var(--hps-space-2);}
.hpsf-section--emphasis .hpsf-body{font-weight:600;}
.hpsf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hps-space-3) var(--hps-space-4);margin-top:var(--hps-space-2);}
.hpsf-field{display:flex;flex-direction:column;gap:5px;}
.hpsf-field:has(textarea),.hpsf-field:has(.hpsf-choices){grid-column:1 / -1;}
.hpsf-label{font-size:var(--hps-text-xs);font-weight:600;color:var(--hps-text-muted);text-transform:uppercase;letter-spacing:0.03em;}
.hpsf-req{color:var(--hps-danger,#c0392b);}
.hpsf-input{width:100%;padding:9px 11px;border:1px solid var(--hps-border);border-radius:var(--hps-radius-md);font-size:var(--hps-text-sm);font-family:inherit;color:var(--hps-text);background:var(--hps-surface);}
.hpsf-input:focus{outline:none;border-color:var(--hps-primary);box-shadow:0 0 0 3px rgba(10,35,66,0.1);}
.hpsf-money{display:flex;align-items:center;gap:6px;}
.hpsf-money span{color:var(--hps-text-muted);font-weight:600;}
.hpsf-choices{display:flex;flex-wrap:wrap;gap:8px 14px;}
.hpsf-choice{display:inline-flex;align-items:center;gap:7px;font-size:var(--hps-text-sm);color:var(--hps-text);cursor:pointer;}
.hpsf-choice input{width:16px;height:16px;accent-color:var(--hps-primary);}
.hpsf-readonly{font-size:var(--hps-text-sm);color:var(--hps-text);padding:7px 0;border-bottom:1px dotted var(--hps-border);min-height:20px;}
.hpsf-readonly--pill{display:inline-block;padding:3px 10px;border:none;background:var(--hps-bg-alt);border-radius:100px;font-weight:600;}
.hpsf-checklist{display:flex;flex-direction:column;gap:var(--hps-space-2);}
.hpsf-check{padding:10px 0;border-bottom:1px dotted var(--hps-border);}
.hpsf-check__label{font-size:13px;color:var(--hps-text);margin-bottom:6px;}
.hpsf-check__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.hpsf-check__notes{flex:1;min-width:160px;}
.hpsf-sign .hpsf-agree{margin:var(--hps-space-3) 0;}
.hpsf-sigpad{position:relative;border:1px dashed var(--hps-border);border-radius:var(--hps-radius-md);background:#fff;}
.hpsf-sig-canvas{display:block;width:100%;height:180px;border-radius:var(--hps-radius-md);touch-action:none;cursor:crosshair;}
.hpsf-sig-clear{position:absolute;top:8px;right:8px;font-size:12px;padding:4px 10px;border:1px solid var(--hps-border);border-radius:var(--hps-radius-sm);background:var(--hps-surface);color:var(--hps-text-muted);cursor:pointer;}
.hpsf-signed{display:flex;flex-wrap:wrap;gap:var(--hps-space-4);align-items:center;}
.hpsf-sig-img{max-width:260px;height:auto;border:1px solid var(--hps-border);border-radius:var(--hps-radius-md);background:#fff;}
.hpsf-signed__meta{display:flex;flex-direction:column;gap:var(--hps-space-2);}
@media(max-width:640px){.hpsf-grid{grid-template-columns:1fr;}}