/* ============================================================
   dtf-styles.css — MakeUrCreations DTF Order Form
   ============================================================ */

:root {
  --dtf-cyan:    #14a8d0;
  --dtf-cyan-lt: #29c8e8;
  --dtf-cyan-dk: #0d8db0;
  --dtf-dark:    #082b38;
  --dtf-dark-2:  #061822;
  --dtf-gray:    #f5fbfd;
  --dtf-border:  rgba(8,43,56,.12);
  --dtf-text:    #082b38;
  --dtf-text-lt: #475569;
  --dtf-radius:  14px;
  --dtf-radius-lg: 22px;
  --dtf-shadow:  0 4px 24px rgba(8,43,56,.10);
  --dtf-shadow-lg: 0 12px 40px rgba(8,43,56,.16);
}

/* ── Wrap ──────────────────────────────────────────────────── */
.muc-dtf-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-family: 'Nunito', sans-serif;
  color: var(--dtf-text);
}

/* ── Progress bar ─────────────────────────────────────────── */
.muc-dtf-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
  padding: 28px 0 0;
}
.muc-dtf-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.muc-dtf-step-dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
  transition: all .3s;
  border: 2.5px solid #e2e8f0;
}
.muc-dtf-progress-step span {
  font-size: 12px; font-weight: 700;
  color: #94a3b8; white-space: nowrap;
  transition: color .3s;
}
.muc-dtf-progress-step.active .muc-dtf-step-dot {
  background: var(--dtf-cyan);
  border-color: var(--dtf-cyan);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(20,168,208,.2);
}
.muc-dtf-progress-step.active span { color: var(--dtf-cyan); }
.muc-dtf-progress-step.completed .muc-dtf-step-dot {
  background: var(--dtf-dark);
  border-color: var(--dtf-dark);
  color: #fff;
}
.muc-dtf-progress-step.completed .muc-dtf-step-dot::after { content: '✓'; }
.muc-dtf-progress-step.completed .muc-dtf-step-dot { font-size: 0; }
.muc-dtf-progress-line {
  flex: 1; height: 2px; background: #e2e8f0;
  margin: 0 8px; margin-bottom: 22px; min-width: 40px;
}

/* ── Step panels ──────────────────────────────────────────── */
.muc-dtf-step-panel { display: none; }
.muc-dtf-step-panel.active { display: block; animation: dtfFadeIn .3s ease; }
@keyframes dtfFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.muc-dtf-panel-header { margin-bottom: 28px; }
.muc-dtf-panel-header h2 {
  font-size: clamp(22px,3vw,30px);
  font-weight: 950;
  color: var(--dtf-dark);
  margin: 0 0 8px;
  letter-spacing: -.03em;
}
.muc-dtf-panel-header p {
  font-size: 16px; color: var(--dtf-text-lt); margin: 0;
}

