/*
  Wortic macOS UI Kit — Order Summary
  wm-order-summary

  O resumo: itens, desconto, imposto, total — e o que muda no PRÓXIMO
  ciclo. Preço é dado sensível de confiança: o total de hoje e o valor do
  próximo ciclo (com a data) ficam os dois visíveis, nunca só um.

  Compõe .wm-card como superfície. Totais em <dl> nativo (dt/dd
  agrupados em <div>, HTML5 válido) — semântica de par rótulo/valor, não
  uma tabela nem divs soltas.
*/

@layer components {
  .wm-order-summary {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    max-width: 360px;
  }

  .wm-order-summary__title {
    font-size: var(--wm-font-size-title3);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }

  .wm-order-summary__items {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .wm-order-summary__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wm-space-4);
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
  }

  .wm-order-summary__item-name {
    color: var(--wm-label-primary);
  }

  .wm-order-summary__item-qty {
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption);
    margin-inline-start: var(--wm-space-2);
  }

  .wm-order-summary__item-price {
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-secondary);
    white-space: nowrap;
  }

  .wm-order-summary__divider {
    height: var(--wm-border-width-hairline);
    background: var(--wm-separator);
    border: none;
    margin: 0;
  }

  .wm-order-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    margin: 0;
  }

  .wm-order-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wm-space-4);
  }

  .wm-order-summary__row dt {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
  }

  .wm-order-summary__row dd {
    margin: 0;
    font-size: var(--wm-font-size-subheadline);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  .wm-order-summary__row--discount dt,
  .wm-order-summary__row--discount dd {
    color: var(--wm-success);
  }

  .wm-order-summary__row--total {
    padding-block-start: var(--wm-space-4);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  .wm-order-summary__row--total dt {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }

  .wm-order-summary__row--total dd {
    font-size: var(--wm-font-size-title2);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter);
  }

  .wm-order-summary__next-cycle {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-tertiary);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
  }

  .wm-order-summary__next-cycle .wm-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
    color: var(--wm-label-tertiary);
  }

  .wm-order-summary__next-cycle strong {
    color: var(--wm-label-primary);
    font-weight: var(--wm-font-weight-semibold);
  }
}