/*
 * The licence calculator on a tiered product's page — see inc/tier-calc.php.
 *
 * The panel wears .sx-pricelist__row because that is what cart.js binds to,
 * which brings the price list's three-column grid with it. That grid exists to
 * line sixty rows up under each other; here there is one row and it is the
 * whole screen, so the layout is rebuilt from scratch below rather than
 * nudged.
 */

.sx-tier-calc__panel.sx-pricelist__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: end;
	gap: 1.5rem 2rem;
	padding: 1.5rem;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

/* Banding is a price-list device; a single panel must not inherit a stripe. */
.sx-tier-calc__panel.sx-pricelist__row.is-odd {
	background: var( --sx-surface );
}

.sx-tier-calc__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	grid-column: 1 / -1;
	margin: 0;
}

.sx-tier-calc__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	/* Enough for "Бюджетна / навчальна" without the selects going ragged. */
	min-width: 11rem;
	flex: 1 1 11rem;
}

.sx-tier-calc__hint {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var( --sx-text-secondary );
}

.sx-tier-calc__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --sx-text-secondary );
}

.sx-tier-calc__field .sx-qty,
.sx-tier-calc__field .sx-tier {
	box-sizing: border-box;
	width: 100%;
	height: var( --sx-control-height );
	padding: 0 0.75rem;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-btn );
	background: var( --sx-white );
	color: var( --sx-text );
	font: inherit;
	transition: border-color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-tier-calc__field .sx-qty:focus,
.sx-tier-calc__field .sx-tier:focus {
	border-color: var( --sx-brand );
	outline: 2px solid var( --sx-brand );
	outline-offset: 1px;
}

/* ---- The figure ---- */

.sx-tier-calc__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	min-width: 0;
}

.sx-tier-calc__total-label {
	flex: 0 0 100%;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --sx-text-secondary );
}

/*
 * Specificity has to beat .sx-pricelist__row.has-tiers .sx-pricelist__price
 * in shop.css, which sizes the figure for a list row.
 */
.sx-tier-calc__panel.sx-pricelist__row .sx-pricelist__price {
	font-size: clamp( 1.375rem, 1.1rem + 1vw, 1.75rem );
	font-weight: 700;
	line-height: 1.15;
	color: var( --sx-text );
	text-align: left;
	/* Digits change on every keystroke; tabular stops the figure jittering. */
	font-variant-numeric: tabular-nums;
}

.sx-tier-calc__vat {
	font-size: 0.8125rem;
	color: var( --sx-text-secondary );
}

/* ---- The button ---- */

.sx-tier-calc__buy {
	box-sizing: border-box;
	justify-self: end;
	min-height: var( --sx-control-height );
	padding: 0 1.5rem;
	border: 0;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-brand );
	/* White, like the price list's own .sx-add. --sx-brand-text is the dark red
	   for brand-coloured text on a light ground, and on the brand fill it is
	   red on red. */
	color: var( --sx-white );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-tier-calc__buy:hover,
.sx-tier-calc__buy:focus-visible {
	background: var( --sx-brand-hover );
}

/* ---- Narrow ---- */

@media ( max-width: 640px ) {
	.sx-tier-calc__panel.sx-pricelist__row {
		grid-template-columns: minmax( 0, 1fr );
		align-items: stretch;
		padding: 1.25rem;
	}

	.sx-tier-calc__field {
		/* One per line: two 11rem fields will not sit side by side here. */
		flex: 1 1 100%;
	}

	.sx-tier-calc__buy {
		justify-self: stretch;
		width: 100%;
	}
}