.commerce-order-item-add-to-cart-form-commerce-product-1 {
	box-shadow: 0px 0px 15px 0px #00000040;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div {
	display: none !important;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper {
    display: initial !important;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: max-content;
    width: fit-content;
    padding: 0 10px;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper .close-alert-button {
		border: none;
    position: absolute;
    top: 21px;
    right: 31px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/themes/custom/fundacion_new_theme/images/svg/close.svg) no-repeat center / 100% auto;
    transition: transform .3s ease;
}

.commerce-order-item-add-to-cart-form-commerce-product-1 .div-alert-background {
	position: fixed;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: 100%;
	z-index: 200;
	background-color: #0000009d;
}

#edit-field-cantidades-wrapper{
	display: flex !important;
	flex-wrap: wrap;
	gap: 0 20px;
}

@media (min-width: 640px){
	.choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable{
		padding-right: 0;
	}
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
	padding: 10px;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{
	display: none;
}

.choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after{
	display: none;
}

.form-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 190px;
	height: 40px;
	border-radius: 20px;
	color: #fff;
	background: #F27259;
	font-size: 16px;
	font-weight: 700;
}

.commerce-order-item-add-to-cart-form-commerce-product-1.form-next-step>div {
	display: flex !important;
}


.commerce-order-item-add-to-cart-form-commerce-product-1.form-next-step #edit-field-cantidades-wrapper,
.commerce-order-item-add-to-cart-form-commerce-product-1.form-next-step #edit-unit-price-wrapper {
	display: none !important;
}

.form-back,
.second-title {
	display: none;
}

.commerce-order-item-add-to-cart-form-commerce-product-1.form-next-step .form-back,
.commerce-order-item-add-to-cart-form-commerce-product-1.form-next-step .second-title {
	display: block;
}

:root {
	--orange: #F86040;
	--light-blue: #46C0A9;
	--dark-grey: #302F2F;
	--general-padding-with-donate-form: 70px;
	--donate-form-padding: 30px;
	--donate-form-price-buttons-grid-columns: repeat(3, minmax(0, 140px));
	--donate-form-subtitle-font-size: 16px;
	--donate-form-title-font-size: 30px;
	--donate-form-width-steps: 100%;
	--donate-form-width-fields: calc(50% - 20px);

	@media screen and (max-width: 980px) {
		--general-padding-with-donate-form: 35px;
		--donate-form-price-buttons-grid-columns: repeat(2, minmax(0, 140px));
		--donate-form-padding: 20px;
		--donate-form-subtitle-font-size: 14px;
		--donate-form-title-font-size: 20px;
		--donate-form-width-steps: 140%;
		--donate-form-width-fields: 100%;
	}

	@media screen and (max-width: 480px) {
		--general-padding-with-donate-form: 20px;
	}
}

div#block-bootstrap-barrio-subtheme-progresocomprapaso1 {
	display: none;
}

