/* =====================================================================
   gift-summary.css — shared embed styles: the step 2 "Confirm your transaction" block, the step 3 thank-you
   receipt, and the embed-fit containment rule that keeps the form from widening its host page.

   Loaded for EVERY form style (classic and modern alike), unlike modern-form.css. The old summary layout was
   poor on both, so this replaces it for everyone. Scope is deliberately narrow: only the .cd-gift-review
   summary table. The donor form-field review below it is untouched, so classic keeps its existing look there.

   Loaded after cd-base-compiled.css, so these override cd-core's .cd-table-fw / .cd-gift-review rules. Uses
   literal colors rather than the --cd-m-* custom properties, which only exist when modern-form.css is present.

   Labels are NOT set here. Every string in this block is account-configurable (CustomFormText.TotalLabel,
   CoverFeeLabel, CoverFeeEditLink, the form's ForcedFeePayText) and clients run non-English forms.
   ===================================================================== */

/* ---- Embed fit: never force a host page wider than its viewport --------
   The embed is dropped into layouts we don't control, and a very common host pattern is a grid column of `1fr`
   — which is `minmax(auto, 1fr)`, whose auto minimum is the ITEM'S MIN-CONTENT. Our min-content was ~450px
   because the payment iframes (Stripe x2, PayPal) each carry the 300px intrinsic width every replaced element
   has, and those don't shrink during intrinsic sizing even though they fill fine once given a definite width.
   Result: on a 375px phone the host's column was pinned to 450px and the WHOLE PAGE scrolled sideways — the
   host's markup was blameless, and no host-side fix is available to us anyway.

   `contain: inline-size` makes this element's inline size independent of its contents, so its min-content
   contribution drops to zero and the host column collapses to whatever space it actually has; the form then
   lays out against that width and fills it. Measured on the demo host at 375px: document scrollWidth 472 -> 375,
   card 451 -> 335, nothing clipped inside the card.

   Keep `width: 100%` (in modern-form.css) alongside this — containment removes the intrinsic contribution, and
   the percentage width is what makes the form fill the space it's given. */
#CustomDonationsForm {
    contain: inline-size;
    min-width: 0;
}

/* Heading row: the section label on the left, "modify" as a quiet action on the right. The h2 is whatever the
   base or modern sheet already makes it — only its margin is neutralised so it sits on the flex baseline. */
.cd-form .cd-gift-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 4px;
}
.cd-form .cd-gift-summary-head h2 { margin: 0 !important; }

.cd-form .cd-gift-review { width: 100%; border-collapse: collapse; }

/* Frequency ("One-Time Payment" / the recurring wording) is metadata about the gift, not the gift — it was
   sitting in the headline slot while the actual funds rendered smaller beneath it. Demoted to a chip so the
   amount opposite it becomes the thing you read first. Wraps rather than pills-on-one-line, since the recurring
   wording is account-configurable and can be long. */
    .cd-form .cd-gift-review .cd-gift-freq {
        display: inline-block;
        /*background: #eef1f5;*/
        color: #46505e;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        padding: 3px 9px 9px 0;
        border-radius: 999px;
    }

/* Kill cd-core's per-row bottom borders and heavy 15px padding — a rule under every line made the block read as
   a dense grid. Only the total keeps a rule (below). */
.cd-form .cd-gift-review td,
.cd-form .cd-table-fw.cd-gift-review td {
    padding: 9px 0;
    border: 0;
    vertical-align: baseline;
}
/* cd-core pins the amount column to 30%, which on a phone squeezes the label column so hard that descriptions
   wrap to one word per line. Let it size to content instead. */
.cd-form .cd-gift-review td:nth-child(2) {
    width: auto;
    text-align: right;
    white-space: nowrap;
    padding-left: 12px;
}

/* The gift amount is the headline number, not the frequency label beside it. */
.cd-form .cd-gift-review tr:first-child td:last-child #cd-edit-amount-credited-text {
    font-size: 19px;
    font-weight: 600;
    color: #1f2733;
}

/* "go back and modify" is an escape hatch, not content. It now lives in .cd-gift-summary-head (moved out of the
   first cell), so it no longer inherits cd-core's `.cd-gift-review a` margin. No !important on display —
   gift-review.js hides this link outright in some flows via style.display. */
