// ------------------------------------
// CHECKOUT STEPS
// ------------------------------------
.fc-wrapper .fc-checkout-steps {
	margin: $checkout-steps-container-margin;
	@media (#{$bp-larger-than-tablet}) { margin: $checkout-steps-container-margin--large-screen; }
}



.fc-wrapper .fc-checkout-step {
	margin: remsize( -.1rem ) 0 0; // Prevent double borders
	padding: $checkout-step-padding;
	border: $checkout-step-border;
	border-radius: 0;
	background-color: $checkout-step-background-color;

	@media (#{$bp-larger-than-tablet}) { padding: $checkout-step-padding--large-screen; }
}
.fc-wrapper .fc-checkout-step:first-child,
.fc-wrapper .fc-checkout-step:first-child > div:first-of-type {
	@media (#{$bp-larger-than-tablet}) {
		border-top-#{ $alignment-left }-radius: $checkout-substep-border-radius;
		border-top-#{ $alignment-right }-radius: $checkout-substep-border-radius;
	}
}
.fc-wrapper .fc-checkout-step:last-child,
.fc-wrapper .fc-checkout-step:last-child > div:last-of-type {
	@media (#{$bp-larger-than-tablet}) {
		border-bottom-#{ $alignment-left }-radius: $checkout-substep-border-radius;
		border-bottom-#{ $alignment-right }-radius: $checkout-substep-border-radius;
	}
}



.fc-wrapper .fc-step__substep {
	@include clearfix();

	position: relative;
	padding: $checkout-substep-padding;
	margin: remsize( -.1rem ) 0 0; // Prevent double borders
	border-top: $checkout-step-border;

	@media (#{$bp-larger-than-tablet}) { padding: $checkout-substep-padding--large-screen; }
}
.fc-wrapper .fc-step__substep:first-of-type {
	@media (#{$bp-larger-than-tablet}) {
		border-top-#{ $alignment-left }-radius: $checkout-substep-border-radius;
		border-top-#{ $alignment-right }-radius: $checkout-substep-border-radius;
	}
}
.fc-wrapper .fc-step__substep:last-of-type {
	@media (#{$bp-larger-than-tablet}) {
		border-bottom-#{ $alignment-left }-radius: $checkout-substep-border-radius;
		border-bottom-#{ $alignment-right }-radius: $checkout-substep-border-radius;
	}
}
.fc-wrapper .fc-step__substep[data-substep-id="payment"] + .fc-step__substep {
	border-bottom: $checkout-step-border;
}

.fc-wrapper .fc-step__substep[data-substep-visible="no"] {
	display: none !important; // Needed to override theme styles set with `!important`
}

.fc-wrapper [data-step-complete] .fc-step__substep[data-substep-editable="no"] .fc-step__substep-edit,
.fc-wrapper [data-step-complete] .fc-step__substep[data-substep-editable="no"] .fc-step__substep-save {
	display: none !important; // Needed to override theme styles set with `!important`
}



body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-step__substep .fc-step__substep-title {
	margin: $checkout-substep-title-margin;
	padding: $checkout-substep-title-padding;
	color: $checkout-substep-title-color;
	font-weight: $checkout-substep-title-font-weight;
	font-size: $checkout-substep-title-font-size;
	text-transform: $checkout-substep-title-text-transform;
	text-align: $checkout-substep-title-text-align;
	line-height: 1.2;
	overflow: unset;

	@media (#{$bp-larger-than-desktop}) {
		margin: $checkout-substep-title-margin--large-screen;
		padding: $checkout-substep-title-padding--large-screen;
		font-size: $checkout-substep-title-font-size--large-screen;
	}
}



body#{ $_body-page-selector } form.woocommerce-checkout {
	float: none;
}



body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep:before,
body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep:after,
body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep .fc-step__substep-title:before,
body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep .fc-step__substep-title:after,
body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep-fields:before,
body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep-fields:after {
	@include clearfix();
}



body#{ $_body-page-selector } form.woocommerce-checkout .fc-wrapper .fc-step__substep-fields {
	float: none;
	width: 100%;
	text-align: $alignment-left;
}





// ------------------------------------
// CHECKOUT LAYOUT MULTI-STEP
// ------------------------------------
.has-checkout-layout--multi-step .fc-checkout-step[data-step-complete] {
	margin: 0 0 remsize( -.1rem ); // Prevent double borders
}
.has-checkout-layout--multi-step .fc-checkout-step .fc-step__substep:first-of-type {
	margin-top: 0;
	border-top: 0;
}
// PREV Complete
.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--prev-step-complete {
	@media (#{$bp-larger-than-tablet}) {
		border-top-right-radius: 0;
		border-top-left-radius: 0;
	}
}
// NEXT Complete
.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--next-step-complete {
	@media (#{$bp-larger-than-tablet}) {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
}
// LAST Complete
.has-checkout-layout--multi-step .fc-checkout-step[data-step-complete].fc-checkout-step--next-step-incomplete > div:nth-last-of-type( 2 ) { // Targets the last substep inside the last step that is completed
	@media (#{$bp-larger-than-tablet}) {
		border-bottom-right-radius: $checkout-substep-border-radius;
		border-bottom-left-radius: $checkout-substep-border-radius;
	}
}
// NEXT Incomplete
.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--next-step-incomplete,
.has-checkout-layout--multi-step .fc-checkout-step.fc-checkout-step--next-step-incomplete > div:last-of-type {
	@media (#{$bp-larger-than-tablet}) {
		margin-bottom: $global-spacing-small;
		border-bottom-right-radius: $checkout-substep-border-radius;
		border-bottom-left-radius: $checkout-substep-border-radius;
	}
}



.has-checkout-layout--multi-step .fc-checkout-step[data-step-current]:not( [data-step-index="0"] ),
.has-checkout-layout--multi-step .fc-checkout-step:not( [data-step-complete] ) {
	@media (#{$bp-larger-than-tablet}) {
		border-radius: $checkout-substep-border-radius;
	}
}
.has-checkout-layout--multi-step .fc-checkout-step[data-step-current] > div:first-of-type {
	@media (#{$bp-larger-than-tablet}) {
		margin-top: 0;
		border-top-right-radius: $checkout-substep-border-radius;
		border-top-left-radius: $checkout-substep-border-radius;
	}
}
.has-checkout-layout--multi-step .fc-checkout-step[data-step-current] > div:last-of-type {
	@media (#{$bp-larger-than-tablet}) {
		margin-bottom: 0;
		border-bottom-right-radius: $checkout-substep-border-radius;
		border-bottom-left-radius: $checkout-substep-border-radius;
	}
}



.has-checkout-layout--multi-step.woocommerce-checkout form .fc-wrapper .fc-checkout-step[data-step-complete] .fc-step__substep .fc-step__substep-title {
	position: relative;
	display: block;
	margin: 0 0 $global-radius-extra-small;
	padding: $checkout-substep-complete-title-padding;
	padding-#{ $alignment-left }: $checkout-substep-complete-title-padding-left;
	color: $checkout-substep-text-color;

	@media (#{$bp-larger-than-desktop}) {
		float: $alignment-left;
		margin: 0;
		padding: $checkout-substep-complete-title-padding--large-screen;
		padding-#{ $alignment-left }: $checkout-substep-complete-title-padding-left--large-screen;
		width: remsize( 20rem );
	}

	@media (#{$bp-larger-than-desktop-medium}) { width: remsize( 22rem ); }

	&:before {
		@include icon( 'i-check-small' );
		@include icon-size( $icon-size-small );

		position: absolute;
		#{ $alignment-left }: $checkout-substep-title-check-icon-spacing;
		top: 50%;
		transform: translateY( -50% );
		border-radius: 100%;
		background-color: $checkout-substep-title-color--completed;
		color: $white;
	}
}





.has-checkout-layout--multi-step [data-step-current] ~ .fc-checkout-step {
	display: none;
}

.has-checkout-layout--multi-step:not( .has-collapsible-block ) [data-step-complete] .fc-step__substep-fields {
	display: none;
}




.fc-wrapper .fc-step__substep-text {
	display: none;
	margin: $checkout-substep-text-margin;
	padding: $checkout-substep-text-padding;
	color: $checkout-substep-text-color;
	font-weight: $checkout-substep-text-font-weight;
	font-size: $checkout-substep-text-font-size;
	line-height: 1.4;

	@media (#{$bp-larger-than-desktop}) {
		float: $alignment-right;
		padding-#{ $alignment-left }: 0;
		padding-#{ $alignment-right }: $global-spacing-large;
		margin: $checkout-substep-text-margin--large-screen;
		width: calc( 100% - #{ remsize( 20rem ) } );
		font-size: $checkout-substep-text-font-size--large-screen;
	}

	@media (#{$bp-larger-than-desktop-medium}) { width: calc( 100% - #{ remsize( 22rem ) } ); }
}
.fc-wrapper [data-step-complete] .fc-step__substep-text {
	display: block;
}

.fc-wrapper .fc-step__substep-text-content.is-loading {
	min-height: $global-spacing-medium;
}

.fc-wrapper .fc-step__substep-text-line {
	display: block;
	width: 100%;
	text-align: $alignment-left;
}

.fc-wrapper .fc-step__substep-text-line .fc-step__substep-text-line--small-text {
	font-size: 80%;
}





// ------------------------------------
// CHECKOUT STEP ACTIONS
// ------------------------------------
.has-checkout-layout--multi-step .fc-step__actions {
	padding: $checkout-substep-padding;
	padding-top: $global-spacing-small;
	padding-bottom: $global-spacing-small;
	text-align: center;
}
.has-checkout-layout--multi-step [data-step-complete] .fc-step__actions {
	display: none;
}

.has-checkout-layout--multi-step .fc-step__actions .fc-step__next-step {
	float: none;
	margin: 0;
	min-width: remsize( 28rem );
	width: 100% !important; // Needed to override theme styles
	text-align: center;

	&:focus {
		outline: $focus-outline-button !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-button !important; // Needed to override theme styles
	}
}





// ------------------------------------
// CHECKOUT SUB-STEP EDIT
// ------------------------------------
.fc-wrapper .fc-step__substep-edit {
	display: none;
	position: absolute;
	top: $checkout-substep-action-button-top;
	#{ $alignment-left }: auto;
	#{ $alignment-right }: $checkout-substep-action-button-right;
	margin: $checkout-substep-action-button-margin;
	padding: $checkout-substep-action-button-padding;
	font-size: $checkout-substep-action-button-font-size;
	font-weight: $checkout-substep-action-button-font-weight;
	line-height: 1.2;
	text-decoration: $checkout-substep-action-button-text-decoration;
	color: $checkout-substep-action-button-color;
	background-color: $checkout-substep-action-button-background-color;
	cursor: pointer;

	@media (#{$bp-larger-than-desktop}) { font-size: $checkout-substep-action-button-font-size--large-screen; }

	&:focus {
		outline: $focus-outline-link !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-link !important; // Needed to override theme styles
	}
}

.fc-wrapper .fc-step__substep-save {
	display: none !important; // Needed to override theme styles
	margin: $global-spacing-small 0 0 !important; // Needed to override theme styles
	width: 100% !important; // Needed to override theme styles
	text-align: center !important; // Needed to override theme styles

	&:focus {
		outline: $focus-outline-button !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-button !important; // Needed to override theme styles
	}
}

.fc-wrapper [data-step-complete] .fc-step__substep-edit,
.fc-wrapper [data-step-complete] .is-editing .fc-step__substep-save {
	display: inline-block !important; // Needed to override theme styles
}

.fc-wrapper [data-step-complete] .is-editing .fc-step__substep-edit,
.fc-wrapper [data-step-complete] .fc-step__substep-save {
	display: none !important; // Needed to override theme styles
}





// ------------------------------------
// CHECKOUT SUB-STEP FIELD WRAPPERS
// ------------------------------------
.fc-wrapper .fc-step__substep-fields-inner {
	padding: $global-spacing-extra-small 0 0;
	border: 0;
	transition: padding-top $global-animation-duration-fast linear;
}

.fc-wrapper .fc-step__substep.is-editing .fc-step__substep-fields-inner {
	padding: $global-spacing-small 0 0;
}

.fc-wrapper .woocommerce-shipping-fields,
.fc-wrapper .woocommerce-billing-fields {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;

	&:before,
	&:after {
		@include clearfix();
	}
}

.fc-substep__fields--coupon_codes .fc-step__substep-fields-inner {
	padding: 0;
}
