/* =====================================================================
 * eg-wd-confirm.css — the confirmation the giver leaves with.
 *
 * The FOURTH partial. The carve of 8 Sep 2026 made three files out of
 * universal-donation-widget.css; this is an addition after it, not part of
 * it, so scripts/harness-widget-css-carve.js keeps comparing the original
 * three against the monolith and asserts this one separately.
 *
 * ⚠️ CASCADE ORDER IS LOAD ORDER: shell → controls → confirm → blocks.
 * It sits BEFORE blocks because blocks ends with the mobile media queries
 * and those must stay in the last-linked file — that is what lets a phone
 * rule override anything defined here. These rules are ordinary blocks;
 * they were written in eg-wd-blocks.css first and moved out unchanged
 * except for the corners, which now run through the --radius dial like
 * every other corner in the widget.
 *
 * Part of the widget's twelve-script/four-stylesheet set — see the load
 * order in universal-donation-widget.html.
 * ===================================================================== */

        /* ── The confirmation record ────────────────────────────────────
           The success step used to be one sentence. This is the part a
           giver can act on: a number they can quote, the lines that say
           what it covers, and the ask. Bordered rather than filled so it
           reads as a document inside the widget, not another button. */
        .confirm {
            margin: 0 1.5rem 1.5rem;
            border: 1px solid var(--gray-200);
            border-radius: calc(10px * var(--radius));
            text-align: left;
        }

        .confirm-num {
            padding: 12px 14px;
            border-bottom: 1px solid var(--gray-200);
            background: var(--gray-50);
            border-radius: calc(9px * var(--radius)) calc(9px * var(--radius)) 0 0;
            text-align: center;
        }

        .confirm-num-label {
            display: block;
            font-size: 0.66rem;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--gray-500);
            margin-bottom: 3px;
        }

        /* Monospaced and spaced out because it gets read down a phone. */
        #confirm-number {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 1.05rem;
            letter-spacing: 0.08em;
            color: var(--gray-900);
            user-select: all;
        }

        .confirm-lines { margin: 0; padding: 10px 14px; }

        .confirm-line {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-size: 0.78rem;
            line-height: 1.7;
        }

        .confirm-line dt { color: var(--gray-500); }
        .confirm-line dd { margin: 0; color: var(--gray-900); text-align: right; }

        .confirm-send {
            padding: 0 14px 13px;
        }

        .confirm-ask {
            font-size: 0.78rem;
            color: var(--gray-600);
            margin: 4px 0 8px;
        }

        .confirm-btn {
            width: 100%;
            padding: 9px 12px;
            font-size: 0.8rem;
            font-family: inherit;
            font-weight: 500;
            color: var(--primary);
            background: white;
            border: 1px solid var(--primary);
            border-radius: calc(8px * var(--radius));
            cursor: pointer;
        }

        .confirm-btn:hover:not(:disabled) { background: var(--gray-50); }
        .confirm-btn:disabled { opacity: 0.6; cursor: default; }

        .confirm-said {
            font-size: 0.74rem;
            line-height: 1.5;
            color: var(--gray-500);
            margin: 8px 0 0;
        }
        .confirm-said:empty { margin: 0; }

        /* The way out. Deliberately QUIETER than .confirm-btn: the offer to
           email the confirmation is the thing we want pressed first, and two
           buttons in the primary colour would ask the giver to choose between
           equals. Anchor, not a button — it navigates, and a thing that
           navigates should be a link for the keyboard and the context menu. */
        .confirm-exit {
            padding: 0 14px 13px;
        }

        .confirm-exit-btn {
            display: block;
            box-sizing: border-box;
            width: 100%;
            padding: 9px 12px;
            font-size: 0.8rem;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            color: var(--gray-700);
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: calc(8px * var(--radius));
        }

        .confirm-exit-btn:hover { background: var(--gray-100); }