/*
  Wortic macOS UI Kit — Wallet Topup
  wm-wallet-topup

  Adicionar créditos: pacote pronto OU valor livre, método de pagamento,
  cupom, resumo e confirmação. Composição, não invenção — nada de CSS de
  cartão, campo, botão ou desconto reescrito aqui:

    - pacote/método = cartão selecionável construído sobre .wm-radio__input
      (o mesmo truque de esconder o <input> nativo que radio.css já usa,
      reaplicado num rótulo maior) + .wm-card para a superfície;
    - valor livre = .wm-field (components/text-field);
    - cupom = components/coupon-field/coupon-field.css(+js) INTEIRO, sem
      um pixel reescrito — o mesmo componente que um checkout de assinatura
      usa;
    - resumo = as classes de components/order-summary/order-summary.css
      (__totals, __row, __row--total) — o mesmo "checkout" que o resto do
      kit já usa para dinheiro, aqui mostrando o que a compra de créditos
      vai custar;
    - confirmação = window.WMToast (components/toast/toast.js).

  Depois de confirmar, wallet-topup.js tenta atualizar wallet-balance (se
  `window.WMWalletBalance` existir na página) e lançar a entrada em
  wallet-ledger (se `window.WMWalletLedger` existir) — a prova de que os
  componentes de crédito se encaixam sem gambiarra.
*/

@layer components {
  .wm-wallet-topup {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
    max-width: 480px;
  }

  .wm-wallet-topup__section-title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    margin-block-end: var(--wm-space-4);
  }

  /* ------------------------------------------------------------
     Pacotes prontos — cartão selecionável. O <input> some visualmente
     (mesma técnica de .wm-radio__input) mas continua no fluxo do
     teclado/leitor de tela; o <label> é que ganha a aparência de cartão.
     ------------------------------------------------------------ */
  .wm-wallet-topup__packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: var(--wm-space-4);
  }

  .wm-wallet-topup__package {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-2);
    padding: var(--wm-space-6) var(--wm-space-4);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-surface-primary);
    box-shadow: var(--_ring);
    text-align: center;
    cursor: pointer;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-wallet-topup__package:hover {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.24));
  }

  .wm-wallet-topup__package:has(.wm-radio__input:checked) {
    background: var(--wm-accent-fill);
    box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-wallet-topup__package:has(.wm-radio__input:focus-visible) {
    box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-wallet-topup__package-badge {
    position: absolute;
    top: calc(-1 * var(--wm-space-3));
    inset-inline: var(--wm-space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--wm-space-1);
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-gradient);
    color: var(--wm-label-on-accent);
    font-size: 10px;
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    width: fit-content;
    margin-inline: auto;
  }

  .wm-wallet-topup__package-credits {
    font-size: var(--wm-font-size-title2);
    font-weight: var(--wm-font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wm-letter-spacing-tighter);
    color: var(--wm-label-primary);
  }

  .wm-wallet-topup__package-unit {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    margin-block-start: calc(-1 * var(--wm-space-2));
  }

  .wm-wallet-topup__package-price {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    font-variant-numeric: tabular-nums;
  }

  .wm-wallet-topup__package-bonus {
    font-size: 10px;
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-success);
  }

  /* ------------------------------------------------------------
     Valor livre — components/text-field, com o resultado em créditos
     calculado ao vivo (ver wallet-topup.js).
     ------------------------------------------------------------ */
  .wm-wallet-topup__custom-row {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
  }
  .wm-wallet-topup__custom-row .wm-field {
    max-width: 160px;
  }
  .wm-wallet-topup__custom-input {
    font-variant-numeric: tabular-nums;
  }
  .wm-wallet-topup__custom-result {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
  }
  .wm-wallet-topup__custom-result strong {
    color: var(--wm-label-primary);
    font-weight: var(--wm-font-weight-semibold);
  }

  /* ------------------------------------------------------------
     Método de pagamento — mesma técnica de cartão selecionável dos
     pacotes, em formato de pílula horizontal com ícone.
     ------------------------------------------------------------ */
  .wm-wallet-topup__methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-4);
  }

  .wm-wallet-topup__method {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.14));
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    height: var(--wm-control-height-lg);
    padding-inline: var(--wm-space-6);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-surface-primary);
    box-shadow: var(--_ring);
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    cursor: pointer;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-wallet-topup__method:hover {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.24));
  }
  .wm-wallet-topup__method:has(.wm-radio__input:checked) {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    box-shadow: 0 0 0 1.5px var(--wm-accent);
  }
  .wm-wallet-topup__method:has(.wm-radio__input:focus-visible) {
    box-shadow: 0 0 0 1.5px var(--wm-accent), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-wallet-topup__method .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  /* ------------------------------------------------------------
     Resumo — reaproveita as classes de order-summary (não redefine
     nenhuma delas aqui; só as usa dentro do próprio card).
     ------------------------------------------------------------ */
  .wm-wallet-topup__summary {
    padding-block-start: var(--wm-space-5);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  .wm-wallet-topup__submit-row {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }

  .wm-wallet-topup__submit {
    width: 100%;
  }
  .wm-wallet-topup__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .wm-wallet-topup__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-normal);
  }
  .wm-wallet-topup__disclaimer .wm-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-wallet-topup__package,
    .wm-wallet-topup__method {
      transition: none;
    }
  }
}