/* The order page (Phase 2, step 2). */

.order__part { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.order > .order__part:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.page__body .order__part h2 { margin-top: 0; }

/* The dishes, each with its sizes and a "− 0 +" counter. */
.page__body .order__dishes,
.page__body .order__sizes { list-style: none; margin: 0; padding: 0; display: grid; }
.page__body .order__dishes { gap: var(--space-3); }
.page__body .order__sizes { gap: var(--space-2); margin-top: var(--space-2); }
.page__body .order__lines { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.page__body .order__lines[hidden] { display: none; }
.page__body .order__dishes li + li { margin-top: 0; }
/* Menu groups (seller tools, step T3): a heading, then its dishes. */
.page__body .order__group-name { margin: var(--space-2) 0 var(--space-2); font-size: var(--fs-lg); overflow-wrap: anywhere; }

.order__dish {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}

.order__photo {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
}

.order__dish-text { flex: 1; min-width: 0; }
.page__body .order__dish-name { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
.order__dish-tags { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

.order__size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.order__size-words { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

.stepper { display: inline-flex; align-items: center; gap: var(--space-1); }

.stepper__button {
  width: var(--tap);
  height: var(--tap);
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: var(--radius-pill);
  font: 800 var(--fs-lg) / 1 var(--font-body);
  cursor: pointer;
}

.stepper__button:disabled { border-color: var(--border); color: var(--text-muted); cursor: default; }

.stepper__count {
  min-width: 2.5rem;
  padding: .4rem .25rem;
  text-align: center;
  font-weight: 800;
  border-radius: var(--radius-sm);
}

/* A chosen size: the number is highlighted, and it's also more than 0. */
.order__size--chosen .stepper__count { color: var(--on-chip-on); background: var(--chip-on-bg); }

/* The total. */
.order__sums { margin: 0 0 var(--space-3); }

.order__sums div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--card-border);
}

.order__sums dt { min-width: 0; overflow-wrap: anywhere; }
.order__sums dd { margin: 0; font-weight: 700; white-space: nowrap; }
.order__sums .order__sum-total { border-bottom: 0; font-size: var(--fs-lg); font-weight: 800; }
.order__sums .order__sum-total dd { font-weight: 800; }

.order__mine { margin-top: var(--space-3); }
.order__back { margin: var(--space-5) 0 0; text-align: center; }
.order__back a { display: inline-block; padding-block: .75rem; } /* a bigger tap area */

/* A drop (Phase 2, step 5): how many are left of each, in words. */
.order__left { color: var(--success-text); font-size: var(--fs-sm); font-weight: 800; }
.order__left--none { color: var(--danger-text); }

/* Seller tools, step T1: the date calendar. Days that can't be chosen are grey and crossed out
   (not only a colour), and say why when read aloud. */
.order__picked { margin: 0 0 var(--space-2); font-weight: 800; }

.calendar {
  max-width: 24rem;
  padding: var(--space-2);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}

[aria-invalid="true"] > .calendar { border-color: var(--danger-text); }

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.calendar__title { margin: 0; font-family: var(--font-display); font-weight: 700; }

.calendar__move {
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--text);
  background: var(--chip-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  font: 800 var(--fs-lg) / 1 var(--font-body);
  cursor: pointer;
}

.calendar__move:disabled { visibility: hidden; }

.calendar__names,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.calendar__names { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; padding-block: var(--space-1); }

.calendar__out {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.calendar__day {
  min-height: var(--tap);
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 700 var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
}

.calendar__day:hover { border-color: var(--border); }

.calendar__day:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.calendar__day[aria-disabled="true"] {
  color: var(--text-muted);
  background: var(--surface-sunk);
  text-decoration: line-through;
  cursor: not-allowed;
}

.calendar__day[aria-disabled="true"]:hover { border-color: transparent; }

.calendar__day[aria-pressed="true"] {
  color: var(--on-chip-on);
  background: var(--chip-on-bg);
  border-color: var(--outline);
  box-shadow: 0 2px 0 var(--outline);
}

/* A collection time that's too late for the chosen day. */
.chip--check:has(input:disabled) {
  color: var(--text-muted);
  background: var(--surface-sunk);
  border-style: dashed;
  cursor: not-allowed;
}

.chip--check input:disabled { cursor: not-allowed; }

/* Choices and add-ons (seller tools, step T2): "Choose" opens them under the sizes, and each set
   of choices in the order is its own line, marked with a bar. */
.order__choose { min-height: var(--tap); padding-inline: var(--space-4); }

.order__choices {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.order__choices .fieldset { margin-bottom: var(--space-3); }
.order__choices .field__error { margin: 0 0 var(--space-2); }
.order__choices .btn + .btn { margin-top: var(--space-2); }

.order__lines li {
  padding-left: var(--space-2);
  border-left: 4px solid var(--chip-on-bg);
}

/* Add an order yourself (seller tools, step T5a). */
.order__intro { margin: 0 0 var(--space-4); }
.order__note { margin: var(--space-2) 0 0; padding: var(--space-3); background: var(--info-bg); border-radius: var(--radius-sm); font-weight: 400; }
.order__note[hidden] { display: none; }
.order__after { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.order__after[hidden] { display: none; }
.order__weekly-note { margin: var(--space-3) 0 0; font-weight: 700; }

/* Order together (23 Oct 2026): how a group order works, at the top of the form. */
.order__together {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border-radius: var(--radius);
}
.order__together[hidden] { display: none; }
.page__body .order__together-title { margin: 0; font-weight: 800; }
.page__body .order__together ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.page__body .order__together li + li { margin-top: var(--space-1); }