/**
 * 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-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;
}

.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: 16 / 9;
	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: 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: 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;
}
.charitable-ambassadors-layout-story-forward .charitable-ambassadors-fundraiser .caf-hero--tall .caf-hero__image {
	width: 100%;
	height: 100%;
	object-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: 280px;
	overflow: hidden;
	border-radius: var(--cmc-radius, 12px);
}
.charitable-ambassadors-layout-stats-forward .charitable-ambassadors-fundraiser .caf-hero--short .caf-hero__image {
	width: 100%;
	height: 100%;
	object-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: 21 / 9;
	max-height: none;
	overflow: hidden;
	border-radius: var(--cmc-radius, 12px);
}
.charitable-ambassadors-layout-donate-first .charitable-ambassadors-fundraiser .caf-hero--banner .caf-hero__image {
	width: 100%;
	height: 100%;
	object-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: 16 / 9;
	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;
}
.charitable-ambassadors-layout-magazine .charitable-ambassadors-fundraiser .caf-hero--cinematic .caf-hero__image {
	width: 100%;
	height: 100%;
	object-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: 264px !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).
 * ====================================================================== */
.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;
}
.charitable-ambassadors-mc .cap-profile-form {
	max-width: 640px;
}
.charitable-ambassadors-mc .cap-profile-field {
	margin: 0 0 16px !important;
}
/* 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;
	}
}