/* ============================================
   Sell view — 4-step listing wizard
   ============================================ */

.publish-btn,.advanced-toggle {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 850;
}

.preview-photo,.draft-image {
  height: 255px;
  border-radius: 20px;
  background: linear-gradient(145deg,#dce4ed,#f4f7fa);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.review-pickup small {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  color: #8a94a6;
  font-weight: 900;
}

.publish-btn {
  border: 0;
  background: var(--brand);
  color: white;
  padding: 15px 24px;
  box-shadow: 0 10px 24px rgba(255,107,53,.25);
}

.sell-shell {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 310px 1fr;
}

.sell-progress {
  background: var(--ink);
  color: white;
  padding: 35px 30px;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
}

.back-home {
  border: 0;
  background: transparent;
  color: #bdc6d6;
  padding: 0;
  margin-bottom: 45px;
}

.sell-brand h2 {
  font-size: 30px;
  letter-spacing: -.04em;
  margin: 15px 0 8px;
}

.sell-brand p,.sell-help p {
  color: #9da8bc;
  line-height: 1.5;
  font-size: 13px;
}

.sell-progress ol {
  list-style: none;
  margin: 40px 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.sell-progress li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  color: #8f9aad;
}

.sell-progress li>span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #465167;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 11px;
}

.sell-progress li strong {
  display: block;
  font-size: 13px;
}

.sell-progress li small {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.sell-progress li.active {
  background: #172238;
  color: white;
}

.sell-progress li.active>span {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

.sell-help {
  position: absolute;
  bottom: 28px;
  left: 30px;
  right: 30px;
  border-top: 1px solid #2d384d;
  padding-top: 18px;
}

.sell-stage {
  padding: 60px clamp(25px,7vw,110px) 80px;
  max-width: 1150px;
}

.wizard-panel>h1,.publish-success h1 {
  font-size: clamp(38px,5vw,60px);
  letter-spacing: -.055em;
  margin: 9px 0 9px;
}

.stage-lede {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 30px;
}

.goal-choices {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.goal-choices label {
  cursor: pointer;
}

.goal-choices input {
  display: none;
}

.goal-choices label>span {
  display: block;
  border: 1px solid var(--line);
  background: white;
  border-radius: 18px;
  padding: 20px;
  min-height: 165px;
}

.goal-choices label.selected>span {
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(11,18,32,.05);
}

.goal-choices b {
  display: grid;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: #eef1f5;
  place-items: center;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 16px;
}

.goal-choices strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
}

.goal-choices small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.photo-drop {
  border: 2px dashed #cdd4df;
  border-radius: 20px;
  background: white;
  padding: 38px;
  text-align: center;
  margin-top: 20px;
}

.camera-ring {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto;
  font-size: 26px;
}

.photo-drop h3 {
  margin: 13px 0 6px;
}

.photo-drop p {
  color: var(--muted);
  font-size: 13px;
}

.photo-preview {
  display: grid;
  grid-template-columns: repeat(3,130px) 1fr;
  gap: 10px;
  margin-top: 15px;
  align-items: center;
}

.preview-image {
  height: 110px;
  border-radius: 13px;
  background: #e9edf2;
  display: grid;
  place-items: center;
  font-size: 28px;
}

.photo-status {
  padding-left: 10px;
}

.photo-status strong,.photo-status small {
  display: block;
}

.photo-status small {
  color: var(--muted);
  margin-top: 4px;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.ai-draft-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 20px;
}

.draft-image {
  height: auto;
  min-height: 330px;
}

.draft-image i {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--lime);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  padding: 7px 9px;
  border-radius: 8px;
}

.draft-fields {
  display: grid;
  gap: 12px;
}

.quick-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 13px;
}

.quick-facts label {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.quick-facts label>span {
  display: block;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.setting-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 19px;
  padding: 22px;
  display: grid;
  gap: 14px;
}

.setting-card.recommended {
  box-shadow: inset 0 4px 0 var(--brand);
}

.setting-card.pickup-setting {
  box-shadow: inset 0 4px 0 var(--lime-dark);
}

.setting-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  color: #7d8798;
}

.money-field {
  position: relative;
}

.money-field>span {
  position: absolute;
  left: 13px;
  top: 19px;
  color: var(--muted);
}

