/*
 * cdob-giving-ui2.css | v0.1.5 | 2026-10-31 | Generated by Claude, session CDOB-CHAR-S3
 * (v0.1.5, the owner's follow-up the day after go-live: the birthday box is green (fir
 * tints and a fir dashed edge) instead of coral, with a stronger edge on the selects inside
 * it; the notes or comments box (textarea) takes the form's edge and corners; the rail's
 * flag, shirt and hoodie thumbnails and the hero's lede are gone with their rules;
 * v0.1.4: the accessibility audit's items: the payment fields keep their bottom margin, the
 * Remember Me row and the checkbox rows are as tall as a tap target, the card box's !important
 * is the card's alone, the birthday selects keep their usual padding once the birthday stacks;
 * v0.1.3: the vendor's black fill on the selected level's list item no longer shows through
 * the card; v0.1.2: the payment fields join the form's look, the name on the card and the card box
 * with the same corners and edge, the card box the height of its content, the selected
 * payment tab keeps its keyboard focus ring; v0.1.1: the form's rules repeat the vendor's
 * own selector chain, measured on the live preview, so they win; the payment tabs sit in
 * one row with their names in the tab's colour; fieldsets are unpadded so the fields line
 * up with the Donate button; the sign-in box's button is styled; names and the birthday
 * stay side by side on a phone)
 *
 * The redesigned membership page (includes/cdob-giving-ui2.php, js/cdob-giving-ui2.js):
 * the cadence tabs, the level list (Charitable's own amount list, restyled as cards
 * that carry each level's gift line), the donor details in a twelve-column grid, the
 * gift choice and its boxes, the festive (green) birthday box, the notes box, the payment
 * tabs and the Donate button, then the compact hero and the right rail's gear picture.
 * Enqueued only on a page that carries [cdob_membership_form].
 *
 * Reuse over copy: colours, type scale and tap-target floors are the theme's own tokens
 * (css/cdob-core.css). The component-scoped values below are derived from those tokens
 * and named once, here.
 *
 * Colours: tokens and alpha tints of tokens only. The pairs, sRGB-linearized (the
 * formula in RC_A11Y_TOKEN_HYGIENE.md, run by a script, not carried from a comment):
 *   ink on paper 16.48 | navy on paper 10.40 | paper on navy 10.40 | ink on flame 4.69
 *   on-light-meta (#555) on paper 7.46
 *   control edge --cdob-give-ctl (ink at 0.55) on paper 3.75 and, where a control meets the
 *   card tint (the control keeps its own paper fill, so the edge is judged over the tint) 3.45
 *   (a form control's edge is a UI boundary: WCAG 1.4.11 asks 3:1); against the festive
 *   (green) box the selects inside it use ink at 0.70 (set on the box, so the focus colour
 *   still wins): 4.15 against the dark end of the box (fir 0.22) and 5.15 against the
 *   light end (fir 0.10); at the usual 0.55 the dark end would be 2.56, which is why
 *   the box overrides it
 *   ink on card tint (navy 0.05) 15.16 | navy on card tint 9.56 | on-light-meta on tint 6.86
 *   navy on selected tint (navy 0.10) 8.77 | ink on selected tint 13.90
 *   ink on festive box, dark end (fir 0.22) 11.25, light end (fir 0.10) 13.95
 * Selection is never told by colour alone: a selected level card has a filled radio dot and
 * a tint beside its navy edge (the edge is 2px in both states, so the dot and the tint carry
 * the state), a selected tab is filled AND underlined, a selected gift
 * option has a heavier edge; forced-colors mode gets native radios and a system-colour
 * outline. Decorative edges (the card edge at ink 0.18, the festive dashed fir edge)
 * carry no state.
 *
 * Specificity: every rule is anchored under .cdob-give (or a body class on the page) so
 * the winner never depends on print order against the Charitable stylesheet. That was not
 * enough for the form itself: the vendor's "standard" template styles the donor fields with
 * two IDs (.charitable-donation-form.charitable-template-standard #charitable-donor-fields
 * #charitable-user-fields ...), the payment tabs and card field with #charitable-gateway-fields
 * ..., hides the level radios with .js .charitable-donation-form .donation-amount
 * input[type="radio"], and pads every fieldset with !important. The rules for those pieces
 * repeat the same chain behind .cdob-give, and the few that meet an !important say so beside
 * the declaration.
 */

