/*
 * Editorial design system for Summa's embedded form/widget markup:
 * dark event banner, numbered sections, two-column field grid, selectable
 * cards/chips/pills, and a sticky order-summary sidebar.
 *
 * Scoped to .benevolencewrapper (Summa's own root class) since the vendor
 * script renders as a sibling of our block container, not a child.
 *
 * Constraints that shape everything here:
 *
 * 1. The vendor's stylesheets are injected AFTER this file, so structural
 *    rules use a doubled scope class (.benevolencewrapper.benevolencewrapper)
 *    to win on specificity alone.
 *
 * 2. The vendor JS toggles element visibility (conditional fields per reg
 *    type, fee rows, recurring options, wallet pickers...) via a .hidden
 *    class and inline display toggles. display is NEVER declared !important
 *    on vendor-managed elements — that would beat their inline styles and
 *    force-show hidden fields. Specificity wins against their stylesheet;
 *    their inline toggles win against us. That's correct.
 *
 * 3. Sections are conditionally rendered per Summa backend config. Section
 *    numbers are CSS counters, so a form without (say) a donation section
 *    renumbers automatically. Grids auto-fill for any field/reg-type count.
 *
 * Checked-state selectors: :has() rules and .summa-selected (JS fallback)
 * are SEPARATE rule blocks — a selector list containing :has() is dropped
 * wholesale by browsers without :has() support.
 */

/* Tokens also live on .wp-block-summa-widget — the plugin's own container
   div, which holds plugin-rendered markup like the login block's register
   prompt OUTSIDE the vendor wrapper (the vendor mounts its control as a
   sibling after the container). Theme_Css overrides both selectors. */
.wp-block-summa-widget,
.benevolencewrapper {
	--summa-text: #1c2430;
	--summa-text-muted: #6b7280;
	--summa-border: #e5e7eb;
	--summa-border-strong: #d1d5db;
	--summa-surface: #ffffff;
	--summa-surface-subtle: #f8f9fa;
	--summa-summary-bg: var(--summa-accent);
	--summa-summary-text: var(--summa-accent-text);
	--summa-brand: #c53a35;
	--summa-brand-hover: #a92f2b;
	--summa-accent: #1c2430;
	--summa-accent-hover: #37404d;
	--summa-accent-text: #ffffff;
	--summa-selected-bg: #f4f4f5;
	--summa-error: #c53a35;
	--summa-success: #1b5e33;
	--summa-success-bg: #eef7f1;
	--summa-success-border: #bfdfca;
	--summa-radius: 8px;
	--summa-radius-lg: 12px;
	--summa-ring: 0 0 0 3px rgba(28, 36, 48, 0.08);
	/* The one gap used between every stacked content block WITHIN a section
	   (field rows, pill rows, callouts, gates...) — every such block sets
	   ONLY margin-bottom: var(--summa-space-md), never margin-top, so gaps
	   are additive and predictable instead of depending on collapsing
	   between different, ad-hoc values. Section headings (48/20px divider)
	   and sublabels (26/10px) are a deliberately different, larger tier. */
	--summa-space-md: 20px;
	--summa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--summa-heading-font: "Arial Narrow", "Helvetica Neue", -apple-system, sans-serif;
	--summa-heading-color: var(--summa-text);
}

/* No max-width here on purpose — width is the hosting site's call (theme
   content width, page container, block alignment), not the plugin's. */
.benevolencewrapper {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	color: var(--summa-text);
	font-family: var(--summa-font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	counter-reset: summa-section;
}

.benevolencewrapper *,
.benevolencewrapper *::before,
.benevolencewrapper *::after {
	box-sizing: border-box;
}

/* With the summary sidebar: two-column page grid. */
.benevolencewrapper.summa-has-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 0 36px;
	align-items: start;
}

.benevolencewrapper.summa-has-summary > .summa-banner {
	grid-column: 1 / -1;
}

/* Form and summary both pin to row 2 so they stay side by side whether or
   not the banner exists (it's skipped when the vendor renders no login
   prompt, e.g. for logged-in users) — without a banner, row 1 is empty and
   collapses to zero height (row gap is 0). */
.benevolencewrapper.summa-has-summary > form {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.benevolencewrapper.summa-has-summary > .summa-summary {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 24px;
}

/* ------------------------------------------------------------------ */
/* Table reset — backgrounds/borders only (never display: see header). */
/* ------------------------------------------------------------------ */

.benevolencewrapper table {
	width: 100%;
	border-collapse: collapse;
	background: transparent !important;
	border: none !important;
}

.benevolencewrapper td,
.benevolencewrapper th,
.benevolencewrapper tr {
	background: transparent !important;
	border: none !important;
}

/* ------------------------------------------------------------------ */
/* Header band: just the vendor's "Already have an account?" login     */
/* prompt as a quiet text line. The forms are embedded, so the event   */
/* name (the vendor's hidden .heading3) is never resurrected here.     */
/* ------------------------------------------------------------------ */

.benevolencewrapper .summa-banner {
	margin: 0 0 28px;
}

.benevolencewrapper .benformheaderlogin {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-size: 14px;
	color: var(--summa-text-muted);
}

/* Doubled scope: the vendor's `.benevolencewrapper a:not(.button, ...)`
   ties our single-scope selector at (0,2,1) and loads later. */
.benevolencewrapper.benevolencewrapper .benformheaderlogin a {
	color: var(--summa-brand);
	font-weight: 600;
}

.benevolencewrapper.benevolencewrapper .benformheaderlogin a:hover {
	color: var(--summa-brand-hover);
}

/* Doubled scope alone only TIES the vendor's own `.benevolencewrapper
   a:not(.button, .summabutton)` rule (their :not() argument counts as a
   class, giving them (0,2,1) against a single-scope (0,1,1)) — a tie
   still goes to them since they load later. Matching their own
   :not(.button, .summabutton) here adds the same extra class ourselves,
   for (0,3,1): an outright win, not just a load-order tie. Without this,
   any plain vendor-rendered <a> with no purpose-built override (e.g. the
   confirmation screen's "Continue…" link below) silently falls through
   to the vendor's bare, unstyled default. */
.benevolencewrapper.benevolencewrapper a:not(.button, .summabutton) {
	color: var(--summa-text);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Form submission success screen (vendor's benFormConfirmation_Loaded) */
/* ------------------------------------------------------------------ */

/* The vendor renders this as a bare `<div class="heading3 form-succes">`
   message, a plain `<a>` "Continue…" link in its own sibling <div>, then
   two trailing <br>. No wrapper class ties the two together, so the link
   is targeted structurally (stable vendor confirmation-template shape,
   confirmed against live markup). Extra .benevolencewrapper repeat beats
   the vendor's own same-specificity `.benevolencewrapper .heading3` rule
   (18px/bold) at their (0,2,0) tie, which — same as the link rule above —
   would otherwise go to them since they load later.

   max-width/margin repeated under an #benVolunteer-qualified selector:
   Volunteer HQ's own `#benVolunteer > div` rule (above) is ID-specificity
   and would otherwise always win that one property fight over this
   class-only rule, on any host with an #benVolunteer control on the page. */
.benevolencewrapper.benevolencewrapper .form-succes,
#benVolunteer .form-succes {
	max-width: 480px;
	margin: 40px auto 0 !important;
}

.benevolencewrapper.benevolencewrapper .form-succes {
	padding: 32px 28px 28px;
	border-radius: var(--summa-radius-lg);
	background: var(--summa-success-bg);
	border: 1px solid var(--summa-success-border);
	text-align: center;
	font-family: var(--summa-heading-font);
	font-size: 19px;
	font-weight: 800;
	color: var(--summa-heading-color);
}

.benevolencewrapper.benevolencewrapper .form-succes::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 999px;
	background: var(--summa-success);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

/* Same #benVolunteer-qualified repeat as .form-succes above, for the same
   reason: beats #benVolunteer > div's ID-specificity max-width/margin. */
.benevolencewrapper.benevolencewrapper .form-succes + br + div,
#benVolunteer .form-succes + br + div {
	max-width: 480px;
	margin: 0 auto !important;
	text-align: center;
}

.benevolencewrapper.benevolencewrapper .form-succes + br + div a {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--summa-radius);
	border: 1.5px solid var(--summa-border-strong);
	background: var(--summa-surface);
	color: var(--summa-text) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.benevolencewrapper.benevolencewrapper .form-succes + br + div a:hover {
	background: var(--summa-selected-bg);
	border-color: var(--summa-accent);
	color: var(--summa-text) !important;
}

/* ------------------------------------------------------------------ */
/* Headings: numbered section titles + small sub-labels                */
/* ------------------------------------------------------------------ */

.benevolencewrapper .bentableheading {
	margin: 32px 0 16px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	font-size: 15px;
	font-weight: 650;
	color: var(--summa-text);
}

/* Numbered section title (promoted vendor headings + injected ones).
   The rule sits ABOVE the heading (border-top, not border-bottom) so it
   reads as a divider BETWEEN sections rather than an underline glued to
   the heading text. */
.benevolencewrapper .bentableheading.summa-section-title,
.benevolencewrapper .summa-section-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 48px 0 20px !important;
	padding: 28px 0 0 !important;
	border: none !important;
	border-top: 1px solid var(--summa-border) !important;
	font-family: var(--summa-heading-font);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--summa-heading-color);
}

.benevolencewrapper .summa-section-title::before {
	counter-increment: summa-section;
	content: counter(summa-section, decimal-leading-zero);
	font-family: var(--summa-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--summa-brand);
}

/* The truly-first section only (marked by form-enhance.js) skips the leading
   divider. NOT :first-child — the vendor renders each heading as the first
   child of its OWN section wrapper div, so a plain :first-child selector
   would match every section's heading, not just the form's first one. */
.benevolencewrapper .summa-section-title.summa-section-title-first {
	margin-top: 8px !important;
	padding-top: 0 !important;
	border-top: none !important;
}

/* Demoted headings (Donation, Honor Roll, User Account, Promo Code,
   matching gift...) become small uppercase labels within their section. */
.benevolencewrapper .bentableheading.summa-sublabel {
	margin: 26px 0 10px !important;
	padding: 0 !important;
	border: none !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper .heading2,
.benevolencewrapper .heading3 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------ */
/* Field grid: two columns on desktop, labels above inputs.            */
/* Doubled scope class beats the vendor stylesheet WITHOUT !important, */
/* so the vendor's .hidden class and inline show/hide still work.      */
/* ------------------------------------------------------------------ */

/* Column min of max(240px, 50% - half the gap) caps the auto-fill at two
   columns however wide the form gets, while still dropping to one column
   under ~500px. */
.benevolencewrapper.benevolencewrapper .bentable.form {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(50% - 10px)), 1fr));
	column-gap: 20px;
}

.benevolencewrapper.benevolencewrapper .bentable.form > div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	margin: 0 0 var(--summa-space-md) !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	min-width: 0;
}

/* Vendor-hidden rows stay hidden (higher specificity than our display
   rules, still no !important so vendor inline toggles always win). */
.benevolencewrapper.benevolencewrapper .bentable.form > div.hidden,
.benevolencewrapper.benevolencewrapper .benfield.hidden,
.benevolencewrapper.benevolencewrapper .bencommitmentagree.hidden {
	display: none;
}

/* Elements flagged by our JS to span the full row (chip groups etc.) */
.benevolencewrapper.benevolencewrapper .bentable.form > .summa-span,
.benevolencewrapper.benevolencewrapper .bentable.form > .bencommitmentagree {
	grid-column: 1 / -1;
}

/* Editor-selected full-width fields (the block's fullWidthFields setting;
   form-enhance.js tags the rfc containers). Spanning the row also stops the
   label-grows-to-bottom-align behavior from opening a gap when a tall
   neighbor (e.g. a textarea) sits beside a short input. */
.benevolencewrapper.benevolencewrapper .bentable.form > .summa-field-full {
	grid-column: 1 / -1;
}

.benevolencewrapper .bentable.form > div > div {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	text-align: left;
}

/* Field labels: small caps, editorial style. flex-grow makes the label
   absorb any height difference, so when a neighboring label wraps to two
   lines the INPUTS still bottom-align across the row. */
.benevolencewrapper .bentable.form > div > div:first-child,
.benevolencewrapper .benfield > div:first-child {
	flex: 1 0 auto;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text);
}

.benevolencewrapper .required {
	color: var(--summa-error);
	margin-left: 2px;
}

