/**
 * Charitable Ambassadors — Enhanced UI styles.
 *
 * Every rule is scoped to `.charitable-ambassadors-mc` (or, in a couple of
 * cases, the `body.charitable-ambassadors-ui-enhanced` body class) so that no
 * legacy markup is affected when a site stays on the legacy UI. Customer
 * overrides of the original templates and selectors continue to behave
 * exactly as before.
 *
 * @since 2.4.0
 */

/* Palette tokens hoisted to the body class so they're available to both the
 * My Campaigns wrapper (.charitable-ambassadors-mc) and the campaign
 * submission form (#charitable-campaign-submission-form). Only present when
 * the enhanced UI is active. */
.charitable-ambassadors-ui-enhanced {
	--cmc-color-primary: #2f80ed;
	--cmc-color-primary-dark: #1f5fbf;
	--cmc-color-text: #1f2933;
	--cmc-color-text-muted: #6b7785;
	--cmc-color-border: #e4e7eb;
	--cmc-color-surface: #ffffff;
	--cmc-color-surface-alt: #f8f9fb;
	--cmc-color-success: #1f9d55;
	--cmc-color-success-soft: #e3f7ec;
	--cmc-color-warning: #b07408;
	--cmc-color-warning-soft: #fff4d6;
	--cmc-color-danger: #c53030;
	--cmc-color-danger-soft: #fde8e8;
	--cmc-color-info: #2b6cb0;
	--cmc-color-info-soft: #e0eefc;
	--cmc-radius: 12px;
	--cmc-radius-sm: 6px;
	--cmc-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .04);
	--cmc-shadow-hover: 0 4px 12px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .08);
	--cmc-gap: 16px;
}

.charitable-ambassadors-mc {
	color: var(--cmc-color-text);
	margin: 0 0 2em;
}

.charitable-ambassadors-mc *,
.charitable-ambassadors-mc *::before,
.charitable-ambassadors-mc *::after {
	box-sizing: border-box;
}

/* Toolbar (search + create) ----------------------------------------------- */
.charitable-ambassadors-mc .cmc-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmc-gap);
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.charitable-ambassadors-mc .cmc-toolbar__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.charitable-ambassadors-mc .cmc-search {
	position: relative;
	flex: 1 1 240px;
	max-width: 420px;
}

.charitable-ambassadors-mc .cmc-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--cmc-color-text-muted);
	pointer-events: none;
}

.charitable-ambassadors-mc .cmc-search__input {
	width: 100%;
	padding: 10px 14px 10px 42px;
	font-size: 15px;
	color: var(--cmc-color-text);
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.charitable-ambassadors-mc .cmc-search__input:focus {
	outline: none;
	border-color: var(--cmc-color-primary);
	box-shadow: 0 0 0 3px rgba(47, 128, 237, .18);
}

.charitable-ambassadors-mc .cmc-search__empty {
	margin: 24px 0;
	padding: 24px;
	text-align: center;
	color: var(--cmc-color-text-muted);
	background: var(--cmc-color-surface-alt);
	border-radius: var(--cmc-radius);
}

.charitable-ambassadors-mc .cmc-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.charitable-ambassadors-mc .cmc-sort__label {
	font-size: 13px;
	color: var(--cmc-color-text-muted);
	white-space: nowrap;
}

.charitable-ambassadors-mc .cmc-sort__select {
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	color: var(--cmc-color-text);
	background-color: var(--cmc-color-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 8px;
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.charitable-ambassadors-mc .cmc-sort__select:focus {
	outline: none;
	border-color: var(--cmc-color-primary);
	box-shadow: 0 0 0 3px rgba(47, 128, 237, .18);
}

/* Buttons ----------------------------------------------------------------- */
.charitable-ambassadors-mc .cmc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cmc-color-text);
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

/* Defense against themes that underline anchors. Buttons and button-like
 * links should never carry a default text-decoration, even in :hover or
 * :visited states. The ghost-link hover rule below adds an underline back
 * for the View / Share triggers only. */
.charitable-ambassadors-mc .cmc-btn,
.charitable-ambassadors-mc .cmc-btn:link,
.charitable-ambassadors-mc .cmc-btn:visited,
.charitable-ambassadors-mc .cmc-btn:hover,
.charitable-ambassadors-mc .cmc-btn:focus,
.charitable-ambassadors-mc .cmc-btn:focus-visible,
.charitable-ambassadors-mc .cmc-btn:active {
	text-decoration: none !important;
}

.charitable-ambassadors-mc .cmc-btn:hover,
.charitable-ambassadors-mc .cmc-btn:focus-visible {
	background: var(--cmc-color-surface-alt);
	color: var(--cmc-color-text);
}

.charitable-ambassadors-mc .cmc-btn:focus-visible {
	outline: 2px solid var(--cmc-color-primary);
	outline-offset: 2px;
}

.charitable-ambassadors-mc .cmc-btn--primary {
	background: var(--cmc-color-primary);
	border-color: var(--cmc-color-primary);
	color: #fff;
}

.charitable-ambassadors-mc .cmc-btn--primary:hover,
.charitable-ambassadors-mc .cmc-btn--primary:focus-visible {
	background: var(--cmc-color-primary-dark);
	border-color: var(--cmc-color-primary-dark);
	color: #fff;
}

.charitable-ambassadors-mc .cmc-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cmc-color-text-muted);
}

.charitable-ambassadors-mc .cmc-btn--ghost:hover,
.charitable-ambassadors-mc .cmc-btn--ghost:focus-visible {
	background: var(--cmc-color-surface-alt);
	color: var(--cmc-color-text);
}

/* Only the View anchor (and any future anchor-ghost) gets a hover
 * underline. Popover triggers like Share / More are buttons and shouldn't
 * pick up the link-style affordance. */
.charitable-ambassadors-mc a.cmc-btn--ghost:hover,
.charitable-ambassadors-mc a.cmc-btn--ghost:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.charitable-ambassadors-mc .cmc-btn__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

/* Card -------------------------------------------------------------------- */
.charitable-ambassadors-mc .cmc-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* Two-column layout only kicks in once the content column is wide enough
 * for the thumbnail + body + actions to render without wrapping. Most
 * themes' singular content columns are 700–900px, which is too tight for
 * two cards side by side; opt in at 1280px viewport. */
@media (min-width: 1280px) {
	.charitable-ambassadors-mc[data-cmc-layout="grid"] .cmc-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.charitable-ambassadors-mc .cmc-card {
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-template-rows: 1fr auto;
	gap: 0;
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	box-shadow: var(--cmc-shadow);
	/* No overflow: hidden — the share popover needs to escape the card. */
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
	list-style: none;
	margin: 0;
	padding: 0;
}

.charitable-ambassadors-mc .cmc-card:hover {
	box-shadow: var(--cmc-shadow-hover);
	border-color: #d6dbe3;
}

.charitable-ambassadors-mc .cmc-card.is-hidden {
	display: none;
}

@media (max-width: 600px) {
	.charitable-ambassadors-mc .cmc-card {
		grid-template-columns: 1fr;
	}
}

/* Cards rendered without a thumbnail (no featured image, or
 * charitable_ambassadors_my_campaigns_show_thumbnail = false) collapse to a
 * single column so the body and footer fill the full card width. */
.charitable-ambassadors-mc .cmc-card.cmc-card--no-thumb {
	grid-template-columns: 1fr;
}

.charitable-ambassadors-mc .cmc-card.cmc-card--no-thumb .cmc-card__actions {
	grid-column: 1 / -1;
}

.charitable-ambassadors-mc .cmc-card__thumb {
	grid-row: 1 / span 2;
	display: block;
	background: var(--cmc-color-surface-alt);
	overflow: hidden;
	align-self: stretch;
	border-radius: var(--cmc-radius) 0 0 var(--cmc-radius);
}

@media (max-width: 600px) {
	.charitable-ambassadors-mc .cmc-card__thumb {
		border-radius: var(--cmc-radius) var(--cmc-radius) 0 0;
	}
}

.charitable-ambassadors-mc .cmc-card__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.charitable-ambassadors-mc .cmc-card__thumb {
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}
}

