/*
|--------------------------------------------------------------------------
| Variables
|--------------------------------------------------------------------------
*/

.inext_wpc_wrapper{

	/*
	|--------------------------------------------------------------------------
	| Colors
	|--------------------------------------------------------------------------
	*/

	--inext-color-white:#fff;

	--inext-color-primary:#111111;
	--inext-color-primary-hover:#555555;

	--inext-color-text:#111827;
	--inext-color-text-light:#6b7280;
	--inext-color-placeholder:#9ca3af;

	--inext-color-border:#d1d5db;
	--inext-color-border-light:#e5e7eb;
    --inext-color-border-hover:#c7d2fe;

	--inext-color-success:#15803d;
	--inext-color-success-bg:#ecfdf3;
	--inext-color-success-border:#bbf7d0;

	--inext-color-error:#dc2626;
	--inext-color-error-bg:#fef2f2;
	--inext-color-error-border:#fecaca;


    --inext-border-width:1px;

    --inext-icon-size:18px;
    --inext-heading-icon-size:20px;

    --inext-opacity-disabled:.9;

    --inext-loader-size:16px;

    --inext-loader-border:2px;

	/*
	|--------------------------------------------------------------------------
	| Radius
	|--------------------------------------------------------------------------
	*/

	--inext-radius-sm:12px;
	--inext-radius-lg:18px;

	/*
	|--------------------------------------------------------------------------
	| Size
	|--------------------------------------------------------------------------
	*/

	--inext-width:100%;

	--inext-input-height:48px;
	--inext-button-height:48px;

    --inext-button-width:130px;

	/*
	|--------------------------------------------------------------------------
	| Spacing
	|--------------------------------------------------------------------------
	*/

	--inext-space-xs:8px;
	--inext-space-sm:10px;
	--inext-space-md:12px;
	--inext-space-lg:14px;
	--inext-space-xl:16px;
	--inext-space-2xl:18px;
	--inext-space-3xl:22px;

	/*
	|--------------------------------------------------------------------------
	| Font
	|--------------------------------------------------------------------------
	*/

	--inext-font-sm:14px;
	--inext-font-md:15px;
	--inext-font-lg:18px;
	--inext-font-xl:20px;

	/*
	|--------------------------------------------------------------------------
	| Transition
	|--------------------------------------------------------------------------
	*/

	--inext-transition-fast:.2s;
	--inext-transition:.25s;

	/*
	|--------------------------------------------------------------------------
	| Shadow
	|--------------------------------------------------------------------------
	*/

	--inext-shadow:

		0 4px 14px rgba(
			15,
			23,
			42,
			.05
		);

	--inext-shadow-hover:

		0 10px 28px rgba(
			79,
			70,
			229,
			.10
		);

	--inext-shadow-button:

		0 8px 20px rgba(
			79,
			70,
			229,
			.20
		);

	--inext-shadow-button-hover:

		0 14px 30px rgba(
			79,
			70,
			229,
			.30
		);
    
    --inext-focus-ring:

        0 0 0 4px rgba(
            79,
            70,
            229,
            .12
        );

}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.inext_wpc_card{

	width:100%;



	max-width:var(
		--inext-width
	);

    margin-top:var(
        --inext-space-2xl
    );

    margin-bottom:var(
        --inext-space-2xl
    );

	background:var(
		--inext-color-white
	);

	border:1px solid var(
		--inext-color-border-light
	);

	border-radius:var(
		--inext-radius-lg
	);

	padding:var(
		--inext-space-3xl
	);

	box-shadow:var(
		--inext-shadow
	);

	transition:var(
		--inext-transition
	);

}

.inext_wpc_card:hover{

	border-color:var(
		--inext-color-border-hover
	);

	box-shadow:var(
		--inext-shadow-hover
	);

}

.inext_wpc_card_inner{

	display:flex;

	flex-direction:column;

	gap:var(
		--inext-space-2xl
	);

}

/*
|--------------------------------------------------------------------------
| Common Flex
|--------------------------------------------------------------------------
*/

.inext_wpc_heading,
.inext_wpc_form,
.inext_wpc_button,
.inext_wpc_button .inext_wpc_button_text,
.inext_loader_wrapper{

	display:flex;

	align-items:center;

}

