/*
  Wortic macOS UI Kit — Plan Card
  wm-plan-card

  Um plano SOZINHO: o que inclui, o que não inclui, e o preço com a moeda
  certa. Compõe .wm-card (components/card/card.css) como superfície — este
  arquivo só acrescenta as partes de plano. Difere de pricing-table: aqui
  não tem grade nem toggle, é o cartão isolado (checkout, confirmação,
  página "seu plano atual").

  O plano atual (--current) troca a CTA por um estado neutro e explícito
  ("Seu plano atual") em vez de escconder o botão — nunca some com o
  controle, só desabilita com o motivo visível ao lado.
*/

@layer components {
  .wm-plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    max-width: 340px;
  }

  .wm-plan-card--recommended.wm-card {
    box-shadow:
      0 0 0 1.5px var(--wm-accent),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
      var(--wm-shadow-2),
      var(--wm-shadow-3);
  }

  .wm-plan-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    width: fit-content;
    padding-block: var(--wm-space-2);
    padding-inline: var(--wm-space-5);
    border-radius: var(--wm-radius-pill);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
  }

  .wm-plan-card__badge--recommended {
    background: var(--wm-accent-gradient);
    color: var(--wm-label-on-accent);
  }

  .wm-plan-card__badge--current {
    background: var(--wm-success-fill);
    color: var(--wm-success);
  }

  .wm-plan-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }

  .wm-plan-card__name {
    font-size: var(--wm-font-size-title2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }

  .wm-plan-card__desc {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
  }

  .wm-plan-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--wm-space-1);
  }

  .wm-plan-card__price-currency {
    font-size: var(--wm-font-size-title3);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }

  .wm-plan-card__price-value {
    font-size: var(--wm-font-size-large-title);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  .wm-plan-card__price-period {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-tertiary);
  }

  .wm-plan-card__price-note {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }

  .wm-plan-card__section {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
  }

  .wm-plan-card__section-title {
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--wm-label-tertiary);
  }

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

  .wm-plan-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-4);
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    line-height: var(--wm-line-height-normal);
  }

  .wm-plan-card__item .wm-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
    color: var(--wm-success);
  }

  .wm-plan-card__item--excluded {
    color: var(--wm-label-tertiary);
  }
  .wm-plan-card__item--excluded .wm-icon {
    color: var(--wm-label-quaternary);
  }

  .wm-plan-card__cta {
    width: 100%;
    justify-content: center;
  }

  .wm-plan-card__current-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-2);
    padding-block: var(--wm-space-5);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-success);
    background: var(--wm-success-fill);
    border-radius: var(--wm-radius-md);
  }

  /* Compacto: sem a lista de "não incluído" — usado em confirmação de checkout. */
  .wm-plan-card--compact .wm-plan-card__section--excluded {
    display: none;
  }
}