/* ── Order type cards ─────────────────────────────────────── */
.muc-dtf-type-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.muc-dtf-type-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.muc-dtf-type-card input[type="radio"] {
  position: absolute; opacity: 0; width:0; height:0;
}
.muc-dtf-type-inner {
  border: 2px solid var(--dtf-border);
  border-radius: var(--dtf-radius-lg);
  padding: 24px 20px;
  background: #fff;
  box-shadow: var(--dtf-shadow);
  transition: all .25s;
  text-align: center;
  height: 100%;
}
.muc-dtf-type-card:hover .muc-dtf-type-inner,
.muc-dtf-type-card.selected .muc-dtf-type-inner,
.muc-dtf-type-card input:checked ~ .muc-dtf-type-inner {
  border-color: var(--dtf-cyan);
  box-shadow: 0 0 0 3px rgba(20,168,208,.15), var(--dtf-shadow-lg);
  background: #f0fbff;
}
.muc-dtf-type-icon { font-size: 36px; margin-bottom: 12px; display: block; }
.muc-dtf-type-inner h3 {
  font-size: 16px; font-weight: 950; color: var(--dtf-dark);
  margin: 0 0 8px; letter-spacing: -.02em;
}
.muc-dtf-type-inner p {
  font-size: 13px; color: var(--dtf-text-lt);
  line-height: 1.55; margin: 0 0 12px;
}
.muc-dtf-type-tag {
  display: inline-block;
  background: rgba(20,168,208,.12);
  color: var(--dtf-cyan-dk);
  font-size: 11px; font-weight: 900;
  padding: 3px 10px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Gang sheet placeholder */
.muc-dtf-builder-placeholder {
  border: 2px dashed rgba(20,168,208,.35);
  border-radius: var(--dtf-radius-lg);
  padding: 28px;
  background: var(--dtf-gray);
  text-align: center;
  margin-bottom: 24px;
}
.muc-dtf-placeholder-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.muc-dtf-placeholder-inner h4 {
  font-size: 18px; font-weight: 900; color: var(--dtf-dark); margin: 0 0 8px;
}
.muc-dtf-placeholder-inner p {
  font-size: 14px; color: var(--dtf-text-lt); margin: 0;
}

/* ── Upload zone ──────────────────────────────────────────── */
.muc-dtf-upload-zone {
  border: 2.5px dashed rgba(20,168,208,.4);
  border-radius: var(--dtf-radius-lg);
  background: var(--dtf-gray);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.muc-dtf-upload-zone:hover,
.muc-dtf-upload-zone.drag-over {
  border-color: var(--dtf-cyan);
  background: #e8f7fc;
  box-shadow: 0 0 0 4px rgba(20,168,208,.12);
}
.muc-dtf-file-input {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%;
}
.muc-dtf-upload-ui { text-align: center; padding: 40px 24px; pointer-events: none; }
.muc-dtf-upload-icon { font-size: 48px; display: block; margin-bottom: 14px; }
.muc-dtf-upload-ui h3 {
  font-size: 20px; font-weight: 900; color: var(--dtf-dark);
  margin: 0 0 6px; letter-spacing: -.02em;
}
.muc-dtf-upload-ui p { font-size: 14px; color: var(--dtf-text-lt); margin: 0 0 16px; }
.muc-dtf-upload-formats {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.muc-dtf-upload-formats span {
  background: rgba(20,168,208,.1); color: var(--dtf-cyan-dk);
  font-size: 12px; font-weight: 900; padding: 4px 12px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Upload preview */
.muc-dtf-upload-preview {
  padding: 20px 24px; width: 100%;
}
.muc-dtf-file-info {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--dtf-radius);
  padding: 14px 18px;
  border: 1px solid rgba(20,168,208,.2);
  margin-bottom: 14px;
}
.muc-dtf-file-icon { font-size: 28px; flex-shrink: 0; }
.muc-dtf-file-info strong { display: block; font-size: 14px; color: var(--dtf-dark); font-weight: 900; }
.muc-dtf-file-info span { font-size: 12px; color: var(--dtf-text-lt); }
.muc-dtf-remove-file {
  margin-left: auto; background: #fee2e2; border: none;
  color: #dc2626; width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.muc-dtf-image-preview-wrap img {
  max-width: 100%; max-height: 240px;
  border-radius: 10px; display: block; margin: 0 auto;
}

/* ── Artwork tips ─────────────────────────────────────────── */
.muc-dtf-tips {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.muc-dtf-tip {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
}
.muc-dtf-tip span:first-child {
  flex-shrink: 0; font-size: 16px; margin-top: 1px;
}
.muc-dtf-tip.good { background: rgba(5,150,105,.08); color: #064e3b; }
.muc-dtf-tip.good span:first-child { color: #059669; }
.muc-dtf-tip.warn { background: rgba(245,158,11,.08); color: #78350f; }
.muc-dtf-tip.warn span:first-child { color: #d97706; }

/* ── Checkboxes ───────────────────────────────────────────── */
.muc-dtf-checkbox-label {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; font-size: 14px; color: var(--dtf-text-lt);
  line-height: 1.55; margin-bottom: 14px;
  padding: 14px 16px;
  background: #fff; border-radius: var(--dtf-radius);
  border: 1.5px solid var(--dtf-border);
}
.muc-dtf-checkbox-label input[type="checkbox"] { display: none; }
.muc-dtf-checkmark {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px; border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; margin-top: 1px;
}
.muc-dtf-checkbox-label input:checked ~ .muc-dtf-checkmark {
  background: var(--dtf-cyan); border-color: var(--dtf-cyan);
}
.muc-dtf-checkbox-label input:checked ~ .muc-dtf-checkmark::after {
  content: '✓'; color: #fff; font-size: 13px; font-weight: 900;
}

/* ── Form fields ──────────────────────────────────────────── */
.muc-dtf-field-group {
  margin-bottom: 22px;
}
.muc-dtf-field-group > label {
  display: block; font-size: 14px; font-weight: 900;
  color: var(--dtf-dark); margin-bottom: 8px;
}
.muc-dtf-optional { font-weight: 600; color: var(--dtf-text-lt); }
.muc-dtf-field-hint { font-size: 12px; color: var(--dtf-text-lt); margin: 5px 0 0; }

.muc-dtf-input-wrap { position: relative; }
.muc-dtf-input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--dtf-border);
  border-radius: var(--dtf-radius); font-size: 16px;
  font-family: 'Nunito', sans-serif; color: var(--dtf-dark);
  background: #fff; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.muc-dtf-input:focus {
  outline: none; border-color: var(--dtf-cyan);
  box-shadow: 0 0 0 3px rgba(20,168,208,.15);
}
.muc-dtf-input-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 800; color: var(--dtf-text-lt);
  pointer-events: none;
}
.muc-dtf-textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--dtf-border);
  border-radius: var(--dtf-radius); font-size: 15px;
  font-family: 'Nunito', sans-serif; color: var(--dtf-dark);
  resize: vertical; min-height: 100px;
  transition: border-color .2s, box-shadow .2s;
}
.muc-dtf-textarea:focus {
  outline: none; border-color: var(--dtf-cyan);
  box-shadow: 0 0 0 3px rgba(20,168,208,.15);
}

/* ── Sizing grid ──────────────────────────────────────────── */
.muc-dtf-sizing-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-bottom: 22px;
}

/* ── Size presets ─────────────────────────────────────────── */
.muc-dtf-size-presets { margin-bottom: 24px; }
.muc-dtf-presets-label {
  font-size: 13px; font-weight: 800; color: var(--dtf-text-lt);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em;
}
.muc-dtf-presets-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.muc-dtf-preset {
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--dtf-border);
  background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 800; color: var(--dtf-dark);
  text-align: center; line-height: 1.3;
  transition: all .2s;
}
.muc-dtf-preset:hover,
.muc-dtf-preset.active {
  border-color: var(--dtf-cyan); background: #f0fbff;
  color: var(--dtf-cyan-dk);
}
.muc-dtf-preset small { color: var(--dtf-text-lt); font-weight: 600; }

/* ── Turnaround cards ─────────────────────────────────────── */
.muc-dtf-turnaround-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.muc-dtf-turnaround-card {
  position: relative; cursor: pointer; display: block;
}
.muc-dtf-turnaround-card input { position: absolute; opacity: 0; width:0; height:0; }
.muc-dtf-turnaround-inner {
  border: 1.5px solid var(--dtf-border);
  border-radius: var(--dtf-radius); padding: 16px 14px;
  background: #fff; text-align: center;
  transition: all .2s;
}
.muc-dtf-turnaround-card:hover .muc-dtf-turnaround-inner,
.muc-dtf-turnaround-card.selected .muc-dtf-turnaround-inner,
.muc-dtf-turnaround-card input:checked ~ .muc-dtf-turnaround-inner {
  border-color: var(--dtf-cyan);
  background: #f0fbff;
  box-shadow: 0 0 0 2px rgba(20,168,208,.15);
}
.muc-dtf-turnaround-inner strong {
  display: block; font-size: 15px; font-weight: 950;
  color: var(--dtf-dark); margin-bottom: 4px;
}
.muc-dtf-turnaround-inner span {
  display: block; font-size: 12px; color: var(--dtf-text-lt); margin-bottom: 8px;
}
.muc-dtf-turnaround-inner em {
  font-style: normal; font-size: 13px; font-weight: 900; color: var(--dtf-cyan-dk);
}

/* ── Delivery cards ───────────────────────────────────────── */
.muc-dtf-delivery-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
}
.muc-dtf-delivery-card { position: relative; cursor: pointer; display: block; }
.muc-dtf-delivery-card input { position: absolute; opacity: 0; width:0; height:0; }
.muc-dtf-delivery-inner {
  border: 1.5px solid var(--dtf-border);
  border-radius: var(--dtf-radius); padding: 18px 16px;
  background: #fff; display: flex; align-items: center; gap: 14px;
  transition: all .2s;
}
.muc-dtf-delivery-card:hover .muc-dtf-delivery-inner,
.muc-dtf-delivery-card.selected .muc-dtf-delivery-inner,
.muc-dtf-delivery-card input:checked ~ .muc-dtf-delivery-inner {
  border-color: var(--dtf-cyan); background: #f0fbff;
  box-shadow: 0 0 0 2px rgba(20,168,208,.15);
}
.muc-dtf-delivery-inner > span:first-child { font-size: 28px; flex-shrink: 0; }
.muc-dtf-delivery-inner strong { display: block; font-size: 15px; font-weight: 900; color: var(--dtf-dark); margin-bottom: 3px; }
.muc-dtf-delivery-inner p { font-size: 12px; color: var(--dtf-text-lt); margin: 0; }

