/* Micropipe checkout page.

   The rules this page needs beyond theme.css: the term chooser, the waiver
   checkbox with its long label, and the spinner shown while the payment page
   is open. Everything else - the message panel, the form conventions, the
   utility classes - is shared (spec 5.5).

   Loaded after theme.css. */

/* The term chooser: one row per term, the radio and its label on one line,
   the price on the right. A fieldset rather than a select so every price is
   visible at once - the point of the page is that a buyer sees what each
   term costs before choosing. */

.term-list { padding-bottom: calc(var(--pico-spacing) * .5); }

.term-list label { display: flex; align-items: baseline; gap: calc(var(--pico-spacing) * .5); margin-bottom: calc(var(--pico-spacing) * .5); cursor: pointer; }

.term-list label input[type="radio"] { flex: 0 0 auto; margin-top: 0; }

.term-list .term-name { flex: 1 1 auto; }

.term-list .term-price { flex: 0 0 auto; font-weight: bold; white-space: nowrap; }

.term-list .term-per { font-weight: normal; font-size: 0.9rem; }

/* The waiver. Pico lays a checkbox label out inline; this one is a sentence,
   so it wraps against the box rather than under it. */

.waiver { display: flex; align-items: flex-start; gap: calc(var(--pico-spacing) * .5); line-height: var(--pico-line-height); }

.waiver input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.3em; }

/* The spinner while the payment page is open. .loader-spinner positions
   itself against the nearest positioned ancestor (see licence.css). */

.buy-spinner { position: relative; height: 8em; }