.charitable-ambassadors-mc .cmc-card__body {
	padding: 18px 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.charitable-ambassadors-mc .cmc-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.charitable-ambassadors-mc .cmc-card__title {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 600;
	min-width: 0;
	flex: 1 1 auto;
}

.charitable-ambassadors-mc .cmc-card__title a {
	color: var(--cmc-color-text);
	text-decoration: none;
	box-shadow: none;
}

.charitable-ambassadors-mc .cmc-card__title a:hover,
.charitable-ambassadors-mc .cmc-card__title a:focus-visible {
	color: var(--cmc-color-primary);
	text-decoration: none;
}

/* Status badges ----------------------------------------------------------- */
/* Pill with a small leading status dot. Background is slightly opaque so the
 * chip reads against a white card surface; the dot picks up the same hue as
 * the foreground text but full-saturated to keep a clear focal point. */
.charitable-ambassadors-mc .cmc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	background: #eef0f4;
	color: #4b5160;
	border: 1px solid transparent;
	flex: 0 0 auto;
	line-height: 1;
}

.charitable-ambassadors-mc .cmc-badge::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .85;
	flex: 0 0 6px;
}

.charitable-ambassadors-mc .cmc-badge--active {
	background: #e6f6ec;
	color: #137a3c;
	border-color: #c9ecd5;
}

.charitable-ambassadors-mc .cmc-badge--draft,
.charitable-ambassadors-mc .cmc-badge--auto-draft {
	background: #eef0f4;
	color: #4b5160;
	border-color: #dde1e8;
}

.charitable-ambassadors-mc .cmc-badge--pending {
	background: #fff3da;
	color: #8a5a00;
	border-color: #f3dca4;
}

.charitable-ambassadors-mc .cmc-badge--future {
	background: #e6f0fc;
	color: #1f5fb6;
	border-color: #c8def8;
}

.charitable-ambassadors-mc .cmc-badge--finished {
	background: #eee9fb;
	color: #5b3ea8;
	border-color: #d8cffa;
}

.charitable-ambassadors-mc .cmc-card--needs-action {
	border-left: 4px solid var(--cmc-color-danger);
}

/* Progress bar ------------------------------------------------------------ */
.charitable-ambassadors-mc .cmc-progress {
	display: flex;
	align-items: center;
	gap: 12px;
}

.charitable-ambassadors-mc .cmc-progress__track {
	flex: 1 1 auto;
	height: 10px;
	background: #e9edf2;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04);
}

.charitable-ambassadors-mc .cmc-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cmc-color-primary), var(--cmc-color-success));
	border-radius: 999px;
	transition: width .6s ease;
	min-width: 0;
}

/* Any non-zero raised amount renders at least a small visible pip so tiny
 * percentages (e.g. 0.16%) aren't invisible. Anything from 0.01%–2% rounds
 * up to a visible 2% bar width; 0% stays an empty track. */
.charitable-ambassadors-mc .cmc-progress[data-cmc-has-progress="1"] .cmc-progress__fill {
	min-width: 12px;
}

.charitable-ambassadors-mc .cmc-card--finished .cmc-progress__fill {
	background: var(--cmc-color-info);
}

.charitable-ambassadors-mc .cmc-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cmc-color-text-muted);
	flex: 0 0 auto;
	min-width: 48px;
	text-align: right;
}

/* Stats ------------------------------------------------------------------- */
.charitable-ambassadors-mc .cmc-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
}

.charitable-ambassadors-mc .cmc-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.charitable-ambassadors-mc .cmc-stat::before,
.charitable-ambassadors-mc .cmc-stat::after {
	content: none;
}

/* Defensive: some themes/plugins ship `:where(path){ fill: inherit }` (e.g. a
   commons.css reset) which, despite zero specificity, still overrides the
   fill="none" presentation attribute on our outline <path> icons and makes
   them inherit black (J1: black stat/button/search icons on the fundraising
   list). Re-assert fill:none on our icon SVGs; genuinely filled parts (e.g.
   the goal icon's center dot) keep their own fill="currentColor" attribute. */
.charitable-ambassadors-mc svg[class*="__icon"] {
	fill: none;
}

.charitable-ambassadors-mc .cmc-stat__icon {
	width: 18px;
	height: 18px;
	color: var(--cmc-color-text-muted);
	flex: 0 0 18px;
}

.charitable-ambassadors-mc .cmc-stat__value {
	font-weight: 600;
	color: var(--cmc-color-text);
}

.charitable-ambassadors-mc .cmc-stat__label {
	color: var(--cmc-color-text-muted);
}

/* Card actions / footer --------------------------------------------------- */
.charitable-ambassadors-mc .cmc-card__actions {
	grid-column: 2 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--cmc-color-border);
	background: var(--cmc-color-surface);
}

@media (max-width: 600px) {
	.charitable-ambassadors-mc .cmc-card__actions {
		grid-column: 1 / -1;
	}
}

/* Share popover ----------------------------------------------------------- */
.charitable-ambassadors-mc .cmc-share {
	position: relative;
	margin-left: auto;
}

.charitable-ambassadors-mc .cmc-share__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	min-width: 220px;
	padding: 6px;
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	box-shadow: var(--cmc-shadow-hover);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.charitable-ambassadors-mc .cmc-share__menu[hidden] {
	display: none;
}

.charitable-ambassadors-mc .cmc-share__item,
.charitable-ambassadors-mc a.cmc-share__item,
.charitable-ambassadors-mc a.cmc-share__item:link,
.charitable-ambassadors-mc a.cmc-share__item:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	color: var(--cmc-color-text);
	background: transparent;
	border: 0;
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	text-align: left;
	text-decoration: none !important;
}

.charitable-ambassadors-mc .cmc-share__item:hover,
.charitable-ambassadors-mc .cmc-share__item:focus,
.charitable-ambassadors-mc .cmc-share__item:focus-visible,
.charitable-ambassadors-mc a.cmc-share__item:hover,
.charitable-ambassadors-mc a.cmc-share__item:focus,
.charitable-ambassadors-mc a.cmc-share__item:focus-visible {
	background: var(--cmc-color-surface-alt);
	color: var(--cmc-color-text);
	text-decoration: none !important;
}

/* More menu (QR Code / Embed / Updates overflow) -------------------------- */
.charitable-ambassadors-mc .cmc-more {
	position: relative;
}

.charitable-ambassadors-mc .cmc-more__trigger-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--cmc-color-primary);
	border-radius: 9px;
	line-height: 1;
}

.charitable-ambassadors-mc .cmc-more__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	min-width: 220px;
	padding: 6px;
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	box-shadow: var(--cmc-shadow-hover);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.charitable-ambassadors-mc .cmc-more__menu[hidden] {
	display: none;
}

.charitable-ambassadors-mc .cmc-more__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	color: var(--cmc-color-text);
	background: transparent;
	border: 0;
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	text-align: left;
}

.charitable-ambassadors-mc .cmc-more__item:hover,
.charitable-ambassadors-mc .cmc-more__item:focus-visible {
	background: var(--cmc-color-surface-alt);
	color: var(--cmc-color-text);
	outline: none;
}

/* Anchor variant: match the button items exactly (no underline, inherit color) */
.charitable-ambassadors-mc a.cmc-more__item,
.charitable-ambassadors-mc a.cmc-more__item:hover,
.charitable-ambassadors-mc a.cmc-more__item:focus-visible {
	text-decoration: none !important;
	color: inherit;
}

.charitable-ambassadors-mc .cmc-more__item .cmc-more__label {
	text-decoration: none !important;
}

.charitable-ambassadors-mc .cmc-more__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: var(--cmc-color-text-muted);
}

.charitable-ambassadors-mc .cmc-more__label {
	flex: 1 1 auto;
}

.charitable-ambassadors-mc .cmc-more__item-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--cmc-color-primary);
	background: rgba(47, 128, 237, .12);
	border-radius: 9px;
	line-height: 1;
}

/* Disabled states for actions that require a published campaign. The native
 * disabled attribute already blocks clicks and submits; these rules mute the
 * visual affordance so the user understands the action is unavailable. */
