/* The widget carries its own typeface rather than inheriting the host theme's,
   so it looks the same wherever it is embedded. A system stack keeps that
   promise without shipping or fetching a font file. Override this single token
   to match a site's branding. */
:root {
	--mdon-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.mdon-card {
	--mdon-accent: #0e8c7d;
	--mdon-accent-text: #ffffff;
	--mdon-border: #e6e9ec;
	--mdon-muted: #6b7280;
	--mdon-ink: #15181d;
	--mdon-radius: 16px;
	--mdon-radius-sm: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	padding: 18px 16px;
	background: #ffffff;
	border: 1px solid var(--mdon-border);
	border-radius: var(--mdon-radius);
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
	font-size: 15px;
	line-height: 1.4;
	color: var(--mdon-ink);
}

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

.mdon-card__head {
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--mdon-muted);
}

.mdon-card__head h1,
.mdon-card__head h2,
.mdon-card__head h3,
.mdon-card__head h4 {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--mdon-ink);
}

.mdon-card__head p {
	margin: 0;
}

.mdon-card__head p + p {
	margin-top: 4px;
}

.mdon-card__head img {
	max-width: 100%;
	height: auto;
	border-radius: var(--mdon-radius-sm);
}

.mdon-card__head ul,
.mdon-card__head ol {
	margin: 4px 0 0;
	padding-left: 18px;
}

.mdon-card__head a {
	color: var(--mdon-accent);
}

.mdon-toggle {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 12px;
	background: #f2f4f5;
	border-radius: 999px;
}

.mdon-toggle__btn {
	flex: 1 1 0;
	min-height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #4b5563;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.mdon-toggle__btn.is-active {
	background: #ffffff;
	color: var(--mdon-accent);
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.10);
}

.mdon-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	margin-bottom: 8px;
}

.mdon-preset {
	min-height: 44px;
	padding: 0 6px;
	border: 1.5px solid var(--mdon-border);
	border-radius: var(--mdon-radius-sm);
	background: #ffffff;
	color: var(--mdon-ink);
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.mdon-preset:hover {
	border-color: color-mix(in srgb, var(--mdon-accent) 55%, var(--mdon-border));
}

.mdon-preset:active {
	transform: scale(0.96);
}

.mdon-preset.is-active {
	border-color: var(--mdon-accent);
	background: var(--mdon-accent);
	color: var(--mdon-accent-text);
}

.mdon-amount {
	position: relative;
	margin-bottom: 12px;
}

.mdon-field__top {
	position: absolute;
	top: -7px;
	left: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	pointer-events: none;
}

.mdon-amount .mdon-field__top {
	left: auto;
}

.mdon-amount-field {
	position: relative;
}

.mdon-amount-field__symbol {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px;
	color: var(--mdon-muted);
	font-size: 16px;
	font-weight: 600;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.mdon-amount-field:has(.mdon-amount-input:placeholder-shown:not(:focus)) .mdon-amount-field__symbol {
	opacity: 0;
}

.mdon-amount-input {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px 8px 32px;
	border: 1.5px solid var(--mdon-border);
	border-radius: var(--mdon-radius-sm);
	font-size: 16px;
	font-weight: 600;
	color: var(--mdon-ink);
	background: #ffffff;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	appearance: textfield;
	-moz-appearance: textfield;
}

.mdon-amount-input::placeholder {
	font-size: 14px;
	font-weight: 400;
	color: #9aa3ad;
}

.mdon-amount-input:placeholder-shown:not(:focus) {
	padding-left: 14px;
	text-align: center;
}

.mdon-amount-input:not(:placeholder-shown) {
	border-color: var(--mdon-accent);
	background: color-mix(in srgb, var(--mdon-accent) 6%, #ffffff);
}

.mdon-amount-input::-webkit-outer-spin-button,
.mdon-amount-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mdon-field {
	position: relative;
	margin-bottom: 12px;
}

.mdon-field label {
	display: block;
	margin-bottom: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: #374151;
}

.mdon-field .mdon-field__top label,
.mdon-field__top .mdon-error-text {
	margin: 0;
	padding: 0 5px;
	background: #ffffff;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.35;
}

.mdon-field .mdon-field__top label {
	pointer-events: auto;
	color: var(--mdon-muted);
}

.mdon-field input:not([type="checkbox"]),
.mdon-field select,
.mdon-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1.5px solid var(--mdon-border);
	border-radius: var(--mdon-radius-sm);
	font-size: 16px;
	color: var(--mdon-ink);
	background: #ffffff;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mdon-field textarea {
	min-height: 70px;
	resize: vertical;
}

.mdon-amount-input:focus,
.mdon-field input:focus,
.mdon-field select:focus,
.mdon-field textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--mdon-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdon-accent) 16%, transparent);
}

