/* ============ FORMS ============ */
/* Core form-control, form-group, form-row, form-label, form-hint are defined in components.css */

/* Extra form states */
.form-control.error { border-color: rgba(244,63,94,0.5); box-shadow: 0 0 0 2px rgba(244,63,94,0.1); }
.form-control.success { border-color: rgba(16,185,129,0.5); box-shadow: 0 0 0 2px rgba(16,185,129,0.1); }
.form-error { font-size: var(--text-xs); color: var(--accent-rose); margin-top: var(--space-1); }


/* Checkbox & Radio */
.checkbox-group, .radio-group { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.checkbox-group input[type=checkbox], .radio-group input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand-500); cursor: pointer; }
.checkbox-group label, .radio-group label { font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }

/* File Upload */
.file-upload {
  border: 2px dashed var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-8); text-align: center; cursor: pointer;
  transition: all var(--transition-fast);
}
.file-upload:hover { border-color: var(--border-brand); background: rgba(99,102,241,0.05); }
.file-upload-icon { font-size: 36px; margin-bottom: var(--space-3); opacity: 0.5; }
.file-upload-text { font-size: var(--text-sm); color: var(--text-muted); }
.file-upload-text span { color: var(--text-brand); font-weight: 600; }
.file-upload input[type=file] { display: none; }

/* Color Picker */
.color-picker-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all var(--transition-fast);
}
.color-swatch.selected { border-color: white; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }

/* Steps */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: var(--space-8); overflow-x: auto; }
.step { display: flex; align-items: center; flex: 1; }
.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-input); border: 2px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; transition: all var(--transition-base); position: relative; z-index: 1;
}
.step.active .step-dot { background: var(--gradient-brand); border-color: transparent; color: white; box-shadow: var(--shadow-brand); }
.step.done .step-dot { background: var(--accent-emerald); border-color: transparent; color: white; }
.step-line { flex: 1; height: 2px; background: var(--border-default); }
.step.done .step-line, .step.active .step-line { background: var(--brand-500); }
.step-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.step.active .step-label { color: var(--text-brand); font-weight: 600; }
.step-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* Warehouse & Inventory Media selectors */
.wh-icon-option:hover {
  border-color: var(--border-brand) !important;
  background: var(--bg-elevated) !important;
}
.wh-icon-option.selected {
  border-color: var(--border-brand) !important;
  box-shadow: 0 0 0 2px var(--border-brand) !important;
  background: var(--bg-elevated) !important;
}