@use "sass:math" as math;

$_order-review-selector: '#order_review' !default;

// ------------------------------------
// ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review {
	display: none;
	margin: $order-summary-container-margin;
	padding: $order-summary-container-padding;
}
body.has-checkout-column-layout--two_columns .fc-wrapper .fc-checkout-order-review {
	@media (#{$bp-larger-than-desktop}) {
		display: block;
		margin: $order-summary-container-margin--large-screen;
		padding: $order-summary-container-padding--large-screen;
	}
}
body.has-checkout-column-layout--two_columns:not( .has-checkout-layout--multi-step ) .fc-wrapper .fc-checkout-order-review {
	display: block;
}
body.has-checkout-layout--single-step .fc-wrapper .fc-checkout-order-review,
body.fc-checkout-step-current-last .fc-wrapper .fc-checkout-order-review {
	display: block !important; // Needed to override styles so that the order summary is always visible when at the last step
}



// Fix layout for the `#order_review` element
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #{$_order-review-selector} {
	position: static !important; // Needed to override theme styles
	float: none !important; // Needed to override theme styles
	padding: 0 !important; // Needed to override theme styles
	margin: 0 !important; // Needed to override theme styles
	border: 0 !important; // Needed to override theme styles
	width: 100%  !important; // Needed to override theme styles
	background-color: transparent !important; // Needed to override theme styles
}
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #{$_order-review-selector}:before,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #{$_order-review-selector}: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-selector} table.woocommerce-checkout-review-order-table {
	display: table;
	margin: $order-summary-table-margin;
	margin-bottom: 0; // Needs to set to 0px to avoid issue with element overlapping with enclosing element's borders.
	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;
		margin-bottom: 0; // Needs to set to 0px to avoid issue with element overlapping with enclosing element's borders.
		width: $order-summary-table-width--large-screen;
		font-size: $order-summary-font-size--large-screen;
	}
}
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tfoot tr.order-total:last-child th:first-child,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tfoot tr.order-total:last-child td:first-child {
	border-radius: 0 !important; // Needed to override theme styles

	@media (#{$bp-larger-than-desktop}) {
		border-bottom-#{ $alignment-left }-radius: $checkout-substep-border-radius !important; // Needed to override theme styles
		border-bottom-#{ $alignment-right }-radius: 0 !important; // Needed to override theme styles
	}
}
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tfoot tr.order-total:last-child td:last-child {
	border-radius: 0 !important; // Needed to override theme styles

	@media (#{$bp-larger-than-desktop}) {
		border-bottom-#{ $alignment-left }-radius: 0 !important; // Needed to override theme styles
		border-bottom-#{ $alignment-right }-radius: $checkout-substep-border-radius !important; // Needed to override theme styles
	}
}

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

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

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

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

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tr.cart-discount.coupon-highlight {
	background-color: $coupon-code-coupon-highlight-background-color;
}
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tr.cart-discount.coupon-highlight.coupon-fade-out {
	background-color: transparent;
	transition: background-color $global-animation-duration-slow $global-animation-duration-slow linear;
}

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

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

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

div.woocommerce .fc-wrapper #{$_order-review-selector} 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;
}
body.has-highlighted-order-totals div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	background-color: $order-summary-highlighted-total-background-color;
}


