/* Forms with e-sign (caregiver-form, client-form). Builds on styles.css tokens. */
.form-section { padding: 48px 0 80px; }
.form-section .container { max-width: 860px; }
#waf-form { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px; }
.progress { margin-bottom: 28px; }
.progress .bar { height: 6px; background: #EEE9E1; border-radius: 6px; overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--green); width: 0; transition: width .4s ease; }
.progress ol { list-style: none; display: flex; justify-content: space-between; margin: 14px 0 0; padding: 0; gap: 6px; }
.progress li { display: flex; align-items: center; gap: 8px; font-size: .75rem; line-height: 1.2; color: #8a8f98; flex: 1; min-width: 0; }
.progress li b { width: 26px; height: 26px; border-radius: 50%; background: #EEE9E1; color: #8a8f98; display: grid; place-items: center; font-size: .75rem; flex: none; }
.progress li span { overflow: hidden; }
.progress li.on { color: var(--blue); font-weight: 600; }
.progress li.on b { background: var(--green); color: #fff; }
.progress li.done b { background: var(--blue); color: #fff; }
.step h2 { color: var(--green); font-size: 1.5rem; margin: 0 0 6px; }
.step .note { color: #555; margin: 0 0 18px; }
.intro { background: var(--off-white); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px; font-size: .9rem; color: #444; }
.intro summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.intro p { margin: 10px 0 0; line-height: 1.55; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.fg { grid-column: 1 / -1; margin-bottom: 20px; }
.fg.half { grid-column: span 1; }
.fh { grid-column: 1 / -1; font-size: 1.05rem; color: var(--blue); margin: 10px 0 14px; padding-top: 14px; border-top: 1px solid #F0ECE5; }
.fg label { display: block; margin-bottom: 8px; font-weight: 500; font-size: .95rem; color: var(--blue); }
.req { color: var(--coral); }
.fg input:not([type=checkbox]):not([type=radio]):not([type=file]), .fg select, .fg textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--gray); border-radius: var(--radius); font-size: 1rem; font-family: inherit; background: #fff; transition: var(--transition); -webkit-appearance: none; }
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(61,166,142,.12); }
.fg textarea { resize: vertical; min-height: 90px; }
.hint { display: block; margin-top: 6px; font-size: .82rem; color: #6b7280; line-height: 1.4; }
.err { color: #C0392B; font-size: .85rem; margin-top: 6px; min-height: 0; }
.fg.bad input, .fg.bad select, .fg.bad textarea, .fg.bad .chips, .fg.bad .upload, .fg.bad .sigwrap { border-color: #C0392B !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid transparent; border-radius: var(--radius); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: 10px 16px; border: 1px solid var(--gray); border-radius: 30px; font-size: .95rem; cursor: pointer; transition: var(--transition); background: #fff; user-select: none; }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(61,166,142,.2); }
.upload { display: block; border: 2px dashed var(--gray); border-radius: var(--radius); padding: 18px; text-align: center; cursor: pointer; background: var(--off-white); transition: var(--transition); margin: 0; }
.upload:hover { border-color: var(--green); }
.upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload-ui { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--blue); }
.upload-ui i { font-size: 1.6rem; color: var(--green); margin-bottom: 4px; }
.upload-ui small { color: #6b7280; font-size: .8rem; }
.upload.has { border-style: solid; border-color: var(--green); background: #EEF8F4; }
.upload.has .upload-ui { display: none; }
.upload-name { color: var(--green); font-weight: 600; word-break: break-all; }
.fg label.agree { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; line-height: 1.5; color: #333; cursor: pointer; margin: 0; font-weight: 400 !important; }
.agree input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--green); }
.sigwrap { border: 1px solid var(--gray); border-radius: var(--radius); overflow: hidden; background: #fff; }
.sigwrap canvas { display: block; width: 100%; height: 180px; touch-action: none; background: #FFFDF9; }
.sigbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: .82rem; color: #6b7280; border-top: 1px dashed var(--gray); }
.link { background: none; border: 0; color: var(--green); font: inherit; font-weight: 600; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 20px; border-top: 1px solid #F0ECE5; }
.autosave { font-size: .8rem; color: #8a8f98; }
.submit-msg { margin: 14px 0 0; font-size: .9rem; color: #555; text-align: center; }
.submit-msg.bad { color: #C0392B; }
.cf-turnstile { margin: 10px 0; }
.done { text-align: center; padding: 30px 10px; }
.done h2 { color: var(--green); margin: 0 0 10px; }
.done p { margin: 0 0 14px; color: #444; }
.done .btn { margin-top: 10px; }
.secure-note { text-align: center; color: #6b7280; font-size: .85rem; margin: 18px 0 0; }
.secure-note i { color: var(--green); }
@media (max-width: 640px) {
  .form-section { padding: 24px 0 60px; }
  #waf-form { padding: 22px 16px; border-radius: var(--radius); }
  .grid { grid-template-columns: 1fr; }
  .fg.half { grid-column: 1 / -1; }
  .progress li span { display: none; }
  .progress li.on span { display: inline; font-size: .72rem; }
  .progress li { flex: 0 0 auto; gap: 6px; }
  .progress li b { width: 22px; height: 22px; font-size: .68rem; }
  .progress ol { gap: 4px; }
  .progress li.on { flex: 1; }
  .nav .btn { padding: 12px 18px; }
  .autosave { display: none; }
}

.fh-hint { grid-column: 1 / -1; margin: -8px 0 10px; }