/*
 * Order summary (Tts\Ui\Cart\OrderSummary): the amounts and the action that
 * continues the order, in a card. The total leads; VAT and the total without
 * it follow, quieter. The action is full width - the one primary button on the
 * page. Decision 22.
 */

.order-summary {
    display: grid;
    gap: var(--shop-space-4);
    padding: var(--shop-space-5);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-panel);
    background: var(--shop-surface);
    box-shadow: var(--shop-shadow-card);
}

/* combined.css sets h2 in its own size and weight; answered here. */
.order-summary__title {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.order-summary__rows {
    display: grid;
    gap: var(--shop-space-2);
    margin: 0;
}

.order-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--shop-space-4);
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
}

/* Foundation sets dt bold with a margin, and dd a margin. */
.order-summary__row dt,
.order-summary__row dd {
    margin: 0;
    font-weight: inherit;
}

.order-summary__row dd {
    flex: none;
    color: var(--shop-ink);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.order-summary__row--total {
    margin-block-start: var(--shop-space-2);
    padding-block-start: var(--shop-space-3);
    border-block-start: 1px solid var(--shop-border);
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
}

.order-summary__row--minor {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
}

.order-summary__row--minor dd {
    color: var(--shop-text-soft);
}

.order-summary__note {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    font-weight: normal;
}

.shop-btn.order-summary__action {
    width: 100%;
    min-height: 52px;
    border-radius: var(--shop-radius-lg);
    font-size: 17px;
}

button.order-summary__action:disabled {
    background: var(--shop-border-input);
    cursor: not-allowed;
}

.order-summary__reason {
    margin: 0;
}

.order-summary__notes {
    display: grid;
    gap: var(--shop-space-2);
    color: var(--shop-text-soft);
    font-size: var(--shop-text-xs);
    line-height: var(--shop-leading-normal);
}

/* combined.css sets p's size, line-height and margin directly. */
.order-summary__notes p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* A link inside the summary - the terms the quote's box points at - takes the
   shop's own link colour. The form pattern says this for the links inside a
   form (components/form.css); this card sits beside the form, not in it, so it
   says the same for itself rather than inheriting combined.css's. */
.order-summary a:not(.shop-btn),
.order-summary a:not(.shop-btn):visited {
    color: var(--shop-accent);
}

.order-summary a:not(.shop-btn):hover,
.order-summary a:not(.shop-btn):focus {
    color: var(--shop-accent-strong);
}

/* The action's own block: the sentence that says what pressing it means, and
   the button that means it. One child of the summary's grid, so the summary's
   gap sits above the pair and a smaller one between them - otherwise the
   sentence reads as a footnote on the totals rather than a caption on the
   button. */
.order-summary__act {
    display: grid;
    gap: var(--shop-space-2);
}