.commerce-order-item-add-to-cart-form-commerce-product-1.commerce-order-item-add-to-cart-form {
	margin: 0;
	margin-top: 40px;
	max-width: 850px;
	border-radius: 18px;
	padding: var(--donate-form-padding);
	text-align: center;
	overflow: hidden;

	&::before {
		content: '';
		position: relative;
		display: block;
		height: 50px;
		min-width: var(--donate-form-width-steps);
		max-width: 550px;
		margin: auto;
		background: url(/themes/custom/fundacion_new_theme/images/form-steps/step1.svg) no-repeat center 0 / 100% auto;
		margin-bottom: 30px;
	}

	.second-title {
		font-size: var(--donate-form-title-font-size);
		font-weight: 700;
		color: var(--dark-grey);
		margin-bottom: 20px;
		line-height: 30px;
	}

	.field--type-list-float.field--name-field-cantidades {
		>.js-form-item {
			margin-bottom: 30px !important;
		}

		>h2 {
			font-size: var(--donate-form-title-font-size);
			font-weight: 700;
			color: var(--dark-grey);
			margin-bottom: 20px;
			line-height: 30px;
		}

		.js-form-type-select>label {
			display: none;
		}

		>p {
			font-size: 14px;
			font-weight: 700;
			color: var(--light-blue);
			margin-top: 15px;
			padding: 0 20px;
		}
	}

	/* .html-select__inner {
		justify-content: center;
		grid-template-columns: var(--donate-form-price-buttons-grid-columns);

		.html-select__option {
			display: inline-block;
			text-align: center;
			padding: 15px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 0px #00000040;
			color: #BABABA;
			background-color: #F2F2F2;
			font-size: 18px;
			font-weight: 700;

			&.selected {
				background-color: var(--light-blue);
				color: white;

				&:focus {
					outline: none;
				}
			}

			&[data-value="500000"] {
				display: none;
			}
		}

		.field--type-commerce-price,
		.field--type-commerce-price .mb-3 {
			margin-bottom: 0 !important;
		}

		.field--type-commerce-price .js-form-type-commerce-number.form-item-unit-price-0-amount-number {

			.input-group::after {
				content: '$ Otro';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: white;
				padding: 10px;
				width: 90%;
				color: #BABABA;
				font-size: 18px;
				font-weight: 700;
			}

			label {
				display: none;
			}

			input {
				padding: 15px;
				border-radius: 10px;
				box-shadow: 0px 0px 10px 0px #00000040;
				color: #BABABA;
				background-color: white;
				font-size: 18px;
				font-weight: 700;
				height: 55px;

				&::placeholder {
					color: #BABABA;
					font-size: 18px;
					font-weight: 700;
				}
			}
		}
	} */

	&.form-next-step {

		select {
			background-image: url(/themes/custom/fundacion_new_theme/images/svg/orange-down-arrow.svg);
			background-size: 15px;
			border-radius: 10px;
		}

		&::before {
			background-image: url(/themes/custom/fundacion_new_theme/images/form-steps/step2.svg);
		}

		>div:empty {
			display: none !important;
		}

		.user-data {
			display: flex !important;
			flex-wrap: wrap;
			gap: 0 10px;
			justify-content: space-between;
			align-items: flex-end;
			/* max-height: 240px;
			overflow-y: auto; */
			min-width: calc(100% + 17px);
			padding-right: 20px;
			margin-bottom: 30px;
			/* scrollbar-width: thin; */
			/* scrollbar-color: #8577DE #F2F2F2; */

			&::-webkit-scrollbar {
				width: 5px;
			}

			&::-webkit-scrollbar-track {
				background-color: #F2F2F2;
				border-radius: 20px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #8577DE;
				border-radius: 20px;
			}

			>div:not(.field--name-field-direccion, #wrapper-legal) {
				width: var(--donate-form-width-fields);
				text-align: left;
			}

			.field--name-field-nombre {
				order: 1;
			}

			.field--name-field-apellidos {
				order: 2;
			}

			.field--name-field-tipo-de-documento {
				order: 3;
			}

			.field--name-field-numero-de-documento  {
				order: 4
			}

			.field--name-field-correo-electronico {
				order: 5;
			}

			.field--name-field-numero-de-contacto  {
				order: 6;
			}

			.field--name-field-departamento-code {
				order: 7;
			}

			.field--name-field-ciudad-departamento{
				order: 7;
			}

			.field--name-field-ciudad {
				order: 8;
			}

			.field--name-field-direccion {
				width: 100%;
				text-align: left;
				order: 9;
			}

			#wrapper-legal {
				order: 10;
			}
		}

		.user-data .field--name-field-tipo-de-documento {
			min-width: 70px;
		}

		.user-data .field--name-field-tipo-de-documento select {
			height: 40px;
		}

		.user-data .field--name-field-numero-de-documento {
			max-width: calc(100% - 120px);
		}

		@media (max-width: 980px) {
			.user-data .field--name-field-numero-de-documento{
				max-width: calc(100% - 85px);
			}
		}

		>div {
			label {
				margin: 0;
				font-size: 16px;
				font-weight: 700;
			}

			label.form-required {
				color: var(--orange);
			}

			label.form-required::after {
				content: "*";
				display: unset !important;
				background: unset;
				margin: 0;
				vertical-align: unset;
			}

			input:focus {
				border: 2px solid #F86040;
			}

			input:focus:invalid {
				border: 2px solid red;
			}
		}

		.js-form-item {
			gap: 5px;
			margin-bottom: 0 !important;
		}

		input.form-control {
			border-radius: 10px;
			height: 40px;
		}

		.js-form-back {
			display: inline-block;

			@media screen and (max-width: 980px) {
				margin: 0 auto 20px;
				display: block;
			}
		}

		/* .form-actions#edit-actions {
			display: inline-block !important;
		} */

	}

	>p {
		font-size: var(--donate-form-subtitle-font-size);
		font-weight: 500;
		color: #45403E;
	}

	#wrapper-legal {
		.field--type-boolean.field--widget-boolean-checkbox {
			margin-bottom: 10px !important;
			min-width: unset;

			&:last-child {
				margin-bottom: 0 !important;
			}
		}

		.field--type-boolean.field--widget-boolean-checkbox:nth-child(n+2) {
			label {
				&::before {
					width: 20px;
					height: 20px;
					left: -17px;
					border-radius: 3px;
					border-color: var(--light-blue);
				}

				&::after {
					background-color: transparent;
					transition: unset;
				}
			}

			input[type="checkbox"]:checked~label::after {
				background-color: transparent;
				border-radius: 0;
				width: 12px;
				border-left: 2.5px solid var(--light-blue);
				border-bottom: 2.5px solid var(--light-blue);
				top: 45%;
				left: -13px;
				transform: translateY(-50%) rotate(315deg);
			}
		}

		.field--type-boolean.field--widget-boolean-checkbox label {
			a {
				color: var(--orange);
			}

			&::before {
				border: 3px solid #adb5bd;
			}

			&::after {
				width: 7px;
				height: 7px;
				left: -17.5px;
			}
		}

		.field--type-boolean.field--widget-boolean-checkbox input[type="checkbox"]:checked~label {
			&::before {
				background-color: white;
				border-color: var(--light-blue);
			}

			&::after {
				background-color: var(--light-blue);
			}
		}
	}

	.js-form-back {
		border: 2px solid var(--orange);
		background-color: transparent;
		color: var(--orange);
		font-weight: 700;
		font-size: 16px;
		margin-right: 40px;
	}

	/* .form-actions#edit-actions {
		max-width: 190px;
		min-width: unset;
		width: 100%;
		margin-top: 14px;

		 button[type="submit"]#edit-submit {
			font-weight: 700;
			background-color: #F27259;
			border-radius: 20px;
			height: 40px;
			width: 100%;
			max-width: 190px;
			padding: 8px;
			color: #fff;
		}

		&::after {
			content: unset;
		}
	} */
}