.charitable-ambassadors-mc .cmc-btn[disabled],
.charitable-ambassadors-mc .cmc-btn[aria-disabled="true"],
.charitable-ambassadors-mc .cmc-more__item[disabled],
.charitable-ambassadors-mc .cmc-more__item[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: auto; /* keep tooltip + focus accessible */
}

.charitable-ambassadors-mc .cmc-btn[disabled]:hover,
.charitable-ambassadors-mc .cmc-btn[aria-disabled="true"]:hover,
.charitable-ambassadors-mc .cmc-btn[disabled]:focus-visible,
.charitable-ambassadors-mc .cmc-btn[aria-disabled="true"]:focus-visible,
.charitable-ambassadors-mc .cmc-more__item[disabled]:hover,
.charitable-ambassadors-mc .cmc-more__item[aria-disabled="true"]:hover,
.charitable-ambassadors-mc .cmc-more__item[disabled]:focus-visible,
.charitable-ambassadors-mc .cmc-more__item[aria-disabled="true"]:focus-visible {
	background: transparent;
	color: var(--cmc-color-text-muted);
	text-decoration: none !important;
}

.charitable-ambassadors-mc .cmc-share__item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

/* Share-menu item icon color. The icon SVGs use stroke/fill="currentColor",
 * which otherwise inherits the dark menu text (reads as black). Follow the
 * site's accent by default so the menu matches the brand. Override order:
 *   1. --cap-share-icon-color  (set via CSS, or the
 *      `charitable_ambassadors_share_icon_color` PHP filter) - lets a site
 *      force any color, e.g. #000 to keep the classic black.
 *   2. --cap-share-accent      (the site's Primary Accent Color, injected on
 *      :root by charitable_ambassadors_enqueue_enhanced_assets()). This is a
 *      dedicated, never-shadowed token so ALL share menus resolve to the SAME
 *      accent - unlike --cap-accent, which is re-declared per-surface (e.g.
 *      .charitable-ambassadors-fundraiser-page) and produced the purple-vs-green
 *      split between the fundraiser page and the dashboard.
 *   3. --cap-accent            (legacy fallback if the token is ever absent).
 *   4. currentColor            (original behaviour) when no accent is set.
 * Scoped to .cmc-share so it covers the share menu on the fundraiser page,
 * the My Campaigns shortcode, and the creator profile page alike. Only the
 * menu ITEM icons are recolored - the trigger button glyph is left alone. */
.cmc-share .cmc-share__item svg {
	color: var(--cap-share-icon-color, var(--cap-share-accent, var(--cap-accent, currentColor))) !important;
}
/* Outline (stroked) icon paths must not take a fill. Some themes force
 * `fill: currentColor` onto every SVG path, which overrides the fill="none"
 * attribute and paints the outline icons solid (they appeared black-filled
 * with only the stroke re-colored). Keep any stroked path unfilled so the
 * accent shows on its outline only; solid brand logos (fill, no stroke) are
 * unaffected and take the accent as their fill. */
.cmc-share .cmc-share__item svg [stroke] {
	fill: none !important;
}
/* Brand logos are fill-based paths with no stroke and fill="currentColor".
 * Some surface stylesheets (e.g. the My Campaigns dashboard) set `fill`
 * directly on SVG paths, and a CSS `fill` property overrides the presentation
 * attribute - so the logo renders black instead of following `color`. Force
 * currentColor on non-stroked paths so brand logos take the accent on EVERY
 * surface (the fundraiser page had no competing rule; the dashboard did). */
.cmc-share .cmc-share__item svg path:not([stroke]) {
	fill: currentColor !important;
}
/* The row "More" menu (QR Code / Embed / Updates) sits next to the share
 * menu on the My Campaigns dashboard; match its icons to the same accent so
 * the two dropdowns read as one set (they were a neutral grey otherwise). */
.cmc-more .cmc-more__item svg,
.cmc-more__menu .cmc-more__item svg {
	color: var(--cap-share-icon-color, var(--cap-share-accent, var(--cap-accent, currentColor))) !important;
}

.charitable-ambassadors-mc .cmc-share__item.is-copied {
	color: var(--cmc-color-success);
}

/* Empty state ------------------------------------------------------------- */
.charitable-ambassadors-mc .cmc-empty {
	padding: 40px 24px;
	text-align: center;
	background: var(--cmc-color-surface);
	border: 1px dashed var(--cmc-color-border);
	border-radius: var(--cmc-radius);
}

.charitable-ambassadors-mc .cmc-empty__icon {
	width: 48px;
	height: 48px;
	color: var(--cmc-color-primary);
	margin: 0 auto 12px;
	display: block;
}
/* The icon is an outline SVG using stroke="currentColor"; a presentation
 * attribute is the lowest-priority style, so front-end themes (e.g. Voxel/
 * Elementor) can override `svg path { stroke }` to black. Set the stroke
 * explicitly (with !important) so the accent always wins on themed sites. */
.charitable-ambassadors-mc .cmc-empty__icon path {
	stroke: var(--cmc-color-primary) !important;
	fill: none;
}

.charitable-ambassadors-mc .cmc-empty__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.charitable-ambassadors-mc .cmc-empty__desc {
	margin: 16px 0 24px;
	color: var(--cmc-color-text-muted);
}

/* Override aggressive theme list defaults inside the section ------------- */
.charitable-ambassadors-mc ul,
.charitable-ambassadors-mc li {
	list-style: none;
}

.charitable-ambassadors-mc .cmc-stats li::marker,
.charitable-ambassadors-mc .cmc-list > article::marker {
	content: none;
}

/* =========================================================================
 * Submit Campaign / Fundraiser form (enhanced)
 *
 * Scoped to body.charitable-ambassadors-ui-enhanced so the rules only ever
 * apply on sites that opted in via Settings → Ambassadors → Frontend Template
 * Style = Enhanced. Legacy sites keep their existing (theme-default) rendering.
 *
 * Selectors only add styling where the legacy stylesheet had nothing, so
 * customer overrides of `.charitable-form-field`, `.charitable-fieldset`, etc.
 * continue to win.
 * ========================================================================= */

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-form {
	color: var(--cmc-color-text);
	font-size: 15px;
	line-height: 1.5;
}

/* Section / fieldset wrappers ------------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-fieldset {
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	background: var(--cmc-color-surface);
	box-shadow: var(--cmc-shadow);
	padding: 24px 28px 12px;
	margin: 0 0 20px;
	min-width: 0;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-fieldset > legend {
	font-size: 17px;
	font-weight: 600;
	color: var(--cmc-color-text);
	padding: 0 8px;
	margin: 0 0 12px;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Field wrappers --------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field {
	margin: 0 0 18px;
	padding: 0;
	min-width: 0;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field > label,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-fieldset-field-header > label,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-header > label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--cmc-color-text);
	letter-spacing: 0;
	text-transform: none;
}

/* Required indicator: red dot, no underline ---------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field > label .required,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field > label abbr,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field > label .charitable-required {
	color: var(--cmc-color-danger);
	text-decoration: none;
	border: 0;
	font-weight: 600;
	margin-left: 2px;
}

/* Inputs / textareas / selects ----------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="text"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="email"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="url"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="tel"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="number"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="search"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="password"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="date"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form textarea,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--cmc-color-text);
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius-sm);
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
	transition: border-color .12s ease, box-shadow .12s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form textarea {
	min-height: 120px;
	font-family: inherit;
	resize: vertical;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input:focus,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form textarea:focus,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form select:focus {
	outline: none;
	border-color: var(--cmc-color-primary);
	box-shadow: 0 0 0 3px rgba(47, 128, 237, .18);
}

/* Select chevron --------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form select {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

/* Checkbox / radio: keep native sizing, just space them out ------------ */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="checkbox"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="radio"] {
	margin-right: 6px;
	vertical-align: middle;
}

