/*
 * The add-buttons, the sticky bar and the drawer.
 *
 * These render on /all/ and the four calculators, which are ordinary theme
 * pages, so everything here is namespaced hard and nothing sets a global. The
 * five brand colours only: #3c3c3c ink, #b0aaaa rule, #eeeeee light,
 * #2d4ef4 primary, #f97a35 accent.
 *
 * ⚠️ The add-button sits inside table cells on /all/, next to a link, so it is
 * inline-block and small. It is NOT the 48px grandparent button from the wish
 * list page: that button is for a 68 year old buying a gift, this one is for
 * the person building the list, on the page they were already reading.
 */

/*
 * 🔴 EVERY DECLARATION IN THIS BLOCK IS !important, AND THAT IS NOT LAZINESS.
 *
 * Measured on the live page, not reasoned about: without them the Extra theme's
 * own button rules won, and the pill rendered at 16px, uppercase, 40px tall,
 * solid blue with white text, in a 3px radius. The file said 12px lowercase
 * outline pill. A stylesheet that describes something the page does not do is
 * worse than no stylesheet, because the next person edits the file and nothing
 * moves.
 *
 * ⚠️ AND THE SIZE IS A COMMERCIAL DECISION, NOT A TASTE ONE. This button sits
 * directly beside the affiliate link on /all/, which earns 82% of this site's
 * clicks. A loud button competes with "See it on Amazon" for the same tap, and
 * the affiliate link is the one that pays. So the default is deliberately
 * QUIET: an outline pill that is findable when you are looking for it and does
 * not shout over the money link. Raising its weight is Wayne's call, and it is
 * one value change here.
 *
 * 🔑 AND THE #page-container PREFIX IS LOAD BEARING, NOT DECORATION.
 *
 * !important alone was NOT enough, which is the part that would otherwise have
 * shipped broken. The child theme's brand.css carries
 * `#page-container button { background: #2d4ef4 !important }` at specificity
 * (1,0,1), and that beats a bare `.ng-add` at (0,1,0) however many !importants
 * are stacked on it. What rendered on the live page was a blue button with blue
 * text, an invisible label, found by reading computed styles in the browser
 * rather than by trusting the stylesheet.
 *
 * The `body button.ng-add` twin covers any template that does not wrap its
 * content in #page-container. Neither one edits the theme, because a plugin
 * repainting the theme so its own button can be seen has the blast radius
 * pointing the wrong way.
 */
#page-container button.ng-add,
body button.ng-add,
.ng-add {
	display: inline-block !important;
	margin: 0 0 0 8px !important;
	padding: 3px 9px !important;
	border: 1px solid #2d4ef4 !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: #2d4ef4 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	vertical-align: baseline !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Same specificity story on every state below. Drop the #page-container prefix
 * from any of these and the theme wins that state alone, which reads as a
 * button that changes colour at random. */
#page-container button.ng-add:hover,
#page-container button.ng-add:focus,
body button.ng-add:hover,
body button.ng-add:focus,
.ng-add:hover,
.ng-add:focus {
	background: #2d4ef4 !important;
	color: #ffffff !important;
}

#page-container button.ng-add:focus-visible,
body button.ng-add:focus-visible,
.ng-add:focus-visible {
	outline: 3px solid #f97a35 !important;
	outline-offset: 2px;
}

#page-container button.ng-add-on,
body button.ng-add-on,
.ng-add-on {
	background: #2d4ef4 !important;
	color: #ffffff !important;
	border-color: #2d4ef4 !important;
}

/* No ::before tick here. The tick lives in the button label in
 * armory-guest.js instead, because a CSS content escape has to survive
 * every tool between this file and the server, and on this machine it did
 * not: it arrived as a mangled byte plus a literal NUL. Text belongs in
 * the script that already sets the label anyway. */

/* ------------------------------------------------------------- sticky bar */

.ng-guest-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: #3c3c3c;
	border-top: 3px solid #f97a35;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.25);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ng-guest-bar[hidden] {
	display: none;
}

.ng-guest-count {
	flex: 1 1 auto;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: #eeeeee;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ng-guest-count::after {
	content: "\00a0\25B4";
}

.ng-guest-cta,
.ng-guest-cta:visited {
	display: inline-block;
	min-height: 44px;
	box-sizing: border-box;
	padding: 11px 20px;
	border-radius: 6px;
	background: #f97a35;
	color: #3c3c3c;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.ng-guest-cta:hover,
.ng-guest-cta:focus {
	background: #eeeeee;
	color: #3c3c3c;
	text-decoration: none;
}

.ng-guest-cta-wide {
	display: block;
	margin-top: 14px;
	text-align: center;
	white-space: normal;
}

/* ---------------------------------------------------------------- drawer */

.ng-guest-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 64px;
	z-index: 9991;
	max-height: 62vh;
	overflow-y: auto;
	margin: 0 auto;
	max-width: 640px;
	padding: 16px 18px 22px;
	background: #ffffff;
	border: 2px solid #b0aaaa;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.5;
}

.ng-guest-drawer[hidden] {
	display: none;
}

.ng-guest-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 2px solid #b0aaaa;
	font-size: 18px;
}

.ng-guest-close {
	padding: 6px 12px;
	border: 1px solid #b0aaaa;
	border-radius: 4px;
	background: #eeeeee;
	color: #3c3c3c;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.ng-guest-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.ng-guest-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eeeeee;
}

.ng-guest-label {
	font-weight: 700;
	font-size: 16px;
}

.ng-guest-comp {
	grid-column: 1 / 2;
	font-size: 14px;
	color: #3c3c3c;
	opacity: 0.85;
}

.ng-guest-rm {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	align-self: start;
	padding: 5px 10px;
	border: 1px solid #b0aaaa;
	border-radius: 4px;
	background: #ffffff;
	color: #3c3c3c;
	font-size: 13px;
	cursor: pointer;
}

.ng-guest-note,
.ng-guest-empty {
	margin: 0;
	font-size: 15px;
}

/* The screen-reader announcer. Present, off screen, never display:none, which
 * would stop it being announced at all. */
.ng-guest-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The sticky bar must never print, and neither must the drawer. A printed
 * catalogue page carrying our UI is noise on somebody's paper. */
@media print {
	.ng-guest,
	.ng-add {
		display: none !important;
	}
}

@media (max-width: 560px) {
	.ng-guest-bar {
		padding: 8px 12px;
	}

	.ng-guest-count {
		font-size: 15px;
	}

	.ng-guest-cta {
		font-size: 15px;
		padding: 11px 14px;
	}

	.ng-guest-drawer {
		bottom: 60px;
		max-height: 58vh;
		border-radius: 0;
	}
}

/* The dedupe and incompatibility warning inside the drawer. Amber, not red:
 * every one of these is useful information, not an error, and a red box makes
 * somebody think they did something wrong. */
.ng-guest-warn {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #fff8e6;
	border-left: 4px solid #f97a35;
	font-size: 15px;
	line-height: 1.45;
}

.ng-guest-warn p {
	margin: 0 0 6px;
}

.ng-guest-warn p:last-child {
	margin-bottom: 0;
}