.inext_wpc_button,
.inext_wpc_button .inext_wpc_button_text,
.inext_loader_wrapper{

	justify-content:center;

}

/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.inext_wpc_heading{

	gap:var(
		--inext-space-sm
	);

}

.inext_wpc_heading .dashicons{

	width:var(--inext-heading-icon-size);

    height:var(--inext-heading-icon-size);

    font-size:var(--inext-heading-icon-size);

	color:var(
		--inext-color-primary
	);

}

.inext_wpc_heading .inext_wpc_title{

	margin:0;

	font-size:var(
		--inext-font-md
	);

	font-weight:600;

	color:var(
		--inext-color-text
	);

}

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
*/

.inext_wpc_form{

	gap:var(
		--inext-space-md
	);

}

/*
|--------------------------------------------------------------------------
| Input
|--------------------------------------------------------------------------
*/

.inext_wpc_input_group{

	position:relative;

	flex:1;

}

.inext_wpc_input_group .dashicons{

	position:absolute;

	left:14px;

	top:50%;

	width:var(--inext-icon-size);

	height:var(--inext-icon-size);

	font-size:var(--inext-icon-size);

	color:var(
		--inext-color-text-light
	);

	pointer-events:none;

	transform:translateY(-50%);

	transition:var(
		--inext-transition-fast
	);

}

.inext_wpc_input_group .inext_wpc_input{

	box-sizing:border-box;

	width:100%;

	height:var(
		--inext-input-height
	);

	padding:0 16px 0 44px;

	/* border:1px solid var(
		--inext-color-border
	); */

    border:1px solid;

	border-radius:var(
		--inext-radius-sm
	);

	background:var(
		--inext-color-white
	);

	color:var(
		--inext-color-text
	);

	font-size:var(
		--inext-font-sm
	);

    margin: 0;

	outline:none;

	transition:var(
		--inext-transition-fast
	);

}

.inext_wpc_input_group .inext_wpc_input::placeholder{

	color:var(
		--inext-color-placeholder
	);

}

.inext_wpc_input_group .inext_wpc_input:hover{

	/* border-color:var(
		--inext-color-placeholder
	); */

}

.inext_wpc_input_group .inext_wpc_input:focus{

	/* border-color:var(
		--inext-color-primary
	); */

	/* box-shadow:var(
        --inext-focus-ring
    ); */

}

.inext_wpc_input_group .inext_wpc_input:focus + .dashicons{

	color:var(
		--inext-color-primary
	);

}

.inext_wpc_input_group .inext_wpc_input:disabled{

	background:#f3f4f6;

	cursor:not-allowed;

}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.inext_wpc_button{

	gap:var(
		--inext-space-sm
	);

	min-width:var(
        --inext-button-width
    );

	height:var(
		--inext-button-height
	);

	padding:0 var(
		--inext-space-3xl
	) !important;

	border:none;

	border-radius:var(
		--inext-radius-sm
	) !important;

    /* background:var(
        --inext-color-primary
    ); */

	/* color:var(
		--inext-color-white
	); */

	font-size:var(
		--inext-font-sm
	);

	/* font-weight:600; */

	cursor:pointer;

	transition:
		var(--inext-transition);

	box-shadow:
		var(--inext-shadow-button);

}

.inext_wpc_button::after,
.inext_wpc_button::before{
    display:none !important;
}

.inext_wpc_button:hover{

	/* box-shadow:var(
        --inext-shadow-button-hover
    ); */

}

.inext_wpc_button:active{

	transform:translateY(0);

}

.inext_wpc_button.loading{

	cursor:wait;

	opacity:var(
        --inext-opacity-disabled
    );

}

.inext_wpc_button.disabled{

    opacity:var(
        --inext-opacity-disabled
    );

	box-shadow:none;

	cursor:not-allowed;

	pointer-events:none;

}

.inext_wpc_button .inext_wpc_button_text{

	gap:var(
		--inext-space-xs
	);

}

.inext_wpc_button .inext_loader_wrapper{

	margin-left:4px;

}

/*
|--------------------------------------------------------------------------
| Loader
|--------------------------------------------------------------------------
*/

