/* =====================================================================
 * eg-wd-blocks.css — the optional blocks, the end states, and the phone.
 *
 * One of THREE partials carved out of universal-donation-widget.css on
 * 8 Sep 2026. That file was 483 lines against a 500 hard max and its own
 * comment already said the next addition had to carve it; the operator
 * controls for typeface and text size are that addition.
 *
 * ⚠️ CASCADE ORDER IS LOAD ORDER: shell → controls → blocks, exactly as
 * universal-donation-widget.html links them. The mobile media queries sit
 * at the END of eg-wd-blocks.css and override rules from all three, so
 * blocks must stay last. Nothing was edited in the carve — proven
 * byte-identical out of git by scripts/harness-widget-css-carve.js.
 *
 * HOLDS: CHY3, the card element, the extra-ask, the summary and
 * cover-fees rows, the opt-in, the secure line, success, error, the
 * spinner — and LAST, the two media queries. ⚠️ Those queries override
 * rules defined in all three partials, so this file must stay last in the
 * link order or the widget redecorates itself below 400px.
 * ===================================================================== */

        /* CHY3 */
        .chy3-box {
            display: flex;
            align-items: flex-start;
            gap: 0.625rem;
            padding: 0.875rem;
            background: var(--success-light);
            border-radius: calc(8px * var(--radius));
            margin-bottom: 0.875rem;
            cursor: pointer;
            font-size: 0.8125rem;
            border: 2px solid #bbf7d0;
            transition: all 0.2s;
        }
        .chy3-box:hover {
            background: #bbf7d0;
            border-color: #86efac;
        }
        .chy3-box input {
            width: 1.125rem;
            height: 1.125rem;
            margin-top: 2px;
            accent-color: var(--success);
            cursor: pointer;
        }
        .chy3-box span {
            color: var(--gray-700);
            line-height: 1.5;
        }
        .chy3-box strong {
            color: #15803d;
            font-size: 0.9375rem;
            display: block;
            margin-bottom: 0.125rem;
        }

        /* Card Element */
        #card-element {
            padding: 0.625rem;
            border: 1.5px solid var(--gray-300);
            border-radius: calc(6px * var(--radius));
            margin-bottom: 0.75rem;
        }

        /* The ask for something extra — one row above the summary, never a
           screen of its own. Deliberately quieter than step 1's amount buttons:
           an invitation on the way past, not the decision the donor came to
           make. Reuses .custom-input for the "other" box rather than restyling
           a second money field — this file is at its ceiling and the next
           addition has to carve it. */
        .extra-ask {
            border: 1px dashed var(--gray-300);
            border-radius: calc(8px * var(--radius));
            padding: 0.625rem 0.75rem;
            margin-bottom: 0.75rem;
        }
        .extra-ask-copy strong { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gray-900); }
        .extra-ask-copy span { display: block; font-size: 0.6875rem; color: var(--gray-600); margin-top: 0.125rem; }
        .extra-ask-copy span:empty { display: none; }
        .extra-btns { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
        .extra-btn {
            flex: 1 1 auto;
            min-width: 4.5rem;
            padding: 0.4375rem 0.5rem;
            border: 1.5px solid var(--gray-200);
            border-radius: calc(8px * var(--radius));
            background: white;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--gray-700);
            cursor: pointer;
            transition: all 0.15s;
        }
        .extra-btn:hover { border-color: var(--primary); background: var(--gray-50); }
        .extra-btn.selected { border-color: var(--primary); background: var(--primary); color: white; }
        .extra-ask .custom-input { margin-top: 0.5rem; }

        /* Summary */
        .summary {
            background: var(--gray-50);
            border-radius: calc(8px * var(--radius));
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--gray-600);
            margin-bottom: 0.375rem;
        }
        .summary-row.total {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--gray-900);
            padding-top: 0.5rem;
            margin-top: 0.375rem;
            border-top: 1px solid var(--gray-200);
            margin-bottom: 0;
        }

        .cover-fees-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0.625rem;
            background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
            border-radius: calc(6px * var(--radius));
            margin-bottom: 0.75rem;
            font-size: 0.75rem;
        }
        .cover-fees-row label {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            cursor: pointer;
            font-weight: 600;
            color: var(--gray-700);
        }
        .cover-fees-row input { width: 0.875rem; height: 0.875rem; accent-color: var(--primary); }
        .cover-fees-row .fee { font-weight: 700; }

        /* Opt-in */
        .optin-box {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.5rem 0.625rem;
            background: var(--gray-50);
            border-radius: calc(6px * var(--radius));
            margin-bottom: 0.75rem;
            cursor: pointer;
            font-size: 0.6875rem;
            color: var(--gray-600);
        }
        .optin-box input { width: 0.875rem; height: 0.875rem; accent-color: var(--primary); }

        /* Secure */
        .secure { text-align: center; font-size: 0.5625rem; color: var(--gray-400); margin-top: 0.5rem; }

        /* Success */
        .success-view { text-align: center; padding: 1.5rem 1rem; }
        .success-view .icon {
            width: 48px; height: 48px;
            background: var(--success-light);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 0.75rem;
        }
        .success-view .icon svg { width: 24px; height: 24px; color: var(--success); }
        .success-view h2 { font-size: 1.125rem; margin-bottom: 0.375rem; }
        .success-view p { font-size: 0.8125rem; color: var(--gray-500); }

        /* Error */
        .error-msg {
            background: #fee2e2;
            color: #dc2626;
            padding: 0.75rem;
            border-radius: calc(8px * var(--radius));
            font-size: 0.8125rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: none;
            border: 2px solid #dc2626;
            position: relative;
        }
        .error-msg.show { display: flex; align-items: flex-start; gap: 0.4rem; }
        .error-msg svg.error-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
        .error-dismiss {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: none;
            border: none;
            color: #dc2626;
            cursor: pointer;
            font-size: 1.125rem;
            padding: 0;
            width: 1.25rem;
            height: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }
        .error-dismiss:hover {
            opacity: 1;
        }

        /* Spinner */
        .spinner {
            display: inline-block;
            width: 0.875rem; height: 0.875rem;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── THE FIRST SCREEN ──────────────────────────────────────────────
           Three cards, not a <select>: this is read once, by someone who has
           not decided yet, and a dropdown hides two of the three answers
           behind a click. Each card carries its own second line because the
           difference between "book a place" and "book a place and give" is
           not legible from the titles alone. Rendered by eg-wd-journey.js. */
        .journey-lead {
            font-size: 0.95rem;
            color: var(--gray-600);
            text-align: center;
            margin-bottom: 14px;
        }

        .journey-options { display: flex; flex-direction: column; gap: 10px; }

        .journey-btn {
            display: flex;
            flex-direction: column;
            gap: 3px;
            width: 100%;
            text-align: left;
            cursor: pointer;
            padding: 14px 16px;
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: calc(10px * var(--radius));
            transition: border-color 0.15s, background 0.15s;
        }

        .journey-btn:hover { border-color: var(--primary); background: var(--gray-50); }

        .journey-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .journey-note {
            font-size: 0.78rem;
            color: var(--gray-500);
            line-height: 1.4;
        }

        /* Mobile (≤400px) — most Squarespace embeds in narrow columns hit this. */
        @media (max-width: 400px) {
            .widget { border-radius: 0; }
            .form-row { grid-template-columns: 1fr; }
            /* Tighter content padding so amount tiles + card field have more room */
            .content { padding: 1rem; }
            .header { padding: 0.875rem 1rem; }
            /* Cap inline logo size so it can't push the title off-screen.
               Also covers the case where org uploaded a high-res logo. */
            .header.has-inline-logo .org-logo { max-height: 36px !important; max-width: 100px !important; }
            /* Allow header to wrap title under inline logo on really narrow widths */
            .header.has-inline-logo { flex-wrap: wrap; row-gap: 4px; }
        }
        /* Very narrow (≤340px — iPhone SE in narrow column) — drop amounts to 2 cols. */
        @media (max-width: 340px) {
            .amounts { grid-template-columns: repeat(2, 1fr); }
        }