/*
 * DarziOS PWA — SCR-ORD-01 3-step booking stepper styles (production).
 *
 * Owner rule (strict): every color, spacing value, radius, shadow and
 * duration in this file resolves to a custom property in
 * css/design-tokens.css. Zero raw color/size literals. Control patterns
 * (buttons, inputs, tags) come from css/controls.css.
 *
 * Doc 7 §4.3 ergonomics: 48px+ touch targets, tabular numerals on every
 * price/quantity figure, 7:1 primary-text contrast.
 */

/* ----------------------------------------------------------------- page */
.stepper {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

/* ------------------------------------------------------------ head row */
.stepper__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.stepper__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------ step indicator */
.stepper__steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.step-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--chalk-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.step-pill__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.step-pill--active {
  border-color: var(--brand-brass);
  color: var(--chalk-white);
  background: var(--brass-faint);
}
.step-pill--active .step-pill__num {
  background: var(--brand-brass);
  border-color: var(--brand-brass);
  color: var(--on-brass);
}
.step-pill--done {
  border-color: var(--status-success);
  color: var(--status-success);
  cursor: pointer;
}
.step-pill--done .step-pill__num {
  background: var(--success-faint);
  border-color: var(--status-success);
  color: var(--status-success);
}

.step-link {
  flex: 1;
  height: 1px;
  min-width: 16px;
  background: var(--border-subtle);
}

/* ------------------------------------------------------------- body */
.stepper__body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .stepper__body {
    grid-template-columns: 1fr;
  }
}

.order-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.order-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.order-card__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}

.step-panel {
  display: grid;
  gap: var(--space-4);
}

/* ------------------------------------------------------ customer search */
.cust-search {
  display: grid;
  gap: var(--space-3);
}
.cust-search__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 560px) {
  .cust-search__row {
    grid-template-columns: 1fr;
  }
}

.cust-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.cust-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--chalk-white);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.cust-row:hover {
  border-color: var(--brand-brass);
}
.cust-row__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--brand-brass-light);
  flex-shrink: 0;
}
.cust-row__icon svg {
  width: 100%;
  height: 100%;
}
.cust-row__main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.cust-row__name {
  font-weight: var(--weight-semibold);
}
.cust-row__phone {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
}
.cust-row__meta {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  white-space: nowrap;
}

.cust-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}

/* Selected customer card (step 1 selected state / running reference). */
.cust-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--brand-brass);
  border-radius: var(--radius-md);
  background: var(--brass-faint);
}
.cust-card__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--brand-brass-light);
}
.cust-card__icon svg {
  width: 100%;
  height: 100%;
}
.cust-card__name {
  font-weight: var(--weight-semibold);
}
.cust-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
}
.cust-card__orders {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------ garment choices */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
}
.choice-card {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  align-content: start;
  min-height: var(--touch-workshop);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--chalk-white);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}
.choice-card:hover {
  border-color: var(--brand-brass);
}
.choice-card--selected {
  border-color: var(--brand-brass);
  background: var(--brass-faint);
}
.choice-card__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.choice-card__rate {
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ segments */
.seg {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.seg__btn {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: none;
  background: var(--surface-elevated);
  color: var(--chalk-muted);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.seg__btn + .seg__btn {
  border-left: 1px solid var(--border-subtle);
}
.seg__btn--selected {
  background: var(--brand-brass);
  color: var(--on-brass);
}

/* ------------------------------------------------------------ quantity */
.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  padding: 0 var(--space-2);
}
.qty__btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--brand-brass-light);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.qty__btn:hover:not(:disabled) {
  background: var(--brass-faint);
}
.qty__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qty__value {
  min-width: var(--touch-min);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- textarea */
.textarea {
  min-height: calc(var(--space-12) + var(--space-6));
  width: 100%;
  resize: vertical;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--chalk-white);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  padding: var(--space-3);
}
.textarea::placeholder {
  color: var(--chalk-muted);
}
.textarea:focus-visible {
  outline: 2px solid var(--brand-brass-light);
  outline-offset: 2px;
  border-color: var(--brand-brass);
}

/* ------------------------------------------------------------- errors */
.form-err {
  margin: 0;
  min-height: 1em;
  font-size: var(--text-sm);
  color: var(--status-danger);
}

/* ------------------------------------------------------ next-step hint */
.next-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--chalk-muted);
  font-size: var(--text-sm);
}
.next-hint__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--brand-brass-light);
  flex-shrink: 0;
}
.next-hint__icon svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------- price panel */
.price-panel {
  position: sticky;
  top: calc(var(--touch-min) + var(--space-3) + var(--space-3) + var(--space-4));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.price-panel__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.price-row__value {
  color: var(--chalk-white);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.price-row--total {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--chalk-white);
}
.price-row--total .price-row__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--brand-brass-light);
}
.price-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}

/* ---------------------------------------------------------------- foot */
.stepper__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.stepper__foot-left,
.stepper__foot-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* --------------------------------------------------- success (booking) */
.booking-done {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}
.booking-done__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--success-faint);
  color: var(--status-success);
}
.booking-done__icon svg {
  width: 32px;
  height: 32px;
}
.booking-done__id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--brand-brass-light);
  font-variant-numeric: tabular-nums;
}
.booking-done__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.booking-done__summary {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.booking-done__summary strong {
  color: var(--chalk-white);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.booking-done__note {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.booking-done__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* -------------------------------------------------------- access denied */
.deny {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  max-width: 560px;
  margin: var(--space-12) auto 0;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.deny__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--status-danger);
}
.deny__icon svg {
  width: 100%;
  height: 100%;
}
.deny__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.deny__note {
  margin: 0;
  max-width: 48ch;
  color: var(--chalk-muted);
  font-size: var(--text-sm);
}