.mdon-accept label,
.mdon-custom-field[data-type="checkbox"] label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #374151;
	cursor: pointer;
}

.mdon-accept input[type="checkbox"],
.mdon-custom-field[data-type="checkbox"] input[type="checkbox"] {
	margin-top: 1px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--mdon-accent);
	cursor: pointer;
}

.mdon-accept {
	padding: 10px 12px;
	margin-bottom: 14px;
	background: #f8fafa;
	border: 1px solid var(--mdon-border);
	border-radius: var(--mdon-radius-sm);
}

.mdon-accept-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mdon-accept.is-expanded .mdon-accept-text {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}

.mdon-accept-more {
	display: inline-block;
	margin: 3px 0 0 26px;
	padding: 2px 0;
	border: 0;
	background: none;
	color: var(--mdon-accent);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mdon-accept-more[hidden] {
	display: none;
}

.mdon-submit {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 0;
	border-radius: 11px;
	background: var(--mdon-accent);
	color: var(--mdon-accent-text);
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--mdon-accent) 28%, transparent);
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.mdon-submit:hover,
.mdon-submit:focus-visible {
	filter: brightness(0.93);
}

.mdon-submit:active {
	transform: scale(0.98);
	box-shadow: 0 2px 6px color-mix(in srgb, var(--mdon-accent) 24%, transparent);
}

.mdon-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	color: var(--mdon-muted);
}

.mdon-secure-note::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: var(--mdon-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9zm3 5a1.5 1.5 0 0 1 .75 2.8V19a.75.75 0 0 1-1.5 0v-1.2A1.5 1.5 0 0 1 12 15z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9zm3 5a1.5 1.5 0 0 1 .75 2.8V19a.75.75 0 0 1-1.5 0v-1.2A1.5 1.5 0 0 1 12 15z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mdon-notice {
	margin-bottom: 12px;
	padding: 9px 12px;
	border-radius: var(--mdon-radius-sm);
	font-size: 13px;
}

.mdon-notice--error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.mdon-notice--error ul {
	margin: 0;
	padding-left: 16px;
	list-style: disc;
}

.mdon-error-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	color: #dc2626;
	text-align: right;
}

.mdon-accept .mdon-error-text,
.mdon-custom-field[data-type="checkbox"] .mdon-error-text {
	display: block;
	margin-top: 4px;
	text-align: left;
}

.mdon-amount-field.mdon-field--error .mdon-amount-input,
.mdon-field--error input,
.mdon-field--error select,
.mdon-field--error textarea {
	border-color: #dc2626;
}

.mdon-amount-field.mdon-field--error .mdon-amount-input:focus,
.mdon-field--error input:focus,
.mdon-field--error select:focus,
.mdon-field--error textarea:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13);
}

.mdon-field--error.mdon-accept {
	border-color: #fecaca;
	background: #fef7f7;
}

.mdon-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.mdon-modal:not([hidden]) {
	display: flex;
}

.mdon-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: mdon-modal-fade 0.18s ease;
}

.mdon-modal__dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 340px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	padding: 24px 22px 20px;
	background: #ffffff;
	border-radius: var(--mdon-radius);
	box-shadow: 0 20px 48px rgba(16, 24, 40, 0.22);
	text-align: center;
	animation: mdon-modal-pop 0.2s ease;
}

.mdon-modal__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mdon-accent) 12%, #ffffff);
}

.mdon-modal__icon svg {
	width: 26px;
	height: 26px;
	fill: var(--mdon-accent);
}

.mdon-modal__title {
	flex: 0 0 auto;
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mdon-ink);
}

.mdon-modal__text {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 0 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mdon-muted);
	white-space: pre-line;
}