/* Dynamic per-registration questions */
.benevolencewrapper .benfield {
	margin: 0 0 var(--summa-space-md);
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.benevolencewrapper .benfield > div:first-child {
	margin-bottom: 6px;
}

.benevolencewrapper .rfcfee {
	color: var(--summa-text-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* Plain checkbox lists (short lists, waivers) */
.benevolencewrapper.benevolencewrapper .benfield table td {
	display: block;
	padding: 5px 0 !important;
}

.benevolencewrapper .benfield table label {
	font-weight: 400;
	cursor: pointer;
}

/* Lone-checkbox rows (Is company?, opt-ins — tagged by form-enhance.js):
   the generic label-above-control layout strands an 18px box under a big
   uppercase label. Lay these out as one inline line instead — checkbox
   first, label beside it (order flips the DOM order of the two divs).
   align-items centers the line within the full cell height, so next to a
   normal label+input neighbor the row sits comfortably mid-cell instead
   of hugging the top. No display here: the vendor's .hidden rule above
   (same specificity, and we must not out-rank it) still hides the row. */
.benevolencewrapper.benevolencewrapper .bentable.form > div.summa-check-row {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 46px;
}

/* Beats the flex-grow label rule above via the extra class. Sentence case
   (not the small-caps field-label treatment): matches how every other
   checkbox on the form labels itself (.benrecurring, waiver lists), and
   long agree-sentences stay readable. */
.benevolencewrapper .bentable.form > div.summa-check-row > div:first-child {
	order: 2;
	flex: 0 1 auto;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
}

.benevolencewrapper .bentable.form > div.summa-check-row > div:last-child {
	order: 1;
	flex: 0 0 auto;
	line-height: 1;
}

/* The row gap provides the spacing; the base checkbox margin would double it. */
.benevolencewrapper .summa-check-row input[type="checkbox"] {
	margin: 0;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Chips: multi-option checkbox groups become pill toggles             */
/* ------------------------------------------------------------------ */

.benevolencewrapper.benevolencewrapper table.summa-chips,
.benevolencewrapper.benevolencewrapper table.summa-chips tbody {
	display: block;
}

.benevolencewrapper.benevolencewrapper table.summa-chips tr {
	display: inline;
}

.benevolencewrapper.benevolencewrapper table.summa-chips td {
	display: inline-block;
	position: relative;
	width: auto;
	margin: 0 8px 8px 0;
	padding: 0 !important;
}

.benevolencewrapper table.summa-chips input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	margin: 0;
	cursor: pointer;
}

.benevolencewrapper table.summa-chips label {
	display: inline-block;
	padding: 8px 16px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.benevolencewrapper table.summa-chips label:hover {
	border-color: var(--summa-accent);
}

.benevolencewrapper table.summa-chips input[type="checkbox"]:focus-visible + label {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* Selected chip — :has() version. */
.benevolencewrapper table.summa-chips td:has(input:checked) label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Selected chip — .summa-selected fallback set by form-enhance.js. */
.benevolencewrapper table.summa-chips td.summa-selected label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* ------------------------------------------------------------------ */
/* Inputs                                                              */
/* ------------------------------------------------------------------ */

/* Doubled scope (see header): the vendor's own field rules — global
   `.benevolencewrapper input[type=text], .textbox { padding: 4px }` and
   the login popup's `.ben_login input[type=text] { padding: 0 }` — tie
   or beat a single-scope selector and load later, silently flattening
   this padding everywhere. */
.benevolencewrapper.benevolencewrapper input[type="text"],
.benevolencewrapper.benevolencewrapper input[type="email"],
.benevolencewrapper.benevolencewrapper input[type="tel"],
.benevolencewrapper.benevolencewrapper input[type="password"],
.benevolencewrapper.benevolencewrapper input[type="number"],
.benevolencewrapper.benevolencewrapper textarea {
	width: 100%;
	max-width: 100%;
	/* Fixed height keeps text and password fields identical regardless of
	   vendor per-type padding rules. */
	height: 46px !important;
	padding: 10px 14px;
	border: 1px solid var(--summa-border-strong) !important;
	border-radius: var(--summa-radius);
	background: var(--summa-surface) !important;
	color: var(--summa-text);
	/* 16px prevents iOS Safari from zooming the page on focus */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.benevolencewrapper.benevolencewrapper select {
	width: 100%;
	max-width: 100%;
	height: 46px !important;
	padding: 10px 38px 10px 14px;
	border: 1px solid var(--summa-border-strong) !important;
	border-radius: var(--summa-radius);
	background-color: var(--summa-surface) !important;
	color: var(--summa-text);
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.benevolencewrapper input[type="text"]:focus,
.benevolencewrapper input[type="email"]:focus,
.benevolencewrapper input[type="tel"]:focus,
.benevolencewrapper input[type="password"]:focus,
.benevolencewrapper input[type="number"]:focus,
.benevolencewrapper select:focus,
.benevolencewrapper textarea:focus {
	outline: none;
	border-color: var(--summa-accent) !important;
	box-shadow: var(--summa-ring);
}

/* Doubled to keep beating the (doubled) fixed-height field rule above. */
.benevolencewrapper.benevolencewrapper textarea {
	height: auto !important;
	min-height: 90px;
}

.benevolencewrapper input[type="checkbox"],
.benevolencewrapper input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--summa-brand);
	margin: 0 8px 0 0;
	vertical-align: -3px;
	cursor: pointer;
}

/* Validation states (vendor's jQuery-validate adds .beninvalid).
   Doubled to stay ahead of the doubled base border above (same
   specificity, later in the file). */
.benevolencewrapper.benevolencewrapper input.beninvalid,
.benevolencewrapper.benevolencewrapper select.beninvalid,
.benevolencewrapper.benevolencewrapper textarea.beninvalid {
	border-color: var(--summa-error) !important;
}

.benevolencewrapper label.beninvalid {
	display: block;
	margin-top: 4px;
	color: var(--summa-error);
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

/* .summabutton is a second vendor class for the same button treatment —
   their own default.css pairs it with .button verbatim (`.button,
   .summabutton { ... }`); ours does the same rather than leaving it to
   fall through to the vendor's bare var(--themecolor) default (Volunteer
   HQ's Schedule/Calendar/Filter actions use .summabutton, not .button). */
.benevolencewrapper .button,
.benevolencewrapper .summabutton,
.benevolencewrapper input[type="button"],
.benevolencewrapper input[type="submit"] {
	display: inline-block;
	padding: 11px 22px;
	background: var(--summa-accent) !important;
	color: var(--summa-accent-text) !important;
	border: 1px solid var(--summa-accent) !important;
	border-radius: var(--summa-radius);
	font-size: 14px;
	font-weight: 550;
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.benevolencewrapper .button:hover,
.benevolencewrapper .summabutton:hover,
.benevolencewrapper input[type="button"]:hover,
.benevolencewrapper input[type="submit"]:hover {
	background: var(--summa-accent-hover) !important;
	border-color: var(--summa-accent-hover) !important;
}

.benevolencewrapper .button.cancel {
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1px solid var(--summa-border-strong) !important;
}

/* The generic hover above outranks .button.cancel ((0,3,1) vs (0,3,0)),
   which painted the accent-dark hover background under cancel's dark
   text. Doubled scope keeps secondary buttons light on hover. */
.benevolencewrapper.benevolencewrapper .button.cancel:hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-border-strong) !important;
}

/* ------------------------------------------------------------------ */
/* Registration types → selectable card grid                           */
/* ------------------------------------------------------------------ */

/* The vendor butts the per-registration field grid (.benregform) right up
   against this card grid; standard stacked-block gap below (see the
   --summa-space-md convention — spacing lives on margin-bottom). */
.benevolencewrapper .benregtypeswrap {
	margin-bottom: var(--summa-space-md);
}

.benevolencewrapper.benevolencewrapper .benregtypes {
	display: block;
}

.benevolencewrapper.benevolencewrapper .benregtypes tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

/* Fixed column counts — opt-in via the block's "Registration card columns"
   setting (form-enhance.js adds the matching class to the wrapper). Default
   "Auto" leaves the responsive auto-fill grid above untouched. */
.benevolencewrapper.summa-regcols-1 .benregtypes tbody {
	grid-template-columns: 1fr;
}

.benevolencewrapper.summa-regcols-2 .benregtypes tbody {
	grid-template-columns: repeat(2, 1fr);
}

.benevolencewrapper.summa-regcols-3 .benregtypes tbody {
	grid-template-columns: repeat(3, 1fr);
}

.benevolencewrapper.benevolencewrapper .benregtypes tr.benregtyperow,
.benevolencewrapper.benevolencewrapper .benregtypes td {
	display: contents;
}

.benevolencewrapper.benevolencewrapper .benregtypes td:empty {
	display: none;
}

/* Editor-hidden registration types (form-enhance.js tags the card span —
   and any category heading left without visible cards — from the block's
   hiddenRegTypes setting). The input stays in the DOM for the postback. */
.benevolencewrapper.benevolencewrapper .benregtypes .summa-regtype-hidden {
	display: none;
}

/* Every type hidden (or the "Hide registration type selector" toggle):
   drop the whole selector; the vendor's default selection stands. */
.benevolencewrapper.benevolencewrapper .benregtypes.summa-regtypes-allhidden {
	display: none;
}

.benevolencewrapper .regtypecatheading {
	grid-column: 1 / -1;
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper .benregtyperow td > span {
	display: block;
	position: relative;
}

/* Checkboxes too: multi-select reg types render checkbox inputs but get
   the same card treatment. */
.benevolencewrapper .benregtyperow input[type="radio"],
.benevolencewrapper .benregtyperow input[type="checkbox"] {
	position: absolute;
	left: 16px;
	top: 18px;
	margin: 0;
}

/* Registration benefit rules (block setting): a source reg type is
   converted to type="checkbox" internally so a benefit type's computed
   quantity survives the vendor's own single-choice handling (form-enhance.js
   setupRegTypeMultiSelect()/enforceSingleRegTypeSelection()), even though
   exactly one such card can be chosen at a time — same as any other reg
   type on the form. Forcing the native radio LOOK here keeps that donor-
   facing single choice indistinguishable from every other exclusive card;
   the multi-select case (below) is the one that should look like a
   checkbox. */
.benevolencewrapper .benregtyperow input[type="checkbox"].summa-regtype-single-visual {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 50%;
	border: 2px solid var(--summa-border-strong);
	background: var(--summa-surface);
}

.benevolencewrapper .benregtyperow input[type="checkbox"].summa-regtype-single-visual:checked {
	border-color: var(--summa-brand);
	background-color: var(--summa-surface);
	background-image: radial-gradient(circle, var(--summa-brand) 0 5px, transparent 6px);
	background-repeat: no-repeat;
	background-position: center;
}

.benevolencewrapper .benregtyperow input[type="checkbox"].summa-regtype-single-visual:focus-visible {
	outline: none;
	box-shadow: var(--summa-ring);
}

/* Genuine multi-select (regTypesMultiSelect block setting): an explicit
   hint above the cards, since a checkbox square alone is an easy tell to
   miss next to otherwise-identical radio-style cards elsewhere on the
   site. */
.benevolencewrapper .summa-regtype-multi-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--summa-text-muted);
}

/* jQuery Validate's "This field is required" error label for the reg-type
   radio GROUP lands as a plain sibling INSIDE the same <span> the card
   label below decorates — positioned between the radio and the real card
   label, and sharing .beninvalid with the invalid radio itself (not just
   the individual card's own label, which the vendor never marks invalid).
   Excluded here rather than out-specified (same convention as the paired-
   hover-state rule) so it never gets the box/flex/height/border treatment
   meant only for real card content — left unexcluded, it silently won that
   treatment (equal specificity, later in the file) over its own intended
   small-red-text styling above, rendering as an empty-looking card with
   the error text overlapping the radio and hiding the actual "Gold Sponsor
   $5,000" content entirely. */
.benevolencewrapper .benregtyperow label:not(.beninvalid) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	padding: 16px 16px 16px 46px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius-lg);
	font-size: 13px;
	line-height: 1.5;
	color: var(--summa-text-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Taken out of flow so it can't add height to the grid row or shift the
   real card below it — reads as a small caption anchored under the card
   (span is already position:relative for the radio above) instead of
   colliding with the radio's own fixed top:18px. */
.benevolencewrapper .benregtyperow label.beninvalid {
	position: absolute;
	left: 46px;
	right: 16px;
	bottom: -18px;
	margin: 0;
	pointer-events: none;
}

.benevolencewrapper .benregtyperow label b,
.benevolencewrapper .benregtyperow label strong {
	color: var(--summa-text);
}

.benevolencewrapper .benregtyperow label b {
	display: inline-block;
	color: var(--summa-heading-color);
	font-family: var(--summa-heading-font);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 2px;
}

/* Price pinned to the card's top-right corner, same display treatment as
   the card title so the two anchor the card together. */
.benevolencewrapper .benregtypefee {
	float: right;
	margin-left: 8px;
	font-family: var(--summa-heading-font);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: var(--summa-text);
}

/* Card header row — injected by form-enhance.js on every reg-type card.
   Wraps the card title (left) and the price (right, always moved in from
   .benregtypefee, its vendor label text stripped down to just the amount)
   with space between. */
.benevolencewrapper .summa-regcard-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
}

.benevolencewrapper .summa-regcard-header b {
	margin-bottom: 0;
}

/* Category label (only when the block's "Show category label" toggle is
   on) — its own line above the title/price row. */
.benevolencewrapper .summa-regcard-category {
	display: block;
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper .summa-regcard-header .benregtypefee {
	float: none;
	margin-left: 0;
	flex-shrink: 0;
}

/* "$X Fundraising Commitment" badge — injected under the card title whenever
   the reg type carries a fundraising commitment/goal; no block setting gates
   this. display:block + fit-content keeps it on its own line between the
   title and the description. */
.benevolencewrapper .summa-regcard-raise {
	display: block;
	width: fit-content;
	margin: 4px 0 8px;
	padding: 4px 12px;
	background: #f0ede4;
	border-radius: var(--summa-radius);
	color: var(--summa-text);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.01em;
}

.benevolencewrapper .benregtyperow label:hover {
	border-color: var(--summa-brand);
}

/* Selected card — :has() version. */
.benevolencewrapper .benregtyperow td > span:has(> input:checked) label {
	border-color: var(--summa-brand);
	background: rgba(197, 58, 53, 0.04);
	box-shadow: 0 0 0 1px var(--summa-brand);
}

/* Selected card — .summa-selected fallback set by form-enhance.js. */
.benevolencewrapper .benregtyperow td > span.summa-selected label {
	border-color: var(--summa-brand);
	background: rgba(197, 58, 53, 0.04);
	box-shadow: 0 0 0 1px var(--summa-brand);
}

/* ------------------------------------------------------------------ */
/* Collapsible card descriptions — "Collapse long card descriptions"   */
/* block toggle. form-enhance.js wraps everything below the header in  */
/* .summa-regcard-details and adds .summa-collapsible only when the    */
/* content overflows the clamp (short cards stay untouched).           */
/* ------------------------------------------------------------------ */

.benevolencewrapper .summa-regcard-details.summa-collapsible {
	position: relative;
	max-height: 7em; /* ~4–5 description lines at the card's 13px/1.5 */
	overflow: hidden;
}

/* The description <ul>'s trailing margin inflates scrollHeight, which
   form-enhance.js compares against the clamp — without this, a card
   whose text fully fits still gets a dead "Show details" toggle. */
.benevolencewrapper .summa-regcard-details > :last-child {
	margin-bottom: 0;
}

/* Fade-out hint that more content is clipped below. Only unselected
   cards ever show it (selected = expanded), so the plain surface
   background is always the right fade target. */
.benevolencewrapper .summa-regcard-details.summa-collapsible::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--summa-surface));
	pointer-events: none;
}

/* Expanded — .summa-details-open is set by the card's toggle, and by JS
   as a default whenever a card becomes selected; the toggle stays live
   either way, so even a selected card can be re-collapsed. */
.benevolencewrapper .benregtyperow td > span.summa-details-open .summa-regcard-details.summa-collapsible {
	max-height: none;
}

.benevolencewrapper .benregtyperow td > span.summa-details-open .summa-regcard-details.summa-collapsible::after {
	content: none;
}

.benevolencewrapper .summa-regcard-toggle {
	display: inline-block;
	align-self: flex-start;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 650;
	color: var(--summa-brand);
	cursor: pointer;
}

.benevolencewrapper .summa-regcard-toggle:hover {
	color: var(--summa-brand-hover);
	text-decoration: underline;
}

/* Multi-select (checkbox) reg types with quantity — the stepper is the
   selection control (0 = not registered), so the vendor checkbox is
   hidden and the card reclaims its left padding. form-enhance.js adds
   the class and keeps checkbox ↔ quantity in sync both ways. */
.benevolencewrapper .benregtyperow td > span.summa-qty-select > input {
	display: none;
}

.benevolencewrapper .benregtyperow td > span.summa-qty-select label {
	padding-left: 16px;
}

/* ------------------------------------------------------------------ */
/* Quantity stepper — form-enhance.js moves the vendor's qty input     */
/* (otherwise a grid-orphaned <td>) into the card as a footer row with */
/* −/+ buttons; the row's display is synced by JS to the vendor's own  */
/* visibility toggling, so only the selected multi-qty card shows it.  */
/* ------------------------------------------------------------------ */

.benevolencewrapper .summa-regcard-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* auto: the card label is a flex column stretched to the grid row's
	   height, so this pins the qty footer to the card's bottom edge —
	   short cards sharing a row with a tall one no longer leave dead
	   space under the stepper. */
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--summa-border);
}

/* margin-top:auto collapses to 0 on the row's tallest card, so keep the
   12px breathing room above the divider on whatever sits before it. */
.benevolencewrapper .benregtyperow label:has(> .summa-regcard-qty) > :nth-last-child(2) {
	margin-bottom: 12px;
}

