/*
  Wortic macOS UI Kit — Pricing Table
  wm-pricing-table

  Os planos lado a lado, com o toggle mensal/anual (reaproveita
  components/segmented-control inteiro) e o plano recomendado destacado
  por TRÊS sinais independentes de cor — rótulo de texto, posição elevada
  e borda em anel duplo — porque um daltônico precisa achar o recomendado
  só de olhar a forma, sem depender do accent azul.

  Cada cartão de plano compõe .wm-card (components/card/card.css) como
  superfície — este arquivo só acrescenta as partes específicas de preço.

  Escolher um plano é sempre <button>, nunca <div onclick>: cada cartão
  tem sua própria CTA, porque "escolher o Pro" e "escolher o Starter" são
  ações distintas, não um raio dentro de um radiogroup.
*/

@layer components {
  .wm-pricing-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-10);
  }

  .wm-pricing-table__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-3);
  }

  .wm-pricing-table__savings-note {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-success);
    font-weight: var(--wm-font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }

  .wm-pricing-table__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wm-space-8);
    width: 100%;
    align-items: stretch;
  }

  /* 680px = --wm-bp-md (foundation/tokens.css); @media não aceita var() na condição */
  @media (max-width: 680px) {
    .wm-pricing-table__grid {
      grid-template-columns: 1fr;
    }
  }

  .wm-pricing-table__plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    padding: var(--wm-space-9);
    /* .wm-card já dá fundo/sombra/raio; aqui só ajustamos para caber a fita. */
    margin-block-start: var(--wm-space-5);
  }

  /* Sinal 1: posição — o recomendado sobe e ganha destaque vertical. */
  .wm-pricing-table__plan--recommended {
    margin-block-start: 0;
    /* DIVERGÊNCIA MEDIDA em 09/08/2026, para upstream: a fita é absoluta em
       top: var(--wm-space-6) e mede 24px de altura; o reservado antes era
       space-9 + space-6 = 32px, 4px a MENOS do que a fita ocupa, e ela cobria
       o topo do nome do plano. Dois space-9 (40px) reservam a fita inteira. */
    padding-block-start: calc(var(--wm-space-9) * 2);
  }

  /* Sinal 2: borda — anel duplo (accent + halo), não só sombra genérica. */
  .wm-pricing-table__plan--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);
  }

  /* Sinal 3: rótulo — texto explícito, não só cor. */
  .wm-pricing-table__ribbon {
    position: absolute;
    inset-inline: var(--wm-space-9);
    top: var(--wm-space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-2);
    padding-block: var(--wm-space-2);
    padding-inline: var(--wm-space-6);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-gradient);
    color: var(--wm-label-on-accent);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    width: fit-content;
    margin-inline: auto;
  }

  .wm-pricing-table__plan-head {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
    text-align: center;
  }

  .wm-pricing-table__plan-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-pricing-table__plan-desc {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
  }

  .wm-pricing-table__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--wm-space-1);
  }

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

  .wm-pricing-table__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-pricing-table__price-period {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-tertiary);
  }

  .wm-pricing-table__price-note {
    text-align: center;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    min-height: var(--wm-leading-caption);
  }

  .wm-pricing-table__features {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
  }

  .wm-pricing-table__feature {
    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-pricing-table__feature .wm-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
    color: var(--wm-success);
  }

  .wm-pricing-table__feature--off {
    color: var(--wm-label-tertiary);
  }
  .wm-pricing-table__feature--off .wm-icon {
    color: var(--wm-label-quaternary);
  }

  .wm-pricing-table__cta {
    width: 100%;
    justify-content: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-pricing-table__plan {
      transition: none;
    }
  }
}