/* ============================================================================
   MinhaAssinatura — modal de conta (plano, créditos, pagamentos).
   Estética alinhada ao menu Config (#0f1218 / #232a36).
   ========================================================================== */

.ma-overlay {
  position: fixed; inset: 0; z-index: 10060;
  background: rgba(5, 7, 11, .62); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow-y: auto;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ma-overlay.open { display: flex; animation: ma-fade .16s ease both; }
@keyframes ma-fade { from { opacity: 0; } to { opacity: 1; } }

.ma-modal {
  width: 100%; max-width: 640px;
  background: #0f1218; border: 1px solid #232a36; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: ma-pop .18s ease both;
}
@keyframes ma-pop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }

.ma-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid #1d2330;
}
.ma-head h2 { margin: 0; font-size: 17px; font-weight: 650; color: #f1f3f7; letter-spacing: -.01em; }
.ma-x {
  background: none; border: none; color: #6b7280; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.ma-x:hover { color: #e8eaef; background: #1b212c; }

.ma-body { padding: 18px 20px 22px; }

.ma-loading { color: #8b909c; text-align: center; padding: 36px 0; font-size: 14px; }
.ma-loading--err { color: #e0796f; }

.ma-toast {
  border-radius: 9px; padding: 10px 13px; margin-bottom: 14px; font-size: 13px; font-weight: 500;
}
.ma-toast--ok   { background: rgba(46,160,103,.14); color: #62d39a; border: 1px solid rgba(46,160,103,.3); }
.ma-toast--err  { background: rgba(214,90,76,.14);  color: #f0998f; border: 1px solid rgba(214,90,76,.3); }
.ma-toast--info { background: rgba(70,120,200,.14);  color: #9cc1f0; border: 1px solid rgba(70,120,200,.3); }

/* ── Card de situação ── */
.ma-card {
  background: #131825; border: 1px solid #222a39; border-radius: 13px;
  padding: 16px 17px; margin-bottom: 18px;
}
.ma-card--empty { text-align: left; }
.ma-empty-title { font-size: 15px; font-weight: 600; color: #f1f3f7; margin-bottom: 10px; }
.ma-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid #1a2030;
}
.ma-row:last-child { border-bottom: none; }
.ma-k { color: #8b909c; font-size: 12.5px; }
.ma-v { color: #e8eaef; font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.ma-credits { color: #7fb2ff; font-weight: 700; font-variant-numeric: tabular-nums; }

.ma-note { font-size: 12px; color: #7a8090; margin-top: 11px; line-height: 1.5; }
.ma-note--warn { color: #d8a35a; }

.ma-acoes { margin-top: 14px; display: flex; gap: 10px; }

/* ── Botões ── */
.ma-btn {
  border: none; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: filter .12s ease, opacity .12s;
}
.ma-btn:disabled { opacity: .5; cursor: default; }
.ma-btn--primary { background: #2f6df0; color: #fff; }
.ma-btn--primary:hover:not(:disabled) { filter: brightness(1.1); }
.ma-btn--danger { background: rgba(214,90,76,.16); color: #f0998f; border: 1px solid rgba(214,90,76,.34); }
.ma-btn--danger:hover:not(:disabled) { background: rgba(214,90,76,.26); }
.ma-btn--ghost { background: #1b212c; color: #9ba0aa; border: 1px solid #283042; }

/* ── Seções ── */
.ma-sec {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #565c69;
  margin: 6px 2px 11px; font-weight: 600;
}

/* ── Grade de planos ── */
.ma-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ma-plano {
  background: #131825; border: 1px solid #222a39; border-radius: 12px; padding: 15px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ma-plano--atual { border-color: #2f6df0; box-shadow: 0 0 0 1px #2f6df0 inset; }
.ma-plano-nome { font-size: 14.5px; font-weight: 650; color: #f1f3f7; }
.ma-plano-preco { font-size: 20px; font-weight: 750; color: #fff; }
.ma-plano-preco small { font-size: 12px; font-weight: 500; color: #6b7280; }
.ma-plano-cred { font-size: 12.5px; color: #7fb2ff; font-weight: 550; }
.ma-plano-desc { font-size: 11.5px; color: #7a8090; line-height: 1.45; flex: 1; }
.ma-plano .ma-btn { margin-top: 6px; width: 100%; }

/* ── Histórico de pagamentos ── */
.ma-pags { display: flex; flex-direction: column; gap: 1px; background: #1a2030; border-radius: 10px; overflow: hidden; }
.ma-pag {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 11px 13px; background: #131825; font-size: 12.5px;
}
.ma-pag-data { color: #8b909c; white-space: nowrap; }
.ma-pag-desc { color: #d6d9e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-pag-valor { color: #e8eaef; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Badges ── */
.ma-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ma-b--ok   { background: rgba(46,160,103,.16); color: #62d39a; }
.ma-b--info { background: rgba(70,120,200,.18); color: #9cc1f0; }
.ma-b--warn { background: rgba(216,163,90,.16); color: #e0b25e; }
.ma-b--err  { background: rgba(214,90,76,.16);  color: #f0998f; }
.ma-b--mute { background: #232a36; color: #8b909c; }

@media (max-width: 520px) {
  .ma-pag { grid-template-columns: 1fr auto; row-gap: 4px; }
  .ma-pag-desc { grid-column: 1 / -1; order: 3; }
}