.benevolencewrapper .summa-regcard-qty-label {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper .summa-regcard-qty-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* min-width/min-height/margin pin the geometry against host-theme generic
   `button` rules (Flatsome ships min-height: 2.5em + margin-bottom: 1em —
   the margin skews flex centering, not just size); the border-radius
   !important defends the circle against theme `border-radius !important`
   button resets. */
.benevolencewrapper .summa-regcard-qty-btn {
	width: 28px;
	min-width: 28px;
	height: 28px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--summa-border-strong);
	border-radius: 50% !important;
	background: var(--summa-surface);
	color: var(--summa-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.benevolencewrapper .summa-regcard-qty-btn:hover {
	border-color: var(--summa-brand);
	color: var(--summa-brand);
}

/* Width/centering come from the vendor's inline style; square the box
   up to match the stepper buttons. The height !important is required to
   beat our own base text-input rule's `height: 46px !important` (Inputs
   section above); margin: 0 pins against host-theme `td input` margins. */
.benevolencewrapper.benevolencewrapper input.benregtypequantity {
	height: 28px !important;
	margin: 0;
	padding: 0;
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	font-size: 13px;
}

/* Auto-granted benefit card (regTypeBenefitRules block setting): quantity
   and checked state are computed from the selected source reg type(s), not
   donor-editable — form-enhance.js blocks clicks/keys on these, this just
   signals "not interactive" instead of looking like a normal stepper. */
.benevolencewrapper .summa-regtype-locked .summa-regcard-qty-btn {
	cursor: default;
	opacity: 0.5;
}

.benevolencewrapper .summa-regtype-locked .summa-regcard-qty-btn:hover {
	border-color: var(--summa-border-strong);
	color: var(--summa-text);
}

.benevolencewrapper.benevolencewrapper input.summa-auto-benefit-qty {
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Custom (donor-entered) fee, relocated by form-enhance.js from the   */
/* vendor's orphan sibling <td> into a labeled money field at the      */
/* card's bottom edge — mirrors the quantity footer's divider + pin.   */
/* An out-of-range amount (regTypeFeeRules) adds .summa-fee-invalid.    */
/* ------------------------------------------------------------------ */

.benevolencewrapper .summa-regcard-fee {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--summa-border);
}

/* margin-top:auto collapses to 0 on the row's tallest card, so keep the
   12px breathing room above the divider on whatever sits before it. */
.benevolencewrapper .benregtyperow label:has(> .summa-regcard-fee) > :nth-last-child(2) {
	margin-bottom: 12px;
}

.benevolencewrapper .summa-regcard-fee-label {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper .summa-regcard-fee-field {
	display: flex;
	align-items: center;
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	background: var(--summa-surface);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* form-enhance.js relocates the vendor's whole .benregtypecustomfee span
   (not just the bare input) so its class stays findable by the vendor's own
   total calc. Erase it as a box so its child input is still the flex item
   here, same as if it had been appended directly. */
.benevolencewrapper .summa-regcard-fee-field .benregtypecustomfee {
	display: contents;
}

.benevolencewrapper .summa-regcard-fee-field:focus-within {
	border-color: var(--summa-brand);
	box-shadow: 0 0 0 3px rgba(197, 58, 53, 0.12);
}

.benevolencewrapper .summa-regcard-fee-prefix {
	padding: 0 4px 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--summa-text-muted);
}

/* The generic text-input rule above sets border/background/height with
   !important (to beat the vendor's own), so this borderless-inside-a-wrapper
   input has to override those the same way. The wrapper owns the border and
   focus ring; the input itself is a bare field. Inline width/text-align the
   vendor set are cleared in form-enhance.js. font-size stays 16px so iOS
   doesn't zoom on focus. */
.benevolencewrapper.benevolencewrapper .summa-regcard-fee-field input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 44px !important;
	margin: 0;
	padding: 0 12px 0 2px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	font-size: 16px;
	font-weight: 600;
	color: var(--summa-text);
	text-align: left;
}

.benevolencewrapper.benevolencewrapper .summa-regcard-fee-field input:focus {
	outline: none;
	box-shadow: none;
}

.benevolencewrapper .summa-fee-invalid .summa-regcard-fee-field {
	border-color: var(--summa-error);
}

.benevolencewrapper .summa-fee-invalid .summa-regcard-fee-field:focus-within {
	box-shadow: 0 0 0 3px rgba(197, 58, 53, 0.12);
}

/* Message is always in the DOM (built once) but only shown once the card is
   flagged invalid, so screen readers get the alert only when it applies. */
.benevolencewrapper .summa-fee-error-msg {
	display: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--summa-error);
}

.benevolencewrapper .summa-fee-invalid .summa-fee-error-msg {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Sold-out registration types (soldOutRegTypes block setting): the card  */
/* stays visible so donors can see the option existed, but is disabled    */
/* and badged — distinct from summa-regtype-hidden, which removes the     */
/* card entirely.                                                         */
/* ------------------------------------------------------------------ */

.benevolencewrapper .benregtyperow td > span.summa-regtype-soldout label {
	cursor: not-allowed;
	background: var(--summa-selected-bg);
	color: var(--summa-text-muted);
}

.benevolencewrapper .benregtyperow td > span.summa-regtype-soldout label:hover {
	border-color: var(--summa-border-strong);
}

.benevolencewrapper .summa-regcard-soldout-badge {
	display: block;
	width: fit-content;
	margin: 4px 0 8px;
	padding: 4px 12px;
	background: var(--summa-border);
	border-radius: var(--summa-radius);
	color: var(--summa-text-muted);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* The quantity stepper is disabled too (see setupSoldOutRegTypes() — it's
   just another way of driving the same selection), so it needs the same
   "not interactive" treatment as the card itself. */
.benevolencewrapper .summa-regtype-soldout .summa-regcard-qty-btn:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.benevolencewrapper .summa-regtype-soldout .summa-regcard-qty-btn:disabled:hover {
	border-color: var(--summa-border-strong);
	color: var(--summa-text);
}

.benevolencewrapper.benevolencewrapper input.benregtypequantity:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Donation levels → pill row (incl. injected "No donation")           */
/* ------------------------------------------------------------------ */

.benevolencewrapper.benevolencewrapper .bendonlevels {
	display: block;
	margin: 0 0 var(--summa-space-md);
}

.benevolencewrapper.benevolencewrapper .bendonlevels tbody {
	display: block;
}

.benevolencewrapper.benevolencewrapper .bendonlevels tr {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.benevolencewrapper.benevolencewrapper .bendonlevels td {
	display: block;
	position: relative;
	flex: 0 1 auto;
	min-width: 84px;
	padding: 0 !important;
}

.benevolencewrapper .bendonlevels input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	margin: 0;
	cursor: pointer;
}

.benevolencewrapper .bendonlevels label {
	display: block;
	padding: 10px 18px;
	text-align: center;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.benevolencewrapper .bendonlevels label:hover {
	border-color: var(--summa-accent);
}

.benevolencewrapper .bendonlevels input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* Selected pill — :has() version. */
.benevolencewrapper .bendonlevels td:has(input:checked) label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Selected pill — .summa-selected fallback set by form-enhance.js. */
.benevolencewrapper .bendonlevels td.summa-selected label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Fixed column counts for donation levels — opt-in via the block's "Donation
   level columns" setting (form-enhance.js's applyDonationLevelsColumns()).
   .bendonlevels itself becomes the grid; unwrapping tbody/tr to
   display:contents covers vendor forms that render a real <table>, and is a
   no-op (nothing to match) on vendor forms that render a bare flow container
   instead — both are seen in the wild. Leaving columns at "auto" (the
   default) keeps the existing wrapping pill row above untouched.
   td is deliberately NOT flattened: it's the radio's position:relative
   anchor (see .bendonlevels input[type="radio"] below), so display:contents
   on td removes its positioned box and every radio's 100%/100% absolute
   fill resolves against the next positioned ancestor instead — none exists,
   so every level's click target collapses onto the same oversized box,
   with the last one in DOM order (the trailing "Other" radio) swallowing
   every click. td stays a real block/grid-item box; grid layout ignores
   its leftover flex-only properties, so this is safe. */
.benevolencewrapper.summa-doncols .bendonlevels {
	display: grid;
	align-items: stretch;
	gap: 12px;
}

.benevolencewrapper.summa-doncols .bendonlevels tbody,
.benevolencewrapper.summa-doncols .bendonlevels tr {
	display: contents;
}

.benevolencewrapper.summa-doncols-1 .bendonlevels {
	grid-template-columns: 1fr;
}

.benevolencewrapper.summa-doncols-2 .bendonlevels {
	grid-template-columns: repeat(2, 1fr);
}

.benevolencewrapper.summa-doncols-3 .bendonlevels {
	grid-template-columns: repeat(3, 1fr);
}

/* Rich donation-level cards (amount + title + description), opt-in per
   level via the block's "Custom donation levels" panel — plain amount-only
   pills above render exactly as before. */
.benevolencewrapper .bendonlevels label.summa-donlevel-rich {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 16px 18px;
	text-align: left;
	border-radius: var(--summa-radius-lg);
}

.benevolencewrapper .bendonlevels label.summa-donlevel-rich .summa-donlevel-amount {
	font-family: var(--summa-heading-font);
	font-size: 22px;
	font-weight: 800;
}

.benevolencewrapper .bendonlevels label .summa-donlevel-title {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.benevolencewrapper .bendonlevels label .summa-donlevel-description {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--summa-text-muted);
}

/* Featured level — at most one, enforced server-side (Render_Service::
   sanitize_donation_levels_list()) and in the editor panel (single-select
   over the list). Called out with the accent color plus a small badge
   strip; the box-shadow (rather than a heavier border) keeps the card's
   layout metrics identical to its unfeatured siblings. */
.benevolencewrapper .bendonlevels label.summa-donlevel-featured {
	border-color: var(--summa-accent);
	box-shadow: 0 0 0 1px var(--summa-accent);
}

.benevolencewrapper .bendonlevels label.summa-donlevel-featured .summa-donlevel-badge {
	display: block;
	margin-top: 8px;
	padding: 3px 0;
	width: 100%;
	text-align: center;
	background: var(--summa-accent);
	color: var(--summa-accent-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
}

/* Selected + featured together: the plain "selected" accent fill would
   otherwise swallow the featured outline, so bump the featured card to a
   heavier ring instead of losing the distinction. */
.benevolencewrapper .bendonlevels td:has(input:checked) label.summa-donlevel-featured,
.benevolencewrapper .bendonlevels td.summa-selected label.summa-donlevel-featured {
	box-shadow: 0 0 0 2px var(--summa-accent);
}

/* .summa-donlevel-description hardcodes a muted gray (readable on the card's
   default white background) that does NOT inherit from the "selected pill"
   rules above — those only set the label's own background/color, and a
   child with its own explicit color never inherits a change to its
   ancestor's color. Left alone, a selected rich card reads muted-gray text
   on the accent fill (near-unreadable). Pair the override here, same rule
   the label's own background/color live in. */
.benevolencewrapper .bendonlevels td:has(input:checked) label .summa-donlevel-description,
.benevolencewrapper .bendonlevels td.summa-selected label .summa-donlevel-description {
	color: inherit;
}

/* Injected "No donation" pill (a real button, active by default).
   Mirrors the .bendonlevels label metrics exactly (padding, font, line-height,
   1px border) so the button and the radio pills render at the same size. */
.benevolencewrapper .summa-no-donation {
	display: block;
}

.benevolencewrapper.benevolencewrapper .summa-no-donation .summa-gate-btn {
	box-sizing: border-box;
	height: 100%;
	padding: 10px 18px;
	border-width: 1px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

/* Shared "optional choice" callout: one consistent visual language (and one
   consistent bottom-only margin) for every checkbox-driven block that
   deserves a clear boundary — recurring-gift frequency picker, the
   processing-fee opt-in (assets/js/form-enhance.js setupProcessingFee),
   promo code, and the registration fundraising-commitment note. Each keeps
   its own internal rules below for whatever's specific to it (labels,
   revealed sub-fields, etc.).
   NOT .benhonorrolldiv — boxing it assumed its "Honor Roll" sublabel sits
   OUTSIDE the div (matching the Employer Matching Gift pattern), but on the
   live form the label rendered cramped against the box's own top edge,
   meaning that assumption was wrong. Needs the real markup before it can
   safely rejoin this group — see .benhonorrolldiv .bentable.form below. */
.benevolencewrapper .benrecurring,
.benevolencewrapper #benformprocessingfee,
.benevolencewrapper .bencommitmentagree,
.benevolencewrapper .summa-promo {
	margin: 0 0 var(--summa-space-md);
	padding: 14px 16px;
	background: var(--summa-surface-subtle);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius);
	font-size: 14px;
}

/* File-upload fields (tagged summa-file-field + summa-span by
   form-enhance.js setupFileFields): same callout language as the group
   above, but the field lives INSIDE the .bentable.form grid whose child
   reset (padding/background/border, all !important) must be out-ranked
   here — hence the doubled scope class and matching !important. The
   full-row placement comes from the shared .summa-span rule. */
.benevolencewrapper.benevolencewrapper .bentable.form > .benfield.summa-file-field {
	padding: 14px 16px !important;
	background: var(--summa-surface-subtle) !important;
	border: 1px solid var(--summa-border) !important;
	border-radius: var(--summa-radius);
	font-size: 14px;
}

/* The label is a full instruction sentence (dates, email links) — the
   small-caps field-label treatment garbles it; read as body copy, like
   the recurring box's own label. */
.benevolencewrapper .bentable.form > .benfield.summa-file-field > div:first-child {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.benevolencewrapper .benfield.summa-file-field input[type="file"] {
	max-width: 100%;
	font-size: 13px;
}

/* display:flex on the label assumed the checkbox was nested INSIDE it —
   wrong (same as the note, the checkbox is a sibling: <input><label>...),
   so flex blockified the label and pushed it onto its own line below the
   checkbox instead of beside it. Plain inline flow + vertical-align works
   regardless of that nesting question, since it doesn't depend on the
   checkbox and title sharing a flex container at all. */
.benevolencewrapper .benrecurring label {
	font-size: 15px !important;
	font-weight: 500;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.benevolencewrapper .benrecurring input[type="checkbox"] {
	vertical-align: middle;
}

.benevolencewrapper .summa-recurring-note {
	display: block;
	margin: 2px 0 0 26px;
	font-size: 13px;
	color: var(--summa-text-muted);
}

/* Frequency radios → small pills, same pattern as the donation levels */
.benevolencewrapper .benrecurring #recurringdiv td {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 8px 8px 0 0;
	padding: 0 !important;
}

.benevolencewrapper .benrecurring #recurringdiv input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	margin: 0;
	cursor: pointer;
}

.benevolencewrapper .benrecurring #recurringdiv label {
	display: block;
	padding: 7px 16px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: 999px;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.benevolencewrapper .benrecurring #recurringdiv label:hover {
	border-color: var(--summa-accent);
}

.benevolencewrapper .benrecurring #recurringdiv input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* Selected pill — :has() version. */
.benevolencewrapper .benrecurring #recurringdiv td:has(input:checked) label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Selected pill — .summa-selected fallback set by form-enhance.js. */
.benevolencewrapper .benrecurring #recurringdiv td.summa-selected label {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* "Optimize for recurring gifts" (block setting): a new frequency picker
   (setupRecurringOptimized() in form-enhance.js, styled by the generic
   .summa-gate rules above) replaces this box as the only visible/reachable
   control — the vendor's own checkbox/label/#recurringdiv stay in the DOM
   and fully wired (driven behind the scenes via selectFrequency()) for the
   postback and updatePaymentTotalsNew(), but are visually hidden here and
   taken out of tab order/the a11y tree in JS (aria-hidden + tabindex="-1")
   so a keyboard/screen-reader donor doesn't land on an invisible duplicate.
   position:absolute (not display:none) so the vendor's own inline
   `.css('display', ...)` toggle on #recurringdiv keeps working unhindered. */
/* Hides the WHOLE container rather than hand-picking the checkbox/label/
   #recurringdiv individually — some vendor forms wrap the checkbox+label in
   an extra plain <div> (e.g. <div style="margin-top:8px"><input><label>),
   which broke a `> input`/`> label` child-combinator version of this rule:
   the selector matched nothing, so the native checkbox and note stayed
   visible right under the picker. Clipping the container itself is immune
   to whatever wrapper divs a given form happens to render around it. */
.benevolencewrapper .benrecurring.summa-recurring-relocated {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	background: none;
}

/* Frequency rules (setupFrequencyRules()/setupDonationLevels() in
   form-enhance.js): rule-hidden frequency radios + labels, surplus donation
   presets while a shorter per-frequency level set is active, and the whole
   recurring box once every recurring frequency is disabled (a one-time-only
   form). Plain display:none, no !important — the vendor's own show/hide
   toggle only ever touches #recurringdiv's inline style, never these
   elements, so nothing vendor-owned needs to win here. Doubled class for
   specificity over vendor structural rules (stylesheet-order convention). */
.benevolencewrapper.benevolencewrapper .summa-freq-hidden,
.benevolencewrapper.benevolencewrapper .summa-donlevel-hidden,
.benevolencewrapper.benevolencewrapper .benrecurring.summa-recurring-all-hidden {
	display: none;
}

/* The pill rules above carry the #recurringdiv ID, which outranks any
   class-only selector — restate the hide inside that scope so a rule-hidden
   pill (input, label, or its wrapping td where the table layout has one)
   actually loses its display:block/inline-block. */
.benevolencewrapper .benrecurring #recurringdiv .summa-freq-hidden {
	display: none;
}

/* Smart-ask nudge: offered inline right below the amount once a one-time
   gift crosses the block's configured threshold (updateRecurringAsk() in
   form-enhance.js), one click away from switching to the smaller suggested
   monthly amount. Same boxed language as the shared "optional choice"
   callout above, but its own accent-tinted variant so it reads as a
   suggestion rather than a plain settings box. */
.benevolencewrapper .summa-recurring-ask {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 var(--summa-space-md);
	padding: 12px 16px;
	background: var(--summa-surface-subtle);
	border: 1px dashed var(--summa-accent);
	border-radius: var(--summa-radius);
	font-size: 14px;
}

.benevolencewrapper .summa-recurring-ask-amount {
	font-weight: 700;
}

.benevolencewrapper button.summa-recurring-ask-btn {
	flex: 0 0 auto;
	padding: 8px 16px;
	background: var(--summa-accent);
	border: 1px solid var(--summa-accent);
	border-radius: var(--summa-radius);
	font-size: 13px;
	font-weight: 650;
	font-family: inherit;
	color: var(--summa-accent-text);
	cursor: pointer;
}

.benevolencewrapper button.summa-recurring-ask-btn:hover {
	filter: brightness(0.94);
}

.benevolencewrapper button.summa-recurring-ask-btn:focus-visible {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* Employer matching gift (Double the Donation widget): neutralize the stray
   vertical space its own styles bring so the gap ABOVE matches the rest of
   the section's sublabel rhythm, but still guarantee the standard
   --summa-space-md gap BELOW — nothing else here provides it, so leaving
   this at margin:0 on all sides left zero space before whatever follows. */
.benevolencewrapper #dd-company-name-input {
	margin: 0 0 var(--summa-space-md) !important;
}

.benevolencewrapper #dd-company-name-input > *:first-child {
	margin-top: 0 !important;
}

/* Honor roll: air between the "Show on honor roll" checkbox and the
   name/message fields below it. */
.benevolencewrapper .benhonorrolldiv .bentable.form {
	margin-top: 12px !important;
}

/* .bencommitmentagree's callout styling lives in the shared "optional
   choice" rule above; it's placed as a full-width grid item by the
   .bentable.form > .bencommitmentagree rule further up. */

/* ------------------------------------------------------------------ */
/* Team create/join panels                                             */
/* ------------------------------------------------------------------ */

.benevolencewrapper.benevolencewrapper .bencreatesearchteam > div {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.benevolencewrapper .bencreatesearchteam > div > div {
	flex: 1 1 260px;
	width: auto !important;
	padding: 18px !important;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
}

/* The panels' own "Create a team"/"Join a team" headings (and the copy the
   vendor re-renders inside the selected-team box) duplicate our choice
   cards — the cards already carry those labels. */
.benevolencewrapper .bencreatesearchteam .heading2,
.benevolencewrapper .benselectedteam .heading2 {
	display: none;
}

.benevolencewrapper .bencreatesearchteam table {
	margin: 0 !important;
}

/* Flatten the label-left table layout: label above input, like every other
   field on the form. */
.benevolencewrapper.benevolencewrapper .bencreatesearchteam td {
	display: block;
	width: auto;
	padding: 3px 0 !important;
	text-align: left !important;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.benevolencewrapper .bencreatesearchteam input[type="text"] {
	width: 100%;
}

/* The create panel's "Team Category" row butts right up against the name
   field above it — give it the same field-to-field rhythm as the rest of
   the form (the flattened td rule above only leaves 3px). */
.benevolencewrapper.benevolencewrapper .bencreatesearchteam tr[id$="benteamcreateteamcategories_tr"] > td:first-child {
	padding-top: 18px !important;
}

/* Join panel search: the vendor's Search control lives beside the field
   (form-enhance.js builds the shell); the placeholder carries the label.
   Same beside-the-field layout as the promo code's Apply button, not an
   overlay pill inside the input — one consistent "field + action button"
   pattern across the form. */
.benevolencewrapper.benevolencewrapper .summa-team-search {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.benevolencewrapper .summa-team-search input[type="text"] {
	flex: 1 1 auto;
}

.benevolencewrapper.benevolencewrapper .summa-team-search-btn {
	display: inline-block;
	flex: 0 0 auto;
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 22px;
	background: var(--summa-accent);
	border: none;
	border-radius: var(--summa-radius);
	font-family: inherit;
	font-size: 14px;
	font-weight: 550;
	letter-spacing: 0;
	color: var(--summa-accent-text);
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.benevolencewrapper.benevolencewrapper .summa-team-search-btn:hover {
	background: var(--summa-accent-hover);
}

/* Team search results: tappable rows instead of a bare link list */
.benevolencewrapper .benJoinTeamResults {
	margin: 12px 0 0 !important;
}

.benevolencewrapper .benJoinTeamResults a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--summa-radius);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.benevolencewrapper .benJoinTeamResults a:hover {
	background: var(--summa-surface-subtle);
}

.benevolencewrapper .benJoinTeamResults td {
	padding: 0 !important;
}

/* Selected-team confirmation ("Team NDi · Change"): once a team is chosen
   or created, form-enhance.js (syncSelectedTeam) tags the box so it reads
   as a centered success alert instead of a stray line of text. The class
   rides only while the vendor has content in the box — the empty container
   must never show as a hollow box. */
.benevolencewrapper .benselectedteam.summa-team-confirm {
	margin: 0 0 var(--summa-space-md);
	padding: 14px 18px;
	background: var(--summa-success-bg);
	border: 1px solid var(--summa-success-border);
	border-radius: var(--summa-radius);
	text-align: center;
	font-weight: 600;
	color: var(--summa-success);
}

.benevolencewrapper .benselectedteam.summa-team-confirm::before {
	content: "✓";
	margin-right: 8px;
	font-weight: 700;
}

/* The Change/Remove action stays visibly a link but keeps the alert's tone —
   brand red inside the green box would read as an error. */
.benevolencewrapper .benselectedteam a,
.benevolencewrapper.benevolencewrapper .benselectedteam .summa-action-link {
	margin-left: 10px;
	color: var(--summa-success);
	font-weight: 500;
}

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

/* The vendor inlines `max-width: 740px; margin: auto` on the payment wrap;
   !important is safe here because that inline style is static (never a
   show/hide toggle), and the section should fill the form column. */
.benevolencewrapper.benevolencewrapper .benbsccwrap {
	max-width: none !important;
}

/* Express wallets first, then an "or pay with card" divider, then the card
   fields — mirrors modern checkout order without moving any vendor DOM
   (flex `order` only). */
.benevolencewrapper.benevolencewrapper .benbspaymentswrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.benevolencewrapper .benbspaymentswrap [data-bluesnap="walletButton"] {
	order: 1;
	margin: 0 !important;
}

.benevolencewrapper #paypal-button-container {
	order: 2;
	margin: 0 !important;
}

/* Promo code (form-enhance.js setupPromoCode) is a plain block sibling
   placed above #benformprocessingfee (or the wallets, if no fee row exists)
   — same reasoning as the fee checkbox: a discount changes the total, so it
   must resolve before a donor authorizes a fixed amount via an express
   wallet. It shares the callout's own margin, so no order/flex needed here. */
.benevolencewrapper .summa-promo .bentableheading {
	display: none;
}

/* The vendor's usual "label above input" field layout doesn't apply here —
   this is a single row: input grows, Apply button hugs its content. The box
   already supplies its own padding on all sides, so the row's normal
   block-margin-bottom (18-20px, meant for stacking multiple field rows)
   would just add dead space below the only row here — zero it out. */
.benevolencewrapper.benevolencewrapper .summa-promo .bentable.form {
	display: block;
}

.benevolencewrapper.benevolencewrapper .summa-promo .bentable.form > div {
	flex-direction: row;
	gap: 10px;
	margin-bottom: 0 !important;
}

.benevolencewrapper .summa-promo input[type="button"] {
	height: 46px;
	white-space: nowrap;
}

/* Apply feedback (form-enhance.js classifyPromoFeedback) — the vendor
   writes plain, unstyled text here after the async Apply call; classified
   by wording since there's no vendor class to key off. */
.benevolencewrapper .summa-promo-feedback {
	display: block;
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: var(--summa-radius);
	font-size: 13px;
	font-weight: 500;
}

.benevolencewrapper .summa-promo-feedback-error {
	background: rgba(197, 58, 53, 0.08);
	color: var(--summa-brand);
}

.benevolencewrapper .summa-promo-feedback-success {
	background: rgba(35, 134, 54, 0.1);
	color: #1a7431;
}

.benevolencewrapper.benevolencewrapper .benbspaymentswrap > .bentable {
	order: 3;
}

.benevolencewrapper .benbspaymentswrap > .bentable::before {
	content: "Or pay with card";
	display: block;
	margin: 6px 0 12px;
	text-align: center;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

.benevolencewrapper.benevolencewrapper .benbspaymentswrap .bentable > div {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* Hide the vendor's fixed-width spacer divs between the card fields —
   the flex gap replaces them. */
.benevolencewrapper .benbspaymentswrap .bentable > div > div[style*="width: 10px"] {
	display: none;
}

/* BlueSnap renders a bordered input INSIDE each hosted-field iframe, so the
   containers themselves stay chrome-free — one border per field, not two. */
.benevolencewrapper .benbspaymentswrap [data-bluesnap="ccn"],
.benevolencewrapper .benbspaymentswrap [data-bluesnap="exp"],
.benevolencewrapper .benbspaymentswrap [data-bluesnap="cvv"] {
	height: 46px;
	padding: 0;
	background: transparent;
	border: none;
	flex: 1 1 auto;
}

.benevolencewrapper .benbspaymentswrap [data-bluesnap="ccn"] {
	flex: 2 1 auto;
}

.benevolencewrapper .benbsachwrap {
	border-color: var(--summa-border) !important;
	border-radius: var(--summa-radius-lg) !important;
}

/* Vendor actions emitted as bare text ("Sign in to select saved payment
   methods", "Select a different company", "Show All") — tagged by
   form-enhance.js so they read as the actions they are. */
.benevolencewrapper.benevolencewrapper .summa-action-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--summa-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.benevolencewrapper .benformpayment .summa-action-link {
	margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Processing fee + total/submit bar                                   */
/* ------------------------------------------------------------------ */

/* #benformprocessingfee's callout styling lives in the shared "optional
   choice" rule above. Moved by form-enhance.js (setupProcessingFee) to sit
   ABOVE the express wallet buttons, so the fee decision is locked in before
   a donor engages Google Pay/Apple Pay/PayPal — those authorize a fixed
   amount on click, and toggling this after the fact would silently
   invalidate that amount. */

/* Borderless footer bar — the submit button IS the bar now, so no divider. */
.benevolencewrapper form > .table.full {
	margin-top: 24px;
	border: none !important;
}

.benevolencewrapper.benevolencewrapper form > .table.full > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Every footer child (error line, submit) takes the full row. */
.benevolencewrapper form > .table.full > div > div {
	width: auto !important;
	padding: 0 !important;
	flex: 1 1 100%;
}

/* The vendor's "Total: $X" line is hidden — the amount rides on the submit
   button instead (form-enhance.js updateSubmitLabel). The node stays in the
   DOM: the vendor keeps writing the total there, and our observers mirror it
   into the sidebar and the button label. */
.benevolencewrapper.benevolencewrapper .benformtotalwrapper {
	display: none;
}

/* Submit: the one brand-red action on the page, full width, carrying the
   total in its label ("Submit · $500.00" — form-enhance.js). */
.benevolencewrapper input[name="b_form_submit"] {
	display: block;
	width: 100%;
	padding: 14px 36px !important;
	font-size: 16px !important;
	background: var(--summa-brand) !important;
	border-color: var(--summa-brand) !important;
}

.benevolencewrapper input[name="b_form_submit"]:hover {
	background: var(--summa-brand-hover) !important;
	border-color: var(--summa-brand-hover) !important;
}

.benevolencewrapper .benformerror {
	font-size: 14px;
}

/* Alert banners: the reg-type group's "This field is required" (relocated
   by setupRegTypeErrorMessage() to sit under the Registration heading), the
   submit-area "A required field is missing" (relocated by
   setupFormErrorAlert() to sit above the button), and the plugin-authored
   formTotalRule message (setupFormTotalRule(), also above the button) —
   same shared look, empty until populated. */
.benevolencewrapper .summa-regtype-error,
.benevolencewrapper .summa-form-alert,
.benevolencewrapper .summa-form-total-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--summa-space-md);
	padding: 10px 14px;
	background: color-mix(in oklab, var(--summa-error) 8%, var(--summa-surface));
	border: 1px solid color-mix(in oklab, var(--summa-error) 35%, var(--summa-surface));
	border-radius: var(--summa-radius);
}

/* One shared text style for the reg-type/form-error banners' inner message —
   a <label> in one case, a <span class="benformerror"> (vendor inline
   style="color:Red") in the other — so they can't be unified under one
   selector with their holder, but every declared property here must match
   or the two banners read as different components instead of one alert
   pattern used twice. */
.benevolencewrapper .summa-regtype-error label.beninvalid,
.benevolencewrapper .summa-form-alert .benformerror {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
	color: var(--summa-error) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

/* formTotalRule's banner has no vendor element to relocate — its text sits
   directly on the holder set by the box rule above, so only the text
   properties (not display/margin/padding, already set there) are needed. */
.benevolencewrapper .summa-form-total-alert {
	color: var(--summa-error);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.benevolencewrapper .summa-alert-empty {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Gates (participation choice) + hidden-state utility classes         */
/* ------------------------------------------------------------------ */

/* Our own classes, toggled ONLY by our own JS on wrappers the vendor
   never toggles — !important is safe here. */
.summa-gated-off,
.benevolencewrapper .summa-gated-off,
.benevolencewrapper .summa-dup-heading,
.benevolencewrapper .summa-amount-hidden {
	display: none !important;
}

/* Custom field hidden by an editor-defined conditional rule (block setting).
   Independent of the vendor's own `hidden` class — a field shows only when
   BOTH are absent, so we never fight updateRegFieldsNew(). */
.benevolencewrapper .benfield.summa-cond-hidden {
	display: none !important;
}

/* Giving-area blocks that render empty in this config (no text, no visible
   controls) still take their block margins — form-enhance.js re-checks and
   toggles this class each pass, so a block the vendor fills later returns. */
.benevolencewrapper .summa-empty-block {
	display: none !important;
}

/* Hidden visually but kept for screen readers (e.g. the join panel's
   "Team Name:" label once the placeholder carries it). */
.benevolencewrapper .summa-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}

@keyframes summa-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.benevolencewrapper .summa-revealed {
	animation: summa-reveal 0.25s ease;
}

.benevolencewrapper .summa-gate {
	margin: 0 0 var(--summa-space-md);
}

.benevolencewrapper .summa-gate-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.benevolencewrapper button.summa-gate-btn {
	padding: 10px 18px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	font-size: 14px;
	font-weight: 550;
	font-family: inherit;
	color: var(--summa-text);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.benevolencewrapper button.summa-gate-btn:hover {
	border-color: var(--summa-accent);
}

.benevolencewrapper button.summa-gate-btn:focus-visible {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

.benevolencewrapper button.summa-gate-btn.summa-gate-btn-active {
	background: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Team participation choice: bigger card-style options with descriptions */
.benevolencewrapper .summa-gate-team .summa-gate-btn {
	flex: 1 1 180px;
	padding: 14px 16px;
	border-radius: var(--summa-radius-lg);
}

.benevolencewrapper .summa-gate-btn-title {
	display: block;
	font-weight: 650;
}

.benevolencewrapper .summa-gate-btn-desc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.75;
}

.benevolencewrapper .summa-gate .summa-sublabel {
	margin: 26px 0 10px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

/* ------------------------------------------------------------------ */
/* Order-summary sidebar                                               */
/* ------------------------------------------------------------------ */

.benevolencewrapper .summa-summary {
	padding: 22px 24px;
	background: var(--summa-summary-bg);
	border-radius: var(--summa-radius-lg);
	color: var(--summa-summary-text);
	font-size: 14px;
}

.benevolencewrapper .summa-summary-heading {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 14px;
}

.benevolencewrapper .summa-summary-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

/* Due today sits right under the heading; the line items explain it below. */
.benevolencewrapper .summa-summary-due {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.benevolencewrapper .summa-summary-total {
	font-size: 24px;
	font-weight: 800;
}

/* "+ $500.00/mo recurring" — the parenthetical the vendor appends to its
   total, split out by form-enhance.js so the big figure stays one number. */
.benevolencewrapper .summa-summary-recurring {
	margin-top: 2px;
	font-size: 13px;
	text-align: right;
	opacity: 0.75;
}

/* rgba fallback assumes the built-in dark bg/white text pair; color-mix
   keys off currentColor so the hairline/wash still read correctly once
   theme_summary_bg (or the primary color) makes summary-text dark-on-light. */
.benevolencewrapper .summa-summary-lines {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid color-mix(in oklab, currentColor 20%, transparent);
}

.benevolencewrapper .summa-summary-note {
	margin-top: 14px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.08);
	background: color-mix(in oklab, currentColor 8%, transparent);
	border-radius: var(--summa-radius);
	font-size: 13px;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Popups (login / forgot password / confirmations)                    */
/* ------------------------------------------------------------------ */

/*
 * Vendor popup anatomy: benShowPopup() relocates each popup wrapper to
 * <body> (re-tagging it .benevolencewrapper.benpopuprelocated) and
 * re-appends it on EVERY show, so DOM order in <body> is always
 * "most recently opened last":
 *
 *   body > #benFormLogin.hideshow.benevolencewrapper.benpopuprelocated
 *     ├─ … .benfade      — full-screen scrim (vendor z 2147483645)
 *     └─ … .popup_block  — dialog card       (vendor z 2147483646)
 *
 * The vendor gives EVERY scrim/card those same two z-indexes in one
 * shared stacking context, so when a second popup opens over the first
 * (login → forgot password) its scrim slides UNDER the first popup's
 * card: the login card stays fully bright — and still clickable — with
 * nothing to say a new layer opened. Giving scrim and card the SAME
 * z-index makes painting follow DOM order instead: a card still paints
 * above its own scrim (the scrim precedes it in the markup), and a
 * later-opened popup paints wholly above every earlier one, scrim
 * included — so the scrim dims the popup underneath and swallows clicks
 * to it, at any stacking depth, with no layout change vendor code could
 * trip over.
 */
body > .benevolencewrapper.benpopuprelocated .fade,
body > .benevolencewrapper.benpopuprelocated .benfade,
body > .benevolencewrapper.benpopuprelocated .popup_block {
	z-index: 2147483646;
}

/* Softer, blurred scrim instead of the vendor's flat 70% black. Stacked
   scrims compound (55% → ~80% behind two layers), so each level reads
   one step further back. */
body > .benevolencewrapper.benpopuprelocated .fade,
body > .benevolencewrapper.benpopuprelocated .benfade {
	background: #10151d;
	opacity: 0.55;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Show/hide is inline visibility+opacity from the vendor; a transition
   turns the instant pop into a quick fade. */
body > .benevolencewrapper.benpopuprelocated {
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* The dialog card. Radius/shadow sit on .popup_block (the outer white
   box) so no square white corners poke out behind the rounded .popup
   inside it. translateY rides the card down from the vendor's inline
   "50px below the viewport top" to a comfortable modal position.
   .bendonationpopupwrap is the vendor's transparent floating donation
   widget — leave its geometry alone. */
body > .benevolencewrapper.benpopuprelocated .popup_block:not(.bendonationpopupwrap) {
	background: var(--summa-surface);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 24px 64px rgba(10, 15, 22, 0.35);
	transform: translateY(5vh);
	transition: transform 0.25s ease, filter 0.25s ease;
}

.benevolencewrapper .popup_block .popup,
.benpopuprelocated .popup_block .popup {
	background: var(--summa-surface);
	border-radius: var(--summa-radius-lg);
	padding: 24px 28px 26px;
}

/* Neither auth popup carries an inline width, so the vendor's stylesheet
   625px applies — far too wide for a login form or a single field.
   Narrow them, with the negative margin tracking width/2 to keep the
   vendor's left:50% centering. */
body > #benFormLogin.benpopuprelocated .popup_block,
body > #benForgotPassword.benpopuprelocated .popup_block {
	width: min(420px, calc(100vw - 32px));
	margin-left: max(-210px, calc((100vw - 32px) / -2));
}

/* ------------------------------------------------------------------ */
/* Popup dialog chrome — classes applied by form-enhance.js's polish   */
/* ------------------------------------------------------------------ */

/* Rows retired from the vendor login control (in dialogs and inline on
   MyHQ): the Facebook button + OR divider when the site-level "Facebook
   Login" setting is Hide, and the vendor's bottom Close button, which
   the corner X supersedes (it stays in the DOM — closePopupLayer()
   still clicks it so vendor dismiss logic runs). These rows are never
   display-toggled by vendor JS, so hiding them doesn't fight any
   inline styles. */
.benevolencewrapper.benevolencewrapper .summa-popup-hidden {
	display: none;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-title {
	margin: 0 40px 16px 0; /* right gap clears the corner X */
	font-family: var(--summa-heading-font);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--summa-heading-color);
}

/* Corner X — the one dismiss affordance every layer gets (with Esc and
   scrim click). Plain button element, so the vendor's input/.button
   styling can't reach it. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-x {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--summa-text-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-x:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-x:focus-visible {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* The vendor's own image-X (some confirmation popups) would collide
   with ours; hidden, it remains programmatically clickable as a
   closePopupLayer() fallback. */
body > .benevolencewrapper.benpopuprelocated .popup img.cntrl {
	display: none;
}

/* "Double field" fix: the vendor wraps each login input in its own
   inline-bordered, inline-padded div — a border around our bordered
   input. Inline styles only yield to !important. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-fieldwrap {
	padding: 0 !important;
	border: none !important;
}

/* Stacked label + full-width field (forgot popups; the vendor inlines
   width: 200px on the input). Label matches the main form's small-caps
   field labels. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-fieldlabel {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text);
}

/* The login popup's fields carry the same inline vendor width, so they
   join the forgot-popup rule here. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-fieldrow input.textbox,
body > .benevolencewrapper.benpopuprelocated .ben_loginstatus_login input.textbox {
	width: 100% !important;
}

/* The vendor's display:table login layout is capped at max-width: 236px
   (plus `#benFormLogin .ben_login { width: auto }` from an injected ID
   rule), so the fields can't grow no matter their own width — stretch it
   so the login fields fill the dialog like the forgot popups'. */
body > .benevolencewrapper.benpopuprelocated .ben_loginstatus_login {
	width: 100% !important;
	max-width: none !important;
}

/* Actions: full-width primary with Cancel as a quiet link below it. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 20px;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-actions input[type="button"] {
	width: 100%;
}

/* Cancel sheds its button chrome and reads as a text link — !important
   because the base button rules (and their :hover) set background/
   border/color with !important. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-actions input.cancel {
	width: auto;
	align-self: center;
	padding: 0;
	background: none !important;
	border: none !important;
	border-radius: 0;
	color: var(--summa-text-muted) !important;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-actions input.cancel:hover {
	background: none !important;
	border: none !important;
	color: var(--summa-text) !important;
}

/* Facebook button + OR divider polish (when not hidden). */
body > .benevolencewrapper.benpopuprelocated .ben_loginstatus_login a[id*="FacebookLoginLink"] img {
	display: block;
	border-radius: var(--summa-radius);
}

body > .benevolencewrapper.benpopuprelocated .ben_loginstatus_login hr {
	margin: 0;
	border: none;
	border-top: 1px solid var(--summa-border);
}

/* Forgot password? / Forgot username? — one centered, quiet link row. */
body > .benevolencewrapper.benpopuprelocated .summa-popup-links > div {
	display: flex;
	justify-content: center;
	gap: 22px;
	padding-top: 14px;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-links a {
	font-size: 13px;
	font-weight: 500;
	color: var(--summa-text-muted);
	/* The vendor's table-cell wrappers squeeze these to their 50% track,
	   breaking "Forgot password?" onto two lines. */
	white-space: nowrap;
}

body > .benevolencewrapper.benpopuprelocated .summa-popup-links a:hover {
	color: var(--summa-text);
}

/* ------------------------------------------------------------------ */
/* Login control, every non-popup placement (summa/login block AND     */
/* inline on MyHQ when logged out)                                     */
/* ------------------------------------------------------------------ */

/* RULE: the login control renders in exactly ONE shape everywhere it
   appears outside a popup — the standalone summa/login block and MyHQ's
   inline login (and any future placement) MUST look identical, because a
   participant reasonably expects "the same form." Style ONLY against the
   vendor's own .ben_loginstatus_login class, never gated by which
   .benevolencewrapper hosts it (id, page, block) — a host-specific rule
   here is how these two silently drift apart. `:not(.hideshow)` excludes
   popup controls (#benFormLogin) before they're ever shown; relocated ones
   are excluded by :not(.benpopuprelocated) — popups keep their own dialog
   chrome (dialog.md), by design a different presentational context. */
.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login {
	/* Vendor's display:table login layout is centerable via margin:auto
	   like any table; stretch+cap replaces its own ~236px inline cap so
	   the control matches the same width wherever it's mounted, whether
	   the host wrapper is a narrow standalone block or MyHQ's full-width
	   page column. */
	width: 100% !important;
	max-width: 400px !important;
	margin: 0 auto !important;
	/* Pinned rather than inherited: MyHQ's #benHome.benevolencewrapper sets
	   font-size: 14px for its own page furniture, which would otherwise
	   make its login control read smaller than the standalone block's. */
	font-size: 15px;
	line-height: 1.55;
}

.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login input.textbox {
	width: 100% !important;
}

/* "Double field" fix, same as the login popup's: the vendor wraps each
   input in its own inline-bordered, inline-padded div — the only divs in
   this control carrying an inline border. Inline styles only yield to
   !important. */
.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login div[style*="border"] {
	padding: 0 !important;
	border: none !important;
}

/* Facebook button + OR divider polish (when the site setting shows them). */
.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login a[id*="FacebookLoginLink"] img {
	display: block;
	border-radius: var(--summa-radius);
}

.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login hr {
	margin: 0;
	border: none;
	border-top: 1px solid var(--summa-border);
}

/* Forgot password? / Forgot username? — one centered, quiet link row.
   Structurally the control's last row (the vendor renders no rows after
   it), since no JS tags it here. */
.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login > div:last-child > div {
	display: flex;
	justify-content: center;
	gap: 22px;
	padding-top: 14px;
}

.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login > div:last-child a {
	font-size: 13px;
	font-weight: 500;
	color: var(--summa-text-muted);
	white-space: nowrap;
}

.benevolencewrapper:not(.hideshow):not(.benpopuprelocated) .ben_loginstatus_login > div:last-child a:hover {
	color: var(--summa-text);
}

/* MyHQ's OWN button system (#benHome .button below, sentence-case per its
   page mock) would otherwise make this control's Login button render
   smaller and sentence-case there while staying uppercase/14px on the
   standalone block — the exact drift the parity rule above exists to
   prevent. #benHome is a fixed vendor id, so scoping the override to it
   (plus the extra `input` type selector, for specificity over #benHome
   .button.small) beats it outright — !important kept anyway per this
   file's convention for such overrides. */
#benHome .ben_loginstatus_login input.button {
	padding: 11px 22px !important;
	font-size: 14px !important;
	font-weight: 550 !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
}

/* "Don't have an account? Register…" prompt — plugin markup inside the
   block's own container (see the summa/login intro builder), aligned to
   the same centered 400px column as the form below it. */
.wp-block-summa-widget .summa-login-register {
	max-width: 400px;
	margin: 0 auto 18px;
	text-align: center;
	font-family: var(--summa-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--summa-text);
}

/* Phones: pin the card to the viewport edges — the vendor's fixed
   widths and negative-margin centering (inline on the login popup)
   otherwise overflow small screens. */
@media (max-width: 680px) {
	body > .benevolencewrapper.benpopuprelocated .popup_block:not(.bendonationpopupwrap) {
		left: 16px !important;
		right: 16px;
		width: auto !important;
		margin: 0 !important;
	}
}

/* A popup with another one open above it steps back — scaled down and
   dimmed beneath the upper scrim, the standard stacked-sheet depth cue.
   The .summa-popup-under/-top classes come from form-enhance.js's stack
   manager, NOT from a :has() sibling selector: the forgot-password popup
   never changes any inline style when it opens/closes (it's "shown" by
   loading content in and hidden by emptying), so no attribute selector
   can observe it — only script watching for a visible .popup_block can.
   The z-index layering fix above works without JS either way. */
body > .benevolencewrapper.benpopuprelocated.summa-popup-under .popup_block:not(.bendonationpopupwrap) {
	transform: translateY(5vh) scale(0.96);
	filter: brightness(0.8);
}

/* Entrance: the card rises the last few px while scrim and card fade in.
   .summa-popup-enter is added once per fresh open (and removed on close),
   so promoting a layer back to top — closing "Forgot password?" returns
   you to login — transitions smoothly instead of re-animating. */
@keyframes summa-popup-in {
	from {
		opacity: 0;
		transform: translateY(calc(5vh + 14px)) scale(0.98);
	}
}

@keyframes summa-scrim-in {
	from {
		opacity: 0;
	}
}

body > .benevolencewrapper.benpopuprelocated.summa-popup-enter .popup_block:not(.bendonationpopupwrap) {
	animation: summa-popup-in 0.22s ease;
}

body > .benevolencewrapper.benpopuprelocated.summa-popup-enter .fade,
body > .benevolencewrapper.benpopuprelocated.summa-popup-enter .benfade {
	animation: summa-scrim-in 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
	body > .benevolencewrapper.benpopuprelocated,
	body > .benevolencewrapper.benpopuprelocated .fade,
	body > .benevolencewrapper.benpopuprelocated .benfade,
	body > .benevolencewrapper.benpopuprelocated .popup_block {
		transition: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Volunteer HQ (#benVolunteer): logged-out "Sign Up" CTA              */
/* ------------------------------------------------------------------ */

/* Below the login control, the vendor renders "Sign Up To Volunteer" as a
   bare <div style="max-width:236px"> (no auto margins) — it sits flush
   left while .ben_loginstatus_login above it centers to a 400px column
   (see the Login control section), so the two visibly don't line up.
   #benVolunteer > div is a safe hook: the login form is a sibling <form>,
   not a <div>, so this is the vendor's only direct-child div here (in the
   logged-out state) besides those excluded below. Inline vendor styles
   only yield to !important.

   :not(.hometabpanel):not(#benhomeheaderwrap) excludes the LOGGED-IN
   dashboard: once a volunteer logs in, the vendor swaps this whole
   control for a #benhomeheaderwrap (tab nav) plus three .hometabpanel
   divs (Home/Schedule/Logging) — also direct children of #benVolunteer —
   which need to use the page's full width, not the login column's 400px.
   See the Volunteer HQ dashboard section below. */
#benVolunteer > div:not(.hometabpanel):not(#benhomeheaderwrap) {
	max-width: 400px !important;
	margin: 20px auto !important;
}

/* ------------------------------------------------------------------ */
/* Volunteer HQ dashboard (#benVolunteer, logged in): schedule table   */
/* ------------------------------------------------------------------ */

/* Tab-bar chrome (#benhomeheaderwrap/.benhomebuttonsv2/.hometabv2/
   .hometabpanel) is styled by the MyHQ page section below, which
   #benVolunteer joins directly — see the comment there. This section
   covers what's unique to Volunteer HQ: the Home/Schedule/Logging tab
   nav's "Log out" link, the schedule list, the confirm/logging tables,
   the FullCalendar month view, and the filter dialog (all confirmed
   against the live logged-in page — the vendor ships the schedule grid's
   own layout COMMENTED OUT in its stylesheet, but its 2px #ccc per-cell
   border-top and #F6F6F4 slab ARE live). */

/* Header row: the vendor absolutely-positions "Log out" at the wrap's
   top-right corner, where it collides with the tab rail. Flexing the
   wrap and un-positioning the link (inline style → !important) centers
   it against the rail; margin-left:auto (not justify-content) keeps it
   right-aligned on phones too, where the rail leaves the flow entirely
   (vendor responsive.css turns .ben-responsive-buttons into a fixed
   bottom bar under 792px). */
#benVolunteer #benhomeheaderwrap {
	display: flex;
	align-items: center;
	gap: 18px;
}

#benVolunteer #benhomeheaderwrap > .benhomebuttonsv2 {
	flex: 1 1 auto;
	min-width: 0;
}

#benVolunteer #benhomeheaderwrap > a {
	position: static !important;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 9px 16px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--summa-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

#benVolunteer #benhomeheaderwrap > a:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
	text-decoration: none;
}

/* Every .benvoltable (schedule list, confirm table, logging table) loses
   the vendor's #F6F6F4 slab; each gets the standard card shell. */
#benVolunteer .benvoltable {
	background: var(--summa-surface);
}

#benVolunteer #benvolscheduletable,
#benVolunteer #benvolloggingtable {
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	overflow: hidden;
}

#benVolunteer .benvolschedulerow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--summa-border);
	transition: background-color 0.15s ease;
}

#benVolunteer .benvolschedulerow:hover {
	background: var(--summa-surface-subtle);
}

#benVolunteer .benvolschedulerow:first-child {
	border-top: 0;
}

/* The vendor's live `.benvoltable > div > div { padding: 8px 6px;
   border-top: solid 2px #ccc }` paints a floating gray line above EVERY
   cell once the row is flex (in table layout those borders fused into
   one row separator). Inside flex rows the row itself owns the border. */
#benVolunteer .benvolschedulerow > div {
	padding: 0;
	border-top: 0;
}

#benVolunteer .benvolscheduledate {
	flex: 0 0 84px;
	font-size: 13.5px;
	font-weight: 650;
	color: var(--summa-text);
}

#benVolunteer .benvolscheduleday {
	font-size: 12px;
	font-weight: 500;
	color: var(--summa-text-muted);
}

#benVolunteer .benvolschedulename {
	flex: 1 1 200px;
	min-width: 0;
}

#benVolunteer .benvolschedulename a {
	font-size: 14.5px;
	font-weight: 650;
	color: var(--summa-text);
	text-decoration: none;
}

#benVolunteer .benvolschedulename a:hover {
	color: var(--summa-accent);
}

