/** Compatibility with WPForms Lite **/

@import "../../../assets/sass/config";
@import "../../../assets/sass/mixins";
@import "../../../assets/sass/direction";

// Checkbox, Radiobox
.wpforms-field-checkbox,
.wpforms-field-radio {
	.wpforms-field-label-inline {
		cursor: pointer;
	}

	input[type="radio"]:checked {
		background-color: var(--alpus-change-color-light-1);
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2333'/%3e%3c/svg%3e");
	}
}

.wpforms-container
	.wpforms-field.wpforms-field-checkbox
	input[type="checkbox"]:checked {
	background-color: var(--alpus-change-color-dark-1);
	border-color: var(--alpus-change-color-dark-1);
	color: var(--alpus-change-color-light-1);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* WPForms */
div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input,
div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	select {
	height: auto;
}

div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input,
div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	select,
div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	textarea {
	color: inherit;
	font-size: inherit;
	line-height: 1.6;
	padding: 1.5rem 2.4rem;
	border-color: var(--alpus-change-light-border-color);
	border-radius: 0;
}

div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	select {
	background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-position: right 0.65em top 50%;
	background-repeat: no-repeat;
	background-size: auto 16px;
}

.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input[type="radio"],
.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input[type="checkbox"] {
	padding: 0;
	height: 14px;
	border-color: var(--alpus-change-color-light-2);
}

.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input[type="radio"] {
	border-radius: 50%;
}

div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	input::placeholder,
div.wpforms-container
	.wpforms-form
	.wpforms-field-container
	.wpforms-field
	textarea::placeholder {
	color: inherit;
}

div.wpforms-container
	.wpforms-form
	.wpforms-submit-container
	button.wpforms-submit {
	background-color: var(--alpus-primary-color);
	border-color: var(--alpus-primary-color);
	padding: 1.6rem 4rem;
	border-radius: $corner-sm;
	color: var(--alpus-change-color-light-1);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.6;

	&:hover,
	&:focus,
	&:active {
		border-color: var(--alpus-primary-color-hover);
		color: var(--alpus-change-color-light-1);
		background: var(--alpus-primary-color-hover);
	}
}

.elementor-element div.wpforms-container {
  margin-top: 0;
  margin-bottom: 0;
}

div.wpforms-container .wpforms-form .wpforms-field-label {
	font-size: inherit;
	font-weight: 600;
	color: var(--alpus-change-color-dark-1);
	margin: 0.4rem 0 1.1rem;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
	font-size: inherit;
}

div.elementor-widget-container
	.wpforms-container
	.wpforms-form
	.wpforms-submit-container {
	padding-top: 2rem;
}

div.wpforms-container .wpforms-form .wpforms-required-label {
	color: inherit;
}

div.wpforms-container-full.wpforms-container
	.wpforms-form
	textarea.wpforms-field-medium {
	height: 150px;
}

div.wpforms-container-full.wpforms-container
	.wpforms-form
	textarea.wpforms-field-large {
	height: 202px;
}

/* Size Style */
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field textarea {
	padding: 0.8rem 2.4rem;
}

div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field textarea {
	padding: 1.05rem 2.4rem;
}

div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field textarea {
	padding: 1.8rem 2.4rem;
}

/* Label Floating Style */
div.label-floating {
	.wpforms-form .wpforms-field-label {
		margin: 0 0 -2rem;
		position: relative;
		top: 1.5rem;
		color: inherit;
		font-weight: 400;
		line-height: 2rem;
		transition: color 0.3s, font-size 0.3s, transform 0.3s;
		pointer-events: none;
	}

	&.controls-xs .wpforms-field-label {
		top: 0.8rem;
	}

	&.controls-sm .wpforms-field-label {
		top: 1.05rem;
	}

	&.controls-lg .wpforms-field-label {
		top: 1.8rem;
	}

	.wpforms-container .wpforms-form .wpforms-field input,
	.wpforms-container .wpforms-form .wpforms-field textarea {
		border-width: 0 0 1px;
		padding-left: 0;
		padding-right: 0;
		transition: border-bottom-color 0.3s, box-shadow 0.3s;
		box-shadow: 0 0 var(--alpus-primary-color);
		min-height: auto;
	}

	// focused field
	.wpforms-field.field-float .wpforms-field-label {
		color: var(--alpus-primary-color);
		font-size: 1.2rem;
		transform: translateY(-2rem);
		pointer-events: auto;
	}

	.wpforms-form .wpforms-field.field-float input,
	.wpforms-form .wpforms-field.field-float textarea {
		border-bottom-color: var(--alpus-primary-color);
		box-shadow: 0 1px var(--alpus-primary-color);
	}

	.wpforms-container .wpforms-form .wpforms-submit-container {
		padding-top: 2.5rem;
	}
}

div.wpforms-container-full
	.wpforms-form
	.wpforms-field-container
	.wpforms-field {
	input.wpforms-error,
	input.user-invalid,
	textarea.wpforms-error,
	textarea.user-invalid,
	select.wpforms-error,
	select.user-invalid,
	.wpforms-has-error .choices__inner {
		border: 1px solid #cc0000;
	}
}

div.wpforms-container-full
	.wpforms-form
	.wpforms-field-container
	label.wpforms-error {
	color: var(--alpus-danger-color);
}

div.wpforms-row.wpforms-container {
	form {
		display: flex;
		flex-wrap: wrap;
	}

	.wpforms-field-container {
		display: flex;
		flex: 1;

		.wpforms-field input {
			height: 100%;
		}
	}

	.wpforms-field {
		flex: 0 0 100%;
	}

	& form.wpforms-form .wpforms-submit-container {
		padding: 10px 0;
	}

	.wpforms-error-container {
		flex: 0 0 100%;
	}

	button {
		height: 100%;
	}

	label.wpforms-error {
		position: absolute;
	}
}

.wpforms-error-fixed {
	.wpforms-form label.wpforms-error {
		position: absolute;
	}
}

.wpforms-submit-icon:after {
	font-family: $theme-font;
	content: if-ltr("\e92c", "\e92b");
	font-size: 1.07em;
	font-weight: 400;
	margin-#{$left}: 1rem;
	vertical-align: middle;
}

.wpforms-submit {
	transition: color 0.3s, border-color 0.3s, background-color 0.3s,
		box-shadow 0.3s;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
	transition: opacity 0.3s;
}

.wpforms-field input:focus::placeholder,
.wpforms-field textarea:focus::placeholder {
	opacity: 0;
}

div.wpforms-container-full
	.wpforms-form
	.wpforms-submit-container
	input[type="submit"]:disabled,
div.wpforms-container-full
	.wpforms-form
	.wpforms-submit-container
	button[type="submit"]:disabled,
div.wpforms-container-full
	.wpforms-form
	.wpforms-submit-container
	.wpforms-page-button:disabled {
	background-color: var(--alpus-change-light-border-color);
	color: var(--alpus-body-color);
	opacity: 1;
}

div.wpforms-container
	.wpforms-form
	.wpforms-submit-container
	button.wpforms-submit {
	font-weight: 600;
}