
.soa{ --b: var(--sandalan-border, #e5e7eb); --ink: var(--sandalan-ink, #0b1220); --muted: var(--sandalan-muted,#6b7280); --brand: var(--sandalan-brand,#0a2a66); --brand2: var(--sandalan-brand2,#3b82f6); }
.soa-form{ border:1px solid var(--b); border-radius:14px; padding:16px; background:#fff; box-shadow: var(--sandalan-shadow,0 8px 24px rgba(10,42,102,.06)); }
.soa-step{ display:none; }
.soa-step.active{ display:block; }

/* Compact progress */
.soa-progress{ margin:6px 0 14px; }
.soa-progress-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.9rem; color:var(--muted); }
.soa-progress-bar{ position:relative; height:6px; background:#edf2f7; border-radius:999px; overflow:hidden; }
.soa-progress-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .25s ease; }

.soa-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media(max-width:720px){ .soa-grid{ grid-template-columns: 1fr; } }

.soa-field{ display:flex; flex-direction:column; gap:6px; }
.soa-label{ font-size:.9rem; font-weight:600; color:var(--muted); }
.soa-label .req{ color:#dc2626; margin-left:.25rem; }
.soa-input, .soa-select{ border:1px solid var(--b); border-radius:12px; padding:10px 12px; font:inherit; }
.soa-radio, .soa-check{ margin-right:8px; }
.soa-checkrow{ display:flex; align-items:center; gap:8px; }
.soa-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.soa-btn{ border-radius:999px; padding:10px 16px; font-weight:700; border:1px solid var(--b); background:#f9fafb; cursor:pointer; }
.soa-btn.primary{ background: var(--brand); color:#fff; border-color: transparent; }
.soa-help{ font-size:.9rem; color:var(--muted); }
.soa-drop{ border:2px dashed var(--b); border-radius:12px; padding:18px; text-align:center; color:var(--muted); cursor:pointer; }

/* Errors */
.soa-error{ color:#b91c1c; font-size:.85rem; margin-top:4px; }
.soa-field.invalid .soa-label{ color:#b91c1c; }
.soa-field.invalid .soa-input,
.soa-field.invalid .soa-select,
.soa-field.invalid .soa-drop{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15); }

.soa .hidden{ display:none !important; }
