/* ============================================================
   SIGNAL PACK — FORM SYSTEM
   ============================================================ */

.sp-form-section-heading{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); margin-bottom:6px; }
.sp-form-section-sub{ font-size:13px; color:var(--grey-text); margin-bottom:20px; }

.sp-field{ margin-bottom:20px; }
.sp-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .sp-field-row{ grid-template-columns:1fr; } }

.sp-label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.sp-label .sp-required{ color:var(--red); margin-left:2px; }
.sp-helper-text{ font-size:12px; color:var(--grey-text); margin-top:6px; }

.sp-input, .sp-select, .sp-textarea{
  width:100%; height:var(--control-height-md); border:1.5px solid var(--line); border-radius:var(--radius-md);
  background:var(--paper); padding:0 14px; font-size:14px; color:var(--ink);
  transition:border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.sp-textarea{ height:auto; min-height:110px; padding:12px 14px; resize:vertical; }
.sp-input:hover, .sp-select:hover, .sp-textarea:hover{ border-color:#b9b7cc; }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(44,42,120,0.12);
}
.sp-input::placeholder, .sp-textarea::placeholder{ color:#a8a6b8; }
.sp-input:disabled, .sp-select:disabled, .sp-textarea:disabled{
  background:var(--color-disabled-bg); color:var(--color-disabled-text); border-color:var(--line); cursor:not-allowed;
}

/* Search input variant */
.sp-input-search{ padding-left:40px; background-image:none; }
.sp-search-field{ position:relative; }
.sp-search-field svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--grey-text); pointer-events:none; }

/* Select chevron */
.sp-select{ appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355536b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  padding-right:34px;
}
.sp-select[multiple]{ height:auto; min-height:110px; background-image:none; padding:10px; }

/* Checkbox / Radio */
.sp-checkbox, .sp-radio{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink); cursor:pointer; padding:4px 0; }
.sp-checkbox input, .sp-radio input{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex-shrink:0; margin-top:1px;
  border:1.5px solid var(--line); background:#fff; position:relative; cursor:pointer;
}
.sp-checkbox input{ border-radius:4px; }
.sp-radio input{ border-radius:50%; }
.sp-checkbox input:checked, .sp-radio input:checked{ border-color:var(--navy); background:var(--navy); }
.sp-checkbox input:checked::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sp-radio input:checked::after{ content:""; position:absolute; left:4px; top:4px; width:8px; height:8px; border-radius:50%; background:#fff; }
.sp-checkbox input:focus-visible, .sp-radio input:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* Toggle switch */
.sp-toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.sp-toggle input{ appearance:none; width:42px; height:24px; border-radius:var(--radius-pill); background:var(--line); position:relative; transition:background var(--duration-base) var(--ease); flex-shrink:0; }
.sp-toggle input::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--duration-base) var(--ease); }
.sp-toggle input:checked{ background:var(--navy); }
.sp-toggle input:checked::after{ transform:translateX(18px); }
.sp-toggle input:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* File upload */
.sp-file-upload{
  border:1.5px dashed var(--line); border-radius:var(--radius-md); padding:24px; text-align:center;
  background:var(--grey-bg); transition:border-color var(--duration-base) var(--ease);
}
.sp-file-upload.is-dragover{ border-color:var(--navy); background:var(--grey-alt); }
.sp-file-upload svg{ width:26px; height:26px; stroke:var(--navy); margin:0 auto 10px; }
.sp-file-upload p{ font-size:13px; color:var(--grey-text); }
.sp-file-upload .sp-btn-text{ font-size:13px; }
.sp-file-preview-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.sp-file-preview{
  width:72px; height:72px; border-radius:var(--radius-sm); overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--paper);
}
.sp-file-preview img{ width:100%; height:100%; object-fit:cover; }
.sp-file-preview .sp-remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(23,22,46,0.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px;
}

/* Quantity selector */
.sp-quantity-selector{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.sp-quantity-selector input{ width:48px; height:32px; border:none; text-align:center; font-size:13.5px; -moz-appearance:textfield; }
.sp-quantity-selector input::-webkit-outer-spin-button, .sp-quantity-selector input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sp-quantity-selector .sp-qty-btn{ border:none; border-radius:0; height:32px; }

/* Required indicator legend */
.sp-required-legend{ font-size:12px; color:var(--grey-text); margin-bottom:16px; }
.sp-required-legend .sp-required{ color:var(--red); }

/* ---------- States ---------- */
.sp-field.has-error .sp-input,
.sp-field.has-error .sp-select,
.sp-field.has-error .sp-textarea{ border-color:var(--color-error); background:var(--color-error-bg); }
.sp-field-error{ display:none; font-size:12px; color:var(--color-error); margin-top:6px; align-items:center; gap:6px; }
.sp-field.has-error .sp-field-error{ display:flex; }

.sp-field.has-success .sp-input{ border-color:var(--color-success); }
.sp-field-success{ display:none; font-size:12px; color:var(--color-success); margin-top:6px; }
.sp-field.has-success .sp-field-success{ display:flex; align-items:center; gap:6px; }

/* Form-level alerts share styles with .sp-alert (see utilities.css) */