/*LP Lead Inline Block Style*/
/*Inline Submit Container*/

@keyframes fade_in {
	0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade_in_show {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lp-lead-inline-inner-container {
	position: relative;
	height: 410px;
	width: 444px;
	animation: fade_in_show 0.5s;
}

.lp-lead-inline-submit-container,
.lp-lead-inline-sending-container,
.submit-spinner,
.lp-lead-inline-response-container,
.lp-lead-inline-submit-success,
.lp-lead-inline-submit-error {
	display: none;
	height: 0;
	opacity: 0;
}

/*when form in column*/
.wp-block-columns.lp-split-intro .wp-clock-column.is-vertically-aligned-center {
    display: flex;
    align-items: center;
}

.mps-lp-lead-inline {
	display: block;
}

/*Inline Form*/
.lp-lead-inline-form-container {
	margin-top: 0;
	box-sizing: border-box;
}

.mps-lp-lead-inline form {
    display: grid;
    row-gap: 5px;
    column-gap: 10px;
    grid-template-columns: [col] 1fr [col] 1fr;
	grid-template-rows: auto;	
}

.lp-lead-inline-form-container h2.wp-block-heading {
	margin-top: 20px;
	margin-bottom: 10px;
}

h2.is-hidden,
.mps-lp-lead-inline form.is-hidden {
	display: none;
}

.mps-lp-lead-inline form .mps-form-group.grid-span-2 {
	grid-column: col / span 2;
}

.mps-lp-lead-inline form div.error-text {
	display: none;
}

.mps-lp-lead-inline form div.error-text.is-displayed {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--medium-orange);
	margin-top: 0;
	margin-bottom:0;
}

.mps-lp-lead-inline form .mps-form-group input, .mps-lp-lead-inline form .mps-form-group textarea, .mps-lp-lead-inline form .mps-form-group select {
	border-radius: 2px;
	display: block;
	width: 95%;
	margin-top: .25rem;
	padding: .3em .5em .3em .2em;
	font-size: 1rem;/*16px - make 18px like short form??*/
	line-height: 1.4em;
	color: var(--wp--preset--color--dark-grey);
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: none;
	z-index: 2;
}
	
/*padding has to be slightly larger top & bottom*/
.mps-lp-lead-inline form .mps-form-group select {
	padding: .4em .5em .4em .2em;
	width: 99%;
}

.mps-lp-lead-inline form .mps-form-group input[type="submit"] {	
    padding: 0.667em 1.333em;
    background-color: transparent;
    border-radius: 0px;
    border: 1px solid var(--wp--preset--color--dark-grey);
    color: var(--wp--preset--color--dark-grey);
    width: auto !important;
    margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 400;
	text-transform: uppercase;	
}

.mps-lp-lead-inline form .mps-form-group input[type="submit"]:hover {
    border: 1px solid var(--wp--preset--color--medium-orange);
    color: var(--wp--preset--color--medium-orange);
}

/* in mps-forms-style? */
/* .mps-lp-lead-inline form .mps-form-group input:focus {
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
} */

.mps-lp-lead-inline form .mps-form-group input.margin-top-zero {
	margin-top: 0px;
}

/*Inline Submit Container*/
/* See display: none at top */
.lp-lead-inline-submit-container.is-displayed {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0px;
	height: 410px;
	width: 444px;
	box-sizing: border-box;
	background-color: transparent;
	opacity: 1;
}

.lp-lead-inline-sending-container.is-displayed,
.lp-lead-inline-response-container.is-displayed {
	display:flex;
	justify-content: center;
	align-items: center;
	background-color: var(--wp--preset--color--light-grey);
	height: 410px;
	width: 444px;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	opacity: 1;	
	animation: fade_in_show 0.5s;
}

/* animated submit spinner*/
.submit-spinner.is-displayed {
	display: flex;
	width: 80px;
	height: 80px;
	border: 6px solid #f8f8f8;
	border-top: 6px solid var(--wp--preset--color--medium-green);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	opacity: 1;
}
  
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.lp-lead-inline-submit-success.is-displayed,
.lp-lead-inline-submit-error.is-displayed {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 410px;
	width: 444px;
	opacity: 1;
}

.lp-lead-inline-submit-success h2,
.lp-lead-inline-submit-error h2 {
	display: none;
}

.lp-lead-inline-submit-success.is-displayed h2.is-displayed,
.lp-lead-inline-submit-error.is-displayed h2.is-displayed {
	display: block;
	font-size: 28px;
}

.lp-lead-inline-submit-success .close-submit-container,
.lp-lead-inline-submit-error .close-submit-container {
	display: none;
	opacity: 0;
}

.lp-lead-inline-submit-success.is-displayed .close-submit-container.is-displayed,
.lp-lead-inline-submit-error.is-displayed .close-submit-container.is-displayed {
	display: block;
    margin-top: 24px;
    background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	border: 0px;
	border-radius: 0px;
	font-family: var(--wp--preset--font-family--oswald);
    font-size: var(--wp--preset--font-size--small);
    padding: calc(0.667em + 2px) calc(0.667em + 2px) !important;
	text-transform: uppercase;	
	transition: width .3s ease-out;
	opacity: 1;
}

.lp-lead-inline-submit-success .close-submit-container:hover,
.lp-lead-inline-submit-error .close-submit-container:hover {
    background-color: var(--wp--preset--color--medium-green-alpha-6);
}

@media (min-width:800px) and (max-width:959px) {
	.lp-lead-inline-inner-container {
		background-color: transparent;
		width: 360px;
	}

	.lp-lead-inline-submit-container.is-displayed,
	.lp-lead-inline-sending-container.is-displayed,
	.lp-lead-inline-response-container.is-displayed, 
	.lp-lead-inline-submit-success.is-displayed,
	.lp-lead-inline-submit-error.is-displayed {
		width: 360px;
	}

	.mps-lp-lead-inline form .mps-form-group input,
	.mps-lp-lead-inline form .mps-form-group textarea,
	.mps-lp-lead-inline form .mps-form-group select {
		font-size: .9rem;/*1rem 16px */
	}
}

@media (max-width:799px) {
	.wp-block-columns.lp-split-intro {
		row-gap: 0px;
	}

	.wp-block-columns.lp-split-intro .wp-clock-column.is-vertically-aligned-center {
		display: flex;
		align-items: flex-start;		
		min-height: 700px;
	}

	.lp-lead-inline-inner-container {
		background-color: transparent;
		width: 360px;
		height: auto;
	}

	.lp-lead-inline-submit-container.is-displayed,
	.lp-lead-inline-sending-container.is-displayed,
	.lp-lead-inline-response-container.is-displayed, 
	.lp-lead-inline-submit-success.is-displayed,
	.lp-lead-inline-submit-error.is-displayed {
		width: 360px;
	}
	
	.lp-lead-inline-form-container {
		max-width: 98%;
	}

    .mps-lp-lead-inline form {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 10px;
    }
	
    .mps-lp-lead-inline form .mps-form-group {        
        flex: 1 1 98%;
		margin-top: 0;
		margin-bottom: 0;
    }

	.mps-lp-lead-inline form .mps-form-group label {        
        font-size: var(--wp--preset--font-size--x-small);
    }

	.mps-lp-lead-inline form .mps-form-group input,
	.mps-lp-lead-inline form .mps-form-group textarea,
	.mps-lp-lead-inline form .mps-form-group select {
		width: 95%;
		margin-top: .25rem;
		padding: .3em .5em .3em .2em;
		font-size: .9rem;/*1rem*/
		line-height: 1.4em;
	}
}

@media (max-width: 799px) and (orientation: landscape) {
	.mps-lp-lead-inline form {
		display: grid;
		row-gap: 5px;
		column-gap: 10px;
		grid-template-columns: [col] 1fr [col] 1fr;
		grid-template-rows: auto;	
	}
	
	.lp-lead-inline-inner-container,
	.lp-lead-inline-submit-container.is-displayed,
	.lp-lead-inline-sending-container.is-displayed,
	.lp-lead-inline-response-container.is-displayed, 
	.lp-lead-inline-submit-success.is-displayed,
	.lp-lead-inline-submit-error.is-displayed {
		min-width: 600px !important;
	}
	

}

@media (max-width:480px) {

	.lp-inline-lead-parent-group {
		max-width: 360px;
	}

	.lp-lead-inline-inner-container {
		background-color: transparent;
		width: 320px;
		height: auto;
	}

	.lp-lead-inline-submit-container.is-displayed,
	.lp-lead-inline-sending-container.is-displayed,
	.lp-lead-inline-response-container.is-displayed, 
	.lp-lead-inline-submit-success.is-displayed,
	.lp-lead-inline-submit-error.is-displayed {
		width: 320px;
	}

}