#benVolunteer .benvolschedulestart {
	flex: 0 0 140px;
	font-size: 13px;
	color: var(--summa-text-muted);
	white-space: nowrap;
}

#benVolunteer .benvolscheduleneeded {
	flex: 0 0 auto;
	margin-left: auto;
}

#benVolunteer .benvolscheduleneeded span {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--summa-selected-bg);
	font-size: 12px;
	font-weight: 600;
	color: var(--summa-text-muted);
	white-space: nowrap;
}

/* Already-scheduled rows: the check cell holds the word "Scheduled"
   instead of a checkbox, and a trailing .benvolscheduleremove cell holds
   a bare "Remove" link. */
#benVolunteer .benvolschedulecheck {
	font-size: 12px;
	font-weight: 650;
	color: var(--summa-success);
}

#benVolunteer .benvolscheduleremove a {
	font-size: 13px;
	font-weight: 500;
	color: var(--summa-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#benVolunteer .benvolscheduleremove a:hover {
	color: var(--summa-error);
}

/* Schedule / Calendar / Filter action row below the table (vendor:
   .bentable.full > div > div, one div text-align:left, one :right).
   Scoped to #benVolunteer — .bentable.full is also used unrelated to
   this dashboard elsewhere (MyHQ's contacts tab). */
#benVolunteer .bentable.full > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
}