/* TinyMCE rich editor wrappers ----------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .wp-editor-wrap,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .mce-tinymce {
	border-radius: var(--cmc-radius-sm);
	overflow: hidden;
	border: 1px solid var(--cmc-color-border) !important;
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .mce-toolbar-grp {
	border-bottom: 1px solid var(--cmc-color-border) !important;
	background: var(--cmc-color-surface-alt) !important;
}

/* Featured image / plupload uploader ------------------------------------ */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture .upload-img,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .plupload-upload-uic {
	border: 1px dashed var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	background: var(--cmc-color-surface-alt);
	padding: 16px;
	transition: border-color .12s ease, background-color .12s ease;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture .upload-img:hover,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture.dragover .upload-img {
	border-color: var(--cmc-color-primary);
	background: #f1f6fd;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture .upload-remove,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture a.upload-remove,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture .charitable-image-upload-remove {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cmc-color-text);
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-field-picture .upload-remove:hover {
	background: var(--cmc-color-danger-soft);
	border-color: var(--cmc-color-danger);
	color: var(--cmc-color-danger);
}

/* Submit row ------------------------------------------------------------ */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-submit-field {
	margin: 24px 0 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="submit"],
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-submit-field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--cmc-color-primary);
	border: 1px solid var(--cmc-color-primary);
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="submit"]:hover,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form input[type="submit"]:focus-visible,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-submit-field button:hover,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-submit-field button:focus-visible {
	background: var(--cmc-color-primary-dark);
	border-color: var(--cmc-color-primary-dark);
}

/* Help text ------------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-help,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .help,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .description {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--cmc-color-text-muted);
}

/* Notices already styled by Charitable; just space them ------------------ */
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-notice,
.charitable-ambassadors-ui-enhanced #charitable-campaign-submission-form .charitable-form-errors {
	margin-bottom: 16px;
	border-radius: var(--cmc-radius-sm);
}

/* =========================================================================
 * Modern fundraiser page (enhanced)
 *
 * Public template for /campaigns/<slug>/ when the campaign is an ambassador
 * fundraiser and the site is on `ambassadors_ui_version=enhanced`. Scoped to
 * .charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser so
 * legacy mode and non-fundraiser campaigns are unaffected.
 * ========================================================================= */

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser {
	color: var(--cmc-color-text);
	margin: 0 0 3em;
	font-size: 16px;
	line-height: 1.6;
	/* Anchor for the corner QR sticker (.caf-qr-sticker), which pins to the
	 * top-right of the hero/card via absolute positioning. */
	position: relative;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser *,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser *::before,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser *::after {
	box-sizing: border-box;
}

/* Hero ------------------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-hero {
	margin: 0 0 24px;
	border-radius: var(--cmc-radius);
	overflow: hidden;
	background: var(--cmc-color-surface-alt);
	aspect-ratio: var(--cap-photo-aspect, 16 / 9);
	/* @since 3.4.3 - wired defensively. Classic clears this cap at .caf-main
	   .caf-hero below and every other variant carries its own hero modifier, so
	   no shipped layout currently reaches this declaration with a photo hero.
	   Wiring it anyway means a future variant (or a theme override that bypasses
	   the modifier) cannot silently clip a filtered ratio. */
	max-height: var(--cap-photo-max-height, 400px);
}

/* J11 (classic layout): the hero now lives inside the content column. Make it
   position the QR sticker (rendered inside .caf-main) and fill the full column
   width at 16:9 — the 400px cap otherwise limits width to ~711px in an 856px
   column. Scoped to the classic layout so the other enhanced variants (which
   place their hero differently) are untouched. */
