/* Loja de recompensas e página Premium. As ofertas são linhas comparáveis
 * (texto à esquerda, custo e ação à direita), sem grade de cartões. */
.reward-shop, .premium-page { max-width: 870px; }
.reward-shop .page-head p, .premium-intro { max-width: 62ch; }

.reward-wallet, .premium-access {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2.5rem;
  padding: 1rem 1.25rem; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: 7px; background: var(--panel);
}
.premium-access { border-inline-start-color: var(--good); }
.reward-wallet p { margin: 0; color: var(--muted); line-height: 1.5; }
.reward-balance span { display: block; color: var(--muted); font-size: .86rem; }
.reward-balance strong { display: block; font-size: 1.6rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.reward-totals { display: flex; gap: .4rem 1.8rem; margin: 0; }
.reward-totals dt { color: var(--muted); font-size: .8rem; }
.reward-totals dd { margin: .1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.reward-message { margin: 1rem 0 0; color: var(--good); }
.reward-message[data-tone="error"], .reward-confirm-error { color: var(--error); }
.reward-message:empty, .reward-confirm-error:empty { display: none; }
.reward-message:focus { outline: none; }

.reward-list, .premium-offers { margin-top: 1.45rem; }
.reward-offer, .premium-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .8rem 1.75rem;
  padding: 1.25rem 0; border-block-start: 1px solid var(--line);
}
.reward-offer:last-child, .premium-offer:last-child { border-block-end: 1px solid var(--line); }
.reward-offer h2, .premium-offer h2, .reward-earning h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.reward-offer p, .premium-offer p, .reward-earning p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 58ch; }
.reward-offer-copy a, .premium-offer-action a:not(.primary) {
  display: inline-block; margin-top: .3rem; padding-block: .35rem; color: var(--good); text-decoration: underline; text-underline-offset: .18em;
}
.reward-offer-action, .premium-offer-action { display: grid; justify-items: end; gap: .4rem; text-align: end; }
.reward-offer-action strong, .premium-offer-action strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.reward-offer-action span, .premium-offer-action span { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.reward-offer-action a { color: var(--good); }
.reward-offer[data-state="short"] .reward-offer-action strong,
.reward-offer[data-state="guest"] .reward-offer-action strong { color: var(--muted); font-weight: 600; }
.premium-offer-action a.primary { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--accent); border-radius: 7px; }

.premium-access strong { display: block; font-size: 1.1rem; }
.premium-access span { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.premium-access .actions { margin: 0; }
.premium-payment { grid-column: 1 / -1; min-width: 0; }
.premium-payment > p:first-child { margin-top: 0; }
.premium-footnote { margin: 1rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.premium-grace { margin: 0 0 1rem; padding: .65rem .9rem; border-inline-start: 3px solid var(--gold); border-radius: 0 7px 7px 0; background: var(--panel); color: var(--text); }

.reward-earning { margin-top: 1.65rem; }
.reward-earning dl { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; margin-block: .75rem; }
.reward-earning dl div { display: flex; gap: .4rem; align-items: baseline; }
.reward-earning dd { margin: 0; color: var(--good); font-weight: 650; font-variant-numeric: tabular-nums; }
.reward-confirm { max-width: min(30rem, calc(100vw - 2rem)); padding: 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.reward-confirm::backdrop { background: #0008; }
.reward-confirm h2 { margin-top: 0; font-size: 1.2rem; }
.reward-confirm p { line-height: 1.55; }
.reward-confirm .actions { justify-content: flex-end; margin-top: 1.2rem; }
.game-companion[data-reward-frame="true"] img { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 7px; }

@media (max-width: 560px) {
  .reward-offer, .premium-offer { grid-template-columns: minmax(0, 1fr); }
  .reward-offer-action, .premium-offer-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .45rem .9rem; text-align: start; }
  .reward-wallet, .premium-access { gap: .8rem 1.5rem; }
  .reward-confirm .actions { justify-content: stretch; }
  .reward-confirm .actions button { flex: 1 1 auto; }
}