/* ==========================================================================
   Cumpără licența — the order form.
   See docs/pages/cumpara-licenta.md.
   ========================================================================== */

/* --------------------------------------------------------------- layout -- */

/* One column of fields at a readable measure. The page-wide container is
   1150px, which is fine for a table and far too wide for a label above an
   input: at that width the eye loses the line between the two. */
.buy {
    max-width: 48rem;
    margin-inline: auto;
}

/* The noscript notice, when there is one, and then the card. */
.buy>*+* {
    margin-block-start: var(--space-6);
}

/* ---------------------------------------------------------------- price -- */

/* Said once, and said large enough that nobody has to hunt for it. The figure
   is mono, like every other figure on the site; the VAT note is not part of
   the number and is not set like one. */
.price {
    margin-block: var(--space-4) var(--space-5);
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ice-ink);
}

.price__vat {
    font-family: var(--font-body);
    font-size: var(--text-meta);
    font-weight: 400;
    color: var(--ice-muted);
    white-space: nowrap;
}

/* ----------------------------------------------------------------- form -- */

/* `.card__body` spaces its children by --space-3, which is right for a summary
   card and too tight between two groups of a form. */
.buy__form>*+* {
    margin-block-start: var(--space-6);
}

/* A fieldset is a grouping element, not a box: the card is already the box. */
.buy__group {
    margin: 0;
    padding: 0;
    border: 0;
}

/* The legend carries the structure of the form — there is no heading inside
   the card, because a group of fields is a group and not a section. */
.buy__legend {
    padding: 0;
    margin-block-end: var(--space-4);
    font-family: var(--font-display);
    font-size: 1.4375rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ice-ink);
}

/* A 23px asterisk beside a 23px legend reads as a footnote marker on the
   heading rather than as a required mark, so it drops to label size. */
.buy__legend .field__req {
    font-size: var(--text-meta);
    vertical-align: super;
}

/* The note sits on the heading's line where there is room and wraps under it
   where there is not, so it never costs a line by itself. */
.buy__legend .field__required-note {
    display: inline-block;
    margin-inline-start: var(--space-3);
    font-family: var(--font-body);
    letter-spacing: normal;
}

.buy__legend .field__required-note .field__req {
    vertical-align: baseline;
}

/* Two options and nothing else to choose between, so they sit beside each other
   once there is room — the old form had them on one line too. Each box keeps
   its full height and the 12px gap keeps them apart. */
@media (min-width: 56.25em) {
    .buy__options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .buy__options .choice__option+.choice__option {
        margin-block-start: 0;
    }
}

/* The line that says what happens after each method, and the button that does
   it. Side by side once there is room: stacked, the submit sat a whole notice
   below the radios — and it is only rendered when a method is chosen, so it
   arrived at the one moment the page had just grown by the height of that
   notice, out of sight, with nothing on screen to say it had appeared. */
.buy__foot {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 56.25em) {
    .buy__foot {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-5);
    }
}

.buy__note p {
    font-size: var(--text-dense);
}

/* A group's error sits between the radios and the note, so it needs the gap a
   `.field__error` gets from the input above it. */
.choice__error {
    margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------- result -- */

/* What replaces the form once the exchange is over. `.card p` would otherwise
   set these at 16px muted, and two of them carry dates the reader has to read
   rather than skim. */
.buy__result p {
    max-width: 60ch;
}

.buy__result p+p {
    margin-block-start: var(--space-3);
}

/* `.result` centres its contents, which is right for one confirmation line and
   wrong for the three paragraphs the licence answer carries: centred prose has
   no left edge for the eye to return to. The icon and the title stay centred;
   only a passage opts out. */
.buy__result--prose>p:not(.result__title) {
    align-self: stretch;
    margin-inline: auto;
    text-align: start;
}

/* Dates, a masked address, an email to write to: figures, all of them. */
.buy__result strong {
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}