.charitable-ambassadors-layout-classic .charitable-ambassadors-fundraiser .caf-main {
	position: relative;
}
.charitable-ambassadors-layout-classic .charitable-ambassadors-fundraiser .caf-main .caf-hero {
	max-height: none;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-hero__image {
	width: 100%;
	height: 100%;
	object-fit: var(--cap-photo-fit, cover);
	display: block;
}

/* Breadcrumb ------------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--cmc-color-text-muted);
	margin: 0 0 16px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb__ambassador {
	font-weight: 600;
	color: var(--cmc-color-text);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb__parent {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--cmc-color-primary);
	text-decoration: none;
	font-weight: 500;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb__parent:hover {
	color: var(--cmc-color-primary-dark);
	text-decoration: underline;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb__arrow {
	width: 14px;
	height: 14px;
}

/* Layout (story + donate aside) ----------------------------------------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 880px) {
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-main {
	min-width: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-title {
	margin: 0 0 16px;
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cmc-color-text);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-story {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cmc-color-text);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-story > *:first-child {
	margin-top: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-story > *:last-child {
	margin-bottom: 0;
}

/* Donate card ----------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-aside {
	min-width: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-donate-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	box-shadow: var(--cmc-shadow);
}

/* The donate card hosts the (legacy) donation form. Constrain the form and its
   full-width Donate button to the card so broad theme/site rules such as
   ".single-campaign form { width: 800px }" cannot make it overflow the card. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-donate-card .campaign-donation {
	width: 100%;
	max-width: 100%;
}

@media (min-width: 880px) {
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-donate-card {
		position: sticky;
		top: 24px;
	}
}

/* Progress -------------------------------------------------------------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-progress__track {
	height: 10px;
	background: #e9edf2;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, .04);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cmc-color-primary), var(--cmc-color-success));
	border-radius: 999px;
	transition: width .6s ease;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-progress[data-cmc-has-progress="1"] .caf-progress__fill {
	min-width: 12px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cmc-color-text-muted);
}

/* Stats grid ------------------------------------------------------------ */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 0;
	padding: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-stat {
	margin: 0;
	min-width: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-stat dt {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cmc-color-text-muted);
	margin: 0 0 2px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-stat dd {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--cmc-color-text);
	line-height: 1.2;
}

/* Donate button (rendered by Charitable Pro's donate-button.php) -------- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .donate-button,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .charitable-donation-link {
	display: block;
	text-align: center;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .donate-button button,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser button.donate-button,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .charitable-donation-link,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.button.donate-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--cmc-color-primary);
	border: 1px solid var(--cmc-color-primary);
	border-radius: var(--cmc-radius-sm);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .donate-button button:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser button.donate-button:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .charitable-donation-link:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.button.donate-button:hover {
	background: var(--cmc-color-primary-dark);
	border-color: var(--cmc-color-primary-dark);
	color: #fff;
	text-decoration: none;
}

/* Share button + popover ------------------------------------------------ */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cmc-color-text);
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-share-btn svg {
	width: 16px;
	height: 16px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-share-btn:hover {
	background: var(--cmc-color-surface-alt);
}

/* Inner positioning wrapper emitted by render_share_popover() - keeps the
 * absolutely-positioned menu anchored to the share button regardless of
 * how wide the outer [data-cmc-share] container is. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share {
	position: relative;
	display: inline-block;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-share-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	min-width: 220px;
	padding: 6px;
	background: var(--cmc-color-surface);
	border: 1px solid var(--cmc-color-border);
	border-radius: var(--cmc-radius);
	box-shadow: var(--cmc-shadow-hover);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-share-menu[hidden] {
	display: none;
}

/* Items inside the share menu on the fundraiser page. Mirrors the
 * .charitable-ambassadors-mc block above; without these, the theme's
 * default <a> / <button> styles take over and render each entry as a
 * full-height blue button instead of a tight icon + label row. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item:link,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 8px 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cmc-color-text);
	background: transparent;
	border: 0;
	border-radius: var(--cmc-radius-sm);
	box-shadow: none;
	cursor: pointer;
	text-align: left;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: normal;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item:focus,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item:focus-visible,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item:focus,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser a.cmc-share__item:focus-visible {
	background: var(--cmc-color-surface-alt);
	color: var(--cmc-color-text);
	text-decoration: none !important;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cmc-share__item.is-copied {
	color: var(--cmc-color-success);
}

/* =====================================================================
 * Feature D: Story-Forward variant
 * Scope: body.charitable-ambassadors-layout-story-forward
 * ===================================================================== */

/* Single-column grid modifier — emitted by variant templates that want a
 * single column regardless of viewport. Used by Story-Forward, Stats-Forward,
 * Donate-First, and Magazine. The body-class scoped rules below override
 * the Classic 2-column rule; this base rule covers theme overrides that
 * may bypass the body-class scope. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-grid--single {
	grid-template-columns: 1fr;
}

.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-hero--tall {
	aspect-ratio: var(--cap-photo-aspect, 21 / 9);
	/* The base .caf-hero caps height at 400px. Combined with the 21/9 ratio
	 * that forces the box narrower than the content column (the browser shrinks
	 * width to preserve the ratio). Clear the cap so the hero fills full width. */
	max-height: none;
}
/* @since 3.4.3 - object-fit reads the photo variable. This rule restates the
   base .caf-hero__image declarations at higher specificity, so a hardcoded
   `cover` here shadowed the base rule's var() and made the object-fit filter a
   no-op on this variant. */
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-hero--tall .caf-hero__image {
	width: 100%;
	height: 100%;
	object-fit: var(--cap-photo-fit, cover);
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-story-forward-head {
	text-align: center;
	margin: 24px auto 16px;
	max-width: 720px;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-title--centered {
	text-align: center;
	font-size: clamp(28px, 4vw, 40px);
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-breadcrumb--centered {
	justify-content: center;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-grid {
	grid-template-columns: 1fr !important;
	max-width: 720px;
	margin: 0 auto;
}
@media (min-width: 880px) {
	.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-grid {
		grid-template-columns: 1fr !important;
	}
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-conversion-band {
	margin-top: 40px;
	padding: 32px 24px;
	background: var(--cmc-color-surface-alt, #f6f7f7);
	border-radius: var(--cmc-radius, 12px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-conversion-band .caf-stats--row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	margin: 0;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-conversion-band__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-donate--cta {
	font-size: 18px;
	padding: 14px 22px;
}

/* =====================================================================
 * Feature D: Stats-Forward variant
 * Scope: body.charitable-ambassadors-layout-stats-forward
 * ===================================================================== */

.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats-forward-top {
	display: grid;
	gap: 24px;
	margin-bottom: 24px;
}
@media (min-width: 960px) {
	.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats-forward-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-hero--short {
	max-height: var(--cap-photo-max-height, 280px);
	overflow: hidden;
	border-radius: var(--cmc-radius, 12px);
}
/* @since 3.4.3 - object-fit reads the photo variable (see the story-forward
   note above; same shadowing of the base .caf-hero__image rule). */
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-hero--short .caf-hero__image {
	width: 100%;
	height: 100%;
	object-fit: var(--cap-photo-fit, cover);
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats-forward-overlay {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats-forward-overlay__conv {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: var(--cmc-color-surface, #fff);
	border: 1px solid var(--cmc-color-border, #e5e7eb);
	border-radius: var(--cmc-radius, 12px);
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats--row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
	margin: 0;
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-grid {
	grid-template-columns: 1fr !important;
}
@media (min-width: 880px) {
	.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-grid {
		grid-template-columns: 1fr !important;
	}
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-stats-forward-share {
	margin-top: 24px;
	max-width: 360px;
}

/* =====================================================================
 * Feature D: Donate-First variant
 * Scope: body.charitable-ambassadors-layout-donate-first
 * ===================================================================== */

.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-hero--banner {
	/* Donate-First wants a thin cinematic banner so the conversion area
	 * (donate button + amounts) stays dominant. 21/9 spans full container
	 * width with object-fit: cover handling whatever ratio the ambassador
	 * uploaded; no max-height clamp - that's what made the hero collapse
	 * to a 355px thumbnail under the inherited 16/9 ratio. */
	aspect-ratio: var(--cap-photo-aspect, 21 / 9);
	max-height: none;
	overflow: hidden;
	border-radius: var(--cmc-radius, 12px);
}
/* @since 3.4.3 - object-fit reads the photo variable (see the story-forward
   note above; same shadowing of the base .caf-hero__image rule). */
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-hero--banner .caf-hero__image {
	width: 100%;
	height: 100%;
	object-fit: var(--cap-photo-fit, cover);
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-first-head {
	margin: 20px 0 16px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-first-action {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--cmc-color-surface, #fff);
	border: 1px solid var(--cmc-color-border, #e5e7eb);
	border-radius: var(--cmc-radius, 12px);
	margin-bottom: 24px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-inline {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-inline__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-inline__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cmc-color-primary, #1db954);
	background: var(--cmc-color-surface-alt, #f6f7f7);
	border: 1px solid var(--cmc-color-border, #e5e7eb);
	border-radius: 999px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-inline__amount {
	width: 100%;
	max-width: 240px;
	padding: 10px 12px;
	font-size: 16px;
	border: 1px solid var(--cmc-color-border, #e5e7eb);
	border-radius: var(--cmc-radius-sm, 6px);
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-stats--sentence {
	/* Override base .caf-stats { display: grid; 2-cols } so the sentence
	 * spans flow inline as a single sentence rather than as grid items. */
	display: block;
	grid-template-columns: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cmc-color-text-muted, #555);
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-stats--sentence > span {
	display: inline;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-stats-sentence__sep {
	margin: 0 6px;
	color: var(--cmc-color-border-strong, #cbd5e1);
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-donate-first-share {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-share-btn--compact {
	width: auto;
	padding: 8px 14px;
	font-size: 13px;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-story-wrap--collapsed .caf-story--collapsed {
	max-height: 8em;
	overflow: hidden;
	mask-image: linear-gradient( 180deg, #000 60%, transparent 100% );
	-webkit-mask-image: linear-gradient( 180deg, #000 60%, transparent 100% );
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-story-toggle {
	margin-top: 8px;
	background: none;
	border: 0;
	color: var(--cmc-color-primary, #1db954);
	font-weight: 600;
	cursor: pointer;
	padding: 6px 0;
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-grid {
	grid-template-columns: 1fr !important;
}
@media (min-width: 880px) {
	.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-grid {
		grid-template-columns: 1fr !important;
	}
}

/* =====================================================================
 * Feature D: Magazine variant
 * Scope: body.charitable-ambassadors-layout-magazine
 * ===================================================================== */

.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-title--editorial {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: clamp(28px, 4.6vw, 48px);
	font-weight: 700;
	text-align: center;
	margin: 24px auto 20px;
	max-width: 900px;
	line-height: 1.15;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-hero--cinematic {
	aspect-ratio: var(--cap-photo-aspect, 16 / 9);
	/* @since 3.4.3 - reads the photo variable. A hardcoded 540px cap clipped a
	   filtered ratio: `1 / 1` produced a 540x540 centred box instead of a
	   full-width square. The emitter sets --cap-photo-max-height to none
	   whenever a ratio is in play. */
	max-height: var(--cap-photo-max-height, 540px);
	overflow: hidden;
	border-radius: var(--cmc-radius, 12px);
	/* max-height + aspect-ratio collapse the hero to ~960x540 when the
	 * article is wider than 960. Center it so it visually aligns with the
	 * editorial title above and the narrow story column below, instead of
	 * sitting flush-left in the wider article. */
	margin-left: auto;
	margin-right: auto;
}
/* @since 3.4.3 - object-fit reads the photo variable (see the story-forward
   note above; same shadowing of the base .caf-hero__image rule). */
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-hero--cinematic .caf-hero__image {
	width: 100%;
	height: 100%;
	object-fit: var(--cap-photo-fit, cover);
}
/* @since 3.0.1 - 0-photo cinematic band. The accent-tinted gradient
 * is set via inline style on the empty <div>; this rule just makes
 * sure the gradient fills the 16:9 box and centers visually like
 * the imaged variant above. */
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-hero--cinematic.caf-hero--no-image {
	/* The 0-photo band is an empty <div>; give it an explicit width so it
	 * fills the hero box instead of collapsing to zero inside the
	 * fit-content magazine-hero wrapper (which dropped the corner QR
	 * sticker onto the story text). */
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* 0-photo Magazine hero wrapper: sized for a real image via fit-content, it
 * collapses to zero around the width-less gradient band, so the absolutely
 * positioned QR sticker anchored to it floated over the description. Give the
 * no-image wrapper an explicit 16:9 band width so the band paints and the
 * sticker pins to its top-right corner. */
.charitable-ambassadors-ui-enhanced .caf-variant--magazine.caf-variant--magazine--no-image .caf-magazine-hero {
	width: 100%;
	max-width: 960px;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-body {
	max-width: 720px;
	margin: 32px auto;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-story--magazine {
	font-size: 17px;
	line-height: 1.75;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-story--magazine blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	margin: 24px 0;
	padding: 12px 0 12px 20px;
	border-left: 3px solid var(--cmc-color-primary, #1db954);
	color: var(--cmc-color-text, #1f2937);
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-stats {
	max-width: 900px;
	margin: 24px auto;
	padding: 24px 0;
	border-top: 1px solid var(--cmc-color-border, #e5e7eb);
	border-bottom: 1px solid var(--cmc-color-border, #e5e7eb);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-stats--typographic {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin: 0;
	background: transparent;
	border: 0;
	padding: 0;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-stats--typographic .caf-stat {
	background: transparent;
	border: 0;
	padding: 0;
	text-align: center;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-stats--typographic dt {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cmc-color-text-muted, #6b7280);
	margin-bottom: 4px;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-stats--typographic dd {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-stats__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-stats__cta .caf-share-btn {
	width: auto;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-footer {
	display: grid;
	gap: 24px;
	max-width: 1000px;
	margin: 32px auto;
}
@media (min-width: 960px) {
	.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-footer {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-magazine-donor-wall-top {
	margin-bottom: 24px;
}

/* ----------------------------------------------------------------------
 * Clean theme chrome on fundraiser pages.
 *
 * Body class `charitable-ambassadors-clean-chrome` is added by
 * `maybe_add_fundraiser_body_class()` when the resolver
 * `charitable_ambassadors_should_clean_fundraiser_chrome()` returns true
 * (gate: Enhanced/Visual mode + `fundraiser_clean_chrome` setting + is
 * fundraiser page). The PHP side closes comments / prev-next links;
 * these rules wipe the residual theme markup themes still print before
 * and after our template — entry-header (title + meta), entry-footer,
 * post-navigation, comments-area — so the page looks the way the
 * Ambassadors layout was designed without theme-side customizations.
 *
 * !important is necessary here: every selector targets theme-owned
 * markup whose own rules carry full theme-stylesheet specificity. Our
 * own template emits `.caf-*` class names that don't overlap with any
 * of these selectors, so the override never touches Ambassadors output.
 * Block-theme equivalents (.wp-block-post-*) are listed last to cover
 * Twenty Twenty-X-style themes too.
 * ---------------------------------------------------------------------- */
body.charitable-ambassadors-clean-chrome .entry-header,
body.charitable-ambassadors-clean-chrome .entry-meta,
body.charitable-ambassadors-clean-chrome .entry-footer,
body.charitable-ambassadors-clean-chrome .post-navigation,
body.charitable-ambassadors-clean-chrome .posts-navigation,
body.charitable-ambassadors-clean-chrome .nav-below,
body.charitable-ambassadors-clean-chrome .nav-links,
body.charitable-ambassadors-clean-chrome #nav-below,
body.charitable-ambassadors-clean-chrome #comments,
body.charitable-ambassadors-clean-chrome .comments-area,
body.charitable-ambassadors-clean-chrome .comments-title,
body.charitable-ambassadors-clean-chrome .comment-respond,
body.charitable-ambassadors-clean-chrome #respond,
body.charitable-ambassadors-clean-chrome .wp-block-post-author,
body.charitable-ambassadors-clean-chrome .wp-block-post-date,
body.charitable-ambassadors-clean-chrome .wp-block-comments,
body.charitable-ambassadors-clean-chrome .wp-block-comments-form,
body.charitable-ambassadors-clean-chrome .wp-block-post-comments-form,
body.charitable-ambassadors-clean-chrome .wp-block-post-navigation-link {
	display: none !important;
}

/* =========================================================================
 * Corner QR sticker (.caf-qr-sticker)
 *
 * Compact, clickable QR "sticker" pinned to the top-right corner of the
 * fundraiser hero/card on every Enhanced template EXCEPT Rally (Rally
 * renders its own inline QR card). Rendered by
 * charitable_ambassadors_render_qr_sticker(), gated server-side on the
 * "Show QR Code On Fundraiser Page" setting. The inner QR SVG is drawn
 * client-side by charitable-ambassadors-qr-code.js into [data-cap-qr-sticker].
 *
 * Clicking the sticker opens the existing QR modal (it carries
 * data-cmc-share-action="qr"). Matches the QR sticker shown in the admin
 * Templates -> Fundraiser Page preview.
 * ========================================================================= */

/* Magazine puts the title above the hero, so its sticker renders inside a
 * .caf-magazine-hero wrapper (not at the article top). Make that wrapper the
 * positioning context so the sticker pins to the hero image's top-right,
 * matching the other enhanced layouts. */
.charitable-ambassadors-ui-enhanced .caf-variant--magazine .caf-magazine-hero {
	position: relative;
	/* Shrink to the centered cinematic hero's width so the sticker's
	 * right edge lands on the hero image, not the wider content column. */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 84px;
	margin: 0;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	line-height: 1;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__svg {
	display: block;
	width: 72px;
	height: 72px;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #1d2327;
	text-transform: uppercase;
}

/* Narrow screens: shrink the sticker and tuck it tighter into the corner so
 * it does not overlap the hero title. Below 480px it shrinks further. */
@media (max-width: 782px) {
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker {
		width: 68px;
		top: 8px;
		right: 8px;
		padding: 5px;
	}
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__svg {
		width: 56px;
		height: 56px;
	}
}

@media (max-width: 480px) {
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker {
		width: 56px;
		padding: 4px;
	}
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__svg {
		width: 46px;
		height: 46px;
	}
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-qr-sticker__label {
		font-size: 10px;
	}
}

/* --- Creator treatment (campaign-page avatar + tooltip). Scoped under the
 * enhanced body class + fundraiser wrapper; !important defends against theme
 * link/color/positioning overrides on Voxel/Elementor/block themes. --- */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity__avatar,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity-avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	flex: 0 0 auto;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity-avatar,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity-avatar--initials {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 12px !important;
	color: #fff !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	z-index: 9999 !important;
	min-width: 200px !important;
	max-width: 340px !important;
	padding: 16px !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1px solid #e2e6ea !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
	text-align: left !important;
	line-height: 1.4 !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card[hidden] { display: none !important; }
/* Head: circular avatar on the left, name + org stacked to its right. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__head {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__avatar,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	object-fit: cover !important;
	flex: 0 0 auto;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__identity {
	display: flex !important;
	flex-direction: column;
	min-width: 0;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__name {
	font-weight: 700 !important;
	color: var(--cap-accent, #1a1a1a) !important;
}
/* Inline creator name (link or span) follows the accent too, for parity with
 * the tooltip card and the profile page. Falls back to currentColor when no
 * accent is set. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity__name {
	color: var(--cap-accent, currentColor) !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__org {
	font-size: 0.85em !important;
	color: #646970 !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__bio {
	display: block !important;
	margin-bottom: 12px !important;
	color: #3c434a !important;
}
/* Icon-only social row. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: #f0f2f5 !important;
	color: #3c434a !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social-link:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social-link:focus {
	background: #e2e6ea !important;
	color: #1a1a1a !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 16px !important;
	height: 16px !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__social-icon svg {
	width: 16px !important;
	height: 16px !important;
}
/* Profile button: full-width, own row, theme accent bg (via inline
 * --cap-card-accent custom property; the !important still holds vs themes). */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__button {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 4px 0 0 !important;
	padding: 9px 12px !important;
	text-align: center !important;
	color: #fff !important;
	background: var(--cap-card-accent, #2f80ed) !important;
	border: 1px solid var(--cap-card-accent, #2f80ed) !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__button:hover,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-card__button:focus {
	opacity: 0.92 !important;
	color: #fff !important;
}
/* Hover/focus reveal is JS-driven (toggles [hidden] + aria-expanded); this is a
 * CSS-only progressive fallback for pointer users when JS enqueues late. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity:hover .cap-creator-card,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .cap-creator-identity:focus-within .cap-creator-card {
	display: block !important;
}

/* =========================================================================
 * Public Profile edit form (Profile tab of the My Campaigns dashboard).
 *
 * This form previously shipped no CSS and inherited the active theme's raw
 * form styles, so it looked cramped/unstyled on some themes. Style it to the
 * ambassador baseline (--cmc-* tokens, 15px inputs, 13px bold labels), with
 * defensive !important on layout-critical properties so it renders the same
 * on any theme. Scoped under .charitable-ambassadors-mc (the dashboard).
 * ====================================================================== */
/* Breathing room between the My Campaigns tab nav and the profile heading. */
.charitable-ambassadors-mc .cap-profile-tab {
	margin-top: 28px !important;
}
.charitable-ambassadors-mc .cap-profile-tab__title {
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--cmc-color-text) !important;
	margin: 0 0 6px !important;
}
.charitable-ambassadors-mc .cap-profile-tab__intro {
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--cmc-color-text-muted) !important;
	margin: 0 0 20px !important;
}
/* Group the details + social field sets into cards. Bottom padding is trimmed
 * because the last field inside each card carries its own 16px margin. */
.charitable-ambassadors-mc .cap-profile-card {
	background: var(--cmc-color-surface) !important;
	border: 1px solid var(--cmc-color-border) !important;
	border-radius: var(--cmc-radius) !important;
	padding: 20px 20px 4px !important;
	margin: 0 0 20px !important;
}
.charitable-ambassadors-mc .cap-profile-form {
	max-width: 640px;
}
.charitable-ambassadors-mc .cap-profile-field {
	margin: 0 0 16px !important;
}
/* Social links render in two columns (collapse to one on narrow screens). */
.charitable-ambassadors-mc .cap-profile-social {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}
.charitable-ambassadors-mc .cap-profile-social .cap-profile-field {
	margin: 0 0 16px !important;
}
@media (max-width: 600px) {
	.charitable-ambassadors-mc .cap-profile-social {
		grid-template-columns: 1fr;
	}
}
/* First + Last name share one row. */
.charitable-ambassadors-mc .cap-profile-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 16px;
}
.charitable-ambassadors-mc .cap-profile-row .cap-profile-field {
	margin: 0 !important;
}
/* Field label (the primary label is the field's first child; the checkbox /
 * avatar-remove labels below are excluded so they stay inline + regular). */
.charitable-ambassadors-mc .cap-profile-field > label:first-child {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cmc-color-text) !important;
	margin: 0 0 6px !important;
}
.charitable-ambassadors-mc .cap-profile-field input[type="text"],
.charitable-ambassadors-mc .cap-profile-field input[type="url"],
.charitable-ambassadors-mc .cap-profile-field input[type="email"],
.charitable-ambassadors-mc .cap-profile-field textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--cmc-color-text) !important;
	background: var(--cmc-color-surface) !important;
	border: 1px solid var(--cmc-color-border) !important;
	border-radius: var(--cmc-radius-sm) !important;
	-webkit-appearance: none;
	appearance: none;
}
.charitable-ambassadors-mc .cap-profile-field textarea {
	min-height: 96px;
	resize: vertical;
}
.charitable-ambassadors-mc .cap-profile-field input[type="text"]:focus,
.charitable-ambassadors-mc .cap-profile-field input[type="url"]:focus,
.charitable-ambassadors-mc .cap-profile-field input[type="email"]:focus,
.charitable-ambassadors-mc .cap-profile-field textarea:focus {
	outline: none !important;
	border-color: var(--cmc-color-primary) !important;
	box-shadow: 0 0 0 3px rgba(47, 128, 237, .18) !important;
}
/* Profile photo. */
.charitable-ambassadors-mc .cap-profile-avatar-preview {
	margin: 0 0 10px !important;
}
.charitable-ambassadors-mc .cap-profile-avatar-preview img,
.charitable-ambassadors-mc .cap-profile-avatar-preview .cap-profile-avatar {
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	border: 0 !important;
}
.charitable-ambassadors-mc .cap-profile-avatar-preview .cap-profile-avatar--initials {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 32px !important;
	line-height: 1 !important;
	text-transform: uppercase;
}
.charitable-ambassadors-mc .cap-profile-field--avatar input[type="file"] {
	display: block;
	font-size: 13px;
	margin: 0 0 8px;
}
.charitable-ambassadors-mc .cap-profile-avatar-remove {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--cmc-color-text-muted) !important;
}
/* Location toggles + notes. */
.charitable-ambassadors-mc .cap-profile-field__toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--cmc-color-text-muted) !important;
}
.charitable-ambassadors-mc .cap-profile-field__note {
	font-size: 13px !important;
	color: var(--cmc-color-text-muted) !important;
	margin: 0 0 16px !important;
}
/* Save button = accent (matches the dashboard's primary buttons). */
.charitable-ambassadors-mc .cap-profile-form__actions {
	margin: 24px 0 0 !important;
}
.charitable-ambassadors-mc .cap-profile-form__actions button,
.charitable-ambassadors-mc .cap-profile-form__actions .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--cmc-color-primary, #5c2d91) !important;
	border: 0 !important;
	border-radius: var(--cmc-radius-sm) !important;
	cursor: pointer;
	text-decoration: none !important;
	text-shadow: none !important;
}
.charitable-ambassadors-mc .cap-profile-form__actions button:hover,
.charitable-ambassadors-mc .cap-profile-form__actions .button:hover {
	filter: brightness(.95);
}
@media (max-width: 600px) {
	.charitable-ambassadors-mc .cap-profile-row {
		grid-template-columns: 1fr;
	}
}


/* Tall hero treatment (3.4.5) ------------------------------------------------
   Applied by the `charitable-ambassadors-hero-tall` body class, which
   maybe_add_fundraiser_body_class() adds when Hero Image Framing is Automatic
   and the resolved hero image is taller than it is wide.

   SOURCE ORDER IS LOAD-BEARING. These selectors chain two body classes for
   specificity (0,0,4) so they beat the base .caf-hero rule (0,0,3) and tie with
   the per-variant hero modifiers - and because they sit at the end of the file,
   the tie resolves in their favour. Moving this block above the variant
   modifiers around lines 1447 / 1530 / 1580 / 1707 silently disables it on four
   layouts.

   The frame stops being a 16:9 box entirely: no aspect ratio, no height cap, no
   surface background. The image then renders at its own shape, centred, capped
   in height - so a portrait poster simply gets smaller rather than being cropped
   to a slice through the middle. */
.charitable-ambassadors-ui-enhanced.charitable-ambassadors-hero-tall .charitable-ambassadors-fundraiser .caf-hero {
	aspect-ratio: auto;
	max-height: none;
	background: transparent;
	display: flex;
	justify-content: center;
}

.charitable-ambassadors-ui-enhanced.charitable-ambassadors-hero-tall .charitable-ambassadors-fundraiser .caf-hero__image {
	width: auto;
	height: auto;
	max-height: var(--cap-hero-tall-max, 460px);
	object-fit: contain;
	border-radius: var(--cmc-radius);
}

/* Fundraiser portrait (3.4.5) -----------------------------------------------
   Default placement `row`: the breadcrumb becomes a two-line block with the
   portrait beside both lines. Without a portrait the row keeps its original
   single-line flex layout, so nothing changes for existing pages. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb--has-portrait {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: nowrap;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

/* The name gets two different classes depending on a setting, and BOTH must be
   styled or the two-line row renders an unstyled name on most sites.
   `creator_treatment_enabled` is OFF by default, in which case
   render_creator_identity() returns the legacy bare span
   `<span class="caf-breadcrumb__ambassador">`. Only when the treatment is ON does
   `.cap-creator-identity__name` exist. Verified on .peer, where the default-off
   path is what actually renders. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb--has-portrait .cap-creator-identity__name,
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-breadcrumb--has-portrait .caf-breadcrumb__ambassador {
	font-size: 15px;
	font-weight: 700;
	color: var(--cmc-color-text, inherit);
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait__img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait--inline .caf-portrait__img {
	width: 28px;
	height: 28px;
}

/* `overlap` is filter-only and has no admin control. Scoped to a hero that
   ACTUALLY contains a portrait - a blanket `position:relative` on every
   .caf-hero would change the containing block for absolutely-positioned
   descendants on all nine layouts. The QR sticker happens to be a sibling
   (rendered inside .caf-main, see the classic template) so it would survive,
   but scoping is free and removes the question. */
.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-hero--has-portrait {
	position: relative;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait--overlap {
	position: absolute;
	left: 16px;
	bottom: -24px;
	z-index: 2;
}

.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait--overlap .caf-portrait__img {
	width: 96px;
	height: 96px;
	border-radius: 12px;
	border: 4px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

@media (max-width: 600px) {
	.charitable-ambassadors-ui-enhanced .charitable-ambassadors-fundraiser .caf-portrait--overlap .caf-portrait__img {
		width: 68px;
		height: 68px;
	}
}

.charitable-ambassadors-ui-enhanced .cap-identity-av--photo { padding: 0; overflow: hidden; }
.charitable-ambassadors-ui-enhanced .cap-identity-av__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ==========================================================================
   3.4.5 - the "you're live" moment.

   Two surfaces, both mounted on charitable_ambassadors_my_campaigns_before_grid:
   the status-aware submit confirmation (priority 4) and the one-time launch
   panel (priority 6).

   HAND-EDITED FILE. charitable-ambassadors-enhanced.css has no SCSS twin, no
   .min.css, and is not in bin/build-min.mjs's CSS_TARGETS - `npm run build`
   neither regenerates nor reverts it. Do not create a twin without also adding
   it to that list.

   Theme-proofed: everything here sits inside a theme's content area, and themes
   restyle headings, buttons and <code> freely.
   ========================================================================== */

.charitable-ambassadors-mc .cap-live,
.charitable-ambassadors-mc .cap-launch {
	--cap-live-accent: var(--cap-share-accent, var(--cmc-color-success, #1f9d55));
}

/* ------------------------------------------------ moment 1: confirmation */
.charitable-ambassadors-mc .cap-live {
	margin: 0 0 20px;
	padding: 22px;
	border: 1px solid var(--cmc-color-border, #e4e7eb);
	border-radius: var(--cmc-radius, 12px);
	background: var(--cmc-color-surface, #fff);
	text-align: center;
}

.charitable-ambassadors-mc .cap-live__tick {
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cmc-color-success-soft, #e3f7ec);
}

.charitable-ambassadors-mc .cap-live__tick svg {
	width: 24px;
	height: 24px;
	stroke: var(--cap-live-accent);
}

.charitable-ambassadors-mc .cap-live__heading {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--cmc-color-text, #1f2933) !important;
	text-transform: none !important;
}

.charitable-ambassadors-mc .cap-live__lede {
	margin: 0 0 16px !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--cmc-color-text-muted, #6b7785) !important;
}

.charitable-ambassadors-mc .cap-live__next {
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--cmc-color-text-muted, #6b7785) !important;
}

/* The link + copy pair, shared by both surfaces. */
.charitable-ambassadors-mc .cap-live__url {
	display: flex;
	align-items: stretch;
	margin: 0 0 14px;
	border: 1px solid var(--cmc-color-border, #e4e7eb);
	border-radius: 8px;
	overflow: hidden;
	text-align: left;
}

.charitable-ambassadors-mc .cap-live__link {
	flex: 1;
	min-width: 0;
	padding: 12px 13px !important;
	background: var(--cmc-color-surface-alt, #f8f9fb) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 12.5px !important;
	color: var(--cmc-color-text, #1f2933) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.charitable-ambassadors-mc .cap-live__copy {
	flex: 0 0 auto;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-left: 1px solid var(--cmc-color-border, #e4e7eb) !important;
	border-radius: 0 !important;
	background: var(--cmc-color-surface, #fff) !important;
	padding: 0 15px !important;
	min-height: 0 !important;
	font: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--cap-live-accent) !important;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none !important;
}

.charitable-ambassadors-mc .cap-live__copy:hover,
.charitable-ambassadors-mc .cap-live__copy:focus-visible {
	background: var(--cmc-color-surface-alt, #f8f9fb) !important;
}

.charitable-ambassadors-mc .cap-live__copy.is-copied {
	color: var(--cmc-color-success, #1f9d55) !important;
}

/* ------------------------------------------------ moment 2: launch panel */
.charitable-ambassadors-mc .cap-launch {
	margin: 0 0 20px;
	border: 1px solid var(--cmc-color-border, #e4e7eb);
	border-radius: var(--cmc-radius, 12px);
	background: var(--cmc-color-surface, #fff);
	overflow: hidden;
}

.charitable-ambassadors-mc .cap-launch__head {
	position: relative;
	padding: 18px 20px 16px;
	border-bottom: 1px solid var(--cmc-color-border, #e4e7eb);
	background: linear-gradient(180deg, var(--cmc-color-success-soft, #e3f7ec), var(--cmc-color-surface, #fff));
}

.charitable-ambassadors-mc .cap-launch__heading {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--cmc-color-text, #1f2933) !important;
	text-transform: none !important;
}

.charitable-ambassadors-mc .cap-launch__sub {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cmc-color-text-muted, #6b7785) !important;
}

.charitable-ambassadors-mc .cap-launch__dismiss {
	position: absolute;
	top: 14px;
	right: 14px;
	appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 4px !important;
	min-height: 0 !important;
	font: inherit;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	color: var(--cmc-color-text-muted, #6b7785) !important;
	text-decoration: underline !important;
	cursor: pointer;
	box-shadow: none !important;
}

.charitable-ambassadors-mc .cap-launch__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--cmc-color-border, #e4e7eb);
}

.charitable-ambassadors-mc .cap-launch__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	appearance: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--cmc-color-surface, #fff) !important;
	padding: 18px 10px 16px !important;
	min-height: 0 !important;
	font: inherit;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--cmc-color-text, #1f2933) !important;
	cursor: pointer;
	box-shadow: none !important;
}

.charitable-ambassadors-mc .cap-launch__tile:hover,
.charitable-ambassadors-mc .cap-launch__tile:focus-visible {
	background: var(--cmc-color-surface-alt, #f8f9fb) !important;
	color: var(--cmc-color-text, #1f2933) !important;
	text-decoration: none !important;
}

.charitable-ambassadors-mc .cap-launch__tile > svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 8px;
	stroke: var(--cap-live-accent);
	fill: none;
}

.charitable-ambassadors-mc .cap-launch__tile small {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	color: var(--cmc-color-text-muted, #6b7785);
}

/* The share tile wraps the existing popover, so its trigger has to look like
   the sibling tiles rather than like a button. */
.charitable-ambassadors-mc .cap-launch__tile--share {
	cursor: default;
}

/* .cmc-share carries `margin-left: auto` from the My Campaigns toolbar, which
   shoved the whole Share tile hard right inside its grid cell. Reset it and
   claim the full cell so the trigger centres like the sibling tiles. */
.charitable-ambassadors-mc .cap-launch__share {
	display: block;
	width: 100%;
	margin: 0 !important;
	text-align: center;
}

.charitable-ambassadors-mc .cap-launch__share-trigger {
	width: 100%;
	justify-content: center;
}

.charitable-ambassadors-mc .cap-launch__share-trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	min-height: 0 !important;
	font: inherit;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	color: var(--cmc-color-text, #1f2933) !important;
	cursor: pointer;
	box-shadow: none !important;
}

.charitable-ambassadors-mc .cap-launch__share-trigger svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 8px;
	stroke: var(--cap-live-accent);
	fill: none;
}

.charitable-ambassadors-mc .cap-launch__foot {
	padding: 14px 20px;
	border-top: 1px solid var(--cmc-color-border, #e4e7eb);
	background: var(--cmc-color-surface-alt, #f8f9fb);
}

.charitable-ambassadors-mc .cap-launch__foot .cap-live__url {
	margin: 0;
}

@media (max-width: 640px) {
	.charitable-ambassadors-mc .cap-launch__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}