/**
 * WPForms - Uncanny Automator tab
 * This file is loaded in the Uncanny Automator tab in WPForms
 */

:root {

	/* Padding of the main container */

	/* Same padding as .wpforms-builder-provider-connections-default */
	--uap-wpf-integration-container-padding: 30px 50px 50px 50px;

	/* Separation between sections */
	--uap-wpf-integration-separation-between-sections: 20px;

	/* WPForms border radius */
	--uap-wpf-integration-border-radius: 4px;

	/* WPForms color */
	--uap-wpf-integration-main-color: #e27730;

	/**
	 * Icon
	 */

	/* Dimensions of the icon. Ratio 1:1 */
	--uap-wpf-integration-icon-width: 140px;

	/**
	 * Steps
	 */

	/* Width */
	--uap-wpf-integration-step-width: 420px;

	/* Background color */
	--uap-wpf-integration-steps-bg-color: #fff;

	/* Border color */
	--uap-wpf-integration-steps-border-color: #ccc;

	/* Circle dimensions. 1:1 */
	--uap-wpf-integration-steps-circle-diameter: 30px;

	/* Circle border color */
	--uap-wpf-integration-steps-circle-border-color: #ccc;

	/* Circle font color */
	--uap-wpf-integration-steps-circle-font-color: #999;
}

.uap-wpf-integration {
	padding: var(--uap-wpf-integration-container-padding);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

img.uap-wpf-integration__logo {

	/**
		 * Similar style as .wpforms-builder-provider-connections-default img
		 * but without border
		 */
	width: var(--uap-wpf-integration-icon-width);
	height: var(--uap-wpf-integration-icon-width);

	margin-bottom: 30px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

h2.uap-wpf-integration__title {
	margin-top: 0;
	font-weight: 600;
}

p.uap-wpf-integration__description {
	font-size: 16px;
	line-height: 24px;
	max-width: 615px;
	margin: 0 auto 20px;
}

.uap-wpf-integration-steps {
	background: var(--uap-wpf-integration-steps-bg-color);

	text-align: left;
}

.uap-wpf-integration-flow-step {
	max-width: var(--uap-wpf-integration-step-width);

	position: relative;
	width: 100%;

	display: flex;
}

.uap-wpf-integration-flow-step__left {
	width: var(--uap-wpf-integration-steps-circle-diameter);

	position: relative;
}

.uap-wpf-integration-flow-step:not(:last-child) .uap-wpf-integration-flow-step__left::before {
	background: var(--uap-wpf-integration-steps-circle-border-color);
	color: var(--uap-wpf-integration-steps-circle-font-color);

	content: "";

	width: 1px;
	height: 100%;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);

	z-index: 1;
}

.uap-wpf-integration-flow-step__number {
	width: var(--uap-wpf-integration-steps-circle-diameter);
	height: var(--uap-wpf-integration-steps-circle-diameter);
	border: 1px solid var(--uap-wpf-integration-steps-circle-border-color);
	background: var(--uap-wpf-integration-steps-bg-color);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	border-radius: 50%;

	z-index: 2;

	font-weight: 600;
	font-size: 16px;
}

.uap-wpf-integration-flow-step__content {
	padding-left: var(--uap-wpf-integration-separation-between-sections);
}

.uap-wpf-integration-flow-step:not(:last-child) .uap-wpf-integration-flow-step__content {
	padding-bottom: var(--uap-wpf-integration-separation-between-sections);
}

.uap-wpf-integration-flow-step__title {
	font-size: 15px;
	font-weight: 600;
}

.uap-wpf-integration-triggers {
	border: 1px solid var(--uap-wpf-integration-steps-border-color);
	border-radius: var(--uap-wpf-integration-border-radius);
	margin-top: calc(var(--uap-wpf-integration-separation-between-sections) / 2);

	background: #fff;
}

.uap-wpf-integration-recipe-trigger {
	display: block;
	position: relative;
	padding: 10px;

	cursor: pointer;

	font-size: 15px;
	line-height: 22px;

	padding-left: 35px;
}

.uap-wpf-integration-recipe-trigger:first-child {
	border-top-left-radius: var(--uap-wpf-integration-border-radius);
	border-top-right-radius: var(--uap-wpf-integration-border-radius);
}

.uap-wpf-integration-recipe-trigger:last-child {
	border-bottom-left-radius: var(--uap-wpf-integration-border-radius);
	border-bottom-right-radius: var(--uap-wpf-integration-border-radius);
}

.uap-wpf-integration-recipe-trigger:not(:last-child) {
	border-bottom: 1px solid var(--uap-wpf-integration-steps-border-color);
}

.uap-wpf-integration-recipe-trigger > input {
	margin-bottom: 0;

	position: absolute;
	top: 14px;
	left: 10px;

	margin-top: 0 !important;
	margin-left: 0 !important;
	line-height: 1 !important;
}

.uap-wpf-integration-trigger__field {
	color: var(--uap-wpf-integration-main-color);

	font-weight: 500;
}

.uap-wpf-integration-recipe-trigger.uap-wpf-automator-pro-not-active {
	background: #f8f8f8;
	color: #777;
	cursor: default;
}

.uap-wpf-integration-recipe-trigger-pro {
	display: block;
	font-size: 14px;
	color: #444;

	padding: 10px 15px;

	background: #fcf9e8;
	margin-left: -35px;
	margin-right: -10px;
	margin-bottom: -10px;
	margin-top: 8px;

	border-bottom-left-radius: var(--uap-wpf-integration-border-radius);
	border-bottom-right-radius: var(--uap-wpf-integration-border-radius);
}

.uap-wpf-integration-recipe-trigger-pro strong {
	font-weight: 500;
}

.uap-wpf-integration-recipe-trigger.uap-wpf-automator-pro-not-active input {
	pointer-events: none;
	opacity: 0.6;
}

.uap-wpf-integration-recipe-trigger.uap-wpf-automator-pro-not-active .uap-wpf-integration-trigger__field {
	color: inherit;
}

.uap-wpf-integration-trigger__pro-badge {
	background: #6bc45a;
	border-radius: 150px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 1px 6px;
	margin-left: 2px;
}

a.uap-wpf-integration-create-recipe-btn.wpforms-btn.wpforms-btn-md.wpforms-btn-orange {
	display: none;
}