.mdon-modal__actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 8px;
}

.mdon-modal__btn {
	width: 100%;
	min-height: 46px;
	padding: 11px 16px;
	border: 0;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, background 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.mdon-modal__btn--primary {
	background: var(--mdon-accent);
	color: var(--mdon-accent-text);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--mdon-accent) 28%, transparent);
}

.mdon-modal__btn--primary:hover,
.mdon-modal__btn--primary:focus-visible {
	filter: brightness(0.93);
}

.mdon-modal__btn--primary:active {
	transform: scale(0.98);
}

.mdon-modal__btn--ghost {
	background: #f2f4f5;
	color: #4b5563;
}

.mdon-modal__btn--ghost:hover,
.mdon-modal__btn--ghost:focus-visible {
	background: #e8ebed;
}

@keyframes mdon-modal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mdon-modal-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.mdon-hp {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 359px) {
	.mdon-presets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 480px) {
	.mdon-card {
		padding: 24px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdon-card *,
	.mdon-card *::before,
	.mdon-card *::after {
		transition: none !important;
	}

	.mdon-preset:active,
	.mdon-submit:active {
		transform: none;
	}

	.mdon-modal__backdrop,
	.mdon-modal__dialog {
		animation: none !important;
	}
}

/* Links inside the acceptance text (admin may add e.g. a terms link). */
.mdon-accept-text a {
	color: var(--mdon-accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Theme isolation.
   The form renders inside the host theme with no boundary around it, so the
   theme's rules reach in two ways: inherited properties (font, colour, size,
   letter-spacing) flow down the tree, and bare element selectors like
   `input[type=number]` (0,1,1) out-specify the widget's single-class rules
   (0,1,0). Flatsome and Elementor are the reference cases — uppercased buttons,
   inset input shadows, an injected `margin-bottom: 1em` on every control,
   squared-off corners on the amount field.
   Nothing short of !important can beat a theme that reaches for an ID, so this
   block re-declares the design's own values that way, the same approach the
   portal card, combo card and sticky button already use. Every state the widget
   depends on is restated here too, in cascade order — neutral, then filled,
   then focus, then error — because an !important base would otherwise freeze
   them. Colours come from the card's tokens, so a per-form accent set in the
   admin still drives the whole widget.
   --------------------------------------------------------------------------- */
.mdon-card {
	font-family: var(--mdon-font) !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
}

/* Form controls do not inherit the font by UA default, and themes restyle them
   directly, so each one has to be named. */
.mdon-card button,
.mdon-card input,
.mdon-card select,
.mdon-card textarea,
.mdon-card label,
.mdon-card a {
	font-family: var(--mdon-font) !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* The honeypot must stay invisible; a theme that resets display on divs would
   otherwise show donors a field they are told to leave empty. */
.mdon-card .mdon-hp {
	display: none !important;
}

/* Header ------------------------------------------------------------------ */
.mdon-card .mdon-card__head h1,
.mdon-card .mdon-card__head h2,
.mdon-card .mdon-card__head h3,
.mdon-card .mdon-card__head h4 {
	margin: 0 0 2px !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--mdon-ink) !important;
}

.mdon-card .mdon-card__head p {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: var(--mdon-muted) !important;
}

.mdon-card .mdon-card__head p + p {
	margin-top: 4px !important;
}

.mdon-card .mdon-card__head a {
	color: var(--mdon-accent) !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Frequency toggle --------------------------------------------------------- */
.mdon-card .mdon-toggle {
	background: #f2f4f5 !important;
	border-radius: 999px !important;
	padding: 4px !important;
	margin: 0 0 12px !important;
}

.mdon-card .mdon-toggle__btn {
	min-height: 38px !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 12px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-image: none !important;
	color: #4b5563 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

.mdon-card .mdon-toggle__btn.is-active {
	background: #ffffff !important;
	color: var(--mdon-accent) !important;
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.10) !important;
}

/* Preset amounts ----------------------------------------------------------- */
.mdon-card .mdon-presets {
	margin: 0 0 8px !important;
}

.mdon-card .mdon-preset {
	min-height: 44px !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 6px !important;
	margin: 0 !important;
	border: 1.5px solid var(--mdon-border) !important;
	border-radius: var(--mdon-radius-sm) !important;
	background: #ffffff !important;
	background-image: none !important;
	color: var(--mdon-ink) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

.mdon-card .mdon-preset:hover {
	border-color: color-mix(in srgb, var(--mdon-accent) 55%, var(--mdon-border)) !important;
}

.mdon-card .mdon-preset.is-active,
.mdon-card .mdon-preset.is-active:hover {
	border-color: var(--mdon-accent) !important;
	background: var(--mdon-accent) !important;
	color: var(--mdon-accent-text) !important;
}

/* Text inputs, select, textarea -------------------------------------------- */
.mdon-card .mdon-field input:not([type="checkbox"]),
.mdon-card .mdon-field select,
.mdon-card .mdon-field textarea {
	width: 100% !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	border: 1.5px solid var(--mdon-border) !important;
	border-radius: var(--mdon-radius-sm) !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: var(--mdon-ink) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none !important;
}

.mdon-card .mdon-field textarea {
	min-height: 70px !important;
	resize: vertical !important;
}

.mdon-card .mdon-field label {
	display: block !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #374151 !important;
}

.mdon-card .mdon-field .mdon-field__top label {
	margin: 0 !important;
	padding: 0 5px !important;
	background: #ffffff !important;
	border-radius: 4px !important;
	font-size: 11px !important;
	line-height: 1.35 !important;
	color: var(--mdon-muted) !important;
}

/* Amount field. Themes hit this hardest, because input[type=number] beats the
   single-class rule outright. The left padding keeps room for the € symbol. */
.mdon-card .mdon-amount-input {
	width: 100% !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 8px 12px 8px 32px !important;
	margin: 0 !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	border-color: var(--mdon-border) !important;
	border-radius: var(--mdon-radius-sm) !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: var(--mdon-ink) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none !important;
}

.mdon-card .mdon-amount-input:placeholder-shown:not(:focus) {
	padding-left: 14px !important;
	text-align: center !important;
	border-color: var(--mdon-border) !important;
	background-color: #ffffff !important;
}

.mdon-card .mdon-amount-input:not(:placeholder-shown) {
	border-color: var(--mdon-accent) !important;
	background-color: color-mix(in srgb, var(--mdon-accent) 6%, #ffffff) !important;
}

.mdon-card .mdon-amount-field__symbol {
	color: var(--mdon-muted) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* Focus after the neutral states, so the ring survives them. */
.mdon-card .mdon-amount-input:focus,
.mdon-card .mdon-field input:focus,
.mdon-card .mdon-field select:focus,
.mdon-card .mdon-field textarea:focus {
	outline: none !important;
	border-color: var(--mdon-accent) !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdon-accent) 16%, transparent) !important;
}

/* Error last, so a failed validation still shows through. The field selectors
   carry both classes on purpose: the neutral rule above matches through
   :not([type="checkbox"]), which counts towards specificity, and a plain
   .mdon-field--error would lose to it and leave an invalid field looking fine. */
.mdon-card .mdon-amount-field.mdon-field--error .mdon-amount-input,
.mdon-card .mdon-field.mdon-field--error input,
.mdon-card .mdon-field.mdon-field--error select,
.mdon-card .mdon-field.mdon-field--error textarea {
	border-color: #dc2626 !important;
}

.mdon-card .mdon-amount-field.mdon-field--error .mdon-amount-input:focus,
.mdon-card .mdon-field.mdon-field--error input:focus,
.mdon-card .mdon-field.mdon-field--error select:focus,
.mdon-card .mdon-field.mdon-field--error textarea:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13) !important;
}

/* Acceptance block ---------------------------------------------------------- */
.mdon-card .mdon-accept {
	padding: 10px 12px !important;
	margin: 0 0 14px !important;
	background: #f8fafa !important;
	border: 1px solid var(--mdon-border) !important;
	border-radius: var(--mdon-radius-sm) !important;
}

.mdon-card .mdon-field--error.mdon-accept {
	border-color: #fecaca !important;
	background: #fef7f7 !important;
}

.mdon-card .mdon-accept label,
.mdon-card .mdon-custom-field[data-type="checkbox"] label {
	display: flex !important;
	gap: 8px !important;
	align-items: flex-start !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: #374151 !important;
}

.mdon-card .mdon-accept input[type="checkbox"],
.mdon-card .mdon-custom-field[data-type="checkbox"] input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
}

.mdon-card .mdon-accept-text {
	color: var(--mdon-ink) !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}

.mdon-card .mdon-accept-text a {
	color: var(--mdon-accent) !important;
	background: none !important;
	box-shadow: none !important;
}

.mdon-card .mdon-accept-more {
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 3px 0 0 26px !important;
	padding: 2px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-image: none !important;
	color: var(--mdon-accent) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: underline !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Submit -------------------------------------------------------------------- */
.mdon-card .mdon-submit {
	display: block !important;
	width: 100% !important;
	min-height: 48px !important;
	height: auto !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--mdon-accent) !important;
	background-image: none !important;
	color: var(--mdon-accent-text) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--mdon-accent) 28%, transparent) !important;
}

