/* == SIGN SHOP CONFIGURATION == */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:      #18181a;
  --ink2:     #3a3a3d;
  --ink3:     #76767a;
  --ink4:     #a8a8ac;
  --paper:    #f8f7f4;
  --surface:  #ffffff;
  --border:   #e4e3de;
  --border2:  #cccac3;
  --accent:   #c8440a;
  --accent2:  #a33408;
  --accent-bg:#fef0e8;
  --green:    #1a8f66;
  --green-bg: #e0f4ec;
  --amber:    #b06a10;
  --amber-bg: #fef3dc;
  --blue:     #1558a0;
  --blue-bg:  #e8f1fc;
  --r:        10px;
  --r-lg:     16px;
}

html { font-size: 15px; }
body {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* -- Progress strip ------------------------------------------- */
.ss-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
}
.ss-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 2px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* -- Step navigation pills ------------------------------------ */
.ss-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 4px;
}
.ss-step-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink4);
  transition: all .2s;
  white-space: nowrap;
}
.ss-step-pill.active { color: var(--accent); background: var(--accent-bg); }
.ss-step-pill.done   { color: var(--green);  background: var(--green-bg);  }
.ss-step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--border);
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.ss-step-pill.active .ss-step-num { background: var(--accent); color: #fff; }
.ss-step-pill.done   .ss-step-num { background: var(--green);  color: #fff; }

/* -- Cards ---------------------------------------------------- */
.ss-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 16px;
}
.ss-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* -- Upload zone ----------------------------------------------- */
.ss-dropzone {
  border: 2px dashed var(--border2);
  border-radius: var(--r);
  padding: 44px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.ss-dropzone:hover, .ss-dropzone.over {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.ss-dropzone input[type="file"] {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%;
}
.ss-upload-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.ss-upload-icon svg { width: 24px; height: 24px; stroke: var(--ink3); fill: none; stroke-width: 1.5; }
.ss-upload-headline { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.ss-upload-sub { font-size: 13px; color: var(--ink3); }
.ss-link { color: var(--accent); font-weight: 500; }
.ss-file-badge {
  display: none;
  align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--blue-bg);
  border: 1px solid #b5d0f4;
  border-radius: 8px;
  font-size: 13px;
}
.ss-file-badge svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; flex-shrink: 0; }

/* -- Preview canvas wrap --------------------------------------- */
.ss-preview-outer {
  display: none;
  background: #222220;
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 16px;
}
.ss-preview-inner {
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  min-height: 260px;
}
#ssPreviewCanvas {
  max-width: 100%; max-height: 440px;
  display: block; border-radius: 3px;
}
.ss-preview-legend {
  background: rgba(0,0,0,.55);
  padding: 9px 18px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.ss-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.8);
  font-family: 'DM Mono', monospace;
}
.ss-legend-swatch { width: 22px; height: 3px; border-radius: 2px; }
.ss-preview-dims {
  background: rgba(0,0,0,.7);
  padding: 8px 18px;
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,.75);
}

/* -- Form grid ------------------------------------------------- */
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ss-grid.ss-3col { grid-template-columns: 1fr 1fr 1fr; }
.ss-full { grid-column: 1 / -1; }
.ss-group { display: flex; flex-direction: column; gap: 5px; }
.ss-label {
  font-size: 12px; font-weight: 600;
  color: var(--ink2); letter-spacing: .1px;
}
.ss-req { color: var(--accent); }
.ss-hint { font-size: 11px; color: var(--ink3); margin-top: 2px; }

input[type="text"], input[type="number"], input[type="email"],
textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,68,10,.1);
}
textarea { resize: vertical; line-height: 1.5; }

.ss-unit-wrap { display: flex; }
.ss-unit-wrap input { border-radius: 8px 0 0 8px; flex: 1; min-width: 0; }
.ss-unit-wrap select {
  width: 62px; flex-shrink: 0;
  border-radius: 0 8px 8px 0;
  border-left: none;
  background: var(--paper);
  font-size: 12px; padding: 9px 6px;
  cursor: pointer;
}