#benVolunteer .bentable.full > div > div {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* --- Confirm Your Selection --- */

/* The confirm step reuses MyHQ's card vocabulary (.benmyhqcard /
   .benmyhqheadings) but mounts inside #benVolunteer, where the #benHome-
   scoped card rules below don't reach — mirror the same card + title
   treatment here (max-width: none lifts the vendor's 800px card cap,
   same as MyHQ's own container reset). */
#benVolunteer .benmyhqcard {
	max-width: none;
	margin: 0 0 16px !important;
	padding: 22px 24px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
}

#benVolunteer .benmyhqheadings {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--summa-heading-color);
	text-align: left;
	margin: 0 0 14px;
}

/* Its rows are anonymous vendor table-rows (no .benvolschedulerow class),
   so table display stands and cells keep the columns aligned — restyle
   the vendor's 2px #ccc cell chrome into the standard hairline table.
   Double-ID scope outguns the vendor's (0,1,2) cell rule. */
#benVolunteer #benvolconfirmtable > div > div {
	padding: 12px 14px;
	border-top: 1px solid var(--summa-border);
	font-size: 14px;
}

#benVolunteer #benvolconfirmtable > div:first-child > div {
	border-top: 0;
}

#benVolunteer #benvolconfirmtable .benvolschedulename {
	font-weight: 650;
	width: 40%;
}

#benVolunteer #benvolconfirmtable .benvolschedulestart,
#benVolunteer #benvolconfirmtable .benvolscheduleend {
	color: var(--summa-text-muted);
	white-space: nowrap;
}

/* Confirm (primary) then Cancel: the vendor gives both the same bare
   .summabutton and no .cancel class, so the second-of-pair adjacent
   sibling IS the Cancel — demote it to the standard secondary button
   (paired states per CLAUDE.md; !important mirrors the base .button
   rule it overrides). */
#benVolunteer .benmyhqcard a.summabutton {
	margin: 0 8px;
}

#benVolunteer .benmyhqcard a.summabutton + a.summabutton {
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1px solid var(--summa-border-strong) !important;
}

#benVolunteer .benmyhqcard a.summabutton + a.summabutton:hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-border-strong) !important;
}

/* --- Logging table --- */

/* Same anonymous-table-row shape as the confirm table; the first row is
   the header (Scheduled Time / Time In / Time Out / Total). DESIGN.md
   tables: small-caps muted header labels over a border-strong hairline,
   hairline body rows. */
#benVolunteer #benvolloggingtable > div > div {
	padding: 12px 14px;
	border-top: 1px solid var(--summa-border);
	font-size: 14px;
}

#benVolunteer #benvolloggingtable > div:first-child > div {
	padding: 12px 14px;
	border-top: 0;
	border-bottom: 1px solid var(--summa-border-strong);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

#benVolunteer #benvolloggingtable > div:nth-child(2) > div {
	border-top: 0;
}

/* --- Calendar view (FullCalendar v6, .fc-theme-standard) --- */

/* Themed through FullCalendar's own CSS custom properties where they
   exist; direct rules only where FC has no hook (it shares one
   --fc-button-text-color across resting AND active buttons, so the
   active fill must pair its own text color explicitly). */
#benVolunteer .fc {
	--fc-border-color: var(--summa-border);
	--fc-page-bg-color: var(--summa-surface);
	--fc-neutral-bg-color: var(--summa-surface-subtle);
	--fc-today-bg-color: transparent; /* today = filled number chip below */
	--fc-button-text-color: var(--summa-text);
	--fc-button-bg-color: var(--summa-surface);
	--fc-button-border-color: var(--summa-border-strong);
	--fc-button-hover-bg-color: var(--summa-selected-bg);
	--fc-button-hover-border-color: var(--summa-border-strong);
	--fc-button-active-bg-color: var(--summa-accent);
	--fc-button-active-border-color: var(--summa-accent);
	--fc-event-bg-color: var(--summa-accent);
	--fc-event-border-color: var(--summa-accent);
	--fc-event-text-color: var(--summa-accent-text);
	margin: 4px 0 20px;
	padding: 18px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
	font-size: 13px;
}

/* The vendor sizes the month grid to the viewport (inline height on the
   view harness), yielding cavernous week rows — pin a calm fixed height
   (6 week rows ≈ 88px each; FC's internal absolute scroller handles any
   overflow). */
#benVolunteer .fc .fc-view-harness {
	height: 540px !important;
}

/* The toolbar title is an <h2>, so the host theme's display-heading
   styles (site font, size, color) land on it — pin the design system's
   card-title treatment. */
#benVolunteer .fc .fc-toolbar-title {
	margin: 0;
	font-family: var(--summa-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--summa-heading-color);
}

#benVolunteer .fc .fc-button {
	padding: 7px 14px;
	border-radius: var(--summa-radius);
	font-size: 13px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1.3;
	box-shadow: none !important;
}

/* FC fuses grouped buttons (prev/next, Month/Week/Day) with -1px overlap
   and zeroed inner corners; with every button fully rounded again that
   overlap reads as a collision — separate them into discrete buttons. */
#benVolunteer .fc .fc-button-group {
	gap: 6px;
}

#benVolunteer .fc .fc-button-group > .fc-button {
	margin: 0;
	border-radius: var(--summa-radius);
}

#benVolunteer .fc .fc-button:focus-visible {
	box-shadow: var(--summa-ring) !important;
}

/* Paired: FC's single --fc-button-text-color would leave dark-on-dark
   text when the active fill is the accent. */
#benVolunteer .fc .fc-button-primary:not(:disabled).fc-button-active,
#benVolunteer .fc .fc-button-primary:not(:disabled):active {
	background-color: var(--summa-accent);
	border-color: var(--summa-accent);
	color: var(--summa-accent-text);
}

/* Day-of-week header + day numbers render as <a> elements, which the
   generic in-wrapper link rule underlines — a calendar grid full of
   underlines reads as noise, not affordance. */
#benVolunteer .fc a {
	text-decoration: none;
}

#benVolunteer .fc .fc-col-header-cell-cushion {
	padding: 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

/* Every day number sits in a fixed round chip so today's accent fill and
   the hover wash are the same calm shape (paired colors in each state). */
#benVolunteer .fc .fc-daygrid-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	margin: 4px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--summa-text);
}

#benVolunteer .fc .fc-daygrid-day-number:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
}

#benVolunteer .fc .fc-day-other .fc-daygrid-day-number {
	color: var(--summa-border-strong);
}

#benVolunteer .fc .fc-day-today .fc-daygrid-day-number {
	background: var(--summa-accent);
	color: var(--summa-accent-text);
	font-weight: 650;
}

#benVolunteer .fc .fc-day-today .fc-daygrid-day-number:hover {
	background: var(--summa-accent-hover);
	color: var(--summa-accent-text);
}

/* --- Filter dialog --- */

/* Vendor structure inside the generic .hideshow popup chrome: a bare
   title div, a fixed-height always-scrolling list div (inline height +
   overflow-y: scroll → a permanent scrollbar beside one checkbox), and
   a footer of three bare links (Apply, Reset, Close). All three divs are
   anonymous — addressed via their distinct vendor inline styles, NOT
   :first-child/:last-child: the popup watcher (form-enhance.js) prepends
   a .summa-popup-title and appends a .summa-popup-x inside .popup at
   runtime, which silently re-seats positional selectors. */
#benvolunteerfilterpopup .popup > div[style*="font-weight: bold"] {
	margin: 0 0 4px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--summa-heading-color);
}

#benvolunteerfilterpopup .popup > div[style*="overflow-y"] {
	height: auto !important;
	max-height: 300px;
	margin: 14px 0 !important;
	overflow-y: auto !important;
}

#benvolunteerfilterpopup .benvolrolesfilterlist td {
	padding: 8px 0 !important;
}

#benvolunteerfilterpopup .benvolrolesfilterlist label {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--summa-text);
	cursor: pointer;
}

/* Footer: one primary (Apply) bottom-right, quiet siblings — the dialog
   convention (DESIGN.md). Vendor order is Apply, Reset, Close; flex
   order re-seats Apply last (rightmost) without touching the DOM. */
#benvolunteerfilterpopup .popup > div[style*="text-align: right"] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	margin-top: 16px !important;
}

#benvolunteerfilterpopup .popup > div[style*="text-align: right"] a {
	display: inline-block;
	margin: 0 !important;
	padding: 10px 18px;
	border-radius: var(--summa-radius);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--summa-text-muted);
	text-decoration: none;
}

#benvolunteerfilterpopup .popup > div[style*="text-align: right"] a:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
}

#benvolunteerfilterpopup .popup > div[style*="text-align: right"] a:first-child {
	order: 3;
	background: var(--summa-accent);
	color: var(--summa-accent-text);
}

#benvolunteerfilterpopup .popup > div[style*="text-align: right"] a:first-child:hover {
	background: var(--summa-accent-hover);
	color: var(--summa-accent-text);
}

/* --- Phones (vendor responsive.css breakpoint: 792px) --- */

/* Under 792px the vendor turns .ben-responsive-buttons into a fixed
   bottom bar (gray slab, icon + 11px label, 4px active underline,
   #737373 !important text). Restyle it as a standard translucent tab
   bar: blurred surface, top hairline, accent tint on the active item.
   The vendor's !important color forces !important pairs here. Applies
   to MyHQ's identical bar too — one control, one style. */
@media (max-width: 792px) {
	/* .ben-responsive-buttons in the scope doubles the class count: the
	   desktop pill-rail rules (#benHome/#benVolunteer .benhomebuttonsv2,
	   .hometabv2…) live in the MyHQ section LATER in this file, so an
	   equal-specificity rule here would silently lose the tie on source
	   order and the bar would keep its floating desktop-rail look. */
	#benHome .benhomebuttonsv2.ben-responsive-buttons,
	#benVolunteer .benhomebuttonsv2.ben-responsive-buttons {
		margin: 0;
		padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--summa-surface) 92%, transparent);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border: 0;
		border-top: 1px solid var(--summa-border);
		border-radius: 0;
		box-shadow: 0 -1px 2px rgba(10, 15, 22, 0.04);
	}

	#benHome .ben-responsive-buttons .hometabv2,
	#benVolunteer .ben-responsive-buttons .hometabv2 {
		padding: 4px 0 6px;
		border-bottom: 0 !important;
		border-radius: 0;
		background: transparent !important;
		color: var(--summa-text-muted) !important;
		font-size: 11px;
		font-weight: 600;
	}

	#benHome .ben-responsive-buttons .hometabv2 i,
	#benVolunteer .ben-responsive-buttons .hometabv2 i {
		font-size: 21px;
		padding-bottom: 4px;
	}

	#benHome .ben-responsive-buttons .hometabv2.active,
	#benVolunteer .ben-responsive-buttons .hometabv2.active {
		background: transparent !important;
		color: var(--summa-accent) !important;
	}

	/* Content must not end underneath the fixed bar. */
	#benHome.benevolencewrapper,
	#benVolunteer.benevolencewrapper {
		padding-bottom: 76px;
	}

	/* Schedule rows re-rack on a small grid: checkbox+date+count on the
	   first line, the shift name and time indented under them. Remove
	   (scheduled rows) sits opposite the name. */
	#benVolunteer .benvolschedulerow {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 2px 12px;
		padding: 12px 14px;
	}

	#benVolunteer .benvolschedulecheck {
		grid-row: 1;
		grid-column: 1;
	}

	/* Date stays a stacked block ("August 29, 2026" over "Saturday") —
	   laying it out inline beside the day squeezed the date into an
	   awkward two-line wrap next to the count badge. */
	#benVolunteer .benvolscheduledate {
		grid-row: 1;
		grid-column: 2;
		flex-basis: auto;
		white-space: nowrap;
	}

	#benVolunteer .benvolscheduleneeded {
		grid-row: 1;
		grid-column: 3;
		margin-left: 0;
	}

	#benVolunteer .benvolschedulename {
		grid-row: 2;
		grid-column: 2 / -1;
	}

	#benVolunteer .benvolschedulestart {
		grid-row: 3;
		grid-column: 2 / -1;
		flex-basis: auto;
	}

	#benVolunteer .benvolscheduleremove {
		grid-row: 2;
		grid-column: 3;
		justify-self: end;
	}

	/* The 8-column logging table can't compress to 390px; let the block
	   wrapper scroll sideways (its table-row children re-wrap into an
	   anonymous table inside). */
	#benVolunteer #benvolloggingtable {
		display: block;
		overflow-x: auto;
	}

	#benVolunteer .fc {
		padding: 10px;
	}

	#benVolunteer .fc .fc-toolbar {
		flex-wrap: wrap;
		gap: 8px;
	}

	#benVolunteer .fc .fc-view-harness {
		height: 420px !important;
	}
}

/* ------------------------------------------------------------------ */
/* MyHQ page (#benHome): tabs, cards, thermometers, tables             */
/* ------------------------------------------------------------------ */

/*
 * The participant headquarters (benHQ widget), skinned to the "MyHQ
 * Modern" Claude Design mock. The control loads via JSONP AFTER
 * DOMContentLoaded and its sub-controls reload independently (Redeem
 * Points swaps the whole overview panel, donation event switch...), so
 * the default is CSS on the vendor's own hooks; the few DOM changes CSS
 * can't express live in form-enhance.js's MyHQ pass, which re-runs via
 * the vendor's benHQ_Loaded / benHQOverview_Loaded callbacks and is
 * idempotent (its .summa-* nodes double as the done-guards). #benHome
 * in the scope outguns the vendor stylesheet; !important only where a
 * vendor inline style or a vendor !important must lose. The vendor
 * hides the tab icons (.hometabv2 i) — they stay hidden.
 */

/* --- containers: full width --- */

/* The mock (and the block's owners) want MyHQ to fill the content area;
   the vendor caps #benHome at 1180px, the header/panels at 1000px and
   cards at 800px, all centered. Doubled/ID scopes beat the later-loading
   vendor sheet; !important only where an inline style interferes.

   #benVolunteer joins every selector in "tab bar: pill nav" below (and
   these three container resets): the vendor renders the exact same
   #benhomeheaderwrap/.benhomebuttonsv2/.hometabv2/.hometabpanel markup
   for Volunteer HQ's logged-in Home/Schedule/Logging tabs as it does for
   MyHQ's own tabs (confirmed against live markup), so the same tab-bar
   treatment applies verbatim. The .benmyhq*-prefixed rules further below
   are MyHQ-only vocabulary — Volunteer HQ's schedule/logging panels use
   entirely different vendor classes, styled in their own section. */
