/* ==========================================================================
   KaroPrints — 5-step ordering wizard + tracking
   ========================================================================== */

.wizard {
  padding-block: var(--sp-12);
  background: #fff;
  scroll-margin-top: 5rem;
}

.wizard__inner { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Stepper ------------------------------------------------------------------ */
.stepper-wrap { max-width: 56rem; margin-inline: auto; }

.stepper { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }

.stepper__track {
  position: absolute;
  top: 1.125rem;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--slate-200);
  border-radius: var(--r-full);
  z-index: 0;
}

.stepper__fill {
  height: 100%;
  background: var(--blue-600);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease);
}

.stepper__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.stepper__dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 800;
  border: 2px solid var(--slate-300);
  background: #fff;
  color: var(--slate-400);
  transition: all var(--dur) var(--ease);
}

@media (min-width: 640px) {
  .stepper__dot { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
}

.stepper__item[data-state="current"] .stepper__dot {
  background: var(--yellow-400);
  color: var(--slate-950);
  border-color: var(--slate-950);
  box-shadow: 0 0 0 4px rgb(250 204 21 / 0.3);
}

.stepper__item[data-state="done"] .stepper__dot {
  background: var(--blue-600);
  color: #fff;
  border-color: var(--blue-600);
}

.stepper__item[data-state="todo"] .stepper__dot { cursor: not-allowed; }
.stepper__item[data-state="done"] { cursor: pointer; }

.stepper__label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--slate-400);
  text-align: center;
  line-height: 1.25;
}

@media (min-width: 640px) {
  .stepper__label { font-size: var(--text-xs); }
}

.stepper__item[data-state="current"] .stepper__label { color: var(--slate-950); font-weight: 800; }
.stepper__item[data-state="done"] .stepper__label { color: var(--blue-700); }

/* Screen header ------------------------------------------------------------ */
.screen-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.screen-head h2 { margin-top: 0.5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.screen-head p { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--slate-600); }

.screen-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.screen-title__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow-600);
  display: block;
}

.screen-title h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: 0.25rem; }

/* Screen 1 — store selection ------------------------------------------------ */
.store-search {
  max-width: 48rem;
  margin-inline: auto;
  background: var(--slate-50);
  border: 2px solid var(--slate-900);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.store-search__row { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .store-search__row { flex-direction: row; align-items: center; } }

.city-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}

.city-pills { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }

.city-pill {
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--slate-700);
  background: #fff;
  border: 1px solid var(--line);
  transition: all var(--dur) var(--ease);
}

.city-pill:hover { background: var(--slate-200); }
.city-pill[aria-pressed="true"] { background: var(--blue-600); color: #fff; border-color: var(--blue-600); box-shadow: var(--shadow-sm); }

/* Shop cards --------------------------------------------------------------- */
.shop-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.shop-card:hover { border-color: var(--slate-400); box-shadow: var(--shadow-xl); }

.shop-card[aria-pressed="true"] {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgb(59 130 246 / 0.2), var(--shadow-md);
}

.shop-card__flag {
  position: absolute;
  top: -0.875rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--blue-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}

.shop-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.shop-card__name { font-size: var(--text-lg); font-weight: 800; color: var(--slate-950); }
.shop-card__addr { font-size: var(--text-xs); color: var(--slate-600); margin-top: 0.25rem; }
.shop-card__landmark { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate-500); margin-top: 0.125rem; }

.shop-card__distance {
  background: var(--yellow-100);
  color: var(--yellow-950);
  border: 1px solid var(--yellow-300);
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  flex: 0 0 auto;
}

/* agent.exe live panel */
.agent-panel {
  background: var(--slate-950);
  color: #fff;
  border: 1px solid var(--slate-800);
  border-radius: var(--r-lg);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.agent-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--slate-800);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.agent-panel__online { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--emerald-400); font-weight: 700; }
.agent-panel__count { color: var(--yellow-400); font-weight: 700; }

.agent-panel__list { display: grid; gap: 0.375rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-family: var(--font-mono); font-size: 0.625rem; color: var(--slate-300); }

.agent-chip {
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: var(--r-sm);
  padding: 0.25rem;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  min-width: 0;
}