.mdon-card .mdon-submit:hover,
.mdon-card .mdon-submit:focus,
.mdon-card .mdon-submit:focus-visible {
	background: var(--mdon-accent) !important;
	color: var(--mdon-accent-text) !important;
}

/* Notices, errors, secure note ---------------------------------------------- */
.mdon-card .mdon-notice {
	margin: 0 0 12px !important;
	padding: 9px 12px !important;
	border-radius: var(--mdon-radius-sm) !important;
	font-size: 13px !important;
}

.mdon-card .mdon-notice--error {
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	color: #b91c1c !important;
}

.mdon-card .mdon-notice ul,
.mdon-card .mdon-notice li {
	margin: 0 !important;
	font-size: 13px !important;
	color: inherit !important;
}

.mdon-card .mdon-notice ul {
	padding-left: 16px !important;
}

.mdon-card .mdon-error-text {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: #dc2626 !important;
}

/* The error text that floats on a field's border is smaller and sits on a
   white chip, so it has to be restated after the general rule. */
.mdon-card .mdon-field__top .mdon-error-text {
	padding: 0 5px !important;
	background: #ffffff !important;
	border-radius: 4px !important;
	font-size: 11px !important;
	line-height: 1.35 !important;
}

.mdon-card .mdon-secure-note {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--mdon-muted) !important;
	text-align: center !important;
}

