/* F8 customer card: the card, StampProgress, the personal QR and the customer's movements. */
@layer components {
  .customer {
    inline-size: 100%;
    max-inline-size: 26rem;
    margin-inline: auto;
  }

  .loyalty-card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space-double) calc(var(--inline-space) * 3);
    color: var(--color-text-reversed);
    background: var(--color-link);
    border-radius: var(--radius-large);

    & p { margin: 0; }
    & .flash { color: var(--color-text); } /* text on a tint is always --color-text */
  }

  .loyalty-card__business { font-weight: 700; }

  .loyalty-card__reward { font-size: var(--text-large); font-weight: 700; }

  .loyalty-card__conditions { font-size: var(--text-x-small); }

  .loyalty-card__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    margin: 0;
    padding: var(--block-space);
    color: #1b1828; /* the code sits on white in either mode, so any scanner reads it */
    background: #fff;
    border-radius: var(--radius);
    text-align: center;
    font-size: var(--text-small);

    & svg { inline-size: min(100%, 14rem); block-size: auto; }
  }

  .stamp-progress__stamps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      inline-size: 1.75rem;
      aspect-ratio: 1;
      border: 2px solid currentColor;
      border-radius: 50%;
    }

    & .stamp-progress__stamp--filled { background: var(--color-reward); border-color: var(--color-reward); }
  }

  .stamp-progress__label { font-weight: 700; }

  .card-movements {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small);

    & li { display: flex; flex-direction: column; }
    & small { color: var(--color-subtle); }
  }
}