.agent-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chip span:last-child { color: var(--emerald-400); font-weight: 700; flex: 0 0 auto; }

.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; font-size: var(--text-xs); }
.rate { border-radius: var(--r-lg); padding: 0.5rem; border: 1px solid var(--line); background: var(--slate-50); }
.rate--color { background: var(--yellow-50); border-color: var(--yellow-200); }
.rate--pickup { background: var(--blue-50); border-color: var(--blue-200); }
.rate__label { display: block; font-size: 0.625rem; color: var(--slate-500); }
.rate--color .rate__label { color: var(--yellow-800); }
.rate--pickup .rate__label { color: var(--blue-700); }
.rate__value { display: block; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 800; color: var(--slate-900); margin-top: 0.125rem; }
.rate--color .rate__value { color: var(--yellow-950); }
.rate--pickup .rate__value { font-size: var(--text-xs); text-transform: uppercase; color: var(--blue-950); }
.rate__unit { display: block; font-size: 0.5625rem; color: var(--slate-500); }

.shop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--slate-100);
}

.shop-card__timing { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); color: var(--slate-500); }

/* Active store banner (screen 2) -------------------------------------------- */
.active-store {
  background: var(--slate-950);
  color: #fff;
  border: 1px solid var(--slate-800);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: var(--shadow-md);
  text-align: left;
}

.active-store__main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.active-store__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r-lg); background: var(--yellow-400); color: var(--slate-950); display: grid; place-items: center; flex: 0 0 auto; }
.active-store__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--slate-400); }
.active-store__name { font-size: var(--text-sm); font-weight: 800; color: #fff; }
.active-store__meta { font-size: var(--text-xs); color: var(--slate-400); }
.active-store__meta strong { color: #fff; }

/* Screen 2 — upload -------------------------------------------------------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sp-6);
  border: 2px dashed var(--blue-400);
  border-radius: var(--r-xl);
  background: rgb(239 246 255 / 0.5);
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dropzone:hover, .dropzone.is-dragging { background: var(--blue-50); border-color: var(--blue-600); }
.dropzone.is-dragging { box-shadow: inset 0 0 0 4px rgb(37 99 235 / 0.12); }

.dropzone__icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  color: var(--blue-600);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dropzone:hover .dropzone__icon { transform: scale(1.08); background: var(--yellow-400); color: var(--slate-950); }
.dropzone h3 { font-size: var(--text-lg); font-weight: 800; color: var(--slate-950); margin-top: 0.25rem; }
.dropzone p { font-size: var(--text-xs); color: var(--slate-500); }
.dropzone__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; font-size: var(--text-xs); font-weight: 600; color: var(--slate-600); }
.dropzone__features span { display: inline-flex; align-items: center; gap: 0.25rem; }

.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.25rem; }
.preset-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); }

.preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--slate-100);
  color: var(--slate-800);
  border: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.preset-btn:hover { background: var(--yellow-100); }
.preset-btn small { font-family: var(--font-mono); font-size: 0.625rem; color: var(--slate-500); }

/* Document rows ------------------------------------------------------------ */
.doc-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.doc-row {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow-xs);
}

.doc-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate-100);
}

.doc-row__id { width: 2.5rem; height: 2.5rem; border-radius: var(--r-lg); background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.doc-row__name { font-size: var(--text-sm); font-weight: 800; color: var(--slate-950); max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-500); }
.doc-row__price { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 800; color: var(--blue-700); }

.doc-row__config { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--text-xs); }
@media (min-width: 640px) { .doc-row__config { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc-row__config label { display: block; font-weight: 700; color: var(--slate-700); margin-bottom: 0.25rem; }
.doc-row__config select { background: var(--slate-50); font-size: var(--text-xs); padding: 0.5rem; }

.doc-row__copies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-100);
  font-size: var(--text-xs);
}

.counter { display: inline-flex; align-items: center; gap: 0.5rem; }
.counter button {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-sm);
  background: var(--slate-100);
  font-weight: 800;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease);
}
.counter button:hover { background: var(--slate-200); }
.counter output { font-family: var(--font-mono); font-weight: 800; padding-inline: 0.5rem; }

