/* remotefilename=/style/shopping.css
 *
 *	Copyright © 2025 by The Race To Space Project.  All rights reserved.
 *
 *	$Id: /style/shopping.css,v $
 */
/**
*	CSS rulesets for the Shopping section of the site
*
*	Author:			Fred Koschara
*	Creation Date:	July thirty-first, 2025
*	Last Modified:	September 16, 2025 @ 11:08 am
*
*	Revision History:
*	   Date		  by		Description
*	2025/09/16	wfredk	add .mockPreorder ruleset
*	2025/09/16	wfredk	tweak rulesets for alternate email address entry
*	2025/09/15	wfredk	add rulesets for alternate email address entry
*	2025/08/29	wfredk	limit double-dollars banner width on small screens
*	2025/08/29	wfredk	order button min-width is !important (!!) (Safari sucks)
*	2025/08/29	wfredk	add a frame around each order button group (mobile UI)
*	2025/08/28	wfredk	change button presentation to responsive design
*	2025/08/01	wfredk	adjust some spacing
*	2025/08/01	wfredk	add .shopBorder* rulesets
*	2025/07/31	wfredk	original development, pull rulesets from existing code
*/

div#rapper
{	margin-top:2em;
	max-width:640px;
	text-align:justify;
}
h3#theExplainer
{	margin-top:3em;
}
hr#theLimiter
{	margin-top:50px;
}

.preEmailWrapper
{	display:flex;
	justify-content:center;
	margin:0 auto;
	max-width:640px;
	padding:0;
}
.preEmailForm
{	display:flex;
	gap:1em;
	margin-bottom:1em;
}

.mockPreorder
{	background:#007f00;
	color:#e9c731;
	font-weight:bold;
	padding:0.1em 0.5em;
}

.orderButtonsWrapper
{	display:flex;
	justify-content:center;
	margin:0 auto;
	padding:0;
}
.orderButtons
{	display:inline-grid;
	gap:12px;
	grid-template-columns:1fr;
	margin:0;
	max-width:100%;
	padding:0;
	width:fit-content;
}
.orderItem						/* each row */
{	align-items:center;
	border:thick inset #555;
	display:grid;
	gap:12px;
	grid-template-columns:auto max-content auto;
	justify-items:start;
	margin:10px 0;
	padding:0.5em 1em;
}
.preorderButtonCell
{	background:none;
	margin:0;
	padding:0;
}
.preorderButton
{	aspect-ratio:184/104;
	background:url(/graphics/PreOrderButton.png) no-repeat center center;
	background-size:contain;
	border:0;
	cursor:pointer;
	display:block;
	height:auto;
	margin:3px auto;
	max-width:184px;
	min-width:92px !important;
	width:100%;
}
.shopBookFormat
{	/* font-size:1.5em; */
	padding:0 36px;
	text-align:left;
}
.priceCell
{	font-variant-numeric:tabular-nums;
	justify-self:end;
	white-space:nowrap;
}

@media (max-width:700px)		/* responsive: stack and center on mobile */
{	.preEmailForm
	{	display:grid;
	}
	.orderPanel
	{	width:100%;
	}
	.orderItem
	{	border:2px dotted #555;
		grid-template-columns:1fr;
		justify-items:center;
	}
	.shopBookFormat
	{	padding:0;
		text-align:center;
	}
	#specialOffer
	{	max-width:33%;
		width:100%;
	}
}

.shopBorderInner
{	border:5px solid #ffff66;
	padding:1.5em;
	text-align:center;
}
.shopBorderOuter
{	border:3px solid #66cc66;
	display:inline-block;
	margin-top:2em;
}

.orderThankYou
{	color:#ccccff;
}
.thanksSqueeze
{	margin:2em;
}
.thanksAccount
{	margin:3em 0 1em;
}

/* EOF: shopping.css */