/* ── Price estimate ───────────────────────────────────────── */
.muc-dtf-price-estimate {
  background: linear-gradient(135deg, var(--dtf-dark-2), var(--dtf-dark));
  border-radius: var(--dtf-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  margin-top: 8px;
}
.muc-dtf-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px; color: rgba(255,255,255,.7);
}
.muc-dtf-price-row:last-of-type { border-bottom: none; }
.muc-dtf-price-total {
  font-size: 18px !important; font-weight: 900; color: #fff !important;
  padding-top: 14px !important; margin-top: 6px;
}
.muc-dtf-price-total span:last-child { color: var(--dtf-cyan-lt) !important; font-size: 22px; }
.muc-dtf-price-note {
  font-size: 11px; color: rgba(255,255,255,.45);
  margin: 12px 0 0; text-align: center;
}

/* ── Review card ──────────────────────────────────────────── */
.muc-dtf-review-card {
  background: #fff; border-radius: var(--dtf-radius-lg);
  border: 1.5px solid var(--dtf-border);
  box-shadow: var(--dtf-shadow);
  overflow: hidden; margin-bottom: 28px;
}
.muc-dtf-review-row {
  display: flex; padding: 12px 20px;
  border-bottom: 1px solid rgba(8,43,56,.06);
  align-items: flex-start; gap: 16px;
}
.muc-dtf-review-row:last-child { border-bottom: none; }
.muc-dtf-review-label {
  font-size: 13px; font-weight: 800; color: var(--dtf-text-lt);
  min-width: 130px; flex-shrink: 0;
}
.muc-dtf-review-value {
  font-size: 14px; font-weight: 700; color: var(--dtf-dark);
}
.muc-dtf-review-total .muc-dtf-review-label,
.muc-dtf-review-total .muc-dtf-review-value {
  font-size: 17px; font-weight: 950; color: var(--dtf-dark);
}
.muc-dtf-review-total .muc-dtf-review-value { color: var(--dtf-cyan-dk); }
.muc-dtf-review-total { background: var(--dtf-gray); }