/* The two corner radii, named once: the form uses both, the rail's picture the large one. The rail
   sits outside .cdob-give, so they live on :root; this file is only enqueued on a page that carries
   the new form. */
:root {
	--cdob-give-radius: 16px;
	--cdob-give-radius-sm: 12px;
}

.cdob-give {
	--cdob-give-ctl: rgba(var(--cdob-ink-rgb), 0.55);
	--cdob-give-tint: rgba(var(--cdob-navy-rgb), 0.05);
	--cdob-give-tint-strong: rgba(var(--cdob-navy-rgb), 0.1);
	font-family: var(--cdob-ff-sans);
	color: var(--cdob-ink);
	margin: 0 0 2rem;
}

.cdob-give [hidden] {
	display: none !important;
}

/* The one-line notices the shortcode prints (closed form, editor notes). */
.cdob-give .cdob-giving__notice,
.cdob-give .cdob-give__once {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-give-tint);
	color: var(--cdob-ink);
	font-size: var(--fs-400);
}

/* ---- Tabs ---------------------------------------------------------------- */

.cdob-give .cdob-give__tabs ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.cdob-give .cdob-give__tabs li {
	margin: 0;
}

.cdob-give .cdob-give__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cdob-tap-min);
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--cdob-navy);
	border-radius: 999px;
	background: var(--cdob-paper);
	color: var(--cdob-navy);
	font-size: var(--fs-500);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.cdob-give .cdob-give__tab:hover {
	background: var(--cdob-give-tint-strong);
	color: var(--cdob-navy);
}

/* The current cadence: navy fill, paper text and an underline, so it is not told apart by
   fill alone (WCAG 1.4.1), and the cue survives forced-colors mode, which drops fills. */
.cdob-give .cdob-give__tab[aria-current="page"] {
	background: var(--cdob-navy);
	color: var(--cdob-paper);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.cdob-give--loading .cdob-give__panel {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- The vendor's form: reset what it paints, then restyle ---------------- */

.cdob-give .charitable-donation-form.charitable-template-standard .charitable-form-fields,
.cdob-give .charitable-donation-form.charitable-template-standard fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.cdob-give .charitable-donation-form.charitable-template-standard fieldset.charitable-fieldset {
	margin: 0 0 1.75rem;
	padding: 0 !important; /* the vendor pads every fieldset 20px a side with !important, which left the fields narrower than the Donate button */
}

.cdob-give .charitable-donation-form.charitable-template-standard .charitable-fieldset .charitable-form-header {
	margin: 0 0 0.9rem;
	padding: 0;
	color: var(--cdob-navy);
	font-family: var(--cdob-ff-serif);
	font-size: var(--fs-600);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
}

.cdob-give .charitable-form-field {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.cdob-give label,
.cdob-give .charitable-fieldset-field-header,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field label,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field .charitable-fieldset-field-header {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
	line-height: 1.35;
}

.cdob-give abbr.required {
	border: 0;
	color: inherit;
	text-decoration: none;
	cursor: help;
}

.cdob-give input[type="text"],
.cdob-give input[type="email"],
.cdob-give input[type="tel"],
.cdob-give input[type="number"],
.cdob-give input[type="password"],
.cdob-give select,
.cdob-give textarea,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="text"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="email"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="tel"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="number"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="password"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field select,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field textarea,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="text"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="email"],
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.55rem 0.9rem;
	border: 1.5px solid var(--cdob-give-ctl);
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-paper);
	color: var(--cdob-ink);
	font-family: var(--cdob-ff-sans);
	font-size: var(--fs-500);
	line-height: 1.3;
	box-shadow: none;
}

.cdob-give input[type="text"]:focus,
.cdob-give input[type="email"]:focus,
.cdob-give input[type="tel"]:focus,
.cdob-give input[type="password"]:focus,
.cdob-give select:focus,
.cdob-give textarea:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="text"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="email"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="tel"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field input[type="password"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field select:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field textarea:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="text"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="email"]:focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields input[type="tel"]:focus {
	border-color: var(--cdob-navy);
}

/* The notes or comments box: the same edge and corners, tall enough for a few lines, resizable
   up and down only (a free corner would let it spill out of the grid). */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field textarea {
	display: block;
	min-height: 7rem;
	resize: vertical;
	line-height: 1.45;
}