/* Monthly confirmation modal ------------------------------------------------ */
.mdon-card .mdon-modal__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-weight: 700 !important;
	color: var(--mdon-ink) !important;
}

.mdon-card .mdon-modal__text {
	color: var(--mdon-muted) !important;
}

.mdon-card .mdon-modal__btn {
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	background-image: none !important;
	text-shadow: none !important;
	font-weight: 600 !important;
}

/* Success / failed card ----------------------------------------------------- */
.mdon-card.mdon-success {
	text-align: center !important;
}

.mdon-card .mdon-success__title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-weight: 700 !important;
	color: var(--mdon-ink) !important;
}

.mdon-card .mdon-success__lede,
.mdon-card .mdon-success__note {
	padding: 0 !important;
	color: var(--mdon-muted) !important;
}

/* Browsers without color-mix() fall back to fixed tints of the default accent. */
@supports not (background: color-mix(in srgb, red, white)) {
	.mdon-card .mdon-preset:hover { border-color: #86c4bb !important; }
	.mdon-card .mdon-amount-input:not(:placeholder-shown) { background-color: #f2f9f8 !important; }
	.mdon-card .mdon-amount-input:focus,
	.mdon-card .mdon-field input:focus,
	.mdon-card .mdon-field select:focus,
	.mdon-card .mdon-field textarea:focus {
		box-shadow: 0 0 0 3px rgba(14, 140, 125, 0.16) !important;
	}
	.mdon-card .mdon-submit { box-shadow: 0 4px 12px rgba(14, 140, 125, 0.28) !important; }
}

/* -------------------------------------------------------------------------- */
/*  Success / thank-you card  ([mollie_donation_success])                     */
/* -------------------------------------------------------------------------- */
.mdon-success {
	max-width: 440px;
	padding: 36px 28px 28px;
	text-align: center;
}

.mdon-success__badge {
	width: 84px;
	height: 84px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--mdon-accent) 12%, #ffffff);
	animation: mdon-badge-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mdon-success__mark {
	width: 52px;
	height: 52px;
}

.mdon-success__mark-ring {
	stroke: var(--mdon-accent);
	stroke-width: 2.5;
	opacity: 0.35;
}

.mdon-success__mark-tick {
	stroke: var(--mdon-accent);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: mdon-tick-draw 0.5s 0.18s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.mdon-success__title {
	margin: 0 0 6px;
	font-size: 23px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--mdon-ink);
}

.mdon-success__lede {
	margin: 0 auto;
	max-width: 340px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mdon-muted);
}

.mdon-success__amount {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin: 20px 0 4px;
	padding: 10px 18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mdon-accent) 8%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--mdon-accent) 22%, #ffffff);
}

