/*
 * The status page of an order (mockup screen 5): a card with the icon, the stage and the time, the timeline under it, then what was
 * ordered and the two buttons. A phone has them in one column as drawn; from 600px the column is centred; from 1024px the card and
 * the timeline are at the left and the order and the buttons at the right (docs/planning/12-adaptive-layout-plan.md §4).
 */

@layer components {
  /* The script sits on this element; the page is arranged as if it were not there. */
  .order-status {
    display: contents;
  }

  /* ---- The status card ---- */
  .status-hero {
    margin: var(--s-2) var(--s-4) 0;
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    text-align: center;
  }

  .status-ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
  }

  /* The icon is 28px in its circle, and keeps that at large text (a fixed circle). */
  .status-ico .icon {
    width: 28px;
    height: 28px;
  }

  /* The restaurant cancelled the order (C2): the circle is in the colour of a warning, as the tag of a refunded order in the admin. */
  .status-ico--cancelled {
    background: var(--spice-soft);
    color: var(--spice);
  }

  .status-hero__title {
    margin: var(--s-2) 0 4px;
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    font-size: 1.625rem;
    overflow-wrap: anywhere;
  }

  .status-hero__line {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* ---- The timeline ---- */
  .timeline {
    margin: var(--s-4) var(--s-4) 0;
    padding: 0;
    list-style: none;
  }

  .timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    font-size: 0.9375rem;
  }

  /* The line from the circle down to the next one. */
  .timeline__step::before {
    content: '';
    position: absolute;
    top: 26px;
    bottom: 0;
    left: 13px;
    width: 2px;
    background: var(--border);
  }

  .timeline__step:last-child::before {
    display: none;
  }

  .timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--on-primary);
  }

  .timeline__step--done .timeline__dot {
    border-color: var(--veg);
    background: var(--veg);
  }

  .timeline__step--now .timeline__dot {
    border-color: var(--primary);
  }

  .timeline__step--now .timeline__dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
  }

  /* Where the restaurant cancelled the order: the last step of its timeline, in the warning colour. */
  .timeline__step--cancelled .timeline__dot {
    border-color: var(--spice);
    background: var(--spice);
  }

  .timeline__step--todo {
    color: var(--muted);
  }

  .timeline__step--now b {
    color: var(--primary);
  }

  .timeline__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .timeline__time {
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }

  /* ---- What was ordered ---- */
  .order-lines {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .order-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 4px 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }

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

  .order-row__options,
  .order-row__note {
    color: var(--muted);
    font-size: 0.875rem;
  }

  .order-row__note {
    font-style: italic;
  }

  .order-row__amount {
    flex: none;
  }

  /* "Spaarpunten (104) − € 5,20": the colour of points, as the row of the order box of the checkout (screen L4). */
  .order-row--points {
    color: var(--gold-text);
    font-weight: 600;
  }

  /* What went back to the customer after a cancellation (C2): muted, under the total. */
  .order-row--back {
    color: var(--muted);
  }

  .order-row--total {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  /* The form of "Opnieuw" is a cell of the row of buttons, as wide as the cell. */
  .btn-row__form {
    display: flex;
    min-width: 0;
  }

  /* ---- Bestellingen: Nu, the orders that are going on, as small status cards ---- */
  .order-now-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .order-now-list > li + li {
    margin-top: var(--s-3);
  }

  /* The whole card is the link: at least 44px high, answers the finger, and has its ring around it (nothing clips it). */
  .order-now {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--tap);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--text);
    text-decoration: none;
  }

  .order-now:active {
    background: var(--surface-2);
  }

  /* The same circle as the status card, smaller. */
  .status-ico--small {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .status-ico--small .icon {
    width: 20px;
    height: 20px;
  }

  .order-now__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .order-now__title {
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }

  .order-now__meta {
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  /* The list of Eerder is inside its block, which has the margin of the page: the list has none of its own. */
  .form-sec > .list {
    margin: 0;
  }

  /* Eerder: a row of the list says the day and the number, and under it how much it was. */
  .order-past {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .order-past__title {
    font-variant-numeric: tabular-nums;
  }

  .order-past__meta {
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }

  /* ---- A tablet in portrait, a phone on its side, a browser: one centred column. ---- */
  @media (min-width: 600px) {
    .order-view {
      width: 100%;
      max-width: var(--narrow);
      margin-inline: auto;
    }
  }

  /* ---- Expanded: the status at the left, the order at the right, under the title. ---- */
  @media (min-width: 1024px) {
    .order-view {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      /* The rows are as high as what is in them: where the page is as high as the screen (the sidebar layout of an iPad) they would
         otherwise be stretched over the rest of it and the cards would start far below the title. */
      align-content: start;
      align-items: start;
      column-gap: var(--s-4);
      max-width: 64rem;
    }

    .order-view > .page-heading,
    .order-view > .flash {
      grid-column: 1 / -1;
    }

    .order-view__status {
      grid-column: 1;
    }

    .order-view__details {
      grid-column: 2;
    }

    .order-view__details > :first-child {
      margin-top: var(--s-2);
    }
  }
}