/* ==========================================================================
   Choose The Music — telas de Planos e Assinatura (F5.4)
   Só variáveis --ctm-* / componentes .ctm-* já existentes em site.css.
   ========================================================================== */

.ctm-card-highlight {
  border-color: var(--ctm-primary-40) !important;
  box-shadow: var(--ctm-shadow-lg);
}

/* f10.6c: cartão Pro Max em destaque (Billing/Plans.cshtml) -- fundo em degradê que vinha em style="" */
.ctm-card-highlight.ctm-plans-promax-card {
  background: linear-gradient(180deg, var(--ctm-amber-100-20) 0%, var(--ctm-surface) 100%);
}

.billing-pix-qr {
  max-width: 180px;
  border: 1px solid var(--ctm-border);
  border-radius: var(--ctm-radius-sm);
  padding: .5rem;
  background: var(--ctm-surface);
}

/* Celular primeiro (regra 22): a partir de 576px o QR cresce. */
@media (min-width: 576px) {
  .billing-pix-qr {
    max-width: 220px;
  }
}

/* f11.15 (D-39): tela de upgrade do Pro para o Pro Max (Billing/UpgradeToProMax e as telas de sucesso e erro). */
.billing-upgrade {
  max-width: 40rem;
}

.billing-upgrade-amount {
  font-size: 1.625rem;
}

.billing-upgrade-actions {
  max-width: 30rem;
}

/* PEND-164 (kit 32O): link "Ver minha assinatura" da linha "outra cobrança pendente"; alvo de toque >= 44 px (regra 22). */
.billing-pending-other-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}