.inext_loader_wrapper{

}

.inext_loader{

	width:var(--inext-loader-size);

	height:var(--inext-loader-size);

	border:var(--inext-loader-border) solid rgba(
		255,
		255,
		255,
		.35
	);

	border-top-color:var(
		--inext-color-white
	);

	border-radius:50%;

	animation:
		inextSpin .6s linear infinite;

}

/*
|--------------------------------------------------------------------------
| Result
|--------------------------------------------------------------------------
*/

.inext_wpc_result{

	position:relative;

	padding:
		var(--inext-space-lg)
		var(--inext-space-xl)
		var(--inext-space-lg)
		46px;

	border-radius:var(
		--inext-radius-sm
	);

	font-size:var(
		--inext-font-sm
	);

	font-weight:500;

	line-height:1.6;

	opacity:0;

	transform:translateY(8px);

	transition:
		opacity var(--inext-transition) ease,
		transform var(--inext-transition) ease;

}

.inext_wpc_result.res_success,
.inext_wpc_result.res_error{

	opacity:1;

	transform:translateY(0);

}

.inext_wpc_result.res_success{

	background:var(
		--inext-color-success-bg
	);

	border:1px solid var(
		--inext-color-success-border
	);

	color:var(
		--inext-color-success
	);

}

.inext_wpc_result.res_error{

	background:var(
		--inext-color-error-bg
	);

	border:1px solid var(
		--inext-color-error-border
	);

	color:var(
		--inext-color-error
	);

}

.inext_wpc_result::before{

	position:absolute;

	left:16px;

	top:50%;

	width:var(--inext-icon-size);

	height:var(--inext-icon-size);

	font-family:dashicons;

	font-size:var(--inext-icon-size);

	line-height:var(--inext-icon-size);

	transform:translateY(-50%);

}

.inext_wpc_result.res_success::before{

	content:"\f147";

	color:var(
        --inext-color-success
    );

}

.inext_wpc_result.res_error::before{

	content:"\f158";

	color:var(
		--inext-color-error
	);

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:640px){

	.inext_wpc_form{

		flex-direction:column;

		align-items:stretch;

	}

	.inext_wpc_button{

		width:100%;

		min-width:100%;

	}

}

/*
|--------------------------------------------------------------------------
| Appearance
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Theme (Recommended)
|--------------------------------------------------------------------------
*/

.inext_wpc_auto{

	/*
	|--------------------------------------------------------------------------
	| Typography
	|--------------------------------------------------------------------------
	*/

	--inext-font-sm:inherit;
	--inext-font-md:inherit;

	/*
	|--------------------------------------------------------------------------
	| Colors
	|--------------------------------------------------------------------------
	*/

    --inext-color-primary:inherit;
    --inext-color-primary-hover:inherit;

	--inext-color-white:inherit;

	--inext-color-text:inherit;
	--inext-color-text-light:inherit;
	--inext-color-placeholder:inherit;

	/*
	|--------------------------------------------------------------------------
	| Border
	|--------------------------------------------------------------------------
	*/

	--inext-color-border:currentColor;
	--inext-color-border-light:currentColor;
	--inext-color-border-hover:currentColor;

	/*
	|--------------------------------------------------------------------------
	| Radius
	|--------------------------------------------------------------------------
	*/

	--inext-radius-sm:inherit;
	--inext-radius-lg:inherit;

	/*
	|--------------------------------------------------------------------------
	| Shadow
	|--------------------------------------------------------------------------
	*/

	--inext-shadow:none;
	--inext-shadow-hover:none;
	--inext-shadow-button:none;
	--inext-shadow-button-hover:none;

}

/*
|--------------------------------------------------------------------------
| Modern
|--------------------------------------------------------------------------
*/

.inext_wpc_modern{

	/*

	Uses the default variables.

	No overrides required.

	*/

    .inext_wpc_button{

        background:var(
            --inext-color-primary
        );

        color:var(
            --inext-color-white
        );

    }

    .inext_wpc_button:hover{

        box-shadow:var(
            --inext-shadow-button-hover
        );

    }

}

@keyframes inextSpin{

	to{

		transform:rotate(360deg);

	}

}