/*
 * Design system: Minha assinatura (/minha-assinatura).
 * Tudo escopado em .ds-msub; só tokens. Mobile-first: 1 coluna; fatos em 2 colunas a partir de 640px.
 * Status nunca depende só de cor: sempre há texto (e o ponto é decorativo).
 */

.ds-msub {
  width: 100%;
  min-width: 0;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-8) var(--page-gutter) var(--space-12);
  overflow-x: clip;
}

.ds-msub a:focus-visible,
.ds-msub button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.ds-msub-title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.ds-msub-card {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--card-foreground);
}

.ds-msub-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-msub-plan-name {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ds-msub-plan-price {
  margin: var(--space-1) 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-lg);
}

/* ---------- Situação ---------- */

.ds-msub-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-size: var(--text-md);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ds-msub-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--muted-foreground);
}

.ds-msub-status.is-success .ds-msub-dot { background: var(--success); }
.ds-msub-status.is-warning .ds-msub-dot { background: var(--warning); }
.ds-msub-status.is-danger .ds-msub-dot { background: var(--destructive); }
.ds-msub-status.is-info .ds-msub-dot { background: var(--brand-text); }

.ds-msub-alert {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning);
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-size: var(--text-md);
  line-height: 1.5;
}

.ds-msub-alert.is-danger { border-color: var(--destructive); }

/* ---------- Fatos ---------- */

.ds-msub-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--space-5) 0 0;
}

.ds-msub-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.ds-msub-fact dt {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.ds-msub-fact dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ds-msub-note {
  margin: var(--space-3) 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-md);
}

/* ---------- Ações (desabilitadas até haver gateway) ---------- */

.ds-msub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.ds-msub-actions .btn {
  min-height: var(--target-min);
  max-width: 100%;
  white-space: normal;
}

.ds-msub-actions .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ds-msub-soon {
  flex: 1 0 100%;
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.ds-msub-soon a,
.ds-msub-note a {
  color: var(--brand-text);
  text-decoration: underline;
}

/* ---------- Histórico ---------- */

.ds-msub-history { margin-top: var(--space-8); }

.ds-msub-h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
}

.ds-msub-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  text-align: center;
}

.ds-msub-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

.ds-msub-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ds-msub-table tbody { display: block; }

.ds-msub-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.ds-msub-table tr + tr { margin-top: var(--space-2); }

.ds-msub-table td { min-width: 0; padding: 0; border: 0; font-size: var(--text-md); }

.ds-msub-table td[data-label="Data"] { grid-column: 1; font-weight: 500; }
.ds-msub-table td[data-label="Valor"] { grid-column: 2; grid-row: 1; justify-self: end; font-weight: 600; }
.ds-msub-table td[data-label="Forma"] { grid-column: 1; grid-row: 2; color: var(--muted-foreground); font-size: var(--text-sm); }
.ds-msub-table td[data-label="Situação"] { grid-column: 2; grid-row: 2; justify-self: end; }

.ds-msub-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ds-msub-pill.is-success { background: var(--brand-subtle); color: var(--brand-text); }
.ds-msub-pill.is-danger { border: 1px solid var(--destructive); }
.ds-msub-pill.is-warning { border: 1px solid var(--warning); }

/* ---------- Modal de cancelamento (desenho pronto, inativo: o elemento fica [hidden]) ---------- */

.ds-msub-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1050);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--scrim-strong, rgba(0, 0, 0, 0.6));
}

.ds-msub-modal[hidden] { display: none; }

.ds-msub-modal-card {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--popover, var(--card));
  color: var(--foreground);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.25));
}

.ds-msub-modal-title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); font-weight: 600; }
.ds-msub-modal-lead { margin: 0 0 var(--space-4); color: var(--muted-foreground); font-size: var(--text-md); }
.ds-msub-modal-h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); font-weight: 600; }

.ds-msub-modal-list { margin: 0; padding: 0; list-style: none; }

.ds-msub-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  background: transparent;
  font-size: var(--text-md);
  line-height: 1.45;
}

.ds-msub-modal-list .ds-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--muted-foreground); }
.ds-msub-modal-list.is-keep .ds-icon { color: var(--success); }

.ds-msub-modal-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.ds-msub-modal-actions .btn { min-height: var(--target-min); white-space: normal; }

.ds-msub-modal .btn-danger {
  border-color: var(--destructive);
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.ds-msub-modal .btn[disabled] { cursor: not-allowed; opacity: 0.6; }

@media (min-width: 768px) {
  .ds-msub { padding-top: var(--space-10); }
  .ds-msub-card { padding: var(--space-8); }
  .ds-msub-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
  .ds-msub-status { max-width: 340px; }
  .ds-msub-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  .ds-msub-modal-actions { flex-direction: row; justify-content: flex-end; }

  .ds-msub-table { display: table; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .ds-msub-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .ds-msub-table tbody { display: table-row-group; }
  .ds-msub-table tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .ds-msub-table tr + tr { margin-top: 0; }
  .ds-msub-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 600; text-align: start; }
  .ds-msub-table td { display: table-cell; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .ds-msub-table tbody tr:last-child td { border-bottom: 0; }
  .ds-msub-table td[data-label] { justify-self: auto; font-size: var(--text-md); color: inherit; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-msub * { transition: none !important; animation: none !important; }
}