/* -- Toggle ---------------------------------------------------- */
.ss-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
  margin-bottom: 10px;
}
.ss-toggle-row:hover { border-color: var(--border2); background: var(--paper); }
.ss-toggle-track {
  width: 34px; height: 19px;
  background: var(--border2);
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.ss-toggle-track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px;
  background: white; border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ss-toggle-row.on .ss-toggle-track { background: var(--accent); }
.ss-toggle-row.on .ss-toggle-track::after { transform: translateX(15px); }
.ss-toggle-body { flex: 1; }
.ss-toggle-label { font-size: 14px; font-weight: 500; }
.ss-toggle-sub { font-size: 12px; color: var(--ink3); margin-top: 1px; }

/* -- Production option cards ----------------------------------- */
.ss-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ss-opt-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  position: relative;
  user-select: none;
}
.ss-opt-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.ss-opt-card.selected { border-color: var(--accent); background: var(--accent-bg); }
.ss-opt-ring {
  position: absolute; top: 14px; right: 14px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: white;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.ss-opt-card.selected .ss-opt-ring { background: var(--accent); border-color: var(--accent); }
.ss-opt-ring svg { width: 10px; height: 10px; stroke: white; fill: none; display: none; }
.ss-opt-card.selected .ss-opt-ring svg { display: block; }
.ss-opt-num  { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.ss-opt-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.ss-opt-desc  { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.ss-opt-tag {
  display: inline-block; margin-top: 9px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
}
.tag-stock   { background: var(--paper);    color: var(--ink3);  border: 1px solid var(--border); }
.tag-custom  { background: var(--amber-bg); color: var(--amber); }
.tag-full    { background: var(--blue-bg);  color: var(--blue);  }
.tag-artwork { background: #f0fdf4;         color: #166534;      border: 1px solid #bbf7d0; }

/* -- Sequin tool ----------------------------------------------- */
.ss-seq-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ss-seq-btn {
  padding: 6px 13px; border-radius: 7px;
  border: 1px solid var(--border2);
  font-size: 12px; font-weight: 500; font-family: 'DM Sans', sans-serif;
  cursor: pointer; background: white; color: var(--ink2);
  transition: background .12s, border-color .12s, color .12s;
}
.ss-seq-btn:hover  { background: var(--paper); border-color: var(--accent); color: var(--accent); }
.ss-seq-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.ss-seq-btn.clear  { background: #fff0f0; color: #a32d2d; border-color: #f7c1c1; }
.ss-seq-count { font-size: 12px; color: var(--ink3); margin-left: auto; font-family: 'DM Mono', monospace; }
.ss-color-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ss-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.ss-swatch:hover { transform: scale(1.15); }
.ss-swatch.active { border-color: var(--ink); }
.ss-swatch-rainbow { background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); }
#ssCustomColor { display: none; }
#ssSeqCanvas {
  display: none; width: 100%;
  border-radius: 8px; border: 1px solid var(--border);
  cursor: crosshair;
}
.ss-seq-list { margin-top: 10px; font-size: 11px; color: var(--ink3); line-height: 1.8; }

/* -- Approval box ---------------------------------------------- */
.ss-approval-box {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 13px; color: var(--ink2); line-height: 1.7;
  margin-bottom: 14px;
}
.ss-approval-box ul { margin: 8px 0 0 18px; }

/* -- Summary --------------------------------------------------- */
.ss-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-sum-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 14px;
}
.ss-sum-key { font-size: 10px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.ss-sum-val { font-size: 13px; font-weight: 500; color: var(--ink); }

/* -- Alert ----------------------------------------------------- */
.ss-alert {
  padding: 11px 15px; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 14px;
}
.ss-alert svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: none; stroke-width: 2; }
.ss-alert-info    { background: var(--blue-bg);  color: #0c3d7a; border: 1px solid #b5d0f4; }
.ss-alert-info svg { stroke: var(--blue); }
.ss-alert-success { background: var(--green-bg); color: #0a4832; border: 1px solid #9fd8c2; }
.ss-alert-success svg { stroke: var(--green); }
.ss-alert-error   { background: #fcebeb; color: #7a1f1f; border: 1px solid #f0aaaa; }
.ss-alert-error svg { stroke: #a32d2d; }

/* -- Buttons --------------------------------------------------- */
.ss-btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.ss-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 9px;
  font-size: 14px; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; border: none;
  transition: background .15s, transform .1s;
  text-decoration: none; line-height: 1;
}
.ss-btn:active { transform: scale(.98); }
.ss-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.ss-btn-primary  { background: var(--accent); color: white; }
.ss-btn-primary:hover { background: var(--accent2); }
.ss-btn-secondary { background: white; color: var(--ink2); border: 1px solid var(--border2); }
.ss-btn-secondary:hover { background: var(--paper); }
.ss-btn-success  { background: var(--green); color: white; }
.ss-btn-success:hover { background: #147855; }
.ss-btn-lg { padding: 13px 24px; font-size: 15px; }
.ss-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* -- Steps show/hide ------------------------------------------- */
.ss-step { display: none; }
.ss-step.active { display: block; }

/* -- Success screen -------------------------------------------- */
.ss-success {
  text-align: center; padding: 56px 20px;
}
.ss-success-icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--green-bg);
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}
.ss-success-icon svg { width: 28px; height: 28px; stroke: var(--green); fill: none; stroke-width: 2; }
.ss-success-title { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.ss-success-sub { font-size: 14px; color: var(--ink3); max-width: 440px; margin: 0 auto 28px; line-height: 1.6; }

/* -- Responsive ------------------------------------------------ */
@media (max-width: 620px) {
  .ss-grid         { grid-template-columns: 1fr; }
  .ss-grid.ss-3col { grid-template-columns: 1fr; }
  .ss-options      { grid-template-columns: 1fr; }
  .ss-summary      { grid-template-columns: 1fr; }
  .ss-card         { padding: 18px 16px; }
  .ss-steps        { display: none; }
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* -- Sequin editor overlay ------------------------------------- */
#ssSeqOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #1e1b4b;
  flex-direction: column;
}
#ssSeqOverlay.open { display: flex; }
.ss-seq-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0,0,0,.4);
  flex-shrink: 0;
  gap: 12px;
}
.ss-seq-overlay-bar span {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 500;
}
.ss-seq-close-btn {
  padding: 8px 18px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.ss-seq-close-btn:hover { background: rgba(255,255,255,.25); }
.ss-seq-done-btn {
  padding: 8px 18px;
  background: #059669;
  border: none;
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.ss-seq-done-btn:hover { background: #047857; }
#ssSeqFrame {
  flex: 1;
  border: none;
  width: 100%;
}
/* -- Inline crop tool -------------------------------------------------- */
.ss-crop-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #00e5ff;
  border: 3px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  pointer-events: none; /* clicks pass through to overlay */
  z-index: 15;
}
#ssCropBox {
  position: absolute;
  border: 2px solid #00e5ff;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 10;
}
#ssCropOverlay {
  position: absolute;
  display: none;
  z-index: 12;
  cursor: crosshair;
}
/* preview inner must be position:relative so overlay aligns to it */
.ss-preview-inner { position: relative; overflow: hidden; }