/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.2
Text Domain:  Avada
*/

.fusion-tb-header {
	--awb_header_bg_color: #fff;
}

@media (max-width: 1440px) {
	.fusion-tb-header .fusion-sticky-container {
		--awb-padding-right: 20px !important;
		--awb-padding-left: 20px !important;
	}
}

@media (max-width: 1280px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		hyphens: auto;
		word-wrap: break-word;
	}

	.fusion-tb-header .fusion-builder-column-1 {
		--awb-width-medium: 25% !important;
	}

	.fusion-tb-header .fusion-builder-column-1 nav {
		justify-content: flex-end !important;
	}

	.fusion-tb-header .fusion-builder-column-1 nav .awb-menu__main-ul {
		top: 128px !important;
	}

	.fusion-tb-header .fusion-builder-column-8 {
		--awb-width-medium: 25% !important;
	}
}

@media (max-width: 850px) {
	.fusion-tb-header .fusion-builder-column-1 {
		--awb-width-small: 50% !important;
	}

	.mobile_donate {
		position: fixed !important;
		bottom: 20px !important;
		left: 0 !important;
		width: 100% !important;
		top: initial !important;
	}
}

.gform_button,
.gform_next_button,
.gform_previous_button {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;

	padding: 18px 60px !important;
	max-width: max-content !important;

	font-size: 1.0625rem !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: -0.0159rem !important;
	font-weight: 600 !important;
	font-family: var(--h1_typography-font-family) !important;

	background-color: rgb(74, 191, 181) !important;
	border-radius: 100vmax !important;
	cursor: pointer !important;
	user-select: none !important;
}

