/* ============================================================
   SWEET MATH LEARNING - SHOP PAGES

   What a plan costs, and what kind of thing it is, wherever
   WooCommerce prints a price: the shop loop, the product page,
   the cart, the mini-cart and the checkout.

   Everything here is scoped to a class this plugin owns, and
   nothing sets a color that the theme has not already chosen -
   the wording inherits currentColor and only steps its opacity
   and size down, so it sits under the price on a light theme
   and on a dark one without either being specified.
   ============================================================ */

/* the cadence, hard against the figure: "$29.99 / month" */
.sml-billing-cycle {
	font-size: .82em;
	font-weight: 500;
	opacity: .7;
	white-space: nowrap;
}

/* what kind of thing this is, on its own line under the price */
.sml-plan-type {
	display: block;
	margin-top: .28em;
	font-size: .78em;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	opacity: .85;
}

/* trial, sign-up fee, fixed term, seats */
.sml-plan-notes {
	display: block;
	margin-top: .12em;
	font-size: .74em;
	font-weight: 400;
	line-height: 1.4;
	opacity: .62;
}

/* Price markup turns up inside headings and strong tags in plenty of
   themes. Neither line should inherit that weight or that size. */
h1 .sml-plan-type,
h2 .sml-plan-type,
h3 .sml-plan-type,
del .sml-plan-type,
ins .sml-plan-type,
h1 .sml-plan-notes,
h2 .sml-plan-notes,
h3 .sml-plan-notes,
del .sml-plan-notes,
ins .sml-plan-notes {
	font-weight: 400;
}

/* A struck-through original price must not drag the description
   through with it when a coupon or sale is running. */
del .sml-plan-type,
del .sml-plan-notes,
del .sml-billing-cycle {
	display: none;
}

/* the line under the product name in the cart, mini-cart and checkout */
.sml-cart-plan {
	display: block;
	margin-top: .25em;
	font-size: .8em;
	font-weight: 400;
	line-height: 1.4;
	opacity: .68;
}

/* what the plan unlocks, on the product page */
.sml-plan-features {
	margin: 1em 0 1.4em;
	padding: 0;
	list-style: none;
}

.sml-plan-features li {
	position: relative;
	padding: .22em 0 .22em 1.5em;
	font-size: .92em;
	line-height: 1.5;
}

/* A tick drawn rather than typed, so no icon font has to be present
   and no emoji can substitute itself in. */
.sml-plan-features li::before {
	content: "";
	position: absolute;
	left: .2em;
	top: .62em;
	width: .42em;
	height: .22em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .55;
}

@media (max-width: 600px) {
	.sml-plan-type,
	.sml-plan-notes,
	.sml-cart-plan {
		font-size: .78em;
	}
}