/* CREATE LISTING */
.create-page { padding: 40px 0 80px; }
.create-header { text-align:center; margin-bottom:48px; }

/* Step Progress */
.step-progress { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:48px; }
.sp-step { display:flex; flex-direction:column; align-items:center; gap:8px; }
.sp-dot {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--border);
  background:var(--white); color:var(--gray-400);
  font-family:var(--font-display); font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-base);
}
.sp-step.active .sp-dot { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px var(--primary-50); }
.sp-step.done .sp-dot { background:var(--success); border-color:var(--success); color:white; }
.sp-label { font-size:11px; font-weight:500; color:var(--gray-400); white-space:nowrap; }
.sp-step.active .sp-label { color:var(--primary); font-weight:600; }
.sp-step.done .sp-label { color:var(--success); }
.sp-line { width:60px; height:2px; background:var(--border); margin-bottom:20px; transition:background var(--t-base); }
.sp-line.done { background:var(--success); }

/* Form Layout */
.create-form { max-width:680px; margin:0 auto; }
.form-section {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:28px; margin-bottom:20px;
}
.form-section__title {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);
  color:var(--dark-2); display:flex; align-items:center; gap:8px;
}
.form-section__title svg { color:var(--primary); flex-shrink:0; }
.form-section__subtitle {
  font-size:13px; font-weight:600; color:var(--gray-600);
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.form-section__subtitle svg { color:var(--gray-400); flex-shrink:0; }
.form-fields { display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row--3 { grid-template-columns:1fr 1fr 1fr; }

/* ── INTENT SELECTION ── */
.intent-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.intent-option {
  border:2px solid var(--border); border-radius:var(--r-xl);
  padding:20px; cursor:pointer; transition:all var(--t-base);
  display:flex; align-items:center; gap:16px;
  position:relative;
}
.intent-option:hover { border-color:var(--primary-100); background:var(--primary-50); }
.intent-option.selected {
  border-color:var(--primary); background:var(--primary-50);
  box-shadow:0 0 0 3px rgba(255,107,53,0.12);
}
.intent-option__icon {
  width:48px; height:48px; border-radius:var(--r-lg);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); transition:all var(--t-base); flex-shrink:0;
}
.intent-option__icon svg { width:24px; height:24px; }
.intent-option:hover .intent-option__icon,
.intent-option.selected .intent-option__icon {
  background:var(--primary-100); color:var(--primary);
}
.intent-option__body { flex:1; min-width:0; }
.intent-option__title {
  font-family:var(--font-display); font-size:15px; font-weight:700;
  color:var(--dark-2); margin-bottom:4px;
}
.intent-option__desc { font-size:12px; color:var(--gray-500); line-height:1.4; }
.intent-option__check {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--gray-200); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:all var(--t-fast);
}
.intent-option__check svg { width:14px; height:14px; opacity:0; color:white; transition:opacity var(--t-fast); }
.intent-option.selected .intent-option__check {
  background:var(--primary); border-color:var(--primary);
}
.intent-option.selected .intent-option__check svg { opacity:1; }

/* ── CATEGORY SELECTION ── */
.cat-select-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cat-option {
  border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:16px 12px; text-align:center; cursor:pointer;
  transition:all var(--t-fast); display:flex; flex-direction:column;
  align-items:center; gap:8px;
}
.cat-option:hover { border-color:var(--primary); background:var(--primary-50); }
.cat-option.selected { border-color:var(--primary); background:var(--primary-50); box-shadow:0 0 0 3px rgba(255,107,53,0.1); }
.cat-option__icon {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); transition:color var(--t-fast);
}
.cat-option__icon svg { width:26px; height:26px; }
.cat-option:hover .cat-option__icon, .cat-option.selected .cat-option__icon { color:var(--primary); }
.cat-option__name { font-size:12px; font-weight:600; color:var(--dark-2); }

/* ── BUDGET RANGE ── */
.budget-range { display:flex; align-items:center; gap:10px; }
.budget-range__field { position:relative; flex:1; }
.budget-range__field input { width:100%; padding-right:32px; }
.budget-range__suffix {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--gray-400); pointer-events:none;
}
.budget-range__sep {
  font-size:16px; color:var(--gray-300); font-weight:300; flex-shrink:0;
}

/* ── PHOTO UPLOAD ── */
.photo-upload {
  border:2px dashed var(--border); border-radius:var(--r-xl);
  padding:32px; text-align:center; cursor:pointer; transition:all var(--t-base);
}
.photo-upload:hover { border-color:var(--primary); background:var(--primary-50); }
.photo-upload__icon {
  width:52px; height:52px; border-radius:var(--r-lg);
  background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; margin:0 auto 14px; color:var(--gray-400);
}
.photo-upload__text { font-size:14px; font-weight:500; color:var(--dark-2); margin-bottom:6px; }
.photo-upload__hint { font-size:12px; color:var(--gray-400); }
.photo-previews { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.photo-preview {
  width:80px; height:80px; border-radius:var(--r-md);
  overflow:hidden; position:relative; border:1px solid var(--border);
}
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-preview__del {
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:50%;
  background:var(--error); color:white; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ── PREVIEW SUMMARY ── */
.preview-summary {
  margin-top:20px; border-top:1px solid var(--border); padding-top:16px;
  display:flex; flex-direction:column; gap:10px;
}
.preview-summary__row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; font-size:13px;
}
.preview-summary__label {
  color:var(--gray-500); font-weight:500; white-space:nowrap; flex-shrink:0;
}
.preview-summary__value {
  color:var(--dark-2); font-weight:600; text-align:right;
}
.preview-summary__value--budget { color:var(--success); }

/* ── ACTIONS ── */
.create-actions { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .intent-grid { grid-template-columns:1fr; }
  .intent-option { padding:16px; }
  .sp-line { width:32px; }
  .sp-label { font-size:10px; }
}
@media(max-width:640px){
  .form-row { grid-template-columns:1fr; }
  .form-row--3 { grid-template-columns:1fr; }
  .cat-select-grid { grid-template-columns:repeat(3,1fr); }
  .budget-range { flex-direction:column; }
  .budget-range__sep { display:none; }
}
@media(max-width:400px){
  .cat-select-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .create-page { padding: 24px 0 72px; }
  .create-header { margin-bottom: 32px; }
  .form-section { padding: 18px; margin-bottom: 14px; }
  .form-section__title { font-size: 15px; margin-bottom: 16px; padding-bottom: 12px; }
  .step-progress { margin-bottom: 32px; }
  .sp-dot { width: 30px; height: 30px; font-size: 12px; }
  .sp-line { width: 20px; }
  .sp-label { font-size: 9px; }
  .intent-option { padding: 14px; gap: 12px; }
  .intent-option__icon { width: 40px; height: 40px; }
  .intent-option__icon svg { width: 20px; height: 20px; }
  .photo-upload { padding: 24px 16px; }
  .create-actions { flex-direction: column; gap: 10px; }
  .create-actions .btn { width: 100%; justify-content: center; }
}
@media(max-width:360px){
  .form-section { padding: 14px; }
  .sp-line { width: 14px; }
  .sp-dot { width: 28px; height: 28px; font-size: 11px; }
  .cat-select-grid { gap: 8px; }
  .intent-option { padding: 12px; gap: 10px; }
}