/*
 * License page (billings#show) and the Stripe return page (payments#show).
 * Builds on the design system in application.css: colours come from its
 * custom properties only, so the light theme re-themes these for free.
 * Selectors that override a design-system class carry two classes, so they
 * win whatever order `stylesheet_link_tag :app` loads the files in.
 */

/* App pages follow the hero with real content; the landing page's breathing
   room would push the status below the fold on a phone. */
.hero.billing-hero { padding-block: 4rem 2.5rem; }
.billing-hero .hero-lead { margin-bottom: 2rem; }
.billing-hero .button_to { margin: 0; }
.billing-hero-note { margin: 1.25rem 0 0; max-width: 58ch; }

/* Above the box, before anybody pays (billings/show): a licence bought
   recently and the owner's take-over, which the buyer has to see, and what
   a licence includes, right above the box (BW 6:230v lid 2). A manager kept
   from paying by somebody else's open payment reads whose it is in the
   box's place. */
.billing-recent,
.billing-take-over,
.billing-limits,
.billing-payment-open { margin: 0 0 1rem; max-width: 62ch; }
.billing-recent,
.billing-take-over { color: var(--c-accent); }
.billing-limits { color: var(--c-text-dim); }
.billing-payment-open { margin-bottom: 2rem; }

.billing-price {
  font-family: var(--f-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--c-accent);
  margin: 0.25rem 0 1rem;
  /* Lining figures, as the landing page writes the same price (landing.css
     gives the reason): Cormorant's old-style ones read "€59.99" with
     descenders. */
  font-variant-numeric: lining-nums;
}

/* history tables: license periods and payments */
.billing-table-wrap {
  /* a last resort below ~320px; the columns are chosen to fit a phone */
  overflow-x: auto;
  margin-top: 0.5rem;
}
.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.billing-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  padding: 0 1.5rem 0.75rem 0;
}
.billing-table td {
  padding: 0.9rem 1.5rem 0.9rem 0;
  border-top: 1px solid var(--c-border);
  vertical-align: baseline;
}
.billing-table th:last-child,
.billing-table td:last-child { padding-right: 0; }
.billing-table tbody tr:last-child td { border-bottom: 1px solid var(--c-border); }
.billing-table-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--c-text-dim);
}
.billing-table-note { margin-top: 1rem; max-width: 70ch; }
.billing-nowrap { white-space: nowrap; }

/* party nights: how many are left, when the next comes free, who started each */
.billing-party-lead { max-width: 62ch; }
.billing-party-count { margin: 0.75rem 0 0; }
.billing-party-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--c-text-dim);
}
.billing-party-list li + li { margin-top: 0.25rem; }

/* status tags: the shape is .post-status-tag; only the colour says how it went */
.billing-tag { display: inline-block; white-space: nowrap; }
.post-status-tag.billing-tag-paid,
.post-status-tag.billing-tag-active   { color: var(--c-success); border-color: var(--c-success); }
.post-status-tag.billing-tag-pending,
.post-status-tag.billing-tag-upcoming { color: var(--c-accent);  border-color: var(--c-accent); }
.post-status-tag.billing-tag-failed   { color: var(--c-danger);  border-color: var(--c-danger); }
/* expired / ended keep the neutral .post-status-tag look */

@media (max-width: 600px) {
  .hero.billing-hero { padding-block: 2.5rem 1.5rem; }
  .billing-price { font-size: 2.4rem; }
  .billing-table { font-size: 0.88rem; }
  .billing-table th,
  .billing-table td { padding-right: 1rem; }
}

/* The withdrawal function (BW 6:230oa) on the payment page and the licence
   page: a line saying until when, and a link that says it ends the
   contract. Underlined and in the accent colour, so it reads as the thing
   to press without competing with the page's own button. */
.billing-withdrawal { margin: 1.25rem 0 0; max-width: 62ch; }
.billing-withdrawal .billing-withdrawal-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* withdrawals#index and #new: the purchases still open to withdrawal, and
   the statement that confirms one. */
.withdrawal-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.card.withdrawal-item { display: grid; gap: 0.5rem; justify-items: start; }
.withdrawal-item p { margin: 0; }
.withdrawal-item-what { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.withdrawal-other-ways,
.withdrawal-consequences { max-width: 62ch; }
.withdrawal-statement-heading { margin: 0 0 0.5rem; }