/* The payment fields (the name on the card and the card's own label) sit under the vendor's two-ID
   rules as well, which print them at 16px, weight 500, 4px corners. Same words and edges as above. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields label {
	display: block;
	margin: 1rem 0 0.35rem;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
	line-height: 1.35;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields .charitable-gateway-fields.charitable-form-fields > .charitable-form-field:first-child label {
	margin-top: 0;
}

/* The one-time amount box shows its words as a placeholder: the browsers' own greys are lighter
   than 4.5:1 on paper in some engines, so the words take the page's meta colour (7.46). */
.cdob-give ::placeholder {
	color: var(--cdob-on-light-meta);
	opacity: 1;
}

.cdob-give input:disabled,
.cdob-give select:disabled {
	opacity: 0.6;
}

.cdob-give .charitable-field-description,
.cdob-give .charitable-field-help {
	margin: 0.4rem 0 0;
	color: var(--cdob-on-light-meta);
	font-size: var(--fs-400);
	font-weight: 400;
}

/* Hidden when the vendor's own switch says so (a signed-in donor's saved details). */
.cdob-give .charitable-hidden {
	display: none !important;
}

.cdob-give .charitable-login-form {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-give-tint);
}

/* The vendor's sign-in box prints WordPress's own button, which the front end leaves unstyled. */
.cdob-give .charitable-login-form input[type="submit"] {
	min-height: var(--cdob-tap-min);
	padding: 0.5rem 1.5rem;
	border: 2px solid var(--cdob-navy);
	border-radius: 999px;
	background: var(--cdob-paper);
	color: var(--cdob-navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.cdob-give .charitable-login-form input[type="submit"]:hover {
	background: var(--cdob-navy);
	color: var(--cdob-paper);
}

.cdob-give .charitable-login-form input[type="submit"]:focus-visible {
	outline: 3px solid var(--cdob-navy);
	outline-offset: 2px;
}

.cdob-give .charitable-login-form .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--cdob-tap-min);
	font-weight: 400;
	cursor: pointer;
}

.cdob-give .charitable-login-form .login-remember input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--cdob-navy);
}

/* ---- The level list: the vendor's amount list, as cards ------------------ */

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0; /* the vendor gives every item a grey edge of its own */
	border-radius: var(--cdob-give-radius);
	background: transparent; /* and paints the SELECTED item solid black (#000), which our translucent tint then sat on */
}

/* A card is two rows: the dot beside the price, then the level's name and gift line under the
   price. The price never takes a column of its own, so the words keep the card's whole width
   whatever the screen (a three-column row left them about 30px at the narrowest card). */
