/*
 * Pagina Bestellen: bestelformulier met een lijst van alle producten.
 * Velden, keuzes en foutmeldingen komen uit forms.css.
 */

.form__heading {
  margin: var(--space-s) 0 0;
  font-size: var(--font-size-h3);
}

.form__hint {
  margin: 0;
  color: var(--color-text-muted);
}

/* Blok dat getoond of verborgen wordt volgens een keuze (bestellen.js) */
.form-group {
  display: grid;
  gap: var(--space-m);
}

/* Producten per merk */
.order-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.order-group legend {
  padding: 0;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  color: var(--color-primary);
}

.order-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--color-border);
}

.order-item {
  display: grid;
  grid-template-columns: 1fr 6rem;
  gap: var(--space-xs) var(--space-s);
  align-items: end;
  padding: var(--space-s) var(--space-xs);
  border-bottom: var(--border-width) solid var(--color-border);
  scroll-margin-top: 8rem;
}

.order-item__info {
  grid-column: 1 / -1;
}

.order-item__name {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.order-item__pack,
.order-item__color--fixed {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.order-item__color--fixed {
  align-self: center;
}

.order-item__qty {
  grid-column: 2;
  grid-row: 2;
}

.order-item .form-field label {
  font-size: var(--font-size-small);
}

@media (min-width: 40em) {
  .order-item {
    grid-template-columns: 1fr 11rem 6rem;
  }

  .order-item__info {
    grid-column: 1;
    align-self: center;
  }

  .order-item__qty {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Product waarmee de bezoeker binnenkwam via een bestelknop */
.order-item--gekozen {
  background-color: var(--color-bg);
}