#benHome.benevolencewrapper,
#benVolunteer.benevolencewrapper {
	max-width: none;
	font-size: 14px; /* the mock's base — 15px is the form surfaces' size */
}

#benHome #benhomeheaderwrap,
#benVolunteer #benhomeheaderwrap {
	max-width: none;
}

#benHome .hometabpanel,
#benVolunteer .hometabpanel {
	background: transparent; /* vendor gray slab — cards carry the surfaces */
	border-top: 0;
	padding: 0 0 60px;
	min-height: 300px;
	max-width: none;
}

#benHome .benmyhqcard,
#benHome .benmyhqsingle {
	max-width: none;
}

/* "< BACK TO UPDATES" sat directly against the card below it with no
   breathing room. */
#benHome .benmyhqsingle {
	margin-bottom: 20px;
}

#benHome .benmyhqrank,
#benHome .benmyhqoverviewheadline,
#benHome .benmyhqstoryheadline {
	max-width: none;
}

/* Regression guard: this intro line sat directly against the card below
   it with no breathing room. */
#benHome .benmyhqstoryheadline {
	margin-bottom: 24px;
	color: var(--summa-text-muted);
}

/* --- tab bar: pill nav --- */

#benHome .benhomebuttonsv2,
#benVolunteer .benhomebuttonsv2 {
	justify-content: flex-start;
	gap: 2px;
	max-width: none;
	margin: 18px 0 20px;
	padding: 6px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
	overflow-x: auto; /* many tabs / narrow screens scroll instead of wrapping */
}

#benHome .hometabv2,
#benVolunteer .hometabv2 {
	padding: 9px 16px;
	background: transparent; /* vendor paints each tab white */
	border-bottom: 0;
	border-radius: var(--summa-radius);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--summa-text-muted);
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

#benHome .hometabv2:hover,
#benVolunteer .hometabv2:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
}

/* .active outranks :hover (two classes vs class+pseudo), so the hover
   wash never strips the tint. The color-mix pair sits after a plain
   paired fallback IN THE SAME rule (CLAUDE.md). */
#benHome .hometabv2.active,
#benVolunteer .hometabv2.active {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
	background: color-mix(in oklab, var(--summa-accent) 12%, var(--summa-surface));
	color: var(--summa-accent);
	font-weight: 600; /* vendor resets active to normal */
}

/* --- cards --- */

/* The team card carries inline margin (30px auto) — hence !important. */
#benHome .benmyhqcard {
	margin: 0 0 16px !important;
	padding: 22px 24px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
}

/* --- headings: the mock's card titles are 16px/700 sentence case --- */

/* Vendor centers several of these inline — hence the !important
   alignment. */
#benHome .benmyhqheadings,
#benHome .benmyhqcard .benh1,
#benHome .benmyhqcard .benh3,
#benHome .benmyhqcard .heading2,
#benHome .benmyhqcard .heading4,
#benHome .popup .heading2 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--summa-heading-color);
	text-align: left !important;
	margin: 0 0 14px !important;
}

#benHome .benmyhqheadings {
	margin-bottom: 14px;
}

#benHome .benmyhqcard .benh1 {
	margin: 0 0 12px !important;
}

#benHome .popup .heading2 {
	margin: 0 0 14px !important;
}

/* Small-caps eyebrow labels (the mock's .lbl). */
#benHome .benmyhqstorylabel,
#benhomestory .bentable .heading2,
#benHome .emailtabpanel .heading2,
#benHome [id$="pnlGrowYourStatus"] .heading4,
#benhomecommunications .benmyhqcard > div[style*="font-weight: bold"][style*="text-align: center"] {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
	margin-bottom: 8px !important;
}

/* --- links (the mock's .link: accent, 600, 13px) --- */

/* Text actions must read as clickable even on a site that hasn't set a
   Look & Feel accent color — --summa-accent defaults to the same ink as
   --summa-text, so color alone can't carry the "this is a link" signal.
   Underline is on by default here (the mock only underlines on hover,
   but the mock's default accent is a vivid purple, not ink-on-ink). */
#benHome .benmyhqcard a:not(.button):not(.paginate_button),
#benHome .popup a:not(.button),
#benHome .benmyhqrank a {
	color: var(--summa-accent);
	font-weight: 600;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#benHome .benmyhqcard a:not(.button):not(.paginate_button):hover,
#benHome .popup a:not(.button):hover {
	color: var(--summa-accent-hover);
}

/* Vendor renders contact removal as a solid button; every other text
   action here is a quiet link, so this one shouldn't stand out as a
   heavier CTA. !important pairs mirror the base .button rule it beats. */
#benHome .emailtabpanel input[type="button"][value="Remove"] {
	min-width: 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
	color: var(--summa-accent) !important;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none;
	transform: none !important;
}

#benHome .emailtabpanel input[type="button"][value="Remove"]:hover {
	color: var(--summa-accent-hover) !important;
	background: none !important;
}

/* Personal/social URL anchors: quiet 12.5px text beside their labels
   (vendor inlines width: 300px, wrapping mid-string). */
#benHome a[id$="PersonalPageURL"],
#benHome a[id$="SocialMediaURL"] {
	width: auto !important;
	word-break: break-all;
	font-size: 12.5px !important;
	font-weight: 500;
	color: var(--summa-text-muted);
}

/* --- buttons --- */

/* Primary (mock .btn): sentence case, 13.5/600 — the vendor uppercases
   with letter-spacing. */
/* line-height:1 is the real fix for "text sits off-center": the page's
   1.55 body line-height was inherited into every button, so the glyph
   sat inside an oversized line box. inline-flex centers it a second way
   for anchor/span-based buttons (a[.button], .benp2pedit); no-op on
   <input>, whose value text a flex container can't lay out as a child. */
#benHome .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 10px 18px;
	border-radius: var(--summa-radius);
	background: var(--summa-accent);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#benHome .button:hover {
	background: var(--summa-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(10, 15, 22, 0.15);
}

#benHome .button.small {
	padding: 6px 12px;
	font-size: 12.5px;
}

/* Ghost buttons (mock .gbtn). !important pairs mirror the base .button
   rule they override; vendor .disabled grays keep winning — good. */
#benHome .button.cancel,
#benHome .button.benp2pedit,
#benHome input[name="benSaveEmail"],
#benHome input[value="Copy This Message"],
#benHome input[value="Add To Address Book"],
#benHome .benmyhqsocialmessagewrap a.button:not(.benmyhqtextthismessage),
#benHome .benmyhqcard:has(img[id$="imgProfilePic"]) span.button {
	padding: 9px 16px;
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1px solid var(--summa-border-strong) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* The vendor pins both the Social tab's "Copy This Message" and the SMS
   tab's "Copy This Message" / "Text This Message" to a cramped inline
   width: 120px — size to content like every other button instead. Kept
   separate from the ghost block above so it also reaches
   .benmyhqtextthismessage, which deliberately keeps the primary (non-ghost)
   button color. */
#benHome .benmyhqsocialmessagewrap a.button {
	width: auto !important;
}

#benHome .button.cancel:hover,
#benHome .button.benp2pedit:hover,
#benHome input[name="benSaveEmail"]:hover,
#benHome input[value="Copy This Message"]:hover,
#benHome input[value="Add To Address Book"]:hover,
#benHome .benmyhqsocialmessagewrap a.button:not(.benmyhqtextthismessage):hover,
#benHome .benmyhqcard:has(img[id$="imgProfilePic"]) span.button:hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-accent) !important;
	transform: none;
	box-shadow: none;
}

/* Naked vendor file inputs pick up a ghost-styled native button. */
#benHome input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	background: var(--summa-surface);
	color: var(--summa-text);
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

/* --- social media images (downloadable post graphics) --- */

/* This .benmyhqsocialwrap instance holds a single child panel — the
   vendor's own `.benmyhqsocialwrap > div { flex-basis: 46% }` (meant for
   the two-up short-message layout) leaves it stranded at half width. */
#benHome #ctl00_pnlTwitterMedia {
	flex-basis: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: var(--summa-space-md);
}

/* Heading + instructions are plain, unwrapped siblings ahead of the raw
   <img> tags — span them across the row so only the images grid up. */
#benHome #ctl00_pnlTwitterMedia > :not(img) {
	grid-column: 1 / -1;
}

/* Vendor inlines width:100% + margin-top:10px per image, sized for a
   stacked column; the margin fights the grid gap once columned. */
#benHome #ctl00_pnlTwitterMedia img {
	margin: 0 !important;
}

@media (max-width: 900px) {
	#benHome #ctl00_pnlTwitterMedia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#benHome #ctl00_pnlTwitterMedia {
		grid-template-columns: 1fr;
	}
}

/* --- fundraising / fitness thermometers --- */

#benHome .fundraisinggoal_totalraised {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--summa-heading-color);
}

#benHome .goalthermometer_raisedof {
	font-size: 13px;
	color: var(--summa-text-muted);
}

#benHome .goalthermometer {
	margin-top: 16px;
	font-size: 13px;
	color: var(--summa-text-muted);
}

#benHome .goalthermometer_outer {
	background: var(--summa-border);
	border-radius: 999px;
	overflow: hidden;
}

#benHome .goalthermometer_inner {
	height: 8px;
	border-radius: 999px;
	background: var(--summa-accent);
	transition: width 0.4s ease;
}

/* --- overview: split the money/fitness card into two cards --- */

/* The vendor packs both thermometers into ONE card — the mock shows two
   side-by-side cards with eyebrows. :has() gates the whole treatment,
   so browsers without it (and orgs without fitness tracking, where the
   wrap is absent) keep the plain single card. */
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > .fundraisinggoal,
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > [id$="fitnesstrackerwrap"] {
	position: relative; /* anchors the corner actions below */
	margin: 0;
	padding: 22px 24px;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
}

#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > .fundraisinggoal::before,
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > [id$="fitnesstrackerwrap"]::before {
	content: "Fundraising";
	display: block;
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > [id$="fitnesstrackerwrap"]::before {
	content: "Activity";
}

/* "Change goal" / "Manage" sit in the card corners like the mock's
   header rows (vendor inlines position: relative on the button). */
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > .fundraisinggoal .benp2pedit {
	position: absolute !important;
	top: 16px !important;
	right: 20px !important;
	margin: 0 !important;
	padding: 6px 12px;
	min-height: auto !important;
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1px solid var(--summa-border-strong) !important;
	font-size: 12.5px;
}

/* Paired with the base rule above — the generic #benHome .button:hover
   (background: var(--summa-accent-hover) !important) otherwise outranks
   the ghost .benp2pedit:hover on specificity and paints it dark again. */
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) > .fundraisinggoal .benp2pedit:hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-accent) !important;
}

#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) [id$="benmyhqmanagestepswrap"] {
	position: absolute;
	top: 16px;
	right: 20px;
}

/* "Manage" is a bare vendor link (no .button class) next to "Change Goal"
   (.button.benp2pedit) in the matching corner of the card beside it —
   give it the identical ghost-button treatment so the pair reads as one
   design instead of a styled button next to plain text. */
#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) [id$="benmyhqmanagestepswrap"] a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background: var(--summa-surface);
	color: var(--summa-text);
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]) [id$="benmyhqmanagestepswrap"] a:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
	border-color: var(--summa-accent);
}

/* Tracker links flow as one row instead of vendor table cells. */
#benHome [id$="fitnesstrackerwrap"] > .bentable,
#benHome [id$="fitnesstrackerwrap"] > .bentable > div,
#benHome [id$="fitnesstrackerwrap"] > .bentable > div > div {
	display: block;
	width: auto;
}

/* .bentable keeps the specificity above the cell rule's, so these win
   the display tie as the later rule. */
#benHome [id$="fitnesstrackerwrap"] .bentable [id$="fitbitlogin"],
#benHome [id$="fitnesstrackerwrap"] .bentable [id$="stravalogin"],
#benHome [id$="fitnesstrackerwrap"] .bentable [id$="applelogin"] {
	display: inline-block;
	width: auto;
	margin: 14px 16px 0 0;
}

/* --- points card --- */

/* Two-column grid (mock .pts): table left, level/points/tiers right.
   The :has() scope keeps other benmobile tables on the generic 2-up. */
#benHome .benmyhqcard .bentable.benmobile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: auto !important; /* the share copy-row inlines width: 500px */
	margin: 0;
}

#benHome .benmyhqcard .bentable.benmobile > div {
	display: contents;
}

#benHome .benmyhqcard .bentable.benmobile > div > div {
	display: block;
	width: auto !important; /* inline 48% / 50% cell widths */
	padding-left: 0 !important; /* inline 40px on the points column */
	padding-right: 0 !important;
}

/* Rows with a single cell (the compose column) span the whole grid. */
#benHome .benmyhqcard .bentable.benmobile > div > div:only-child {
	grid-column: 1 / -1;
}

#benHome .benmyhqcard .bentable.benmobile:has([id$="statusthermometerinner"]) {
	grid-template-columns: 1.1fr 0.9fr;
	gap: 34px;
}

/* Status ("level up") bar: geometry only — its fill color is the
   org-configured status color and stays. Both inline, so !important. */
#benHome [id$="statusthermometerinner"] {
	height: 8px !important;
	border-radius: 999px;
}

#benHome div:has(> [id$="statusthermometerinner"]) {
	background-color: var(--summa-border) !important;
	border-radius: 999px;
	overflow: hidden;
}

#benHome [id$="lblLevelUpAt"] {
	font-size: 11.5px !important;
	color: var(--summa-text-muted);
}

/* Points-earned column reads in accent ink, like the mock's +100s. */
#benHome .benactivitytable td[style*="text-align: right"] {
	color: var(--summa-accent);
	font-weight: 650;
}

/* Pieces built by the form-enhance.js MyHQ pass (summa-* nodes). */
#benHome .summa-hqhidden {
	display: none;
}

#benHome .summa-level-label,
#benHome .summa-avail-label,
#benHome .summa-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

#benHome .summa-level-label {
	margin-bottom: 10px;
}

#benHome .summa-avail-num {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--summa-heading-color);
	margin-top: 3px;
}

#benHome .benmyhqheadings.summa-has-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#benHome .summa-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--summa-selected-bg);
	color: var(--summa-text);
	background: color-mix(in oklab, var(--summa-accent) 10%, var(--summa-surface));
	color: var(--summa-accent);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

#benHome .summa-tiers {
	margin-top: 6px;
}

#benHome .summa-tier {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
	color: var(--summa-text-muted);
	border-top: 1px solid var(--summa-border);
}

#benHome .summa-tier-on {
	color: var(--summa-text);
	font-weight: 650;
}

#benHome .summa-tier-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--summa-border-strong);
	flex: none;
}

#benHome .summa-tier-on .summa-tier-dot {
	background: var(--summa-accent);
}

#benHome .summa-tier-pts {
	margin-left: auto;
	font-weight: 400;
	color: var(--summa-text-muted);
}

/* --- donations highlights: stat grid (built by the JS pass) --- */

#benHome .summa-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}

#benHome .summa-stat-value {
	font-size: 20px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	margin-top: 3px;
	color: var(--summa-heading-color);
}

/* CSS fallback while (or if) the JS pass hasn't run: the raw labels at
   least read as eyebrows. Once .summa-stats exists the raw table hides. */
#benHome .benmyhqcard div[style*="color: #999999"] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--summa-text-muted) !important;
}

#benHome .benmyhqcard .summa-stats ~ .table.full.top {
	display: none;
}

/* --- DataTables (points, updates, donations) + contact lists --- */

#benHome table.dataTable thead th {
	padding: 0 8px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
	border-bottom: 0;
}

#benHome table.dataTable tbody td {
	padding: 10px 8px;
	border-top: 1px solid var(--summa-border);
	border-bottom: 0;
	font-size: 13.5px;
}

#benHome .dataTables_info {
	padding-top: 12px;
	font-size: 12px;
	color: var(--summa-text-muted);
}

/* Compact pager (mock .pbtn): bordered pills, dark current. The
   library's own stylesheet colors these with !important. */
#benHome .dataTables_wrapper .dataTables_paginate {
	padding-top: 12px;
	font-size: 12.5px;
}

#benHome .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 28px;
	box-sizing: border-box;
	margin-left: 4px;
	padding: 5px 9px !important;
	border: 1px solid var(--summa-border) !important;
	border-radius: 7px;
	background: var(--summa-surface) !important;
	color: var(--summa-text-muted) !important;
	font-weight: 600;
	text-align: center;
}

#benHome .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	border-color: var(--summa-border-strong) !important;
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
}

#benHome .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#benHome .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--summa-accent) !important;
	border-color: var(--summa-accent) !important;
	color: var(--summa-accent-text) !important;
}

#benHome .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.45;
}

/* --- Redeem Points: vendor renders this as a plain DataTable row list
   (Item / Points / Description / image / Select button columns, plus
   .benmobileonlyblock duplicates of Points/Description meant for a
   narrow-viewport fallback). Turned into a responsive product-grid by
   re-typing table/tbody/tr as grid/flex containers (DataTables only
   depends on the table/thead/tbody/tr/td structure staying intact, not
   on their computed display) and reusing the mobile-only text instead
   of the desktop columns so nothing renders twice. Vendor's inline
   red status colors need !important to lose (see convention above). */
#benHome #lblRedeemAvailablePoints,
#benHome #lblRedeemCurrentStatus {
	color: var(--summa-heading-color) !important;
	font-size: 13px;
}

#benHome table.benredemptiontable {
	display: block;
}

#benHome table.benredemptiontable thead {
	display: none;
}

#benHome table.benredemptiontable tbody {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--summa-space-md);
	width: 100%;
}

#benHome table.benredemptiontable tbody tr {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	background: var(--summa-surface);
	padding: 16px;
}

#benHome table.benredemptiontable tbody td {
	display: block;
	padding: 0;
	border-top: 0;
	font-size: 13.5px;
}

/* image, always first */
#benHome table.benredemptiontable tbody td:nth-child(4) {
	order: -3;
	margin-bottom: 12px;
}

#benHome table.benredemptiontable tbody td:nth-child(4) img {
	float: none !important;
	display: block;
	width: 100%;
	height: 160px;
	object-fit: contain;
	margin: 0 !important;
}

/* item name: keep the heading, drop the mobile-only duplicates of the
   Points/Description columns that already render further down the card */
#benHome table.benredemptiontable tbody td:nth-child(1) {
	order: -2;
}

#benHome table.benredemptiontable tbody td:nth-child(1) strong {
	display: block;
	color: var(--summa-heading-color);
	font-size: 15.5px;
}

#benHome table.benredemptiontable tbody td:nth-child(1) .benmobileonlyblock {
	display: none !important;
}

/* description */
#benHome table.benredemptiontable tbody td.bendesktoponly:nth-child(3) {
	order: -1;
	display: block !important;
	flex: 1;
	color: var(--summa-text-muted);
	line-height: 1.5;
}

/* points, styled like a price */
#benHome table.benredemptiontable tbody td.bendesktoponly:nth-child(2) {
	order: 1;
	display: block !important;
	margin-top: 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--summa-accent);
}

#benHome table.benredemptiontable tbody td.bendesktoponly:nth-child(2)::after {
	content: " pts";
	font-size: 12px;
	font-weight: 600;
	color: var(--summa-text-muted);
}

/* Select button, pinned to the bottom, full width */
#benHome table.benredemptiontable tbody td:nth-child(5) {
	order: 2;
	margin-top: 12px;
}

#benHome table.benredemptiontable tbody td:nth-child(5) .button {
	width: 100%;
}