.mdon-success__amount-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--mdon-accent);
	letter-spacing: -0.01em;
}

.mdon-success__amount-freq {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mdon-muted);
}

.mdon-success__note {
	margin: 16px auto 0;
	max-width: 320px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mdon-muted);
}

/* Not-completed variant: warm amber instead of the accent green. */
.mdon-success--failed {
	--mdon-accent: #b45309;
}

.mdon-success--failed .mdon-success__badge {
	background: color-mix(in srgb, #b45309 12%, #ffffff);
}

@keyframes mdon-badge-pop {
	0% { transform: scale(0.6); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes mdon-tick-draw {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mdon-success__badge { animation: none; }
	.mdon-success__mark-tick { animation: none; stroke-dashoffset: 0; }
}

/* Fallback for browsers without color-mix(): a plain tint. */
@supports not (background: color-mix(in srgb, red, white)) {
	.mdon-success__badge { background: #eaf5f3; }
	.mdon-success__amount { background: #f2f9f8; border-color: #cfe8e4; }
	.mdon-success--failed .mdon-success__badge { background: #fbf0e4; }
}

/* -------------------------------------------------------------------------- */
/*  Donor portal entry card — [mollie_donor_portal_card]                      */
/*  Fully self-scoped: unique class names, its own --mdon-pc-* tokens and      */
/*  !important re-assertions + resets, so a host theme's link / footer styles  */
/*  (colour, underline, uppercase, letter-spacing, margins, transitions)       */
/*  cannot bleed into the card wherever it is placed.                          */
/* -------------------------------------------------------------------------- */
.mdon-portal-card {
	--mdon-pc-accent: #0e8c7d;
	--mdon-pc-border: #e6e9ec;
	--mdon-pc-muted: #6c6c6c;
	--mdon-pc-ink: #15181d;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 340px !important;
	margin: 0 !important;
	padding: 18px 20px !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	border: 1px solid var(--mdon-pc-border) !important;
	box-shadow: 0 4px 18px rgba(16, 24, 40, 0.10) !important;
	color: var(--mdon-pc-ink) !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: var(--mdon-font) !important;
	line-height: 1.4 !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.mdon-portal-card,
.mdon-portal-card * {
	box-sizing: border-box !important;
}
.mdon-portal-card:hover,
.mdon-portal-card:focus {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16) !important;
	color: var(--mdon-pc-ink) !important;
	text-decoration: none !important;
	outline: none !important;
}
.mdon-portal-card .mdon-portal-card__top {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}
.mdon-portal-card .mdon-portal-card__icon {
	flex: 0 0 auto !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border-radius: 9px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--mdon-pc-accent) !important;
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mdon-portal-card .mdon-portal-card__icon svg {
	display: block !important;
	width: 19px !important;
	height: 19px !important;
}
.mdon-portal-card .mdon-portal-card__title {
	display: inline-block !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--mdon-pc-ink) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mdon-portal-card .mdon-portal-card__text {
	display: block !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: var(--mdon-pc-muted) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}
.mdon-portal-card .mdon-portal-card__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--mdon-pc-accent) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mdon-portal-card .mdon-portal-card__link svg {
	display: inline-block !important;
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
	transition: transform 0.2s ease !important;
}
.mdon-portal-card:hover .mdon-portal-card__link svg {
	transform: translateX(3px) !important;
}
@media (max-width: 600px) {
	.mdon-portal-card {
		max-width: none !important;
	}
}

/* -------------------------------------------------------------------------- */
/*  Donate + portal combo cards and the standalone donate button.             */
/*  [mollie_donate_portal_card variant="split|stacked|buttons|list"] and       */
/*  [mollie_donate_button]. Self-scoped (unique classes, --mdon-cc-* tokens,   */
/*  !important re-assertions) so host-theme link/footer styles cannot bleed.   */
/* -------------------------------------------------------------------------- */
.mdon-combo,
.mdon-donate-btn {
	--mdon-cc-accent: #0e8c7d;
	--mdon-cc-ink: #15181d;
	--mdon-cc-mut: #6c6c6c;
	--mdon-cc-bd: #e6e9ec;
}
.mdon-combo,
.mdon-combo *,
.mdon-donate-btn,
.mdon-donate-btn * {
	box-sizing: border-box !important;
}
.mdon-combo {
	display: block !important;
	width: 100% !important;
	max-width: 360px !important;
	margin: 0 !important;
	border-radius: 14px !important;
	border: 1px solid var(--mdon-cc-bd) !important;
	box-shadow: 0 4px 18px rgba(16, 24, 40, 0.12) !important;
	background: #ffffff !important;
	overflow: hidden !important;
	font-family: var(--mdon-font) !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.mdon-combo a {
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}
.mdon-combo svg { display: block !important; }
.mdon-combo__ic { display: flex !important; align-items: center !important; justify-content: center !important; }
.mdon-combo__t { font-size: 14.5px !important; font-weight: 700 !important; }
.mdon-combo__s { font-size: 11.5px !important; font-weight: 400 !important; color: var(--mdon-cc-mut) !important; }
.mdon-combo__h { display: block !important; font-size: 15px !important; font-weight: 700 !important; color: var(--mdon-cc-ink) !important; margin: 0 0 3px !important; }
.mdon-combo__p { display: block !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--mdon-cc-mut) !important; margin: 0 0 12px !important; }
.mdon-combo__ar { color: var(--mdon-cc-accent) !important; display: inline-flex !important; }

/* Split */
.mdon-combo--split { display: flex !important; }
.mdon-combo__half { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 22px 14px !important; text-align: center !important; }
.mdon-combo__half--donate { background: var(--mdon-cc-accent) !important; color: #ffffff !important; }
.mdon-combo__half--donate .mdon-combo__s { color: rgba(255,255,255,0.85) !important; }
.mdon-combo__half--portal { background: #ffffff !important; color: var(--mdon-cc-ink) !important; }
.mdon-combo__half--portal .mdon-combo__ic { color: var(--mdon-cc-accent) !important; }

/* Stacked */
.mdon-combo__top { display: block !important; padding: 18px 18px 16px !important; background: color-mix(in srgb, var(--mdon-cc-accent) 7%, #ffffff) !important; text-align: center !important; }
.mdon-combo__badge { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--mdon-cc-accent) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 10px !important; }
.mdon-combo__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: var(--mdon-cc-accent) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; padding: 9px 22px !important; border-radius: 9px !important; }
.mdon-combo__row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 18px !important; border-top: 1px solid var(--mdon-cc-bd) !important; color: var(--mdon-cc-ink) !important; }
.mdon-combo__row .mdon-combo__ic { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--mdon-cc-accent) 12%, #ffffff) !important; color: var(--mdon-cc-accent) !important; flex: 0 0 auto !important; }
.mdon-combo__bt { flex: 1 !important; font-size: 13.5px !important; font-weight: 700 !important; }

/* Buttons */
.mdon-combo--buttons { padding: 18px !important; }
.mdon-combo__btnrow { display: flex !important; gap: 10px !important; }
.mdon-combo__btnrow .mdon-combo__btn { flex: 1 !important; padding: 10px 12px !important; }
.mdon-combo__btn--sec { background: #ffffff !important; color: var(--mdon-cc-accent) !important; border: 1.5px solid var(--mdon-cc-accent) !important; }

/* List */
.mdon-combo__line { display: flex !important; align-items: center !important; gap: 12px !important; padding: 15px 16px !important; color: var(--mdon-cc-ink) !important; }
.mdon-combo__line + .mdon-combo__line { border-top: 1px solid var(--mdon-cc-bd) !important; }
.mdon-combo__line .mdon-combo__ic { width: 36px !important; height: 36px !important; border-radius: 9px !important; flex: 0 0 auto !important; }
.mdon-combo__line--donate .mdon-combo__ic { background: var(--mdon-cc-accent) !important; color: #ffffff !important; }
.mdon-combo__line--portal .mdon-combo__ic { background: color-mix(in srgb, var(--mdon-cc-accent) 12%, #ffffff) !important; color: var(--mdon-cc-accent) !important; }
.mdon-combo__tx { flex: 1 !important; display: flex !important; flex-direction: column !important; }

/* Standalone donate button */
.mdon-donate-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 11px 24px !important;
	border-radius: 10px !important;
	background: var(--mdon-cc-accent) !important;
	color: #ffffff !important;
	font-family: var(--mdon-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: 0 !important;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--mdon-cc-accent) 28%, transparent) !important;
	transition: filter 0.15s ease, transform 0.15s ease !important;
}
.mdon-donate-btn * { box-sizing: border-box !important; }
.mdon-donate-btn svg { display: block !important; }
.mdon-donate-btn:hover,
.mdon-donate-btn:focus { color: #ffffff !important; filter: brightness(0.94) !important; transform: translateY(-1px) !important; text-decoration: none !important; }

@media (max-width: 600px) {
	.mdon-combo { max-width: none !important; }
	.mdon-combo--split { flex-direction: column !important; }
}
@supports not (background: color-mix(in srgb, red, white)) {
	.mdon-combo__top { background: #eef7f5 !important; }
	.mdon-combo__row .mdon-combo__ic,
	.mdon-combo__line--portal .mdon-combo__ic { background: #e2f1ee !important; }
}

/* -------------------------------------------------------------------------- */
/*  Sticky donate button — [mollie_sticky_donate style="bar|pill|fab"].        */
/*  Fixed on screen; "show" controls device visibility. Self-scoped +          */
/*  !important so host-theme styles cannot bleed in.                           */
/* -------------------------------------------------------------------------- */
.mdon-sticky {
	--mdon-cc-accent: #0e8c7d;
	position: fixed !important;
	z-index: 9990 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}
.mdon-sticky,
.mdon-sticky * { box-sizing: border-box !important; }
.mdon-sticky__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: var(--mdon-cc-accent) !important;
	color: #ffffff !important;
	font-family: var(--mdon-font) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: 0 !important;
}
.mdon-sticky__btn:hover,
.mdon-sticky__btn:focus { color: #ffffff !important; filter: brightness(0.95) !important; text-decoration: none !important; }
.mdon-sticky__btn svg { display: block !important; }

.mdon-sticky--bar {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 9px 12px !important;
	padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important;
	background: #ffffff !important;
	border-top: 1px solid rgba(16, 24, 40, 0.08) !important;
	box-shadow: 0 -3px 12px rgba(16, 24, 40, 0.08) !important;
}
.mdon-sticky--bar .mdon-sticky__btn { width: 100% !important; font-size: 15px !important; padding: 12px !important; border-radius: 10px !important; }

.mdon-sticky--pill { bottom: 16px !important; }
.mdon-sticky--pill.mdon-sticky--right { right: 16px !important; }
.mdon-sticky--pill.mdon-sticky--left { left: 16px !important; }
.mdon-sticky--pill .mdon-sticky__btn { font-size: 14.5px !important; padding: 11px 24px !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.28) !important; }

.mdon-sticky--fab { bottom: 16px !important; }
.mdon-sticky--fab.mdon-sticky--right { right: 16px !important; }
.mdon-sticky--fab.mdon-sticky--left { left: 16px !important; }
.mdon-sticky--fab .mdon-sticky__btn { width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.30) !important; }

/* Device visibility */
@media (min-width: 768px) { .mdon-sticky--show-mobile:not(.is-preview) { display: none !important; } }
@media (max-width: 767px) { .mdon-sticky--show-desktop:not(.is-preview) { display: none !important; } }

/* Admin preview frame: contain the fixed button and always show it */
.mdon-sticky-frame { position: relative !important; flex: 1 1 100% !important; width: 100% !important; height: 190px !important; border-radius: 10px !important; background: #eef0f2 !important; overflow: hidden !important; }
.mdon-sticky-frame .mdon-sticky { position: absolute !important; display: block !important; }