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

.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;
}

.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-text-muted);
	margin: 0 auto 12px;
	display: block;
}

.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;
}

.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;
}

.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);
}

@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;
}
.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;
	justify-content: flex-start;
}
.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 {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.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;
}