/* Orders as a list of cards: "Your orders" on the account page, and the Order Board
   (Phase 2, steps 2 and 3). The state is in words, with an icon, as well as colour. */

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

.order-list__order {
  padding: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.order-list__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.order-list__top a,
.order-list__top strong { font-weight: 800; overflow-wrap: anywhere; }
.order-list__top a { padding-block: .6rem; } /* a bigger tap area */

.order-state {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.order-state svg { width: 1.1em; height: 1.1em; flex: none; }
.order-state--sent { color: var(--text); background: var(--info-bg); }
.order-state--good { color: var(--success-text); background: var(--success-bg); }
.order-state--stopped { color: var(--danger-text); background: var(--danger-bg); }

.order-list__when { margin: var(--space-1) 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
.order-list__items { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.order-list__items li { display: flex; justify-content: space-between; gap: var(--space-3); }
.order-list__items span:first-child { min-width: 0; overflow-wrap: anywhere; }
.order-list__items span:last-child { white-space: nowrap; }
.order-list__total { margin: var(--space-2) 0 0; font-weight: 800; }
.order-list__why { margin: var(--space-1) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* After the seller accepts: where to get the food, and how to pay. */
.order-list__next {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.order-list__info { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.order-list__fine { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.order-list__next .order-list__fine { margin: 0; }

/* Buttons and short forms on a card (cancel, accept, decline). */
.order-list__cancel,
.order-list__actions { margin-top: var(--space-3); }
.order-list__cancel-form,
.order-list__form { display: grid; gap: var(--space-2); }
.order-list__cancel-form .field__hint,
.order-list__form .field__hint { margin: 0; }
.order-list__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.order-list__buttons .btn { flex: 1 1 10rem; }