.qr-container { max-width: 900px; }
.qr-title { font-size: 26px; margin-bottom: 8px; }
.qr-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0 0 32px; }

.qr-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.qr-empty p { margin-bottom: 18px; font-size: 14px; }

.qr-section { margin-bottom: 40px; }
.qr-section-title {
  font-size: 17px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.qr-step {
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  font-family: 'Inter', sans-serif; font-weight: 600; flex-shrink: 0;
}
.qr-section-note { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; }

/* ---------- item cards ---------- */
.item-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; margin-bottom: 16px; display: grid; grid-template-columns: 90px 1fr; gap: 18px;
}
.item-card .item-thumb { width: 90px; height: 90px; background: #F4F5F7; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.item-card .item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.item-card .item-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.item-card .item-code { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.item-card .item-remove { font-size: 12px; color: var(--text-muted); cursor: pointer; margin-left: auto; }

.item-field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.item-field { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.item-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.item-field select, .item-field input[type=text], .item-field input[type=number] {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px;
  font-family: 'Inter', sans-serif; background: #fff;
}

.size-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.size-toggle button {
  border: 1px solid var(--border); background: #fff; padding: 7px 14px; border-radius: 20px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; cursor: pointer; color: var(--text-secondary);
}
.size-toggle button.active { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); font-weight: 500; }

.quick-size-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.quick-size-btn {
  border: 1px solid var(--border); background: #fff; padding: 6px 13px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer;
}
.quick-size-btn:hover { border-color: var(--blue); color: var(--blue-dark); }
.no-quick-sizes-note { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }

.size-rows { margin-bottom: 10px; }
.size-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.size-row input[type=text] { width: 120px; }
.size-row input[type=number] { width: 90px; }
.size-row .size-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 4px; }
.add-size-row {
  background: none; border: 1px dashed var(--border); border-radius: 6px; padding: 7px 14px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--blue-dark); cursor: pointer;
}

.sizing-chart-link { font-size: 12.5px; color: var(--blue-dark); cursor: pointer; display: inline-block; margin-top: 4px; }
.sizing-chart-preview { margin-top: 10px; max-width: 320px; display: none; }
.sizing-chart-preview.open { display: block; }
.sizing-chart-preview img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); }

/* ---------- branding diagram ---------- */
.branding-diagram-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; margin-bottom: 20px;
}
.branding-diagram-image { position: relative; max-width: 640px; margin: 0 auto; }
.branding-diagram-image img { width: 100%; display: block; }
.pos-overlay {
  position: absolute; border: 3px solid transparent; border-radius: 6px;
  box-sizing: border-box; pointer-events: none; transition: all 0.15s;
}
.pos-overlay.highlighted {
  border-color: var(--amber); background: rgba(232, 163, 61, 0.18);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.25);
}

.position-config {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 12px;
}
.position-config-header { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.position-config-header .pos-badge {
  width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.position-config-header span.pos-name { font-size: 13.5px; font-weight: 500; }
.position-config-body { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.position-config.enabled .position-config-body { display: block; }
.position-config.enabled { border-color: var(--blue); }

.branding-type-toggle { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.branding-type-toggle button {
  border: 1px solid var(--border); background: #fff; padding: 7px 14px; border-radius: 20px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; cursor: pointer; color: var(--text-secondary);
}
.branding-type-toggle button.active { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); font-weight: 500; }

.config-subsection { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.config-subsection h6 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 10px; font-weight: 600; }
.item-field input:disabled { background: var(--bg); color: var(--text-muted); }

.upload-note {
  background: var(--amber-tint); border: 1px solid #F3D9AA; border-radius: 8px;
  padding: 12px 16px; font-size: 12.5px; color: #7A5A0F; margin-top: 12px;
}

.position-summary { font-size: 13px; color: var(--blue-dark); font-weight: 500; margin: 14px 0 4px; }

.undecided-contact-note {
  font-size: 12px; color: var(--text-secondary); margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.undecided-contact-note a { color: var(--blue); }

.item-field textarea {
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 13px;
  font-family: 'Inter', sans-serif; resize: vertical; width: 100%;
}

.event-toggle {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px;
}

.org-type-toggle { margin-bottom: 18px; }
.org-type-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; display: block; margin-bottom: 8px; }

/* ---------- contact form ---------- */
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qr-field { display: flex; flex-direction: column; gap: 6px; }
.qr-field span { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.qr-field input, .qr-field select {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px;
  font-family: 'Inter', sans-serif; background: #fff;
}
.qr-field.checkbox-field { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; }
.qr-field.checkbox-field span { font-weight: 400; }
.qr-field input.field-invalid { border-color: #E0453D; }
.field-error { font-size: 12px; color: #E0453D; }

.returning-customer-prompt {
  grid-column: 1 / -1; background: var(--blue-tint); border: 1px solid #B9E1F5; border-radius: 8px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.returning-customer-prompt p { font-size: 13px; color: var(--blue-dark); margin: 0; flex: 1; min-width: 200px; }
.returning-customer-prompt button {
  border: none; border-radius: 6px; padding: 8px 14px; font-family: 'Inter', sans-serif;
  font-size: 12.5px; cursor: pointer; font-weight: 500;
}
.returning-customer-prompt button:first-of-type { background: var(--blue); color: #fff; }
.returning-customer-prompt button:last-of-type { background: #fff; border: 1px solid var(--border); color: var(--text-secondary); }

.qr-submit-row { text-align: center; padding-top: 10px; }
.qr-submit-btn {
  background: var(--blue); color: #fff; border: none; padding: 15px 40px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; cursor: pointer;
}
.qr-submit-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.qr-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.submit-result {
  border-radius: 8px; padding: 14px 18px; font-size: 14px; text-align: center; margin-bottom: 16px;
}
.submit-success { background: #E7F6EC; color: #1E7A38; border: 1px solid #B9E6C6; }
.submit-error { background: #FDEDEC; color: #B3271F; border: 1px solid #F3C7C4; }

.file-drop-zone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 18px 14px;
  text-align: center; cursor: pointer; background: #FAFBFC; transition: border-color .15s, background .15s;
}
.file-drop-zone.drag-active { border-color: var(--blue); background: #EFF7FF; }
.file-drop-text { font-size: 13px; color: var(--text-secondary); }
.file-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 4px 6px 4px 10px; font-size: 12.5px; color: var(--text-primary);
}
.file-chip-remove {
  background: none; border: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
  padding: 2px 4px;
}
.file-chip-remove:hover { color: #B3271F; }

@media (max-width: 700px) {
  .item-card { grid-template-columns: 1fr; }
  .qr-grid { grid-template-columns: 1fr; }
}

/* ---------- validation error panel ----------
   Non-blocking replacement for alert(): stays on screen while the person
   scrolls back up to find and fix the flagged fields, and can be dragged out
   of the way (by its header) instead of having to be closed first. */
.error-panel {
  position: fixed; top: 90px; right: 24px; width: 340px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid #F3C7C4; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18); z-index: 200; overflow: hidden;
}
.error-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #FDEDEC; color: #B3271F; padding: 12px 14px; font-weight: 600; font-size: 13.5px;
  cursor: move; user-select: none;
}
.error-panel-close {
  background: none; border: none; color: #B3271F; font-size: 20px; line-height: 1; cursor: pointer;
  padding: 0 2px;
}
.error-panel-body { padding: 12px 16px; max-height: 50vh; overflow-y: auto; }
.error-panel-body ul { margin: 0; padding-left: 18px; }
.error-panel-body li { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.4; }
.error-panel-body li:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .error-panel { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }
}