@use "sass:math" as math;

// ------------------------------------
// ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review {
	display: block;
	margin: $order-summary-container-margin;
	padding: $order-summary-container-padding;

	@media (#{$bp-larger-than-desktop}) {
		margin: $order-summary-container-margin--large-screen;
		padding: $order-summary-container-padding--large-screen;
	}
}
body:not( .has-checkout-layout--multi-step ) .fc-wrapper .fc-checkout-order-review,
body.has-checkout-layout--multi-step.fc-checkout-step-current-last .fc-wrapper .fc-checkout-order-review {
	display: block;
}



// Fix layout for the `#order_review` element
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review {
	float: none;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
	background-color: transparent;
}
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review:before,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review:after {
	display: none;
}



body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: ( $global-spacing-extra-small + remsize( .2rem ) );
	text-align: $alignment-left;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: auto;
	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}) { font-size: $checkout-substep-title-font-size--large-screen; }
}
body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title:before,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title:after {
	width: auto;
}





div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table {
	display: table;
	margin: $order-summary-table-margin;
	padding: 0;
	width: $order-summary-table-width;
	max-width: $order-summary-table-width;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: $order-summary-font-size;
	background-color: transparent;

	@media (#{$bp-larger-than-desktop}) {
		margin: $order-summary-table-margin--large-screen;
		width: $order-summary-table-width--large-screen;
		font-size: $order-summary-font-size--large-screen;
	}
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table thead,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot {
	display: table-row-group;
	border: none;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody::after {
	display: none;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table th,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table td,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child th,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child td {
	border: 0;
	display: table-cell;
	width: auto;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr {
	border: 0;
	border-top: $order-summary-cell-border;
	height: auto;
	display: table-row;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody tr.cart-item {
	border-top: $order-summary-cell-border--products;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody tr:first-child {
	border-top: $order-summary-cell-border--products-list;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot tr:first-child {
	border-top: $order-summary-cell-border--summary;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	border-top: $order-summary-cell-border--totals-top;
	border-bottom: $order-summary-cell-border--totals-bottom;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table th,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table td {
	padding: $order-summary-cell-padding-vertical $order-summary-cell-padding-horizontal !important; // Needed to override theme styles
	background-color: transparent;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot th {
	vertical-align: middle;
	width: 50%;
	text-align: $alignment-left;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td {
	width: 50%;
	font-size: $order-summary-font-size;
	text-align: $alignment-right;
	line-height: 1;
	vertical-align: middle;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total .tax_label,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total .includes_tax,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td .includes_tax,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td .tax_label {
	display: block;
	width: 100%;
	line-height: 1.2;
	color: $grey;
	white-space: normal;
}




div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart_item td {
	margin: 0;
	width: 100%;
	white-space: normal;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-name,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-name {
	position: relative;
	float: $alignment-left;
	padding: $global-spacing-tiny;
	width: 75%;
	background-color: transparent;
	border: 0;
	text-align: $alignment-left;
	line-height: 1.2;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-name:after {
	@include clearfix();
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-total {
	display: block;
	padding: $global-spacing-tiny 0;
	width: 25%;
	float: $alignment-right;
	background-color: transparent;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-name > img,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-name > a img {
	float: $alignment-left;
	margin-#{ $alignment-left }: calc( -1 * ( #{ $order-summary-image-padding } + #{ $global-spacing-tiny } ) );
	padding: $order-summary-image-padding;
	width: $order-summary-image-width !important; // Needed to override inline styles added by some themes
	height: auto !important; // Needed to override inline styles added by some themes
	background-color: $order-summary-image-background-color;
	border: $order-summary-image-border;
	border-radius: $order-summary-image-border-radius;
	box-shadow: $order-summary-image-box-shadow;

	@media (#{$bp-larger-than-desktop}) {
		width: $order-summary-image-width--large-screen !important; // Needed to override inline styles added by some themes
		height: auto !important;  // Needed to override inline styles added by some themes
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-details {
	float: $alignment-left;
	padding-#{ $alignment-left }: $global-spacing-small;
	width: calc( 100% - $order-summary-image-width );

	@media (#{$bp-larger-than-desktop}) {
		width: calc( 100% - $order-summary-image-width--large-screen );
	}
}



div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart-item__element {
	margin-top: $global-spacing-tiny;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart-item__price .amount {
	font-size: $font-size-extra-small;
}



div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-quantity {
	z-index: z( 'above' );
	position: absolute;
	top: 0;
	#{ $alignment-left }: calc( #{ $order-summary-image-width } + #{ $global-spacing-tiny } );
	transform: $order-summary-quantity-transform;
	display: block !important; // Needed to override styles added by some themes
	padding: remsize( .1rem ) remsize( .6rem ) remsize( .2rem ) $global-spacing-tiny;
	border-radius: #{ math.div( $font-size-extra-small + remsize( .4rem ), 2 ) };
	background-color: $order-summary-quantity-background-color;
	color: $order-summary-quantity-text-color;
	font-size: $order-summary-quantity-font-size;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;

	@media (#{$bp-larger-than-desktop}) {
		#{ $alignment-left }: calc( #{ $order-summary-image-width--large-screen } + #{ $global-spacing-tiny } );
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table dl.variation {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	color: $grey;
	font-size: $font-size-extra-small;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0;
	padding: 0;
}

div.woocommerce .fc-wrapper .fc-checkout-order-review:not( .has-additional-content ) #order_review table.woocommerce-checkout-review-order-table tr.order-total {
	@media (#{$bp-larger-than-desktop}) {
		border-bottom: 0;
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total th {
	text-transform: uppercase;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total th,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total td {
	padding-top: $order-summary-cell-padding-vertical--total;
	padding-bottom: $order-summary-cell-padding-vertical--total;
}



div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart-discount .woocommerce-remove-coupon {
	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .coupon-code-form td {
	text-align: $alignment-left;
}





// ------------------------------------
// FLYOUT ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review[data-flyout] {
	@media (#{$bp-larger-than-desktop}) {
		position: static;
		transform: none;
	}
}
.fc-wrapper .fc-checkout-order-review[data-flyout].is-activated {
	@media (#{$bp-larger-than-desktop}) {
		display: block;
	}
}

.fc-wrapper .fc-checkout-order-review[data-flyout].is-activated.is-open {
	z-index: z( 'float-element' );
	margin: 0;
	padding: $checkout-header-height 0 0;
}
// With admin bar
.admin-bar .fc-wrapper .fc-checkout-order-review[data-flyout].is-activated.is-open {
	padding: calc( #{ $checkout-header-height } + 46px ) 0 0;

	@media (min-width: 783px) {
		padding: calc( #{ $checkout-header-height } + 32px ) 0 0;
	}
}



.has-flyout.has-flyout--open-fc-checkout-order-review .flyout-overlay {
	display: none;
}



div.woocommerce .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner {
	display: block;
	height: auto;
	margin: $order-summary-table-margin;
	padding: ( $global-spacing-extra-small + remsize( .2rem ) ) $order-summary-cell-padding-horizontal 0;
	width: $order-summary-table-width;
	max-width: $order-summary-table-width;
	background-color: $order-summary-background-color;
	overflow: visible;
	box-shadow: $order-summary-box-shadow;

	@media (#{$bp-larger-than-tablet}) {
		margin: 0 0 $global-spacing-small;
		width: 100%;
		max-width: 100%;
		border: $order-summary-border;
		border-radius: $checkout-substep-border-radius;
		box-shadow: $order-summary-box-shadow--large-screen;
	}
}

.fc-wrapper .fc-checkout-order-review[data-flyout].is-open {
	@media (#{$bp-smaller-than-desktop}) {
		background-color: $order-summary-background-color--popup;
	}
}
.fc-wrapper .fc-checkout-order-review[data-flyout].is-open .fc-checkout-order-review__inner {
	padding-bottom: $global-spacing-large;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: auto;

	@media (#{$bp-smaller-than-desktop}) {
		border: 0 !important; // Needed to override design template styles
		border-radius: 0 !important; // Needed to override design template styles
	}
}





// ------------------------------------
// ORDER SUMMARY ACTIONS
// ------------------------------------
.fc-checkout-order-review__actions-mobile {
	display: none;
}
.has-flyout.has-flyout--open-fc-checkout-order-review .fc-checkout-order-review__actions-mobile {
	z-index: z( 'sticky-element' );
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: $white;
	box-shadow: $box-shadow-dark;

	// max-width
	max-width: $container-width-mobile;
	@media (#{$bp-larger-than-tablet}) { max-width: $container-width-tablet; }

	// padding
	padding: $global-spacing-extra-small $container-spacing-mobile;
	@media (#{$bp-larger-than-tablet}) { padding: $global-spacing-small $container-spacing-tablet; }

	// Hide on desktop view
	@media (#{$bp-larger-than-desktop}) { display: none; }
}



.fc-checkout-order-review__actions-mobile .fc-checkout-order-review__header-link {
	margin: 0 0 0 #{ - $global-spacing-extra-small };
	padding-left: $global-spacing-extra-small;
	padding-right: $global-spacing-extra-small;

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

.fc-checkout-order-review__actions-mobile .fc-checkout-order-review__close-order-summary {
	margin: 0 #{ - $global-spacing-extra-small } 0 0;
	height: remsize( 4.4rem );

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



.fc-checkout-order-review__sidebar-actions {
	display: none;

	@media (#{$bp-larger-than-desktop}) { display: block; }
}




.fc-checkout-order-review__head .fc-checkout-order-review__header-link {
	position: relative;
	#{ $alignment-right }: $order-summary-edit-cart-button-right;

	float: $alignment-right;
	display: block;

	margin: $order-summary-edit-cart-button-margin;
	padding: $order-summary-edit-cart-button-padding;
	font-size: $order-summary-edit-cart-button-font-size--large-screen;
	font-weight: $order-summary-edit-cart-button-font-weight;
	line-height: 1.2;
	text-decoration: $order-summary-edit-cart-button-text-decoration;
	color: $order-summary-edit-cart-button-color;
	background-color: $order-summary-edit-cart-button-background-color;
	cursor: pointer;


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