@media (max-width: 900px) {
	#benHome table.benredemptiontable tbody {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#benHome table.benredemptiontable tbody {
		grid-template-columns: 1fr;
	}
}

#benHome #benemailcontactstable .heading td {
	padding: 0 5px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
	border-bottom: 0;
}

#benHome #benemailcontactstable td {
	padding: 9px 5px;
	border-top: 1px solid var(--summa-border);
	border-bottom: 0;
	font-size: 13.5px;
}

#benHome #benemailcontactstable tr:hover td {
	background: var(--summa-surface-subtle);
	color: var(--summa-text);
}

#benHome input[type="checkbox"] {
	accent-color: var(--summa-accent);
	width: 16px;
	height: 16px;
}

/* --- fields (story form, email compose, team create/join, popups) --- */

/* The vendor inlines per-field padding/fonts/borders throughout MyHQ
   (20px heading inputs, Franklin Gothic compose body, width:
   calc(100% - 62px)...), so the shared look needs !important. Popups
   (.popup) get the same treatment as cards — a dialog is a card too,
   and without this the goal/activity dialogs render bare vendor fields. */
#benHome .benmyhqcard input[type="text"],
#benHome .benmyhqcard textarea,
#benHome .popup input[type="text"],
#benHome .popup input[type="date"],
#benHome .popup textarea {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px 12px !important;
	border: 1px solid var(--summa-border-strong) !important;
	border-radius: var(--summa-radius);
	background: var(--summa-surface);
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.45;
	color: var(--summa-text);
}

#benHome .benmyhqcard input[type="text"]:focus,
#benHome .benmyhqcard textarea:focus,
#benHome .popup input[type="text"]:focus,
#benHome .popup input[type="date"]:focus,
#benHome .popup textarea:focus {
	outline: none;
	border-color: var(--summa-accent) !important;
	box-shadow: var(--summa-ring);
}

/* The subject line carries an inline font-weight:bold that read like a
   heading sitting inside the field rather than a normal typed value. */
#benHome .benmyhqcard input.myhqsubject {
	font-weight: 400 !important;
}

/* The base form rules force textarea height:auto (min 90px), which also
   flattens the vendor's inline 260–420px heights here — so the writing
   surfaces get their room back via min-heights. Kept modest by default
   (60px) since an oversized unlabeled reply/comment box reads as a big
   gap of empty space before its action buttons; the known big ones
   (story/compose bodies) opt into more room below. */
#benHome .benmyhqcard textarea,
#benHome .popup textarea {
	min-height: 60px;
	resize: vertical;
}

#benHome .benmyhqcard textarea[id$="txtBody"],
#benHome .benmyhqcard textarea[id$="txtBodyPersonal"],
#benHome .benmyhqcard textarea.myhqbody {
	min-height: 260px;
}

/* Story heading input reads bigger, like the mock's .fs18. */
#benHome .benmyhqcard input[id$="txtHeading"] {
	font-size: 18px !important;
	font-weight: 600;
}

/* Explicit appearance + arrow (rather than relying on the form widget's
   .benevolencewrapper select rule below to carry over): a vendor MyHQ
   style was winning on this property and left selects arrow-less. */
#benHome .benmyhqcard select,
#benHome .popup select {
	max-width: 100%;
	padding: 10px 38px 10px 12px;
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	background-color: var(--summa-surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--summa-text);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* --- plain (non-DataTable) tables: teammates, activity log, popups --- */

/* These default to content-width, which read as an oddly narrow,
   off-center table inside a full-width card/dialog. */
#benHome .benmyhqcard table:not(.dataTable),
#benHome .popup table:not(.dataTable) {
	width: 100%;
	border-collapse: collapse;
}

#benHome .benmyhqcard table:not(.dataTable) thead th,
#benHome .popup table:not(.dataTable) thead th {
	padding: 0 8px 8px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
	border-bottom: 1px solid var(--summa-border-strong);
}

#benHome .benmyhqcard table:not(.dataTable) tbody td,
#benHome .popup table:not(.dataTable) tbody td {
	padding: 10px 8px;
	border-top: 1px solid var(--summa-border);
	font-size: 13.5px;
	vertical-align: middle;
}

/* --- story tab --- */

/* Round 68px avatar (mock .avatar) — the vendor inlines 120px square. */
#benHome img[id$="imgProfilePic"] {
	width: 68px !important;
	height: 68px !important;
	border-radius: 999px;
	object-fit: cover;
}

#benHome .benmyhqcard:has(img[id$="imgProfilePic"]) div[style*="color: #333"] {
	color: var(--summa-text) !important;
	font-weight: 600;
	margin-bottom: 10px !important;
}

/* --- updates tab --- */

/* "Create a new update" row: mock is 18px/700 + muted line, no icon. */
#benHome .benmyhqcard div[style*="font-size: 24px"] {
	font-size: 18px !important;
	font-weight: 700;
	color: var(--summa-heading-color);
}

#benHome .benmyhqcard div[style*="font-size: 13px"] {
	color: var(--summa-text-muted) !important;
}

#benHome .benmyhqcard .bendesktoponly .fa-pen-to-square {
	display: none;
}

/* --- share tab --- */

/* 36px ink circles (mock .soc). */
#benHome .benp2psocialshareicons i {
	width: 36px;
	height: 36px;
	margin: 5px;
	border-radius: 999px;
	background-color: var(--summa-accent);
	font-size: 14px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

#benHome .benp2psocialshareicons a:hover i {
	background-color: var(--summa-accent-hover);
	transform: translateY(-2px);
}

/* Sub-tabs (Email/Social/SMS, Compose/Contacts/Sent, story sections):
   segmented control (mock .seg) — gray track, white active pill.
   width: fit-content keeps the vendor's margin: auto centering working
   on a track that now shrinkwraps. */
#benHome .benmyhqsubtabs {
	width: fit-content;
	gap: 2px;
	padding: 3px;
	background: var(--summa-border);
	border-radius: 10px;
}

#benHome .benmyhqsubtabs span {
	padding: 8px 18px;
	background: transparent;
	border-bottom: 0;
	border-radius: var(--summa-radius);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase; /* vendor writes the labels uppercase anyway */
	color: var(--summa-text-muted);
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover never fires on the active pill: span.active (two classes)
   outranks span:hover (class + pseudo). */
#benHome .benmyhqsubtabs span:hover {
	background: transparent;
	color: var(--summa-text);
}

#benHome .benmyhqsubtabs span.active {
	background: var(--summa-surface);
	color: var(--summa-text);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.12);
}

/* Email sub-panels: kill the vendor's gray slab, hairline and 1000px
   centering inside our full-width card. */
#benHome .emailtabpanel {
	background: transparent;
	border-top: 0;
	padding: 4px 0 0;
	min-height: 0;
	width: 100%;
	max-width: 100%;
}

/* The Compose panel's "Compose Email" column carries a vendor inline
   width: 528px, capping it far short of the card — only !important beats
   an inline style. Matched by value like the other inline-style vendor
   divs above (font-size: 24px, color: #333). */
#benHome #benemailtabcompose div[style*="width: 528px"] {
	width: 100% !important;
	box-sizing: border-box;
}

/* Subject line's single-cell wrapper table inherits the plain-table td
   padding rule above, which the Select-a-template dropdown and the body
   textarea beside/below it don't have — knocking the field out of
   alignment with them. */
#benHome #benemailtabcompose table:has(input.myhqsubject) td {
	padding: 0;
}

/* "Send email through My HQ": title + Compose/Contacts/Sent share a
   row like the mock's hrow, even though the vendor's own subhead
   paragraph sits between them in the DOM. Grid placement is by row/
   column, not source order, so it doesn't need to move — the subhead
   spans row 2 underneath both. */
#benHome #bencommunicationssendemail {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: start;
}

#benHome #bencommunicationssendemail > .benh1 {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	text-align: left !important;
}

#benHome #bencommunicationssendemail > .benmyhqsubtabs {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
}

#benHome #bencommunicationssendemail > .benmyhqemailsubhead {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 6px 0 20px !important;
}

#benHome #bencommunicationssendemail > .emailtabpanel {
	grid-column: 1 / -1;
	grid-row: 3;
}

#benHome #benemailcontacts {
	border-color: var(--summa-border) !important;
	border-radius: 10px;
}

/* Contacts tab: the vendor's fake-table CSS (.bentable.full > div > div)
   renders "Import from" and the labeled add-fields table as two
   side-by-side table-cells on one line — stack them into two full-width
   rows instead, "Import from" above the fields. */
#benHome #addcontactcontainer .bentable.full > div,
#benHome #addcontactcontainer .bentable.full > div > div {
	display: block;
	width: auto;
}

/* The labeled add-fields table becomes one full-width flex row (built by
   the MyHQ JS pass — polishContactAdd()) instead of a stacked label/input
   table. */
#benHome .summa-addcontact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 14px 0;
}

#benHome .summa-addcontact-row input[type="text"] {
	flex: 1;
	min-width: 140px;
	width: auto !important;
}

#benHome .benmyhqsocialmessages {
	border: 1px solid var(--summa-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--summa-surface-subtle);
	line-height: 1.55;
	font-size: 13px;
	color: var(--summa-text);
}

/* --- team tab --- */

/* Create/Join: the vendor's single two-cell card becomes two cards
   (mock grid2). The card IS the bentable here; display: contents on
   the row makes the padded cells the grid items. */
#benHome .benmyhqcard.bentable.benmobile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0 !important;
	background: transparent;
	border: 0;
	box-shadow: none;
}

#benHome .benmyhqcard.bentable.benmobile > div {
	display: contents;
}

#benHome .benmyhqcard.bentable.benmobile > div > div {
	display: block;
	width: auto !important;
	padding: 22px 24px !important;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
}

#benHome .benmyhqcard.bentable.benmobile table {
	width: 100%;
	margin: 0 !important;
}

#benHome .benjointeamresult {
	padding: 8px 10px;
	border-radius: 6px;
}

#benHome .benjointeamresult:hover {
	background-color: var(--summa-selected-bg);
}

/* "Your Teammates" table: the vendor caps its wrap at an inline
   max-width: 800px, margin: auto, cramming it into a narrow centered
   column instead of filling the card like every other MyHQ table. */
#benHome .benmyhqteammemberstablewrap {
	max-width: 100% !important;
	margin: 0 !important;
}

/* --- popups (opened in place; mock .mdl) --- */

#benHome .popup_block {
	width: 460px;
	margin-left: -230px;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(16, 20, 28, 0.3);
}

#benHome .popup_block .popup {
	padding: 26px;
	border-radius: 14px;
}

#benHome .benfade {
	background: #10141c;
	opacity: 0.45;
}

/* Corner close X, injected by the MyHQ JS pass (polishPopupClose()) on
   every dialog that only ships a Cancel button in its own form. */
#benHome .popup {
	position: relative;
}

/* Dual-scoped like .summa-popup-x below: some MyHQ dialogs stay nested
   under #benHome, others get relocated to a direct <body> child by the
   vendor (re-tagged .benpopuprelocated) — #benHome alone silently drops
   this rule the moment that happens, leaving an unstyled default button
   sitting inline instead of the intended top-right corner X. */
#benHome .summa-popup-close,
body > .benevolencewrapper.benpopuprelocated .summa-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--summa-text-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#benHome .summa-popup-close:hover,
body > .benevolencewrapper.benpopuprelocated .summa-popup-close:hover {
	background: var(--summa-selected-bg);
	color: var(--summa-text);
}

/* Thank Your Donor dialog: the template-select block carries a vendor
   inline border-bottom under the dropdown, on top of the popup's own
   dialog chrome — a divider the mock doesn't have. Dual-scoped for the
   same reason as .summa-popup-close above. */
#benHome [id$="benhqthanktemplates"],
body > .benevolencewrapper.benpopuprelocated [id$="benhqthanktemplates"] {
	border-bottom: 0 !important;
}

/* Goal dialog: "$ <input>" row — the shared 100% field width pushed the
   dollar prefix onto its own line. Stretched (not centered) so the chip
   built by polishDollarPrefix() fuses full-height against the input. */
#benHome [id^="personalpageeditgoal"] .popup div[style*="text-align: center"] {
	display: flex;
	align-items: stretch;
	text-align: left !important;
}

#benHome .summa-dollar-chip {
	display: flex;
	align-items: center;
	padding: 0 14px;
	border: 1px solid var(--summa-border-strong);
	border-right: 0;
	border-radius: var(--summa-radius) 0 0 var(--summa-radius);
	background: var(--summa-surface-subtle);
	color: var(--summa-text-muted);
	font-size: 14px;
	font-weight: 600;
}

#benHome .summa-dollar-input {
	border-radius: 0 var(--summa-radius) var(--summa-radius) 0 !important;
}

/* --- small screens --- */

@media (max-width: 800px) {
	#benHome #benhomeoverview .benmyhqcard:has(> [id$="fitnesstrackerwrap"]),
	#benHome .benmyhqcard .bentable.benmobile,
	#benHome .benmyhqcard .bentable.benmobile:has([id$="statusthermometerinner"]),
	#benHome .benmyhqcard.bentable.benmobile {
		grid-template-columns: 1fr;
	}
}

/* MyHQ popups never relocate to body, so the popups section's phone
   rule misses them — same treatment here. Even hidden they sit at
   visibility:hidden with a fixed width, widening the page's scrollable
   overflow on phones. */
@media (max-width: 680px) {
	#benHome .popup_block {
		left: 16px !important;
		right: 16px;
		width: auto !important;
		margin: 0 !important;
	}
}

/* The "Send email through My HQ" title + Compose/Contacts/Sent row has
   no room to share a line at phone widths (the seg control's "auto"
   column refused to shrink, pushing the grid past the viewport) — stack
   them instead. */
@media (max-width: 560px) {
	#benHome #bencommunicationssendemail {
		grid-template-columns: 1fr;
	}

	#benHome #bencommunicationssendemail > .benh1 {
		grid-column: 1;
	}

	#benHome #bencommunicationssendemail > .benmyhqsubtabs {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		margin-top: 10px !important;
	}

	#benHome #bencommunicationssendemail > .benmyhqemailsubhead {
		grid-row: 3;
	}

	#benHome #bencommunicationssendemail > .emailtabpanel {
		grid-row: 4;
	}
}

/* ------------------------------------------------------------------ */
/* MyHQ setup wizard (#myhqwizardpopup) — classes from form-enhance.js */
/* ------------------------------------------------------------------ */

/*
 * The onboarding wizard is a chain of vendor popups, one per step (each
 * step a fresh control reload). form-enhance.js tags the popup with
 * .summa-wizard, injects the progress header / drop zones / skip link,
 * and everything here rides the popup chrome above. The ID in the scope
 * outguns the vendor stylesheet; !important appears only where a vendor
 * INLINE style must lose (those inline values are written once per
 * render and never toggled, so overriding them is safe).
 */

/* Vendor inlines width: 700px / margin-left: -358px on every step. The
   phone rule at the bottom of the popups section pins cards to the
   viewport edges, so this narrower fixed width is desktop-only. */
@media (min-width: 681px) {
	body > #myhqwizardpopup.benpopuprelocated .popup_block {
		width: 620px !important;
		margin-left: -310px !important;
	}
}

#myhqwizardpopup .popup_block .popup.summa-wizard {
	padding: 30px 40px 28px;
	animation: summa-wizard-step 0.28s ease; /* fresh node per step → replays each swap */
}

@keyframes summa-wizard-step {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* --- progress header --- */

#myhqwizardpopup .summa-wizard-head {
	margin: 0 40px 24px 0; /* right gap clears the corner X */
}

#myhqwizardpopup .summa-wizard-eyebrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--summa-text-muted);
}

#myhqwizardpopup .summa-wizard-count {
	color: var(--summa-text);
	white-space: nowrap;
}

#myhqwizardpopup .summa-wizard-track {
	display: flex;
	gap: 6px;
}

#myhqwizardpopup .summa-wizard-seg {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--summa-border);
	transition: background-color 0.3s ease;
}

#myhqwizardpopup .summa-wizard-seg.summa-seg-done {
	background: var(--summa-accent);
}

#myhqwizardpopup .summa-wizard-seg.summa-seg-current {
	background: var(--summa-accent);
	animation: summa-wizard-pulse 1.6s ease-in-out infinite;
}

@keyframes summa-wizard-pulse {
	50% {
		opacity: 0.45;
	}
}

/* --- typography --- */

/* Titles: the vendor centers some steps inline and not others; the
   editorial left-aligned treatment matches the rest of the system. */
#myhqwizardpopup .summa-wizard .benh1 {
	margin: 0 0 10px;
	font-family: var(--summa-heading-font);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--summa-heading-color);
	text-align: left !important;
}

/* Step-1 subtitle carries inline margin: 20px 0. */
#myhqwizardpopup .summa-wizard .benh3 {
	margin: 0 0 20px !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--summa-text-muted);
}

/* "Did you know… 55% more" — italic centered inline text becomes a
   left-aligned callout that earns its claim some visual weight. */
#myhqwizardpopup .summa-wizard .summa-wizard-tip {
	margin: 0 0 20px !important;
	padding: 12px 16px;
	background: var(--summa-surface-subtle);
	border-left: 3px solid var(--summa-accent);
	border-radius: 0 var(--summa-radius) var(--summa-radius) 0;
	font-style: normal !important;
	text-align: left !important;
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--summa-text);
}

#myhqwizardpopup .summa-wizard .summa-wizard-fieldlabel {
	margin: 18px 0 8px !important;
	font-size: 12px !important;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text) !important;
}

/* Redundant sub-headings ("Personal Page" over a single upload) read as
   labels, not competing titles. */
#myhqwizardpopup .summa-wizard .benh2 {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--summa-text);
}

/* --- fields --- */

#myhqwizardpopup .summa-wizard input[type="text"],
#myhqwizardpopup .summa-wizard textarea {
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid var(--summa-border-strong) !important;
	border-radius: var(--summa-radius);
	background: var(--summa-surface);
	font: inherit;
	font-size: 15px !important;
	line-height: 1.5;
	color: var(--summa-text);
}

#myhqwizardpopup .summa-wizard input[type="text"]:focus,
#myhqwizardpopup .summa-wizard textarea:focus {
	outline: none;
	border-color: var(--summa-accent) !important;
	box-shadow: var(--summa-ring);
}

/* Story step: heading reads as a one-liner, body gets writing room
   (vendor inlines 60px/120px heights). */
#myhqwizardpopup .summa-wizard textarea[name$="txtHeading"] {
	height: 52px !important;
	resize: vertical;
}

#myhqwizardpopup .summa-wizard textarea[name$="txtBody"] {
	height: 220px !important;
	resize: vertical;
}

/* --- URL group (step 1): prefix chip joined to the input --- */

#myhqwizardpopup .summa-wizard .summa-wizard-urlrow {
	display: block;
}

#myhqwizardpopup .summa-wizard .summa-wizard-urlrow > div {
	display: flex;
	align-items: stretch;
}

#myhqwizardpopup .summa-wizard .summa-wizard-urlprefix {
	display: flex !important;
	align-items: center;
	max-width: 62%;
	padding: 0 10px 0 12px !important;
	border: 1px solid var(--summa-border-strong);
	border-right: none;
	border-radius: var(--summa-radius) 0 0 var(--summa-radius);
	background: var(--summa-surface-subtle);
	font-size: 13px;
	color: var(--summa-text-muted) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#myhqwizardpopup .summa-wizard .summa-wizard-urlinput {
	flex: 1;
	padding: 0 !important;
}

