/**
 * Purchase form (SingleModeCheckout) — shared by the work detail page and the
 * Exhibitions overlay. Scoped to the form's data attribute; no layout rules, so
 * host-page layout and CSS Styler (!important) values are unaffected.
 */

/* Label + input row: fixed label column, input fills the rest (right edge lines
   up with the full-width Purchase button). Stacked on phones. */
[data-c21-single-checkout] [data-c21-single-checkout-field] {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.3rem 0.75rem;
    margin: 0;
}

[data-c21-single-checkout] [data-c21-single-checkout-field] > label {
    display: block;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

@media (max-width: 600px) {
    [data-c21-single-checkout] [data-c21-single-checkout-field] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Field flagged by validation (cleared as soon as the buyer edits it). The ring
   uses box-shadow so it still shows when a Styler border colour is set. */
[data-c21-single-checkout] input[aria-invalid="true"] {
    border-color: #b32d2e;
    box-shadow: 0 0 0 1px #b32d2e;
}

[data-c21-single-checkout] button,
[data-c21-single-checkout] [role="button"] {
    cursor: pointer;
}

[data-c21-single-checkout] button:disabled,
[data-c21-single-checkout] button[aria-disabled="true"],
[data-c21-single-checkout] [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}