/**
 * "Add another unit" in the Cart block. Loaded with cart-extras.js, because
 * the cart page doesn't load the unit-page styles.
 */

.bb-cart-more {
	margin: 12px 0 0;
	width: 100%;
}

.bb-cart-more .bb-add-more {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	text-align: center;
}

/* Classic cart template. */
p.bb-cart-more {
	text-align: center;
}

.bb-hold-expired {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: var( --bounce-radius, 18px );
	background: var( --bounce-soft, #fff4d6 );
	color: var( --bounce-ink, #1d2330 );
	font-weight: 600;
}

/* The reservation clock. Calm by default; warmer in the last five minutes. */
.bb-hold-timer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var( --bounce-radius, 18px );
	border: 1px solid var( --bounce-line, #e3e7ee );
	background: var( --bounce-soft, #f6f9fd );
	color: var( --bounce-ink, #1d2330 );
}

.bb-hold-timer strong {
	font-variant-numeric: tabular-nums;
}

.bb-hold-timer span {
	color: var( --bounce-muted, #5d6675 );
	font-size: 0.92rem;
}

.bb-hold-timer.is-soon {
	border-color: color-mix( in srgb, var( --bounce-primary, #e4262c ) 45%, transparent );
	background: color-mix( in srgb, var( --bounce-primary, #e4262c ) 8%, var( --bounce-soft, #fff ) );
}

.bb-hold-timer.is-soon strong {
	color: var( --bounce-primary-dark, #b3161c );
}

.bb-hold-timer .bb-hold-recheck {
	margin-left: auto;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: var( --bounce-primary, #e4262c );
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}