/* Estilo bloque dona 1 (Tú eliges nutrir lo que quieres ver crecer)  */

:root {
	--dona-block1-title-font-size: 30px;
	--dona-block1-title-width: auto;
	--dona-block1-general-text-align: center;
	--dona-block1-margin: auto;

	@media screen and (max-width: 980px) {
		--dona-block1-title-font-size: 24px;
		--dona-block1-title-width: 90vw;
		--dona-block1-general-text-align: left;
		--dona-block1-margin: 0;
	}

	@media screen and (max-width: 660px) {
		--dona-block1-title-width: 100%;
	}

	@media screen and (max-width: 480px) {
		--dona-block1-title-font-size: 20px;
	}
}

#block-tueligesnutrirloquequieresvercrecer, .donut-block-1 {
	max-width: 580px;
	margin: var(--dona-block1-margin);
	text-align: var(--dona-block1-general-text-align);
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 2;

	h2 {
		text-align: left;
		font-size: var(--dona-block1-title-font-size);
		color: var(--orange);
		width: var(--dona-block1-title-width);
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;

		@media screen and (max-width: 660px) {
			display: none;
		}

		.field--name-field-subtitulo {
			font-size: 18px;
			font-weight: 600;
			color: var(--dark-grey);
		}

		img {
			width: 100%;
			max-width: 360px;
			height: auto;
		}

		.field--name-body {
			max-width: 481px;

			p {
				font-size: 16px;
				font-weight: 400;
				text-align: center;
			}

			p:not(:last-child) {
				margin-bottom: 6px;
			}
		}
	}
}


