:root {
	--cf7-font: inherit;
	--cf7-font-size: var(--wp--preset--font-size--text-small);
	--cf7-font-weight: 400;
	--cf7-labels: var(--wp--preset--color--foreground);
	--cf7-input-background: var(--wp--preset--color--white);
	--cf7-input-text: var(--wp--preset--color--foreground);
	--cf7-input-border: 1px solid var(--wp--preset--color--accent-6);
	--cf7-input-border-color: var(--wp--preset--color--accent);
	--cf7-border-radius: 10px;
	--cf7-accent: var(--wp--preset--color--white-60);
	--cf7-accent-hover: var(--wp--preset--color--accent-4);
	--cf7-accent-outline: var(--wp--preset--color--white-50);
	--cf7-accent-text: #ffffff;
	--cf7-output-text: var(--wp--preset--color--neutral-darkest-60);
	--cf7-danger-bg: red;
	--cf7-warning-bg: var(--wp--preset--color--luminous-vivid-amber);
	--cf7-success-bg: var(--wp--preset--color--vivid-green-cyan);
}

.is-style-cf-subscribe,
.is-style-cf-contact {
	/* General Settings */
	.wpcf7 {
		font-family: var(--cf7-font);
		font-weight: var(--cf7-font-weight);

		.wpcf7-form {
			display: flex;
			flex-direction: column;
			gap: var(--wp--preset--spacing--50);

      .rw-subscribe {
        width: fit-content;
        background: var(--wp--preset--color--white);
        padding: .375rem;
        gap: .375rem;
        border-radius: 999px;
        display: flex;
        align-items: center;
        label {
          > .wpcf7-form-control-wrap {
            margin-top: 0;
          }
        }

        input[type="email"] {
          border-radius: 999px;
        }
      }
		}

		label {
      font-weight: 600;
			color: var(--cf7-labels);

			> .wpcf7-form-control-wrap {
				margin-top: var(--wp--preset--spacing--20);
			}
		}

		.wpcf7-form-control-wrap {
			display: flex;
			:has(.wpcf7-quiz) {
				display: flex;
				width: 100%;
				flex-direction: column;
				.wpcf7-quiz {
					margin-top: var(--wp--preset--spacing--30);
					width: initial;
				}
			}
		}

		.wpcf7-list-item {
			margin-left: 0;
			margin-right: 15px;
		}

		a {
			&:hover {
				color: var(--cf7-accent-hover);
			}

			&:focus {
				border: 1px solid var(--wp--preset--color--white);
				outline: none;
			}
		}

		/* General Inputs */
		input[type="color"],
		input[type="date"],
		input[type="datetime-local"],
		input[type="datetime"],
		input[type="email"],
		input[type="month"],
		input[type="number"],
		input[type="search"],
		input[type="tel"],
		input[type="text"],
		input[type="time"],
		input[type="url"],
		input[type="week"],
		textarea {
      box-sizing: border-box;
			border: var(--cf7-input-border);
			background-color: var(--cf7-input-background);
			border-radius: var(--cf7-border-radius);
			line-height: 1.3;
			padding: 0.25rem 1rem;
			color: var(--cf7-input-text);
			min-height: 40px;
			font-size: var(--cf7-font-size);
			font-weight: var(--cf7-font-weight);
			font-family: var(--cf7-font);
			width: 100%;

			&:hover {
				border-color: var(--wp--preset--color--accent-4);
				outline: none;
				font-size: var(--cf7-font-size);
			}

			&:focus {
				border-color: var(--wp--preset--color--accent-4);
				outline: none;
			}

			&::placeholder {
				color: var(--cf7-input-text);
				opacity: 0.5;
			}
		}

		textarea {
			margin-top: var(--wp--preset--spacing--xs);
			resize: vertical;
		}

		/* Submit Button */
		input[type="submit"] {
			width: fit-content;
			font-weight: var(--cf7-font-weight);
			background-color: var(--wp--preset--color--accent-1);
			color: var(--wp--preset--color--white);
			border: 0;
			padding: .5rem 1rem;
      min-height: 40px;
			border-radius: 999px;
			position: relative;
			font-size: 1rem;
			font-family: var(--cf7-font);
      font-weight: 500;
			transition: background-color 0.3s ease-in-out;

			&:hover {
				background-color: var(--wp--preset--color--accent-4);
				cursor: pointer;
			}

			&:disabled {
				color: #ffffff;
				background-color: var(--wp--preset--color--accent-5);
				border: 0;
				cursor: not-allowed;

				&:hover {
					color: #ffffff;
					background-color: var(--wp--preset--color--accent-5);
					border: 0;
					cursor: not-allowed;
				}
			}
		}

		.wpcf7-spinner {
			display: none;
		}

		/* Custom Checkbox */
		input[type="checkbox"] {
			-webkit-appearance: none;
			appearance: none;
			background-color: var(--cf7-input-background);
			width: 18px;
			height: 18px;
			border: var(--cf7-input-border);
			border-radius: 4px;
			margin: 0;
			padding: 0;
			display: grid;
			place-content: center;
			cursor: pointer;
      flex-shrink: 0;

			&:hover {
				background-color: var(--wp--preset--color--white-30);
				border-color: var(--cf7-input-border-color);
			}

			&:focus {
				border-color: var(--cf7-input-border-color);
				outline: none;
			}

			&:before {
				content: "";
				width: 14px;
				height: 11px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' fill='none' viewBox='0 0 14 11'%3E%3Cpath fill='%23000' d='M4.572 8.055 1.373 4.856 0 6.23l4.572 4.572L14 1.373 12.627 0 4.572 8.055Z'/%3E%3C/svg%3E");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				transform: scale(0);
				transition: 120ms transform ease-in-out;
			}

			&:checked {
				background-color: var(--wp--preset--color--white);

				&:before {
					transform: scale(1);
				}
			}
		}

		/* Custom Radio */
		input[type="radio"] {
			-webkit-appearance: none;
			appearance: none;
			background-color: var(--cf7-input-background);
			margin: 0;
			font: inherit;
			color: var(--cf7-accent);
			width: 18px;
			height: 18px;
			border: var(--cf7-input-border);
			border-radius: 100%;
			display: grid;
			place-content: center;
			cursor: pointer;

			&:hover {
				background-color: var(--wp--preset--color--white-30);
				border-color: var(--cf7-input-border-color);
			}

			&:focus {
				border-color: var(--cf7-input-border-color);
				outline: none;
			}

			&::before {
				content: "";
				width: 10px;
				height: 10px;
				border-radius: 100%;
				transform: scale(0);
				transition: 120ms transform ease-in-out;
				box-shadow: inset 1em 1em var(---wp--preset--color--black);
			}

			&:checked {
				background-color: var(--wp--preset--color--white);
				&:before {
					background-color: var(--wp--preset--color--black);
					transform: scale(1);
				}
			}
		}

		.wpcf7-checkbox label,
		.wpcf7-acceptance label,
		.wpcf7-radio label {
			display: flex;
			align-items: center;
			font-size: 0.875rem;
			gap: 0.5rem;
		}

		/* File Input */
		input[type="file"] {
			color: var(--cf7-input-text);
			font-size: var(--cf7-font-size);
			font-weight: var(--cf7-font-weight);
			font-family: var(--cf7-font);

			&:focus {
				outline: none;
				border: 0;
			}

			&::file-selector-button {
				border: var(--cf7-input-border);
				background-color: var(--cf7-input-background);
				border-radius: var(--cf7-border-radius);
				line-height: 1.3;
				padding: 0.7rem 1rem;
				color: var(--cf7-input-text);
				min-height: 35px;
				font-size: var(--cf7-font-size);
				font-weight: var(--cf7-font-weight);
				font-family: var(--cf7-font);
				cursor: pointer;
				margin-right: 20px;

				&:hover {
					border-color: var(--cf7-input-border-color);
					outline: none;
					font-size: var(--cf7-font-size);
				}
			}
		}

		/* Select */
		select {
			border-color: var(--cf7-input-border-color);
			background-color: var(--cf7-input-background);
			border-radius: var(--cf7-border-radius);
			line-height: 1.3;
			padding: 0.7rem 1rem;
			color: var(--cf7-input-text);
			min-height: 35px;
			font-size: var(--cf7-font-size);
			font-weight: var(--cf7-font-weight);
			font-family: var(--cf7-font);

			option {
				background-color: var(--wp--preset--color--background);
			}

			&:hover {
				border: 1px solid var(--wp--preset--color--white);
				outline: none;
				font-size: var(--cf7-font-size);
			}

			&:focus {
				border: 1px solid var(--wp--preset--color--white);
				outline: none;
			}
		}

		/* Invalid Fields */
		.wpcf7-not-valid-tip {
			color: var(--cf7-danger-bg);
			font-size: var(--wp--preset--font-size--small);
			font-weight: var(--cf7-font-weight);
			position: absolute;
      top: 100%;
		}

		.wpcf7-not-valid {
			input {
				border-color: var(--cf7-danger-bg);
			}
		}

		.wpcf7-not-valid:not(input[type="file"]):not(span) {
			border-color: var(--cf7-danger-bg);
		}

		/* Response Messages */
		form {
			&.init .wpcf7-response-output {
				display: none;
			}

			.wpcf7-response-output {
        width: fit-content;
        max-width: 350px;
        font-size: var(--wp--preset--font-size--small);
				margin: 0;
				padding: .5rem;
				border: 0;
				border-radius: 8px;
			}

			&.sent .wpcf7-response-output {
				background-color: var(--cf7-success-bg);
				color: var(--cf7-output-text);
				border: 0;
			}

			&.failed .wpcf7-response-output,
			&.aborted .wpcf7-response-output {
				background-color: var(--cf7-danger-bg);
				color: var(--cf7-output-text);
				border: 0;
			}

			&.spam .wpcf7-response-output,
			&.invalid .wpcf7-response-output,
			&.unaccepted .wpcf7-response-output {
				background-color: var(--cf7-warning-bg);
				color: var(--cf7-output-text);
				border: 0;
			}
		}
	}
}

.is-style-cf-subscribe {
  .wpcf7 {
    .wpcf7-form {
      gap: var(--wp--preset--spacing--30);
    }
  }
}