/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-gutena-forms {

	/*Inside row make image block flex for fix alignment issue*/
	.wp-block-group.is-layout-flex > .wp-block-image {
		display: flex;
	}

	.is-vertical.is-layout-flex.wp-block-group {
		.gutena-forms-field,
		.heading-input-label-gutena {
			min-width: 100%;
		}

	}

	.gutena-forms-field,
	.heading-input-label-gutena {
		background-color: transparent;
	}

	//Hide form labels
	&.not-show-form-labels .heading-input-label-gutena {
		display:none;
	}

	&.has-label-font-family .heading-input-label-gutena {
		font-family: var(--wp--gutena-forms--label-font-family);
	}

	.heading-input-label-gutena {
		color: var(--wp--gutena-forms--label-color);
		font-size: var(--wp--gutena-forms--label-font-size,13px);
		line-height: var(--wp--gutena-forms--label-line-height);
		font-weight: var(--wp--gutena-forms--label-font-weight);
	}

	.gutena-forms-field {
		color: var(--wp--gutena-forms--label-color);
		/*Background color not for radio, checkbox */
		&:not(.checkbox-field):not(.radio-field):not(.optin-field) {
			background-color: var(--wp--gutena-forms--input-bg-color,'transparent');
			&:-webkit-autofill,
			&:-webkit-autofill:hover,
			&:-webkit-autofill:focus {
			-webkit-box-shadow: 0 0 0px 1000px var(--wp--gutena-forms--input-bg-color,'transparent') inset;
			transition: background-color 5000s ease-in-out 0s;
			}
		}

		&.checkbox-field, &.radio-field {
			&.inline-options{
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem 1.5rem;
			}

			@for $i from 1 through 6 {
				&.has-#{$i}-col {
					display: grid;
					grid-template-columns: repeat(#{$i},1fr);
				}
			}
		}

		/* Input checkbox style */
		&.checkbox-field, &.optin-field {
			/* The container */
			.checkbox-container, .optin-container {
				display: block;
				position: relative;
				padding-left: 25px;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;


				/* Hide the browser's default checkbox */
				input {
					position: absolute;
					opacity: 0;
					cursor: pointer;
					height: 0;
					width: 0;
				}

				/* On mouse-over, add a grey background color */
				// &:hover input ~ .checkmark {
				// 	background-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
				// }

				/* When the checkbox is checked, add a blue background */
				input:checked ~ .checkmark {
					background-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 )) ;
					border-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 )) ;
				}

				/* Show the checkmark when checked */
				input:checked ~ .checkmark:after {
					display: block;
				}

				/* Style the checkmark/indicator */
				.checkmark:after {
					left: 5px;
					top: 2px;
					width: 3px;
					height: 7px;
					border: solid white;
					border-width: 0 3px 3px 0;
					-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}

			/* Create a custom checkbox */
			.checkmark {
				position: absolute;
				left: 0;
				height: 16px;
				width: 16px;
				border: 1px solid var(--wp--gutena-forms--input-border-color, #D7DBE7);
				border-radius: 2px;
				background-color: #ffffff;
				top: 50%;
    			transform: translateY(-50%);
			}

			/* Create the checkmark/indicator (hidden when not checked) */
			.checkmark:after {
				content: "";
				position: absolute;
				display: none;
			}
		}

		/* Input radio style */
		&.radio-field {
			/* The container */
			.radio-container {
				border: 0.8px solid var(--wp--gutena-forms--input-border-color, #D7DBE7);
				background-color: var(--wp--gutena-forms--input-bg-color,'transparent');
				border-radius: 8px;
				margin-bottom: 15px;
				margin-right: 5px;
				padding: 10px 10px;
				position: relative;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				display: flex;
				justify-content: space-between;
				font-size: var(--wp--gutena-forms--placeholder-font-size);
				line-height: var(--wp--gutena-forms--placeholder-line-height);
				font-weight: var(--wp--gutena-forms--placeholder-font-weight);
				color: var(--wp--gutena-forms--label-color);

				&:focus-within {
					border-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
				}

				/* Hide the browser's default radio button */
				input {
					position: absolute;
					opacity: 0;
					cursor: pointer;
				}

				/* On mouse-over, add a grey background color */
				&:hover input ~ .checkmark {
					background-color: #ffffff;
				}

				/* When the radio button is checked, add a blue background */
				input:checked ~ .checkmark {
					background-color: #ffffff;
					border-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
				}

				/* Show the indicator (dot/circle) when checked */
				input:checked ~ .checkmark:after {
					display: block;
				}

				/* Style the indicator (dot/circle) */
				.checkmark:after {
					top: 3px;
					left: 3px;
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
				}
			}

		  /* Create a custom radio button */
		  .checkmark {
			position: absolute;
			right: 10px;
			height: 16px;
			width: 16px;
			background-color: #ffffff;
			border: 1px solid var(--wp--gutena-forms--input-border-color, #D7DBE7);
			border-radius: 50%;
			top: 50%;
			transform: translateY(-50%);
		  }

		  /* Create the indicator (the dot/circle - hidden when not checked) */
		  .checkmark:after {
			content: "";
			position: absolute;
			display: none;
		  }

		  &.inline-options {
			.radio-container {
				margin-bottom: 0;
				margin-right: 0;
				width: auto;
				flex: 0 0 auto;
				align-items: center;
				gap: 0.75rem;
				padding: 10px 12px;

				> div:last-child {
					position: relative;
					width: 16px;
					height: 16px;
					flex-shrink: 0;

					.checkmark {
						right: 0;
						left: auto;
					}
				}
			}
		  }
		}

		&.range-field {
			accent-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
		}

	}

	/* Field background color*/
	.wp-block-gutena-form-field:not(.gutena-forms-radio-field):not(.gutena-forms-checkbox-field):not(.gutena-forms-range-field):not(.gutena-forms-rating-field):not(.gutena-forms-optin-field) {
		background-color: var(--wp--gutena-forms--input-bg-color,'transparent');
	}

	/**********************************
		Placeholder styles : start
	**********************************/
	.gutena-forms-field::-webkit-input-placeholder { /* Edge */
		color: var(--wp--gutena-forms--placeholder-color);
		font-size: var(--wp--gutena-forms--placeholder-font-size);
		line-height: var(--wp--gutena-forms--placeholder-line-height);
		font-weight: var(--wp--gutena-forms--placeholder-font-weight);
	}

	.gutena-forms-field:-ms-input-placeholder { /* Internet Explorer */
		color: var(--wp--gutena-forms--placeholder-color);
		font-size: var(--wp--gutena-forms--placeholder-font-size);
		line-height: var(--wp--gutena-forms--placeholder-line-height);
		font-weight: var(--wp--gutena-forms--placeholder-font-weight);
	}

	.gutena-forms-field::placeholder, .gutena-forms-placeholder {
		color: var(--wp--gutena-forms--placeholder-color);
		font-size: var(--wp--gutena-forms--placeholder-font-size);
		line-height: var(--wp--gutena-forms--placeholder-line-height);
		font-weight: var(--wp--gutena-forms--placeholder-font-weight);
	}

	//Input Field padding
	//input placeholder font family
	&.has-placeholder-font-family {
		.wp-block-gutena-form-field .gutena-forms-field {
			font-family: var(--wp--gutena-forms--placeholder-font-family);
		}
	}

	.wp-block-gutena-form-field  {
		padding: 5px;
		.gutena-forms-field{
			font-size: var(--wp--gutena-forms--placeholder-font-size);
			line-height: var(--wp--gutena-forms--placeholder-line-height);
			font-weight: var(--wp--gutena-forms--placeholder-font-weight);
			width: 100%;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			min-height: 32px;

			&:not(.textarea-field):not(.checkbox-field) {
				//height: 50px;
			}

			&.checkbox-field, &.radio-field {
				padding-left: 0;
				padding-right: 0;
				row-gap: 0.5rem;
				column-gap: 3rem;
			}

			&.range-field {
				padding: 0;
			}

			&.optin-field {
				padding-left: 0;
				display: flex;
				align-items: center;
			}
		}

		/*Input range min max and value*/
		.gf-range-values{
			font-size: var(--wp--gutena-forms--placeholder-font-size);
			line-height: var(--wp--gutena-forms--placeholder-line-height);
			font-weight: var(--wp--gutena-forms--placeholder-font-weight);
			color: var(--wp--gutena-forms--label-color);
			display: flex;
			justify-content: space-between;
			margin: 0;
			padding: 0;
		}

		&.gutena-forms-optin-field{
			width: 1.25rem;
		}
	}

	/**********************************
		Placeholder styles : end
	**********************************/

	.wp-block-columns {
		margin-bottom: var( --wp--style--block-gap, 2em );
	}

	//Full width input field block
	.wp-block-gutena-form-field {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/**********************************
		Field block border : start
	**********************************/

	&:not(.input-box-border-bottom-only) .wp-block-gutena-form-field:not(.gutena-forms-radio-field):not(.gutena-forms-checkbox-field):not(.gutena-forms-range-field):not(.gutena-forms-rating-field):not(.gutena-forms-optin-field) {
		border-style: solid;
		border-width: var(--wp--gutena-forms--input-border-width, 1px );
		border-color: var(--wp--gutena-forms--input-border-color, #D7DBE7);
		border-radius: var(--wp--gutena-forms--input-border-radius, 0px );

		&:focus-within {
			width: 100%;
			border-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 )) ;
		}
	}

	&.input-box-border-bottom-only
	{
		.wp-block-gutena-form-field:not(.gutena-forms-radio-field):not(.gutena-forms-checkbox-field):not(.gutena-forms-range-field):not(.gutena-forms-rating-field):not(.gutena-forms-optin-field) {
			border-bottom: var(--wp--gutena-forms--input-border-width, 1px ) solid var(--wp--gutena-forms--input-border-color, #D7DBE7);

			&:focus-within {
				width: 100%;
				border-bottom: var(--wp--gutena-forms--input-border-width, 1px ) solid var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 )) ;
			}
		}

		.wp-block-gutena-form-field .gutena-forms-field {
			padding-left: 0;
			padding-right: 0;
		}

	}


	.wp-block-gutena-form-field {
		.gutena-forms-field, .gutena-forms-field:focus {
			border: 0;
			outline: 0 !important;
			box-shadow: none !important;
			margin: 0 !important;
		}

	}

	/**********************************
		Field block border : end
	**********************************/

	.gutena-forms-confirmation-columns {
		display: none;
	}

	//error messages
	.wp-block-gutena-field-group{
		margin-bottom: 1.5rem;

		.is-layout-flex {
			gap: var(--wp--style--block-gap,1.5rem);
		}

		.gutena-forms-field-error-msg {
			margin-top: 0.5rem;
			font-size: 12px;
			font-weight: 500;
			color: #8E0B21;
		}

		&:not(.display-error) {
			.gutena-forms-field-error-msg {
				display: none;
			}
		}

		&.display-error {
			.wp-block-gutena-form-field:not(.gutena-forms-radio-field):not(.gutena-forms-checkbox-field):not(.gutena-forms-range-field):not(.gutena-forms-rating-field):not(.gutena-forms-optin-field) {
				border-color: var(--wp--gutena-forms--input-focus-border-color, var(--wp--preset--color--primary, #3F6DE4 ));
			}
		}

	}

	//Progress button
	&.form-progress .wp-block-button__link {
		// box-shadow: inset 0 0 0 100px var(--wp--preset--color--primary, rgba(63, 109, 228, .8));
		opacity: 0.8;
	}

	.gutena-forms-btn-progress {
		display: inline-block;
		position: relative;
		width: 60px;
		height: 22px;
	}
	.gutena-forms-btn-progress div {
		position: absolute;
		top: 11px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #fff;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}
	.gutena-forms-btn-progress div:nth-child(1) {
		left: 5px;
		animation: submit-progress1 0.6s infinite;
	}
	.gutena-forms-btn-progress div:nth-child(2) {
		left: 5px;
		animation: submit-progress2 0.6s infinite;
	}
	.gutena-forms-btn-progress div:nth-child(3) {
		left: 25px;
		animation: submit-progress2 0.6s infinite;
	}
	.gutena-forms-btn-progress div:nth-child(4) {
		left: 45px; animation: submit-progress3 0.6s infinite;
	}
	@keyframes submit-progress1 {
		0% { transform: scale(0); }
		100% { transform: scale(1); }
	}
	@keyframes submit-progress3 {
		0% { transform: scale(1); }
		100% { transform: scale(0); }
	}
	@keyframes submit-progress2 {
		0% { transform: translate(0, 0); }
		100% { transform: translate(24px, 0); }
	}

	//Form Submit messages — target <form> only so a demoted wrapper <div>
	//(from demote_nested_form_wrapper for existing-forms) does not re-hide them.
	@at-root form#{&}:not(.display-success-message) .wp-block-gutena-form-confirm-msg:not(.block-editor-block-list__block) {
		display: none;
	}

	@at-root form#{&}:not(.display-error-message) .wp-block-gutena-form-error-msg:not(.block-editor-block-list__block) {
		display: none;
	}

	&.hide-form-now > {
		.wp-block-columns,
		.wp-block-gutena-field-group,
		.wp-block-buttons {
			visibility: hidden;
    		height: 0;
			-webkit-transition: height 2s;
			transition: height 2s;
		}
	}

}

/**
 * Fields new UI
 */

@media only screen and (max-width: 600px) {
	.wp-block-gutena-forms {
		.gutena-forms-field {
			&.checkbox-field, &.radio-field {
				&:not(.inline-options){
					grid-template-columns: repeat(1,1fr);
				}
			}
		}

	}
}