/* Totals bar --------------------------------------------------------------- */
.totals-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--slate-50);
  border: 2px solid var(--slate-900);
  border-radius: var(--r-xl);
}

.totals-bar__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate-500); display: block; }
.totals-bar__value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 800; color: var(--slate-950); }
.totals-bar__hint { display: block; font-size: 0.6875rem; color: var(--slate-500); }
.totals-bar__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Screen 3 — proofing ------------------------------------------------------ */
.proof {
  background: var(--slate-950);
  border: 1px solid var(--slate-800);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  color: #fff;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.proof__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate-800);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.proof__file { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--slate-200); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof__tools { display: flex; align-items: center; gap: 0.5rem; }

.toggle-chip {
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.625rem;
  font-weight: 700;
  background: var(--slate-800);
  color: var(--slate-400);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toggle-chip[aria-pressed="true"] { background: var(--yellow-400); color: var(--slate-950); }
.toggle-chip--blue[aria-pressed="true"] { background: var(--blue-600); color: #fff; }

.proof__stage { display: flex; align-items: center; justify-content: center; padding-block: var(--sp-4); }

.paper {
  position: relative;
  width: 16rem;
  height: 21rem;
  background: #fff;
  color: var(--slate-900);
  border: 1px solid var(--slate-300);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2xl);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.paper__bleed { position: absolute; inset: 0.25rem; border: 1px dashed var(--rose-500); pointer-events: none; }
.paper__bleed span { position: absolute; top: 0.25rem; right: 0.25rem; font-family: var(--font-mono); font-size: 0.5rem; color: var(--rose-500); }
.paper__safe { position: absolute; inset: 0.75rem; border: 1px solid rgb(52 211 153 / 0.6); pointer-events: none; }
.paper__safe span { position: absolute; bottom: 0.25rem; left: 0.25rem; font-family: var(--font-mono); font-size: 0.5rem; color: var(--emerald-600); }

.paper__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--slate-200); }
.paper__name { font-size: 0.5625rem; font-weight: 700; color: var(--slate-700); max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper__page { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700; background: var(--slate-100); padding: 0.125rem 0.375rem; border-radius: var(--r-sm); }

.paper__lines { display: flex; flex-direction: column; gap: 0.375rem; }
.paper__bar { height: 0.625rem; background: var(--slate-900); border-radius: var(--r-sm); width: 75%; }
.paper__bar--thin { height: 0.375rem; background: var(--slate-300); width: 100%; }
.paper__bar--thin2 { height: 0.375rem; background: var(--slate-200); width: 83%; }

.paper__color {
  margin-block: 0.75rem;
  padding: 0.625rem;
  border-radius: var(--r-sm);
  background: linear-gradient(45deg, var(--blue-600), var(--indigo-500), var(--yellow-400));
  color: #fff;
  text-align: center;
}
.paper__color b { display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; }
.paper__color small { font-family: var(--font-mono); font-size: 0.5rem; opacity: 0.9; }

.paper__mono { margin-block: 0.75rem; padding: 0.625rem; border-radius: var(--r-sm); background: var(--slate-100); border: 1px solid var(--slate-200); text-align: center; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--slate-500); }

.paper__spiral { position: absolute; top: 0; bottom: 0; left: 0; width: 0.75rem; background: var(--slate-800); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: 0.5rem; }
.paper__spiral i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--yellow-400); }
.paper__staple { position: absolute; top: 0.5rem; left: 0.5rem; width: 1rem; height: 0.25rem; background: var(--slate-700); transform: rotate(-45deg); }

.paper__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--slate-100); padding-top: 0.25rem; font-size: 0.5rem; color: var(--slate-400); }

.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--text-xs); }
.page-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--slate-800);
  color: var(--slate-200);
  font-weight: 700;
}
.page-nav button:hover:not(:disabled) { background: var(--slate-700); }
.page-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.page-nav span { font-family: var(--font-mono); color: var(--slate-400); }

.bill-side {
  background: #fff;
  border: 2px solid var(--slate-900);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-align: left;
}

