/**
 * Deliberately light styling. It inherits the theme's typography and colours
 * so cards sit inside the existing design rather than fighting it.
 */

.smudge-whmcs-card {
	display: flow-root;
}

.smudge-whmcs-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0 0 0.75em;
}

.smudge-whmcs-card__lead,
.smudge-whmcs-card__unit,
.smudge-whmcs-card__term {
	font-size: 0.85em;
	opacity: 0.75;
}

.smudge-whmcs-card__amount,
.smudge-whmcs-price {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.1;
	/* Stops the figure reflowing as digits change between cached renders. */
	font-variant-numeric: tabular-nums;
}

.smudge-whmcs-card__actions {
	margin: 1em 0 0;
}

/**
 * Set --smudge-button-bg and --smudge-button-fg in the theme to brand these;
 * the fallbacks are a neutral dark pill that reads on a light background.
 */
.smudge-whmcs-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 0.35em;
	text-decoration: none;
	line-height: 1.2;
	background: var(--smudge-button-bg, #1f2937);
	color: var(--smudge-button-fg, #ffffff);
}

.smudge-whmcs-button:hover,
.smudge-whmcs-button:focus-visible {
	background: var(--smudge-button-bg-hover, #111827);
	color: var(--smudge-button-fg, #ffffff);
}

/**
 * The feed emits inline width/height on each image, which is what actually
 * defeats a theme rule like "img { width: 100% }". Only max-width belongs here:
 * a "height: auto" in this stylesheet would outrank an image's own height
 * attribute and let an SVG with no intrinsic size expand to fill the column.
 */
.smudge-whmcs-description img,
.smudge-whmcs-features img {
	max-width: 100%;
}

/* Descriptions are plain text with line breaks, so give the lines room. */
.smudge-whmcs-description {
	line-height: 1.6;
}

/**
 * Feature list, matching how the WHMCS order form presents the same lines.
 * Set --smudge-tick to change the marker.
 */
.smudge-whmcs-features {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.smudge-whmcs-features li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.5em;
	line-height: 1.5;
}

.smudge-whmcs-features li::before {
	content: var(--smudge-tick, "\2713");
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.85;
}

/* Lines that are purely an image or a sub-heading do not want a tick. */
.smudge-whmcs-features li:has(> img:only-child)::before,
.smudge-whmcs-features li:has(> strong:only-child)::before {
	content: none;
}

.smudge-whmcs-features li:has(> img:only-child),
.smudge-whmcs-features li:has(> strong:only-child) {
	padding-left: 0;
}