/* FORM */
#donation-form {
	.gfield_required {
		font-size: 1rem;
	}

	.gf_progressbar_wrapper {
		display: none !important;
	}

	.gform_wrapper {
		color: #112337;
		background-color: #c7dbda;
		padding: 3rem clamp(1rem, 0.3333rem + 1.3889vw, 2rem);
		border-radius: 1rem;
	}

	.gfield--type-product {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		input {
			width: 100%;
		}
	}

	.custom_amount {
		.ginput_container {
			position: relative;
			input {
				padding-right: 4.5rem;
			}

			&::after {
				content: "CHF";
				position: absolute;
				top: 50%;
				right: 20px;
				translate: 0 -51%;

				font-weight: 600;
				color: #112337;
				font-family: var(--h1_typography-font-family);

				border-left: 1px solid #c7dbda;
				padding-inline-start: 0.6rem;
			}
		}
	}

	.ginput_container_radio {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gfield--type-html {
		h4,
		h3 {
			font-weight: 600;
			margin: 0;
			color: #112337;
		}

		h3 {
			text-align: center;
		}
	}

	.gfield {
		label:not(.gform-field-label--type-inline) {
			margin-bottom: 0.75rem !important;
			font-size: 1rem;
			font-weight: 600;
			font-family: var(--h1_typography-font-family);
		}

		.gform-field-label--type-sub {
			color: inherit;
			opacity: 0.7;
		}

		.select-arrow,
		.avada-select-parent .select-arrow,
		.fusion-modal-content .select-arrow,
		.select2-dropdown {
			background-color: #fff;
			border-radius: 0 100vmax 100vmax 0;
			border-color: #c7dbda;
			color: #07382c;
		}

		input,
		select {
			border: 1px solid #fff;
			background-color: #fff;
			border-radius: 100vmax;

			&:focus-visible,
			&:focus,
			&:active {
				border-color: #4abfb5;
				outline: 1px solid transparent;
				box-shadow: 0 0 0px 3px rgb(74, 191, 181, 0.3);
			}
		}

		select {
			padding-top: 5px !important;
		}
	}

	legend:is(.gform-field-label) {
		margin-block-end: 1rem !important;
		display: flex;
		align-items: baseline;

		font-size: 1.8rem;
		font-weight: 600;
		font-family: var(--h1_typography-font-family);
	}

	.gform_required_legend {
		display: none;
	}

	fieldset:is(.choices-radios) {
		text-align: center;

		.gfield_radio {
			all: unset;
			display: flex;
			gap: 1rem;

			@media screen and (max-width: 768px) {
				flex-direction: column;
				flex: 1;
			}

			.gchoice {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				flex: 1;

				.gfield-choice-input {
					display: none;

					&:checked + label {
						background-color: #fff;
					}
				}

				.gform-field-label {
					all: unset;

					position: relative;

					display: flex;
					align-items: center;
					justify-content: center;

					height: 10dvw;
					max-height: 150px;
					padding: 1.25rem;
					aspect-ratio: 1;
					border-radius: 1rem;

					background-color: rgba(255, 255, 255, 0.4);

					font-size: 1.5rem;
					font-weight: 600;
					font-family: var(--h1_typography-font-family);

					cursor: pointer;
					z-index: 2;
					user-select: none;

					&:has(span) {
						flex-direction: column;

						span {
							font-size: 0.85rem;
							opacity: 0.8;
						}
					}

					@media screen and (max-width: 768px) {
						height: max-content;
						aspect-ratio: unset;
						width: 100%;
					}
				}
			}
		}
	}

	.gform_page_footer {
		display: flex;
		align-items: center;
		justify-content: center;

		@media screen and (max-width: 768px) {
			flex-wrap: wrap;
		}

		.gform_ajax_spinner {
			width: 30px;
			aspect-ratio: 1;
			object-fit: contain;
		}
	}

	.gform_previous_button {
		background-color: #fff;
		color: #000;
	}

	.gform_wrapper .gfield_error .gfield_validation_message,
	.gform_wrapper .gform_validation_errors {
		background: #ecd3d3;
		border-radius: 1rem;
		font-size: 0.95rem !important;

		ol {
			text-align: left;
		}
	}

	.gfield_description {
		padding: 1rem;
	}

	.gfield:is(.tabs-radios) {
		.gfield_radio {
			--pos: 0%;

			display: inline-flex;
			flex-direction: row;
			gap: 0;

			position: relative;
			overflow: hidden;

			@media screen and (max-width: 599.98px) {
				flex-direction: column;
				width: 100%;
				gap: 0.5rem;
			}

			@media screen and (min-width: 600px) {
				background-color: rgba(255, 255, 255, 0.4);
				border-radius: 100vmax;

				&::before {
					content: "";
					position: absolute;
					inset: 0 auto 0 0;
					width: 50%;
					height: 100%;

					background: #fff;
					border-radius: 100vmax;
					transition: translate 0.25s ease;
					translate: var(--pos, 0) 0;
					z-index: 1;
				}
			}

			.gchoice {
				all: unset;
				position: relative;

				display: flex;
				align-items: center;
				flex: 1;

				text-align: center;

				@media screen and (max-width: 599.98px) {
					width: 100%;
				}
			}

			label {
				all: unset;

				position: relative;

				display: flex;
				align-items: center;
				justify-content: center;

				inline-size: max-content;
				padding: 1rem 2rem;

				font-size: 1rem;
				font-weight: 600;
				font-family: var(--h1_typography-font-family);

				cursor: pointer;
				z-index: 2;
				user-select: none;

				@media screen and (max-width: 599.98px) {
					padding: 1rem;
					inline-size: 100%;
					background-color: rgba(255, 255, 255, 0.4);
					border-radius: 100vmax;
				}
			}

			.gfield-choice-input {
				display: none;

				@media screen and (max-width: 599.98px) {
					&:checked + label {
						background-color: #fff;
					}
				}
			}
		}
	}

	.gfield:is(.tabs-radios) .gfield_radio:has(.gchoice:nth-child(1) input:checked) {
		--pos: 0%;
	}

	/* 2ème option cochée => pos 100% */
	.gfield:is(.tabs-radios) .gfield_radio:has(.gchoice:nth-child(2) input:checked) {
		--pos: 100%;
	}
}