/* ==========================================================================
   Cart Page Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cart Header
   -------------------------------------------------------------------------- */
/* .CartPage .Navigation {
	position: 				static;

	background-image: 		url("/Assets/HomepageHeroImage.jpg");
	background-size: 		cover;

	box-shadow: 			0 10px 20px var(--ColorPurpleLight);
} */

.CartTitle {
	font-family: 			var(--FontHeader);
	font-size: 				clamp(32px, 4vw, 48px);
	font-weight: 			900;

	text-align: 			center;

    padding-bottom: 		30px;
    border-bottom: 			1px solid var(--ColorPurple);
}

/* --------------------------------------------------------------------------
   Cart Content
   -------------------------------------------------------------------------- */
.CartContent {
	padding: 				80px 40px;
}

.CartContentInner {
	max-width: 				var(--MaxWidth);
	margin: 				0 auto;
}

/* --------------------------------------------------------------------------
   Cart Items
   -------------------------------------------------------------------------- */
.CartItems {
	display: 				flex;
	flex-direction: 		column;

    border-bottom: 			1px solid var(--ColorPurple);
    margin-bottom: 		    4px;
}

.CartItem {
	position: 				relative;

	padding: 				30px 0;

	border-bottom: 			1px solid var(--ColorLightGray);

	align-items: 			center;
	gap: 					20px;

	display: 				flex;
}

.CartItem:last-child {
	border-bottom: 			none;
}

.CartItemImageContainer {
	flex: 					0 0 200px;
}

.CartItemImage {
	width: 					100%;
	height: 				auto;
}

.CartItemPrimaryDetails {
	align-items: 			center;
	gap: 					20px;

    flex: 					1 1 auto;

	display: 				flex;
}

.CartItemDetails {
	flex: 					1 1 auto;

	display: 				flex;
	flex-direction: 		column;
	gap: 					10px;
}

.CartItemName {
	font-family: 			var(--FontHeader);
	font-size: 				24px;
	font-weight: 			700;

    line-height: 		    1.2;

	color: 					var(--ColorDarkGray);

	margin: 				0;
}

.CartItemSize {
	font-family: 			var(--FontHeader);
	font-size: 				14px;
	font-weight: 			600;

	color: 					var(--ColorPurple);

	background-color: 		var(--ColorPurpleLight);

	padding: 				5px 16px 6px 16px;
	border-radius: 			20px;

	align-items: 			center;
	gap: 					8px;

	display: 				inline-flex;
	align-self: 			flex-start;
}

.CartItemSizeIcon {
	width: 					24px;
	height: 				auto;

    display: 				none;
}

.CartItemSecondaryDetails {
	align-items: 			center;
	gap: 					20px;

	display: 				flex;

    flex: 					0 0 auto;
}

.CartItemQuantity {
	flex: 					0 0 auto;

	align-items: 			center;
	gap: 					10px;

	display: 				flex;
}

.CartItemQuantityLabel {
	font-family: 			var(--FontHeader);
	font-size: 				16px;
	font-weight: 			500;

	color: 					var(--ColorGray);
}

.CartItemQuantityValue {
	font-family: 			var(--FontHeader);
	font-size: 				18px;
	font-weight: 			600;

	color: 					var(--ColorDarkGray);

	min-width: 				24px;
	text-align: 			center;
}

.CartItemQuantityButtons {
	display: 				flex;
	gap: 					3px;
}

.CartItemQuantityButton {
	background-color: 		var(--ColorRed);

	padding: 				8px 12px;
}

.CartItemQuantityButton:hover {
	background-color: 		var(--ColorPink);
}

.CartItemQuantityButton:active {
	background-color: 		var(--ColorPurple);
}

.CartItemQuantityButtonMinus {
	border-top-left-radius: 	15px;
	border-bottom-left-radius: 	15px;

	padding: 				8px 12px 8px 15px;
}

.CartItemQuantityButtonPlus {
	border-top-right-radius: 	15px;
	border-bottom-right-radius: 15px;

	padding: 				8px 15px 8px 12px;
}

.CartItemQuantityButtonImage {
	width: 					14px;
	height: 				auto;

	display: 				block;
}

.CartItemPrice {
	flex: 					0 0 auto;

	font-family: 			var(--FontHeader);
	font-size: 				24px;
	font-weight: 			700;

	color: 					var(--ColorPurple);

	text-align: 			right;
}

.CartItemRemove {
	position: 				absolute;
	right: 					0;
	bottom: 				30px;

	font-family: 			var(--FontHeader);
	font-size: 				14px;
	font-weight: 			500;

	color: 					var(--ColorPurple);

	background: 			none;
	padding: 				0;

	text-decoration: 		underline;
}

.CartItemRemove:hover {
	color: 					var(--ColorPurpleDark);
}

.CartItemRemove:active {
	color: 					var(--ColorRed);
}

/* --------------------------------------------------------------------------
   Cart Empty State
   -------------------------------------------------------------------------- */
.CartEmpty {
	padding: 				120px 20px;
	text-align: 			center;
}

.CartEmptyMessage {
	font-family: 			var(--FontHeader);
	font-size: 				20px;
	font-weight: 			500;

	color: 					var(--ColorGray);

	line-height: 			1.5;

	margin: 				0;
}

.CartEmptyLink {
	color: 					var(--ColorPurple);
	text-decoration: 		underline;

	display: 				block;
	margin-top: 			10px;
}

.CartEmptyLink:hover {
	color: 					var(--ColorPurpleDark);
}

/* --------------------------------------------------------------------------
   Cart Summary
   -------------------------------------------------------------------------- */
.CartSummary {
	padding: 				30px 0;

	border-top: 			1px solid var(--ColorPurple);

	align-items: 			flex-end;
	justify-content: 		flex-end;

	display: 				flex;
}

