/* ==========================================================================
   EverFeed — account.css
   So o que as paginas de assinatura (account.html e order.html) precisam
   alem do app.css: a pilha de avisos da assinatura, as notas pequenas, o
   estado "plano atual" do seletor, o cartao do plano no pedido e a moldura
   do checkout embutido do Stripe. Carregado DEPOIS do app.css e feito so
   com os tokens do site — tema claro e escuro saem de graca.
   ========================================================================== */

/* avisos da assinatura (pendente, atrasado, troca agendada, teste...) */
.notice-stack{ display: grid; gap: .6rem; margin-top: 1.1rem; }
.notice-stack:empty{ display: none; }
.notice-stack .alert{ margin: 0; }

/* nota pequena abaixo de acoes e cartoes */
.acct-note{
  margin: .9rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-3);
}
.acct-card > p.acct-note{ color: var(--text-3); font-size: .86rem; }
.acct-note a{ color: var(--primary); font-weight: 560; text-decoration: none; overflow-wrap: anywhere; }
.acct-note a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.acct-actions .link-btn{ align-self: center; }

/* "validade 12/30" ao lado do cartao */
.kv dd .muted{ margin-left: .45rem; font-weight: 400; font-size: .86rem; }

/* seletor de plano: o atual nao e link, entao nao sobe no hover */
.plan-switch .plan.is-current,
.plan-switch a.plan.is-current:hover{ transform: none; box-shadow: none; cursor: default; }
.plan-switch .plan .plan-billed{ margin: -.2rem 0 0; font-size: .82rem; color: var(--text-3); }
/* creditos por semana / "Sem geracao por IA" no cartao compacto */
.plan-switch .plan .plan-ai{ margin: 0; font-size: .82rem; line-height: 1.4; color: var(--text-2); }
.plan-switch .plan .plan-ai strong{ display: block; font-weight: 560; color: var(--text); }
.plan-switch .plan .plan-ai span{ display: block; color: var(--text-3); }
.plan-switch .plan .plan-ai.is-off strong{ color: var(--text-3); }
/* reserva enquanto GET plans nao responde */
.plan-switch .plan-skel-sm{ min-height: 9rem; justify-content: center; }

/* ------------------------------------------------------ creditos -- */

.credit-balances{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.credit-balances .metric-sub + .metric-sub{ margin-top: .1rem; color: var(--text-3); font-size: .78rem; }
.credits-sub{ font-size: 1rem; letter-spacing: -.01em; margin: 1.4rem 0 .6rem; }
.pack-list{ display: grid; gap: .6rem; }
.pack{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
}
.pack.is-highlight{ border-color: color-mix(in oklab, var(--primary) 45%, transparent); background: var(--primary-soft); }
.pack-info{ min-width: 0; }
.pack-info strong{ display: block; }
.pack-info span{ display: block; font-size: .86rem; color: var(--text-2); overflow-wrap: anywhere; }
.pack-buy{ display: flex; align-items: center; gap: .8rem; }
.pack-price{ font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.buy-table{ min-width: 520px; }

/* credits.html: o numero de creditos no lugar do preco */
.pack-card .price .amt{ font-size: clamp(2rem, 4.5vw, 2.6rem); }

/* ------------------------------------------------------------- pedido -- */

.order-plan .kicker{ margin: 0; }
.order-plan h3{ margin-top: -.35rem; }

.checkout-box{ display: grid; gap: .75rem; min-width: 0; }
.checkout-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.checkout-head h2{ font-size: 1.22rem; letter-spacing: -.02em; margin: 0; }
/* O iframe do Stripe tem fundo branco nos dois temas; com ele montado, a
   moldura acompanha para nao sobrar um anel escuro em volta no tema escuro. */
.checkout-panel.is-mounted{ background: #fff; border-color: var(--border-2); }

/* Celular (uma coluna): o resumo, com o botao de pagar, sobe para logo
   depois do plano — no fim da pilha ele ficava abaixo do cartao da conta,
   a uma rolagem inteira do que a pessoa veio fazer ali. */
@media (max-width: 900px){
  .order-grid > .acct-stack{ display: contents; }
  .order-grid > .acct-stack > *{ order: 1; }
  .order-grid > .order-side{ order: 2; }
  .order-grid > .acct-stack > [data-account-card]{ order: 3; }
}

.summary [data-summary-rows] .summary-row:first-child{ padding-top: 0; }
.summary-row > span:first-child{ min-width: 0; }
.secure-long{ margin-top: .35rem; text-align: center; }

.order-links{ margin: 0; text-align: center; font-size: .9rem; }
.order-links a{ color: var(--primary); font-weight: 560; text-decoration: none; }
.order-links a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ estados -- */

.state-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: .3rem;
}
.app-state[data-tone="ok"] h2{ color: var(--ok); }
.app-state[data-tone="err"] h2{ color: var(--danger-ink); }