/* ==========================================================================
   Order Confirmation Styles
   ========================================================================== */

/* Selectors are scoped to .OrderConfirmationContentInner so they beat the
   generic .InternalPageContentInner tag rules in InternalPage.css. */

.OrderConfirmationContentInner .OrderConfirmationOrderTitle,
.OrderConfirmationContentInner .OrderConfirmationPickupTitle {
	font-family: 			var(--FontHeader);
	font-size: 				24px;
	font-weight: 			800;

	color: 					var(--ColorPurpleDark);

	text-align: 			center;

	margin: 				0 0 20px 0;
}

.OrderConfirmationActions {
	justify-content: 		center;
	flex-wrap: 				wrap;
	gap: 					12px;

	margin: 				0 0 36px 0;

	display: 				flex;
}

/* Internal reference — hidden on screen, shown small/gray on the printout */
.OrderConfirmationRef {
	display: 				none;
}

.OrderConfirmationContentInner .OrderConfirmationAction {
	font-family: 			var(--FontButton);
	font-size: 				15px;
	font-weight: 			700;
	text-transform: 		uppercase;

	color: 					var(--ColorPurple);
	background-color: 		var(--ColorPurpleLight);

	padding: 				10px 22px;
	border-radius: 			20px;

	text-decoration: 		none;
	cursor: 				pointer;

	transition: 			all var(--TransitionBase);
}

.OrderConfirmationContentInner .OrderConfirmationAction:hover {
	background-color: 		var(--ColorPurple);
	color: 					var(--ColorOffWhite);
}

.OrderConfirmationContentInner .OrderConfirmationOrder {
	margin: 				0 0 40px 0;

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

/* Order line — mirrors the cart page item (.CartItem) */
.OrderConfirmationItem {
	align-items: 			center;
	gap: 					16px;

	padding: 				16px 0;

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

	text-align: 			left;

	display: 				flex;
}

.OrderConfirmationItemImageContainer {
	flex: 					0 0 90px;
}

.OrderConfirmationContentInner .OrderConfirmationItemImage {
	width: 					100%;
	height: 				auto;

	border-radius: 			var(--BorderRadius);

	box-shadow: 			none;

	margin: 				0;
}

.OrderConfirmationContentInner .OrderConfirmationItemImage:hover {
	transform: 				none;
}

.OrderConfirmationItemDetails {
	flex: 					1 1 auto;

	flex-direction: 		column;
	align-items: 			flex-start;
	gap: 					8px;

	display: 				flex;
}

.OrderConfirmationContentInner .OrderConfirmationItemName {
	font-family: 			var(--FontHeader);
	font-size: 				18px;
	font-weight: 			700;

	line-height: 			1.2;

	color: 					var(--ColorDarkGray);

	margin: 				0;
}

/* Matches the cart's size pill (name only — the cart hides the detailed pan icon) */
.OrderConfirmationItemSize {
	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;

	display: 				inline-block;
}

.OrderConfirmationItemSecondary {
	flex: 					0 0 auto;

	flex-direction: 		column;
	align-items: 			flex-end;
	gap: 					4px;

	display: 				flex;
}

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

	color: 					var(--ColorGray);

	white-space: 			nowrap;
}

.OrderConfirmationItemPrice {
	font-family: 			var(--FontHeader);
	font-size: 				20px;
	font-weight: 			700;

	color: 					var(--ColorPurple);
}

.OrderConfirmationTotalRow {
	align-items: 			baseline;
	justify-content: 		flex-end;
	gap: 					10px;

	padding: 				16px 0;

	display: 				flex;
}

.OrderConfirmationTotalLabel {
	font-family: 			var(--FontHeader);
	font-size: 				18px;
	font-weight: 			500;

	color: 					var(--ColorGray);
}

.OrderConfirmationTotalAmount {
	font-family: 			var(--FontHeader);
	font-size: 				26px;
	font-weight: 			700;

	color: 					var(--ColorDarkGray);
}

.OrderConfirmationContentInner .OrderConfirmationPickup {
	background-color: 		var(--ColorPurpleLight);

	border-radius: 			var(--BorderRadius);

	padding: 				30px;
	margin: 				10px 0 40px 0;
}

.OrderConfirmationContentInner .OrderConfirmationPickupLine {
	font-family: 			var(--FontBody);
	font-size: 				20px;

	color: 					var(--ColorDarkGray);

	margin: 				0 0 12px 0;
}

.OrderConfirmationPickupLabel {
	font-family: 			var(--FontHeader);
	font-weight: 			700;

	color: 					var(--ColorPurple);

	margin-right: 			6px;
}

.OrderConfirmationMap {
	width: 					100%;
	height: 				320px;

	border: 				0;
	border-radius: 			var(--BorderRadius);

	margin: 				8px 0 16px 0;

	display: 				block;
}

.OrderConfirmationContentInner .OrderConfirmationPickupNote {
	font-family: 			var(--FontBody);
	font-size: 				16px;

	color: 					var(--ColorPurpleDark);

	margin: 				0;
}

@media (max-width: 600px) {

	.OrderConfirmationContentInner .OrderConfirmationPickup {
		padding: 			20px;
	}

	.OrderConfirmationMap {
		height: 			240px;
	}

}