/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */
.Dialog {
	position:			fixed;

	left:				50%;
	top:				50%;
	transform: 			translateX(-50%) translateY(-50%);

	width:				560px;

	border:				0;
	border-radius:		40px;

	box-shadow:			0 5px 10px var(--ColorPurpleDark);

	font-family:		'Asap', sans-serif;

	padding:			40px 40px 35px 40px;
	margin:				0;

	z-index:			50;

	display:			none;
}

.Dialog[open] {
	display:			block;
}

body:has(.Dialog[open]) {
	filter: 			blur(4px);
	overflow:			hidden;
}

.DialogClose {
	position:			absolute;

	right:				20px;
	top:				20px;

	width:        		40px;
	height:       		40px;

	border-radius: 		20px;

	padding:       		4px;

	background:    		var(--ColorPurpleLight);
}

.DialogCloseImage {
	width:				100%;
}

.DialogClose:hover {
	background: 		var(--ColorOffWhite);
}

.DialogClose:active {
	background: 		linear-gradient(135deg, #8D00F1, var(--ColorPink));
}

/* --------------------------------------------------------------------------
   ATC Dialog
   -------------------------------------------------------------------------- */
.ATCDialogTitle {
	text-align: 		center;

	font-size:			32px;

	margin-bottom:		20px;
	padding:			0 25px;

	display:			block;
}

.ATCDialogDivider {
	height:				8px;

	border:				none;
	border-top:			2px #D8D8D8 solid;
	border-bottom:		2px #D8D8D8 solid;

	margin-bottom:		20px;
}

.ATCDialogOptions {
	flex-wrap:			nowrap;
	flex-direction: 	row;
	justify-content: 	space-evenly;

	padding-bottom:		20px;

	display: 			flex;
}

.ATCDialogOption {
	max-width:			120px;

	text-align: 		center;

	flex-direction: 	column;
	display:			none;
}

.ATCDialogOptionVisible {
	display:			flex;
}


.ATCDialogOptionPrice {
	font-size:			24px;
	font-weight:		600;

	color:				var(--ColorPurple);
}

.ATCDialogOptionIcon {
}

.ATCDialogOptionIconImage {
	width:				100%;
}

.ATCDialogOptionLabel {
	font-size: 			18px;
	font-weight: 		700;
	text-transform: 	uppercase;

	margin-bottom:		10px;

	flex:				1;
}

.ATCDialogOptionButtons {
	margin-bottom:		10px;

	justify-content: 	center;
	gap:				3px;

	display:			flex;
}

.ATCDialogOptionButton {
	background-color:	var(--ColorRed);
}

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

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

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

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

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

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

.ATCDialogOptionButtonImage {
	width:				14px;
}

.ATCDialogOptionQuantity {
	font-weight:		600;
	font-family: 		'Asap Condensed', sans-serif;

	width:				100%;
	max-width:			80px;

	padding: 			6px 10px;

	background-color: 	#E5E5E5;
	color:				#999999;

	border-radius: 		12px;
	font-size:			22px;

	margin:				0 auto;
}

.ATCDialogTotalLabel {
	font-size: 			20px;
	font-weight: 		700;
	text-transform: 	uppercase;
}

.ATCDialogTotalAmount {
	font-size:			18px;
}

.ATCDialogBottom {
	align-items:		center;
	display:			flex;
}

.ATCDialogTotal {
	text-align:			right;
	padding:			0 20px 0 0;

	flex:				1 1;
}

/* --------------------------------------------------------------------------
   Continue Dialog
   -------------------------------------------------------------------------- */
.ContinueDialogTitle {
	text-align: 		center;

	font-size:			36px;
	font-weight:		bold;

	margin-bottom:		5px;

	display:			block;
}

.ContinueDialogSubtitle {
	text-align: 		center;

	font-size:			20px;
	font-family:		var(--FontBody);

	color:				var(--ColorDarkGray);

	margin:				0 0 30px 0;
}

.ContinueDialogOptions {
	justify-content: 	center;
	gap:				30px;

	display: 			flex;
}

.ContinueDialogOption {
	width:				250px;

	text-align: 		center;

	padding:			30px 20px 25px 20px;

	background:			var(--ColorOffWhite);

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

	box-shadow:			0 4px 12px rgba(141, 0, 241, 0.08);

	cursor:				pointer;

	transition:			box-shadow 0.2s, background 0.2s;
}

.ContinueDialogOption:hover {
	background:			var(--ColorPurpleLight);

	box-shadow:			0 6px 16px rgba(141, 0, 241, 0.15);
}

.ContinueDialogOption:active {
	background:			linear-gradient(180deg, var(--ColorOffWhite) 0%, var(--ColorPurpleLight) 100%);
}

.ContinueDialogOptionIcon {
	margin-bottom:		15px;
}

.ContinueDialogOptionIconImage {
	width:				120px;
	height:				120px;

	display:			block;
	margin:				0 auto;
}

.ContinueDialogOptionLabel {
	font-size: 			20px;
	font-family:		var(--FontButton);
	font-weight: 		600;
	text-transform: 	uppercase;

	color:				var(--ColorDarkGray);
}

@media (max-width: 600px) {

	.Dialog {
		width: 			100%;
		border-radius: 	0;

		position: 		fixed;
		top: 			0;
		left:			0;

		transform: 		none;

		height: 		100vh;

		padding-bottom: 120px;

		max-width:		none;
		max-height:		none;

		overflow: 		auto;
	}

	.DialogClose {
		width:			30px;
		height:			30px;

		top:			10px;
		right:			10px;
	}

	.ATCDialogOptions {
		flex-wrap:		wrap;
		row-gap:		60px;
	}

	.ATCDialogOption {
		max-width:		50%;
		flex:			1 1 50%;
	}

	.ATCDialogOptionQuantity {
	}

	.ATCDialogBottom {
		flex-direction: column;
	}

	.ATCDialogTotal {
		padding:		0;
		margin-bottom:	20px;
	}

	.ContinueDialogOptions {
		flex-direction:	column;
		align-items:	center;
		gap:			20px;
	}

	.ContinueDialogOption {
		width:			100%;
		max-width:		300px;
	}

}