/* Styles configuration */
@property --gradient-overlay-opacity {
	syntax: "<number>";
	initial-value: 0.3;
	inherits: false;
}

:root {
	--cf7-font: inherit;
	--cf7-font-size: var(--wp--preset--font-size--text-regular);
	--cf7-font-weight: 500;
	--cf7-labels: var(--wp--preset--color--white);
	--cf7-input-background: var(--wp--preset--color--white-10);
	--cf7-input-text: var(--wp--preset--color--white);
	--cf7-input-border: 2px solid transparent;
	--cf7-input-border-color: var(--wp--preset--color--white-10);
	--cf7-border-radius: 6px;
	--cf7-accent: var(--wp--preset--color--white-60);
	--cf7-accent-hover: #247de9;
	--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: #ffa8a8;
	--cf7-warning-bg: var(--wp--preset--color--luminous-vivid-amber);
	--cf7-success-bg: var(--wp--preset--color--vivid-green-cyan);
}

/* 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--m);
		p {
			margin: 0;
		}
	}

	label {
		color: var(--cf7-labels);

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

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

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

	a {
		color: var(--cf7-accent);
		text-decoration: none;

		&: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 {
		border: var(--cf7-input-border);
		background-color: var(--cf7-input-background);
		border-radius: var(--cf7-border-radius);
		line-height: 1.3;
		padding: 0.375rem 0.75rem;
		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);
		width: 100%;

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

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

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

	input[type="text"] {
		border: var(--cf7-input-border);
		background-color: var(--cf7-input-background);
		border-radius: var(--cf7-border-radius);
		line-height: 1.3;
		padding: 0.375rem 0.75rem;
		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);
		width: 100%;
	}

	textarea {
		resize: vertical;
	}

	/* Submit Button */
	input[type="submit"] {
		width: fit-content;
		font-weight: var(--cf7-font-weight);
		background-color: var(--cf7-accent);
		color: var(--cf7-accent-text);
		border: 0;
		padding: 15px 30px;
		border-radius: 999px;
		position: relative;
		font-size: var(--cf7-font-size);
		font-family: var(--cf7-font);
		--gradient-overlay-opacity: 0.3;
		background: linear-gradient(
				0deg,
				rgba(21, 67, 89, var(--gradient-overlay-opacity)) 0%,
				rgba(21, 67, 89, var(--gradient-overlay-opacity)) 100%
			),
			linear-gradient(104deg, #fce953 0%, #2e7b04 100%);
		transition: --gradient-overlay-opacity 0.3s ease-in-out;

		&:hover {
			--gradient-overlay-opacity: 0.5;
			cursor: pointer;
		}

		&:disabled {
			color: #ffffff;
			background-color: var(--cf7-warning);
			border: 0;
			cursor: not-allowed;

			&:hover {
				color: #ffffff;
				background-color: var(--cf7-warning);
				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: 2px;
		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 {
			margin: 0;
			padding: 10px 20px;
			border: 0;
			border-radius: var(--cf7-border-radius);
		}

		&.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;
		}
	}
}