/* ── Contact fields ───────────────────────────────────────── */
.muc-dtf-contact-fields { margin-bottom: 24px; }
.muc-dtf-contact-fields h3 {
  font-size: 18px; font-weight: 950; color: var(--dtf-dark);
  margin: 0 0 16px; letter-spacing: -.02em;
}
.muc-dtf-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.muc-dtf-logged-in-note {
  font-size: 14px; color: var(--dtf-text-lt);
  background: var(--dtf-gray); border-radius: var(--dtf-radius);
  padding: 12px 16px; margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.muc-dtf-step-nav {
  display: flex; gap: 12px; align-items: center;
  margin-top: 28px;
}
.muc-dtf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Nunito', sans-serif; font-weight: 900;
  padding: 14px 28px; border-radius: 999px; border: none;
  cursor: pointer; font-size: 15px; text-decoration: none;
  transition: all .22s; line-height: 1;
}
.muc-dtf-btn-next, .muc-dtf-btn-submit {
  background: linear-gradient(135deg, var(--dtf-cyan), var(--dtf-cyan-lt));
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(20,168,208,.32);
  flex: 1;
}
.muc-dtf-btn-next:hover, .muc-dtf-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(20,168,208,.42);
}
.muc-dtf-btn-back {
  background: #fff; color: var(--dtf-dark) !important;
  border: 1.5px solid var(--dtf-border);
}
.muc-dtf-btn-back:hover { background: var(--dtf-gray); }
.muc-dtf-btn span { font-size: 16px; }