.bill-side h4 { font-size: var(--text-base); font-weight: 800; color: var(--slate-950); }
.bill-side__store { font-size: var(--text-xs); color: var(--slate-500); }

.bill {
  padding: 0.875rem;
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--slate-700);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bill__head { display: flex; justify-content: space-between; font-weight: 700; color: var(--slate-900); padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.bill__row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.6875rem; }
.bill__row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill__row--discount { color: var(--emerald-600); font-weight: 700; padding-top: 0.25rem; border-top: 1px solid var(--line); }
.bill__row--tax { color: var(--slate-500); }
.bill__total { display: flex; justify-content: space-between; padding-top: 0.5rem; border-top: 2px solid var(--slate-300); font-weight: 800; font-size: var(--text-sm); color: var(--slate-950); }
.bill__total span:last-child { color: var(--blue-600); }

/* Screen 4 — payment ------------------------------------------------------- */
.pay-card {
  max-width: 28rem;
  margin-inline: auto;
  background: #fff;
  border: 2px solid var(--slate-900);
  border-radius: var(--r-3xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-align: left;
}

.pay-card__head { text-align: center; }
.pay-card__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--blue-600); text-transform: uppercase; letter-spacing: 0.1em; }
.pay-card__head h3 { font-size: var(--text-xl); margin-top: 0.25rem; }
.pay-card__head p { font-size: var(--text-xs); color: var(--slate-500); margin-top: 0.25rem; }
.pay-card__amount { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 800; color: var(--slate-950); padding-top: 0.25rem; }

.pay-card__upi { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--slate-900); }
.pay-card__apps { font-size: 0.6875rem; color: var(--slate-500); }
.pay-card__actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* Screen 5 — success ------------------------------------------------------- */
.success-card {
  max-width: 40rem;
  margin-inline: auto;
  background: #fff;
  border: 2px solid var(--emerald-500);
  border-radius: var(--r-3xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-align: left;
}

.success-card__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.success-card__icon { width: 4rem; height: 4rem; border-radius: 50%; background: var(--emerald-100); color: var(--emerald-600); display: grid; place-items: center; box-shadow: var(--shadow-md); }
.success-card__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--emerald-700); text-transform: uppercase; letter-spacing: 0.1em; }
.success-card__head h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.success-card__head p { font-size: var(--text-xs); color: var(--slate-600); max-width: 26rem; }

.download-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--sp-4);
  background: var(--emerald-50);
  border: 2px solid var(--emerald-400);
  border-radius: var(--r-xl);
}

.download-banner__main { display: flex; align-items: flex-start; gap: 0.625rem; }
.download-banner b { display: block; font-size: var(--text-xs); color: var(--emerald-950); }
.download-banner p { font-size: 0.6875rem; color: var(--emerald-800); margin-top: 0.125rem; }
.download-banner code { font-family: var(--font-mono); font-weight: 700; }

.pickup-card { background: var(--slate-50); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4); font-size: var(--text-xs); display: flex; flex-direction: column; gap: 0.25rem; }
.pickup-card__label { font-weight: 700; color: var(--slate-900); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.pickup-card__name { font-weight: 800; color: var(--slate-800); }
.pickup-card__addr { color: var(--slate-600); }
.pickup-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.25rem; border-top: 1px solid var(--line); color: var(--slate-700); margin-top: 0.25rem; }
.pickup-card__foot strong { color: var(--emerald-700); }

/* Tracking ----------------------------------------------------------------- */
.track-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgb(239 246 255 / 0.6);
  border: 1px solid var(--blue-200);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}

.track-status__main { display: flex; align-items: center; gap: 0.75rem; }
.track-status__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r-lg); background: var(--blue-600); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.track-status__label { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; font-weight: 700; color: var(--blue-700); }
.track-status__title { font-size: var(--text-sm); font-weight: 800; color: var(--slate-950); }
.track-status__pin { text-align: right; }
.track-status__pin span { display: block; font-size: 0.625rem; font-weight: 700; color: var(--slate-400); }
.track-status__pin b { font-family: var(--font-mono); font-size: var(--text-sm); background: #fff; border: 1px solid var(--slate-300); border-radius: var(--r-sm); padding: 0.125rem 0.5rem; }

.track-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; text-align: center; font-size: 0.625rem; font-weight: 700; }
.track-step { padding: 0.5rem 0.25rem; border-radius: var(--r-sm); background: var(--slate-100); color: var(--slate-400); }
.track-step--done { background: var(--emerald-100); color: var(--emerald-800); }
.track-step--active { background: var(--yellow-100); color: var(--yellow-900); animation: pulseSoft 1.6s ease-in-out infinite; }

