.form-content {
	position: relative;

	.form-group {
		position: relative;
	}
}

// meeting-events and experience inquiry form
#block-contact-us,
#block-booking-inquiry-webform,
#block-webform-3,
#block-webform-4,
#block-celeb-fair,
#block-negroni,
#block-webform-pub-crawl{
	position: relative;
	width: 100%;
	form{
		position: relative;
		padding: 2rem;
		margin: 0 auto;
		width: calc(100% - 4rem);
		max-width: calc(1200px - 4rem);
		border-top: solid 1px #333;
		gird-
		
		#edit-intro{
			margin-bottom: 2rem;
		}
		// titles
		#edit-booking-details,
		#edit-personal-details,
		#edit-information-title,
		#edit-event-preference-title,
		#edit-engagement-feedback-title{
			padding: 1rem;
			background-color: $solaire-gray4;
			p{
				margin-bottom: 0;
				font-weight: 700;
			}
		}
		#edit-booking-details-group,
		#edit-personal-details-group,
		#edit-information,
		#edit-event-preference,
		#edit-engagement-feedback{
			display: grid;
			grid-template-columns: 2fr 2fr 1fr 1fr;
			gap:1rem;
			padding: 2rem 0;
			.form-item{
				padding: 1rem 0;
				width: 100%;
				label{
					margin-bottom: .5rem;
					display: block;
					color: var(--foreground);
					&.form-required{
						&::after{
							content: '*';
							color: red;
						}
					}
				}
				select,
				input[type=text],
				input[type=email],
				input[type=date],
				input[type=time],
				input[type=number],
				input[type=tel]{
					padding: 1rem;
					width: calc(100% - 2rem);
					height: 16px;
					border: solid 1px var(--foreground);
					outline: none;
					background-color: transparent;
					color: var(--foreground);
					&::placeholder{
						color: #555;
					}
				}
				input[type=date]::-webkit-calendar-picker-indicator,
				input[type=time]::-webkit-calendar-picker-indicator{
					filter: invert(1);
				}

				select{
					width: 100%;
					height: 50px;
					background-color: var(--primary);
				}

				input[type=tel]{
					padding: 1rem 3.5rem;
					width: 100%;
					height: 50px;
				}
			}
		}
		
		#edit-personal-details-group,
		#edit-information{
			grid-template-columns: 1fr 2fr 2fr 2fr;
			padding-bottom: 0;
			.form-item-contact-number{
				.iti--allow-dropdown{
					width: 100%;
				}
				.iti__country-list{
					margin: 0;
					padding: 1rem .5rem 1rem 1rem;
					&::-webkit-scrollbar{
						width: 5px;
					}
					&::-webkit-scrollbar-track {
						background: #aaa;
					}&::-webkit-scrollbar-thumb {
						background: #333;
					}
				}
				.description{
          .webform-element-description{
            padding: .25rem;
            font-size: .8rem;
            color: #aaa;
          }
        }
				.form-item--error-message{
					padding: 1rem;
					font-size: .8rem;
					color: var(--foreground);
					background-color: red;
				}
			}
		
			.form-type-textarea{
				grid-column-start: 1;
				grid-column-end: span 4;
				padding-top: 0;

				width: 100%;
				textarea{
					padding: 1rem;
					width: calc(100% - (2rem + 2px));
					height: calc(10rem - 2rem);
					resize: none;
					outline: none;
					color: var(--foreground);
					border: solid 1px var(--foreground);
					background-color: var(--primary);
					&::placeholder{
						color: #555;
					}
				}
			}
		}

		#edit-additional-details-group{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-top: 0;

			fieldset{
				margin: 0 1rem 0 0;
				border: solid 1px $solaire-gray2;
				padding: .5rem 0;
				legend{
					padding: .5rem 1rem;
					background-color: $solaire-gray4;
					span{
						color: var(--foreground);
					}
				} 
				.fieldset-wrapper{
					.js-webform-radios{
						display: flex;
						align-items: center;
						justify-content: center;
						.form-item label{
							margin-right: .5rem;
							color: var(--foreground);

						}
					}

				}
			}
		}
		#edit-information,
		#edit-event-preference,
		#edit-engagement-feedback{
			display: grid;
			margin-top: 0;
			padding-top: 1rem;
			grid-template-columns: 1fr 1fr 1fr;
		}

		#edit-engagement-feedback .form-type-checkbox,
		.form-type-checkbox{
			padding: 1rem 1rem 2rem 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			input[type=checkbox]{
				display: none;
			}

			label{
				margin-bottom: 0;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				color: var(--foreground);
				cursor: pointer;
				&.form-required{
					&::after{
						content: '*';
						color: red;
					}
				}
				&::before{
					content: '';
					display: block;
					width: 1rem;
					height: 1rem;
					margin-right: .5rem;
					border: solid 2px var(--primary);
					background: none;
					background-size: 0;
					
					transition: background-size .2s var(--ease);
				}
			}
			input[type=checkbox]:checked + label::before,
			input[type=checkbox]:checked + .description::before{
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="55" height="46" viewBox="0 0 55 46" fill="none"><path d="M5 26L17 38L50 5" stroke="%23DF6A2E" stroke-width="10" stroke-linecap="round"/></svg>');
				background-size: 60%;
				background-position: center;
				background-repeat: no-repeat;
			}

		}
		#edit-engagement-feedback{
			.webform-flex--1{
				display: flex;
				align-items: center;
				width: 100%;
			}
			.form-type-checkbox{
				padding: 1rem 1rem 0;
			}
			.webform-flex--container{
				width: 100%;
			}
		} 
		#edit-privacy-captcha{
			.webform-flex{
				flex: auto;
				&:nth-of-type(1){
					width:calc(100% - 30rem);
				}
				&:nth-of-type(2){
					width: 30rem;
				}
			}
		}
		.form-item-privacy-policy{
			padding-top: 2rem;
			padding-right: 0;
			border-top: solid 1px var(--foreground);
			label{
				margin-bottom: .5rem;
			}
			.description{
				margin-top: .5rem;
				width: 100%;
				#edit-privacy-policy--description{
					font-size: .9rem;
					color: var(--foreground);
					white-space: normal;
					a{
						font-size: inherit;
						color: var(--primary);
						&:hover{
							text-decoration: underline;
						}
					}
				}
			}
		}
		

		// captcha
		.captcha{
			border: none;
			margin: 0 auto 2rem;
			padding: 1rem;
			width: calc(100% - 2rem);
			// max-width: 20rem;
			background-color: $solaire-gray;
			legend{
				padding: 1rem;
				margin-left: -1rem;
				width: 100%;
				color: var(--foreground);
				font-family: 700;
				background-color: $solaire-gray4;
			}
			.captcha__element{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				gap:0;
				.captcha__image-wrapper{
					display: block;
					img{
						padding: 0;
						margin: 0;
						border: none;
						width: 8rem;
					}
					.reload-captcha-wrapper{
						a{
							margin: .25rem 0 0;
							color: transparent;
							filter: invert(1);
						}
					}
				}
				.form-item{
					display: flex;
					flex-direction: column;
					min-width: auto;
					label,
					.description{
						margin: 0 0 .25rem;
						font-size: .8rem;
						color: var(--foreground);
					}
					input[type=text]{
						margin: .25rem 0;
						padding: .5rem;
						width: 10rem;
						outline: none;
						border: none;
					}
				}
			}
			.captcha__description{
				display: none;
			} 
		}

		#edit-actions--2,
		#edit-actions{
			display: flex;
			justify-content: center;
			input[type=submit]{
				display: block;
				padding: .8rem .5rem;
				width: calc(80% - 2rem);
				max-width: 30rem;
				color: var(--foreground);
				font-family: $font-fig;
				font-size: .8rem;
				text-transform: uppercase;
				border: none;
				outline: none;
				background-color: var(--primary);
				cursor: pointer;

				transition: .3s all var(--ease);

				&:hover {
					color: var(--primary);
					background-color: var(--foreground);
				}
			}
		}
	}
	.hide{
		display: none;
	}
	.webform-flex--3{
		grid-column: 1 / span 3;
	}

}