.muc-dtf-submit-note {
  text-align: center; font-size: 13px;
  color: var(--dtf-text-lt); margin-top: 14px;
}

/* ── Error ────────────────────────────────────────────────── */
.muc-dtf-error {
  background: #fef2f2; border: 1.5px solid #fecaca;
  border-radius: var(--dtf-radius); padding: 14px 18px;
  color: #dc2626; font-size: 14px; font-weight: 700;
  margin-bottom: 16px;
}

/* ── Success ──────────────────────────────────────────────── */
.muc-dtf-success {
  text-align: center; padding: 60px 40px;
  background: #fff; border-radius: var(--dtf-radius-lg);
  border: 1.5px solid rgba(20,168,208,.2);
  box-shadow: var(--dtf-shadow-lg);
}
.muc-dtf-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dtf-cyan), var(--dtf-cyan-lt));
  color: #fff; font-size: 32px; display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 20px; box-shadow: 0 12px 32px rgba(20,168,208,.3);
}
.muc-dtf-success h2 {
  font-size: 28px; font-weight: 950; color: var(--dtf-dark);
  margin: 0 0 12px; letter-spacing: -.03em;
}
.muc-dtf-success p {
  font-size: 16px; color: var(--dtf-text-lt); line-height: 1.65;
  max-width: 540px; margin: 0 auto 28px;
}
.muc-dtf-success-actions {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .muc-dtf-type-grid { grid-template-columns: 1fr; }
  .muc-dtf-sizing-grid { grid-template-columns: 1fr; }
  .muc-dtf-turnaround-grid { grid-template-columns: 1fr; }
  .muc-dtf-delivery-grid { grid-template-columns: 1fr; }
  .muc-dtf-contact-grid { grid-template-columns: 1fr; }
  .muc-dtf-progress { gap: 0; }
  .muc-dtf-progress-line { min-width: 16px; }
  .muc-dtf-progress-step span { font-size: 10px; }
  .muc-dtf-step-dot { width: 30px; height: 30px; font-size: 13px; }
  .muc-dtf-step-nav { flex-direction: column-reverse; }
  .muc-dtf-btn { width: 100%; }
}