/* After the shared input rule above so the joined radius wins. */
#myhqwizardpopup .summa-wizard .summa-wizard-urlinput input[type="text"] {
	border-radius: 0 var(--summa-radius) var(--summa-radius) 0;
	margin: 0;
}

#myhqwizardpopup .summa-wizard .summa-wizard-hint {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--summa-text-muted);
}

/* --- file drop zones (photo steps) --- */

#myhqwizardpopup .summa-wizard .summa-wizard-file {
	margin: 6px 0 4px;
}

#myhqwizardpopup .summa-wizard .summa-wizard-file-label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 20px;
	border: 1.5px dashed var(--summa-border-strong);
	border-radius: var(--summa-radius);
	background: var(--summa-surface-subtle);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#myhqwizardpopup .summa-wizard .summa-wizard-file-label:hover,
#myhqwizardpopup .summa-wizard .summa-wizard-file:focus-within .summa-wizard-file-label {
	border-color: var(--summa-accent);
	background: var(--summa-surface);
}

#myhqwizardpopup .summa-wizard .summa-wizard-file-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--summa-radius);
	background: var(--summa-accent);
	color: var(--summa-accent-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

#myhqwizardpopup .summa-wizard .summa-wizard-file-name {
	font-size: 13px;
	color: var(--summa-text-muted);
	word-break: break-all;
}

/* The input stretches over the zone (native click target + keyboard
   focusable) but stays invisible. */
#myhqwizardpopup .summa-wizard .summa-wizard-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	cursor: pointer;
}

/* Compound class ties the focus-within specificity so, being later, the
   chosen state wins even while the input still holds focus. */
#myhqwizardpopup .summa-wizard .summa-wizard-file.summa-has-file .summa-wizard-file-label {
	border-style: solid;
	border-color: var(--summa-success-border);
	background: var(--summa-success-bg);
}

#myhqwizardpopup .summa-wizard .summa-has-file .summa-wizard-file-name {
	color: var(--summa-success);
	font-weight: 600;
}

/* --- buttons --- */

/* One primary per step. !important beats the vendor's .cancel gray,
   which it sloppily leaves on the profile step's "Next Step". */
#myhqwizardpopup .summa-wizard .button {
	min-width: 150px;
	padding: 14px 26px;
	border-radius: var(--summa-radius);
	background: var(--summa-accent) !important;
	color: var(--summa-accent-text) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Paired state (see CLAUDE.md): background and color declared together,
   and the secondary .file-btn is excluded — the pseudo-class outranked
   its bg override, which once painted dark-on-dark text on hover. */
#myhqwizardpopup .summa-wizard .button:not(.file-btn):hover {
	background: var(--summa-accent-hover) !important;
	color: var(--summa-accent-text) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(10, 15, 22, 0.18);
}

#myhqwizardpopup .summa-wizard .button:focus-visible {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
}

/* Croppie step: picker centered over the placeholder it feeds. */
#myhqwizardpopup .summa-wizard .benmyhqprofilepicactions {
	margin-bottom: 4px;
	text-align: center;
}

/* Croppie step's "Select Photo" picker: secondary, so the step keeps a
   single primary action. position: relative is owned here rather than
   inherited from the story tab's inline <style> — without it the
   invisible file input inside anchors to the whole popup and swallows
   every click. */
#myhqwizardpopup .summa-wizard .file-btn {
	position: relative;
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1.5px solid var(--summa-border-strong) !important;
}

#myhqwizardpopup .summa-wizard .file-btn:hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-accent) !important;
	transform: none;
	box-shadow: none;
}

/* Action rows: breathing room above the CTA. */
#myhqwizardpopup .summa-wizard div[style*="text-align: right"] {
	margin-top: 22px !important;
}

/* --- skip link --- */

#myhqwizardpopup .summa-wizard .summa-wizard-skip {
	display: block;
	margin: 16px auto 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--summa-text-muted);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

#myhqwizardpopup .summa-wizard .summa-wizard-skip:hover {
	color: var(--summa-text);
}

#myhqwizardpopup .summa-wizard .summa-wizard-skip:focus-visible {
	outline: 2px solid var(--summa-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- completion step --- */

#myhqwizardpopup .summa-wizard-donestep .benh1 {
	text-align: center !important;
}

#myhqwizardpopup .summa-wizard .summa-wizard-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 6px auto 18px;
	border-radius: 999px;
	background: var(--summa-success-bg);
	border: 2px solid var(--summa-success-border);
	color: var(--summa-success);
	font-size: 30px;
	font-weight: 700;
	animation: summa-wizard-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes summa-wizard-pop {
	from {
		transform: scale(0.4);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#myhqwizardpopup .popup_block .popup.summa-wizard,
	#myhqwizardpopup .summa-wizard-seg.summa-seg-current,
	#myhqwizardpopup .summa-wizard .summa-wizard-check {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Find a Team / Find a Participant directory                          */
/* (summa/form, formType support_team / support_individual)            */
/* ------------------------------------------------------------------ */

/*
 * benForm(formId, elementId, "team"|"individual", registrationDefinitionId)
 * server-renders the whole directory in one response (no async control
 * load like MyHQ) and re-renders the results table in place on
 * Search/Show All/page-change, so the regular enhanceAll() pass (via
 * benForm_Loaded, same as every other benForm) is enough — no dedicated
 * MutationObserver pass needed here. Skinned to the "Support Pages
 * Modern" Claude Design mock, sentence case like MyHQ Modern rather than
 * the Arial Narrow uppercase treatment the rest of this file uses for
 * forms — scoped to these vendor classes specifically (not the whole
 * .benevolencewrapper) so a donation/registration step reached from the
 * same page keeps the standard forms look.
 *
 * DataTables only depends on table/thead/tbody/tr/td staying intact, not
 * on their computed display (see the Redeem Points comment above) — so
 * each result row is re-typed to a flex row instead of a table row.
 * The header <tr> is already inline display:none from the vendor.
 */

.benevolencewrapper.benevolencewrapper .benfindateamheading,
.benevolencewrapper.benevolencewrapper .benfindaparticipantheading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--summa-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--summa-heading-color);
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-bottom: 0;
	border-radius: var(--summa-radius-lg) var(--summa-radius-lg) 0 0;
	padding: 20px 22px 14px;
	margin: 0 !important;
}

/* "N teams" / "N participants" (mock's .chip), injected by
   setupFindDirectoryCount() in form-enhance.js. */
.benevolencewrapper.benevolencewrapper .summa-fp-count {
	display: inline-flex;
	align-items: center;
	flex: none;
	background: color-mix(in oklab, var(--summa-accent) 10%, var(--summa-surface));
	color: var(--summa-accent);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

/* The vendor inlines its own margin on this row (5px 0 12px) — it fought
   the seamless "one card" look the heading/results boxes above and below
   rely on having zero gap between them. */
.benevolencewrapper.benevolencewrapper #benteamfindteamtable,
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable {
	width: 100%;
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-top: 0;
	border-bottom: 0;
	padding: 4px 22px 16px;
	margin: 0 !important;
}

.benevolencewrapper.benevolencewrapper #benteamfindteamtable > div,
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable > div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* The text input's own wrapping div grows to fill the row (the vendor's
   Search/Show All buttons sit in a second, content-sized div after it),
   so the field spans the full card width instead of a fixed min-width. */
.benevolencewrapper.benevolencewrapper #benteamfindteamtable > div > div:first-child,
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable > div > div:first-child {
	flex: 1;
}

/* The vendor inlines a fixed width: 260px on this input — needs
   !important to actually stretch full width, since an inline style
   otherwise always wins regardless of stylesheet specificity. */
.benevolencewrapper.benevolencewrapper #benteamfindteamtable input[type="text"],
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable input[type="text"] {
	box-sizing: border-box;
	width: 100% !important;
	border: 1px solid var(--summa-border-strong);
	border-radius: var(--summa-radius);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
}

.benevolencewrapper.benevolencewrapper #benteamfindteamtable input[type="text"]:focus,
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable input[type="text"]:focus {
	outline: none;
	border-color: var(--summa-accent);
	box-shadow: var(--summa-ring);
}

.benevolencewrapper.benevolencewrapper #benteamfindteamtable input[type="button"],
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable input[type="button"] {
	border-radius: var(--summa-radius);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	padding: 10px 18px;
}

/* "Show All" reads as a plain text link (mock's .link), not a second
   boxed button competing with Search. */
.benevolencewrapper.benevolencewrapper #benteamfindindividualtable input#formsearchcntrl_btnFindIndividualShowAll {
	background: none !important;
	border: 0 !important;
	color: var(--summa-accent) !important;
	padding: 10px 2px !important;
	font-weight: 600;
	text-decoration: none;
}

.benevolencewrapper.benevolencewrapper #benteamfindindividualtable input#formsearchcntrl_btnFindIndividualShowAll:hover {
	background: none !important;
	color: var(--summa-accent-hover) !important;
	text-decoration: underline;
}

.benevolencewrapper.benevolencewrapper #benteamsearchresults_wrapper,
.benevolencewrapper.benevolencewrapper #benindividualsearchresults_wrapper {
	background: var(--summa-surface);
	border: 1px solid var(--summa-border);
	border-radius: 0 0 var(--summa-radius-lg) var(--summa-radius-lg);
	box-shadow: 0 1px 2px rgba(10, 15, 22, 0.05);
	padding: 4px 22px 18px;
}

/* setupFindDirectoryLength() (form-enhance.js) moves this control from
   its own row (the vendor's default) to sit alongside the "Showing X to
   Y of Z entries" text (.dataTables_info, styled as a flex row below) —
   right-aligned, no longer needing the vertical padding a standalone row
   wanted. */
.benevolencewrapper.benevolencewrapper .dataTables_length#benteamsearchresults_length,
.benevolencewrapper.benevolencewrapper .dataTables_length#benindividualsearchresults_length {
	font-size: 12.5px;
	color: var(--summa-text-muted);
}

/* The vendor's own inline stylesheet happens to set `width: auto
   !important` for #benteamsearchresults_length select specifically
   (hardcoded, not adjusted for the individual/participant results ID) —
   set it explicitly ourselves so both directories match instead of
   inheriting the global full-width field rule on one of them. */
.benevolencewrapper.benevolencewrapper .dataTables_length#benteamsearchresults_length select,
.benevolencewrapper.benevolencewrapper .dataTables_length#benindividualsearchresults_length select {
	width: auto !important;
	height: 32px !important;
	min-width: 0;
	padding: 4px 26px 4px 10px !important;
	border: 1px solid var(--summa-border-strong) !important;
	border-radius: var(--summa-radius);
	font-family: inherit;
	font-size: 13px;
	background-position: right 8px center !important;
	vertical-align: middle;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults {
	width: 100% !important;
	border-collapse: collapse;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults tbody,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults tbody {
	display: block;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults tbody tr,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults tbody tr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--summa-border);
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults tbody tr:first-child,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults tbody tr:first-child {
	border-top: 0;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td {
	border: 0 !important;
	padding: 0 !important;
	vertical-align: middle;
}

/* The vendor sizes this cell itself to a fixed 100x100px (room for its
   own, much larger, default profile photo) — reset so the column is only
   as wide as the 44px avatar below actually needs. */
.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td.benfpprofilepic,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td.benfpprofilepic {
	width: auto;
	height: auto;
	flex: none;
	line-height: 0;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td.benfpprofilepic img,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td.benfpprofilepic img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--summa-selected-bg);
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td:nth-child(2),
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td:nth-child(2) {
	flex: 1 1 auto;
	min-width: 0;
}

/* The vendor reserves a 35px min-height for its own larger default type
   scale — reset so the compact row doesn't carry that extra empty space. */
.benevolencewrapper.benevolencewrapper .benfptitle {
	min-height: 0;
	font-size: 14.5px;
	font-weight: 650;
}

.benevolencewrapper.benevolencewrapper .benfptitle a {
	color: var(--summa-text);
	text-decoration: none;
}

.benevolencewrapper.benevolencewrapper .benfptitle a:hover {
	text-decoration: underline;
}

/* Same vendor min-height reset as .benfptitle above (26px default). */
.benevolencewrapper.benevolencewrapper .benfpsubtitle {
	min-height: 0;
	font-size: 12.5px;
	color: var(--summa-text-muted);
	margin-top: 1px;
}

.benevolencewrapper.benevolencewrapper .benfpsubtitle a {
	color: var(--summa-text-muted);
	text-decoration: none;
}

.benevolencewrapper.benevolencewrapper .benfpsubtitle a:hover {
	color: var(--summa-text);
	text-decoration: underline;
}

/* The vendor's own stylesheet loads AFTER this file and happens to style
   .benfpthermometer/_outer/_inner at the same (single-class) specificity
   this rule used to have, so its own (much taller, spaced) defaults won
   ties on source order alone — doubled scope beats it outright. Zeroed
   margin/min-height per design feedback: the row was reading too tall.
   Flex row so the standalone (non-table) .benfpthermometer_percentage
   sits beside the bar, vertically centered, instead of the vendor's own
   below/inside placement. */
.benevolencewrapper.benevolencewrapper .benfpthermometer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	min-height: 0;
}

/* setupFindDirectoryAmount() (form-enhance.js) moves .benfpthermometer_percentage
   OUT of this track and into the action-buttons cell (see td:last-child
   below) — its position would otherwise be tied to the bar's own width,
   which varies per row, instead of lining up with the row's buttons. */
.benevolencewrapper.benevolencewrapper .benfpthermometer_outer {
	flex: 1 1 auto;
	height: 10px;
	min-height: 0;
	background: var(--summa-border);
	border-radius: 99px;
	overflow: hidden;
}

.benevolencewrapper.benevolencewrapper .benfpthermometer_inner {
	display: block;
	height: 100%;
	min-height: 0;
	max-width: 100%;
	background: var(--summa-accent);
	border-radius: inherit;
}

/* Vendor's own .benfpthermometer_percentage rule is position: absolute
   (meant for its original spot inside/under the thermometer track) — left
   un-reset here it would ignore the flex row above and stay stacked on
   top of the bar instead of sitting beside it. Only applies to the plain
   (non-table) case: setupFindDirectoryAmount() relocates the search-results
   variant entirely out of this element (see td:last-child rule below),
   where its own position: static override already applies. */
.benevolencewrapper.benevolencewrapper .benfpthermometer_percentage {
	position: static;
	flex: none;
	white-space: nowrap;
}

/* The vendor inlines max-width: 100px on this cell (sized for its own
   two-button layout, no amount) — too narrow now that it also holds the
   relocated amount, which was clipping "Donate Now" to "Donate No" on a
   live site. */
.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td:last-child,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td:last-child {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: none !important;
}

/* Relocated into the buttons cell as its first child — a flex sibling of
   Join Team/Donate Now, always aligned with them regardless of how wide
   any given row's bar is. (Kept as a proper <td> child, not a bare <tr>
   child: DataTables/jQuery occasionally re-serializes a row's HTML, and
   the HTML parser foster-parents anything inside a <tr> that isn't a
   <td>/<th> out of the table entirely — which is exactly what dumped
   every row's amount, overlapping, above the table.)
   position: static beats the vendor's OWN .benfpthermometer_percentage
   rule (position: absolute, meant for its original spot inside the
   thermometer track) — left un-reset, it kept every relocated row's
   amount absolutely positioned against the same ancestor, stacking them
   all on top of each other at one spot instead of each in its own row
   (confirmed live: every amount landed at the same top/left). */
.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td:last-child > .benfpthermometer_percentage,
.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td:last-child > .benfpthermometer_percentage {
	position: static !important;
	flex: none;
	white-space: nowrap;
	font-size: 12.5px;
	color: var(--summa-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Join Team has no distinguishing class from the vendor — it's the plain
   .button next to .bensearchdonatenow in the same cell. Ghost-styled like
   .button.cancel elsewhere in this file so Donate Now reads as the one
   primary action per row. */
.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults .button:not(.bensearchdonatenow) {
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
	border: 1px solid var(--summa-border-strong) !important;
	font-size: 13px;
	white-space: nowrap;
}

.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults .button:not(.bensearchdonatenow):hover {
	background: var(--summa-selected-bg) !important;
	color: var(--summa-text) !important;
	border-color: var(--summa-accent) !important;
}

.benevolencewrapper.benevolencewrapper .bensearchdonatenow {
	font-size: 13px;
	white-space: nowrap;
}

/* setupFindDirectoryLength() (form-enhance.js) relocates .dataTables_length
   in here as a second flex item — the info text becomes an anonymous
   flex item automatically (a lone text-node child of a flex container
   does), so this needs no wrapper element of its own. */
.benevolencewrapper.benevolencewrapper .dataTables_info#benteamsearchresults_info,
.benevolencewrapper.benevolencewrapper .dataTables_info#benindividualsearchresults_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 12px;
	font-size: 12px;
	color: var(--summa-text-muted);
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px;
	padding-top: 4px;
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate span,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate span {
	display: flex;
	gap: 4px;
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate .paginate_button,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate .paginate_button {
	min-width: 28px;
	box-sizing: border-box;
	padding: 5px 9px !important;
	border: 1px solid var(--summa-border) !important;
	border-radius: 7px;
	background: var(--summa-surface) !important;
	color: var(--summa-text-muted) !important;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate .paginate_button:hover,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate .paginate_button:hover {
	border-color: var(--summa-border-strong) !important;
	background: var(--summa-surface) !important;
	color: var(--summa-text) !important;
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate .paginate_button.current,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate .paginate_button.current:hover,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate .paginate_button.current,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate .paginate_button.current:hover {
	background: var(--summa-accent) !important;
	border-color: var(--summa-accent) !important;
	color: var(--summa-accent-text) !important;
}

.benevolencewrapper.benevolencewrapper .dataTables_paginate#benteamsearchresults_paginate .paginate_button.disabled,
.benevolencewrapper.benevolencewrapper .dataTables_paginate#benindividualsearchresults_paginate .paginate_button.disabled {
	opacity: 0.45;
}

@media (max-width: 640px) {
	.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults tbody tr,
	.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults tbody tr {
		flex-wrap: wrap;
	}

	.benevolencewrapper.benevolencewrapper table.dataTable#benteamsearchresults td:last-child,
	.benevolencewrapper.benevolencewrapper table.dataTable#benindividualsearchresults td:last-child {
		flex: 1 1 100%;
		margin-left: 60px;
		margin-top: 8px;
	}
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

/* Tablet: not enough room for the sidebar column, but still worth showing
   the summary — stack it above the form (before the vendor's "Complete
   your registration" section) and let the form take the full width. */
@media (max-width: 1200px) {
	.benevolencewrapper.summa-has-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.benevolencewrapper.summa-has-summary > .summa-summary {
		grid-column: 1;
		grid-row: 2;
		position: static;
		/* Row gap is 0 (see the banner-row note above), so the stacked
		   summary spaces itself off the form. */
		margin-bottom: 28px;
	}

	.benevolencewrapper.summa-has-summary > form {
		grid-column: 1;
		grid-row: 3;
	}
}

@media (max-width: 992px) {
	.benevolencewrapper.summa-has-summary {
		display: block;
	}

	/* The submit button carries the total (form-enhance.js), so the amount
	   stays visible on mobile without the sidebar. */
	.benevolencewrapper.summa-has-summary > .summa-summary {
		display: none;
	}

	/* Multi-column reg-type grids are desktop-only; below that, always a
	   single column regardless of the block setting or Auto's auto-fill. */
	.benevolencewrapper.benevolencewrapper .benregtypes tbody {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.benevolencewrapper .bencreatesearchteam > div {
		flex-direction: column;
	}
}