/* =====================================================================
   OPTIONAL UPGRADES PANEL
   ---------------------------------------------------------------------
   Styled to read as the monthly mailer does: navy rules and pills, a cyan
   accent on the selected row, prices right-aligned in a column so they scan
   vertically the way the pamphlet's spec lists do.

   Tokens come from the child stylesheet (section 5). Fallbacks are inlined on
   every var() because this file is also printed inline inside the Quick View
   modal, where load order is not guaranteed.
   ===================================================================== */

.pps-upgrades {
	margin: 0 0 22px;
	padding: 18px 20px 14px;
	border: 1px solid var(--pps-tint, #e8eff7);
	border-top: 3px solid var(--pps-bright, #1787f3);
	border-radius: 8px;
	background: #fff;
}

.pps-upgrades__intro {
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--pps-navy, #003468);
}

.pps-upgrades__group {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.pps-upgrades__legend {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 0 0 4px;
	border-bottom: 1px solid var(--pps-tint, #e8eff7);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pps-navy, #003468);
}

/* Each option is one full-width row: control, label, price. The price column is
   fixed so the numbers line up down the panel rather than ragging against
   labels of different lengths. */
.pps-upgrades__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 7px 8px;
	border-radius: 5px;
	cursor: pointer;
	line-height: 1.35;
}

.pps-upgrades__row:hover {
	background: var(--pps-tint, #e8eff7);
}

.pps-upgrades__row input {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--pps-navy, #003468);
}

.pps-upgrades__label {
	flex: 1 1 auto;
	min-width: 0;
}

.pps-upgrades__std {
	display: block;
	font-size: 12px;
	font-style: normal;
	opacity: .6;
}

.pps-upgrades__price {
	flex: 0 0 auto;
	min-width: 92px;
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
	color: var(--pps-navy, #003468);
}

.pps-upgrades__price--included {
	font-weight: 400;
	opacity: .55;
}

.pps-upgrades__price .amount {
	color: inherit;
}

/* A checked row gets the pamphlet's cyan marker rather than a background wash,
   so the selection stays legible against the hover state. */
.pps-upgrades__row:has(input:checked) {
	background: var(--pps-tint, #e8eff7);
	box-shadow: inset 3px 0 0 var(--pps-bright, #1787f3);
}

/* ---- quantity groups (server memory, drives, caddies) ---------------- */

/* A number field can't drive :has(:checked), so the script sets .is-chosen
   whenever a count is above zero; the row then reads exactly like a ticked one. */
.pps-upgrades__row.is-chosen {
	background: var(--pps-tint, #e8eff7);
	box-shadow: inset 3px 0 0 var(--pps-bright, #1787f3);
}

.pps-upgrades__row--qty {
	align-items: center;
}

.pps-upgrades__row--fixed {
	cursor: default;
}

.pps-upgrades__row--fixed:hover {
	background: none;
}

.pps-upgrades .pps-upgrades__qty {
	flex: 0 0 auto;
	width: 58px;
	height: 32px;
	min-height: 0;
	padding: 0 4px 0 8px;
	border: 1px solid var(--pps-tint, #e8eff7);
	border-radius: 5px;
	background: #fff;
	font-weight: 700;
	text-align: center;
	color: var(--pps-navy, #003468);
}

.pps-upgrades .pps-upgrades__qty:focus {
	border-color: var(--pps-bright, #1787f3);
	outline: none;
}

.pps-upgrades__cap {
	float: right;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .03em;
	opacity: .7;
}

.pps-upgrades__each {
	display: block;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	opacity: .6;
}

.pps-upgrades__por {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--pps-blue, #0152a3);
}

.pps-upgrades__note {
	margin: 0 0 12px;
	font-size: 12px;
	opacity: .75;
}

/* The running total, as a navy pill echoing the mailer's price badges. */
.pps-upgrades__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 0;
	padding: 12px 16px;
	border-radius: 999px;
	background: var(--pps-navy, #003468);
	color: #fff;
}

.pps-upgrades__total-label {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .85;
}

.pps-upgrades__total-value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.pps-upgrades__total-value .amount,
.pps-upgrades__total-value bdi {
	color: #fff;
}

.pps-upgrades__total-value small {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .8;
}

@media (max-width: 480px) {
	.pps-upgrades {
		padding: 14px 14px 12px;
	}

	/* Below 480px a three-column row wraps badly, so the price drops under the
	   label and aligns left with it rather than floating on its own line. */
	.pps-upgrades__row {
		flex-wrap: wrap;
	}

	.pps-upgrades__price {
		min-width: 0;
		margin-left: 26px;
		text-align: left;
	}

	/* ...or under the label past a quantity field, which is wider than a radio. */
	.pps-upgrades__row--qty:has(.pps-upgrades__qty) .pps-upgrades__price {
		margin-left: 68px;
	}

	.pps-upgrades__row--fixed .pps-upgrades__price {
		margin-left: 0;
	}

	.pps-upgrades__each {
		display: inline;
	}

	.pps-upgrades__total {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		border-radius: 12px;
	}
}