/* billing-plan-cards.css — the subscription cards on settings-billing.
   Borrows app-shell.css tokens (--accent, --text, --border) like every other
   in-app surface, and sits inside billing-settings.css's .bill-card frame so
   it matches the cards already on this screen rather than introducing a
   second card language. */

.bpc-card {
  border: 1px solid var(--border, #e5e7f0);
  border-radius: 12px;
  padding: 18px;
  margin-top: 14px;
  background: var(--surface, #fff);
}
.bpc-card.bpc-offer { background: var(--surface-2, #faf9fc); }

.bpc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bpc-name { font-size: 17px; font-weight: 700; color: var(--text, #1e1b4b); }
.bpc-includes { font-size: 13.5px; color: var(--text-3, #6b7280); margin-top: 3px; }

.bpc-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #1e1b4b);
  white-space: nowrap;
}
.bpc-per { font-size: 13.5px; font-weight: 500; color: var(--text-3, #6b7280); }

.bpc-status {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}

.bpc-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* 48px targets, no exceptions — the same standard the upgrade sheet is held
   to. A cancel button too small to hit accurately is a support ticket. */
.bpc-btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong, #d6d5e4);
  background: var(--surface, #fff);
  color: var(--text, #1e1b4b);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.bpc-btn:hover { background: var(--surface-2, #f5f4f9); }
.bpc-btn-primary {
  background: var(--accent, #6c4cf1);
  border-color: var(--accent, #6c4cf1);
  color: #fff;
}
.bpc-btn-primary:hover { filter: brightness(1.06); }
.bpc-btn[disabled] { opacity: .6; cursor: default; }

.bpc-sep {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-4, #9d9db5);
}

/* The cancel dialog. z-index above the app chrome but below nothing that
   matters — and the floating widgets are hidden the same way the upgrade
   sheet hides them (body.ups-open) is NOT reused here on purpose: this dialog
   is small and centred, and the widgets sit clear of it. */
.bpc-modal {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(20, 18, 40, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  overflow-y: auto;
}
.bpc-modal-box {
  background: var(--surface, #fff);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 440px;
}
.bpc-modal-p { font-size: 14px; line-height: 1.55; color: var(--text-2, #4b5563); margin: 10px 0 16px; }
.bpc-modal-l { display: block; font-size: 13px; font-weight: 600; color: var(--text-2, #4b5563); margin-bottom: 6px; }
.bpc-select {
  width: 100%; min-height: 48px;
  border: 1px solid var(--border-strong, #d6d5e4);
  border-radius: 10px; padding: 0 12px;
  font-size: 15px; background: var(--surface, #fff); color: var(--text, #1e1b4b);
}
.bpc-err {
  margin-top: 12px; padding: 10px 13px; border-radius: 9px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  font-size: 13.5px;
}

@media (max-width: 560px) {
  .bpc-price { font-size: 21px; }
  .bpc-actions .bpc-btn { flex: 1 1 100%; }
}