.wp-block-wrd-contact-form {
	.wpcf7-form {
		display: flex;
		flex-direction: column;
		gap: 1.375rem;
		position: relative;

		& > label {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.wpcf7-text,
		.wpcf7-textarea,
		.wpcf7-select {
			background: rgba(255 255 255 / 0.1);
			width: 100%;
			padding: 0.5rem 0.875rem;
			border-radius: 2rem;
			resize: none;
			backdrop-filter: blur(0.5rem) brightnesS(1.25);
			color: #fff;
			border: 1px solid rgba(255 255 255 / 0.1);
			box-shadow: 0 0.25rem 0.5rem rgba(0 0 0 / 0.2);
			transition:
				border-color 150ms ease,
				background 250ms ease;
			order: 10;

			&:hover {
				border-color: rgba(255 255 255 / 0.21);
			}

			&:focus {
				border-color: rgba(255 255 255 / 0.25);
				background: rgba(0 0 0 / 0.25);
				outline: none;
			}
		}

		.wpcf7-textarea {
			height: 15rem;
			border-radius: 0.25rem;
		}

		.wpcf7-select {
			option {
				color: #000;
				background: #fff;
			}
		}

		.wpcf7-not-valid-tip {
			display: block;
			color: #ff7272;
			font-size: 0.875rem;
			margin-top: 0.5rem;
		}

		.wpcf7-submit {
			width: 100%;
			padding: 0.5rem 0.875rem;
			border-radius: 5rem;
			background: var(--color-surface-0);
			color: var(--color-surface-950);
			font-weight: 600;
			height: 2.5rem;
			box-shadow: 0 0.25rem 0.5rem rgba(0 0 0 / 0.2);
			cursor: pointer;
			order: 90;

			&:is(.submitting *) {
				color: transparent;
			}
		}

		.wpcf7-spinner {
			position: absolute;
			bottom: 0rem;
			left: calc(50% - 1.25rem);
			margin: 0;
			background: transparent;
			height: 2.5rem;
			width: 2.5rem;
			scale: 0.66;

			&::before {
				background: var(--color-primary-500);
				top: 0.25rem;
				left: 0.25rem;
				width: 0.75rem;
				height: 0.75rem;
				transform-origin: 1rem 1rem;
			}
		}

		.wpcf7-response-output {
			margin: 0;
			color: var(--color-surface-0);
			border-radius: 0.25rem;
			padding: 1.25rem 1.25rem;
			border: 1px solid rgba(255 255 255 / 0.1) !important;
			box-shadow: 0 0.25rem 0.5rem rgba(0 0 0 / 0.2);
			order: 80;
			background: rgba(0 0 0 / 0.1);
			backdrop-filter: blur(0.5rem);

			&::before {
				content: "";
				display: block;
				width: 1.5rem;
				height: 1.5rem;
				margin-bottom: 1rem;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			&:is(.sent *) {
				&::before {
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="%232cc014"><path d="m1 31.416 2.83-2.83 10 10L46.413 6l2.83 2.828-32.587 32.588-2.825 2.824Z"/></svg>');
				}
			}

			&:is(.invalid *, .unaccepted *, .payment-required *) {
				border-color: rgb(255 215 0 / 25%) !important;

				&::before {
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="%23ff9400"><path d="M25 11.958 6.952 43h36.1zM25 4l25 43H0Z"/></svg>');
				}
			}

			&:is(.failed *, .aborted *, .spam *) {
				border-color: rgb(255 0 0 / 0.25) !important;

				&::before {
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="%23b81c21"><path d="M25.001 27.83 2.916 49.914l-2.83-2.828 22.085-22.084L.086 2.914 2.916.086 25.001 22.17 47.086.086l2.83 2.828L27.831 25l22.085 22.086-2.83 2.83Z"/></svg>');
				}
			}
		}
	}
}