div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table th,
div.woocommerce .fc-wrapper #{$_order-review-selector} 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-selector} table.woocommerce-checkout-review-order-table tfoot th {
	vertical-align: middle;
	width: 50%;
	text-align: $alignment-left !important; // Needed to override theme styles
}

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

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table > tfoot > tr > td {
	text-align: $alignment-right !important; // Needed to override theme styles
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-total .tax_label,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-total .includes_tax,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table tfoot td .includes_tax,
div.woocommerce .fc-wrapper #{$_order-review-selector} 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-selector} table.woocommerce-checkout-review-order-table .cart_item td {
	margin: 0;
	width: 100%;
	white-space: normal;
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name,
div.woocommerce .fc-wrapper #{$_order-review-selector} 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-selector} table.woocommerce-checkout-review-order-table tr:first-child .product-name:after {
	@include clearfix();
}

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

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > img,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > a img,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > p img,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > picture img,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > div.product-thumbnail img {
	float: $alignment-left;
	margin-#{ $alignment-left }: calc( -1 * ( #{ $order-summary-image-padding } + #{ $global-spacing-tiny } ) );
	margin-#{ $alignment-right }: 0 !important; // Needed to override inline styles added by some themes
	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-selector} table.woocommerce-checkout-review-order-table .product-name > picture,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > div.product-thumbnail {
	float: $alignment-left;
	margin: 0 !important; // Needed to override inline styles added by some themes
	margin-#{ $alignment-left }: calc( -1 * ( #{ $order-summary-image-padding } + #{ $global-spacing-tiny } ) ) !important; // Needed to override inline styles added by some themes
	padding: 0 !important; // Needed to override inline styles added by some themes
	width: $order-summary-image-width !important; // Needed to override inline styles added by some themes

	@media (#{$bp-larger-than-desktop}) {
		width: $order-summary-image-width--large-screen !important; // Needed to override inline styles added by some themes
	}
}
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > picture img,
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-name > div.product-thumbnail img {
	margin-#{ $alignment-left }: 0 !important; // Needed to override inline styles added by some themes
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .product-details {
	float: $alignment-left;
	position: static;
	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-selector} table.woocommerce-checkout-review-order-table .product-details p:not( :first-child ) {
	margin: 0;
	margin-top: $global-spacing-tiny;
	margin-block-start: $global-spacing-tiny;
	margin-block-end: 0;
}

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

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



div.woocommerce .fc-wrapper #{$_order-review-selector} 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 } );
	#{ $alignment-right }: auto;
	width: auto;
	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-selector} table.woocommerce-checkout-review-order-table dl.variation {
	display: block !important; // Need to override theme styles
	margin: 0 !important; // Need to override theme styles
	padding: 0 !important; // Need to override theme styles
	color: $grey;
	font-size: $font-size-extra-small;
}
div.woocommerce .fc-wrapper #{$_order-review-selector} 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-selector} table.woocommerce-checkout-review-order-table tr.order-total {
	@media (#{$bp-larger-than-desktop}) {
		border-bottom: 0;
	}
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .order-total th {
	text-transform: uppercase;
}
div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table .order-total th,
div.woocommerce .fc-wrapper #{$_order-review-selector} 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-selector} table.woocommerce-checkout-review-order-table .cart-discount .woocommerce-remove-coupon {
	&:focus {
		outline: $focus-outline-link !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-link !important; // Needed to override theme styles
	}
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table > tfoot > tr.coupon-code-form > td {
	padding-bottom: $global-spacing-extra-small !important; // Needed to override theme styles
	text-align: $alignment-left !important; // Needed to override theme styles
}

div.woocommerce .fc-wrapper #{$_order-review-selector} table.woocommerce-checkout-review-order-table > tfoot > tr.shipping > td::before {
	content: none !important; // Need to override theme styles
}





// ------------------------------------
// FLYOUT ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review[data-flyout] {
	@media (#{$bp-larger-than-desktop}) {
		position: static;
		transform: none;
	}
}
body.has-checkout-column-layout--two_columns .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 $global-spacing-small;
	width: $order-summary-table-width;
	max-width: $order-summary-table-width;
	background-color: $order-summary-background-color;
	// Note: `overflow: visible` is used here to avoid scrollbars.
	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;
	}
}
div.woocommerce .fc-wrapper .fc-checkout-order-review:not( :first-child ) .fc-checkout-order-review__inner {
	@media (#{$bp-larger-than-tablet}) {
		margin: $global-spacing-small 0 0;
	}
}
div.woocommerce .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner::after {
	@include clearfix();
}

.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;
	padding: $global-spacing-extra-small $container-spacing-mobile;
	max-width: $container-width-mobile;
	width: 100%;
	background-color: $white;
	box-shadow: $box-shadow-dark;

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

	// padding
	@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 !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-link !important; // Needed to override theme styles
	}
}

.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 !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-button !important; // Needed to override theme styles
	}
}



.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 !important; // Needed to override theme styles
		outline-offset: $focus-outline-offset-link !important; // Needed to override theme styles
	}
}