/**
 * Places left, on the product page.
 *
 * It sits above the add-to-cart button because that is where the decision is
 * made, and it is a list rather than a sentence because an event sells several
 * routes and only some of them run out.
 *
 * Colours come from the active theme's custom properties with fallbacks close
 * to them, as everywhere else this plugin renders on the front end.
 */

.fr-posti {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.fr-posti__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--fr-line, #e2e2df);
}

.fr-posti__row:first-child {
	border-top: 1px solid var(--fr-line, #e2e2df);
}

.fr-posti__route {
	color: var(--fr-ink, #1b1b1b);
}

.fr-posti__left {
	font-weight: 600;
	color: var(--fr-green, #693);
}

/* A route with nothing left is the one line on the list worth reading twice,
   so it stops being green and stops looking available. */
.fr-posti__row--full .fr-posti__route {
	color: var(--fr-muted, #5a5a55);
	text-decoration: line-through;
}

.fr-posti__row--full .fr-posti__left {
	color: #8c2f2f;
}