//Press Room Filter
#block-pressroomfilter{
	position: relative;
	margin: 0 auto 2rem;
	width: 100%;
	max-width: 1200px;
	h1{
		margin-bottom: 2rem;
	}
	.press-filter{
		padding: 2rem;
		background-color: $solaire-gray;
	}
	form{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap:1rem;
		.form-group{
			width: 100%;
			&:not(:last-child){
				border-right: solid 1px #555;
			}
		}
		label{
			display: block;
			font-size: 0.8rem;
			text-transform: uppercase;
			color: var(--foreground);
			cursor: pointer;
		}
		input[type=text]{
			display: block;
			padding: .5rem 0;
			width: 100%;
			background:transparent;
			border: none;
			outline: none;
			color: var(--primary)2;
			&::placeholder{
				color: #555;
			}
		}
		button[type=submit]{
			display: block;
			padding: 0.8rem 1rem;
			width: 100%;
			background-color: var(--primary);
			font-size: 1rem;
			text-align: center;
			text-transform: uppercase;
			opacity: 1;
			transition: opacity 0.3s var(--ease);
			border: none;
			color: var(--foreground);
			cursor: pointer;
		}
	}
}

body[data-theme="light"]{
	// meeting-events and experience inquiry form
	#block-contact-us,
	#block-booking-inquiry-webform{
		form{
			border-top: solid 1px var(--accent-foreground);
			// titles
			#edit-booking-details,
			#edit-personal-details{
				background-color: var(--foreground);
			}
			#edit-booking-details-group,
			#edit-personal-details-group{
				.form-item{
					label{
						color: $black;
					}
					select,
					input[type=text],
					input[type=email],
					input[type=date],
					input[type=time],
					input[type=number],
					input[type=tel]{
						border: solid 1px var(--accent-foreground);
						color: $black;
					}
					input[type=date]::-webkit-calendar-picker-indicator,
					input[type=time]::-webkit-calendar-picker-indicator{
						filter: invert(0);
					}

					select{
						background-color: var(--primary)L;
					}
				}
			}
			#edit-personal-details-group{
				.form-item-contact-number{
					.iti__country-list{
						&::-webkit-scrollbar-track {
							background: #aaa;
						}&::-webkit-scrollbar-thumb {
							background: #333;
						}
					}
					.description{
						.webform-element-description{
							color: $black;
						}
					}
				}
			
				.form-type-textarea{
					textarea{
						color: $black;
						border: solid 1px var(--accent-foreground);
						background-color: var(--primary)L;
					}
				}
			}
			#edit-additional-details-group{
				fieldset{
					border: solid 1px var(--accent-foreground);
					legend{
						background-color: $solaire-gray4L;
						span{
							color: $black;
						}
					} 
				}
			}

			.form-type-checkbox{
				label{
					color: $black;
					&::before,
					&::after{
						filter: invert(1) grayscale(1);
					}
				}
			}
			.form-item-privacy-policy{
				border-top: solid 1px var(--accent-foreground);
				.description{
					#edit-privacy-policy--description{
						color: $black;
						a{
							color: $black;
							text-decoration: underline;
						}
					}
				}
			}

			#edit-actions--2,
			#edit-actions{
				input[type=submit]{
					background-color: $black;
					&:hover {
						color: var(--foreground);
						background-color: var(--primary);
					}
				}
			}
		}
	}
}