.cd-form .cd-gift-summary-head #cd-modify-gift {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Per-fund breakdown: indent under the gift it belongs to, amounts in their own right-hand column, so the funds
   read as a sub-list rather than as more sibling rows. The " - " separator exists only for clients on an old
   cached stylesheet that never gets this file; here the flex row spaces them instead. */
.cd-form .cd-gift-review .cd-allocation-name {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
    padding: 3px 0 3px 11px;
    /* Full shorthand, not margin-top: cd-core sets `margin: 10px 5px 5px 25px` on .cd-allocation-name, and that
       5px RIGHT margin held every fund amount 5px short of the amount column above it. */
    margin: 5px 0 0;
    border-left: 2px solid #dfe3ea;
}
.cd-form .cd-gift-review .cd-allocation-name + .cd-allocation-name { margin-top: 0; }
/* The breakdown row spans both columns and hugs the gift amount above it, so the funds read as a sub-list of
   that amount rather than as a separate section. */
.cd-form .cd-gift-review .cd-alloc-breakdown td { padding-top: 0; padding-bottom: 12px; }
.cd-form .cd-gift-review .cd-alloc-sep { display: none; }
.cd-form .cd-gift-review .cd-alloc-amt { white-space: nowrap; }

/* Fee row: a settled line item, not an open question competing with the gift above it. The two selectors are
   the two branches in the view — a forced fee renders ForcedFeePayText with #cd-donation-fees-paid in the second
   cell, an optional one renders CoverFeeLabel plus the edit link. Both are addressed by id rather than :has() on
   the row, so this doesn't depend on :has() support for the muting to apply. */