/* Estilo bloque dona 2 (¿Por qué es importante acabar con la desnutrición crónica en los niños y niñas?) */
:root {
	--dona-block2-brown: #E5852D;
	--dona-block2-green: #88AF4C;
	--dona-block2-orange: #F27259;
	--dona-block2-purple: #8577DE;
	--dona-block2-padding: 70px;
	--dona-block2-title-font-size: 24px;
	--dona-block2-content-flex-direction: row;
	--dona-block2-title-max-width: 50%;
	--dona-block2-body-max-width: 450px;
	--dona-block2-display-color-blocks: grid;
	--dona-block2-color-blocks-margin-top: -66px;
	--dona-block2-color-blocks-max-width: 660px;
	--dona-block2-color-block-2: calc(40% - 15px);
	--dona-block2-color-block-3: calc(60% - 15px);
	--dona-block2-padding-bottom: 60px;
	--dona-block2-background-image: url(/themes/custom/fundacion_new_theme/images/backgrounds/desktop-semicircle.png);

	@media screen and (max-width: 980px) {
		--dona-block2-padding: 35px;
		--dona-block2-title-font-size: 20px;
		--dona-block2-content-flex-direction: column;
		--dona-block2-title-max-width: 100%;
		--dona-block2-body-max-width: 100%;
		--dona-block2-color-blocks-margin-top: -40px;
		--dona-block2-display-color-blocks: block;
		--dona-block2-color-blocks-margin-top: 0px;
		--dona-block2-color-blocks-max-width: 100%;
		--dona-block2-color-block-2: 275px;
		--dona-block2-color-block-3: 350px;
		--dona-block2-padding-bottom: 45px;
		--dona-block2-background-image: url(/themes/custom/fundacion_new_theme/images/backgrounds/tablet-semicircle.png);
	}

	@media screen and (max-width: 480px) {
		--dona-block2-padding: 20px;
		--dona-block2-title-font-size: 18px;
		--dona-block2-background-image: url(/themes/custom/fundacion_new_theme/images/backgrounds/phone-semicircle.png);
	}
}

#block-porqueesimportanteacabarconladesnutricioncronicaenlosninosyninas, .donut-block-2 {
	width: calc(100% + var(--dona-block2-padding) * 2);
	margin: auto;
	margin-left: calc(0.1px - var(--dona-block2-padding));
	margin-top: calc(.1px - var(--dona-block2-padding) / 2);
	padding: var(--dona-block2-padding);
	padding-bottom: var(--dona-block2-padding-bottom);

	h2 {
		color: var(--dona-block2-brown);
		font-size: var(--dona-block2-title-font-size);
		font-weight: 700;
		max-width: var(--dona-block2-title-max-width);
	}

	img {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: -1;
	}

	.content {
		display: flex;
		flex-direction: var(--dona-block2-content-flex-direction);
		gap: 30px 10px;
		justify-content: space-between;

		.field--name-body {
			max-width: var(--dona-block2-body-max-width);
			flex-basis: calc(50% - 5px);

			ul {
				padding: 0;
				list-style-type: none;
				list-style-position: center;

				li {
					display: flex;
					align-items: center;
					gap: 15px;
				}

				li::before {
					content: '';
					position: relative;
					display: block;
					min-width: 15px;
					height: 20px;
					background: url(/themes/custom/fundacion_new_theme/images/svg/orange-drop.svg) no-repeat center 0 / 100% auto;
				}

				li:not(:last-child){
					margin-bottom: 15px;
				}
			}
		}

		.color-blocks {
			flex-basis: 55%;
			max-width: var(--dona-block2-color-blocks-max-width);
			display: var(--dona-block2-display-color-blocks);
			grid-template-columns: 45% 50%;
			gap: 30px;
			place-items: center;
			margin-top: var(--dona-block2-color-blocks-margin-top);

			.slick-track {
				display: flex;
				gap: 30px;
			}

			.slick-dots {
				bottom: -35px;
				li {
					margin: 0;
				}
				button {

					&::before {
						content: '';
						background-color: #E7972E;
						border-radius: 50%;
						width: 10px;
						height: 10px;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%)
					}
				}
			}

			.color-block {
				max-width: 360px;
				border-radius: 75px;
				padding: 15px 30px;
				color: white;
				text-align: center;
				width: 100%;

				@media screen and (max-width: 360px) {
					max-width: 88vw;
				}

				>div:nth-child(2) {
					font-size: 24px;
					font-weight: 700;
				}
			}

			.color-block-1 {
				border-bottom-right-radius: 10px;
				background-color: var(--dona-block2-purple);
				grid-column: 1 / span 2;
			}
			.color-block-2 {
				border-top-right-radius: 10px;
				background-color: var(--dona-block2-green);
			}
			.color-block-3 {
				border-top-left-radius: 10px;
				background-color: var(--dona-block2-orange);

			}
		}
	}
}