.money-field input {
  padding-left: 27px;
}

.check-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
}

.check-line input {
  width: auto;
  margin: 3px 0 0;
}

.check-line span strong,.check-line span small {
  display: block;
}

.check-line span small {
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.35;
}

.advanced-toggle {
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: 1px dashed #bfc8d5;
  text-align: left;
  color: #566177;
}

.advanced-panel {
  background: #edf1f6;
  border-radius: 17px;
  padding: 18px;
  margin-top: 10px;
}

.advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.advanced-grid>label {
  background: white;
  padding: 13px;
  border-radius: 12px;
}

.no-show-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--ink);
  color: white;
  border-radius: 17px;
  padding: 18px 20px;
  margin-top: 14px;
}

.no-show-box strong {
  display: block;
  margin-top: 5px;
}

.no-show-box select {
  width: min(390px,100%);
}

.publish-preview {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
}

.preview-listing-card,.publish-summary {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.preview-photo {
  height: 290px;
}

.preview-badge {
  position: absolute;
  left: 15px;
  top: 15px;
  background: var(--lime);
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}

.preview-info {
  padding: 20px;
}

.preview-info h2 {
  font-size: 25px;
  letter-spacing: -.04em;
  margin: 7px 0 13px;
}

.review-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.review-price strong {
  font-size: 30px;
}

.review-price span {
  color: var(--muted);
  font-size: 12px;
}

.review-facts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.review-facts span {
  font-size: 10px;
  font-weight: 800;
  padding: 7px 8px;
  background: #eff2f6;
  border-radius: 8px;
}

.review-pickup {
  border-top: 1px solid var(--line);
  margin-top: 15px;
  padding-top: 14px;
}

.review-pickup strong,.review-pickup span {
  display: block;
  margin-top: 4px;
}

.review-pickup span {
  color: var(--muted);
  font-size: 11px;
}

.publish-summary {
  padding: 23px;
}

.publish-summary h3 {
  margin-top: 0;
}

.publish-summary ol {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 13px;
}

.publish-summary li {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: #5b6678;
}

.publish-summary li span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef1f5;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 900;
}

.fee-preview {
  background: #f3f5f8;
  border-radius: 13px;
  padding: 14px;
}

.fee-preview span,.fee-preview strong,.fee-preview small {
  display: block;
}

.fee-preview strong {
  margin: 4px 0;
}

.fee-preview small {
  color: var(--muted);
  line-height: 1.4;
}

.publish-success {
  text-align: center;
  max-width: 680px;
  margin: 80px auto;
}

.success-mark {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--lime);
  display: grid;
  place-items: center;
  font-size: 35px;
  font-weight: 900;
  margin: 0 auto 25px;
}

.publish-success p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

@media (max-width:1100px) {
  .sell-shell {
      grid-template-columns: 250px 1fr;
  }
  .sell-progress {
      padding: 30px 20px;
  }
  .publish-preview {
      grid-template-columns: 1fr;
  }
}

@media (max-width:800px) {
  .sell-shell {
      display: block;
  }
  .sell-progress {
      position: static;
      height: auto;
      padding: 20px;
  }
  .sell-brand,.sell-help {
      display: none;
  }
  .sell-progress ol {
      display: flex;
      margin: 15px 0 0;
      gap: 4px;
  }
  .sell-progress li {
      flex: 1;
      justify-content: center;
      padding: 6px;
  }
  .sell-progress li div {
      display: none;
  }
  .sell-stage {
      padding: 40px 20px;
  }
  .goal-choices,.settings-grid {
      grid-template-columns: 1fr;
  }
  .ai-draft-card {
      grid-template-columns: 1fr;
  }
  .draft-image {
      min-height: 250px;
  }
  .advanced-grid {
      grid-template-columns: 1fr;
  }
  .no-show-box {
      display: grid;
  }
  .no-show-box select {
      width: 100%;
  }
  .photo-preview {
      grid-template-columns: repeat(3,1fr);
  }
  .photo-status {
      grid-column: span 3;
      padding: 0;
  }
}

@media (max-width:520px) {
  .goal-choices label>span {
      min-height: auto;
  }
  .quick-facts {
      grid-template-columns: 1fr;
  }
}