:root {
	--donation-choice-bg: #ece7de;
	--donation-choice-bg-hover: #f7f4ed;
	--donation-primary: #EE0000;
	--donation-primary-dark: #920008;
	--donation-primary-complimentary: #ffffff;
	--donation-black: #212121;
	--donation-action-padding: .75rem 1.35rem .85rem 1.35rem;
	--donation-action-padding-small: .75rem .25rem .85rem .25rem;
}

.msf-donations {
	color: var(--donation-black);
}

.msf-donations input {
	font-family: founders-grotesk-text, sans-serif;
}

.msf-donations__amounts.is-hidden {
	display: none;
}

.msf-donations__amounts input,
.msf-donations__interval input {
	display: none;
}

.msf-donations__interval input:checked + label,
.msf-donations__amounts input:checked + label {
	background: var(--donation-primary);
	color: var(--donation-primary-complimentary);
}

.msf-donations__heading {
	font-family: founders-grotesk-x-condensed, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 88%;
	text-transform: uppercase;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 40px;
}


.msf-donations--single-payment-option .msf-donations__interval {
	display: none;
}

.msf-donations__interval,
.msf-donations__amounts,
.msf-donations__amounts-other {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px;
	background: var(--donation-choice-bg);
	margin: 10px 0;
	border-radius: 30px;
	gap: 5px;
	min-height: 60px;
}

.msf-donations label {
	border-radius: 30px;
	padding: var(--donation-action-padding-small);
	font-weight: 500;
	font-size: 18px;
	flex-grow: 1;
	text-align: center;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;

	@media (min-width: 560px) {
		padding: var(--donation-action-padding);
		white-space: nowrap;
	}
}

.msf-donations label:hover {
	background-color: var(--donation-choice-bg-hover);
}

.msf-donations label:hover {
	cursor: pointer;
}

.msf-donations__amounts-other {
	position: relative;
}

.msf-donations__amounts-other label {
	position: absolute;
	right: 15px;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
	@media (min-width: 560px) {
		right: 0
	}
}

.msf-donations__amounts-custom-field {
	background: transparent;
	border: none;
	box-shadow: none;
	text-align: center;
	font-weight: 500;
	padding: var(--donation-action-padding);
	-moz-appearance: textfield;
	font-size: 18px;
	width: 100%;
	padding-left: 50px;
	padding-right: 50px;
}

.msf-donations__amounts-custom-field:focus {
	outline: none;
}

.msf-donations__amounts-custom-field::placeholder {
	color: var(--donation-black);
}

.msf-donations__amounts-custom-field::-webkit-outer-spin-button,
.msf-donations__amounts-custom-field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.msf-donations__actions {
	display: flex;
	margin: 25px 0;
}

.msf-donations__actions:last-child {
	margin-bottom: 0;
}

.msf-donations__actions-submit {
	border-radius: 30px;
	background: var(--donation-primary);
	color: var(--donation-primary-complimentary);
	font-family: founders-grotesk-text, sans-serif;
	font-weight: 500;
	letter-spacing: 0;
	font-size: 18px;
	text-transform: none;
	margin: 0 auto;
	padding: var(--donation-action-padding);
	padding-left: 35px;
	padding-right: 60px;
	appearance: none;
	outline: none;
	border: none;
	cursor: pointer;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s
}

.msf-donations__actions-submit:after {
	content: '';
	width: 40px;
	height: 40px;
	background-color: var(--color-white);
	border-radius: 100%;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition-default);
	mask-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16ZM8 14.5C7.72386 14.5 7.5 14.7239 7.5 15L7.5 17C7.5 17.2762 7.72386 17.5 8 17.5L19.6092 17.5L17.2264 20.121C17.0407 20.3254 17.0557 20.6416 17.2601 20.8274L18.7399 22.1727C18.9443 22.3585 19.2605 22.3434 19.4462 22.1391L24.7214 16.3364C24.8948 16.1457 24.8948 15.8544 24.7214 15.6637L19.4462 9.86099C19.2605 9.65666 18.9443 9.6416 18.7399 9.82735L17.2601 11.1727C17.0557 11.3585 17.0407 11.6747 17.2264 11.879L19.6092 14.5H8Z' fill='currentColor'/></svg>");
	mask-position: center center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

.msf-donations__actions-submit:hover {
	background-color: var(--donation-primary-dark);
}

.msf-donations__title {
	font-size: 38px;
	color: var(--donation-primary);
	font-weight: 700;
	margin: 0 0 25px 0;
	text-align: center;
	text-transform: uppercase;
	font-family: founders-grotesk-x-condensed, sans-serif;
	line-height: var(--line-height-90);
}

.msf-donations__description {
	font-size: 20px;
	color: var(--donation-black);
	letter-spacing: -1px;
	margin: -1rem 0 1rem;
	text-align: center;
}

/* Editor styles */
.wp-block-acf-msf-donations-form input {
	background: transparent;
	border: none;
	outline: none;
	width: 100%;
	padding-left: 50px;
	padding-right: 50px;
}

.wp-block-acf-msf-donations-form .msf-donations__amounts-custom-field:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.msf-donations--step2 {
	background-color: var(--donation-choice-bg);
	padding: 0 20px;
}

@media (min-width: 768px) {
	.msf-donations--step2 {
		padding: 0 110px;
	}
}

.msf-donations--step2:not([class*="spacing-after--"]) {
	margin-bottom: 120px;
}

.msf-donations--step2:not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

.title-hero + .msf-donations--step2:not([class*="spacing-before--"]) {
	margin-top: -120px;
	position: relative;
	z-index: 1;
}

.msf-donations__amounts-override-single {
	display: flex;
	background: var(--donation-choice-bg);
	border-radius: 30px;
}

.msf-donations__amounts-override-single .msf-donations__amounts {
	margin: 0;
	flex: 1;
}

.msf-donations__amounts-override-single .msf-donations__amounts-other {
	margin: 0;
	flex: 1;
}

.msf-donations__amounts-override-single .msf-donations__amounts-custom-field {
	padding: 0 30px 3px 0;
	text-align: left;
}

@media (min-width: 768px) {
	.msf-donations__amounts-override-single .msf-donations__amounts-custom-field {
		padding: 0 50px 3px 0;
		text-align: center;
	}
}

.msf-donations__amounts-override-single .msf-donations__amounts-other label {
	right: 0;
}

.msf-donations__image-text:not(.msf-donations__image-text--visible) {
	display: none;
}


.msf-donations__image-text {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-5);

	@media (min-width: 560px) {
		padding: 0 var(--spacing-25);
		gap: var(--spacing-25);
	}

	@media (min-width: 832px) {
		padding: 0 var(--spacing-20);
		gap: var(--spacing-20);
	}

	@media (min-width: 1024px) {
		padding: 0 var(--spacing-25);
		gap: var(--spacing-25);
	}

	@media (min-width: 1300px) {
		padding: 0 var(--spacing-20);
		gap: var(--spacing-20);
	}

	& .msf-donations__image {
		display: flex;
		align-items: center;
		max-width: 75px !important;
		max-height: 75px !important;

		& img {
			max-width: 75px !important;
			max-height: 75px !important;
			object-fit: contain;
		}
	}

	& .msf-donations__text {
		margin-top: auto;
		margin-bottom: auto;
		font-size: var(--size-ms);
	}
}