:root {
	/* === COLORS === */
	--fwk-form--color--form-background: var(--wp--preset--color--custom-form-background);
	--fwk-form--color--input-background: var(--wp--preset--color--custom-page-background);
	--fwk-form--color--input-border: rgba(0, 0, 0, 0.2);
	--fwk-form--color--input-focus: var(--wp--preset--color--raft-accent-secondary);
	--fwk-form--color--input-checked: var(--wp--preset--color--raft-accent);
	--fwk-form--color--button: var(--wp--preset--color--raft-fg-alt);
	--fwk-form--color--button-background: var(--wp--preset--color--raft-accent);
	--fwk-form--color--button-secondary: var(--wp--preset--color--raft-accent-secondary);
	/* === INPUTS === */
	--fwk-form--input--border: 1px solid var(--fwk-form--color--input-border);
	--fwk-form--input--border-radius: 10px;
	--fwk-form--input--border-focus: 2px solid var(--fwk-form--color--input-focus);
	--fwk-form--input--border-checked: 2px solid var(--fwk-form--color--input-checked);
	--fwk-form--input--outline: 2px solid var(--fwk-form--color--input-focus);
}

/*=================================================================================
 * JetFormBuilder global
 */
.fwk-form {
	background-color: var(--fwk-form--color--form-background);
	padding: 10px 20px 10px 20px;
	border-radius: 5px;

	input:not([type=submit]),
	textarea,
	select {
		background-color: var(--fwk-form--color--input-background);
		border: var(--fwk-form--input--border);
		border-radius: var(--fwk-form--input--border-radius);
		font-size: var(--wp--preset--font-size--normal);
		line-height: normal;
		min-height: 1em;
	}

	input:read-write[type=date] {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	input:not([type=submit]):focus,
	textarea:focus,
	:focus {
		outline: var(--fwk-form--input--outline);
	}

	/*=================================================================================
	* JetFormBuilder Title, Label, Description
	*/
	h3,
	h4 {
		margin-top: 20px;
		margin-bottom: 5px;
	}

	.jet-form-builder__label {
		font-weight: 600;
	}

	.jet-form-builder__desc {
		margin-top: 3px;
		line-height: 1.15em;
	}

	/*=================================================================================
	* JetFormBuilder Row
	*/
	.jet-form-builder-row {
		padding: 8px 0px;
	}

	/* --- horizontal layout --- */
	.wp-block-group.fwk-horiz-row .jet-form-builder-row {
		flex-direction: row;
		column-gap: 10px;
		justify-content: flex-start;
		align-items: baseline;
	}

	.wp-block-group.fwk-horiz-row .jet-form-builder-row>* {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: auto;
		width: auto;
	}

	/*=================================================================================
	* JetFormBuilder Group (.fwk-form-group)
	*/
	.fwk-form-group>* {
		margin-top: 5px;
	}

	.fwk-form-group>.jet-form-builder-row:not(:first-child) {
		padding-top: 0px;
	}

	.fwk-form-group>.jet-form-builder-row:not(:last-child) {
		padding-bottom: 0px;
	}

	/*=================================================================================
	* WP Block Columns in JetFormBuilder forms
	*/
	.wp-block-columns.is-layout-flex {
		margin-bottom: 0px;
		row-gap: 0px;
	}

	/*=================================================================================
	* JetFormBuilder Button
	*/
	button.jet-form-builder__action-button[type=submit] {
		background-color: var(--fwk-form--color--button-background);
		padding-top: 14px;
		padding-bottom: 12px;
		border: 2px solid var(--fwk-form--color--button-background);
		border-radius: 5px;
	}

	button.jet-form-builder__action-button[type=submit]:hover {
		background-color: transparent;
		color: var(--fwk-form--color--button-background);
	}

	button.jet-form-builder__action-button[type=submit]:focus {
		outline: none;
	}

	/*=================================================================================
	* JetFormBuilder Checkbox + Radio Fields
	*/
	.field-type-checkbox-field .jet-form-builder__fields-group,
	.field-type-radio-field .jet-form-builder__fields-group {
		padding-top: 0px;
		row-gap: 5px;
		column-gap: 30px;
		min-height: 45px;
	}

	.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox>span,
	.field-type-radio-field .jet-form-builder__field-label.for-radio>span {
		line-height: 1.4em;
		align-items: flex-start;
	}

	.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox>span::before {
		width: 18px;
		height: 18px;
		background-size: 12px 12px;
		background-color: var(--fwk-form--color--input-background);
		border: var(--fwk-form--input--border);
		border-radius: 6px;
	}

	.field-type-radio-field .jet-form-builder__field-label.for-radio>span::before {
		width: 18px;
		height: 18px;
		background-size: 10px 10px;
		background-color: var(--fwk-form--color--input-background);
		border: var(--fwk-form--input--border);
		border-radius: 50%;
	}

	.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox,
	.field-type-radio-field .jet-form-builder__field-label.for-radio {

		:checked+span::before {
			border: var(--fwk-form--input--border);
			background-color: var(--fwk-form--color--input-checked);
		}

		:focus:not(:checked)+span::before {
			border: var(--fwk-form--input--border);
		}

		:not(:disabled):not(:checked):hover+span::before,
		:not(:disabled):hover+span::before,
		:not(:disabled):active+span::before {
			border: var(--fwk-form--input--border) !important;
			transition: box-shadow .25s ease;
			box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.25);
		}

		:not(:disabled):active:not(:checked)+span::before {
			background-color: var(--fwk-form--color--input-background);
		}

		:not(:disabled):active:checked+span::before {
			background-color: var(--fwk-form--color--input-checked);
		}
	}

	/* --- horizontal layout --- */
	.wp-block-group.fwk-horiz-fields-group .jet-form-builder__fields-group {
		flex-direction: row;
		column-gap: 20px;
		justify-content: flex-start;
		align-items: baseline;
		padding-top: 10px;
	}

	.wp-block-group.fwk-horiz-fields-group .jet-form-builder__fields-group>* {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: auto;
		width: auto;
	}

	/*=================================================================================
	* JetFormBuilder Switcher
	*/
	.field-type-switcher {
		--thumb-size: 16px;
		--track-size: 36px;
		--track-padding: 3px;
		--checked-thumb-position: calc(var(--track-size) - var(--thumb-size) - 2px);
		--track-bg-color: var(--fwk-form--color--input-background);
		--thumb-bg-color: var(--fwk-form--color--form-background);
		--checked-track-bg-color: var(--fwk-form--color--input-checked);
		flex-direction: row;
		flex-wrap: nowrap;
		padding-top: 15px;
		padding-bottom: 10px;
		column-gap: 10px;
	}

	.field-type-switcher input.jet-form-builder__field {
		order: -1;
		outline: none;
		width: var(--track-size);
		flex-shrink: 0;
	}

	.field-type-switcher input.jet-form-builder__field,
	.field-type-switcher input.jet-form-builder__field::before {
		border: 1px solid rgba(0, 0, 0, 0.2);
	}

	.field-type-switcher input.jet-form-builder__field:checked {
		--thumb-position: var(--checked-thumb-position);
	}

	/*=================================================================================
	* JetFormBuilder Media
	*/
	.jet-form-builder-file-upload__fields input[type=file] {
		background-color: transparent;
	}

	/*=================================================================================
	* JetFormBuilder Repeater
	*/
	.field-type-repeater-field .jet-form-builder-repeater {

		.jet-form-builder-repeater__items {
			display: flex;
			flex-direction: column;
			row-gap: 10px;
		}

		.jet-form-builder-repeater__row {
			flex-direction: row;
			column-gap: 10px;
			align-items: flex-start;
			padding: 10px;
			border: 1px solid var(--fwk-form--color--button-background);
			border-radius: 5px;
		}

		/* new button */
		button.jet-form-builder-repeater__new {
			font-family: var(--wp--preset--font-family--figtree);
			font-weight: 500;
			color: var(--fwk-form--color--button);
			background-color: var(--fwk-form--color--button-background);
			padding-top: 5px;
			padding-bottom: 4px;
			border: 2px solid var(--fwk-form--color--button-background);
			border-radius: 5px;
		}

		button.jet-form-builder-repeater__new:hover {
			background-color: transparent;
			color: var(--fwk-form--color--button-background);
		}

		button.jet-form-builder-repeater__new:focus {
			outline: none;
		}

		/* remove button */
		button.jet-form-builder-repeater__remove {
			font-family: var(--wp--preset--font-family--figtree);
			font-weight: 600;
			font-size: 18px;
			line-height: 18px;
			width: 22px;
			height: 22px;
			color: var(--fwk-form--color--button);
			background-color: var(--fwk-form--color--button-secondary);
			border: 2px solid var(--fwk-form--color--button-secondary);
			border-radius: 5px;
			margin: 0px;
			padding: 0px;
			padding-left: 1px;
			content: "XX";
		}

		button.jet-form-builder-repeater__remove:hover {
			background-color: transparent;
			color: var(--fwk-form--color--button-secondary);
		}

		button.jet-form-builder-repeater__remove:focus {
			outline: none;
		}
	}

	.field-type-repeater-field .jet-form-builder-repeater.fwk-repeater-small {

		input:read-write:not([type=search]),
		select,
		textarea {
			padding-top: 6px;
			padding-bottom: 6px;
			font-size: 0.9em;
			line-height: 0.9em;
		}

		.jet-form-builder-repeater__items {
			row-gap: 5px;
		}

		.jet-form-builder-repeater__row {
			align-items: center;
			padding: 0px;
			border: none;
		}

		.jet-form-builder-row {
			padding: 0px;
		}
	}

	/*=================================================================================
	* JetFormBuilder - Media
	*/
	input.jet-form-builder-file-upload__input {
		/* width: calc(100vw - 88px) !important; */
		max-width: calc(100vw - 88px) !important;
	}

	/*=================================================================================
	* JetFormBuilder - TinyMCE
	*/
	/* editor format */
	.wp-editor-container {
		border: var(--fwk-form--input--border);
		border-radius: var(--fwk-form--input--border-radius);
	}

	.mce-edit-area iframe {
		border-radius: var(--fwk-form--input--border-radius);
		/*	min-height: 180px;*/
	}

	.mce-panel {
		border-radius: var(--fwk-form--input--border-radius);
	}

	.mce-top-part::before {
		box-shadow: none;
	}

	.mce-toolbar-grp {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-color: transparent;
	}

	.mce-statusbar {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-top-color: transparent;
	}

	.fwk-has-focus {
		outline: var(--fwk-form--input--outline);
	}

	/* toolbar buttons */
	.mce-toolbar .mce-btn-group {
		padding-left: 2px;
		padding-right: 2px;
	}

	.mce-top-part .mce-toolbar-grp>.mce-container-body {
		padding: 0px 3px;
	}

	.mce-btn-group:not(:first-child) {
		margin-left: 2px;
		padding-left: 3px;
	}


	.mce-btn i,
	.jet-form-builder-form .mce-btn i:hover {
		color: inherit;
		background-color: transparent;
	}

	.mce-toolbar .mce-btn-group .mce-btn:hover,
	.mce-toolbar .mce-btn-group .mce-btn.mce-active,
	.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover {
		border-color: transparent;
		background: transparent;
	}

	/*=================================================================================
	* JetFormBuilder Messages
	*/
	.jet-form-builder-message {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

/*=================================================================================
 * Google reCAPTCHA v3
 */
.grecaptcha-badge {
	visibility: hidden;
}