.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li label {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	grid-template-areas:
		"radio price"
		". desc";
	align-items: start;
	align-content: start; /* a taller neighbour stretches the card, not the gap under the price */
	column-gap: 0.75rem;
	row-gap: 0.35rem;
	height: 100%;
	margin: 0;
	padding: 1rem 1.1rem;
	border: 2px solid rgba(var(--cdob-ink-rgb), 0.18); /* decorative card edge; the radio and the selected edge carry the state */
	border-radius: var(--cdob-give-radius);
	background: var(--cdob-paper);
	color: var(--cdob-ink);
	font-weight: 400;
	text-align: left;
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li label:hover {
	background: var(--cdob-give-tint);
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts input[type="radio"] {
	display: block; /* the vendor sets display: none on these when the page has script */
	grid-area: radio;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	border: 2px solid var(--cdob-give-ctl);
	border-radius: 50%;
	background: var(--cdob-paper);
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts input[type="radio"]:checked {
	border-color: var(--cdob-navy);
	background: var(--cdob-navy);
	box-shadow: inset 0 0 0 4px var(--cdob-paper);
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts .amount {
	grid-area: price;
	color: var(--cdob-navy);
	font-size: var(--fs-600);
	font-weight: 700;
	line-height: 1.25;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts .recurring-details {
	font-size: var(--fs-400);
	font-weight: 600;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts .description {
	grid-area: desc;
	display: block;
	min-width: 0;
}

/* A level's description is plain text: its name, a line break, then its gift line (Charitable
   Recurring escapes the description, so it cannot carry markup). The line break is kept, and
   the first line is the name. The vendor sets this span at 16px and 21px with !important, so
   the size of the words is its own; the name line below takes its size from ::first-line. */
.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts .suggested-donation-amount .description {
	color: var(--cdob-ink);
	white-space: pre-line;
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts .suggested-donation-amount .description::first-line {
	color: var(--cdob-ink);
	font-size: var(--fs-500);
	font-weight: 700;
	line-height: 1.3;
}

/* The selected level: a navy edge and a tint, beside the filled dot (the edge is 2px either way,
   so the dot and the tint carry the state). The vendor's script puts .selected on the li;
   :has() says the same for a browser that supports it. */
.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li.selected label {
	border-color: var(--cdob-navy);
	background: var(--cdob-give-tint-strong);
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li:has( input:checked ) label {
	border-color: var(--cdob-navy);
	background: var(--cdob-give-tint-strong);
}

.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li:has( input:focus-visible ) label {
	outline: 3px solid var(--cdob-navy);
	outline-offset: 2px;
}

/* The custom-amount row on the one-time form. */
.cdob-give .charitable-donation-form.charitable-template-standard .custom-donation-amount-wrapper {
	display: block;
}

.cdob-give .charitable-donation-form.charitable-template-standard .custom-donation-amount label {
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
}

.cdob-give .charitable-donation-form.charitable-template-standard .custom-donation-input {
	max-width: 16rem;
}

/* ---- Donor details: a twelve-column grid ---------------------------------- */

.cdob-give #charitable-user-fields,
.cdob-give .cdob-give__gift,
.cdob-give .cdob-give__send,
.cdob-give .cdob-give__about,
.cdob-give .cdob-give__bday {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1rem;
}

/* A field this list does not know (a vendor field switched on later) takes a full row until it is
   given a width; :where() keeps this rule below every width class. */
:where(.cdob-give #charitable-user-fields) > * {
	grid-column: 1 / -1;
}

.cdob-give .cdob-give-c12 { grid-column: span 12; }
.cdob-give .cdob-give-c6 { grid-column: span 6; }
.cdob-give .cdob-give-c5 { grid-column: span 5; }
.cdob-give .cdob-give-c4 { grid-column: span 4; }
.cdob-give .cdob-give-c3 { grid-column: span 3; }

.cdob-give .cdob-give__gift,
.cdob-give .cdob-give__about,
.cdob-give .cdob-give__send {
	grid-column: 1 / -1;
}

.cdob-give .cdob-give__gift {
	padding: 1.25rem;
	border: 1px solid rgba(var(--cdob-ink-rgb), 0.18); /* decorative card edge */
	border-radius: var(--cdob-give-radius);
	background: var(--cdob-give-tint);
}

.cdob-give .cdob-give__subhead {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--cdob-navy);
	font-family: var(--cdob-ff-serif);
	font-size: var(--fs-600);
	font-weight: 700;
	line-height: 1.25;
}

.cdob-give .cdob-give__opt {
	color: var(--cdob-on-light-meta);
	font-family: var(--cdob-ff-sans);
	font-size: var(--fs-400);
	font-weight: 400;
}

.cdob-give .cdob-give__subnote {
	grid-column: 1 / -1;
	margin: -0.5rem 0 0;
	color: var(--cdob-on-light-meta);
	font-size: var(--fs-400);
}

.cdob-give .cdob-give__note {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
}

/* The note is a live region the script fills: it stays in the page (a region that arrives already
   holding its text is not reliably spoken), so while it is empty its row is only closed up. */
.cdob-give .cdob-give__note:empty {
	margin-top: -1rem;
}

/* The gift option fields stay out of sight until the script has run: with no script a donation
   completes with gift status "choose_later", by design (includes/cdob-giving.php). */
.cdob-give:not([data-ready]) .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .cdob-give-item {
	display: none;
}

/* The wallet buttons (Apple Pay, Google Pay) and the bank-debit option (ACH) make a single
   charge, so they are not offered on the three recurring tabs. The server takes them out of
   the form and refuses the request too (includes/cdob-giving.php section 4b); this removes the
   empty wallet slot and its divider, and the ACH tab and pane if the vendor prints them anyway.
   !important because the vendor's script sets an inline display when it mounts a pane. */
.cdob-give[data-cadence="periodic"] #charitable_stripe_express_checkout_field,
.cdob-give[data-cadence="periodic"] .charitable-payment-divider,
.cdob-give[data-cadence="periodic"] .charitable-gateway-tab[data-gateway-id="stripe_ach_direct_debit"],
.cdob-give[data-cadence="periodic"] #charitable-gateway-fields-stripe_ach_direct_debit {
	display: none !important;
}

/* ---- Radio and checkbox fields (gift choice, gift options) --------------- */

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field-radio fieldset {
	margin: 0;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The real input sits invisibly over its label, so a click, a tap and a screen reader all
   meet the input; the label is what is drawn. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list input[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list li label {
	display: block;
	min-height: var(--cdob-tap-min);
	margin: 0;
	padding: 0.65rem 1rem;
	border: 1.5px solid var(--cdob-give-ctl);
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-paper);
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
	line-height: 1.35;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list input[type="radio"]:checked + label {
	border-color: var(--cdob-navy);
	background: var(--cdob-give-tint-strong);
	box-shadow: inset 0 0 0 2px var(--cdob-navy); /* edge 1.5px + 2px inside: a heavy edge, not colour alone */
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--cdob-navy);
	outline-offset: 2px;
}

/* The gift choice: three full-width options. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields #charitable_field_cdob_gift_choice .charitable-fieldset-field-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields #charitable_field_cdob_gift_choice ul.charitable-radio-list {
	flex-direction: column;
	align-items: stretch;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields #charitable_field_cdob_gift_choice ul.charitable-radio-list li label {
	font-weight: 400;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields #charitable_field_cdob_gift_choice ul.charitable-radio-list li label strong {
	font-weight: 700;
}

/* Checkboxes: the box beside its words. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field-checkbox {
	display: flex;
	flex-direction: row; /* the vendor makes every donor field a column */
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.7rem;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0;
	accent-color: var(--cdob-navy);
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field-checkbox label {
	display: flex;
	align-items: center;
	flex: 1 1 12rem;
	min-height: var(--cdob-tap-min); /* the row is as tall as a tap target; the box beside it is centred on it */
	margin: 0;
	padding: 0; /* the vendor pads it 4px, which put the words out of line with the note beneath */
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .charitable-form-field-checkbox .charitable-field-description {
	flex: 1 1 100%;
	margin: 0 0 0 2.1rem;
}

/* ---- The festive birthday box -------------------------------------------- */

.cdob-give .cdob-give__bday {
	--cdob-give-ctl: rgba(var(--cdob-ink-rgb), 0.7); /* the selects inside take a stronger edge, so it keeps 3:1 against the green */
	grid-column: 1 / -1;
	padding: 1rem 1.1rem 1.1rem;
	border: 2px dashed var(--cdob-fir); /* decorative, carries no state */
	border-radius: var(--cdob-give-radius);
	background: linear-gradient(135deg, rgba(var(--cdob-fir-rgb), 0.22) 0%, rgba(var(--cdob-fir-rgb), 0.10) 100%);
}

.cdob-give .cdob-give__bday-cap {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
}

.cdob-give .cdob-give__bday select {
	background: var(--cdob-paper);
}

/* ---- Payment ---------------------------------------------------------------- */

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector {
	display: flex;
	flex: 1 1 100%; /* the vendor's wrapper is a flex row and shrinks this list to its two minimum widths, which stacked the tabs */
	flex-direction: row; /* the vendor makes it a column on narrow screens */
	flex-wrap: wrap;
	gap: 0.6rem;
	width: 100%;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab {
	position: relative;
	flex: 0 1 auto; /* each tab is as wide as its name needs (the vendor caps it at 180px, which wrapped "ACH Direct Debit") */
	min-width: 9rem;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab input[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab label {
	display: flex;
	flex-direction: row; /* the vendor stacks the icon over the name */
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--cdob-tap-min);
	margin: 0;
	padding: 0.5rem 1rem;
	border: 2px solid var(--cdob-navy);
	border-radius: 999px;
	background: var(--cdob-paper);
	color: var(--cdob-navy);
	font-size: var(--fs-500);
	font-weight: 700;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab .charitable-gateway-icon {
	margin: 0; /* the vendor adds 8px on narrow screens, on top of the gap */
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab .charitable-gateway-icon svg {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
}

/* The vendor colours the name grey and sets it at 12px; the tab's own colour and size should reach it. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab .charitable-gateway-label {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.2;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab input[type="radio"]:checked + label {
	border-bottom-color: var(--cdob-navy) !important; /* the vendor paints a green bottom edge with !important */
	background: var(--cdob-navy);
	color: var(--cdob-paper);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--cdob-navy) !important; /* the vendor sets outline: 0 !important on the selected tab's label, which hid the ring where it matters most */
	outline-offset: 2px;
}

.cdob-give .charitable-donation-form.charitable-template-standard .charitable-gateway-fields {
	margin: 0 0 1rem; /* as heavy as the reset of .charitable-form-fields near the top, and later, so the margin survives it */
}

/* The payment script's boxes (the card field, and the bank-debit and wallet mounts that carry the
   same class): the form's control edge and radius. */
.cdob-give .charitable-donation-form.charitable-template-standard .StripeElement,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable_stripe_card_field {
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.85rem 0.9rem;
	border: 1.5px solid var(--cdob-give-ctl);
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-paper);
}

/* The CARD box only: the vendor's script writes padding, border, corner radius and a fixed height
   into its own style attribute (measured 2026-10-31: 4px corners, 75px high, copied from a field
   the form's rules do not reach), which only !important can outrank. The other mounts keep the
   plain rule above. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable_stripe_card_field {
	height: auto !important;
	padding: 0.85rem 0.9rem !important;
	border: 1.5px solid var(--cdob-give-ctl) !important;
	border-radius: var(--cdob-give-radius-sm) !important;
}

/* The script also centres the frame with a top margin sized for the 75px box. */
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable_stripe_card_field .__PrivateStripeElement {
	margin-top: 0 !important;
}

/* The card field lives in the payment script's own frame, so the page's focus ring never reaches
   it: the box takes the ring when the frame has focus (Stripe adds the class; :focus-within is the
   same cue where the class is not added). */
.cdob-give .charitable-donation-form.charitable-template-standard .StripeElement--focus,
.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable_stripe_card_field:focus-within {
	outline: 3px solid var(--cdob-navy);
	outline-offset: 2px;
}

.cdob-give #charitable_stripe_card_errors {
	margin: 0.4rem 0 0;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	font-weight: 600;
}

.cdob-give .charitable-notice,
.cdob-give .charitable-form-errors {
	margin: 0 0 1rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--cdob-give-radius-sm);
	background: var(--cdob-give-tint);
	color: var(--cdob-ink);
	font-size: var(--fs-400);
}

.cdob-give .charitable-submit-field {
	margin: 1.25rem 0 0;
}

.cdob-give .charitable-submit-field .donate-button {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--cdob-flame);
	border-radius: 999px;
	background: var(--cdob-flame);
	color: var(--cdob-ink); /* ink on flame 4.69 */
	font-family: var(--cdob-ff-sans);
	font-size: var(--fs-500);
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.cdob-give .charitable-submit-field .donate-button:hover {
	border-color: var(--cdob-navy);
	background: var(--cdob-navy);
	color: var(--cdob-paper);
}

/* The vendor's script disables the button while a payment is on its way. */
.cdob-give .charitable-submit-field .donate-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- The page around the form ----------------------------------------------- */

/* The compact hero: a short band and the title. The scrim is flat
   enough (ink at 0.86) that the title holds 10.64 against a white photo; from 1100px the photo
   shows through on the right, where no text sits, and the left stays at 0.88 (11.40). */
body.cdob-giving-ui2 .cdob-ph.cdob-ph--compact {
	min-height: 0;
}

body.cdob-giving-ui2 .cdob-ph--compact .cdob-ph__inner {
	padding: 40px 24px 32px;
}

body.cdob-giving-ui2 .cdob-ph--compact .cdob-ph__title {
	max-width: none;
}

body.cdob-giving-ui2 .cdob-ph--compact .cdob-ph__overlay {
	background: rgba(var(--cdob-ink-rgb), 0.86);
}

@media (min-width: 1100px) {
	body.cdob-giving-ui2 .cdob-ph--compact .cdob-ph__overlay {
		background: linear-gradient(90deg, rgba(var(--cdob-ink-rgb), 0.9) 0%, rgba(var(--cdob-ink-rgb), 0.88) calc(50% + 170px), rgba(var(--cdob-ink-rgb), 0.4) 100%);
	}
}

/* The right rail: the gear picture, then the owner's words. */
.cdob-rail .cdob-give-rail {
	margin: 0 0 1.75rem;
}

.cdob-rail .cdob-give-rail__gear {
	margin: 0;
}

.cdob-rail .cdob-give-rail__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cdob-give-radius);
}

.cdob-rail .cdob-give-rail__gear .cdob-give-rail__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.cdob-rail .cdob-give-rail__words {
	margin-top: 1.1rem;
}

.cdob-rail .cdob-give-rail__words p {
	margin: 0 0 0.8rem;
	color: var(--cdob-ink);
	font-size: var(--fs-400);
	line-height: 1.55;
}

.cdob-rail .cdob-give-rail__levels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 0.8rem;
	padding: 0;
}

.cdob-rail .cdob-give-rail__levels li {
	margin: 0;
	padding: 0.2rem 0.8rem;
	border-radius: 999px;
	background: rgba(var(--cdob-navy-rgb), 0.1);
	color: var(--cdob-navy);
	font-size: var(--fs-400);
	font-weight: 700;
}

.cdob-rail .cdob-give-rail__words .cdob-give-rail__about {
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(var(--cdob-ink-rgb), 0.18); /* decorative */
	color: var(--cdob-on-light-meta);
	font-size: var(--fs-400);
}

/* ---- Narrow screens -------------------------------------------------------- */

@media (max-width: 640px) {
	.cdob-give .cdob-give__tabs ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdob-give .cdob-give-c6,
	.cdob-give .cdob-give-c5 {
		grid-column: span 12;
	}

	.cdob-give .cdob-give-c4,
	.cdob-give .cdob-give-c3 {
		grid-column: span 6;
	}

	/* The two names and the birthday's month and day are short: they stay side by side. Email and phone stack. */
	.cdob-give #charitable_field_first_name.cdob-give-c6,
	.cdob-give #charitable_field_last_name.cdob-give-c6,
	.cdob-give .cdob-give__bday .cdob-give-c6 {
		grid-column: span 6;
	}

	.cdob-give .cdob-give__gift {
		padding: 1rem;
	}

	.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li label {
		padding: 0.9rem 0.9rem;
	}

	body.cdob-giving-ui2 .cdob-ph--compact .cdob-ph__inner {
		padding: 32px 20px 26px;
	}
}

@media (min-width: 361px) and (max-width: 640px) {
	/* Side by side on a phone each of the two selects is about 136px; the words and the arrow need the padding back.
	   Below 361px the birthday stacks (next block) and the selects keep their usual padding. */
	.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields .cdob-give__bday .charitable-form-field select {
		padding-left: 0.6rem;
		padding-right: 0.3rem;
	}
}

@media (max-width: 360px) {
	/* On the narrowest phones two selects side by side cannot show "Choose one": the birthday stacks. */
	.cdob-give .cdob-give__bday .cdob-give-c6 {
		grid-column: span 12;
	}
}

/* ---- Motion and forced colours ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.cdob-give .cdob-give__panel {
		transition: opacity 0.15s ease;
	}
}

@media (forced-colors: active) {
	.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts input[type="radio"] {
		appearance: auto;
		-webkit-appearance: auto;
	}

	/* The chosen level card: a heavy system-colour outline (its native radio carries its own focus ring). */
	.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li.selected label {
		outline: 3px solid Highlight;
		outline-offset: 0;
	}

	/* One rule per selector: a browser without :has() drops a whole list that names it. */
	.cdob-give .charitable-donation-form.charitable-template-standard ul.donation-amounts li:has( input:checked ) label {
		outline: 3px solid Highlight;
		outline-offset: 0;
	}

	/* A chosen pill or payment tab takes a heavy system-colour EDGE and leaves the outline to the
	   focus rule above, so a chosen option that also has focus shows both. */
	.cdob-give .charitable-donation-form.charitable-template-standard #charitable-donor-fields #charitable-user-fields ul.charitable-radio-list input[type="radio"]:checked + label,
	.cdob-give .charitable-donation-form.charitable-template-standard #charitable-gateway-fields #charitable-gateway-selector li.charitable-gateway-tab input[type="radio"]:checked + label {
		border-color: Highlight;
		border-width: 3px;
	}
}