/* =====================================================================
 * Availability badge on calendar / widget event cards.
 * Colour comes from --etn-avail-color, set inline per status.
 * ================================================================== */

.etn-avail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	align-self: flex-start;
	flex: 0 0 auto;
	margin: 0 0 8px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--etn-avail-color, #00845c);
	border: 1px solid var(--etn-avail-color, #00845c);
	background: transparent;
}

.etn-avail--sold_out,
.etn-avail--waitlist {
	color: #fff;
	background: var(--etn-avail-color, #d63638);
	border-color: var(--etn-avail-color, #d63638);
}

/* The date line is rewritten server side; keep it from wrapping oddly. */
.etn-event-duration-date {
	font-variant-numeric: tabular-nums;
}


/* A small dot carries the state before the word does. */
.etn-avail::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* Inside Eventin's cards the badge sits in a stretch-aligned flex column,
   which turned it into a full-width bar wedged between the venue and the
   title. Pin it to its own line, at its natural width. */
.etn-event-item .etn-avail,
.etn-event-content .etn-avail,
.etn-event-single-item .etn-avail {
	display: inline-flex;
	float: none;
	margin: 4px 0 10px;
	clear: both;
}

.etn-event-item .etn-avail,
.etn-event-content .etn-avail {
	order: -1;
}