.cd-form .cd-gift-review tr:has(#cd-donation-fees-paid) td,
.cd-form .cd-gift-review tr:has(#cd-edit-fees-paid-link) td { font-size: 13.5px; color: #6b7280; }.cd-form .cd-gift-review #cd-donation-fees-paid,
.cd-form .cd-gift-review td:has(> #cd-donation-fees-paid) { color: #6b7280; font-size: 13.5px; }
.cd-form .cd-gift-review #cd-edit-fees-paid-link { font-size: 12px; margin-left: 6px; font-weight: 400; }
/* The fee editor panel (select + save) sits inside the label cell; keep it from inheriting the nowrap/right
   alignment and let it use the full row width on narrow screens. */
.cd-form .cd-gift-review #cd-edit-fees-paid { white-space: normal; text-align: left; margin-top: 8px; }
.cd-form .cd-gift-review #cd-edit-fees-paid select {
    max-width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Total: the only heavy rule on the block, so it reads as the sum of everything above it. */
.cd-form .cd-gift-review .cd-gift-total {
    border-top: 1px solid #cbd1db !important;
    border-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 2px !important;
    font-size: 16px;
    font-weight: 600;
    color: #1f2733;
}
.cd-form .cd-gift-review td.cd-gift-total:last-child { font-size: 19px; }

/* ---- Narrow screens ---------------------------------------------------
   The two-column table is the thing that breaks first on a phone: a long description plus a nowrap amount can
   push the row past the viewport. Below 420px the description and its amount stack, and the amount aligns left
   under it, so nothing can force horizontal overflow. */
@media (max-width: 420px) {
    .cd-form .cd-gift-review td { font-size: 14px; }
    .cd-form .cd-gift-review .cd-allocation-name { font-size: 12.5px; }
    .cd-form .cd-gift-review tr:first-child td:last-child #cd-edit-amount-credited-text,
    .cd-form .cd-gift-review td.cd-gift-total:last-child { font-size: 17px; }
    .cd-form .cd-gift-review td:nth-child(2) { padding-left: 8px; }

    /* table-layout:fixed is the actual guarantee against overflow. An AUTO table cannot shrink below its
       min-content width, so one nowrap amount plus a long unbreakable fund name sets a floor wider than the
       card and pushes the whole block sideways — no amount of max-width on the parent overrides that. Fixed
       layout makes the declared column widths authoritative and lets the content wrap inside them instead. */
    .cd-form .cd-gift-review { table-layout: fixed; }
    .cd-form .cd-gift-review td:first-child { width: 62%; }
    .cd-form .cd-gift-review td:nth-child(2) { width: 38%; white-space: normal; }
    /* Long fund/ticket names have no break opportunity ("Selfless Service Individual Ticket x 2"), so allow
       breaking anywhere rather than letting one word define the column. */
    .cd-form .cd-gift-review .cd-alloc-label,
    .cd-form .cd-gift-review .cd-gift-freq { overflow-wrap: anywhere; }
    /* Heading + "modify" wrap to two lines rather than fighting for one. */
    .cd-form .cd-gift-summary-head { flex-wrap: wrap; gap: 2px 12px; }
}

/* ---- Step 3: thank-you receipt (.cd-receipt) --------------------------
   Same deal as the summary above: applies to classic and modern alike. The label column was sized by cd-core's
   generic .cd-table-fw rules, so a two-word label like "Transaction Summary" wrapped while the value column ran
   long — the two columns fought each other. Give the labels a fixed share and let the values have the rest.

   NOTE the missing `.cd-form` ancestor here, unlike every rule above. GiftThankYou.cshtml has NO .cd-form
   wrapper — steps 1 and 2 open with <div id="cd-giving-form-wrapper" class="cd-form cd-form-page-N">, step 3
   does not. Scoping these to .cd-form matched nothing at all. .cd-receipt is unique to this table, so it stands
   on its own. The same gap means step 3 receives none of modern-form.css either, which is why the thank-you page
   still wears the base theme while steps 1-2 look modern. */
.cd-receipt { width: 100%; border-collapse: collapse; }
.cd-receipt td {
    padding: 11px 0;
    border-width: 0 0 1px;
    border-bottom: 1px solid #eceff3;
    vertical-align: top;
}
.cd-receipt tr:last-child td { border-bottom: 0; }

/* Labels: quiet, fixed-width, so values start at a consistent x down the whole receipt. */
.cd-receipt td:first-child {
    width: 36%;
    padding-right: 14px;
    font-size: 13px;
    font-weight: 500;
    color: #8a93a2;
    line-height: 1.4;
}
.cd-receipt td:nth-child(2) {
    font-size: 14px;
    color: #1f2733;
    line-height: 1.5;
    word-break: break-word;   /* long transaction ids and emails must not widen the card */
}

/* The transaction summary is a multi-line block (payment type, fees, then the fund list). Give the lines room
   to read as separate facts rather than one run-on paragraph. */
.cd-receipt .cd-receipt-summary { line-height: 1.6; }

/* "Form Entry" heading sits in a full-width cell between the receipt and the submitted fields. */
.cd-receipt td[colspan="2"] { border-bottom: 0; padding-top: 20px; }

@media (max-width: 420px) {
    /* Two narrow columns stop working here — stack the label above its value so neither has to wrap mid-word. */
    .cd-receipt td,
    .cd-receipt td:first-child { display: block; width: auto; padding-right: 0; }
    .cd-receipt td:first-child { border-bottom: 0; padding: 11px 0 0; }
    .cd-receipt td:nth-child(2) { padding: 2px 0 11px; }
}

/* ---- Step 3: the confirmation message ---------------------------------
   Styled to match the allocation cards the donor just used, so step 3 doesn't look like a different product.
   Values are taken from the card CSS in gift-info.js (.cd-alloc-card / .cd-selected): 1px #1a9e48 border,
   #f1faf4 fill, 6px radius, 14px/16px padding. Unscoped for the same reason as .cd-receipt above — step 3 has
   no .cd-form wrapper. Targeted by id so other .cd-alert uses elsewhere are untouched. */
#cd-form-success {
    background: #f1faf4;
    border: 1px solid #1a9e48;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 18px;
    color: #17673c;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
}
/* The same element carries cd-alert-warning when a gift is pending review — keep the card SHAPE, swap the hue,
   so a pending gift never reads as a completed one. */
#cd-form-success.cd-alert-warning {
    background: #fdf7ec;
    border-color: #d09422;
    color: #7a5410;
}

/* ---- Form footer (CustomFormText.FormFooterText) -----------------------
   The account's small print under "Review and Pay". Here rather than modern-form.css so classic forms get it too.
   pre-line keeps the line breaks the admin typed; the text itself is encoded by the view. */
.cd-form .cd-form-footer {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: #6b7280;
    white-space: pre-line;
}