/* ============================================================
   /mastering/billing — the status card and the cancel flow's two modals.

   Scoped to this page and loaded only by it, the same way pricing.css is
   scoped to /mastering/pricing. Nav, footer, .legal, .btn and .wrap all come
   from styles.css; this file only describes what is genuinely new. Defensive
   `var(--x, #fallback)` throughout, matching pricing.css, since this page
   loads with only styles.css present.
   ============================================================ */

.bstate[hidden] { display: none; }
.billing .legal__wrap { max-width: 640px; }

/* ---- the status card ---------------------------------------------------- */
.bcard {
  border: 1px solid var(--line, #26262c);
  border-radius: 16px;
  padding: 26px 24px;
  background: var(--panel, #141417);
  margin: 26px 0 0;
}
.bcard--wide { width: 100%; }
.bcard__eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut, #9A9AA2); }
.bcard__name { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.bcard__sub { margin: 10px 0 18px; font-size: 14.5px; color: var(--mut, #9A9AA2); line-height: 1.55; }

/* Name and badge share one baseline, like a title and its status — never
   wrap onto separate lines even at phone widths, where the old
   space-between layout let the pill drift below the name. */
.bcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.bcard__head .bcard__name { min-width: 0; overflow-wrap: break-word; }

.bpill {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(61, 220, 132, .12); color: var(--green, #3DDC84);
}
.bpill[data-warn] { background: rgba(242, 184, 75, .16); color: #F2B84B; }

/* The price is the one number a subscriber actually came here to check —
   foreground it the way Stripe/Linear settings pages do, instead of
   burying it as one more row among equally-weighted facts. */
.bcard__price {
  margin: 16px 0 0; display: flex; align-items: baseline; gap: 4px;
}
.bcard__price #bPrice { font-size: 32px; font-weight: 700; letter-spacing: -.01em; color: var(--ink, #F5F5F7); }
.bcard__cycle { font-size: 14.5px; color: var(--mut, #9A9AA2); }

.bnotice {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  background: rgba(242, 184, 75, .1); color: #F2B84B; border: 1px solid rgba(242, 184, 75, .25);
}

.bcard__rows { display: grid; gap: 12px; margin: 22px 0 0; }
.bcard__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line, #26262c); }
.bcard__rows > div:first-child { border-top: none; padding-top: 0; }
.bcard__rows dt { color: var(--mut, #9A9AA2); font-size: 13.5px; }
.bcard__rows dd { color: var(--ink, #F5F5F7); font-size: 14.5px; font-weight: 500; text-align: right; }

.bcard__portal { margin: 20px 0 0; text-align: right; }
.bcard__portal a { font-size: 13px; color: var(--mut, #9A9AA2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: color .2s, text-decoration-color .2s; }
.bcard__portal a:hover { color: var(--ink, #F5F5F7); text-decoration-color: var(--line-2, #35353c); }

/* ---- the bottom of the page: the way out --------------------------------
   Deliberately separated from the card above rather than sitting inside it —
   this is a page about the plan someone has, not a page that leads with how
   to leave it. */
.bfoot { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line, #26262c); text-align: center; }
.blink {
  font: inherit; font-size: 13.5px; color: var(--mut, #9A9AA2); background: none; border: none;
  cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: transparent; transition: color .2s, text-decoration-color .2s;
}
.blink:hover { color: var(--ink, #F5F5F7); text-decoration-color: var(--line-2, #35353c); }
.blink--danger:hover { color: #EF6A5D; }
.blink:disabled { cursor: default; opacity: .5; }
.blink:disabled:hover { color: var(--mut, #9A9AA2); text-decoration-color: transparent; }

/* ---- the win-back card ----------------------------------------------------
   Replaces "Cancel subscription" once a cancellation is already scheduled
   (offering to cancel something already ending is redundant), and replaces
   the plain Free-plan pitch for an account that has subscribed before —
   asked back, not sold to as if for the first time. */
.bwinback { text-align: left; margin: 0; }
.bstate .bwinback { margin: 20px 0 0; }
.bwinback .bcard__sub { margin-bottom: 22px; }
.bwinback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.bwinback__actions .blink { padding: 6px 0; }

/* ---- the two modals -------------------------------------------------------
   Its own class rather than reusing mastering.css's .pmodal: that shell
   belongs to the mastering tool's profile popup and this page does not load
   mastering.css at all (it has no dropzone, no player, nothing else in that
   file is relevant) — same visual language, independent implementation. */
.bmodal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bmodal[hidden] { display: none; }
.bmodal__scrim { position: absolute; inset: 0; background: rgba(5,5,6,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s var(--ease, ease); }
.bmodal__card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--bg-2, #0F0F12); border: 1px solid var(--line, #26262c); border-radius: 18px;
  padding: 30px 28px 26px; box-shadow: 0 40px 120px rgba(0,0,0,.6);
  max-height: min(640px, 88vh); max-height: min(640px, 88dvh); overflow-y: auto;
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .32s var(--ease, ease), opacity .32s var(--ease, ease);
}
.bmodal.is-in .bmodal__scrim { opacity: 1; }
.bmodal.is-in .bmodal__card { transform: none; opacity: 1; }

.bmodal__title { font-size: clamp(1.3rem, 3.2vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.bmodal__sub { color: var(--mut, #9A9AA2); font-size: .95rem; line-height: 1.55; margin: 0 0 20px; }

.bmodal__reasons { display: grid; gap: 8px; margin-bottom: 4px; }
.breason {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-size: .93rem; color: var(--ink, #F5F5F7);
  background: var(--surface, #1A1A1F); border: 1px solid var(--line-2, #2E2E35); border-radius: 12px;
  padding: 11px 14px; cursor: pointer; transition: border-color .2s, background .2s;
}
.breason:hover { border-color: var(--mut, #9A9AA2); }
.breason[aria-checked="true"] { border-color: var(--accent, #FF6B5E); background: rgba(255,107,94,.06); }
.breason__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2, #35353c); position: relative; }
.breason[aria-checked="true"] .breason__dot { border-color: var(--accent, #FF6B5E); }
.breason[aria-checked="true"] .breason__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent, #FF6B5E);
}

.bmodal__other {
  width: 100%; margin-top: 10px; font: inherit; font-size: .93rem; color: var(--ink, #F5F5F7);
  background: var(--surface, #1A1A1F); border: 1px solid var(--line-2, #2E2E35); border-radius: 12px;
  padding: 11px 14px; resize: vertical; min-height: 64px;
}
.bmodal__other[hidden] { display: none; }

.bmodal__err { color: #EF6A5D; font-size: .85rem; margin: 10px 0 0; }
.bmodal__err[hidden] { display: none; }

.bmodal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.bmodal__actions .blink { margin-right: auto; }

#offerPct, #offerPctBtn { color: var(--green, #3DDC84); }

@media (max-width: 520px) {
  .bmodal__actions { flex-direction: column-reverse; align-items: stretch; }
  .bmodal__actions .blink { margin: 0 0 6px; text-align: center; }
  .bmodal__actions .btn { width: 100%; justify-content: center; }
}

/* The struck-through figure beside the price, shown only when the
   subscription actually carries a discount (mastering/billing.js). Muted and
   smaller than the price itself: it is context for the number being charged,
   never a competing headline. */
.bcard__was {
  margin-right: 8px;
  color: var(--mut, #9A9AA2);
  font-size: 0.62em;
  font-weight: 500;
  text-decoration-thickness: 1px;
}

/* A Lifetime account's leftover subscription — its own card, under the
   Lifetime one, so it reads as a separate thing that still bills. */
.bleftover { margin-top: 16px; }
.bleftover .blink--danger { margin-top: 16px; }
.bleftover [hidden], .bcard__portal[hidden] { display: none; }
/* Paddle's portal could not be opened: said in place, never raw JSON. */
.bportal-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--mut, #9A9AA2); text-align: left; }
.bportal-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bmodal__err a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bleftover #bLeftoverPrice { font-size: 24px; font-weight: 700; color: var(--ink, #F5F5F7); }
.bcard__price[hidden] { display: none; }