/* VOLKSAUCTION listing submission UX refinement 2026-08-21 */

.submit-layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.form-progress{
  position:sticky;
  top:110px;
  display:grid;
  gap:9px;
}

.progress-item{
  appearance:none;
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#62676d;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  text-align:left;
  font-size:12px;
  font-weight:750;
  box-shadow:none;
  transition:border-color .18s,background .18s,color .18s,transform .18s;
}

.progress-item:hover{
  border-color:#aaa49d;
  transform:translateX(2px);
}

.progress-item.active{
  border-color:rgba(232,56,0,.5);
  background:rgba(232,56,0,.07);
  color:var(--text);
  box-shadow:inset 3px 0 0 var(--accent);
}

.progress-item.complete .progress-number{
  background:#343332;
  color:#fff;
  border-color:#343332;
}

.progress-number{
  width:24px;
  height:24px;
  border:1px solid #c8c2ba;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  font-size:10px;
  font-weight:900;
  background:#f8f6f3;
}

.submit-form-card{
  overflow:hidden;
}

.form-section{
  scroll-margin-top:110px;
}

.reserve-field{
  display:flex;
  align-items:flex-end;
  padding-bottom:11px;
}

.money-input{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:11px;
  overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}

.money-input:focus-within{
  border-color:rgba(232,56,0,.65);
  box-shadow:0 0 0 3px rgba(232,56,0,.09);
}

.money-input>span{
  padding-left:13px;
  color:#676b70;
  font-weight:800;
}

.money-input input{
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding-left:7px!important;
}

.photo-field{
  margin-top:18px;
}

.photo-picker{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:46px;
}

.photo-picker input[type=file]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.photo-count{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.photo-count.at-limit{
  color:var(--accent-dark);
}

.photo-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.photo-preview-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.photo-preview-card.featured{
  border-color:rgba(232,56,0,.5);
  box-shadow:0 0 0 2px rgba(232,56,0,.07);
}

.photo-preview-image{
  aspect-ratio:4/3;
  position:relative;
  background:#eeeae5;
  overflow:hidden;
}

.photo-preview-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature-badge{
  position:absolute;
  left:9px;
  top:9px;
  padding:5px 8px;
  border-radius:999px;
  background:#0c0c0c;
  color:#fff;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.photo-preview-controls{
  display:flex;
  gap:8px;
  padding:9px;
}

.photo-feature-btn,
.photo-remove-btn{
  flex:1;
  border:1px solid var(--line);
  background:#f5f2ee;
  color:var(--text);
  border-radius:9px;
  padding:8px 9px;
  font-size:10px;
  font-weight:800;
}

.photo-feature-btn.active{
  background:rgba(232,56,0,.08);
  border-color:rgba(232,56,0,.35);
  color:var(--accent-dark);
}

.photo-remove-btn{
  flex:0 0 auto;
  background:#fff;
  color:#7f3732;
}

.review-check{
  padding:13px 14px;
  border:1px solid transparent;
  border-radius:11px;
}

.review-check+.review-check{
  margin-top:4px;
}

.submit-review-note{
  margin-top:14px;
}

#reviewSection .actions{
  margin-top:18px;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea,
.field.invalid .money-input{
  border-color:#b13a34!important;
  box-shadow:0 0 0 3px rgba(177,58,52,.08)!important;
}

.review-check.invalid{
  border-color:#ddb1af;
  background:#fff3f2;
}

.field-error{
  color:#a73530;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}

.submit-status-card{
  min-height:0;
  display:none;
  margin-top:14px;
  padding:13px 15px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#f6f3ef;
  line-height:1.45;
}

.submit-status-card.visible{
  display:block;
}

.submit-status-card.error{
  color:#8f302b;
  border-color:#ddb1af;
  background:#fff3f2;
}

.submit-status-card.ok{
  color:#23633e;
  border-color:#b8d7c2;
  background:#f0faf3;
}

.submit-status-card.info{
  color:#315d8b;
  border-color:#b9cde0;
  background:#f2f7fb;
}

@media(max-width:980px){
  .submit-layout{
    grid-template-columns:1fr;
  }

  .form-progress{
    position:sticky;
    top:82px;
    z-index:20;
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding:10px;
    margin:-18px 0 18px;
    background:rgba(247,245,241,.95);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:14px;
  }

  .progress-item{
    min-height:44px;
    justify-content:center;
    padding:8px;
  }

  .progress-number{
    display:none;
  }

  .progress-item.active{
    box-shadow:inset 0 -3px 0 var(--accent);
  }
}

@media(max-width:760px){
  .photo-preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .form-progress{
    overflow-x:auto;
    grid-template-columns:repeat(4,minmax(110px,1fr));
  }
}

@media(max-width:520px){
  .photo-preview-grid{
    grid-template-columns:1fr;
  }

  .photo-picker{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Catalog-driven vehicle identity */
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.section-title-row h2{margin-bottom:8px}
.section-help{font-size:12px;max-width:760px;margin:0 0 18px}
.catalog-status-chip{flex:0 0 auto;border:1px solid var(--line);background:#f4f1ed;color:#666b71;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.catalog-status-chip.verified{background:#edf7f0;border-color:#b8d7c2;color:#23633e}
.catalog-status-chip.reference{background:#fff8e7;border-color:#dec98b;color:#75530f}
.catalog-status-chip.custom{background:#fff3f2;border-color:#ddb1af;color:#9d302b}
.catalog-divider{height:1px;background:var(--line-soft);margin:24px 0}
.verification-note{display:flex;align-items:center;gap:7px;font-size:10px;color:#6a6f75;margin-top:2px}
.verification-dot{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.verification-dot.unverified{background:#f6ecea;color:#a13a34;border:1px solid #e1bbb8}
.verification-dot.verified{background:#e8f4ec;color:#246640;border:1px solid #b9d9c4}
.vin-evidence-card{margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#f8f6f3}
.vin-evidence-card h3{margin:0 0 7px}
.vin-evidence-card p{font-size:12px;margin:0 0 14px;max-width:800px}
.vin-photo-preview{margin-top:14px;display:none}
.vin-photo-preview.has-photo{display:block}
.vin-photo-preview img{width:min(300px,100%);aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#eeeae5}
.field select:disabled{background:#f1efeb;color:#8a8e92;cursor:not-allowed}
.vin-evidence-card.invalid{border-color:#ddb1af;background:#fff3f2}
@media(max-width:760px){.section-title-row{flex-direction:column}.catalog-status-chip{align-self:flex-start}}

.catalog-error-notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.catalog-error-notice strong{color:inherit}
.catalog-error-notice span{flex:1;min-width:260px;font-size:12px}

/* multivehicle-submission-ui-v1 */
.inline-field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.55fr);
  gap: 0.65rem;
}

.usage-class-field {
  border: 1px solid var(--border, #d7d7d7);
  border-radius: 0.6rem;
  padding: 0.8rem;
  min-width: 0;
}

.usage-class-field legend {
  padding: 0 0.3rem;
  font-weight: 700;
}

.usage-class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}

.usage-class-grid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.multivehicle-secondary-fields {
  align-items: start;
}

.photo-preview-card img,
#vinVerificationPreview img {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  border-radius: 0.45rem;
}

.photo-preview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.45rem;
}

@media (max-width: 700px) {
  .inline-field-pair,
  .usage-class-grid {
    grid-template-columns: 1fr;
  }
}