:root {
	--donation-choice-bg: #fff;
	--donation-choice-bg-hover: #f7f4ed;
	--donation-action-bg-hover: #0076d1;
	--donation-primary: #ffd333;
	--donation-primary-dark: #920008;
	--donation-primary-complimentary: #ffffff;
	--donation-black: #212121;
	--donation-action-padding: 0.85rem 1.35rem 0.85rem 1.35rem;
}

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

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

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

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

.unicef-donations__only_for_business {
	display: none;
}

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

.unicef-donations__interval,
.unicef-donations__amounts,
.unicef-donations__amounts-other {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--donation-choice-bg);
	margin: 16px 0;
	border-radius: 30px;
	min-height: 48px;
}

.unicef-donations label {
	border-radius: 30px;

	font-weight: 500;
	font-size: 16px;
	flex-grow: 1;
	text-align: center;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

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

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

.unicef-donations__amounts-other {
	position: relative;
	min-height: 48px;
}

.unicef-donations__amounts-other label {
	position: absolute;
	right: 20px;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
}
.unicef-donations__amounts-other input {
	color: var(--donation-black);
}

.unicef-donations__amounts-custom-field {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	padding: var(--donation-action-padding) !important;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	font-size: 16px;
	width: 100%;
	padding-left: 30px;
	padding-right: 50px;
	line-height: normal;
	border-radius: 30px;
	border: 2px solid transparent;
	transition: border-color 0.25ms ease-in-out;
}

.unicef-donations__amounts-custom-field:focus,
.unicef-donations__amounts-custom-field:not(:placeholder-shown),
.unicef-donations__amounts-custom-field:not([value=""]) {
	outline: none;
	border-color: var(--donation-black);
}

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

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

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

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

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

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

.unicef-donations__actions {
	display: flex;
	margin: 32px 0;
}

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

.unicef-donations__actions-submit {
	border-radius: 30px;
	background: var(--donation-black);
	color: var(--donation-primary-complimentary);
	font-family: founders-grotesk-text, sans-serif;
	font-weight: 500;
	letter-spacing: 0;
	font-size: 16px;
	text-transform: none;
	margin: 0 auto;
	padding: var(--donation-action-padding);
	padding-left: 32px;
	padding-right: 32px;
	gap: 8px;
	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;
	min-height: 48px;
}

.unicef-donations__actions-submit:after {
	content: "";
	width: 24px;
	height: 24px;
	transition: var(--transition-default);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.765 4.70229L12 5.52422L11.235 4.70229C9.12233 2.43257 5.69709 2.43257 3.58447 4.70229C1.47184 6.972 1.47184 10.6519 3.58447 12.9217L10.4699 20.3191C11.3149 21.227 12.685 21.227 13.5301 20.3191L20.4155 12.9217C22.5282 10.6519 22.5282 6.972 20.4155 4.70229C18.3029 2.43257 14.8777 2.43257 12.765 4.70229Z' fill='currentColor'/></svg>");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	background: white;
}

.unicef-donations__actions-submit:hover {
	background-color: var(--donation-action-bg-hover);
}

.unicef-donations__title {
	font-size: 28px;
	color: var(--donation-black);
	font-weight: 700;
	margin: 0 0 25px 0;
	text-align: center;
	font-family: founders-grotesk-x-condensed, sans-serif;
}

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

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

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

.unicef-donations--step1 {
	background-color: var(--donation-primary);
	padding: 30px 25px 40px 25px;
	border-radius: 16px;
}

.unicef-donations--step2 {
	padding: 0 20px;
}

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

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

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

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