@layer inputs {

	.wpcf7 {
		.before-send {
			display: flex;
			flex-direction: column;
			gap: 30px;
		}

		.after-send {
			display: none;
			padding: 20px 36px;
			flex-direction: column;
			gap: 5px;
			border: 3px solid var(--color-red);
			color: var(--color-red);
			line-height: 150%;

			strong {
				font-weight: var(--font-weight-extra-bold);
				font-size: var(--font-size-2xl);
			}

			p {
				margin: 0;
				font-size: var(--font-size-xl);
			}

			@media screen and (max-width: 767px) {
				padding: 15px 28px;
				line-height: 130%;

				strong {
					font-size: var(--font-size-xl);
				}

				p {
					font-size: var(--font-size-lg);
				}
			}
		}

		.row {
			row-gap: 24px;

			@media screen and (max-width: 767px) {
				row-gap: 12px;
			}
		}

		/* Address Type */
		span[data-name="address_type"] {
			display: block;

			.wpcf7-radio {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
			}

			.wpcf7-list-item {
				margin: 0;

				input[type="radio"] {
					position: absolute;
					opacity: 0;
					width: 0;
					height: 0;
				}

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

				.wpcf7-list-item-label {
					display: flex;
					padding: 15px 36px;
					align-items: center;
					font-weight: var(--font-weight-extra-bold);
					border-width: 3px;
					border-color: var(--color-red);
					color: var(--color-red);
					border-style: none none solid none;
					transition: color 0.3s, border-color 0.3s;
					cursor: pointer;
					font-size: var(--font-size-2xl);
					text-align: center;
					justify-content: center;

					@media screen and (max-width: 767px) {
						font-size: var(--font-size-lg);
						padding: var(--space-3) var(--space-4);
					}

					&:hover,
					&:focus-within {
						color: var(--color-dark-blue);
						border-bottom-color: var(--color-dark-blue);
					}
				}

				input[type="radio"]:checked+.wpcf7-list-item-label {
					color: var(--color-dark-blue);
					border-bottom-color: var(--color-dark-blue);
				}
			}
		}

		/* CF7 conditional groups */
		div[data-id="personal"],
		div[data-id="company"] {
			margin-bottom: 70px;

			@media screen and (max-width: 767px) {
				margin-bottom: 20px;
			}
		}

		/* input fields */
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		select,
		textarea {
			width: 100%;
			padding: 15px 36px;
			border: 3px solid var(--color-light-gray);
			font-size: var(--font-size-2xl);
			font-weight: var(--font-weight-extra-bold);
			transition: border-color 0.3s;
			border-radius: 0;

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-lg);
				padding: var(--space-3) var(--space-4);
				border: 2px solid var(--color-light-gray);
			}
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: var(--color-dark-blue);
			outline: none;
		}

		input[type="text"]::placeholder,
		input[type="email"]::placeholder,
		input[type="tel"]::placeholder,
		select::placeholder,
		textarea::placeholder {
			color: var(--color-dark-gray);
			opacity: 1;
		}

		input[aria-invalid="true"],
		select[aria-invalid="true"],
		textarea[aria-invalid="true"] {
			border-color: var(--color-red);
		}

		.wpcf7-not-valid-tip {
			margin-top: var(--space-1);
		}

		/* checkboxes */
		.wpcf7-checkbox {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			margin-bottom: 70px;
			padding: var(--space-2) 0;

			@media screen and (max-width: 767px) {
				margin-bottom: 20px;
			}

			.wpcf7-list-item {
				margin: 0;

				/* custom checkbox */
				input[type="checkbox"] {
					position: absolute;
					opacity: 0;
					cursor: pointer;
					height: 0;
					width: 0;
				}

				.wpcf7-list-item-label {
					position: relative;
					padding-left: 34px;
					cursor: pointer;
					font-size: var(--font-size-xl);
					font-weight: var(--font-weight-extra-bold);
					color: var(--color-dark-gray);
					line-height: 110%;
					display: flex;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: -1px;
						width: 20px;
						height: 20px;
						border: 1px solid var(--color-red);
						background-color: rgba(var(--color-red-rgb), 0.4);
						border-radius: 2px;
						transition: transform 0.2s ease, background-color 0.3s ease;
					}

					/* check icon background svg encoded */
					&:after {
						content: '';
						background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' fill='none'%3E%3Cpath stroke='%23FBB1A3' stroke-linejoin='round' stroke-width='2' d='M1 5.444 4.692 9 13 1'/%3E%3C/svg%3E") no-repeat center center;
						background-size: contain;
						position: absolute;
						left: 3.5px;
						top: 9px;
						transform: translateY(-50%) translateX(-50%) scale(0);
						width: 14px;
						height: 10px;
						transition: transform 0.2s ease;
					}

					&:hover:before {
						background-color: rgba(var(--color-red-rgb), 0.6);
					}

					input[type="checkbox"]:checked+&:after {
						transform: translateY(-50%) scale(1);
					}

					input[type="checkbox"]:checked+&:before {
						background-color: var(--color-red);
					}
				}
			}
		}

	}

	.invalid .wpcf7-response-output,
	.invalid .wpcf7-not-valid-tip {
		color: var(--color-red);
	}
}