.meta-box {
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.meta-box__row { display: flex; justify-content: space-between; gap: 0.75rem; }
.meta-box__row span:first-child { color: var(--slate-500); }
.meta-box__row span:last-child { font-weight: 700; color: var(--slate-900); text-align: right; }
.meta-box__row--total { padding-top: 0.25rem; border-top: 1px solid var(--line); color: var(--emerald-700); font-weight: 700; }

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--text-xs); color: var(--slate-500); }
.chip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.chip:hover { border-color: var(--blue-400); }

/* Orders list -------------------------------------------------------------- */
.order-item { padding-top: var(--sp-4); display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.order-item:first-child { padding-top: 0; }
.order-item + .order-item { border-top: 1px solid var(--slate-100); }
.order-item__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.order-item__token { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 800; color: var(--slate-950); }
.order-item__grid { display: grid; gap: 0.5rem; background: var(--slate-50); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.75rem; font-family: var(--font-mono); font-size: var(--text-xs); }
@media (min-width: 640px) { .order-item__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.order-item__grid span { display: block; font-size: 0.625rem; color: var(--slate-400); }
.order-item__grid strong { color: var(--slate-900); }
.order-item__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--text-xs); }


/* ==========================================================================
   Mobile-Responsive Enhancements (Phone & Tablet Viewports < 768px)
   ========================================================================== */
@media (max-width: 640px) {
  .wizard {
    padding-block: var(--sp-6);
  }

  .screen-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Stepper on small mobile */
  .stepper-wrap {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .stepper {
    min-width: 320px;
  }
  .stepper__dot {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
  .stepper__label {
    font-size: 0.5625rem;
    max-width: 4rem;
  }

  /* Shop search & cards */
  .store-search {
    padding: var(--sp-4);
  }
  .shop-card {
    padding: var(--sp-4);
  }
  .shop-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .shop-card__foot .btn {
    width: 100%;
    justify-content: center;
  }

  /* Document upload list & config */
  .doc-row {
    padding: var(--sp-4);
  }
  .doc-row__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .doc-row__config {
    grid-template-columns: 1fr;
  }
  .doc-row__copies {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Screen 2 Totals bar */
  .totals-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: var(--sp-4);
  }
  .totals-bar__actions {
    flex-direction: column;
    width: 100%;
  }
  .totals-bar__actions button {
    width: 100%;
    justify-content: center;
  }

  /* Screen 3 Proof & Bill summary */
  .proof {
    padding: var(--sp-4);
  }
  .proof__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .proof__tools {
    flex-wrap: wrap;
    width: 100%;
  }
  .paper {
    width: 100%;
    max-width: 16rem;
    height: 19rem;
  }
  .bill-side {
    padding: var(--sp-4);
  }

  /* Screen 4 Pay card */
  .pay-card {
    padding: var(--sp-4);
    border-radius: var(--r-2xl);
    width: 100%;
  }
  .pay-card__amount {
    font-size: var(--text-2xl);
  }

  /* Screen 5 Success card */
  .success-card {
    padding: var(--sp-4);
    border-radius: var(--r-2xl);
  }
  .download-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .download-banner button {
    width: 100%;
  }

  /* Order Items list */
  .order-item__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .order-item__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .order-item__actions button {
    width: 100%;
    justify-content: center;
  }

  /* Modals on mobile */
  .modal {
    padding: 0.5rem;
  }
  .modal__panel {
    border-radius: var(--r-2xl);
    max-height: 94vh;
  }
  .modal__head {
    padding: var(--sp-3) var(--sp-4);
  }
  .modal__body {
    padding: var(--sp-4);
  }
}