/* ===========================================================
   Multi-step Form Wizard — shared by WAVE / Cooperative / Coop B
   =========================================================== */

.form-page { background: var(--grey-100); min-height: 100vh; padding-bottom: 80px; }

.form-header {
  padding: 40px 0 24px;
  background: linear-gradient(160deg, var(--navy), var(--blue));
  color: #fff;
}
.form-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.form-header h1 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 4px; }
.form-header p { color: #cfe0ff; margin: 0; }
.form-header .back-link { color: #dce8ff; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }

.progress-wrap { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--grey-300); padding: 16px 0; }
.progress-steps { display: flex; justify-content: space-between; margin-bottom: 10px; }
.progress-step { flex: 1; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--grey-500); position: relative; }
.progress-step.active { color: var(--blue); }
.progress-step.done { color: var(--green); }
.progress-track { height: 8px; border-radius: 99px; background: var(--grey-100); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green-light), var(--blue)); transition: width 320ms ease; }

.form-card {
  max-width: 760px; margin: 32px auto 0; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 36px; border: 1px solid var(--grey-100);
}
.step-title { font-size: 1.2rem; margin-bottom: 4px; }
.step-subtitle { color: var(--grey-500); font-size: 0.9rem; margin-bottom: 24px; }

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; color: var(--ink); }
.field label .req { color: var(--danger); margin-left: 2px; }
.field .hint { font-size: 0.78rem; color: var(--grey-500); margin-top: 4px; }
.field .error-msg { font-size: 0.78rem; color: var(--danger); margin-top: 4px; display: none; }
.field.invalid .error-msg { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger) !important; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--grey-300);
  font-size: 0.95rem; font-family: var(--font-body); color: var(--ink); background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent);
}
textarea { resize: vertical; min-height: 84px; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.option-pill {
  border: 1.5px solid var(--grey-300); border-radius: var(--radius-sm); padding: 12px 14px;
  cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; transition: all var(--transition);
  background: var(--white);
}
.option-pill:hover { border-color: var(--blue-light); }
.option-pill input { width: auto; margin: 0; accent-color: var(--blue); }
.option-pill.checked { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--white)); }

.consent-box { border: 1.5px solid var(--grey-300); border-radius: var(--radius-md); padding: 16px; display: flex; gap: 12px; background: var(--grey-50); }
.consent-box input { width: auto; margin-top: 3px; accent-color: var(--green); }
.consent-box p { margin: 0; font-size: 0.86rem; color: var(--grey-700); }

.notice-box { border-left: 4px solid var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--white)); padding: 16px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 0.9rem; color: var(--ink); }
.notice-box strong { display: block; margin-bottom: 4px; color: var(--navy); }

.payment-box { border: 1.5px dashed var(--grey-300); border-radius: var(--radius-md); padding: 18px; background: var(--grey-50); margin-bottom: 18px; }
.payment-box table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.payment-box td { padding: 5px 0; }
.payment-box td:first-child { color: var(--grey-500); width: 40%; }
.payment-box td:last-child { font-weight: 700; color: var(--navy); }

/* File Upload */
.upload-zone {
  border: 2px dashed var(--grey-300); border-radius: var(--radius-md); padding: 24px; text-align: center;
  cursor: pointer; transition: all var(--transition); background: var(--grey-50);
}
.upload-zone.drag-over { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--white)); }
.upload-zone .icon { font-size: 1.8rem; margin-bottom: 8px; }
.upload-zone .browse { color: var(--blue); font-weight: 700; }
.upload-zone input[type="file"] { display: none; }
.upload-preview { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--grey-300); }
.upload-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.upload-preview .pdf-chip { width: 48px; height: 48px; border-radius: 8px; background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; }
.upload-preview .file-meta { flex: 1; font-size: 0.85rem; }
.upload-preview .file-meta .name { font-weight: 700; color: var(--ink); word-break: break-all; }
.upload-preview .file-meta .size { color: var(--grey-500); font-size: 0.78rem; }
.upload-preview .remove-file { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.1rem; }
.upload-progress { height: 5px; border-radius: 99px; background: var(--grey-100); margin-top: 8px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--green); transition: width 200ms linear; }

.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; }
.form-actions .spacer { flex: 1; }

.result-panel { text-align: center; padding: 20px 0; }
.result-panel .badge-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.result-panel.success .badge-icon { background: color-mix(in srgb, var(--green) 15%, var(--white)); color: var(--green); }
.result-panel.error .badge-icon { background: color-mix(in srgb, var(--danger) 15%, var(--white)); color: var(--danger); }
.result-panel .membership-id { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--navy); background: var(--grey-100); border-radius: var(--radius-sm); padding: 12px; margin: 16px 0; letter-spacing: 0.03em; }

@media (max-width: 640px) {
  .form-card { padding: 22px; border-radius: var(--radius-md); margin-top: 18px; }
  .progress-step span.label { display: none; }
  .option-grid { grid-template-columns: 1fr 1fr; }
}