/* Nihehe create-listing page redesign: loaded LAST by list.html. Remove the <link> to roll back. */
body { font-family: var(--font); background: var(--page); color: var(--brand); }
button, input, select, textarea { font-family: var(--font); }
main { margin: 32px auto 0; padding: 0 16px 48px; }
.error-msg, .field, h1 { scroll-margin-top: 88px; }

/* ---------- Progress ---------- */
.step-tracker { margin-bottom: 28px; align-items: center; }
.step-label { font: 700 12px/1 var(--font); letter-spacing: .04em; opacity: 1; color: var(--muted); }
.step-item.active .step-label, .step-item.done .step-label { color: var(--brand); }
.step-dot { width: 12px; height: 12px; background: var(--line); transition: width .3s var(--ease), background-color .3s var(--ease); }
.step-dot.active { width: 32px; border-radius: var(--radius-pill); background: var(--brand); }
.step-dot.done { background: var(--accent); }
.step-connector { height: 2px; width: 36px; margin: 0 10px; background: var(--line); }
.step-connector.done { background: var(--accent); }
.substep-dot { width: 8px; height: 8px; background: var(--line); }
.substep-dot.active { background: var(--brand); }
.substep-dot.done { background: var(--accent); }

/* ---------- Headings ---------- */
h1 { font: 800 28px/1.2 var(--font); letter-spacing: -.01em; margin-bottom: 8px; }
.step-subtitle { opacity: 1; color: var(--muted); font-size: 16px; line-height: 1.55; margin-bottom: 24px; }

/* ---------- Form fields ---------- */
.field { margin-bottom: 20px; }
.field label { font: 700 14px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--brand); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  min-height: 52px; padding: 13px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-field);
  font: 600 16px/1.4 var(--font); color: var(--brand); background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 128px; font-weight: 400; }
.field input[type="file"] { padding: 12px 14px; font-weight: 400; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 174, 231, .18); }
.field-hint { opacity: 1; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 6px; }

/* ---------- Buttons ---------- */
.primary-btn {
  display: block; min-height: 52px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--brand); color: #fff;
  font: 800 16px/1 var(--font); transition: transform .15s var(--ease), background-color .15s var(--ease); margin-top: 4px;
}
.primary-btn:hover { background: var(--brand-dark); }
.primary-btn:active { transform: scale(.98); }
.primary-btn:disabled { opacity: .55; }
.primary-btn:focus-visible, .secondary-btn:focus-visible, .back-link:focus-visible, .location-method:focus-visible, .listing-intent-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.secondary-btn { min-height: 48px; padding: 0 24px; border: 1.5px solid var(--brand); border-radius: var(--radius-pill); color: var(--brand); font: 700 15px/1 var(--font); transition: background-color .15s var(--ease); }
.secondary-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.back-link { min-height: 44px; padding: 0 18px 0 14px; border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand); opacity: 1; font: 700 14px/1 var(--font); margin-bottom: 16px; }
.back-link:hover { background: #d6eefb; color: var(--brand); }

/* ---------- Messages and boxes ---------- */
.error-msg { background: #fdeceb; border: 0; border-radius: 16px; color: var(--danger); padding: 14px 18px; font: 600 14px/1.5 var(--font); }
.info-box { background: var(--brand-light); border-radius: 20px; padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--brand); }
.parcel-confirm, .parcel-match { border: 1.5px dashed #b9dff2; border-radius: 16px; background: #f6fbfe; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.parcel-confirm .upi, .parcel-match .upi { font-family: var(--font); font-weight: 800; }
.accuracy-box { background: var(--brand-light); border-radius: 16px; padding: 12px 16px; font-size: 14px; }
.accuracy-good { color: #067647; font-weight: 700; }
.accuracy-bad { color: var(--danger); font-weight: 700; }
.location-map { height: 340px; border: 1.5px solid var(--line); border-radius: 20px; }

/* ---------- Choice cards ---------- */
.location-methods, .listing-intent-options { gap: 12px; }
.location-method, .listing-intent-option {
  padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--brand);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.location-method:hover, .listing-intent-option:hover { border-color: var(--accent); }
.location-method:active, .listing-intent-option:active { transform: scale(.99); }
.location-method.active, .listing-intent-option.active { border-color: var(--brand); background: var(--brand-light); box-shadow: none; }
.location-method strong, .listing-intent-option strong { font: 800 17px/1.3 var(--font); margin-bottom: 4px; }
.location-method span, .listing-intent-option span { opacity: 1; color: var(--muted); font-size: 14px; line-height: 1.5; }
.method-icon { font-size: 24px; margin-right: 12px; }

/* ---------- Photos ---------- */
.photo-thumb { border: 1.5px solid var(--line); border-radius: 16px; }
.photo-thumb.is-main { border-color: var(--brand); border-width: 2px; }
.photo-main-badge { background: var(--accent); color: var(--brand); font: 800 11px/1 var(--font); padding: 5px 9px; border-radius: var(--radius-pill); top: 8px; left: 8px; }
.photo-set-main { background: rgba(19, 45, 76, .82); font: 700 12px/1 var(--font); min-height: 32px; }
.photo-delete { width: 32px; height: 32px; top: 6px; right: 6px; background: rgba(19, 45, 76, .78); font-size: 16px; }
.photo-add-tile { border: 2px dashed #9fd6ef; border-radius: 16px; color: var(--brand); }
.photo-add-tile:hover { border-color: var(--accent); background: var(--brand-light); }
.photo-add-tile-empty { font: 700 15px/1.3 var(--font); }
.photo-uploading { background: var(--brand-light); }
.photo-progress-bar { background: var(--line); border-radius: var(--radius-pill); }
.photo-progress-fill { background: var(--accent); }
.photo-progress-label { color: var(--muted); font-size: 12px; }
.photo-error { color: var(--danger); font-size: 13px; font-weight: 600; }
.photo-empty { color: var(--muted); font-size: 14px; }

/* ---------- Done ---------- */
.final-success { padding: 40px 8px; }
.final-success .seal { background: var(--brand); width: 72px; height: 72px; font-size: 30px; }
.final-success p { opacity: 1; color: var(--muted); font-size: 16px; max-width: 440px; }
.final-success a { color: var(--brand); font-weight: 700; }

@media (min-width: 761px) { main { padding: 0 24px 64px; } h1 { font-size: 34px; } .location-map { height: 380px; } }
@media (max-width: 520px) { .listing-intent-options { grid-template-columns: 1fr; } .field-row { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .step-dot, .primary-btn, .secondary-btn, .location-method, .listing-intent-option, .field input, .field select, .field textarea { transition: none; }
}