.charity-donate-modal[hidden] {
	display: none;
}

.charity-donate-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.charity-donate-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--charity-donate-modal-overlay, rgba(15, 51, 39, 0.55));
}

.charity-donate-modal__dialog {
	position: relative;
	width: 100%;
	max-width: var(--charity-donate-modal-width, 420px);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--charity-donate-modal-bg, #fff);
	border-radius: var(--charity-donate-modal-radius, 16px);
	border: var(--charity-donate-modal-border-width, 0) solid var(--charity-donate-modal-border-color, transparent);
	padding: var(--charity-donate-modal-pad-t, 28px) var(--charity-donate-modal-pad-r, 24px) var(--charity-donate-modal-pad-b, 24px) var(--charity-donate-modal-pad-l, 24px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	animation: charity-donate-modal-in 0.18s ease;
}

@keyframes charity-donate-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* !important throughout this file (close/title/subtitle/tile/submit):
   Elementor's global Kit CSS ships tag-based rules —
   ".elementor-kit-{id} h2", "... p", and critically
   ".elementor-kit-{id} button, ... input[type=button], ...
   input[type=submit], ... .elementor-button" — each a class+element
   selector (specificity 0,1,1) that beats a plain single BEM class
   (0,1,0) regardless of load order. That "button" rule in particular
   repaints EVERY <button> on any Elementor-built page (accent color,
   2px border, 25px radius, 15px/30px padding, accent font) — which is
   why this modal looked fine on the plain (non-Elementor) Campaigns
   archive template but broke on the Elementor-built homepage: the Kit
   CSS only loads on pages Elementor actually renders. Same root cause,
   same fix already used for WP core's admin dashicon override elsewhere
   in this theme (see the "branch-7" comment in campaigns-admin.css). */
.charity-donate-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: var(--charity-donate-modal-close-size, 32px) !important;
	height: var(--charity-donate-modal-close-size, 32px) !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--charity-donate-modal-close-bg, #f5f4f0) !important;
	color: var(--charity-donate-modal-close-color, #1d1d1f) !important;
	font-family: inherit !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	padding: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
}
.charity-donate-modal__close:hover {
	filter: brightness(0.95);
}

.charity-donate-modal__title {
	margin: 0 32px 4px 0;
	font-family: var(--charity-donate-modal-title-font, inherit) !important;
	font-weight: var(--charity-donate-modal-title-weight, 700) !important;
	font-size: var(--charity-donate-modal-title-size, 1.25rem) !important;
	color: var(--charity-donate-modal-title, #1d1d1f) !important;
}

.charity-donate-modal__subtitle {
	margin: 0 0 18px;
	font-size: var(--charity-donate-modal-subtitle-size, 0.875rem) !important;
	color: var(--charity-donate-modal-subtitle-color, #6e6e73) !important;
}
.charity-donate-modal__subtitle[hidden] {
	display: none;
}

.charity-donate-modal__tiles {
	display: grid;
	grid-template-columns: repeat(var(--charity-donate-modal-tile-cols, 3), minmax(0, 1fr));
	gap: var(--charity-donate-modal-tile-gap, 10px);
	margin-bottom: var(--charity-donate-modal-gap, 14px);
}
.charity-donate-modal__tile {
	border: 1px solid var(--charity-donate-modal-tile-border, #e5e7eb) !important;
	background: var(--charity-donate-modal-tile-bg, #f5f4f0) !important;
	color: var(--charity-donate-modal-tile-color, #1d1d1f) !important;
	border-radius: var(--charity-donate-modal-tile-radius, 10px) !important;
	padding: var(--charity-donate-modal-tile-pad, 14px 8px) !important;
	font-family: inherit !important;
	font-size: var(--charity-donate-modal-tile-size, 0.9375rem) !important;
	font-weight: 700 !important;
	line-height: normal !important;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.charity-donate-modal__tile.is-active {
	background: var(--charity-donate-modal-tile-active-bg, var(--charity-donate-bg, #e8722c)) !important;
	border-color: var(--charity-donate-modal-tile-active-border, var(--charity-donate-bg, #e8722c)) !important;
	border-width: var(--charity-donate-modal-tile-active-width, 1px) !important;
	color: var(--charity-donate-modal-tile-active-color, var(--charity-donate-color, #fff)) !important;
}

.charity-donate-modal__custom-wrap {
	margin-bottom: var(--charity-donate-modal-gap, 16px);
}
.charity-donate-modal__custom-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--charity-donate-modal-input-border, #e5e7eb);
	border-radius: var(--charity-donate-modal-input-radius, 10px);
	background: var(--charity-donate-modal-input-bg, #fff);
	color: var(--charity-donate-modal-input-color, #1d1d1f);
	font-size: 1rem;
}
.charity-donate-modal__custom-input.is-active {
	border-color: var(--charity-donate-bg, #e8722c);
}

.charity-donate-modal__error.charity-donate-modal__error {
	margin: -8px 0 14px;
	padding: 8px 12px;
	background: #fdf2f1;
	border: 1px solid #f6d9d5;
	border-radius: 8px;
	color: var(--charity-donate-modal-error-color, #b3261e);
	font-size: 0.8125rem;
	font-weight: 600;
}
.charity-donate-modal__error[hidden] {
	display: none;
}

/* Scoped through the modal, and the colour restated on the inner span:
   these rows are <label> elements, and Elementor's Global Kit styles bare
   labels at `.elementor-kit-N label` (0,1,1), which outranks a single
   class and was painting them the kit's accent colour. */
.charity-donate-modal .charity-donate-modal__checkbox-row,
.charity-donate-modal .charity-donate-modal__checkbox-row span {
	color: var(--charity-donate-modal-checkbox-color, #4b5563);
}

.charity-donate-modal__checkbox-row.charity-donate-modal__checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 0.8125rem;
	line-height: 1.4;
	cursor: pointer;
}
.charity-donate-modal__checkbox-row input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--charity-donate-bg, #e8722c);
	cursor: pointer;
}
/* Same weight as the rule above so this one wins on order — it is a span
   inside a checkbox row and would otherwise inherit that row's colour. */
.charity-donate-modal .charity-donate-modal__checkbox-row .charity-donate-modal__fee-amount {
	font-weight: 700;
	color: #1d1d1f;
}

.charity-donate-modal__frequency-select {
	width: 100%;
	box-sizing: border-box;
	margin: -6px 0 14px;
	padding: 8px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 0.875rem;
	color: #1d1d1f;
	background: #fff;
}
.charity-donate-modal__frequency-select:focus {
	outline: none;
	border-color: var(--charity-donate-bg, #e8722c);
}

.charity-donate-modal__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--charity-donate-modal-submit-pad, 14px) !important;
	border: 1px solid var(--charity-donate-modal-submit-border, transparent) !important;
	background: var(--charity-donate-modal-submit-bg, var(--charity-donate-bg, #e8722c)) !important;
	color: var(--charity-donate-modal-submit-color, var(--charity-donate-color, #fff)) !important;
	font-family: var(--charity-donate-modal-submit-font, var(--charity-donate-font, inherit)) !important;
	font-weight: var(--charity-donate-modal-submit-weight, var(--charity-donate-weight, 700)) !important;
	font-size: var(--charity-donate-modal-submit-size, var(--charity-donate-size, 1rem)) !important;
	line-height: normal !important;
	border-radius: var(--charity-donate-modal-submit-radius, var(--charity-donate-radius, 999px)) !important;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}
.charity-donate-modal__submit:hover {
	filter: brightness(1.08);
}
.charity-donate-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
}

@media (max-width: 380px) {
	.charity-donate-modal__tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Pieces the popup gained so it can be built like a modern donation
   dialog: the One Time / Monthly toggle, the "choose an amount" label, a
   currency box on the custom field, and the impact line. Each is only
   rendered when its Customizer setting is filled in, so none of this
   applies to a popup that has not opted into it. ── */

.charity-donate-modal__freq-toggle {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	/* Hugs its two buttons rather than filling the dialog: stretched to
	   full width the pair reads as two big tabs, not the compact segmented
	   control the design asks for. Set Width to 100% to stretch it. */
	width: var(--charity-donate-modal-freq-width, auto);
	max-width: 100%;
	gap: var(--charity-donate-modal-freq-gap, 8px);
	margin-bottom: var(--charity-donate-modal-gap, 16px);
	padding: var(--charity-donate-modal-freq-pad, 2px);
	background: var(--charity-donate-modal-freq-bg, rgba(22, 63, 54, .08));
	border: 1px solid var(--charity-donate-modal-freq-border, #D7E0D8);
	border-radius: var(--charity-donate-modal-freq-radius, 10px);
}

.charity-donate-modal__freq-btn {
	flex: var(--charity-donate-modal-freq-flex, 0 0 auto);
	/* border:0 rather than none — `none` leaves the width at its initial
	   `medium`, which Elementor's Kit makes visible on :hover by setting
	   only the style. Same trap as the account buttons. */
	border: 0 solid transparent !important;
	background: transparent !important;
	padding: var(--charity-donate-modal-freq-btn-pad, 8px 10px) !important;
	border-radius: var(--charity-donate-modal-freq-btn-radius, 8px) !important;
	color: var(--charity-donate-modal-freq-color, #687770) !important;
	font-family: inherit !important;
	font-size: var(--charity-donate-modal-freq-size, 16px) !important;
	font-weight: var(--charity-donate-modal-freq-weight, 600) !important;
	line-height: var(--charity-donate-modal-freq-lh, 24px) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.charity-donate-modal__freq-btn.is-active {
	padding: var(--charity-donate-modal-freq-active-pad, 9px 10px) !important;
	background: var(--charity-donate-modal-freq-active-bg, #149B35) !important;
	border-color: var(--charity-donate-modal-freq-active-border, #D7E0D8) !important;
	border-width: var(--charity-donate-modal-freq-active-bw, 1px) !important;
	color: var(--charity-donate-modal-freq-active-color, #FCFFF8) !important;
}

.charity-donate-modal .charity-donate-modal__amount-label {
	margin: 0 0 var(--charity-donate-modal-label-gap, 10px);
	color: var(--charity-donate-modal-label-color, #1d1d1f);
	font-size: var(--charity-donate-modal-label-size, 15px);
	font-weight: 700;
	line-height: 1.3;
}

/* The prefix is a box on the leading edge sharing the field's border, so
   the two read as one control rather than a box beside an input. */
.charity-donate-modal__custom-wrap.has-prefix {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--charity-donate-modal-input-border, #e5e7eb);
	border-radius: var(--charity-donate-modal-input-radius, 10px);
	overflow: hidden;
	background: var(--charity-donate-modal-input-bg, #fff);
}

.charity-donate-modal__custom-prefix {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 14px;
	background: var(--charity-donate-modal-prefix-bg, #f1f3f2);
	color: var(--charity-donate-modal-input-color, #1d1d1f);
	font-size: 1rem;
	font-weight: 700;
}

.charity-donate-modal__custom-wrap.has-prefix .charity-donate-modal__custom-input {
	border: none;
	border-radius: 0;
	background: transparent;
}

.charity-donate-modal .charity-donate-modal__impact {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--charity-donate-modal-gap, 16px);
	padding: var(--charity-donate-modal-impact-pad, 12px 14px);
	background: var(--charity-donate-modal-impact-bg, #eef0ef);
	border: 1px solid var(--charity-donate-modal-impact-border, transparent);
	border-radius: var(--charity-donate-modal-impact-radius, 10px);
	color: var(--charity-donate-modal-impact-color, #1d1d1f);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.charity-donate-modal .charity-donate-modal__impact[hidden] {
	display: none;
}

.charity-donate-modal__impact-icon {
	flex-shrink: 0;
	line-height: 0;
	font-size: var(--charity-donate-modal-impact-icon, 16px);
	color: currentColor;
}