.donate-form-with-2-blocks #main {
	margin-bottom: 0 !important;

	.main-content {
		background: var(--dona-block2-background-image) no-repeat bottom left / auto 42%;
	}
}

.donate-form-with-2-blocks #main-wrapper {
	padding: 0;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper .alert-danger {
	border-color: transparent;
	border-left: #cc0000 15px solid;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper h2,
.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper .alert > div {
	text-align: left;
}

.commerce-order-item-add-to-cart-form-commerce-product-1>div.alert-wrapper svg{
	margin: 0 20px 0 0;
}

.donate-form-with-2-blocks main.main-content section.section{
	max-width: 1440px;
	margin: auto;
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, calc(50% - 20px));
	padding: 0 var(--general-padding-with-donate-form);
	@media screen and (max-width: 660px) {
		display: flex;
		flex-direction: column;
	}

	#block-tueligesnutrirloquequieresvercrecer, .donut-block-1 {
		grid-column: 1 / 2;
	}

	#block-bootstrap-barrio-subtheme-content {
		grid-column: 2 / 3;
		z-index: 2;
	}

	#block-porqueesimportanteacabarconladesnutricioncronicaenlosninosyninas, .donut-block-2 {
		grid-column: 1 / 3;
	}
}

div#block-feed-de-blog-noticias {
	grid-column: 1 / 3;
}

:root {
	--checkout-complete-title-font-size: 30px;
	--checkout-complete-body-font-size: 16px;
	--checkout-complete-thanks-font-size: 32px;

	@media screen and (max-width: 980px) {
		--checkout-complete-title-font-size: 20px;
		--checkout-complete-body-font-size: 14px;
		--checkout-complete-thanks-font-size: 24px;
	}
}

.donate-form-with-2-blocks #block-bootstrap-barrio-subtheme-content .content:has(.commerce-checkout-flow-multistep-default) {
	height: 100%;

	form {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.layout-checkout-form {
		width: 100%;
		margin: 0;
	}

	.checkout-complete {
		display: flex;
		flex-direction: column;
		gap: 30px;
		align-items: center;
		text-align: center;

		h3.checkout-complete-title {
			color: var(--dark-grey);
			font-weight: 700;
			font-size: var(--checkout-complete-title-font-size);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30px;

			&::after {
				content: '';
				position: relative;
				display: block;
				width: 40px;
				height: 40px;
				background: url(/themes/custom/fundacion_new_theme/images/svg/orange-check.svg) no-repeat center 100% / 100% auto;
			}
		}

		p {
			font-size: var(--checkout-complete-body-font-size);
			font-weight: 500;
			color: #45403E;
		}

		h4 {
			color: var(--light-blue);
			font-size: var(--checkout-complete-thanks-font-size);
		}
	}
}

body.checkout-complete.donate-form-with-2-blocks #block-bootstrap-barrio-subtheme-content .content:has(.commerce-checkout-flow-multistep-default) {
	form {
		display: flex;
		align-items: center;
		margin: 0;
		max-width: 850px;
		border-radius: 18px;
		padding: var(--donate-form-padding);
		text-align: center;
		overflow: hidden;
		background-color: white;
		box-shadow: 0px 0px 15px 0px #00000040;
	}
}

.validation-messages-wrapper {
  font-size: 13px;
  text-align: left;
  padding: 15px 15px 5px 15px;
}

.validation-messages-wrapper h3 {
  font-size: 15px;
  color: var(--orange);
}

.messages-form-validation-error__item {
  padding-left: 10px;
}