.CartTotal {
	font-family: 			var(--FontHeader);

	display: 				flex;
	align-items: 			baseline;
	gap: 					10px;
}

.CartTotalLabel {
	font-size: 				20px;
	font-weight: 			500;

	color: 					var(--ColorGray);
}

.CartTotalAmount {
	font-size: 				32px;
	font-weight: 			700;

	color: 					var(--ColorDarkGray);
}

/* --------------------------------------------------------------------------
   Cart Pickup
   -------------------------------------------------------------------------- */
.CartPickup {
	font-family: 			var(--FontHeader);
	font-size: 				20px;

	color: 					var(--ColorDarkGray);

	text-align:				center;

	margin:					0 0 40px 0;
}

.CartPickupDate {
	margin:					0 0 10px 0;
}

.CartPickupDateLabel {
	color: 					var(--ColorPurple);
	font-weight: 			600;
	line-height: 			1.2;
}

.CartPickupDateTime {
	font-weight: 			500;
}

.CartPickupAddress {
	margin:					0 0 20px 0;

	font-size:				16px;
	font-weight: 			600;

	line-height:			1.2;
}

.CartPickupAddressLabel {
	color:					var(--ColorPurple);
}

.CartPickupAddressLink {
	color:					var(--ColorDarkGray);
	text-decoration: 		underline;
}

.CartPickupDisclaimer {
	max-width: 				400px;
	padding: 				25px;
	margin:					0 auto 20px auto;

	background-color: 		var(--ColorPurpleLight);
	color:					var(--ColorPurpleDark);
	line-height: 			1.5;

	font-weight: 			700;
	font-size: 				14px;

	border-radius: 			10px;
}

.CartPickupDisclaimer > a {
	color:					var(--ColorPurple);
	text-decoration: 		underline;
}

.CartPickupAgreeContainer {
}

.CartPickupAgreeLabel {
	font-weight:			700;
}

.CartPickupAgree {
}

/* --------------------------------------------------------------------------
   Cart Checkout
   -------------------------------------------------------------------------- */
.CartCheckout {
	text-align: 			center;
}

.CartCheckoutButton {
	background: 			var(--ColorWhite);

	padding: 				20px 60px;

	border: 				1px solid var(--ColorLightGray);
	border-radius: 			15px;

	box-shadow: 			0 4px 12px rgba(0, 0, 0, 0.1);

	display: 				inline-block;

	transition: 			all var(--TransitionBase);
}

.CartCheckoutButton:hover {
	background: 			linear-gradient(180deg, var(--ColorWhite) 0%, var(--ColorPurpleLight) 100%);

	border-color: 			var(--ColorPurpleLight);
}

.CartCheckoutButton:active {
	background: 			linear-gradient(180deg, var(--ColorWhite) 0%, #FFE0F0 100%);

	border-color: 			#FFE0F0;
}

.CartCheckoutButtonImage {
	height: 				50px;
	width: 					auto;

	display: 				block;
}

.OrderConfirmationContent {
	padding: 				80px 40px;
	text-align: 			center;
}

.OrderConfirmationContentInner {
	max-width: 				500px;
	margin: 				0 auto;
}

/* --------------------------------------------------------------------------
   Responsive - Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

	.CartItem {
		flex-wrap: 			wrap;
		gap: 				10px;
        padding:            20px 0 50px 0;
	}

    .CartItem:first-child {
        padding-top: 		0;
    }

	.CartItemPrimaryDetails {
	}

	.CartItemDetails {
		flex: 				1 1 calc(100% - 220px);
	}

    .CartItemSecondaryDetails {
        flex: 				1 1 auto;
        justify-content: 	space-between;
	}

    .CartItemQuantity {
        flex: 				0 0 auto;
    }

    .CartItemQuantityButtons {
        flex: 				0 0 auto;
    }

    .CartItemPrice {
        flex: 				1 1 auto;
    }

    .CartItemRemove {
        bottom: 			20px;
    }

	.CartSummary {
		flex-direction: 	column;
		align-items: 		flex-start;
		gap: 				20px;
	}

	.CartTotal {
		align-self: 		flex-end;
	}

}

/* --------------------------------------------------------------------------
   Responsive - Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

    /* .CartPage .Navigation {
        position: 			fixed;
    } */

	.CartContent {
		padding: 			50px 30px;
	}

	.CartItemImageContainer {
		flex: 				0 0 120px;
	}

	.CartItemDetails {
		flex: 				1 1 calc(100% - 140px);
		gap: 				8px;
	}

	.CartItemName {
		font-size: 			clamp(16px, 4vw, 20px);
	}

	.CartItemSize {
		font-size: 			12px;
		padding: 			4px 12px;
	}

	.CartItemQuantity {
	}

	.CartItemPrice {
		font-size: 			20px;
	}

	.CartItemRemove {
		bottom: 			20px;
	}

	.CartTotalLabel {
		font-size: 			18px;
	}

	.CartTotalAmount {
		font-size: 			28px;
	}

	.CartPickupDate {
		margin:				0 0 20px 0;
	}

	.CartPickupDateLabel {
		display:			block;
	}

	.CartPickupDateTime {
		font-size:			16px;
		display:			block;
	}

	.CartPickupAddressLabel {
		font-size:			16px;
		display:			block;
	}

	.CartPickupAddressLink {
		font-size:			14px;
		display:			block;
	}

	.CartCheckoutButton {
		padding: 			15px 30px;
	}

}

@media (max-width: 360px) {

	.CartItemImageContainer {
		flex: 				0 0 80px;
	}

    .CartItemSecondaryDetails {
        gap: 				10px;
    }

}