// ------------------------------------
// CHECKOUT COUPON CODE
// ------------------------------------

.fc-wrapper .fc-coupon-code-section__inner {
	width: 100%;
}

.fc-wrapper .fc-coupon-code-section__message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	@media (#{$bp-larger-than-tablet}) {
		flex-direction: row;
	}
}

.fc-wrapper .fc-coupon-code-section__message-text {
	@media (#{$bp-smaller-than-tablet}) {
		margin-bottom: $global-spacing-extra-small;
	}
}

.fc-wrapper .fc-coupon-code-section__message .button {
	@media (#{$bp-smaller-than-tablet}) {
		width: 100%;
		text-align: center;
	}
}



.fc-wrapper .fc-coupon-code-section__inner .fc-coupon-code-section {
	margin-top: $global-spacing-extra-small;
}



.fc-wrapper .fc-coupon_code__collapsible .collapsible-content__inner {
	position: relative;
}

.fc-wrapper .fc-coupon_code__collapsible #coupon_code_field.form-row {
	float: none;
	margin: 0;
	padding: 0;
}

.fc-wrapper .fc-coupon_code__collapsible .woocommerce-input-wrapper {
	width: 100% !important; // Needed to override theme styles set with `!important`
}

.fc-wrapper .fc-coupon_code__collapsible input#coupon_code {
	margin: 0;
	width: 100% !important; // Needed to override theme styles set with `!important`
	height: remsize( 5.5rem );

	&:focus {
		z-index: z( 'above' );
		position: relative;
		outline: $focus-outline-button;
		outline-offset: $focus-outline-offset-button;
	}
}

.fc-wrapper .fc-coupon_code__collapsible .fc-coupon-code__apply {
	z-index: z( 'above' ) + 1;
	position: absolute;
	top: $global-spacing-tiny;
	margin: 0;
	padding-left: $global-spacing-small;
	padding-right: $global-spacing-small;
	#{ $alignment-left }: auto;
	#{ $alignment-right }: $global-spacing-tiny;
	height: remsize( 4.5rem ) !important; // Needed to override theme styles
	line-height: 1 !important; // Needed to override theme styles
	width: auto;

	&:focus {
		outline: $focus-outline-button;
		outline-offset: $focus-outline-offset-button;
	}
}





.fc-wrapper .fc-step__substep-text-content--coupon-codes:not( :empty ) {
	margin-bottom: $global-spacing-small;
}

.fc-wrapper .fc-coupon-codes__coupon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: $coupon-code-coupon-margin;
	padding: $coupon-code-coupon-padding;
	border: $coupon-code-coupon-border;
	border-radius: $coupon-code-coupon-border-radius;
	background-color: $coupon-code-coupon-background-color;
}

.fc-wrapper .fc-coupon-codes__coupon-amount {
	flex-wrap: wrap;
	flex-shrink: 0;
}

.fc-wrapper .fc-coupon-codes__coupon-amount .woocommerce-remove-coupon {
	margin-left: $coupon-code-remove-spacing;
	font-size: $coupon-code-remove-font-size;
	font-weight: $coupon-code-remove-font-weight;
	line-height: inherit;
	text-decoration: $coupon-code-remove-text-decoration;
	color: $coupon-code-remove-color;
	background-color: transparent;

	&:hover,
	&:active,
	&:focus {
		color: $error-color;
	}

	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}