/* Pricing Table widget. */

.vora-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	height: 100%;
	padding: 30px 28px;
	overflow: hidden;
}

.vora-price.is-featured { z-index: 1; }

/*
 * A pill, not a rotated corner ribbon.
 *
 * A 45° band has to be a fixed width, and only its middle shows through the
 * clipped corner — so the label has to be short enough to fit that window.
 * "Most popular" already overflowed it, and a translation would be worse. A
 * pill sizes to whatever the label is, in any language, with no clipping
 * geometry to get wrong.
 */
.vora-price__ribbon {
	position: absolute;
	top: 16px;
	right: 16px;
	max-width: calc(100% - 32px);
	padding: 4px 12px 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 999px;
}

/* The ribbon sits in the card's top padding, so the head needs room for it —
   otherwise a long plan name runs underneath the pill. */
.vora-price:has(.vora-price__ribbon) .vora-price__head {
	padding-right: 92px;
}

.vora-price__head { display: flex; flex-direction: column; gap: 4px; }

.vora-price__title { margin: 0; font-size: 1.15rem; line-height: 1.25; }

.vora-price__subtitle { margin: 0; font-size: 0.9rem; opacity: 0.75; }

.vora-price__cost {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.vora-price__amount {
	display: inline-flex;
	align-items: baseline;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vora-price__currency { font-size: 0.55em; font-weight: 600; margin-right: 2px; }

.vora-price__was { font-size: 1.1rem; opacity: 0.5; }

.vora-price__period { font-size: 0.9rem; opacity: 0.75; }

.vora-price__features {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vora-price__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
}

.vora-price__tick {
	flex: none;
	display: inline-flex;
	margin-top: 0.2em;
	line-height: 1;
}

.vora-price__tick i,
.vora-price__tick svg {
	width: 0.9em;
	height: 0.9em;
	font-size: inherit;
}

.vora-price__note { opacity: 0.65; }

.vora-price__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Pushed to the bottom so a row of plans with different feature counts
	   still lines its buttons up. */
	margin-top: auto;
	padding: 13px 24px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vora-price__footnote {
	margin: 0;
	font-size: 0.82rem;
	text-align: center;
	opacity: 0.7;
}