/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#f4f6f9;color:#1a1a2e;line-height:1.5;min-height:100vh}

/* ===== Layout ===== */
.form-wrapper{max-width:900px;margin:0 auto;padding:32px 20px 60px}
.form-header{text-align:center;margin-bottom:36px}
.form-header h1{font-size:1.65rem;font-weight:700;color:#1a1a2e;margin-bottom:6px}
.form-header p{color:#64748b;font-size:.95rem}

.form-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.04);padding:36px 32px 40px;position:relative}

/* ===== Grid ===== */
.form-row{display:flex;flex-wrap:wrap;gap:16px 20px;margin-bottom:0}
.field{margin-bottom:18px}
.field.w-full{width:100%}
.field.w-half{width:calc(50% - 10px)}
.field.w-third{width:calc(33.333% - 14px)}

/* ===== Labels ===== */
label{display:block;font-size:.82rem;font-weight:600;color:#374151;margin-bottom:5px;letter-spacing:.01em}
label .req{color:#e53e3e;margin-left:2px}

/* ===== Inputs ===== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
select{
  width:100%;height:44px;padding:0 14px;
  border:1.5px solid #d1d5db;border-radius:10px;
  font-size:.92rem;color:#1a1a2e;background:#fff;
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
input:focus,select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
input::placeholder{color:#9ca3af}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

/* ===== Range Slider ===== */
.range-wrap{display:flex;align-items:center;gap:14px}
.range-wrap input[type="range"]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e2e8f0;border-radius:3px;outline:none;border:none;cursor:pointer}
.range-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#3b82f6;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.range-wrap input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#3b82f6;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.range-value{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#3b82f6;color:#fff;font-weight:700;font-size:.9rem;border-radius:8px}

/* ===== Sections / Dividers ===== */
.section-divider{width:100%;margin:28px 0 18px;padding:12px 18px;background:#f0f4ff;border-left:4px solid #3b82f6;border-radius:0 10px 10px 0;font-size:1rem;font-weight:700;color:#1e3a5f}

/* ===== Conditional Sections ===== */
.conditional-section{display:none;width:100%;animation:fadeIn .3s ease}
.conditional-section.visible{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Address Group ===== */
.address-group{display:flex;flex-wrap:wrap;gap:12px 16px}
.address-group .addr-line{width:100%}
.address-group .addr-city{width:calc(40% - 8px)}
.address-group .addr-state{width:calc(30% - 8px)}
.address-group .addr-zip{width:calc(30% - 8px)}

/* ===== Signature ===== */
.sig-wrapper{border:1.5px solid #d1d5db;border-radius:10px;overflow:hidden;background:#fff;position:relative}
.sig-wrapper canvas{display:block;width:100%;height:150px;cursor:crosshair}
.sig-clear{position:absolute;top:8px;right:10px;background:#f1f5f9;border:1px solid #d1d5db;border-radius:6px;padding:3px 12px;font-size:.75rem;color:#64748b;cursor:pointer;z-index:2}
.sig-clear:hover{background:#e2e8f0}

/* ===== Submit ===== */
.submit-row{margin-top:32px;text-align:center}
.btn-submit{display:inline-flex;align-items:center;justify-content:center;min-width:220px;height:52px;padding:0 36px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:1.05rem;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .15s;letter-spacing:.02em}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.35)}
.btn-submit:active{transform:translateY(0)}
.btn-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ===== Validation ===== */
.field.has-error input,
.field.has-error select{border-color:#e53e3e}
.field .error-msg{display:none;font-size:.78rem;color:#e53e3e;margin-top:4px}
.field.has-error .error-msg{display:block}

/* ===== Responsive ===== */
@media(max-width:680px){
  .form-card{padding:24px 18px 28px}
  .field.w-half,.field.w-third{width:100%}
  .address-group .addr-city,
  .address-group .addr-state,
  .address-group .addr-zip{width:100%}
}