/* --- Paying for a plan ------------------------------------------------------
   The payment page, the line above its button, and the page Creem sends a
   customer back to. In a file of its own because application.css is edited
   by everyone; the layout links every stylesheet in this directory.

   Named pay_step, not checkout, on purpose: the file name is printed in the
   head of EVERY page, and pricing_test refuses the word "checkout" anywhere
   on the price list while nothing can be bought.

   Nothing here is new colour or new shape: it is the existing variables, on
   top of .auth and .btn. */

/* The one line above the pay button: who takes the money, what the card
   statement will read, and that tax may be added. Small and quiet - it is a
   fact to have read, not a decision to make. */
.pay-note { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }

/* On a phone the button that leads to payment fills the row and may wrap.
   "Create account and go to payment" is wider than a 320px screen has room
   for on one line, and a submit button does not wrap unless told it may. */
@media (max-width: 420px) {
  .auth--plan .auth-form input[type=submit] { align-self: stretch; white-space: normal; }
}

/* The return pages. A heading, a sentence, and at most one thing to press. */
.pay-state .lede { margin-bottom: 1.2rem; }
.pay-manage { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.pay-manage a { overflow-wrap: anywhere; }
.pay-state__onward { margin: 1.4rem 0; }
.pay-state__onward .btn { display: inline-block; text-decoration: none; }

/* "Please do not pay again." The one sentence on these pages that must not
   be missed, so it is set apart by a border and weight as well as colour. */
.pay-state__warn {
  margin: 0 0 1rem; padding: .7rem 1rem; font-weight: 650; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-left-width: 4px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

/* Deleting an account that has a paid plan asks once first. Two buttons,
   stacked on a phone. */
.pay-confirm { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.4rem 0; }
.pay-confirm form { margin: 0; }
.pay-confirm .btn { display: inline-block; text-decoration: none; }
@media (max-width: 420px) {
  .pay-confirm { flex-direction: column; align-items: stretch; }
  .pay-confirm .btn { width: 100%; text-align: center; }
  .pay-state__onward .btn { display: block; text-align: center; }
}