.demo, .demo__complete {
	padding: 120px 0 20px 0;
	max-width: 1080px;
	margin: 0 auto;

	display: flex;
	gap: 40px;

	.demo__head {
		max-width: 50%;

		display: flex;
		flex-direction: column;
		gap: 16px;

		.demo__heading {
			color: var(--text-base-primary);
			font: var(--font-display-semi-md);
		}

		.demo__subtext {
			color: var(--text-base-secondary);
			font: var(--font-body-reg-lg);
		}

		.demo__list {
			padding: 32px 0 20px 0;
			display: flex;
			flex-direction: column;
			gap: 12px;

			.demo__list__item {
				display: flex;
				gap: 8px;

				color: var(--text-base-secondary);
				font: var(--font-body-reg-md);
			}
		}
	}

	.demo__form-wrapper {
		max-width: 50%;

		.demo__form {
			border-radius: 16px;
			background: var(--base-white-solid);
			box-shadow: var(--shadow-regular-out);

			flex-grow: 1;

			.demo__form__body {
				width: 100%;
				padding: 40px 40px 0 40px;
				display: flex;
				flex-direction: column;
				gap: 28px;
				box-sizing: border-box;

				.demo__form__row {
					display: flex;
					gap: 16px;

					.demo__form__item {
						display: flex;
						flex-direction: column;
						gap: 8px;
						flex-grow: 1;
						min-width: 0;

						.demo__form__item-title {
							color: var(--text-base-primary);
							font: var(--font-body-semi-sm);

							sup {
								color: var(--text-base-ghost);
								font: var(--font-body-semi-sm);
							}
						}

						.demo__form__item-message {
							display: none;
							color: var(--global-state-focus-danger);
							font: var(--font-body-reg-xs);
						}

						.demo__form__item-input {

							input, textarea {
								border: 0;
								border-radius: 10px;
								background: var(--input-form-bg-default);
								box-shadow: var(--shadow-input-form-default);
								padding: 10px 12px;
								width: 100%;
								box-sizing: border-box;

								&:hover {
									box-shadow: var(--shadow-input-form-hover);
								}
							}

							&.demo__form__item-error {
								input, textarea {
									background: var(--input-form-bg-error);
									box-shadow: var(--shadow-input-form-error);
								}

								&+.demo__form__item-message {
									display: block;
								}
							}
						}

						&.demo__form__item-iti {
							--iti-hover-color: var(--base-greengrey-a-100);

							.demo__form__item-input {
								max-width: 100%;

								.iti__selected-country-primary {
									border-radius: 9px 0 0 9px;
								}

								.iti__search-input {
									outline: none;
									border: 0;
									box-shadow: 0 0.5px 0 0 var(--iti-border-gray);
									border-radius: 2px 2px 0 0;
								}

								input {
									padding-right: 0;
								}
							}
						}

						&.demo__form__item-team {

							.demo__form__item-input {
								display: flex;
								justify-content: space-between;
								flex-wrap: wrap;

								input.input {
									width: 82px;
									text-align: center;
								}

								.demo__form__item-teamBtn {
									display: flex;
									gap: 8px;
									flex-wrap: nowrap;

									.btn.btn-semi-active {
										background: var(--base-white-solid);
										box-shadow: 0 0 0 1.5px var(--global-state-focus-default);
									}
								}
							}
						}
					}
				}
			}

			.demo__form__footer {
				width: 100%;
				padding: 8px 40px 24px 40px;
				box-sizing: border-box;

				display: flex;
				gap: 12px;
				align-items: flex-start;

				input[type=checkbox] {
					margin: 14px 0;
				}

				label {
					display: block;
					padding: 12px 0;
					color: var(--text-base-secondary);
					font-family: var(--font-family-secondary), serif;
					font-size: var(--font-size-body-xs);
					font-style: normal;
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-xs);
					letter-spacing: var(--letter-spacing-regular);
					user-select: none;

					a {
						color: var(--text-base-secondary);
						font-family: var(--font-family-secondary), sans-serif;
						font-size: var(--font-size-body-xs);
						font-style: normal;
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-xs);
						letter-spacing: var(--letter-spacing-regular);
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: auto;
						text-decoration-thickness: 8%;
						text-underline-offset: 12%;
						text-underline-position: from-font;

						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}

		.demo__form-security {
			padding-top: 24px;
			display: flex;
			gap: 24px;
			align-items: center;
			justify-content: center;
		}
	}

	.demo__image {
		img {
			max-width: 100%;
		}
	}
}

.iti {
	font-family: Arial, sans-serif;
	font-size: 13px;
	width: 100%;
}

#demoComplete {
	display: none;
	.demo__complete {
		padding-bottom: 200px;
	}
}